/* ============================================================ Rotary Bölge 2430 — Design tokens ============================================================ */
:root {
  --navy: #333983;
  --navy-dark: #23275C;
  --navy-darker: #212529;
  --header-dark: #12172A;
  --header-dark-2: #212c3f;
  --azure: #00A9CE;
  --azure-dark: #00879F;
  --amber: #F7BD30;
  --cyan: #8FD6EF;
  --cyan-text: #0B2145;
  --text: #26292E;
  --text-light:#afafaf;
  --text-muted: #6B7280;
  --border: #E3E7ED;
  --bg-light: #F5F7FB;
  --white: #FFFFFF;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 2px 10px rgba(11, 43, 87, 0.1);
  --shadow-card-hover: 0 4px 16px rgba(11, 43, 87, 0.16);

  --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --container: 100%;
}

/* Bootstrap ile aynı .container kırılım genişlikleri (sm/md/lg/xl/xxl) */
@media (min-width: 576px)  { :root { --container: 540px; } }
@media (min-width: 768px)  { :root { --container: 720px; } }
@media (min-width: 992px)  { :root { --container: 960px; } }
@media (min-width: 1200px) { :root { --container: 1140px; } }
@media (min-width: 1400px) { :root { --container: 1320px; } }
@media (min-width: 1600px) { :root { --container: 1520px; } }
@media (min-width: 1700px) { :root { --container: 1620px; } }
@media (min-width: 1800px) { :root { --container: 1600px; } }
@media (min-width: 2000px) { :root { --container: 1900px; } }
/* ============================================================ Reset & base ============================================================ */
*{ box-sizing:border-box; outline:none; }
html{scroll-behavior:smooth;width:100%;min-height:100vh; /* Sticky header'ın boyu scroll'a bağlı değişince tarayıcının otomatik "scroll anchoring" düzeltmesi scroll pozisyonunu geri oynatıp titremeye (collapse/expand döngüsüne) yol açıyordu; bunu kapatıyoruz. */overflow-anchor:none; /* NOT: eskiden scrollbar-gutter:stable vardı (scrollbar alanı her zaman ayrılsın diye). Ama scroll gerektirmeyen kısa sayfalarda bu 15px'lik alan boş kalıp header/banner/footer gibi tam genişlik koyu bantların sağ kenara ulaşmasını engelliyor, sağda beyaz bir şerit bırakıyordu. Kaldırıldı; artık kısa sayfalarda içerik/bantlar pencere kenarına kadar uzanıyor, uzun (kayan) sayfalarda scrollbar normal şekilde çıkıyor. Modal/panel açılırken navbar'ın kaymaması scrollbar-gutter'a değil, main.js'teki kilidin overflow'u HİÇ değiştirmemesine (wheel/touch/klavye olaylarını engellemesine) dayanıyor; dolayısıyla bu kaldırma o davranışı bozmuyor. */overflow-y:auto;}
html.body-fix body{touch-action:none;}
/* Sticky footer: body dikey flex kolon + main esner → içeriği kısa sayfalar (ör. boş "Arama Sonuçları", Şifremi Unuttum) da viewport'u doldurur, footer en alta oturur. Aksi halde kısa sayfada footer yukarı çıkıp altında/sağında (scrollbar-gutter:stable ile ayrılmış) boş bir scroll alanı gibi görünen boşluk kalıyordu. Akıştaki tek body çocukları header/main/footer (dev toggle+modaller position:fixed, ikon sprite'ı .visually-hidden position:absolute — hepsi akış dışı). */
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;}
main{ flex:1 0 auto; }
h1, h2, h3, h4{font-family:var(--font-heading);color:var(--navy-dark);margin:0 0 .5em;line-height:1.15;}
p{ margin:0 0 1em; color:var(--text-muted); line-height:1.7; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
/* .container her ekranda (--container'ın kendi kırılım basamaklarıyla) büyümeye devam eder; bu varyantlar ise ekran boyutundan bağımsız SABİT bir üst genişlik sınırı ister (ör. form gibi her zaman dar kalması gereken içerikler için). */
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl{width:100%;margin:0 auto;padding:0 24px;}
.container-sm{ max-width:540px; }
.container-md{ max-width:720px; }
.container-lg{ max-width:960px; }
.container-xl{ max-width:1140px; }
.container-xxl{ max-width:1320px; }
.visually-hidden{position:absolute; width:1px; height:1px;overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap;}
/* ============================================================ Buttons ============================================================ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;border:1.5px solid transparent;transition:background .18s ease, color .18s ease, border-color .18s ease;white-space:nowrap;}
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn--navy{background:var(--navy);color:var(--white);}
.btn--navy:hover{ background:var(--navy-dark); }
.btn--light{background:var(--white);color:var(--navy);}
.btn--light:hover{ background:var(--bg-light); }
.btn--accent{background:var(--azure);color:var(--white);}
.btn--accent:hover{ background:var(--azure-dark); }
.btn--outline{background:transparent;color:var(--navy);border-color:var(--navy);}
.btn--outline:hover{ background:var(--navy); color:var(--white); }
.btn--outline-light{background:transparent;color:var(--white);border-color:rgba(255, 255, 255, .6);}
.btn--outline-light:hover{ background:var(--white); color:var(--navy-dark); }
.btn--sm{ padding:7px 14px; font-size:12px; }
.btn--cyan{background:var(--cyan);color:var(--cyan-text);}
.btn--cyan:hover{ background:#A9E3F5; }
.btn--danger{background:#B3261E;color:var(--white);}
.btn--danger:hover{ background:#8f1e17; }
.btn--success{background:#1F7A5C;color:var(--white);}
.btn--success:hover{ background:#175f47; }
.btn--green{background:#2E9E4F;color:var(--white);}
.btn--green:hover{ background:#25813F; }
.btn--coral{background:#E1604C;color:var(--white);}
.btn--coral:hover{ background:#C94E3B; }
.btn--amber{background:var(--amber);color:var(--navy-dark);}
.btn--amber:hover{ background:#E8AC1F; }
/* ============================================================ Icon buttons ============================================================ */
.icon-btn{width:38px; height:38px;display:inline-flex; align-items:center; justify-content:center;border-radius:50%;border:1px solid var(--border);background:var(--white);color:var(--navy);transition:background .18s ease, color .18s ease, border-color .18s ease;}
.icon-btn:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.icon-btn svg{ width:16px; height:16px; }
.icon-btn--dark{background:transparent;border-color:rgba(255, 255, 255, .4);color:var(--white);}
.icon-btn--dark:hover{ background:var(--white); color:var(--header-dark-2); border-color:var(--white); }
/* ============================================================ Navbar ============================================================ */
.navbar{background:var(--header-dark-2);position:sticky;top:0;z-index:100;}
.navbar__main{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px;transition:max-height .3s ease, opacity .25s ease, padding-top .3s ease, padding-bottom .3s ease;}
/* Masaüstünde scroll aşağı yönlüyken navbar__main'i katlayıp sadece menüyü sabit bırakır; mobilde navbar__main içinde logo/hamburger de olduğundan bu davranış devre dışı kalır. */
@media (min-width:992px){
    .navbar__main{ overflow:hidden; max-height:120px; }
    .navbar.is-collapsed .navbar__main{max-height:0;opacity:0;padding-top:0;padding-bottom:0;pointer-events:none;}
}
.navbar__logo{display:flex;align-items:center;gap:12px;flex-shrink:0; /* background: var(--white); padding: 6px 12px; border-radius: var(--radius-sm); */}
.navbar__logo img{ height:56px; width:auto; transition:height .2s ease; }
.navbar.is-stuck .navbar__main{padding-top:6px;padding-bottom:6px;}
.navbar.is-stuck.is-collapsed .navbar__main{padding-top:0px;padding-bottom:0px;}
.navbar.is-stuck .navbar__logo img{ height:42px; }
.navbar__main-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.navbar__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px; height:40px;background:none; border:none;}
.navbar__toggle span{ display:block; width:100%; height:2px; background:var(--white); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
/* Menü açıkken hamburger çarpıya dönüşür: çizgiler 2px kalın + 5px aralıklı, yani merkezler arası 7px; üst ve alt çizgi ortaya kayıp ±45° döner, ortadaki kaybolur. */
.navbar__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(0); }
.navbar__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion:reduce){ .navbar__toggle span{ transition:none; } }
.navbar__nav{background:var(--header-dark);}
.navbar__menu{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:0;}
/* "Siz de Katılın" eklenince menü 992-1439px arasında (giriş yapılmışken Arama ve Bölge Rehberi de geldiği için) ikinci satıra kayıyordu; bu aralıkta öğe aralığını daraltıyoruz. */
@media (min-width:992px) and (max-width:1439.98px){ .navbar__menu{ gap:18px; } }
.navbar__menu a{font-size:15px;font-weight:700;color:var(--white);display:inline-block;padding:12px 0;border-bottom:2px solid transparent;transition:color .18s ease, border-color .18s ease;}
.navbar__menu a:hover, .navbar__menu a.is-active{color:var(--amber);border-color:var(--amber);}
.has-dropdown{ position:relative; }
.dropdown{display:none;position:absolute;top:100%;left:-20px;min-width:260px;background:var(--header-dark-2);border:1px solid var(--header-dark);border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:0 12px 28px rgba(11, 43, 87, .25);padding:8px 0;z-index:200;}
.has-dropdown:hover .dropdown:not(.dropdown--lang){ display:block; }
.dropdown li a{display:block;padding:8px 18px;font-size:13.5px;font-weight:500;color:var(--white);border-bottom:none;white-space:normal;transition:background .15s ease, color .15s ease;}
.dropdown li a:hover{ background:var(--header-dark);color:var(--amber); }
.dropdown:not(.dropdown--lang) li a.is-active{ background:var(--header-dark);color:var(--amber); }
/* Dil seçici artık topbar içinde değil, navbar__main-actions içinde arama/hesap ikon
   butonlarının yanında duruyor; bu yüzden onlarla aynı formatta: aynı 38px yükseklik, aynı
   kenarlık ve aynı hover renkleri — sadece "TR" metnine yer açmak için hap biçiminde. */
.lang-switch{ position:relative; display:inline-flex; align-items:center; flex-shrink:0; }
.lang-switch__btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;border:1px solid rgba(255, 255, 255, .4);background:transparent;font-size:13px;font-weight:600;line-height:1;color:var(--white);transition:background .18s ease, color .18s ease, border-color .18s ease;}
.lang-switch__btn:hover{ background:var(--white); color:var(--header-dark-2); border-color:var(--white); }
.lang-switch__btn svg{ width:14px; height:14px; }
.lang-switch__btn svg:last-child{ width:10px; height:10px; }
/* .navbar__main, kendi collapse animasyonları için overflow:hidden kullanıyor; bu dil menüsünü de kırptığı için (position:absolute yerine) fixed yapıp konumunu (top/right) main.js'te tetikleyici elemanın gerçek viewport konumuna göre hesaplıyoruz — böylece header'ın altında/gizli kalmıyor. */
.dropdown--lang{position:fixed;top:auto;left:auto;right:auto;min-width:160px;display:none;}
.dropdown--lang.is-open{ display:block; }
.dropdown--lang li a.is-active{ color:var(--navy); font-weight:700; }
/* ============================================================ User account menu ============================================================ */
.user-menu{ position:relative; display:flex; align-items:center; }
/* Giriş yapılmış olduğunu tek bakışta belli etmek için ikonun üstünde yeşil bir nokta gösteriyoruz — özellikle mobilde ad/soyad artık panel içine taşındığı için (aşağıdaki .user-dropdown notuna bakın) bu işaret olmadan anlaşılmıyordu. */
.user-menu__badge{position:absolute;top:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:#2FB56A;border:2px solid var(--header-dark-2);}
/* Ad/soyad + "Hoşgeldiniz" + "Çıkış Yap" eskiden ikonun yanında sabit metin olarak duruyordu; mobilde dar alanda taşıp header'ı bozuyordu. .lang-switch'te olduğu gibi position:fixed ile ikona tıklanınca açılan bir panele çevirdik — böylece navbar akışında hiç yer kaplamıyor. */
.user-dropdown{position:fixed;top:auto;left:auto;right:auto;display:none;flex-direction:column;align-items:flex-start;min-width:200px;padding:16px 20px;}
.user-dropdown.is-open{ display:flex; }
.user-dropdown__greeting{ width:100%; line-height:1.4; }
.user-dropdown__hello{ margin:0 0 2px; font-size:11px; color:rgba(255, 255, 255, .55); }
.user-dropdown__name{ display:block; margin-bottom:10px; font-size:14.5px; font-weight:700; color:var(--white); }
.user-dropdown__name:hover{ color:var(--amber); text-decoration:underline; }
.user-dropdown__logout{display:block;width:100%;padding-top:10px;font-size:12.5px;color:rgba(255, 255, 255, .55);border-top:1px solid rgba(255, 255, 255, .15);}
.user-dropdown__logout:hover{ color:var(--amber); text-decoration:underline; }
/* ============================================================ Search modal ============================================================ */
.search-modal{position:fixed;inset:0;z-index:1000;opacity:0;pointer-events:none;transition:opacity .28s ease;}
.search-modal.is-open{ opacity:1; pointer-events:auto; }
.search-modal__backdrop{position:absolute;inset:0;background:rgba(10, 14, 30, .65);}
.search-modal__panel{position:relative;margin:110px auto 0;width:90%;max-width:620px;background:var(--white);border-radius:var(--radius-lg);padding:50px;box-shadow:0 30px 70px rgba(0, 0, 0, .35);transform:translateY(-18px) scale(.98);transition:transform .28s ease;}
.search-modal.is-open .search-modal__panel{ transform:translateY(0) scale(1); }
.search-modal__close{position:absolute;top:5px; right:5px;width:32px; height:32px;display:flex; align-items:center; justify-content:center;border-radius:50%;border:none;background:var(--bg-light);color:var(--text);transition:background .18s ease;}
.search-modal__close:hover{ background:var(--border); }
.search-modal__close svg{ width:16px; height:16px; }
.search-modal__form{display:flex;align-items:center;gap:5px;border-bottom:2px solid var(--border);padding-bottom:16px;}
.search-modal__form svg{ width:20px; height:20px; color:var(--text-muted); flex-shrink:0; }
.search-modal__input{flex:1;border:none;outline:none;font-size:18px;font-family:inherit;padding:8px 0;color:var(--text);}
.search-modal__input::placeholder{ color:var(--text-muted); }
/* ============================================================ Login side panel ============================================================ */
.login-panel{position:fixed;inset:0;z-index:1000;pointer-events:none;}
.login-panel.is-open{ pointer-events:auto; }
.login-panel__backdrop{position:absolute;inset:0;background:rgba(10, 14, 30, .55);opacity:0;transition:opacity .3s ease;}
.login-panel.is-open .login-panel__backdrop{ opacity:1; }
.login-panel__drawer{position:absolute;top:0; right:0;height:100%;width:100%;max-width:420px;background:var(--white);border-top:4px solid var(--navy);padding:44px 32px 32px;overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .32s ease;}
.login-panel.is-open .login-panel__drawer{ transform:translateX(0); }
.login-panel__close{position:absolute;top:16px; right:16px;width:32px; height:32px;display:flex; align-items:center; justify-content:center;border-radius:50%;border:none;background:var(--bg-light);color:var(--text);transition:background .18s ease;box-shadow:-20px 0 50px rgba(0, 0, 0, .25);}
.login-panel__close:hover{ background:var(--border); }
.login-panel__close svg{ width:16px; height:16px; }
.login-panel__title{font-size:22px;font-weight:700;color:var(--navy);text-transform:uppercase;margin:0 0 28px;}
.login-panel__form{ display:flex; flex-direction:column; }
.login-panel__label{ font-size:13px; font-weight:700; display:inline-block; color:var(--text); margin-bottom:8px; }
.login-panel__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.login-panel__row .login-panel__label{ margin-bottom:0; }
.login-panel__forgot{ font-size:13px; font-style:italic; color:var(--navy); }
.login-panel__forgot:hover{ text-decoration:underline; }
.login-panel__input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;color:var(--text);margin-bottom:22px;}
.login-panel__input:focus{ outline:none; border-color:var(--navy); }
.login-panel__check{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--navy);margin-bottom:12px;cursor:pointer;}
.login-panel__check input{ width:16px; height:16px; margin-top:2px; accent-color:var(--navy); cursor:pointer; flex-shrink:0; }
.login-panel__policy-link{ font-weight:700; text-decoration:underline; transition:color .18s ease; }
.login-panel__policy-link:hover{ color:var(--navy-dark); }
.login-panel__submit{align-self:flex-end;margin-top:16px;text-transform:uppercase;padding:12px 32px;}
/* ============================================================ Giriş Yap (sayfa hâli) ============================================================ */
.login-page{ display:flex; justify-content:center; }
.login-page__card{width:100%;max-width:460px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:36px;}
.login-page__card--wide{ max-width:620px; }
.login-page__title{ font-size:22px; margin:0 0 10px; text-align:center; }
.login-page__note{ font-size:13px; color:var(--text-muted); text-align:center; margin:0 0 24px; }
.login-page__error{ font-size:13.5px; color:#B3261E; background:#FBEAE9; border-radius:var(--radius-sm); padding:10px 14px; margin:0 0 18px; }
/* Şifremi Unuttum: gönderim sonrası başarı durumu + forma geri dönüş bağlantısı. */
.login-page__success{font-size:13.5px;color:#1F7A5C;background:#E3F5EA;border-radius:var(--radius-sm);padding:10px 14px;margin:0 0 20px;text-align:center;}
.login-page__actions{ text-align:center; margin-top:8px; }
/* Giriş gerektiren içerik yer tutucusu (ör. Kulüp Bilgi Formu) */
.auth-gate{max-width:560px;margin:0 auto;text-align:center;background:var(--bg-light);border-radius:var(--radius-lg);padding:48px 36px;}
.auth-gate svg{ width:40px; height:40px; color:var(--navy); margin:0 auto 18px; }
.auth-gate__title{ font-size:20px; margin:0 0 10px; }
.auth-gate__desc{ font-size:14px; color:var(--text-muted); margin:0 0 24px; }
/* ============================================================ Ödeme Sonucu (odeme-sonucu.php) ============================================================ */
.payment-result{max-width:560px;margin:0 auto 24px;text-align:center;border-radius:var(--radius-lg);padding:48px 36px;}
.payment-result--success{ background:#E3F5EA; }
.payment-result--error{ background:#FBEAE9; }
.payment-result__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;margin:0 auto 18px;}
.payment-result--success .payment-result__icon{ background:#1F7A5C; color:var(--white); }
.payment-result--error .payment-result__icon{ background:#B3261E; color:var(--white); }
.payment-result__icon svg{ width:28px; height:28px; }
.payment-result__title{ font-size:22px; margin:0 0 8px; }
.payment-result--success .payment-result__title{ color:#1F7A5C; }
.payment-result--error .payment-result__title{ color:#B3261E; }
.payment-result__desc{ font-size:14px; color:var(--text-muted); margin:0; }
.payment-result__actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
/* ============================================================ Üye Paneli (giriş sonrası gösterilen kart menüsü) ============================================================ */
.panel-grid{display:grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap:24px;}
.panel-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 20px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);text-align:center;transition:box-shadow .18s ease, transform .18s ease;}
.panel-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-3px); }
.panel-card__icon{width:64px; height:64px;flex-shrink:0;border-radius:50%;background:var(--navy);color:var(--white);display:flex; align-items:center; justify-content:center;}
.panel-card__icon svg{ width:30px; height:30px; }
.panel-card__label{ font-size:14px; font-weight:600; color:var(--navy); }
/* ============================================================ Kulüp Bilgi Formu ============================================================ */
.kbf-form__head{ margin-bottom:8px; }
.kbf-form__title{ font-size:22px; margin:0; }
.kbf-form__note{ font-size:13px; color:var(--text-muted); margin:0 0 28px; }
.kbf-form__submit{ display:flex; justify-content:flex-end; }
/* Şifre Değiştir gibi .form-section sarmalayıcısı olmadan (gri kutu istenmeyen, sade sayfalarda) doğrudan .form-grid/.form-field--full kullanılan formlarda, .form-section'ın kendi margin-bottom'u devreye girmediği için Kaydet butonu son alana yapışık duruyordu. */
.form-grid + .kbf-form__submit, .form-field--full + .kbf-form__submit, .login-panel__check + .kbf-form__submit{ margin-top:24px; }
.form-grid + .login-panel__check, .form-field--full + .login-panel__check{ margin-top:20px; }
.kbf-form__divider{ border:none; border-top:1px solid var(--border); margin:20px 0; }
.form-section{background:var(--bg-light);border-radius:var(--radius-lg);padding:24px 28px;margin-bottom:24px;}
.form-section__title{font-size:16px;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.form-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:18px 24px;}
/* Aynı form-section içinde art arda iki form-grid varsa (ör. Üye Bilgileri'nde 3'lü + 2'li satırları ayrı gruplamak için) ya da bir form-grid ile tek başına duran bir form-field--full (ör. Proje Ekle'deki Ana Resim/Açıklama/Galeri/ Dosya alanları) yan yana gelirse, aralarında hiç boşluk kalmıyordu — grid'in kendi row-gap'i sadece KENDİ satırları arasında geçerli. Dört olası ardışıklık kombinasyonuna da aynı boşluğu ekliyoruz ki görünüm her zaman kesintisiz olsun. */
.form-grid + .form-grid, .form-field--full + .form-grid, .form-grid + .form-field--full, .form-field--full + .form-field--full{margin-top:18px;}
/* flex:1 1 auto + sabit width ile: bir satırda eş bulamayan (tek kalan) son alan, satırda paylaşacak komşusu olmadığı için grow ile boşluğun tamamını kendiliğinden kaplar — alan eklenip çıkarıldıkça manuel "full" ataması gerekmez. */
.form-field{ flex:1 1 auto; width:calc(50% - 12px); display:flex; flex-direction:column; }
.form-field--full{ flex:1 1 100%; width:100%; }
/* Üçlü düzen: aynı otomatik-doldurma mantığı (flex:1 1 auto + sabit width) burada da geçerli — satırda 3, kalan 2 ise yarı yarıya, kalan 1 ise tam genişlik olur. */
.form-grid--triple .form-field{ width:calc(33.333% - 16px); }
.form-field .login-panel__input{ margin-bottom:0; background:var(--white); }
.form-field .login-panel__input[readonly]{ background:var(--border); color:var(--text-muted); cursor:not-allowed; }
.form-radio-group{ display:flex; align-items:center; gap:20px; padding-top:4px; }
.form-radio{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); cursor:pointer; }
.form-radio input{ width:16px; height:16px; accent-color:var(--navy); cursor:pointer; }
/* Proje/Haber Ekle-Düzenle: ana resim, resim galerisi, dosya yükleme alanları. Gerçek yükleme yerine seçilen dosyalar client-side önizleniyor (bu panelin diğer Kaydet butonları gibi demo/placeholder içerik — kalıcı bir depolama yok). */
.media-upload{display:block;position:relative;width:100%;aspect-ratio:16/6;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;background:var(--bg-light);border:1px dashed var(--border);}
.media-upload img{ width:100%; height:100%; object-fit:cover;object-position:center; display:block; }
.media-upload input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.media-gallery{ display:flex; flex-wrap:wrap; gap:12px; }
.media-gallery__item{position:relative;width:110px; height:90px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-light);}
.media-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Sil butonunun çarpısı SVG ikon yerine CSS ile çiziliyor — küçük boyutta (20px yuvarlak) sprite'taki ince stroke'lu çarpı belli olmuyordu, burada kalınlığı/rengi tam kontrol edilebiliyor. */
.media-gallery__item-remove{position:absolute;top:4px; right:4px;width:20px; height:20px;padding:0;border:none;border-radius:50%;background:rgba(179, 38, 30, .95);cursor:pointer;z-index:1;}
.media-gallery__item-remove::before, .media-gallery__item-remove::after{content:"";position:absolute;top:50%; left:50%;width:10px; height:2px;background:var(--white);border-radius:1px;transform:translate(-50%, -50%) rotate(45deg);}
.media-gallery__item-remove::after{ transform:translate(-50%, -50%) rotate(-45deg); }
.media-gallery__item-remove:hover{ background:#8f1e17; }
.media-gallery__add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:110px; height:90px;border-radius:var(--radius-sm);border:1px dashed var(--border);background:var(--bg-light);color:var(--text-muted);font-size:12px;cursor:pointer;position:relative;}
.media-gallery__add svg{ width:18px; height:18px; }
.media-gallery__add input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
/* Dosya kutuları da galeri gibi tek tip önizleme düzeninde: "Dosya Seç" artık
   büyük bir alan kaplamıyor, galerideki "Ekle" karosu gibi sabit küçük bir
   kutu — seçilen dosyalar yanına aynı boyutta beyaz kutular olarak ekleniyor. */
.media-filedrop{display:flex;flex-wrap:wrap;gap:12px;}
.media-filedrop__add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:110px; height:90px;border-radius:var(--radius-sm);border:1px dashed var(--border);background:var(--bg-light);color:var(--text-muted);font-size:12px;cursor:pointer;position:relative;}
.media-filedrop__add svg{ width:18px; height:18px; }
.media-filedrop__add input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.media-filedrop__item{position:relative;width:110px; height:90px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 6px;text-align:center;overflow:hidden;}
.media-filedrop__item svg{ width:22px; height:22px; color:var(--navy); flex-shrink:0; }
.media-filedrop__list-name{width:100%;font-size:11px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Öykü Yarışması başvuru formu gibi tek dosyalık alanların, küçük galeri karosu yerine diğer form alanlarıyla aynı genişlikte bir "Dosya Seç" kutusu olarak görünmesi gerektiği sayfalar için tam genişlik varyantı. */
.media-filedrop--full{ display:block; }
.media-filedrop--full .media-filedrop__add, .media-filedrop--full .media-filedrop__item{width:100%;height:auto;flex-direction:row;justify-content:flex-start;gap:10px;padding:12px 14px;}
.media-filedrop--full .media-filedrop__item{ text-align:left; }
.media-filedrop--full .media-filedrop__list-name{ width:auto; flex:1; white-space:normal; }
.media-filedrop--full .media-filedrop__item + .media-filedrop__add{ margin-top:10px; }
/* Haber Açıklaması gibi zengin metin alanları için hafif bir editör: gerçek TinyMCE yerine contenteditable + document.execCommand tabanlı, sitenin diğer bölümleriyle aynı sade görünüme sahip küçük bir araç çubuğu. */
.rich-editor{ border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:22px; background:var(--white); }
.rich-editor__toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:6px; background:var(--bg-light); border-bottom:1px solid var(--border); }
.rich-editor__btn{display:flex;align-items:center;justify-content:center;width:30px; height:30px;border:none;border-radius:4px;background:transparent;color:var(--text);cursor:pointer;}
.rich-editor__btn:hover{ background:var(--white); color:var(--navy); }
.rich-editor__btn.is-active{ background:var(--navy); color:var(--white); }
.rich-editor__btn svg{ width:15px; height:15px; }
.rich-editor__sep{ width:1px; height:20px; background:var(--border); margin:0 4px; }
.rich-editor__body{min-height:160px;max-height:320px;overflow-y:auto;padding:12px 14px;font-size:14px;font-family:inherit;line-height:1.6;color:var(--text);outline:none;}
.rich-editor__body:empty::before{ content:attr(data-placeholder); color:var(--text-muted); }
.rich-editor__body p{ margin:0 0 10px; }
.rich-editor__body p:last-child{ margin-bottom:0; }
.rich-editor__body ul, .rich-editor__body ol{ margin:0 0 10px; padding-left:22px; }
/* Aranabilir açılır liste (Sektör Kodu, Sınıf, Bildiğiniz Yabancı Diller gibi uzun listeler için) — yazınca filtreleyen basit bir combobox. */
.searchable-select{ position:relative; }
/* input varsayılan olarak inline-block render edilir; block bir sarmalayıcı (.searchable-select) içinde bu satır-kutusu mantığı yüzünden altında birkaç piksellik "hayalet" boşluk oluşup sarmalayıcıyı normal input'lardan uzun gösteriyordu (ör. filtre satırındaki Üye Türü kutusu Ara kutusundan uzundu). */
.searchable-select__input{ display:block; cursor:pointer; padding-right:36px; }
.searchable-select__arrow{position:absolute;top:50%;right:14px;width:12px;height:12px;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;transition:transform .15s ease;}
.searchable-select.is-open .searchable-select__arrow{ transform:translateY(-50%) rotate(180deg); }
/* Seçenekleri başka bir alana bağlı olan alanlar (ör. Kulüplerimiz'de Ülke
   seçilmeden Şehir): input disabled olduğu için zaten tıklanmıyor, burada
   yalnızca "şu an kullanılamaz" görünümünü veriyoruz. */
.searchable-select.is-disabled .searchable-select__input{ background:var(--bg-light); color:var(--text-muted); cursor:not-allowed; }
.searchable-select.is-disabled .searchable-select__arrow{ opacity:.4; }
/* Köşe yuvarlaklığı + scroll bir arada: yuvarlatma/gölge/arka plan DIŞ sarmalayıcıda (list-wrap, overflow:hidden ile gerçekten kırpıyor), scroll İÇ <ul>'de. Aksi halde listenin kendi scrollbar'ı köşeleri düz gösteriyordu.
   Konumlandırma: burada position:absolute varsayılan/kapalı durumdaki değer — liste açılınca main.js bunu document.body'ye taşıyıp position:fixed + gerçek viewport koordinatlarıyla konumluyor (dil menüsü/tooltip'teki fixed-dropdown tekniğiyle aynı mantık). Böylece .record-modal__scroll gibi overflow'lu bir üstün İÇİNDE kalsa bile liste modalın dışına taşabiliyor, kırpılmıyor. z-index modal'ların (1100) üzerinde kalsın diye 1200. */
.searchable-select__list-wrap{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 14px 32px rgba(11, 43, 87, .22);z-index:1200;display:none;overflow:hidden;}
/* Bu kural sadece liste document.body'ye taşınmadan ÖNCEki bir anlık kapalı durum için; taşındıktan sonra main.js top/bottom/left/width'i doğrudan inline style ile (gerçek piksel değerleriyle) yazıyor ve bu, aşağıdaki yüzde tabanlı kuralın önüne geçiyor. */
.searchable-select.is-open-up .searchable-select__list-wrap{ top:auto; bottom:calc(100% + 6px); }
.searchable-select.is-open .searchable-select__list-wrap{ display:block; }
/* .content-page ul{list-style:disc} normal makale listelerinden daha özgül olduğu için (.content-page .searchable-select__list) yazıp burayı kazandırıyoruz, yoksa madde işaretleri boşuna kalıyordu. */
.content-page .searchable-select__list, .searchable-select__list{max-height:200px;overflow-y:auto;overscroll-behavior:contain;padding:8px;list-style:none;margin:0;scrollbar-width:thin;}
.searchable-select__list::-webkit-scrollbar{ width:8px; }
.searchable-select__list::-webkit-scrollbar-track{ background:transparent; }
.searchable-select__list::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.searchable-select__list::-webkit-scrollbar-thumb:hover{ background:var(--text-muted); }
.searchable-select__option{display:flex;align-items:center;gap:8px;padding:5px 12px;margin-bottom:2px;border-radius:var(--radius-sm);font-size:13.5px;color:var(--text);cursor:pointer;transition:background .12s ease, color .12s ease;}
.searchable-select__option:last-child{ margin-bottom:0; }
.searchable-select__option:hover, .searchable-select__option.is-highlighted{ background:var(--bg-light); color:var(--navy); }
.searchable-select__option.is-selected{ color:var(--navy); font-weight:700; background:var(--bg-light); }
.searchable-select__option.is-selected::after{content:'';width:6px;height:6px;margin-left:auto;flex-shrink:0;border-radius:50%;background:var(--navy);}
.searchable-select__option.is-filtered-out{ display:none; }
/* Filtre alanlarındaki "seçimi kaldır" seçeneği (boş değer): gerçek bir
   seçenek değil, listedeki diğerlerinden ayrılsın diye soluk. */
.searchable-select__option--empty{ color:var(--text-muted); border-bottom:1px solid var(--border); border-radius:0; margin-bottom:6px; padding-bottom:8px; }
.searchable-select__empty{ padding:12px 14px; font-size:13px; color:var(--text-muted); text-align:center; display:none; }
.searchable-select__empty.is-visible{ display:block; }
/* ============================================================ Veri listesi (Aile Üyeleri vb.) — form-section ile aynı açık gri zemin, tablo elementi kullanmadan grid ile tablo görünümü. ============================================================ */
.data-panel{background:var(--bg-light);border-radius:var(--radius-lg);padding:24px 28px;}
.data-panel + .data-panel{ margin-top:24px; }
.data-panel__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.data-panel__title{ font-size:16px; margin:0; color:var(--navy); }
.data-panel__head-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.data-panel__title-sub{ font-size:13px; font-weight:400; color:var(--text-muted); margin-left:8px; }
/* Dar ekranlarda satırları kart görünümüne çevirmek yerine, klasik <table> gibi davranıp yatay kaydırma ile çalışıyor: satırlar min-width altına sıkışmıyor, taşan kısım bu sarmalayıcı üzerinden kaydırılıyor. */
.record-table-wrap{ overflow-x:auto; }
.record-table{ display:flex; flex-direction:column; font-size:13.5px; min-width:640px; }
.record-table__row{display:grid;grid-template-columns: 64px 1.6fr 1fr 1.7fr 130px;align-items:center;gap:12px;padding:13px 10px;border-bottom:1px solid var(--border);}
.record-table__row:last-child{ border-bottom:none; }
.record-table__row--head{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);border-bottom:2px solid var(--border);}
.record-table__row:not(.record-table__row--head):hover{ background:var(--white); border-radius:var(--radius-sm); }
.record-table__cell{ color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.record-table__cell--email{ color:var(--navy); }
.record-table__cell--actions{ display:flex; justify-content:flex-end; gap:8px; text-align:right; overflow:visible; }
/* Kulüp Üyeleri listesi bir sütun fazla (Cep Telefonu) — aile üyelerinin 5 sütunluk sabit oranı burada uymuyor, kendi oranını tanımlıyoruz. */
.record-table--members .record-table__row{ grid-template-columns: 56px 1.4fr 1.2fr 1.6fr 90px 120px; }
.record-table--members{ min-width:760px; }
/* Devam Raporu: çok sütunlu (Değiştir + Sil iki ayrı buton) bir liste. */
.record-table--reports .record-table__row{grid-template-columns: 56px 1fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 170px;}
.record-table--reports{ min-width:1080px; }
/* Proje Yönetimi: # / Proje Adı / Kulüp Adı / Dönem / Tarih / Durumu / İncele / Yorumlar / İşlemler. Proje Adı/Yorumlar 2 satıra sarıp tooltip ile tamamını gösterdiği için (aşağıdaki --clamp2) tek satırlık geniş sütuna ihtiyaç kalmadı; masaüstünde (~1140px+ içerik alanı) scroll çıkarmaması için min-width düşürüldü. */
.record-table--projects .record-table__row{grid-template-columns: 56px 1.8fr 1.5fr 0.9fr 0.9fr 0.9fr 90px 90px 170px;}
.record-table--projects{ min-width:1140px; }
/* Onaylanan Projeler: Proje Yönetimi ile aynı veri şekli ama Değiştir yok, bu yüzden İncele ayrı bir sütun olmak yerine İşlemler içinde Sil'in yanında — bir sütun eksildiği için kendi grid tanımı gerekiyor. */
.record-table--onaylanan-projeler .record-table__row{grid-template-columns: 56px 1.8fr 1.5fr 0.9fr 0.9fr 0.9fr 90px 180px;}
.record-table--onaylanan-projeler{ min-width:1060px; }
/* Proje Onayları: # / Proje Adı / Kulüp Adı / Üye Adı / Durumu / Tarih / Yorumlar / İşlemler — Durumu uzun bekleme metinleri de alabildiği için (ör. "Bölge Sekreteri Onayı Bekleniyor") rozet artık 2 satıra sarabiliyor (bkz. .status-badge beyaz-boşluk kuralı), bu yüzden sütun sabit ama diğer tablolardaki gibi dar; masaüstünde (~1140px+ içerik alanı) sayfa genelinde yatay scroll çıkarmaması için min-width diğer tablolarla aynı sınırın altında tutuldu. */
.record-table--proje-onaylari .record-table__row{ grid-template-columns: 50px 1.5fr 1.1fr 110px 140px 160px 1fr 100px; }
.record-table--proje-onaylari{ min-width:1020px; }
/* Haber Yönetimi: # / Haber Adı / Tarih / İşlemler — en sade liste, tek buton fazlası (Değiştir + Sil) dışında ekstra sütun yok. */
.record-table--news .record-table__row{ grid-template-columns: 56px 1fr 130px 170px; }
.record-table--news{ min-width:620px; }
/* Bülten Yönetimi: # / No / Tarih / Özet / İşlemler — Değiştir + Detay + Sil üç ayrı buton olduğu için İşlemler sütunu diğerlerinden geniş. */
.record-table--bulletins .record-table__row{ grid-template-columns: 56px 150px 110px 1fr 270px; }
.record-table--bulletins{ min-width:950px; }
/* Alümni Yönetimi: # / QR / Program / Başlangıç Tarihi / Bitiş Tarihi / Katılımcı Sayısı / İşlemler — Değiştir + Katılımcılar + Excel Çıktısı + Sil dört buton olduğu için İşlemler sütunu en geniş. */
.record-table--alumni .record-table__row{ grid-template-columns: 50px 70px 110px 130px 130px 120px 440px; }
.record-table--alumni{ min-width:1120px; }
.record-table__qr-box{ display:inline-flex; width:60px; height:60px; align-items:center; justify-content:center; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm); padding:5px; }
.record-table__qr{ display:block; width:50px; height:50px; aspect-ratio:1/1; object-fit:contain; border-radius:2px; }
/* Alümni Katılımcıları: # / Ad Soyad / Cep Telefonu / E-Posta Adresi / Cinsiyet / Meslek / Kulüp / İşlemler — Meslek uzun olabildiği için 2 satır + tooltip. */
.record-table--katilimcilar .record-table__row{ grid-template-columns: 50px 120px 120px 190px 80px 1fr 170px 170px; }
.record-table--katilimcilar{ min-width:1100px; }
/* Aidat Ödeme: iki ayrı, sade liste — Borçlar (tek buton) ve Ödemeler (işlem yok, salt geçmiş kaydı). */
.record-table--aidat-borc .record-table__row{ grid-template-columns: 50px 1fr 150px 190px; }
.record-table--aidat-borc{ min-width:640px; }
.record-table--aidat-odeme .record-table__row{ grid-template-columns: 50px 1fr 130px 130px 170px; }
.record-table--aidat-odeme{ min-width:720px; }
.aidat-empty{ color:var(--text-muted); font-size:14px; margin:16px 0 0; text-align:center; }
/* Mail Gönder: Taslak Mailler'de 3 geniş buton (Test Maili Gönder / İncele-Düzenle / Seçilen Kişilere Gönder) olduğu için İşlemler sütunu geniş; Gönderilmiş Mailler ise tek butonlu, sade bir geçmiş listesi. */
.record-table--mail-taslak .record-table__row{ grid-template-columns: 60px 1fr 460px; }
.record-table--mail-taslak{ min-width:900px; }
.record-table--mail-gonderilen .record-table__row{ grid-template-columns: 70px 110px 1fr 110px; }
.record-table--mail-gonderilen{ min-width:700px; }
/* Sayfa sayısı çok olduğunda (Gönderilmiş Mailler'de 447 gibi) pagination'a araya sıkışan "…" — tıklanamaz, diğer sayı butonlarıyla aynı hizada. */
.pagination__ellipsis{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;color:var(--text-muted);}
/* Mail Gönder'in Test Maili Gönder gibi bilgilendirme modalları. */
.mail-modal-text{ font-size:14px; line-height:1.5; color:var(--text); margin:0 0 18px; }
.mail-modal-text--hidden{ display:none; }
/* Kaydet/Kapat gibi tek buton dışında, Yeni Mail Oluştur/Düzenle ve Posta Kuyruğu Durumu gibi geniş içerikli (2 sütunlu form + zengin editör / istatistik kartları + iki tablo) modallar için varsayılan 900px'in üstünde bir panel genişliği. */
.record-modal__panel--wide{ max-width:1120px; }
.record-modal__title svg{ vertical-align:-3px; margin-right:6px; color:var(--navy); }
/* Rich editor'ün üstündeki, Dosya/Düzenle/Görüntüle/Ekle/Biçim/Tablo menü çubuğu — Mail Gönder'de gerçek TinyMCE görünümüne yaklaştırmak için eklendi, öğeleri salt görsel/dekoratif (gerçek alt menüleri yok). */
.rich-editor__menubar{ display:flex; flex-wrap:wrap; gap:2px; padding:6px 8px 0; background:var(--bg-light); }
.rich-editor__menu-btn{display:flex;align-items:center;gap:3px;padding:5px 8px;border:none;border-radius:4px;background:transparent;color:var(--text);font-size:12.5px;cursor:pointer;}
.rich-editor__menu-btn:hover{ background:var(--white); color:var(--navy); }
.rich-editor__menu-btn svg{ color:var(--text-muted); }
/* Araç çubuğundaki "Paragraf" stil seçici — diğer .rich-editor__btn'lerle aynı yükseklikte, sade bir <select>. */
.rich-editor__select{height:30px;padding:0 6px;border:1px solid var(--border);border-radius:4px;background:var(--white);color:var(--text);font-size:12.5px;cursor:pointer;}
.rich-editor__code{width:100%;min-height:160px;max-height:320px;padding:12px 14px;border:none;border-top:1px solid var(--border);font:12.5px/1.6 monospace;color:var(--text);resize:vertical;}
/* Tam ekran: editörü modal'ın üstüne, tüm viewport'u kaplayacak şekilde taşır. */
.rich-editor.is-fullscreen{position:fixed;inset:0;z-index:1300;margin:0;border-radius:0;display:flex;flex-direction:column;}
.rich-editor.is-fullscreen .rich-editor__body{ flex:1; max-height:none; }
/* Mail Ekleri — media-filedrop ile aynı ızgara mantığı, ama Sil/İndir ayrı metin bağlantıları ve (mevcut bir ek düzenlenirken) çok satırlı dosya adı için media-filedrop'tan bağımsız, kendi bileşeni. */
.mail-attach{ display:flex; flex-wrap:wrap; gap:12px; }
.mail-attach__add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:110px;height:100px;border-radius:var(--radius-sm);border:1px dashed var(--border);background:var(--bg-light);color:var(--text-muted);font-size:12px;cursor:pointer;position:relative;}
.mail-attach__add svg{ width:20px; height:20px; }
.mail-attach__add input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.mail-attach__item{width:160px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--white);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;text-align:center;}
.mail-attach__item svg{ width:26px; height:26px; color:var(--text-muted); flex-shrink:0; }
.mail-attach__item-actions{ display:flex; gap:10px; font-size:12px; font-weight:600; }
.mail-attach__item-actions button{background:none;border:none;padding:0;cursor:pointer;color:#B3261E;font-size:12px;font-weight:600;font-family:inherit;}
.mail-attach__item-actions a{ color:var(--navy); text-decoration:none; }
.mail-attach__item-actions button:hover, .mail-attach__item-actions a:hover{ text-decoration:underline; }
.mail-attach__item-name{ font-size:11px; color:var(--text); word-break:break-word; line-height:1.35; }
/* Gönderilmiş bir mailin "İncele"si compose modalını salt-okunur modda yeniden kullanıyor — Kişi Seçimi/Gönderen/Mesaj Tipi hâlâ görünsün ama düzenlenemesin diye. */
.record-modal.is-readonly .rich-editor__toolbar,
.record-modal.is-readonly .rich-editor__menubar,
.record-modal.is-readonly .mail-attach__add,
.record-modal.is-readonly .searchable-select,
.record-modal.is-readonly .mail-attach__item-actions button,
.record-modal.is-readonly input[type="text"]{ pointer-events:none; opacity:.7; }
/* Posta Kuyruğu Durumu — son güncelleme + Şimdi Yenile satırı, 3 renkli özet kartı, sonra iki liste tablosu. */
.mail-queue__meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--text-muted);margin-bottom:18px;}
.mail-queue__meta strong{ color:var(--text); }
.mail-queue__cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:26px; }
.mail-queue__card{border-radius:var(--radius-sm);padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.mail-queue__card strong{ font-size:26px; }
.mail-queue__card-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;}
.mail-queue__card--pending{ background:#FEF6E0; color:#8A6414; }
.mail-queue__card--sent{ background:#E3F5EA; color:#1F7A5C; }
.mail-queue__card--failed{ background:#FBEAE9; color:#B3261E; }
.mail-queue__card strong{ color:inherit; }
.mail-queue__section-title{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 12px;color:var(--navy);}
.mail-queue__section-title:not(:first-of-type){ margin-top:28px; }
.record-table--mail-kuyruk-bekleyen .record-table__row{ grid-template-columns: 60px 1fr 160px 100px 150px; }
.record-table--mail-kuyruk-bekleyen{ min-width:820px; }
.record-table--mail-kuyruk-basarisiz .record-table__row{ grid-template-columns: 60px 1fr 140px 100px 160px 150px; }
.record-table--mail-kuyruk-basarisiz{ min-width:920px; }
/* Alıcı hücresi artık uzun e-posta listesini kırpıp tooltip'te göstermek yerine (bir modal içinde tooltip'in kendisi de ayrı bir katmanlama sorunuydu, uzun liste için okuması da zordu) tıklanınca tam listeyi ayrı bir modalda açıyor. */
.record-table__cell--link{color:var(--navy);font-weight:600;cursor:pointer;}
.record-table__cell--link:hover{ text-decoration:underline; }
/* Alıcı arama kutusu — 30+ e-posta olabildiği için listeyi daraltmaya yarıyor; liste kaydırılırken
   de erişilebilir kalsın diye record-modal__scroll'un üstüne yapışık (sticky) duruyor. */
.mail-recipients-search{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1.5px solid var(--navy);border-radius:var(--radius-sm);background:var(--white);margin-bottom:14px;box-shadow:0 4px 10px -4px rgba(51, 57, 131, .25);}
.mail-recipients-search svg{ width:16px; height:16px; color:var(--navy); flex-shrink:0; }
.mail-recipients-search input{border:none;background:none;outline:none;font:inherit;font-size:13.5px;color:var(--text);width:100%;}
.mail-recipients-list{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.mail-recipients-list li{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text);word-break:break-all;transition:background .12s ease;}
.mail-recipients-list li:last-child{ border-bottom:none; }
.mail-recipients-list li:nth-child(even){ background:var(--bg-light); }
.mail-recipients-list li:hover{ background:#EAEDF7; }
/* Meslek Sorgulama: # / Üye Adı / Kulüp / Sektör Kodu / Sınıf / Meslek / Detay — Kulüp/Sektör Kodu/Sınıf/Meslek uzun olabildiği için record-table__cell--clamp2 + data-tooltip ile 2 satırda kesiliyor, tam metin tooltip'te. Metin sütunları minmax(taban, fr) ile esnek: 1366px gibi dar bir dizüstünde tabana inip yatay scroll'a hiç gerek kalmıyor, panel daha genişse (data-panel boş yer bırakmak yerine) fazla alanı orantılı paylaşıp daha az kırpıyor. */
.record-table--meslek-rehberi .record-table__row{ grid-template-columns: 48px minmax(88px, 1fr) minmax(92px, 1.1fr) minmax(105px, 1.3fr) minmax(80px, .9fr) minmax(88px, 1.1fr) 95px; gap:8px; }
/* Meslek Sorgulama — üstteki arama kutusu, sonuç yokken/varken sayfanın tek odak noktası olacak şekilde ortalı. */
.meslek-query{ max-width:640px; margin:0 auto; text-align:center; }
.meslek-query__title{ font-size:22px; margin:0 0 8px; color:var(--navy); }
.meslek-query__desc{ font-size:14px; color:var(--text-muted); margin:0 0 20px; }
.meslek-query__form{ display:flex; flex-wrap:wrap; gap:10px; }
.meslek-query__form .login-panel__input{ margin-bottom:0; flex:1 1 240px; }
.meslek-query__results{ margin-top:32px; text-align:left; }
/* Kişi Bilgisi modalı — isim/kulüp başlığı, tel/eposta pill butonları, sonra 2 sütunlu onay-işaretli bilgi listesi (Sektör | Şuanda Yaptığı İş / Sınıf | İşyerindeki Pozisyonu / Meslek | İş Tanımı sırasıyla akıyor). */
.meslek-detail__accent{ width:100%; height:4px; background:var(--navy); border-radius:2px; margin:0 0 20px; }
.meslek-detail__head{ text-align:center; margin-bottom:18px; }
.meslek-detail__name{ font-size:22px; margin:0 0 4px; color:var(--text); }
.meslek-detail__club{ font-size:13.5px; color:var(--text-muted); margin:0; }
.meslek-detail__contact{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.meslek-detail__list{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; }
.meslek-detail__item{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.4; }
.meslek-detail__item strong{ color:var(--text); font-weight:700; }
.meslek-detail__check{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.meslek-detail__check svg{ width:11px; height:11px; }
@media (max-width: 640px) {
  .meslek-detail__list{ grid-template-columns:1fr; }
}
/* Üye Arama: Meslek Rehberi ile aynı 7 sütunlu (# / Üye Adı / Kulüp / Sektör Kodu / Sınıf / Meslek / Detay) yapı olduğu için minmax() taban/oranları birebir aynı — ama Mail Gönder/Sms Gönder çiftindeki gibi bu da tamamen ayrı, "uye-arama"/"uye-detay" adlı kendi sınıf setiyle duruyor. */
.record-table--uye-arama .record-table__row{ grid-template-columns: 48px minmax(88px, 1fr) minmax(92px, 1.1fr) minmax(105px, 1.3fr) minmax(80px, .9fr) minmax(88px, 1.1fr) 95px; gap:8px; }
/* Üye Arama — üstteki arama kutusu, sonuç yokken/varken sayfanın tek odak noktası olacak şekilde ortalı. */
.uye-arama-query{ max-width:640px; margin:0 auto; text-align:center; }
.uye-arama-query__title{ font-size:22px; margin:0 0 8px; color:var(--navy); }
.uye-arama-query__desc{ font-size:14px; color:var(--text-muted); margin:0 0 20px; }
.uye-arama-query__form{ display:flex; flex-wrap:wrap; gap:10px; }
.uye-arama-query__form .login-panel__input{ margin-bottom:0; flex:1 1 240px; }
.uye-arama-query__results{ margin-top:32px; text-align:left; }
/* Kişi Bilgisi modalı — isim/kulüp başlığı, tel/eposta pill butonları, sonra 2 sütunlu onay-işaretli bilgi listesi (Sektör | Şuanda Yaptığı İş / Sınıf | İşyerindeki Pozisyonu / Meslek | İş Tanımı sırasıyla akıyor). */
.uye-detay__accent{ width:100%; height:4px; background:var(--navy); border-radius:2px; margin:0 0 20px; }
.uye-detay__head{ text-align:center; margin-bottom:18px; }
.uye-detay__name{ font-size:22px; margin:0 0 4px; color:var(--text); }
.uye-detay__club{ font-size:13.5px; color:var(--text-muted); margin:0; }
.uye-detay__contact{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.uye-detay__list{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; }
.uye-detay__item{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.4; }
.uye-detay__item strong{ color:var(--text); font-weight:700; }
.uye-detay__check{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.uye-detay__check svg{ width:11px; height:11px; }
@media (max-width: 640px) {
  .uye-detay__list{ grid-template-columns:1fr; }
}
.record-table__cell--clamp2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;text-overflow:ellipsis;line-height:1.35;cursor:default;}
/* Genel amaçlı tooltip (data-tooltip="..." olan her öğe için main.js açıyor). position:fixed ve tek bir paylaşılan eleman document.body'ye ekleniyor — böylece .record-table-wrap'ın yatay scroll için kullandığı overflow:auto (bu, dikey ekseni de otomatik "auto" yapıp kırpabiliyor) tooltip'i kesmiyor; dil menüsündeki fixed-dropdown tekniğiyle aynı mantık. */
/* z-index 1400: .record-modal (1100) ve .searchable-select__list-wrap'in body'ye taşındığında aldığı 1200'ün üstünde — tooltip bir modal içindeki hücrede açılsa bile arkada kalmasın diye. */
.app-tooltip{position:fixed;z-index:1400;max-width:320px;background:var(--navy-dark);color:var(--white);font-size:12.5px;line-height:1.45;padding:8px 12px;border-radius:var(--radius-sm);box-shadow:0 10px 24px rgba(0, 0, 0, .28);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease, transform .12s ease;}
.app-tooltip.is-visible{ opacity:1; transform:translateY(0); }
/* Ok işareti: baloncukla aynı renkte, 45° döndürülmüş bir kare — tetikleyicinin yatay ortasını gösterecek şekilde main.js --tooltip-arrow-left'i ayarlıyor. */
.app-tooltip::after{content:'';position:absolute;left:var(--tooltip-arrow-left, 50%);width:10px;height:10px;background:var(--navy-dark);transform:translateX(-50%) rotate(45deg);}
.app-tooltip--top::after{ bottom:-5px; }
.app-tooltip--bottom::after{ top:-5px; }
/* Sms Gönder: Mail Gönder ile aynı iskelet ama daha sade — rich editor/mail eki/Gönderen-Mesaj Tipi
   yok, tek bir düz metin alanı (SMS plain text olduğu için) + Kişi Sayısı sütunu var. Taslak SMS'lerde
   yine 3 geniş buton (Test SMS Gönder / İncele-Düzenle / Seçilen Kişilere Gönder) olduğu için İşlemler
   sütunu geniş; Gönderilmiş SMS'ler tek butonlu, sade bir geçmiş listesi. */
.record-table--sms-taslak .record-table__row{ grid-template-columns: 60px 1fr 110px 460px; }
.record-table--sms-taslak{ min-width:1030px; }
.record-table--sms-gonderilen .record-table__row{ grid-template-columns: 60px 100px 1fr 110px 110px; }
.record-table--sms-gonderilen{ min-width:760px; }
/* SMS İçeriği: rich editor yerine düz, biçimlendirmesiz bir <textarea> — referans görselde araç
   çubuğu/menü yok, sade dikdörtgen bir kutu. */
.sms-compose__textarea{ resize:vertical; min-height:120px; font-family:inherit; }
/* Meslek Ödülleri: Bülten Yönetimi ile aynı iskelet (Ekle butonu + tek Dönem filtresi + tablo +
   Ekle/Düzenle modalı) ama daha sade bir tablo — sadece # | Adı | Dönem | Tarih | İşlemler sütunları
   var. Adı bazen "&" ile bağlı çift ödülü, bazen "➤" ile zincirlenmiş çok kişilik bir takım ödülü
   olabildiğinden clamp2 ile 2 satıra sarılıyor; Dönem sütunu ise saklanan "YYYY - YYYY" değerinin
   sadece baştaki yılını gösteriyor (bkz. panel-meslek-odulleri.php meslek_odulu_donem_yili()). */
.record-table--meslek-odulleri .record-table__row{ grid-template-columns: 56px 1fr 110px 120px 170px; }
.record-table--meslek-odulleri{ min-width:820px; }
/* Durum rozeti (Onaylandı / Reddedildi vb.) */
.status-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;text-align:center;white-space:normal;}
.status-badge--success{ background:#E3F5EA; color:#1F7A5C; }
.status-badge--danger{ background:#FBEAE9; color:#B3261E; }
/* Proje Onayları'nda onay zincirinin ara adımları (Guv. Yardımcısı/Komite Başkanı/Bölge Sekreteri bekliyor) için "bekleniyor" rozeti, hiç işleme girmemiş projeler için nötr rozet. */
.status-badge--pending{ background:#FDF1DC; color:#8A5A00; }
.status-badge--neutral{ background:#EEF1F5; color:#5B6472; }
/* İki alan da (Üye Türü / Ara) aynı etiket+kontrol yüksekliğine sahip olduğu için hizalama sorunsuz oluyor — etiketsiz tek bir öğe olsaydı align-items onu diğerlerinden aşağı itiyordu (ok işareti de bu yüzden kaymış görünüyordu). */
.member-filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:18px; }
.member-filters__field--type{ width:300px; flex-shrink:0; }
/* .login-panel__input'un varsayılan margin-bottom'u burada (form-field gibi sıfırlayan bir bağlamın dışında) gereksiz boşluk bırakıyordu. */
.member-filters__field--type .login-panel__input{ margin-bottom:0; }
.member-filters__field--search{ flex:1 1 320px; }
.member-filters__search-row{ display:flex; gap:12px; }
.member-filters__search{ flex:1; margin-bottom:0; }
/* Etiketsiz tek bir buton (ör. Filtreyi Temizle), yanındaki etiketli dropdown'la (label + .login-panel__input ≈ 43px) aynı satırda flex-end ile hizalanınca kendi doğal yüksekliğinde kaldığı için kısa görünüyordu — dropdown'un input yüksekliğiyle eşitliyoruz. */
.member-filters__clear-btn{ height:43px; }
.data-panel__footer{display:flex;justify-content:flex-end;margin-top:14px;font-size:13px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.03em;}
/* Hediye Çeki Oluştur: kategori seçimi + Oluştur butonu tek satır, altında (Oluştur'a basılınca) QR kod görünüyor. Etiketsiz dropdown + etiketsiz buton aynı satırda olduğu için (bkz. .member-filters__clear-btn'deki aynı mantık) buton yüksekliği dropdown'un .login-panel__input'uyla (~43px) eşitleniyor, yoksa buton kendi doğal (daha kısa) yüksekliğinde kalıp dropdown'la hizasız duruyordu. */
.hediye-cek__form{ display:flex; align-items:center; gap:14px; max-width:520px; }
.hediye-cek__form .searchable-select{ flex:1; }
.hediye-cek__form .searchable-select__input{ margin-bottom:0; }
.hediye-cek__form .btn{ height:43px; }
/* QR görseli: *{box-sizing:border-box} altında padding/border'ı doğrudan <img>'e koymak onun 200x200 içerik alanını küçültüp qrserver.com'dan gelen 200x200 pikselin oranlı küçültülmesine (bulanıklaşmaya) yol açıyordu — çerçeveyi ayrı bir sarmalayıcıya taşıyıp <img>'i her zaman tam 200x200 (isteneni birebir) bırakıyoruz. */
.hediye-cek__qr-wrap{ margin-top:28px; }
.hediye-cek__qr-frame{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; background:var(--white); }
.hediye-cek__qr{ display:block; width:200px; height:200px; }
/* record-table hemen altında geldiğinde sayfalamanın (.pagination) kendi margin-top'u zaten yeterli boşluğu bırakıyor; projeler.php'deki standalone pagination ile birebir aynı görünüm/davranış. .data-panel'in kendi alt padding'i üstüne binince (32px + panel padding'i) boşluk fazla oluyordu, bu durumda daha az bir üst boşluk yeterli. */
.data-panel + .pagination{ margin-top:16px; }
/* ============================================================ Kayıt Ekle/Düzenle modalı (Aile Üyesi, Kulüp Üyesi vb.) — city-modal ile aynı iskelet, içine geniş bir form sığdırmak için daha büyük; birden fazla sayfa (panel-aile-bilgileri.php, panel-kulup-uyeleri.php...) aynı sınıfları paylaşıp yalnızca modal id'sini/alan id öneklerini değiştiriyor. ============================================================ */
.record-modal{position:fixed;inset:0;z-index:1100;opacity:0;pointer-events:none;transition:opacity .28s ease;}
.record-modal.is-open{ opacity:1; pointer-events:auto; }
.record-modal__backdrop{ position:absolute; inset:0; background:rgba(10, 14, 30, .65); }
.record-modal__panel{position:relative;margin:40px auto;width:92%;max-width:900px;max-height:calc(100vh - 80px);background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 70px rgba(0, 0, 0, .35);transform:translateY(-18px) scale(.98);transition:transform .28s ease;display:flex;flex-direction:column;}
.record-modal.is-open .record-modal__panel{ transform:translateY(0) scale(1); }
.record-modal__close{position:absolute;top:20px; right:20px;z-index:2;width:32px; height:32px;display:flex; align-items:center; justify-content:center;border-radius:50%;border:none;background:var(--bg-light);color:var(--text);transition:background .18s ease;}
.record-modal__close:hover{ background:var(--border); }
.record-modal__close svg{ width:16px; height:16px; }
.record-modal__title{margin:0;padding:24px 60px 18px 28px;font-size:19px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--border);flex-shrink:0;}
/* flex:1 tek başına yetmiyor; flex öğelerinin varsayılan min-height:auto'su içerik ne kadar uzun olursa olsun küçülmeyi reddedip panel'i (overflow:hidden) taşırıyor, bu yüzden iç scroll hiç devreye girmiyordu. min-height:0 bunu düzeltir. */
.record-modal__scroll{ overflow-y:auto; overscroll-behavior:contain; padding:24px 28px; flex:1; min-height:0; }
.record-modal__scroll .form-section:last-child{ margin-bottom:0; }
.record-modal__footer{display:flex;justify-content:flex-end;flex-shrink:0;gap:16px;padding:16px 28px;background:var(--white);border-top:1px solid var(--border);}
/* Kişi Bilgisi (Meslek Rehberi) gibi salt-okunur, tek buton içeren dar kart modallar için — form modallarının geniş (900px) varsayılanı yerine kompakt bir profil kartı görünümü. */
.record-modal__panel--narrow{ max-width:520px; }
.record-modal__footer--block{ justify-content:stretch; }
.record-modal__footer--block .btn{ flex:1; justify-content:center; }
/* ============================================================ Policy (Aydınlatma Metni) modal ============================================================ */
.policy-modal{position:fixed;inset:0;z-index:1100;opacity:0;pointer-events:none;transition:opacity .28s ease;}
.policy-modal.is-open{ opacity:1; pointer-events:auto; }
.policy-modal__backdrop{position:absolute;inset:0;background:rgba(10, 14, 30, .65);}
.policy-modal__panel{position:relative;margin:90px auto 0;width:90%;max-width:620px;max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;background:var(--white);border-radius:var(--radius-lg);padding:36px;box-shadow:0 30px 70px rgba(0, 0, 0, .35);transform:translateY(-18px) scale(.98);transition:transform .28s ease;}
.policy-modal.is-open .policy-modal__panel{ transform:translateY(0) scale(1); }
.policy-modal__close{position:absolute;top:14px; right:14px;width:32px; height:32px;display:flex; align-items:center; justify-content:center;border-radius:50%;border:none;transition:background .18s ease;background:var(--bg-light);color:var(--text);}
.policy-modal__close:hover{ background:var(--border); }
.policy-modal__close svg{ width:16px; height:16px; }
.policy-modal__title{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 18px;padding-right:30px;}
.policy-modal__body p{ font-size:14px; line-height:1.8; }
.policy-modal__body a{ color:var(--navy); text-decoration:underline; }
.city-modal{position:fixed;inset:0;z-index:1100;opacity:0;pointer-events:none;transition:opacity .28s ease;}
.city-modal.is-open{ opacity:1; pointer-events:auto; }
.city-modal__backdrop{position:absolute;inset:0;background:rgba(10, 14, 30, .65);}
.city-modal__panel{position:relative;margin:90px auto 0;width:90%;max-width:480px;max-height:calc(100vh - 140px);padding:36px 0 0 36px;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 70px rgba(0, 0, 0, .35);transform:translateY(-18px) scale(.98);transition:transform .28s ease;}
.city-modal.is-open .city-modal__panel{ transform:translateY(0) scale(1); }
.city-modal__scroll{max-height:calc(100vh - 176px);overflow-y:auto;overscroll-behavior:contain;padding:0 36px 36px 0;}
.city-modal__close{position:absolute;top:30px; right:20px;z-index:2;width:32px; height:32px;display:flex; align-items:center; justify-content:center;border-radius:50%;border:none;transition:background .18s ease;background:var(--bg-light);color:var(--text);}
.city-modal__close:hover{ background:var(--border); }
.city-modal__close svg{ width:16px; height:16px; }
.city-modal__title{position:sticky;top:0;z-index:1;background:var(--white);font-size:20px;font-weight:700;color:var(--navy);margin:0;padding:0 30px 18px 0;}
.city-modal__body p{ font-size:14px; line-height:1.8; color:var(--text-muted); }
.city-modal__body a{ color:var(--navy); text-decoration:underline; }
.city-modal__clubs li{border-top:1px solid var(--border);font-size:14px;color:var(--text);}
.city-modal__clubs li:first-child{ border-top:none; }
.city-modal__clubs a{display:block;padding:10px 0;color:var(--text);text-decoration:none;transition:color .15s ease;}
.city-modal__clubs a:hover{ color:var(--amber); }
/* ============================================================ Hero ============================================================ */
.hero{position:relative;overflow:hidden;background:#eee;}
.hero__track{position:relative;width:100%;aspect-ratio:16 / 5.5;cursor:grab;touch-action:pan-y;user-select:none;}
.hero__track:active{ cursor:grabbing; }
.hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease;}
.hero__slide.is-active{ opacity:1; visibility:visible; }
.hero__slide img{width:100%;height:100%;object-fit:cover;}
.hero__video{ position:relative; width:100%; height:100%; cursor:pointer; }
.hero__video video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__video iframe{ width:100%; height:100%; border:0; display:block; }
.hero__video-controls{position:absolute;left:14px;bottom:14px;z-index:4;display:flex;gap:8px;}
.hero__video-btn{width:38px; height:38px;border-radius:50%;border:none;background:rgba(20, 25, 60, .5);color:var(--white);display:flex; align-items:center; justify-content:center;transition:background .18s ease;}
.hero__video-btn:hover{ background:rgba(20, 25, 60, .7); }
.hero__video-btn svg{ width:16px; height:16px; }
.hero__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px; height:64px;border:none;background:rgba(20, 25, 60, .3);color:var(--white);display:flex; align-items:center; justify-content:center;transition:background .18s ease;}
.hero__nav svg{ width:18px; height:18px; }
.hero__nav--prev{ left:0; }
.hero__nav--next{ right:0; }
.hero__nav:hover{ background:rgba(20, 25, 60, .5); }
.hero__dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;z-index:3;background:rgba(20, 25, 60, .3);padding:6px 10px;border-radius:999px;}
.hero__dots button{width:7px; height:7px;border-radius:50%;border:none;background:rgba(255, 255, 255, .5);padding:0;transition:background .2s ease, width .2s ease;}
.hero__dots button.is-active{ background:var(--amber); width:18px; border-radius:5px; }
/* ============================================================ Section heading ============================================================ */
.section{padding:76px 0;}
.section--tight{ padding:30px 0; }
.section--light{ background:var(--bg-light); }
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap;}
.section-head h2{font-size:32px;font-weight:700;}
.section-head p{margin:6px 0 0;font-size:15px;}
/* ============================================================ Quick links (banner altı ikon/link şeridi) ============================================================ */
.quicklinks{padding:0;background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.quicklinks__row{display:flex;justify-content:center;justify-content:safe center;width:100%;gap:1px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.quicklinks__row::-webkit-scrollbar{ display:none; }
@media (max-width:767px){ .quicklinks__row{ justify-content:flex-start; } }
.quicklinks__item{flex:0 0 auto;width:78px;height:100px;display:block;overflow:hidden;transition:opacity .18s ease;}
.quicklinks__item:hover{ opacity:.85; }
.quicklinks__item img{width:100%;height:100%;object-fit:cover;display:block;}
/* ============================================================ Leaders section ============================================================ */
.leaders{background:var(--navy);padding:24px 0;}
.leaders__grid{display:grid;grid-template-columns: repeat(2, 200px) minmax(0, 1fr);gap:40px;align-items:center;}
.leaders__photos{ display:contents; }
.leader-card{position:relative;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:3/4;}
.leader-card img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.leader-card__caption{position:absolute;left:0; right:0; bottom:0;padding:14px 16px 12px;background:linear-gradient(0deg, rgba(8, 30, 62, .92), rgba(8, 30, 62, 0));}
.leader-card__name{color:var(--white);font-weight:700;font-size:14px;margin-bottom:6px;}
.leader-card__role{display:inline-block;background:var(--navy);color:var(--white);font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:4px 9px;border-radius:var(--radius-sm);}
.leaders__text h2{ color:var(--white); }
.leaders__text p{ color:rgba(255, 255, 255, .78); }
.leaders__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
/* Guvernör mektubunun devamı: butona basınca yüksekliği JS ile 0'dan içeriğin
   gerçek yüksekliğine animasyonla açılıyor (aşağıya doğru uzayarak). Açıkken
   fotoğraflar uzun metnin ortasında kalmasın diye üste hizalanıyor. */
.leaders__more{ overflow:hidden; transition:height .45s ease; }
.leaders__more strong{ color:var(--white); }
.leaders__more-chevron{ transition:transform .3s ease; }
.leaders.is-expanded .leaders__more-chevron{ transform:rotate(180deg); }
.leaders.is-expanded .leader-card{ align-self:start; }
@media (prefers-reduced-motion:reduce){ .leaders__more, .leaders__more-chevron{ transition:none; } }
/* ============================================================ Causes (Odak Alanlarımız) ============================================================ */
.causes{position:relative;overflow:hidden;}
.causes__grid{position:relative;display:grid;grid-template-columns: minmax(0, 30%) minmax(0, 1fr);gap:60px;align-items:start;}
.causes__intro p{ max-width:480px; margin-bottom:44px; }
.causes__photo{position:relative;width:75%;max-width:360px;aspect-ratio:1/1;margin:0 0 10px 24px;}
.causes__photo::before{content:'';position:absolute;top:-12px;left:-12px;width:calc(100% + 20px);height:calc(100% + 20px);border-radius:50%;border:2px dashed var(--amber);}
.causes__photo img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;transition:opacity .07s ease;}
.causes__list{ display:flex; flex-direction:column; }
.causes__list li{ border-bottom:1px solid var(--border); }
.causes__list li:first-child{ border-top:1px solid var(--border); }
.causes__list a{display:block;padding:22px 4px;font-family:var(--font-heading);font-size:clamp(18px, 1.9vw, 23px);font-weight:500;color:var(--navy-dark);transition:color .1s ease, padding-left .1s ease;}
.causes__list a:hover{ color:var(--navy); padding-left:10px; }
/* ============================================================ News ============================================================ */
.news__grid{display:grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap:24px;}
.news-card{display:flex;align-items:stretch;gap:0;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .2s ease, transform .2s ease;}
.news-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px); }
.news-card__body{flex:1;min-width:0;padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:10px;}
.news-card__badge{align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--navy);background:var(--bg-light);letter-spacing:.02em;padding:5px 12px;border-radius:999px;}
.news-card__title{font-size:17px;font-weight:700;color:var(--navy-dark);line-height:1.35;}
.news-card__desc{font-size:13.5px;color:var(--text-muted);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-card__media{ flex:0 0 32%; }
.news-card__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1;}
.news__footer{ text-align:center; margin-top:44px; }
.btn--pill{ border-radius:999px; padding:12px 26px; }
/* ============================================================ Stats ============================================================ */
.stats{background:var(--navy);padding:56px 0;}
.stats__grid{display:grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap:30px;text-align:center;}
.stat__icon{width:52px; height:52px;margin:0 auto 14px;border-radius:50%;border:1.5px solid rgba(255, 255, 255, .4);display:flex; align-items:center; justify-content:center;color:var(--white);}
.stat__icon svg{ width:22px; height:22px; }
.stat__number{font-family:var(--font-heading);font-size:clamp(28px, 3.2vw, 40px);font-weight:700;color:var(--white);line-height:1;margin-bottom:6px;}
.stat__label{color:rgba(255, 255, 255, .8);font-size:14px;font-weight:600;letter-spacing:.02em;}
/* ============================================================ Projects CTA ============================================================ */
.projects{ text-align:center; }
.projects h2{ font-size:32px; }
.projects p{ max-width:560px; margin-left:auto; margin-right:auto; }
.projects__cta{ margin-top:10px; }
/* ============================================================ Footer ============================================================ */
.site-footer{background:var(--navy-darker);color:rgba(255, 255, 255, .7);padding-top:64px;}
.footer__grid{display:grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap:24px;padding-bottom:48px;border-bottom:1px solid rgba(255, 255, 255, .1);}
.footer__col h4{color:var(--white);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;padding-left:4px;}
.footer__col ul li{ margin-bottom:12px; }
.footer__col ul a{font-size:14px;color:rgba(255, 255, 255, .68);display:inline-flex;align-items:center;gap:6px;transition:color .15s ease;}
.footer__col ul a svg{ width:11px; height:11px; color:var(--amber); flex-shrink:0; }
.footer__col ul a:hover{ color:var(--white); }
.footer__contact li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:rgba(255, 255, 255, .68);margin-bottom:14px;}
.footer__contact svg{ width:16px; height:16px; color:var(--amber); flex-shrink:0; margin-top:2px; }
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;flex-wrap:wrap;font-size:13px;color:rgba(255, 255, 255, .5);}
.footer__bottom-brand{ display:flex; align-items:center; gap:12px; }
.footer__bottom-brand a{ text-decoration:underline; transition:color .15s ease; }
.footer__bottom-brand a:hover{ color:var(--white); }
.footer__bottom-brand img{ opacity:.6; }
.footer__bottom-right{ display:flex; align-items:center; gap:30px; }
/* ============================================================ Back to top ============================================================ */
.back-to-top{position:fixed;right:24px;bottom:24px;width:44px; height:44px;border-radius:50%;border:none;background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(11, 43, 87, .35);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease, transform .25s ease, background .18s ease;z-index:400;}
.back-to-top svg{ width:18px; height:18px; transform:rotate(180deg); }
.back-to-top:hover{ background:var(--navy-dark); }
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.pbl-social-media{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:5px;position:relative;z-index:1;}
.pbl-social-media a{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:100%;line-height:1;-webkit-transition:all 200ms linear 0s;-moz-transition:all 200ms linear 0s;-ms-transition:all 200ms linear 0s;-o-transition:all 200ms linear 0s;transition:all 200ms linear 0s;}
.pbl-social-media a:hover{transform:translate(0%, -3px);-webkit-transform:translate(0%, -3px);-moz-transform:translate(0%, -3px);-o-transform:translate(0%, -3px);-ms-transform:translate(0%, -3px);}
.pbl-social-media a[title]:before{position:absolute;content:attr(title);width:min-content;white-space:nowrap;background-color:#000000;color:#ffffff;padding:5px 10px;border-radius:4px;font-size:12px;opacity:0;visibility:hidden;pointer-events:none;z-index:1;bottom:38px;left:50%;-webkit-transition:all 200ms linear 0s;-moz-transition:all 200ms linear 0s;-ms-transition:all 200ms linear 0s;-o-transition:all 200ms linear 0s;transition:all 200ms linear 0s;transform:translate(-50%, 0%);-webkit-transform:translate(-50%, 0%);-moz-transform:translate(-50%, 0%);-o-transform:translate(-50%, 0%);-ms-transform:translate(-50%, 0%);}
.pbl-social-media a[title]:after{content:"";position:absolute;z-index:1;border:6px solid transparent;border-top-color:#000000;opacity:0;visibility:hidden;pointer-events:none;bottom:26px;left:50%;-webkit-transition:all 200ms linear 0s;-moz-transition:all 200ms linear 0s;-ms-transition:all 200ms linear 0s;-o-transition:all 200ms linear 0s;transition:all 200ms linear 0s;transform:translate(-50%, 0%);-webkit-transform:translate(-50%, 0%);-moz-transform:translate(-50%, 0%);-o-transform:translate(-50%, 0%);-ms-transform:translate(-50%, 0%);}
.pbl-social-media a[title]:hover:before, .pbl-social-media a[title]:hover:after{opacity:1;visibility:visible;}
.pbl-social-media svg{width:16px;height:16px;line-height:1;color:#ffffff;}
.pbl-social-media a.no-title:before, .pbl-social-media a.no-title:after{display:none}
[class*="pbl-social-facebook"]:hover, [class*="pbl-social-facebook"].colorful{background-color:#1877f2 !important;}
[class*="pbl-social-twitter"]:hover, [class*="pbl-social-twitter"].colorful{background-color:#000000 !important;}
[class*="pbl-social-bluesky"]:hover, [class*="pbl-social-bluesky"].colorful{background-color:#0085ff !important;}
[class*="pbl-social-instagram"]:hover, [class*="pbl-social-instagram"].colorful{background:linear-gradient(115deg, rgb(249, 206, 52), rgb(238, 42, 123), rgb(98, 40, 215)) !important;}
[class*="pbl-social-linkedin"]:hover, [class*="pbl-social-linkedin"].colorful{background-color:#0a66c2 !important;}
[class*="pbl-social-whatsapp"]:hover, [class*="pbl-social-whatsapp"].colorful{background-color:#25d366 !important;}
[class*="pbl-social-email"]:hover, [class*="pbl-social-email"].colorful{background-color:#3197ff !important;}
[class*="pbl-social-telegram"]:hover, [class*="pbl-social-telegram"].colorful{background-color:#0088cc !important;}
[class*="pbl-social-youtube"]:hover, [class*="pbl-social-youtube"].colorful{background-color:#ff0000 !important;}
[class*="pbl-social-google"]:hover, [class*="pbl-social-google"].colorful{background-color:#ea4335 !important;}
[class*="pbl-social-pinterest"]:hover, [class*="pbl-social-pinterest"].colorful{background-color:#bd081c !important;}
[class*="pbl-social-googleplus"]:hover, [class*="pbl-social-googleplus"].colorful{background-color:#db4437 !important;}
[class*="pbl-social-vimeo"]:hover, [class*="pbl-social-vimeo"].colorful{background-color:#1ab7ea !important;}
[class*="pbl-social-tumblr"]:hover, [class*="pbl-social-tumblr"].colorful{background-color:#2c4762 !important;}
[class*="pbl-social-tripadvisor"]:hover, [class*="pbl-social-tripadvisor"].colorful{background-color:#00e0a4 !important;}
[class*="pbl-social-snapchat"]:hover, [class*="pbl-social-snapchat"].colorful{background-color:#fffc00 !important;}
[class*="pbl-social-tiktok"]:hover, [class*="pbl-social-tiktok"].colorful{background-color:#ff3b5c;!important}
[class*="pbl-social-apple"]:hover, [class*="pbl-social-apple"].colorful{background-color:#a6b1b7 !important;}
[class*="pbl-social-amazon"]:hover, [class*="pbl-social-amazon"].colorful{background-color:#ff9900 !important;}
[class*="pbl-social-periscope"]:hover, [class*="pbl-social-periscope"].colorful{background-color:#40a4c4 !important;}
[class*="pbl-social-foursquare"]:hover, [class*="pbl-social-foursquare"].colorful{background-color:#f94877;!important}
[class*="pbl-social-swarm"]:hover, [class*="pbl-social-swarm"].colorful{background-color:#ffa633 !important;}
[class*="pbl-social-skype"]:hover, [class*="pbl-social-skype"].colorful{background-color:#00aff0 !important;}
[class*="pbl-social-android"]:hover, [class*="pbl-social-android"].colorful{background-color:#a4c639 !important;}
[class*="pbl-social-flickr"]:hover, [class*="pbl-social-flickr"].colorful{background-color:#f40083 !important;}
[class*="pbl-social-yahoo"]:hover, [class*="pbl-social-yahoo"].colorful{background-color:#430297 !important;}
[class*="pbl-social-twitch"]:hover, [class*="pbl-social-twitch"].colorful{background-color:#9146ff !important;}
[class*="pbl-social-soundcloud"]:hover, [class*="pbl-social-soundcloud"].colorful{background-color:#ff5500 !important;}
[class*="pbl-social-spotify"]:hover, [class*="pbl-social-spotify"].colorful{background-color:#1ed760 !important;}
[class*="pbl-social-dribbble"]:hover, [class*="pbl-social-dribbble"].colorful{background-color:#ea4c89 !important;}
[class*="pbl-social-reddit"]:hover, [class*="pbl-social-reddit"].colorful{background-color:#ff5700 !important;}
[class*="pbl-social-vk"]:hover, [class*="pbl-social-vk"].colorful{background-color:#4a76a8 !important;}
[class*="pbl-social-steam"]:hover, [class*="pbl-social-steam"].colorful{background-color:#171a21 !important;}
[class*="pbl-social-discord"]:hover, [class*="pbl-social-discord"].colorful{background-color:#5865f2 !important;}
[class*="pbl-social-blog"]:hover, [class*="pbl-social-blog"].colorful{background-color:#F96E3E !important;}
[class*="pbl-social-wordpress"]:hover, [class*="pbl-social-wordpress"].colorful{background-color:#00749C !important;}
/* ============================================================ Content pages (iç sayfa şablonu) ============================================================ */
.page-banner{ background:var(--navy); padding:20px 0; }
.page-banner__crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(255, 255, 255, .65);margin-bottom:10px;}
.page-banner__crumb a{ color:rgba(255, 255, 255, .65); transition:color .15s ease; }
.page-banner__crumb a:hover{ color:var(--white); }
.page-banner__crumb .is-current{ color:var(--white); font-weight:600; }
.page-banner h1{ color:var(--white); font-size:28px; margin:0; }
.inner-page{ display:flex; gap:30px; align-items:flex-start; }
.inner-page__sidebar{flex:0 0 322px;background:var(--bg-light);border-radius:var(--radius-lg);padding:26px 24px 16px 24px;position:sticky;top:calc(var(--navbar-main-height, 93px) + 15px);}
.inner-page__sidebar-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0 0 14px;background:none;border:none;padding:0;font-family:inherit;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);text-align:left;cursor:default;}
.inner-page__sidebar-toggle-icon{ display:none; width:14px; height:14px; flex-shrink:0; transition:transform .2s ease; }
.inner-page__sidebar-toggle-label{ display:flex; align-items:center; gap:8px; }
.inner-page__sidebar-toggle-menu-icon{ width:15px; height:15px; flex-shrink:0; color:var(--amber); }
.inner-page__nav li{ border-top:1px solid var(--border); }
.inner-page__nav li:first-child{ border-top:none; }
.inner-page__nav a{display:flex;align-items:center;gap:6px;padding:10px 0;font-size:13.5px;color:var(--text);transition:color .15s ease;}
.inner-page__nav a:hover{ color:var(--navy); }
.inner-page__nav a.is-active{ color:var(--navy); font-weight:700; }
.inner-page__nav-icon{ width:12px; height:12px; flex-shrink:0; color:var(--navy);}
.inner-page__nav-item-icon{ width:16px; height:16px; flex-shrink:0; color:inherit; }
/* Çıkış Yap gibi geri dönüşü olmayan/dikkat gerektiren menü öğeleri için kırmızı vurgu */
.inner-page__nav a.inner-page__nav-link--danger{ color:#B3261E; font-weight:700; }
.inner-page__nav a.inner-page__nav-link--danger:hover{ color:#8f1e17; }
.inner-page__content{ flex:1; min-width:0; }
.content-page{ max-width:100%; width:100%;}
.content-page img{ max-width:100%; border-radius:var(--radius-lg); margin:0; }
.content-page__banner{ margin:0 0 32px; }
.content-page__banner img{ display:block; width:100%;max-width: 100%; }
/* Bölge Rehberi tanıtım sayfası: dikey/poster oranlı bir kapak görseli olduğu için .content-page img'in varsayılan tam-genişlik davranışı yerine ortalı, sınırlı genişlikte gösteriliyor. */
.bolge-rehberi-tanitim{ display:flex; justify-content:center; }
.bolge-rehberi-tanitim img{ width:100%; max-width:420px; box-shadow:var(--shadow-card); margin:0; }
.letter-photo{ display:flex; justify-content:center; margin:0 0 32px; }
.letter-photo .people-card{ max-width:360px; width:100%;}
.letter-body{ max-width:860px; margin:0 auto; text-align:center; }
.letter-body__title{ font-size:26px; font-weight:600; color:var(--text); margin:0 0 6px; }
.letter-body__salutation{ font-weight:700; color:var(--text); margin:0 0 22px; }
.letter-timeline{ position:relative; max-width:860px; margin:32px auto 0; }
.letter-timeline::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#e2e4ea; }
.letter-timeline__item{ position:relative; height:76px; display:flex; align-items:center; justify-content:center; }
.letter-timeline__file{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid #eceef3; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:10px 20px; font-weight:700; font-size:14px; color:var(--navy-dark); text-decoration:none; transition:box-shadow .2s ease, transform .2s ease; }
.letter-timeline__file:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px); }
.letter-timeline__file svg{ width:16px; height:16px; color:var(--amber); flex-shrink:0; }
.content-page h2{ font-size:22px; margin-top:36px; }
.content-page h2:first-child{ margin-top:0; }
.content-page h3{ font-size:18px; }
.content-page ul, .content-page ol{ margin:0 0 1em;}
.content-page ul{ list-style:disc;list-style-position:inside;}
.content-page ol{ list-style:decimal; }
.content-page li{ margin-bottom:1px; color:var(--text); line-height:1.7; }
.content-page a:not(.btn){ color:var(--navy); text-decoration:underline; }
.content-page a:not(.btn):hover{ color:var(--navy-dark); }
/* .pagination (ör. Kulüp Üyeleri) content-page içine düşünce yukarıdaki kural yüzünden altı çizili görünüyor ve hover'da rengi değişiyordu; .pagination'ın kendi (altı çizisiz, hover'da sadece arka planı değişen) stiline dönüyoruz. */
.content-page .pagination a{ text-decoration:none; color:var(--navy); }
.content-page .pagination a:hover{ color:var(--navy); }
.content-page .pagination a.is-active{ color:var(--white); }
.content-page table{ width:100%; border-collapse:collapse; margin:0 0 24px; }
.content-page table th, .content-page table td{ padding:10px 14px; border:1px solid var(--border); text-align:left; font-size:14px; }
.content-page table th{ background:var(--bg-light); }
.iframe-embed iframe{ width:100%;aspect-ratio:3 / 2;border:0; }
/* ============================================================ People grid (Liderlerimiz / Gelecek Dönem Liderlerimiz) ============================================================ */
.people-grid{display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap:22px;}
.people-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .2s ease, transform .2s ease;text-align:center;}
.people-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-3px); }
.people-card__photo{ aspect-ratio:4/5; overflow:hidden; background:var(--bg-light); }
.people-card__photo img{ width:100%; height:100%; object-fit:cover; }
.people-card__body{ padding:14px 12px 18px; }
.people-card__name{ font-size:14.5px; font-weight:700; color:var(--navy-dark); margin-bottom:6px; line-height:1.3; }
.people-card__term{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;color:var(--text-muted);line-height:1.4;}
.people-card__term svg{ width:12px; height:12px; color:var(--amber); flex-shrink:0; }
[class*="pbl-social-"]:hover, [class*="pbl-social-"].colorful{color:#ffffff !important;border:none !important;}
[class*="pbl-social-"].colorful:hover{color:rgb(49 48 65 / 40%) !important;}
/* ============================================================ Projeler (filters sidebar + project cards grid + pagination) ============================================================ */
.projects-layout{ display:flex; gap:30px; align-items:flex-start; }
.projects-sidebar{flex:0 0 300px;position:sticky;top:calc(var(--navbar-main-height, 93px) + 15px);}
.projects-sidebar__cta{ display:flex; justify-content:center; width:100%; margin-top:16px; }
.selected-filters{background:var(--white);border-top:3px solid var(--navy);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:20px 24px;margin-bottom:20px;}
.selected-filters h5{margin:0 0 14px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);}
.selected-filters__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.selected-filters__chip{display:inline-flex;align-items:center;gap:6px;background:var(--navy-darker);color:var(--white);font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;transition:opacity .15s ease;}
.selected-filters__chip:hover{ opacity:.85; }
.selected-filters__chip svg{ width:10px; height:10px; flex-shrink:0; }
.selected-filters__chip--clear{ background:#D64545; }
.projects-filters{background:var(--bg-light);border-radius:var(--radius-lg);padding:24px;}
.projects-filters__group{ margin-bottom:24px; }
.projects-filters__group:last-child{ margin-bottom:0; }
.projects-filters__group h5{margin:0 0 14px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);}
/* Aranabilir açılır liste (.searchable-select) üye paneli formları için
   tasarlandığından alan altında 22px boşluk bırakıyor; burada her grup zaten
   kendi margin-bottom'unu taşıdığı için o boşluğu kaldırıyoruz (bkz. kulupler.php
   .club-filters'daki aynı düzeltme). */
.projects-filters__group .searchable-select__input{ margin-bottom:0; }
.projects-filters__clubs{max-height:260px;overflow-y:auto;overscroll-behavior:contain;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;}
.projects-filters__checkbox{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--border);font-size:13px;color:var(--text);cursor:pointer;}
.projects-filters__checkbox:first-child{ border-top:none; }
.projects-filters__checkbox input{ flex-shrink:0; accent-color:var(--navy); }
.projects-main{ flex:1; min-width:0; }
.projects-grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:24px;}
.project-card{display:block;position:relative;aspect-ratio:350 / 221;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .2s ease, transform .2s ease;}
.project-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px); }
.project-card img{ width:100%; height:100%; object-fit:cover; margin:0; border-radius:0; }
.project-card__overlay{position:absolute;left:0; right:0; bottom:0;background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .78) 65%);padding:44px 18px 16px;}
.project-card__title{font-size:15px;font-weight:700;color:var(--white);line-height:1.35;margin:0 0 10px;}
.project-card__club{display:inline-block;font-size:11px;font-weight:700;color:var(--white);letter-spacing:.02em;padding:5px 12px;border-radius:4px;}
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:32px;}
.pagination li{ display:flex; }
.pagination a{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:var(--radius-sm);background:var(--bg-light);color:var(--navy);font-size:13.5px;font-weight:600;transition:background .15s ease, color .15s ease;}
.pagination a:hover{ background:var(--border); }
.pagination a.is-active{ background:var(--navy); color:var(--white); }
.pagination__prev, .pagination__next{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:var(--radius-sm);background:var(--bg-light);color:var(--navy);}
.pagination__prev svg, .pagination__next svg{ width:14px; height:14px; }
.pagination__prev svg{ transform:rotate(180deg); }
.pagination__prev.is-disabled, .pagination__next.is-disabled{color:var(--border);cursor:not-allowed;}
/* ============================================================ Arama Sonuçları (arama.php) ============================================================ */
.search-results{ max-width:820px; margin:0 auto; }
.search-results__count{ color:var(--text-muted); font-size:14px; margin:0 0 24px; }
.search-results__list{display:flex;flex-direction:column;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;}
.search-result{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--border);text-decoration:none;transition:background .15s ease;}
.search-result:last-child{ border-bottom:none; }
.search-result:hover{ background:var(--bg-light); }
.search-result__type{flex-shrink:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:4px 10px;border-radius:999px;}
.search-result__type--proje{ background:#E3F5EA; color:#1F7A5C; }
.search-result__type--haber{ background:#E7ECFB; color:var(--navy); }
.search-result__body{ flex:1; min-width:0; }
.search-result__title{display:block;font-size:15px;font-weight:600;color:var(--text);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search-result__title mark{ background:#FDF1DC; color:inherit; padding:0 2px; border-radius:2px; }
.search-result__meta{ display:block; font-size:12.5px; color:var(--text-muted); }
.search-result__arrow{ flex-shrink:0; width:16px; height:16px; color:var(--border); transition:transform .15s ease, color .15s ease; }
.search-result:hover .search-result__arrow{ color:var(--navy); transform:translateX(3px); }
.search-results__empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:70px 20px;color:var(--text-muted);background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);}
.search-results__empty svg{ width:40px; height:40px; color:var(--border); margin-bottom:16px; }
.search-results__empty p{ margin:0; font-size:15px; }
/* ============================================================ Site Haritası (site-haritasi.php) ============================================================ */
/* Bölüm bazlı gruplanmış, klasik HTML site haritası görünümü: her ana menü başlığı bir kart, altında o bölümün alt sayfaları dikey liste halinde. Grid yerine çok-sütunlu (masonry) akış: kartlar farklı yükseklikte olduğu için grid'te kısa kartların altında büyük boşluklar kalıyordu; column düzeni sütunları yüksekliğe göre dengeli doldurup bu boşluğu ortadan kaldırıyor. column-width:300px → ekran genişliğine göre otomatik sütun sayısı. */
.sitemap{ columns:300px; column-gap:24px; }
.sitemap-group{ break-inside:avoid; margin:0 0 24px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:22px 24px; }
.sitemap-group__title{ font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); margin:0 0 12px; padding-bottom:12px; border-bottom:2px solid var(--border); }
.sitemap-group__list{ display:flex; flex-direction:column; gap:1px; }
.sitemap-group__link{ display:flex; align-items:center; gap:9px; padding:8px 8px; border-radius:var(--radius-sm); color:var(--text); font-size:14px; line-height:1.4; transition:background .15s ease, color .15s ease; }
.sitemap-group__link svg{ width:12px; height:12px; color:var(--amber); flex-shrink:0; transition:transform .15s ease; }
.sitemap-group__link:hover{ background:var(--bg-light); color:var(--navy); }
.sitemap-group__link:hover svg{ transform:translateX(3px); }
/* ============================================================ 404 (404.php) ============================================================ */
.error-404{ max-width:560px; margin:0 auto; text-align:center; padding:50px 20px; }
.error-404__code{font-family:var(--font-heading);font-size:clamp(64px, 10vw, 110px);font-weight:700;color:var(--amber);line-height:1;margin:0 0 8px;}
.error-404__title{ font-size:24px; font-weight:700; color:var(--text); margin:0 0 12px; }
.error-404__desc{ color:var(--text-muted); font-size:15px; line-height:1.6; margin:0 0 28px; }
.error-404__search{display:flex;align-items:center;gap:10px;background:var(--white);border:1.5px solid var(--border);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:var(--shadow-card);margin:0 0 28px;}
.error-404__search svg{ width:18px; height:18px; color:var(--text-muted); flex-shrink:0; }
.error-404__search input{ flex:1; border:none; outline:none; font-size:14px; min-width:0; }
.error-404__search .btn{ border-radius:999px; }
.error-404__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 28px;}
.error-404__link{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--bg-light);color:var(--navy);font-size:13.5px;font-weight:600;transition:background .15s ease, color .15s ease;}
.error-404__link svg{ width:15px; height:15px; }
.error-404__link:hover{ background:var(--navy); color:var(--white); }
.error-404__home svg{ width:16px; height:16px; }
/* ============================================================ Proje detay ============================================================ */
/* Yarışma Projeleri bağlamından açılan proje detayında (proje-detay.php?from=yarisma) gösterilen Oy Ver butonu — sayfa banner'ının hemen altında ortalanmış, tıklanınca üstünde "Oyunuz Alınmıştır" balonu beliriyor ve buton tekrar oy vermeyi engelleyecek şekilde devre dışı kalıyor. */
.vote-bar{ padding:22px 0 0; }
.vote-bar__inner{ display:flex; justify-content:flex-end; }
.vote-widget{ position:relative; }
.vote-toast{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);background:#2E9E4F;color:var(--white);font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;}
.vote-toast.is-visible{ opacity:1; }
.vote-toast::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#2E9E4F;}
.project-detail{ display:flex; gap:40px; align-items:flex-start; }
.project-detail__media{ flex:1 1 460px; }
.project-detail__media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-lg);margin:0;}
.project-detail__info{ flex:1 1 460px; min-width:0; }
.project-detail__title{ font-size:24px; margin:0 0 14px; }
.project-detail__desc{ font-size:15px; line-height:1.8; color:var(--text-muted); margin:0 0 28px; }
.project-detail__meta{ border-top:1px solid var(--border); }
.project-detail__meta li{display:flex;flex-wrap:wrap;gap:6px 10px;padding:14px 0;border-bottom:1px solid var(--border);font-size:14px;}
.project-detail__meta-label{ font-weight:700; color:var(--navy-dark); }
.project-detail__meta-label::after{ content:":"; }
.project-detail__meta-value{ color:var(--text-muted); }
.project-related{ margin-top:48px; padding-top:40px; border-top:1px solid var(--border); }
.project-related__title{ font-size:20px; margin:0 0 20px; }
.project-related__action{ text-align:center; }
.project-carousel{ position:relative; display:flex; align-items:center; gap:12px; margin-bottom:32px; }
.project-carousel__track{flex:1;min-width:0;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:4px;}
.project-carousel__item{ flex:0 0 260px; scroll-snap-align:start; }
.project-carousel__nav{flex-shrink:0;width:40px; height:40px;border-radius:50%;border:1px solid var(--border);background:var(--white);color:var(--navy);display:flex;align-items:center;justify-content:center;transition:background .15s ease, color .15s ease;}
.project-carousel__nav:hover{ background:var(--navy); color:var(--white); }
.project-carousel__nav svg{ width:16px; height:16px; }
/* ============================================================ Haber detay ============================================================ */
.news-detail__photo{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); margin:0; }
.news-detail__head{ display:flex; gap:18px; align-items:flex-start; margin:24px 0 20px; }
.news-detail__date{flex-shrink:0;width:64px;text-align:center;background:var(--navy);color:var(--white);border-radius:var(--radius);padding:10px 0;}
.news-detail__date-day{ display:block; font-size:24px; font-weight:700; line-height:1; }
.news-detail__date-weekday{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; margin-top:4px; color:var(--amber); }
.news-detail__title{ font-size:24px; margin:0 0 8px; }
.news-detail__meta{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); }
.news-detail__meta svg{ width:14px; height:14px; color:var(--amber); flex-shrink:0; }
.news-detail__meta a{ color:var(--navy); font-weight:600; }
.news-detail__meta a:hover{ text-decoration:underline; }
.news-detail__body p{ font-size:15px; line-height:1.8; color:var(--text-muted); margin:0 0 16px; }
.news-detail__share{ border-top:1px solid var(--border); padding-top:24px; margin-top:8px; }
.news-detail__share h4{ font-size:16px; margin:0 0 12px; }
.news-detail__share-icons{ display:flex; gap:10px; }
.news-detail__share-icons a{width:38px; height:38px;display:flex; align-items:center; justify-content:center;border-radius:50%;border:1px solid var(--border);color:var(--navy);transition:background .15s ease, color .15s ease;}
.news-detail__share-icons a:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.news-detail__share-icons svg{ width:16px; height:16px; }
.news-detail__gallery{display:grid;grid-template-columns: repeat(6, 1fr);gap:12px;margin-top:28px;}
.news-detail__gallery-item{ display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; }
.news-detail__gallery-item img{ width:100%; height:100%; object-fit:cover; margin:0; transition:transform .2s ease; }
.news-detail__gallery-item:hover img{ transform:scale(1.05); }
/* ============================================================ Meslek Ödülleri (kamuya açık liste + detay) ============================================================ */
.odul-grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:24px;}
.odul-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow .2s ease, transform .2s ease;}
.odul-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px); }
.odul-card__media{ aspect-ratio:300/220; overflow:hidden; }
.odul-card__media img{ width:100%; height:100%; object-fit:cover; margin:0; }
.odul-card__body{ display:flex; flex-direction:column; padding:16px 18px 18px; flex:1; }
.odul-card__name{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:700;color:var(--navy-dark);line-height:1.35;margin:0 0 6px;}
.odul-card__date{ font-size:12px; font-weight:600; color:var(--amber); }
.odul-card__club{ font-size:12.5px; color:var(--text-muted); margin:2px 0 14px; }
.odul-card__more{ align-self:flex-start; margin-top:auto; }
/* ============================================================ Siz de Katılın (liste + detay) ============================================================ */
.katilin-intro__inner{ max-width:760px; margin:0 auto; text-align:center; }
.katilin-intro__title{ margin-bottom:18px; }
.katilin-intro__inner p{ color:var(--text); line-height:1.75; }
.katilin-intro__inner .katilin-intro__lead{ font-weight:700; color:var(--navy-dark); }
.katilin-intro__facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; margin:6px 0 22px; }
.katilin-intro__facts li{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:var(--bg-light); font-size:13.5px; font-weight:600; color:var(--navy); }
.katilin-intro__facts svg{ width:16px; height:16px; color:var(--amber); }
.katilin-list{ background:var(--bg-light); }
/* 5 kartta son satır (3 + 2) ortalansın diye grid yerine flex-wrap + justify-content:center. */
.katilin-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.katilin-card{ width:calc((100% - 48px) / 3); display:flex; flex-direction:column; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; transition:box-shadow .2s ease, transform .2s ease; }
.katilin-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px); }
/* Detay sayfasındaki üst görselle (content-page__banner, 1550x500) aynı oran. */
.katilin-card__media{ aspect-ratio:1550/500; overflow:hidden; }
.katilin-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.katilin-card:hover .katilin-card__media img{ transform:scale(1.04); }
.katilin-card__body{ display:flex; flex-direction:column; flex:1; padding:20px 22px 22px; text-align:center; }
.katilin-card__title{ font-size:17px; font-weight:700; color:var(--navy-dark); line-height:1.35; margin:0 0 8px; }
.katilin-card__desc{ font-size:13.5px; color:var(--text-muted); line-height:1.6; margin:0 0 16px; }
.katilin-card__more{ margin-top:auto; align-self:center; display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:var(--amber); }
.katilin-card__more svg{ width:12px; height:12px; transition:transform .2s ease; }
.katilin-card:hover .katilin-card__more svg{ transform:translateX(3px); }
/* Detay: yazı sonunda çağrı kutusu + önceki/sonraki başlık */
.katilin-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:36px; padding:26px 28px; border-radius:var(--radius-lg); background:var(--navy); }
.katilin-cta h3{ color:var(--white); margin:0 0 4px; }
.katilin-cta p{ color:rgba(255, 255, 255, .78); margin:0; }
.katilin-cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.katilin-pager{ display:flex; justify-content:space-between; gap:16px; margin-top:28px; padding-top:22px; border-top:1px solid var(--border); }
/* .content-page a:not(.btn) altı çizili lacivert link stilini ezmek için aynı özgüllükte. */
.content-page a.katilin-pager__link{ display:flex; flex-direction:column; gap:4px; max-width:48%; text-decoration:none; }
.katilin-pager__link--next{ margin-left:auto; text-align:right; align-items:flex-end; }
.katilin-pager__label{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--amber); }
.katilin-pager__label svg{ width:14px; height:14px; }
.katilin-pager__title{ font-size:15px; font-weight:700; color:var(--navy-dark); }
.katilin-pager__link:hover .katilin-pager__title{ color:var(--navy); text-decoration:underline; }
/* ============================================================ Bilgi Bankası (video / doküman / kurumsal arşiv) ============================================================ */
.kb-layout{ display:flex; gap:30px; align-items:flex-start; }
.kb-sidebar{ flex:0 0 280px; position:sticky; top:calc(var(--navbar-main-height, 93px) + 15px); }
.kb-search{ border-top:3px solid var(--navy); padding-top:16px; }
.kb-search input{ margin-bottom:0; }
.kb-main{ flex:1; min-width:0; }
/* Sol sekmeler: medya türü seçimi (Videolar / Dokümanlar / Kurumsal Arşiv) */
.kb-tabs{display:flex;flex-direction:column;margin-top:18px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.kb-tab{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 18px;background:none;border:none;border-left:3px solid transparent;font-size:14px;font-weight:600;color:var(--text);text-align:left;transition:background .18s ease, color .18s ease, border-color .18s ease;}
.kb-tab + .kb-tab{ border-top:1px solid var(--border); }
.kb-tab:hover{ background:var(--bg-light); color:var(--navy); }
.kb-tab.is-active{ background:#FDF6E4; border-left-color:var(--amber); color:var(--navy-dark); font-weight:700; }
.kb-tab__count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 8px;border-radius:999px;background:var(--bg-light);font-size:11.5px;font-weight:700;color:var(--text-muted);flex-shrink:0;}
.kb-tab.is-active .kb-tab__count{ background:var(--amber); color:var(--navy-dark); }
/* Sekme panelleri — aynı anda yalnızca biri akışta. Arama kutusuna bir şey
   yazıldığında ise sekme ayrımı kalkar: sonuçlar tüm panellerden toplanıp alt
   alta listelenir, eşleşmesi olmayan panel tamamen gizlenir. */
.kb-pane{ display:none; }
.kb-pane.is-active,
.kb-main.is-searching .kb-pane{ display:block; }
.kb-main.is-searching .kb-pane.is-empty{ display:none; }
.kb-main.is-searching .kb-chips{ display:none; }
.kb-main.is-searching .kb-pane + .kb-pane{ margin-top:40px; }
.kb-pane__title{ display:none; }
.kb-main.is-searching .kb-pane__title{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 14px;}
/* Kategori filtresi çipleri */
.kb-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.kb-chip{padding:7px 16px;border:1px solid var(--border);border-radius:999px;background:var(--white);font-size:13px;font-weight:600;color:var(--text-muted);transition:background .18s ease, color .18s ease, border-color .18s ease;}
.kb-chip:hover{ border-color:var(--navy); color:var(--navy); }
.kb-chip.is-active{ background:var(--navy); border-color:var(--navy); color:var(--white); }
/* Kategori grubu */
.kb-group + .kb-group{ margin-top:34px; }
.kb-group.is-filtered-out{ display:none; }
.kb-group__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.kb-group__title{ font-size:17px; font-weight:700; color:var(--navy-dark); margin:0; }
.kb-group__count{ font-size:12.5px; color:var(--text-muted); flex-shrink:0; }
.kb-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
/* Kurumsal arşiv: tek dosyalık, kısa başlıklı kayıtlar — daha küçük kutular */
.kb-grid--compact{ grid-template-columns:repeat(6, 1fr); gap:14px; }
.kb-grid--compact .kb-card__thumb{ aspect-ratio:16/11; }
.kb-grid--compact .kb-card__doc-icon{ width:26px; height:26px; }
.kb-grid--compact .kb-card__filetype{ font-size:9.5px; padding:2px 7px; }
.kb-grid--compact .kb-card__download{ top:7px; right:7px; width:25px; height:25px; }
.kb-grid--compact .kb-card__download svg{ width:11px; height:11px; }
.kb-grid--compact .kb-card__body{ padding:9px 11px 11px; }
.kb-grid--compact .kb-card__title{ font-size:12.5px; }
.kb-group__more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:0;background:none;border:none;font-size:13px;font-weight:600;color:var(--navy);transition:color .18s ease;}
.kb-group__more:hover{ color:var(--azure); }
.kb-group__more svg{ width:12px; height:12px; transition:transform .2s ease; }
.kb-group.is-expanded .kb-group__more svg{ transform:rotate(180deg); }
/* Kart — video ve doküman aynı iskeleti paylaşır, kapak alanı farklılaşır.
   Kart bir bağlantı değil kapsayıcıdır: video kartında kapak alanının kendisi
   oynat düğmesi, doküman kartında ise iki ayrı bağlantı var (gövde dosyayı
   açar, köşedeki düğme indirir) — iç içe <a> kurmamak için böyle. */
.kb-card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
.kb-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px); border-color:var(--navy); }
.kb-card--extra{ display:none; }
.kb-group.is-expanded .kb-card--extra,
.kb-group.is-search-open .kb-card--extra{ display:flex; }
.kb-group.is-search-open .kb-group__more{ display:none; }
/* Arama filtresi, "fazladan kartları göster" kurallarını da bastırmalı —
   bu yüzden .kb-group ile en az onlar kadar özgül yazıldı. */
.kb-group .kb-card.is-filtered-out{ display:none; }
.kb-card__open{ display:flex; flex-direction:column; flex:1; }
.kb-card__thumb{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:0;aspect-ratio:16/10;background:var(--navy-dark);border:none;overflow:hidden;}
.kb-card__cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Gölge, kapak görseli konulan kartlarda düğmenin fotoğraf üzerinde kaybolmasını
   engelliyor; lacivert zeminde ise görünmüyor. */
.kb-card__play{position:relative;display:flex;align-items:center;justify-content:center;width:44px; height:44px;border-radius:50%;background:rgba(255, 255, 255, .92);color:var(--navy-dark);box-shadow:0 2px 12px rgba(10, 14, 30, .35);transition:transform .2s ease, background .2s ease;}
.kb-card__play svg{ width:15px; height:15px; margin-left:2px; }
.kb-card:hover .kb-card__play{ transform:scale(1.08); background:var(--white); }
/* Doküman kapağı: görsel yerine PDF rozetiyle kurulmuş bir "sayfa" yüzeyi */
.kb-card__thumb--doc{ background:var(--bg-light); border-bottom:1px solid var(--border); flex-direction:column; gap:8px; }
.kb-card__doc-icon{ width:34px; height:34px; color:var(--navy); opacity:.55; }
.kb-card__filetype{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--white);background:#B3261E;padding:3px 9px;border-radius:var(--radius-sm);}
.kb-card__download{position:absolute;top:10px; right:10px;z-index:2;display:flex;align-items:center;justify-content:center;width:30px; height:30px;border-radius:50%;background:var(--white);color:var(--navy);box-shadow:var(--shadow-card);transition:background .18s ease, color .18s ease;}
.kb-card__download:hover{ background:var(--navy); color:var(--white); }
.kb-card__download svg{ width:13px; height:13px; }
.kb-card__body{ display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px; flex:1; }
.kb-card__title{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:600;color:var(--navy-dark);line-height:1.4;}
/* Arama hiçbir kartı bırakmadığında görünen satır */
.kb-empty{ display:none; font-size:14px; color:var(--text-muted); padding:24px 0; margin:0; }
.kb-main.is-empty .kb-empty{ display:block; }
/* YouTube ışık kutusu */
.kb-video-modal{ position:fixed; inset:0; z-index:1100; opacity:0; pointer-events:none; transition:opacity .28s ease; }
.kb-video-modal.is-open{ opacity:1; pointer-events:auto; }
.kb-video-modal__backdrop{ position:absolute; inset:0; background:rgba(10, 14, 30, .78); }
.kb-video-modal__panel{position:relative;width:92%;max-width:980px;margin:0 auto;top:50%;transform:translateY(-50%) scale(.98);transition:transform .28s ease;}
.kb-video-modal.is-open .kb-video-modal__panel{ transform:translateY(-50%) scale(1); }
.kb-video-modal__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.kb-video-modal__title{ font-family:var(--font-heading); font-size:15px; font-weight:600; color:var(--white); }
.kb-video-modal__close{display:flex;align-items:center;justify-content:center;width:34px; height:34px;border-radius:50%;border:none;background:rgba(255, 255, 255, .14);color:var(--white);flex-shrink:0;transition:background .18s ease;}
.kb-video-modal__close:hover{ background:rgba(255, 255, 255, .28); }
.kb-video-modal__close svg{ width:15px; height:15px; }
.kb-video-modal__frame{ position:relative; aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden; }
.kb-video-modal__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* ============================================================ İletişim (iletisim.php) ============================================================ */
.contact-map{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); margin-top:36px; }
.contact-map iframe{ display:block; width:100%; }
.contact-layout{ display:flex; gap:48px; align-items:flex-start; }
.contact-info{ flex:0 0 320px; }
.contact-info__list{ display:flex; flex-direction:column; gap:20px; margin-top:20px; }
.contact-info__list li{ display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--text); line-height:1.5; }
.contact-info__list svg{ width:20px; height:20px; color:var(--amber); flex-shrink:0; margin-top:1px; }
.contact-info__list a{ color:var(--navy); font-weight:600; }
.contact-info__list a:hover{ text-decoration:underline; }
.contact-form{ flex:1; min-width:0; }
/* İletişim Bilgileri tarafında liste başlığın altında 20px boşlukla başlıyor (.contact-info__list); form tarafında da aynı boşluk. */
.contact-form .kbf-form__title{ margin-bottom:20px; }
/* Bülten Detay: panel liste sayfasındaki "Detay" butonundan açılan sade görüntüleme sayfası — sadece meta bilgi + galeri + dosya listesi. */
.bulten-detail__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:20px;margin-bottom:8px;border-bottom:1px solid var(--border);}
.bulten-detail__meta{ font-size:13px; font-weight:700; color:var(--text-muted); margin:0 0 6px; }
.bulten-detail__ozet{ font-size:15px; font-style:italic; color:var(--text); margin:0; }
.bulten-detail__section-title{ font-size:20px; color:var(--navy); margin:28px 0 14px; }
.bulten-detail__gallery{ display:flex; flex-wrap:wrap; gap:14px; }
.bulten-detail__gallery-item{display:block;width:120px;height:150px;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-card);}
.bulten-detail__gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; margin:0; }
.bulten-detail__files{ display:flex; flex-wrap:wrap; gap:10px; }
/* Proje Onayı Detay: Proje Onayları listesindeki "Onay Linki" ile açılan, tek bir
   projenin onay durumunu/kriterlerini gösterip Onayla/Reddet alınan sade sayfa. */
.onay-detail__title{ font-size:20px; color:var(--navy); margin:0 0 18px; }
.onay-detail__row{ font-size:14px; color:var(--text); margin:0 0 10px; }
.onay-detail__row strong{ color:var(--text-muted); font-weight:700; }
.onay-detail__kriterler{ margin:6px 0 24px; padding-left:20px; }
.onay-detail__kriterler li{ font-size:14px; color:var(--text); margin-bottom:6px; }
.onay-detail__kriter-puan{ color:var(--text-muted); font-weight:600; }
.onay-detail__comment{ max-width:100%; margin-bottom:18px; min-height:110px; resize:vertical; }
.onay-detail__actions{ display:flex; gap:12px; }
.onay-detail__resolved{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-muted); }
.haberler-sidebar-stack{flex:0 0 300px;display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--navbar-main-height, 93px) + 15px);}
.haberler-sidebar-stack .inner-page__sidebar{ flex:0 0 auto; position:static; }
.latest-news-widget{width:100%;background:var(--white);border-top:3px solid var(--navy);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:20px 24px;}
.latest-news-widget h5{ margin:0 0 16px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); }
.latest-news-widget ul{ display:flex; flex-direction:column; gap:14px; }
.latest-news-widget li a{ display:flex; gap:10px; align-items:flex-start; }
.latest-news-widget li img{ width:56px; height:56px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; margin:0; }
.latest-news-widget__text{ display:flex; flex-direction:column; gap:4px; }
.latest-news-widget__title{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;font-weight:600;color:var(--navy-dark);line-height:1.35;}
.latest-news-widget__date{ font-size:11px; color:var(--text-muted); }
.project-carousel__nav--prev svg{ transform:rotate(180deg); }
.flip-kitap{height:calc(100vh - 200px);max-height:700px;width:100%;}
.fullscreen{background-color:#0f0f0f;}
.solid-container{height:100vh;}
/* ============================================================ Kulüplerimiz (kulupler.php / kulup-detay.php) ============================================================ */
/* Kenar çubuğu, Projeler sayfasının .projects-layout/.projects-sidebar ızgarasını
   yeniden kullanıyor; buradaki fark her filtrenin tek bir gri kutu yerine kendi
   beyaz kartında durması. */
.club-filters{ display:flex; flex-direction:column; gap:16px; }
.club-filters__group{background:var(--white);border-top:3px solid var(--navy);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:18px 20px;}
.club-filters__group h5{margin:0 0 12px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);}
.club-filters__search{ display:flex; }
.club-filters__search input{flex:1 1 auto;min-width:0;padding:10px 12px;border:1px solid var(--border);border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);background:var(--white);color:var(--text);font-family:inherit;font-size:13.5px;}
.club-filters__search input:focus{ outline:none; border-color:var(--navy); }
.club-filters__search .btn{ border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
/* Aranabilir açılır liste (.searchable-select) üye paneli formları için
   tasarlandığından alan altında 22px boşluk bırakıyor; filtre kartında her
   alan zaten kendi kartında olduğu için o boşluğu kaldırıyoruz. */
.club-filters .searchable-select__input{ margin-bottom:0; padding:10px 34px 10px 12px; font-size:13.5px; }
.club-grid{display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap:20px;}
.club-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:18px 16px 16px;text-align:center;transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
.club-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px); border-color:var(--navy); }
/* Logolar farklı en/boy oranlarında geliyor: sabit yükseklikli bir kutu içinde
   object-fit:contain ile ortalanıyor, böylece kart satırları hizalı kalıyor. */
.club-card__logo{display:flex;align-items:center;justify-content:center;height:155px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.club-card__logo img{ max-width:100%; max-height:100%; width:auto; object-fit:contain; }
.club-card__name{font-size:14.5px;font-weight:700;color:var(--navy-dark);line-height:1.4;margin:14px 0 12px;}
.club-card__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;margin-top:auto;}
.club-card__meta span{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted); }
.club-card__meta svg{ width:14px; height:14px; color:var(--navy); flex-shrink:0; }
.club-empty{ margin:0; padding:40px 0; text-align:center; color:var(--text-muted); }
/* Filtre/sayfalama fetch ile (tam sayfa yenilenmeden) çalışırken kısa bir
   soluklaşma — sonuç değişmeden önce tıklamanın bir şey yaptığını hissettirir. */
#clubApp.is-loading{ opacity:.5; pointer-events:none; transition:opacity .1s ease; }
.club-detail{ display:flex; gap:36px; align-items:flex-start; }
.club-detail__card{flex:0 0 370px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:24px;}
.club-detail__logo{display:flex;align-items:center;justify-content:center;height:210px;padding-bottom:22px;border-bottom:1px solid var(--border);}
.club-detail__logo img{ max-width:100%; max-height:100%; width:auto; object-fit:contain; }
.club-detail__meta{ margin-top:22px; display:flex; flex-direction:column; gap:16px; }
.club-detail__meta li{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--text-muted); line-height:1.5; }
.club-detail__meta strong{ color:var(--navy-dark); font-weight:700; }
.club-detail__meta-icon{width:26px; height:26px;flex-shrink:0;border-radius:50%;background:var(--navy);color:var(--white);display:flex; align-items:center; justify-content:center;}
.club-detail__meta-icon svg{ width:14px; height:14px; }
/* Sosyal medya satırı aynı ikon boyutunu kullanıyor; markaya özgü gradyan arka
   plan footer'dakiyle aynı [class*="pbl-social-instagram"].colorful kuralından
   (!important) geliyor, buradaki navy arka planın üzerine otomatik biniyor. */
.club-detail__web{ display:inline-block; color:#2E9E4F; font-size:14px; font-weight:600; word-break:break-all; }
.club-detail__web:hover{ text-decoration:underline; }
.club-detail__body{ flex:1 1 auto; min-width:0; }
.club-detail__title{ font-size:28px; margin:0 0 26px; }
.club-stats{display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap:18px;max-width:100%;}
.club-stat{background:var(--bg-light);border-top:3px solid var(--navy);border-radius:var(--radius-lg);padding:26px 12px 22px;text-align:center;}
.club-stat__icon{width:50px;height:50px;margin:0 auto 12px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-card);color:var(--navy);display:flex;align-items:center;justify-content:center;}
.club-stat__icon svg{ width:22px; height:22px; }
.club-stat__number{font-family:var(--font-heading);font-size:clamp(26px, 3vw, 34px);font-weight:700;color:var(--navy);line-height:1;margin-bottom:6px;}
.club-stat__label{ font-size:13.5px; font-weight:600; color:var(--text-muted); }
.club-detail__intro{ margin:32px 0 0; }
.club-detail__projects{ margin-top:32px; }
.club-detail__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.club-detail__person{ color:var(--navy); font-weight:600; }
.club-detail__person:hover{ text-decoration:underline; }
.club-board{margin-top:32px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:24px;}
.club-board__title{ font-size:20px; margin:0 0 18px; }
.club-board__list{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px 22px; margin:0; }
.club-board__list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.club-board__role{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.club-board__name{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--navy); text-align:right; }
.club-board__name svg{ width:11px; height:11px; flex-shrink:0; }
.club-board__name:hover{ text-decoration:underline; }
.officer-detail__photo{ aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:var(--bg-light); }
.officer-detail__photo img{ width:100%; height:100%; object-fit:cover; }
.officer-detail__identity{ text-align:center; padding:18px 0; border-bottom:1px solid var(--border); }
.officer-detail__name{ font-size:19px; margin:0 0 10px; }
.officer-detail__role{display:inline-block;background:var(--navy);color:var(--white);font-size:11px;font-weight:700;letter-spacing:.03em;padding:5px 12px;border-radius:999px;}
.officer-detail__club-link{ color:var(--navy); font-weight:600; }
.officer-detail__club-link:hover{ text-decoration:underline; }
.officer-detail__subtitle{ font-size:20px; margin:34px 0 16px; }
.officer-info{ display:flex; flex-direction:column; border-top:1px solid var(--border); }
.officer-info li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 4px;border-bottom:1px solid var(--border);}
.officer-info__label{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--text-muted); }
.officer-info__label svg{ width:16px; height:16px; color:var(--navy); flex-shrink:0; }
.officer-info__value{ font-size:14px; font-weight:600; color:var(--navy-dark); text-align:right; word-break:break-word; }
.officer-info__value a{ color:var(--navy); }
.officer-info__value a:hover{ text-decoration:underline; }
.auth-gate--inline{ max-width:none; padding:32px 28px; }
.qr-page{ min-height:100vh; padding:56px 20px; background:var(--white); }
.qr-page__inner{ max-width:960px; text-align:center; }
.qr-page__logo{ height:52px; margin:0 auto 28px; display:block; }
.qr-page__title{ font-size:30px; margin:0 0 8px; }
.qr-page__subtitle{ font-size:14px; color:var(--text-muted); margin:0 0 36px; }
.qr-page__form{ text-align:left; }
.qr-page__submit{width:100%;justify-content:center;text-transform:uppercase;padding:16px;font-size:14px;letter-spacing:.03em;margin-top:8px;}
.qr-page__result{ display:flex; flex-direction:column; align-items:center; padding:24px 0; }
.qr-page__result-icon{ color:#2E9E4F; margin-bottom:14px; }
.qr-page__result-text{ font-size:16px; font-weight:600; color:#2E9E4F; margin:0 0 10px; }
.qr-page__result-link{ font-size:14px; font-weight:600; color:var(--navy); text-decoration:underline; }
.qr-page__result-link:hover{ color:var(--navy-dark); }
/* ============================================================ Konuşmacı Bankası ============================================================ */
/* Düzen Bilgi Bankası'nınkini (kb-layout / kb-sidebar / kb-search) kullanır. */
.spk-filter{ margin-top:18px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.spk-filter__title{ margin:0; padding:14px 18px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--navy-dark); border-bottom:1px solid var(--border); }
/* İl sayısı arttıkça liste uzamasın: kendi içinde kayar. */
.spk-filter__list{ display:flex; flex-direction:column; max-height:390px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:6px 0; }
.spk-filter__item{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 18px; background:none; border:none; border-left:3px solid transparent; font-size:14px; font-weight:600; color:var(--text); text-align:left; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.spk-filter__item:hover{ background:var(--bg-light); color:var(--navy); }
.spk-filter__item.is-active{ background:#FDF6E4; border-left-color:var(--amber); color:var(--navy-dark); font-weight:700; }
.spk-filter__label{ display:inline-flex; align-items:center; gap:8px; }
.spk-filter__count{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; padding:0 8px; border-radius:999px; background:var(--bg-light); font-size:11.5px; font-weight:700; color:var(--text-muted); flex-shrink:0; }
.spk-filter__item.is-active .spk-filter__count{ background:var(--amber); color:var(--navy-dark); }
.spk-result{ margin:0 0 16px; font-size:13.5px; color:var(--text-muted); }
.spk-result strong{ color:var(--navy-dark); }
.spk-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
.spk-card{ position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; padding-top:26px; text-align:center; background:var(--white); border:1px solid var(--border); border-top:3px solid var(--navy); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); cursor:pointer; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.spk-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px); border-top-color:var(--amber); }
.spk-card[hidden]{ display:none; }
/* Fotoğraf yoksa aynı daire içinde ad-soyad baş harfleri görünür. */
.spk-avatar{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:96px; height:96px; border-radius:50%; overflow:hidden; background:var(--navy); color:var(--white); font-family:var(--font-heading); font-size:30px; font-weight:700; box-shadow:0 0 0 4px var(--white), 0 0 0 5px var(--border); }
.spk-avatar img{ width:100%; height:100%; object-fit:cover; margin:0; }
.spk-card__name{ font-size:16.5px; margin:18px 20px 2px; }
.spk-card__role{ font-size:12.5px; color:var(--text-muted); margin:0 20px 10px; line-height:1.4; }
.spk-card__topic{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:3em; margin:0 20px 16px; font-size:14px; line-height:1.5; color:var(--text); }
/* İller: tek satır, yatay kayar, kaydırma çubuğu gizli. Taşma varsa kenarlar
   yumuşakça silikleşir (main.js is-fade-start / is-fade-end ekler). Sığan
   satırda etiketler ortalı; ilk/son öğedeki auto margin taşma olunca sıfıra
   düşer, böylece kaydırma her zaman en baştan başlar. */
.spk-chips{ align-self:stretch; display:flex; gap:6px; margin-bottom:20px; padding:0 20px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.spk-chips::-webkit-scrollbar{ display:none; }
.spk-chips > :first-child{ margin-left:auto; }
.spk-chips > :last-child{ margin-right:auto; }
[data-hscroll].is-dragging{ cursor:grabbing; user-select:none; }
[data-hscroll].is-fade-end{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 32px), transparent); }
[data-hscroll].is-fade-start{ -webkit-mask-image:linear-gradient(to right, transparent, #000 32px); mask-image:linear-gradient(to right, transparent, #000 32px); }
[data-hscroll].is-fade-start.is-fade-end{ -webkit-mask-image:linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image:linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.spk-chip{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:var(--bg-light); font-size:12px; font-weight:600; color:var(--navy); white-space:nowrap; }
.spk-card__more{ display:flex; align-items:center; justify-content:center; gap:6px; align-self:stretch; margin-top:auto; padding:14px; background:none; border:none; border-top:1px solid var(--border); border-radius:0 0 var(--radius-lg) var(--radius-lg); font-size:13px; font-weight:700; color:var(--navy); transition:background .18s ease, color .18s ease; }
.spk-card__more svg{ width:12px; height:12px; transition:transform .2s ease; }
.spk-card:hover .spk-card__more{ background:var(--bg-light); }
.spk-card:hover .spk-card__more svg{ transform:translateX(3px); }
.spk-empty{ padding:40px 20px; text-align:center; font-size:14px; color:var(--text-muted); background:var(--bg-light); border-radius:var(--radius-lg); }
/* Özgeçmiş penceresi: başlık ve alt çubuk sabit, arada kalan içerik kayar. */
.spk-modal{ position:fixed; inset:0; z-index:1100; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .28s ease, visibility 0s linear .28s; }
.spk-modal.is-open{ visibility:visible; opacity:1; pointer-events:auto; transition:opacity .28s ease; }
.spk-modal__backdrop{ position:absolute; inset:0; background:rgba(10, 14, 30, .7); }
.spk-modal__panel{ position:absolute; top:50%; left:50%; display:flex; flex-direction:column; width:calc(100% - 32px); max-width:720px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); background:var(--white); border-radius:var(--radius-lg); box-shadow:0 30px 70px rgba(0, 0, 0, .35); overflow:hidden; transform:translate(-50%, -50%) scale(.97); transition:transform .28s ease; }
.spk-modal.is-open .spk-modal__panel{ transform:translate(-50%, -50%) scale(1); }
.spk-modal__close{ position:absolute; top:14px; right:14px; z-index:2; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:none; border-radius:50%; background:rgba(255, 255, 255, .14); color:var(--white); transition:background .18s ease; }
.spk-modal__close:hover{ background:rgba(255, 255, 255, .28); }
.spk-modal__close svg{ width:15px; height:15px; }
.spk-modal__content{ display:flex; flex-direction:column; flex:1; min-height:0; }
.spk-cv__head{ display:flex; align-items:center; gap:20px; flex-shrink:0; padding:28px 64px 26px 30px; background:var(--navy); }
.spk-cv__head .spk-avatar{ width:88px; height:88px; font-size:28px; background:var(--navy-dark); box-shadow:0 0 0 4px rgba(255, 255, 255, .22); }
.spk-cv__head-text{ min-width:0; }
.spk-cv__name{ margin:0 0 4px; font-size:22px; color:var(--white); }
.spk-cv__role{ margin:0 0 6px; font-size:14px; font-weight:600; color:rgba(255, 255, 255, .88); }
.spk-cv__club{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:13px; color:rgba(255, 255, 255, .7); }
.spk-cv__club svg{ width:14px; height:14px; color:var(--amber); flex-shrink:0; }
.spk-cv__body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:26px 30px 6px; }
.spk-cv__topic{ margin-bottom:24px; padding:16px 18px; border-left:3px solid var(--amber); border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:#FDF6E4; }
.spk-cv__label{ display:block; margin-bottom:4px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.spk-cv__topic p{ margin:0; font-size:16px; font-weight:700; line-height:1.45; color:var(--navy-dark); }
.spk-cv__section{ margin-bottom:22px; }
.spk-cv__section h3{ margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--border); font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--navy); }
.spk-cv__section p{ color:var(--text); font-size:14.5px; }
.spk-cv__section p:last-child{ margin-bottom:0; }
.spk-cv__section ul{ display:flex; flex-direction:column; gap:6px; }
.spk-cv__section li{ position:relative; padding-left:16px; font-size:14px; line-height:1.6; color:var(--text); }
.spk-cv__section li::before{ content:""; position:absolute; top:.62em; left:0; width:6px; height:6px; border-radius:50%; background:var(--amber); }
.spk-cv__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.spk-cv__foot{ display:flex; justify-content:flex-end; flex-shrink:0; padding:16px 30px; border-top:1px solid var(--border); }
@media (prefers-reduced-motion:reduce){ .spk-modal, .spk-modal__panel, .spk-card{ transition:none; } }