/* ===================================== SBS ORGANİZASYON ŞEMASI PREMIUM DESIGN ===================================== */ /* ANA ALAN */ .sbs-org-chart { width:100%; overflow-x:auto; padding:50px 20px; text-align:center; } /* TREE */ .sbs-org-tree, .sbs-org-tree ul { display:flex; justify-content:center; gap:40px; position:relative; padding-top:50px; margin:0; } .sbs-org-tree { padding-left:0; } /* PERSONEL */ /* ===================================== PREMIUM ORGANİZASYON BAĞLANTISI ===================================== */ /* Kartlar için bağlantı alanı */ .sbs-org-tree li { position:relative; } /* Üst karttan gelen çizgi */ .sbs-org-tree ul li:before { content:""; position:absolute; top:-50px; left:50%; height:50px; width:2px; background:#d9dee5; transform:translateX(-50%); } /* Alt grup yatay bağlantı */ .sbs-org-tree > li > ul { position:relative; padding-top:60px; } /* Alt kartlara dağılan çizgi */ .sbs-org-tree > li > ul:before { content:""; position:absolute; top:30px; left:20%; right:20%; height:2px; background:#d9dee5; } /* Kartları çizginin üzerinde tut */ .sbs-org-item { position:relative; z-index:5; } /* Çizgi kartın arkasında kalsın */ .sbs-org-tree { position:relative; z-index:1; } /* ===================================== GENEL KART ===================================== */ .sbs-org-item { width:260px; min-height:320px; padding:25px; margin:auto; box-sizing:border-box; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; background: linear-gradient( 145deg, #ffffff, #f7f9fc ); border-radius:18px; border:1px solid rgba(0,0,0,.06); box-shadow: 0 15px 35px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.8); transition:.3s; } .sbs-org-item:hover { transform:translateY(-8px); box-shadow: 0 25px 55px rgba(0,0,0,.18); } /* ÜST ŞERİT */ .sbs-org-item:after { content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:#003b71; } /* FOTOĞRAF */ .sbs-staff-photo, .sbs-no-photo { width:140px; height:140px; margin:0 auto 15px; object-fit:cover; border-radius:12px; } .sbs-staff-photo { border:5px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.15); } .sbs-no-photo { display:flex; align-items:center; justify-content:center; background:#eee; font-size:40px; } /* İSİM */ .sbs-org-item h3 { width:100%; min-height:50px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:20px; font-weight:700; line-height:1.3; color:#222; margin:10px 0; word-break:break-word; } /* ÜNVAN */ .sbs-staff-title { display:flex; align-items:center; justify-content:center; text-align:center; min-height:35px; padding:7px 18px; border-radius:30px; background:#eef4fa; color:#003b71; font-size:16px; font-weight:700; margin-bottom:10px; } /* İLETİŞİM */ .sbs-contact { width:100%; background:#f5f7fa; padding:8px 12px; border-radius:8px; font-size:14px; color:#555; margin-top:8px; text-align:center; word-break:break-word; } /* ===================================== FEDERASYON BAŞKANI ===================================== */ .sbs-org-item.leader-card { width:400px; min-height:430px; padding:35px; background: linear-gradient( 145deg, #fffdf5, #ffffff ); box-shadow: 0 20px 45px rgba(176,141,44,.25); } .leader-card:after { background: linear-gradient( 90deg, #b08d2c, #e6c86e, #b08d2c ); } .leader-card .sbs-staff-photo { width:220px; height:220px; } .leader-card h3 { font-size:30px; } .leader-card .sbs-staff-title { background:#fff3cd; color:#8a6a12; } /* ===================================== GENEL SEKRETER ===================================== */ .sbs-org-item.secretary-card { width:300px; min-height:320px; background: linear-gradient( 145deg, #f5f9ff, #ffffff ); } .secretary-card:after { background: linear-gradient( 90deg, #003b71, #1b76c9, #003b71 ); } .secretary-card .sbs-staff-photo { width:160px; height:160px; } .secretary-card .sbs-staff-title { background:#e7f1ff; color:#003b71; } /* ===================================== BAĞLANTI ÇİZGİLERİ ===================================== */ .sbs-org-tree li { position:relative; } /* Üstten gelen dikey çizgi */ .sbs-org-tree li:before { content:""; position:absolute; top:0; left:50%; height:35px; border-left:2px solid #d5dbe1; transform:translateX(-50%); } /* Alt bağlantı çizgisi */ .sbs-org-tree li > ul:before { content:""; position:absolute; top:0; left:50%; width:calc(100% - 80px); border-top:2px solid #d5dbe1; transform:translateX(-50%); } /* Kart çizginin üstünde */ .sbs-org-item { position:relative; z-index:2; background:#fff; } /* ===================================== STANDART PERSONEL KARTI ===================================== */ .sbs-org-item:not(.leader-card):not(.secretary-card) { width:260px; height:360px; min-height:360px; } /* Normal personel fotoğraf */ .sbs-org-item:not(.leader-card):not(.secretary-card) .sbs-staff-photo, .sbs-org-item:not(.leader-card):not(.secretary-card) .sbs-no-photo { width:110px; height:110px; margin-bottom:10px; } /* İsim */ .sbs-org-item:not(.leader-card):not(.secretary-card) h3 { width:100%; height:50px; font-size:18px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center; margin:10px 0; } /* Ünvan */ .sbs-org-item:not(.leader-card):not(.secretary-card) .sbs-staff-title { width:100%; height:45px; font-size:14px; padding:5px 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.2; text-align:center; justify-content:center; align-items:center; } /* Telefon Mail */ .sbs-org-item:not(.leader-card):not(.secretary-card) .sbs-contact { width:100%; font-size:13px; padding:7px 8px; margin-top:6px; line-height:1.4; overflow-wrap:anywhere; text-align:center; } /* ===================================== MOBİL ===================================== */ @media(max-width:768px){ .sbs-org-tree, .sbs-org-tree ul { display:block; } .sbs-org-tree li { margin-bottom:30px; } .sbs-org-item, .sbs-org-item.leader-card, .sbs-org-item.secretary-card { width:90%; margin:auto; } }