/* =====================================================================
   GUFED Tasarım Sistemi — "Uçuş Rotası"
   Tek stil kaynağı (Bootstrap/Tailwind yok). app.css'ten SONRA yüklenir.
   Jenerik isimler (.gf-btn, .gf-h1) önek taşır.
   ===================================================================== */

/* Eski .header'ın "position:fixed" olması nedeniyle app.css içinde .content'e
   eklenen dengeleme boşluğu (~205px). Yeni header sticky (akış içi) olduğu
   için bu boşluk artık gereksiz ve her sayfanın üstünde büyük bir boşluk
   bırakıyor; sıfırlıyoruz. */
.front-page .content{padding-top:0 !important}

*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%}
/* Temel reset: liste ve link varsayılanlarını sıfırlar (eski Tailwind
   Preflight'ın yerini alır). Bileşen sınıfları kendi stillerini verir;
   .prose içinde liste/link görünümü yeniden açılır. */
ul,ol{list-style:none; margin:0; padding:0}
a{color:inherit; text-decoration:inherit}
input[type="checkbox"],input[type="radio"]{accent-color:var(--red); width:1.05rem; height:1.05rem}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .live-pill,.gf-btn,.region,.acc-body,.dropdown-panel,.mega-panel,.burger svg,.nav-trigger svg,.acc-trigger svg,.acc-subtrigger svg{
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
}

/* ===================== TOKENS ===================== */
:root{
  --bg:#F3F6F8; --surface:#FFFFFF; --ink:#1C2530; --muted:#5B6B7A;
  --red:#E51937; --red-dark:#A81028; --sky:#2F5D8A; --sky-soft:#E7EFF5;
  --line:#DCE3E9; --line-strong:#C3CDD6;
  --shadow:0 1px 2px rgba(28,37,48,.05),0 8px 24px -12px rgba(28,37,48,.12);
  --radius-lg:1rem; --radius-md:.7rem; --radius-sm:.45rem;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0F151E; --surface:#161F2B; --ink:#E9EEF3; --muted:#93A5B7; --red:#FF4D63; --red-dark:#E51937; --sky:#7FB0E0; --sky-soft:#1B2836; --line:#263241; --line-strong:#374557; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5); }
}
:root[data-theme="dark"]{ --bg:#0F151E; --surface:#161F2B; --ink:#E9EEF3; --muted:#93A5B7; --red:#FF4D63; --red-dark:#E51937; --sky:#7FB0E0; --sky-soft:#1B2836; --line:#263241; --line-strong:#374557; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5); }
:root[data-theme="light"]{ --bg:#F3F6F8; --surface:#FFFFFF; --ink:#1C2530; --muted:#5B6B7A; --red:#E51937; --red-dark:#A81028; --sky:#2F5D8A; --sky-soft:#E7EFF5; --line:#DCE3E9; --line-strong:#C3CDD6; --shadow:0 1px 2px rgba(28,37,48,.05),0 8px 24px -12px rgba(28,37,48,.12); }

body{
  background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ===================== PRIMITIVES ===================== */
.gf-shell{max-width:75rem; margin:0 auto; padding-inline:clamp(1.1rem,4vw,2rem)}
.gf-tap{min-height:44px; display:inline-flex; align-items:center; justify-content:center}
.gf-h1{font-family:'Big Shoulders Display'; font-weight:850; letter-spacing:-.01em; line-height:.96; text-wrap:balance}

.gf-btn{border-radius:999px; font-weight:700; font-size:.94rem; padding:.9rem 1.6rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; text-decoration:none}
.gf-btn:active{transform:scale(.98)}
.gf-btn--primary{background:var(--red); color:#fff}
.gf-btn--primary:hover{background:var(--red-dark); color:#fff}
.gf-btn--ghost{border:1.5px solid var(--line-strong); color:var(--ink)}
.gf-btn--ghost:hover{border-color:var(--sky); color:var(--sky)}
.gf-btn svg{width:1rem; height:1rem; transition:transform .15s ease}
.gf-btn:hover svg{transform:translateX(3px)}

/* ===================== HEADER / NAV ===================== */
header.site{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink)}
.brand svg{width:1.9rem; height:1.9rem; color:var(--red); flex:none}
.brand b{font-family:'Big Shoulders Display'; font-weight:850; font-size:1.3rem; letter-spacing:.01em}

.nav-links{display:none; align-items:center; gap:1.5rem; font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.nav-links > a{padding:.4rem 0; border-bottom:2px solid transparent; text-decoration:none; color:inherit}
.nav-links > a:hover{color:var(--ink); border-color:var(--sky)}

.nav-item{position:relative}
.nav-trigger{display:inline-flex; align-items:center; gap:.35rem; padding:.4rem 0; border-bottom:2px solid transparent; color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; background:none; border-top:0; border-left:0; border-right:0; cursor:pointer; font-family:inherit}
.nav-trigger:hover{color:var(--ink); border-bottom-color:var(--sky)}
.nav-trigger[aria-expanded="true"]{color:var(--ink); border-bottom-color:var(--sky)}
.nav-trigger svg{width:.65rem; height:.65rem; transition:transform .15s ease}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}

.dropdown-panel{position:absolute; top:calc(100% + .9rem); left:0; min-width:13.5rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow); padding:.4rem; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease; z-index:70}
.dropdown-panel.is-open{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown-panel a{display:flex; align-items:center; min-height:2.5rem; padding:.3rem .8rem; border-radius:.4rem; font-size:.87rem; font-weight:500; color:var(--ink); text-decoration:none}
.dropdown-panel a:hover{background:var(--sky-soft); color:var(--sky)}
.dropdown-panel.dropdown-panel--right{left:auto; right:0}
.dropdown-panel .dropdown-divider{height:1px; background:var(--line); margin:.35rem .4rem}

.mega-panel{position:absolute; top:calc(100% + .9rem); left:50%; transform:translate(-50%,-6px); width:min(30rem,90vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:1rem; opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease; z-index:70; display:grid; grid-template-columns:1fr 1fr; column-gap:1.25rem}
.mega-panel.is-open{opacity:1; visibility:visible; transform:translate(-50%,0)}
.mega-panel::before{content:""; position:absolute; top:0; bottom:1rem; left:50%; width:1px; background:var(--line)}
.mega-panel .mega-foot{grid-column:1 / -1; border-top:1px solid var(--line); margin-top:.6rem; padding-top:.6rem}
.mega-panel .mega-foot a{display:flex; align-items:center; justify-content:space-between; padding:.4rem .7rem; border-radius:.4rem; font-size:.85rem; font-weight:700; color:var(--sky); text-decoration:none}
.mega-panel .mega-foot a:hover{background:var(--sky-soft)}
.mega-col-title{font-family:'IBM Plex Mono'; font-size:.64rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:.3rem .7rem; margin-bottom:.15rem}
.mega-region-list{display:flex; flex-direction:column; max-height:16rem; overflow-y:auto}
.mega-region-list button{display:flex; justify-content:space-between; align-items:center; width:100%; min-height:2.4rem; padding:.4rem .7rem; border-radius:.4rem; font-size:.86rem; font-weight:600; text-align:left; color:var(--ink); background:none; border:0; cursor:pointer; font-family:inherit}
.mega-region-list button svg{width:.65rem; height:.65rem; opacity:.55; transform:rotate(-90deg)}
.mega-region-list button:hover, .mega-region-list button.is-active{background:var(--sky-soft); color:var(--sky)}
.mega-cities{display:none; flex-direction:column; max-height:16rem; overflow-y:auto}
.mega-cities.is-active{display:flex}
.mega-cities a{min-height:2.4rem; padding:.4rem .7rem; border-radius:.4rem; font-size:.85rem; color:var(--ink); display:flex; align-items:center; text-decoration:none}
.mega-cities a:hover{background:var(--sky-soft); color:var(--sky)}
.mega-empty{padding:.6rem .7rem; font-size:.82rem; color:var(--muted)}

.account-trigger{display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .5rem .3rem .3rem; border-radius:999px; border:1.5px solid var(--line-strong); background:none; cursor:pointer; font-family:inherit; color:var(--ink)}
.account-trigger:hover{border-color:var(--sky)}
.gf-avatar{width:1.8rem; height:1.8rem; border-radius:50%; object-fit:cover; flex:none}
.account-trigger span{font-size:.82rem; font-weight:600; max-width:8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.account-trigger svg{width:.6rem; height:.6rem; color:var(--muted); transition:transform .15s ease}
.account-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}

.btn-login{font-size:.82rem; font-weight:700; padding:.55rem 1.1rem; border-radius:999px; border:1.5px solid var(--line-strong); text-decoration:none; color:var(--ink)}
.btn-login:hover{border-color:var(--sky); color:var(--sky)}

.burger{display:flex; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; border-radius:.5rem; background:none; border:0; cursor:pointer; color:var(--ink)}
.burger:hover{background:var(--sky-soft)}
.burger svg{width:1.35rem; height:1.35rem}
.burger .i-close{display:none}
.burger[aria-expanded="true"] .i-open{display:none}
.burger[aria-expanded="true"] .i-close{display:block}

.mobile-panel{display:none; flex-direction:column; border-top:1px solid var(--line); padding:.5rem clamp(1.1rem,4vw,2rem) 1.2rem}
.mobile-panel.is-open{display:flex}
.mobile-panel > a{padding:.85rem 0; font-size:.98rem; font-weight:600; border-bottom:1px solid var(--line); min-height:44px; display:flex; align-items:center; text-decoration:none; color:var(--ink)}
.mobile-panel > a:last-child{border-bottom:0}
.mobile-account{display:flex; align-items:center; gap:.7rem; padding:1rem 0; border-bottom:1px solid var(--line); margin-bottom:.3rem}
.mobile-account .gf-avatar{width:2.6rem; height:2.6rem}
.mobile-account strong{display:block; font-size:.94rem}
.mobile-account span{font-size:.78rem; color:var(--muted)}

.acc{border-bottom:1px solid var(--line)}
.acc:last-child{border-bottom:0}
.acc-trigger{width:100%; display:flex; justify-content:space-between; align-items:center; padding:.85rem 0; min-height:44px; font-size:.98rem; font-weight:600; background:none; border:0; cursor:pointer; font-family:inherit; color:var(--ink)}
.acc-trigger svg{width:.75rem; height:.75rem; transition:transform .2s ease; color:var(--muted)}
.acc-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease}
.acc-body.is-open{grid-template-rows:1fr}
.acc-body > div{overflow:hidden}
.acc-body a{display:flex; align-items:center; min-height:42px; padding:.45rem .5rem .45rem 1rem; font-size:.9rem; color:var(--muted); text-decoration:none}
.acc-body a:hover{color:var(--ink)}
.acc-nested{border-bottom:1px solid var(--line)}
.acc-nested:last-child{border-bottom:0}
.acc-subtrigger{width:100%; display:flex; justify-content:space-between; align-items:center; padding:.7rem .5rem .7rem 1rem; min-height:42px; font-size:.9rem; font-weight:600; color:var(--ink); background:none; border:0; cursor:pointer; font-family:inherit}
.acc-subtrigger svg{width:.65rem; height:.65rem; transition:transform .2s ease; color:var(--muted)}
.acc-subtrigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.acc-sub a{padding-left:2rem; font-size:.86rem}

@media (min-width:1040px){
  .nav-links{display:flex}
  .btn-login{display:inline-flex}
  .burger{display:none}
  .mobile-panel{display:none !important}
}
@media (max-width:1039px){
  .nav-actions .btn-login{display:none}
}

/* ===================== HERO ===================== */
.hero{position:relative; padding-block:clamp(2rem,6vw,4.5rem)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 20%, black, transparent);
  mask-image:radial-gradient(ellipse 70% 60% at 70% 20%, black, transparent);
  opacity:.5;
}
.hero-grid{display:grid; gap:clamp(1.75rem,5vw,3rem); align-items:start}
.eyebrow{font-family:'IBM Plex Mono'; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:.85rem; display:flex; align-items:center; gap:.5rem}
.eyebrow::before{content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--red)}
.gf-h1--hero{font-size:clamp(2.5rem, 6.6vw + .6rem, 4.75rem)}
.gf-h1--hero em{font-style:normal; color:var(--red)}
.sub{margin-top:1.1rem; font-size:clamp(1rem,2.4vw,1.12rem); color:var(--muted); max-width:34rem}
.cta-row{display:flex; flex-direction:column; gap:.75rem; margin-top:1.6rem}

@media (min-width:480px){ .cta-row{flex-direction:row} }
@media (min-width:960px){ .hero-grid{grid-template-columns:1.1fr .9fr} }

/* ===================== HERO — MANŞET KARTI (son haberler) ===================== */
/* gufed.net'teki "büyük görsel + küçük resim şeridi" manşet widget'ının yeniden
   ele alınmış hâli: aynı etkileşim (şerit → manşet değişimi), yeni görsel dil. */
.manset{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden}

.manset-media{position:relative; aspect-ratio:16/11; background:var(--sky-soft); overflow:hidden}
.manset-media img{width:100%; height:100%; object-fit:cover; display:block}
.manset-media::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,14,20,.9) 0%, rgba(10,14,20,.55) 34%, rgba(10,14,20,0) 72%)}
.manset-media .cap{position:absolute; left:0; right:0; bottom:0; padding:clamp(1rem,3vw,1.6rem)}
.manset-media .cap time{font-family:'IBM Plex Mono'; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#fff; opacity:.85}
/* Başlık uzunluğu haberden habere değişir — kırpılmadan/görseli taşmadan
   güvenle yer kaplaması için 2 satırla sınırlanır (uzunsa "…" ile kesilir),
   overflow:hidden'ın metni sert biçimde kesmesi yerine kontrollü bir kısaltma. */
.manset-media .cap h1{font-family:'Big Shoulders Display'; font-weight:850; letter-spacing:-.01em; color:#fff; font-size:clamp(1.3rem,3vw,1.9rem); line-height:1.12; margin:.35rem 0 0; text-wrap:balance; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

.manset-body{padding:clamp(1rem,3vw,1.4rem)}
.manset-body p{margin:0; font-size:.88rem; color:var(--muted); line-height:1.6}
.manset-body .foot{margin-top:.9rem; display:flex; justify-content:flex-end}
.manset-body .foot a{font-family:'IBM Plex Sans'; font-size:.83rem; font-weight:600; color:var(--sky); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem}
.manset-body .foot a:hover{color:var(--red)}
.manset-body .foot a svg{width:.85rem; height:.85rem; transition:transform .15s ease}
.manset-body .foot a:hover svg{transform:translateX(3px)}

/* Küçük resim şeridi — dar hero sütununda sabit bir grid yerine yatay kaydırma
   kullanır, böylece kaç haber olursa olsun (3, 5, 8...) taşmadan çalışır. */
.manset-strip{display:flex; gap:1px; background:var(--line); border-top:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch}
.manset-thumb{flex:0 0 5.2rem; background:var(--surface); border:0; padding:0; cursor:pointer; text-align:left; font-family:inherit; display:flex; flex-direction:column}
.manset-thumb .thumb-img{aspect-ratio:16/10; overflow:hidden; background:var(--sky-soft); position:relative}
.manset-thumb .thumb-img img{width:100%; height:100%; object-fit:cover; filter:grayscale(35%) brightness(.94); transition:filter .18s ease}
.manset-thumb .thumb-label{padding:.4rem .5rem .55rem; font-size:.66rem; font-weight:600; line-height:1.3; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.manset-thumb{position:relative}
.manset-thumb::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent}
.manset-thumb:hover .thumb-img img{filter:grayscale(0%) brightness(1)}
.manset-thumb:hover .thumb-label{color:var(--ink)}
.manset-thumb[aria-current="true"] .thumb-img img{filter:grayscale(0%) brightness(1)}
.manset-thumb[aria-current="true"] .thumb-label{color:var(--ink)}
.manset-thumb[aria-current="true"]::after{background:var(--red)}

/* ===================== ROUTE / LIVE CARD ===================== */
.route-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.1rem,3vw,1.5rem); box-shadow:var(--shadow)}
.route-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.9rem}
.route-head b{font-family:'Big Shoulders Display'; font-weight:850; font-size:1.1rem; line-height:1.15}
.live-pill{display:inline-flex; align-items:center; gap:.4rem; font-family:'IBM Plex Mono'; font-size:.66rem; font-weight:600; letter-spacing:.05em; color:var(--muted); white-space:nowrap; padding-top:.2rem}
.live-pill::before{content:""; width:.4rem; height:.4rem; border-radius:50%; background:#2E9E5B; animation:gf-pulse 1.8s ease-in-out infinite}
@keyframes gf-pulse{0%,100%{opacity:1}50%{opacity:.3}}

.route-svg{width:100%; height:auto; margin-block:.4rem}
.route-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:.9rem 0 1.1rem; font-family:'IBM Plex Mono'}
.route-stats div{font-size:.68rem; color:var(--muted)}
.route-stats b{display:block; font-size:.95rem; color:var(--ink); font-variant-numeric:tabular-nums; margin-top:.1rem}

.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:-.2rem; padding-inline:.2rem}
table.lb{width:100%; min-width:22rem; border-collapse:collapse; font-family:'IBM Plex Mono'; font-size:.78rem}
table.lb th{text-align:left; color:var(--muted); font-weight:600; padding:.35rem .3rem; border-bottom:1px solid var(--line); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em}
table.lb td{padding:.5rem .3rem; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; white-space:nowrap}
table.lb tr:last-child td{border-bottom:0}
table.lb .rank{color:var(--red); font-weight:700}
.route-empty{font-size:.85rem; color:var(--muted); padding:.6rem 0}
.route-link{margin-top:.9rem; font-family:'IBM Plex Sans'; font-size:.83rem; font-weight:600; color:var(--sky); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem}
.route-link:hover{color:var(--red)}
.route-link svg{width:.85rem; height:.85rem; transition:transform .15s ease}
.route-link:hover svg{transform:translateX(3px)}

/* ===================== SECTIONS ===================== */
.section{padding-block:clamp(2.2rem,5vw,3.6rem)}
.section-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:.6rem; margin-bottom:1.4rem}
.section-head h2{font-family:'Big Shoulders Display'; font-weight:850; font-size:clamp(1.6rem,3.2vw,2rem)}
.section-head p{color:var(--muted); font-size:.88rem}

/* ===================== REGIONS ===================== */
.regions{display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:.9rem}
.region{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.05rem; transition:transform .15s ease, box-shadow .15s ease; text-decoration:none; color:inherit; display:block}
.region:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.region b{font-family:'Big Shoulders Display'; font-weight:600; font-size:1.02rem; display:block; margin-bottom:.5rem; color:var(--ink)}
.region .n{font-family:'IBM Plex Mono'; font-size:.75rem; color:var(--muted); line-height:1.6}
.region .n strong{color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600}
.region .go{display:inline-flex; align-items:center; gap:.25rem; margin-top:.65rem; font-size:.78rem; font-weight:700; color:var(--sky)}

/* ===================== DUYURU ===================== */
.notice-list{list-style:none; margin:0; padding:0}
.notice-list li{display:flex; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line)}
.notice-list li:first-child{padding-top:0}
.notice-list li:last-child{border-bottom:0}
.notice-list time{font-family:'IBM Plex Mono'; font-size:.7rem; color:var(--muted); white-space:nowrap; padding-top:.2rem}
.notice-list a{text-decoration:none; color:var(--ink); display:block; font-size:.92rem; line-height:1.4; font-weight:600}
.notice-list a:hover{color:var(--sky)}
.gf-empty{color:var(--muted); font-size:.88rem}

/* ===================== LOOKUP CTA ===================== */
.lookup{margin-top:.6rem; background:linear-gradient(135deg,var(--sky) 0%,var(--red-dark) 130%); border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,2.1rem); color:#fff; display:flex; flex-direction:column; gap:1.3rem}
.lookup h3{font-family:'Big Shoulders Display'; font-weight:850; font-size:clamp(1.35rem,3vw,1.6rem)}
.lookup p{opacity:.88; font-size:.88rem; margin-top:.3rem; max-width:28rem}
.lookup-form{display:flex; gap:.6rem}
.lookup-form input{font-family:'IBM Plex Mono'; padding:.85rem 1rem; border-radius:.6rem; border:0; flex:1; min-width:0; font-size:.85rem}
.lookup-form button{background:#fff; color:var(--red-dark); font-weight:800; padding:.85rem 1.3rem; border-radius:.6rem; flex:none; border:0; cursor:pointer; font-family:inherit}

@media (min-width:820px){
  .lookup{flex-direction:row; align-items:center; justify-content:space-between}
  .lookup-form{width:20rem}
}

/* ===================== FOOTER ===================== */
/* ===================== İÇ SAYFA İSKELETİ (breadcrumb + başlık + içerik/kenar çubuğu) ===================== */
.page-head{padding-block:1.6rem 0}
.breadcrumb-gf{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0 0 1rem; padding:0; font-family:'IBM Plex Mono'; font-size:.72rem; color:var(--muted)}
.breadcrumb-gf li:not(:last-child)::after{content:"/"; margin-left:.4rem; color:var(--line-strong)}
.breadcrumb-gf a{color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:.3rem}
.breadcrumb-gf a:hover{color:var(--sky)}
.breadcrumb-gf .is-current{color:var(--ink); font-weight:600}
.page-title{font-family:'Big Shoulders Display'; font-weight:850; font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:-.01em; margin-bottom:1.8rem; text-wrap:balance}

.page-layout{display:grid; gap:2rem; padding-block:0 3rem; grid-template-columns:1fr}
@media (min-width:960px){ .page-layout{grid-template-columns:2fr 1fr; align-items:start} }
.page-layout > aside{display:flex; flex-direction:column; gap:1.5rem}

/* Grid/flex ÇOCUKLARI varsayılan olarak `min-width:auto` taşır — yani içlerindeki
   en geniş öğenin (çok sütunlu tablo, uzun kırılmayan metin, slider) altına
   KÜÇÜLEMEZLER. Bu yüzden `.table-scroll`un `overflow-x:auto`su devreye giremiyor,
   geniş tablo önce kabı, sonra da tüm sayfayı yatay olarak şişiriyordu: mobilde
   (375px) `/onelofts/` 1239px, `/user/dernek/aidat/` 924px, `/user/dernek` 459px,
   anasayfa 407px genişliğe çıkıp sayfanın TAMAMI sağa sola kayıyordu. `min-width:0`
   bu kilidi açar; taşan içerik artık kendi `.table-scroll` kabında kayar, sayfa
   düzeni bozulmaz (bkz. docs/Yapi.md ilgili madde).

   `.gf-stat-grid > *` SONRADAN eklendi (2026-08-07): özet kartlarındaki tutar
   büyüyünce (ör. "12500,00 TL") kartın en-küçük-içerik genişliği 1fr sütunu
   zorluyor ve Dernek Kasası mobilde 390px yerine 411px'e çıkıyordu. Sorun
   yalnızca kasada VERİ VARKEN görünür oluyor — boş kasada tutarlar "0,00 TL"
   olduğu için sığıyor ve hata fark edilmiyordu. */
.page-layout > *, .hero-grid > *, .gf-stat-grid > *, .gf-card{min-width:0}

.gf-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:clamp(1.2rem,3vw,1.8rem)}
.gf-card-title{font-family:'Big Shoulders Display'; font-weight:600; font-size:1.1rem; margin-bottom:.3rem}

/* .gf-card içine gömülü Bootstrap/crispy formlarını tasarım sistemine uydur */
.gf-card label{font-size:.85rem; font-weight:600; color:var(--ink)}
.gf-card .form-control,.gf-card .form-select{
  font-family:'IBM Plex Sans'; border:1px solid var(--line-strong); border-radius:.5rem;
  background:var(--bg); color:var(--ink); padding:.6rem .85rem;
}
.gf-card .form-control:focus,.gf-card .form-select:focus{border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-soft)}
.gf-form-grid{display:grid; gap:0 1.2rem; grid-template-columns:1fr}
@media (min-width:620px){ .gf-form-grid{grid-template-columns:1fr 1fr} }
.gf-card .messages{list-style:none; padding:0; margin:0 0 1.2rem}
.gf-card .messages li{padding:.75rem 1rem; border-radius:.5rem; font-size:.87rem; margin-bottom:.5rem; background:var(--sky-soft); color:var(--sky)}
.gf-card .messages li.error{background:color-mix(in srgb, var(--red) 12%, transparent); color:var(--red-dark)}
.gf-card .btn-primary,.gf-card .btn-dark,.gf-card .btn-danger,.gf-card input[type="submit"]{
  background:var(--red); border-color:var(--red); border-radius:999px; font-weight:700; padding:.7rem 1.5rem;
}
.gf-card .btn-primary:hover,.gf-card .btn-dark:hover{background:var(--red-dark); border-color:var(--red-dark)}
.gf-card .alert-success{background:var(--sky-soft); border:1px solid var(--sky); color:var(--sky); border-radius:.6rem}

/* Crispy olmayan, elle {{ field }} basılan formlar için */
.gf-form-row{margin-bottom:1.1rem}
.gf-form-row label{display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:.4rem}
.gf-form-row .help.is-danger{color:var(--red); font-size:.8rem; margin-top:.3rem}
.gf-card input[type="text"],.gf-card input[type="email"],.gf-card input[type="password"],
.gf-card input[type="tel"],.gf-card input[type="number"],.gf-card input[type="date"],
.gf-card select,.gf-card textarea{
  width:100%; font-family:'IBM Plex Sans'; border:1px solid var(--line-strong); border-radius:.5rem;
  background:var(--bg); color:var(--ink); padding:.65rem .85rem; font-size:.9rem;
}
.gf-card input[type="text"]:focus,.gf-card input[type="email"]:focus,.gf-card input[type="password"]:focus,
.gf-card select:focus,.gf-card textarea:focus{border-color:var(--sky); outline:none; box-shadow:0 0 0 3px var(--sky-soft)}
.gf-card input[type="submit"]{background:var(--red); color:#fff; border:0; border-radius:999px; font-weight:700; padding:.75rem 1.6rem; cursor:pointer; font-family:inherit}
.gf-card input[type="submit"]:hover{background:var(--red-dark)}

/* Liste (duyuru/haber index) */
.article-list{display:flex; flex-direction:column}
.article-item{display:grid; grid-template-columns:1fr; gap:.9rem; padding:1.3rem 0; border-bottom:1px solid var(--line)}
.article-item:first-child{padding-top:0}
.article-item:last-child{border-bottom:0; padding-bottom:0}
.article-item img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-md); background:var(--sky-soft)}
.article-item h2{font-family:'Big Shoulders Display'; font-weight:650; font-size:1.25rem; margin-bottom:.4rem}
.article-item h2 a{color:var(--ink); text-decoration:none}
.article-item h2 a:hover{color:var(--sky)}
.article-item p{color:var(--muted); font-size:.9rem; line-height:1.6; margin-bottom:.5rem}
.article-item time{font-family:'IBM Plex Mono'; font-size:.7rem; color:var(--muted); display:inline-flex; align-items:center; gap:.35rem}
@media (min-width:620px){
  .article-item{grid-template-columns:9rem 1fr}
  .article-item img{aspect-ratio:1/1; height:100%}
}

/* Tekil içerik okuma (duyuru/haber detay) */
.prose{font-size:1rem; line-height:1.75; color:var(--ink)}
.prose > *{margin-bottom:1.1em}
.prose > *:last-child{margin-bottom:0}
.prose h1,.prose h2,.prose h3,.prose h4{font-family:'Big Shoulders Display'; font-weight:700; line-height:1.2; margin-top:1.4em}
.prose h1{font-size:1.7rem} .prose h2{font-size:1.4rem} .prose h3{font-size:1.2rem}
.prose img{max-width:100%; height:auto; border-radius:var(--radius-md)}
.prose a{color:var(--sky); text-decoration:underline}
.prose ul{list-style:disc; padding-left:1.4em}
.prose ol{list-style:decimal; padding-left:1.4em}
.prose blockquote{border-left:3px solid var(--red); padding-left:1em; color:var(--muted); font-style:italic}

/* ===================== ORG ŞEMASI (yönetim kurulu) ===================== */
.org-row{display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem; padding-block:1.6rem}
.org-divider{height:1px; background:var(--line); margin-block:.5rem}
.person-card{display:flex; flex-direction:column; align-items:center; text-align:center; width:9rem}
.person-card .avatar{width:5rem; height:5rem; border-radius:50%; overflow:hidden; border:2px solid var(--line); margin-bottom:.7rem}
.person-card .avatar img{width:100%; height:100%; object-fit:cover}
.person-card .role{font-family:'IBM Plex Mono'; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--red); margin-bottom:.25rem}
.person-card .name{font-weight:600; font-size:.9rem}

/* ===================== KART IZGARASI (kümesler, dernekler vb.) ===================== */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.1rem}
.item-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; transition:transform .15s ease, box-shadow .15s ease}
.item-card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.item-card .logo{width:100%; aspect-ratio:16/9; border-radius:.5rem; overflow:hidden; background:var(--sky-soft); margin-bottom:.3rem}
.item-card .logo img{width:100%; height:100%; object-fit:cover}
.item-card .title{font-family:'Big Shoulders Display'; font-weight:650; font-size:1.05rem}
.item-card .meta{font-size:.83rem; color:var(--muted); line-height:1.6}
.item-card .meta b{color:var(--ink); font-weight:600}

/* ===================== GENİŞ VERİ TABLOSU ===================== */
.data-table{width:100%; border-collapse:collapse; font-size:.82rem; min-width:56rem}
.data-table thead th{text-align:left; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:.7rem .6rem; border-bottom:2px solid var(--line); white-space:nowrap}
.data-table td{padding:.6rem; border-bottom:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums}
.data-table tr:hover td{background:var(--bg)}
.data-table .group-row td{background:var(--sky-soft); font-family:'Big Shoulders Display'; font-weight:650; color:var(--sky); font-size:.9rem}

/* Sunucu tarafında (API üzerinden) sıralanabilir tablo başlıkları — bkz.
   yaris/detay.html Sonuçlar tablosu, races/api/views.py */
.data-table th.sortable{cursor:pointer; user-select:none}
.data-table th.sortable:hover{color:var(--ink)}
.data-table th.sortable .sort-arrow{display:inline-block; width:.7rem; opacity:.35; margin-left:.2rem}
.data-table th.sortable.is-active .sort-arrow{opacity:1; color:var(--sky)}

/* ===================== KV LİSTE (puanlama vb. anahtar-değer bloklar) ===================== */
.kv-block{padding-block:1.2rem; border-bottom:1px solid var(--line)}
.kv-block:last-child{border-bottom:0; padding-bottom:0}
.kv-block:first-child{padding-top:0}
.kv-block h3{font-family:'Big Shoulders Display'; font-weight:650; font-size:1.05rem; margin-bottom:.7rem}
.kv-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.5rem 1.2rem; font-size:.85rem}
.kv-list div{display:flex; justify-content:space-between; gap:.5rem; padding:.35rem 0; border-bottom:1px dotted var(--line)}
.kv-list b{font-variant-numeric:tabular-nums}

/* ===================== DERNEK KARTI ===================== */
.dernek-card{background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); display:flex; flex-direction:column; height:100%; position:relative; transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease}
.dernek-card:hover{transform:translateY(-6px); box-shadow:0 20px 30px -10px rgba(28,37,48,.18)}
.dernek-card .img-wrap{position:relative; height:10.5rem; background:var(--sky-soft); overflow:hidden; display:flex; align-items:center; justify-content:center}
.dernek-card .img-wrap img{width:100%; height:100%; object-fit:contain; padding:1.4rem; transition:transform .5s cubic-bezier(.16,1,.3,1)}
.dernek-card:hover .img-wrap img{transform:scale(1.08)}
.dernek-card .no-logo{font-size:3rem; color:var(--line-strong)}
.dernek-card .overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(15,23,42,.55) 0%, transparent 55%)}
.dernek-card .il-badge{position:absolute; bottom:.7rem; left:.7rem; background:rgba(255,255,255,.95); color:var(--ink); padding:.35rem .8rem; border-radius:999px; font-size:.72rem; font-weight:700; display:flex; align-items:center; gap:.4rem}
.dernek-card .il-badge i{color:var(--red)}
.dernek-card .body{padding:1.4rem; display:flex; flex-direction:column; flex:1}
.dernek-card .name{font-family:'Big Shoulders Display'; font-weight:650; font-size:1.1rem; margin-bottom:1.2rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.dernek-card .stats{display:flex; flex-wrap:wrap; gap:.9rem 0; margin-bottom:auto}
.dernek-card .stat{display:flex; align-items:center; gap:.65rem; width:50%}
.dernek-card .stat.full{width:100%; margin-top:.4rem; padding-top:.9rem; border-top:1px dashed var(--line)}
.dernek-card .stat-icon{width:2.2rem; height:2.2rem; border-radius:.6rem; background:var(--bg); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:.85rem; border:1px solid var(--line); flex:none}
.dernek-card .stat.full .stat-icon{background:color-mix(in srgb, var(--red) 10%, transparent); color:var(--red)}
.dernek-card .stat-label{font-family:'IBM Plex Mono'; font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; display:block}
.dernek-card .stat-value{font-size:.83rem; color:var(--ink); font-weight:600; display:block}
.dernek-card .cta{background:var(--bg); color:var(--ink); padding:.8rem 1rem; border-radius:.6rem; font-weight:700; font-size:.87rem; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1.2rem; text-decoration:none; transition:all .2s ease}
.dernek-card:hover .cta{background:var(--red); color:#fff; border-color:var(--red)}

/* ===================== BÖLGE BLOKLARI (dernekler listesi) ===================== */
.region-block{margin-bottom:3rem; scroll-margin-top:5.5rem}
.region-block:last-child{margin-bottom:0}
.region-block__head{display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; padding-bottom:.9rem; border-bottom:1px solid var(--line)}
.region-block__head::before{content:""; width:.35rem; height:1.8rem; border-radius:999px; background:linear-gradient(to bottom, var(--red), var(--red-dark)); flex:none}
.region-block__head h2{font-family:'Big Shoulders Display'; font-weight:750; font-size:1.4rem; letter-spacing:-.01em}
.region-block__head .count{margin-left:auto; font-family:'IBM Plex Mono'; font-size:.72rem; color:var(--muted); background:var(--bg); border:1px solid var(--line); padding:.3rem .7rem; border-radius:999px}
.gf-empty-block{text-align:center; padding:3rem 1rem; color:var(--muted)}
.gf-empty-block i{font-size:2.6rem; color:var(--line-strong); margin-bottom:1rem; display:block}
.gf-empty-block h3{font-family:'Big Shoulders Display'; font-weight:650; color:var(--ink); font-size:1.2rem; margin-bottom:.4rem}

/* ===================== BOOTSTRAP SEKME/LİSTE (.gf-card içinde) ===================== */
.gf-card .nav-tabs{border-bottom:1px solid var(--line); gap:.4rem}
.gf-card .nav-tabs .nav-link{color:var(--muted); font-weight:600; font-size:.87rem; border:0; border-bottom:2px solid transparent; border-radius:0; padding:.7rem .3rem; margin-right:1rem; background:none}
.gf-card .nav-tabs .nav-link.active{color:var(--red); border-bottom-color:var(--red); background:none}
.gf-card .list-group-item{border-color:var(--line); padding:.9rem 0; background:none; font-size:.9rem}
.gf-card .badge.bg-light{background:var(--bg) !important; color:var(--muted) !important; border:1px solid var(--line) !important; font-weight:600; font-family:'IBM Plex Mono'; font-size:.7rem}
.gf-card .badge.bg-danger{background:color-mix(in srgb, var(--red) 10%, transparent) !important; color:var(--red-dark) !important; border-color:color-mix(in srgb, var(--red) 30%, transparent) !important; font-weight:600; font-size:.7rem}

.dernek-header{display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:2rem}
.dernek-header .logo{width:6rem; height:6rem; border-radius:var(--radius-md); overflow:hidden; background:var(--sky-soft); display:flex; align-items:center; justify-content:center; flex:none; border:1px solid var(--line)}
.dernek-header .logo img{width:100%; height:100%; object-fit:cover}
.dernek-header .logo i{font-size:2rem; color:var(--line-strong)}
.dernek-header .loc{font-size:.9rem; color:var(--muted); margin-top:.4rem}
.dernek-header .loc i{color:var(--red)}

/* Django'nun çıplak {{ form.as_table }} çıktısı için asgari düzen */
.gf-card .plain-form-table{width:100%; border-collapse:collapse}
.gf-card .plain-form-table th{text-align:left; font-size:.85rem; font-weight:600; color:var(--ink); padding:.6rem .8rem .6rem 0; vertical-align:top; white-space:nowrap}
.gf-card .plain-form-table td{padding:.5rem 0; width:100%}
.gf-card .plain-form-table tr{display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--line); padding-block:.3rem}
.gf-card .plain-form-table tr:last-child{border-bottom:0}

footer.site{border-top:1px solid var(--line); padding-block:2.2rem; margin-top:1rem; background:var(--bg)}
.foot-grid{display:grid; gap:2rem; grid-template-columns:1.4fr repeat(3,1fr)}
.foot-col h4{font-family:'Big Shoulders Display'; font-weight:600; font-size:.95rem; margin-bottom:.8rem; color:var(--ink)}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.foot-col a{font-size:.85rem; color:var(--muted); text-decoration:none}
.foot-col a:hover{color:var(--ink)}
.foot-col--brand .brand{margin-bottom:.9rem}
.foot-col--brand .brand svg{width:1.6rem; height:1.6rem}
.foot-col--brand .brand b{font-size:1.1rem}
.foot-tagline{font-size:.82rem; color:var(--muted); line-height:1.5; margin-bottom:.9rem; max-width:22rem}
.foot-address{font-size:.82rem; color:var(--muted); line-height:1.5; display:flex; gap:.4rem; align-items:flex-start; max-width:20rem}
.foot-address i{margin-top:.2rem; color:var(--red); flex:none}
.foot-bottom-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line)}
.foot-sponsors{display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; font-size:.8rem; color:var(--muted)}
.foot-sponsors span{font-weight:600; color:var(--ink)}
.foot-sponsors a{color:var(--muted); text-decoration:none}
.foot-sponsors a:hover{color:var(--ink)}
.foot-social{display:flex; gap:.6rem}
.foot-social a{width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none}
.foot-social a:hover{border-color:var(--red); color:var(--red)}
.foot-bottom{margin-top:1.4rem; padding-top:1.2rem; text-align:center; font-size:.78rem; color:var(--muted)}
@media (max-width:56rem){
  .foot-grid{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
  .foot-col--brand{grid-column:1 / -1}
}

/* ===================== İLETİŞİM ===================== */
.contact-lead{
  margin:0 0 1.2rem; font-family:'IBM Plex Sans',sans-serif;
  font-size:.88rem; line-height:1.55; color:var(--muted);
}
.gf-card .alert-success{margin-bottom:1.2rem; font-family:'IBM Plex Sans',sans-serif; font-size:.87rem}

.contact-info{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.15rem}
.contact-info li{display:flex; gap:.85rem; align-items:flex-start}
.contact-info__icon{
  flex:none; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--sky-soft); color:var(--sky);
  display:inline-flex; align-items:center; justify-content:center; font-size:.95rem;
}
.contact-info strong{
  display:block; margin-bottom:.25rem;
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
.contact-info p{
  margin:0; font-family:'IBM Plex Sans',sans-serif;
  font-size:.88rem; line-height:1.5; color:var(--ink);
}
.contact-info a{color:var(--sky); text-decoration:none; font-weight:600}
.contact-info a:hover{color:var(--red)}

.contact-social{display:flex; gap:.65rem}
.contact-social a{
  width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted); text-decoration:none; font-size:1.05rem;
  transition:border-color .15s ease, color .15s ease;
}
.contact-social a:hover{border-color:var(--red); color:var(--red)}

.contact-links{list-style:none; margin:.85rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.contact-links a{
  font-family:'IBM Plex Sans',sans-serif; font-size:.85rem; font-weight:500;
  color:var(--muted); text-decoration:none;
}
.contact-links a:hover{color:var(--ink)}

.contact-map{margin-top:1.5rem; padding:0; overflow:hidden; min-height:16rem}
.contact-map iframe{display:block; width:100%; height:16rem; border:0}
@media (min-width:960px){ .contact-map iframe{height:18rem} }

/* Crispy/Bootstrap formunun site fontlarını ezmesini engelle */
.gf-card .crispy,.gf-card form{
  font-family:'IBM Plex Sans',sans-serif; color:var(--ink);
}
.gf-card .crispy label,.gf-card form label{
  font-family:'IBM Plex Sans',sans-serif; font-size:.85rem; font-weight:600; color:var(--ink);
}
.gf-card .crispy .form-control,.gf-card form .form-control,
.gf-card .crispy textarea,.gf-card form textarea{
  font-family:'IBM Plex Sans',sans-serif; font-size:.9rem; color:var(--ink);
}
.gf-card .crispy .btn,.gf-card form .btn{
  font-family:'IBM Plex Sans',sans-serif; font-weight:700;
}

/* ===================== PANEL (DASHBOARD) İSKELETİ =====================
   Public "Uçuş Rotası" ile aynı token'lar (renk/tipografi/radius/shadow).
   Panel ve public tek design-system.css kullanır (2026-07-26 kararı;
   2026-08-07 CSS birleştirme görevi ile Bootstrap/Tailwind kaldırıldı). */
.gf-dash-sidebar{position:fixed; top:0; left:0; z-index:50; height:100%; width:280px; background:var(--surface); border-right:4px solid var(--red); box-shadow:var(--shadow); display:flex; flex-direction:column; transform:translateX(0); transition:transform .3s ease}
.gf-dash-overlay{position:fixed; inset:0; z-index:40; background:rgba(15,21,30,.4); display:none}
.gf-dash-overlay.is-visible{display:block}

.gf-dash-main{display:flex; flex-direction:column; min-height:100vh; margin-left:280px; transition:margin-left .3s ease}

.gf-dash-topbar{position:sticky; top:0; z-index:30; height:3.5rem; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; padding-inline:1.25rem; flex:none}
.gf-dash-topbar-actions{display:flex; align-items:center; gap:.4rem}
.gf-dash-iconbtn{width:2.4rem; height:2.4rem; display:inline-flex; align-items:center; justify-content:center; border-radius:.6rem; color:var(--muted); background:none; border:0; cursor:pointer; font-size:1rem}
.gf-dash-iconbtn:hover{color:var(--red); background:color-mix(in srgb, var(--red) 8%, transparent)}

.gf-dash-content{flex:1; padding:1.5rem}

@media (max-width:1023px){
  .gf-dash-sidebar{transform:translateX(-280px)}
  .gf-dash-sidebar.is-open{transform:translateX(0)}
  .gf-dash-main{margin-left:0 !important}
}

@media (min-width:1024px){
  .gf-dash-sidebar:not(.is-open){transform:translateX(-280px)}
  .gf-dash-main.is-expanded{margin-left:0 !important}
}

/* Sidebar marka başlığı + navigasyon */
.gf-dash-brand{display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line); flex:none; text-decoration:none}
.gf-dash-brand img{width:2.5rem; height:2.5rem; border-radius:50%; object-fit:cover; border:2px solid var(--sky-soft); flex:none}
.gf-dash-brand strong{display:block; font-size:.85rem; font-weight:700; line-height:1.25; color:var(--ink)}
.gf-dash-brand span{font-size:.72rem; color:var(--muted)}

.gf-dash-nav{flex:1; overflow-y:auto; padding:1rem .75rem}
.gf-dash-nav-title{padding-inline:.75rem; margin-bottom:.4rem; font-family:'IBM Plex Mono'; font-size:.62rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.gf-dash-nav-list{list-style:none; margin:0 0 1.25rem; padding:0; display:flex; flex-direction:column; gap:.1rem}
.gf-dash-nav-link{display:flex; align-items:center; gap:.75rem; min-height:44px; padding:.55rem .75rem; border-radius:.6rem; font-size:.87rem; font-weight:600; color:var(--muted); text-decoration:none; transition:background .15s ease, color .15s ease}
.gf-dash-nav-link i{width:1rem; text-align:center; flex:none}
.gf-dash-nav-link:hover{color:var(--red); background:color-mix(in srgb, var(--red) 8%, transparent)}
.gf-dash-nav-link.is-active{color:var(--red); background:color-mix(in srgb, var(--red) 10%, transparent)}
.gf-dash-close{position:absolute; top:.75rem; right:.75rem; width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center; border-radius:.5rem; color:var(--muted); background:none; border:0; cursor:pointer}
.gf-dash-close:hover{color:var(--ink); background:var(--bg)}
@media (min-width:1024px){ .gf-dash-close{display:none} }

/* Uyarı/mesaj bloğu (dernek/federasyon panel ekranlarında sayfa üstü mesajlar) */
.gf-alert{display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:.9rem 1rem; margin-bottom:1rem; border-radius:.6rem; font-size:.87rem}
.gf-alert i{margin-top:.15rem}
.gf-alert--success{background:color-mix(in srgb, #2E9E5B 14%, transparent); color:#1f7a45; border:1px solid color-mix(in srgb, #2E9E5B 30%, transparent)}
.gf-alert--error{background:color-mix(in srgb, var(--red) 10%, transparent); color:var(--red-dark); border:1px solid color-mix(in srgb, var(--red) 30%, transparent)}
.gf-alert--amber{background:#FDF3DA; color:#8A5A00; border:1px solid #F0D48A}
.gf-alert--info{background:var(--sky-soft); color:var(--sky); border:1px solid color-mix(in srgb, var(--sky) 35%, transparent)}
.gf-alert-close{background:none; border:0; cursor:pointer; font-size:1.1rem; line-height:1; color:inherit; opacity:.6; flex:none}
.gf-alert-close:hover{opacity:1}

/* Panel özet istatistik kartı grid'i — mobilde 2, masaüstünde 4 sütun */
.gf-stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
@media (min-width:960px){ .gf-stat-grid{grid-template-columns:repeat(4,1fr)} }

/* Panel özet istatistik kartı (ikon + sayı + etiket) */
.gf-stat-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:1.1rem; display:flex; align-items:center; gap:1rem}
.gf-stat-card .icon{width:3rem; height:3rem; border-radius:.75rem; display:flex; align-items:center; justify-content:center; flex:none; font-size:1.1rem}
.gf-stat-card .icon--red{background:color-mix(in srgb, var(--red) 10%, transparent); color:var(--red)}
.gf-stat-card .icon--gray{background:var(--bg); color:var(--muted)}
.gf-stat-card .icon--amber{background:#FDF3DA; color:#B7791F}
.gf-stat-card .icon--green{background:#E3F6EA; color:#1F7A45}
.gf-stat-card .value{font-family:'Big Shoulders Display'; font-weight:800; font-size:1.6rem; line-height:1; color:var(--ink)}
.gf-stat-card .label{font-size:.72rem; color:var(--muted); font-weight:600; margin-top:.35rem}
/* Değer bir SAYI değil bir DURUM olduğunda (ör. "Ayarlı"/"Belirlenmemiş").
   Rakamlar için ayarlanmış 1.6rem'lik display puntosu kelimede fazla iri kaçıyor. */
.gf-stat-card .value--metin{font-size:1.15rem}
/* Kartın kendi eylemi olduğunda: ikon yukarı hizalanır, bağlantı etiketin altına iner */
.gf-stat-card--eylem{align-items:flex-start}
.gf-stat-link{display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem;
              font-size:.75rem; font-weight:700; color:var(--red); text-decoration:none}
.gf-stat-link:hover{text-decoration:underline}

/* Kimlik/kart numarası bloğu — sayfa başlığının yanında duran küçük "kart".
   Numara tek aralıklı yazıyla veriliyor: rakamlar hizalı okunsun ve elle
   kopyalanırken karakterler karışmasın (0/O, 1/l). */
.gf-idcard{padding:.9rem 1.2rem; min-width:14rem}
.gf-idcard-label{font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
                 color:var(--muted); font-weight:700; margin-bottom:.25rem}
.gf-idcard-no{font-family:'IBM Plex Mono', monospace; font-size:1.15rem; font-weight:700; letter-spacing:.04em}
.gf-idcard-meta{font-size:.72rem; color:var(--muted); margin-top:.3rem}

/* Durum rozeti (pil) — aktif/pasif, ödeme durumu vb. */
.gf-pill{display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .7rem; border-radius:999px; font-size:.72rem; font-weight:700; white-space:nowrap}
.gf-pill--green{background:#E3F6EA; color:#1F7A45}
.gf-pill--amber{background:#FDF3DA; color:#B7791F}
.gf-pill--red{background:color-mix(in srgb, var(--red) 12%, transparent); color:var(--red-dark)}
.gf-pill--gray{background:var(--bg); color:var(--muted); border:1px solid var(--line)}
.gf-pill--brand{background:color-mix(in srgb, var(--red) 10%, transparent); color:var(--red)}
.gf-pill--sky{background:var(--sky-soft); color:var(--sky)}
/* Cinsiyet rozetlerinde erkek (sky) ile eşleşen dişi karşılığı */
.gf-pill--pembe{background:#FCE4EC; color:#AD1457}

/* Bildirim zili — sayaç rozeti düğmenin sağ üstüne oturur */
.gf-bell-wrap{position:relative}
.gf-bell-badge{position:absolute; top:-.15rem; right:-.15rem; min-width:1.05rem; height:1.05rem;
               padding:0 .25rem; border-radius:999px; background:var(--red); color:#fff;
               font-size:.62rem; font-weight:700; line-height:1.05rem; text-align:center}
.gf-bell-item-icon{width:1rem; text-align:center; margin-right:.5rem; color:var(--muted)}
.gf-bell-empty{padding:.7rem 1rem; font-size:.82rem; color:var(--muted)}
/* Zil, üst çubuğun sol tarafında duruyor; panel düğmenin sağ kenarına yaslanınca
   (`--right`) SOLA doğru açılıyor ve dar ekranda ekran dışına taşıyordu (390px'te
   13px kayıp ölçüldü). Mobilde panel üst çubuğun altına, iki kenara yaslanmış
   biçimde sabitleniyor — genişlikten bağımsız, hep ekranın içinde. */
@media (max-width:640px){
  .gf-bell-wrap .dropdown-panel{position:fixed; top:3.9rem; left:.75rem; right:.75rem; min-width:0}
}

/* Numaralı yönerge listesi (harita nasıl kullanılır gibi adım adım anlatımlar) */
.gf-steps{font-size:.87rem; color:var(--muted); padding-left:1.2rem; margin:0 0 1.5rem}
/* Form altındaki küçük açıklama satırı */
.gf-hint{margin-bottom:1.2rem; max-width:none; font-size:.78rem}
/* Kartın tam genişliğini kaplayan düğme (yan panel formlarının gönder düğmesi) */
.gf-btn--block{width:100%; padding:.7rem 1rem; font-size:.87rem; justify-content:center}
/* Salt okunur değer bloğu — düzenlenemeyen ama gösterilmesi gereken veriler.
   Soldaki renk şeridi bunun bir form DEĞİL bir kayıt olduğunu belli ediyor. */
.gf-readout{background:var(--bg); border:1px solid var(--line); border-left:4px solid var(--red);
            border-radius:.6rem; padding:1rem}
.gf-readout-row{font-size:.87rem; margin:0 0 .2rem}

/* Başlık çubuğuna sığan küçük metin girdisi (kart içi arama) */
.gf-input-sm{padding:.5rem .8rem; border:1px solid var(--line); border-radius:6px;
             font-size:.85rem; min-width:14rem; font-family:inherit;
             background:var(--surface); color:var(--ink)}
.gf-input-sm:focus{outline:none; border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-soft)}

/* Arama kutusu (ikon + opsiyonel autocomplete dropdown) */
.gf-search{position:relative}
.gf-search input{width:100%; padding:.65rem 2.4rem; border:1px solid var(--line-strong); border-radius:.6rem; font-size:.85rem; font-family:inherit; background:var(--surface); color:var(--ink)}
.gf-search input:focus{outline:none; border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-soft)}
.gf-search .icon-left{position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.gf-search .icon-right{position:absolute; right:.85rem; top:50%; transform:translateY(-50%); color:var(--muted); text-decoration:none}
.gf-search .icon-right:hover{color:var(--red)}
.gf-search-dropdown{position:absolute; z-index:50; width:100%; margin-top:.3rem; background:var(--surface); border:1px solid var(--line); border-radius:.6rem; box-shadow:var(--shadow); max-height:15rem; overflow-y:auto; display:none}
.gf-search-dropdown.is-open{display:block}
.gf-search-dropdown li{padding:.6rem 1rem; font-size:.85rem; color:var(--ink); cursor:pointer}
.gf-search-dropdown li:hover{background:var(--sky-soft); color:var(--sky)}

/* Açma/kapama anahtarı (boolean form alanları için) */
.gf-toggle{position:relative; display:inline-block; width:2.5rem; height:1.5rem; flex:none}
.gf-toggle input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1}
.gf-toggle .track{position:absolute; inset:0; background:var(--line-strong); border-radius:999px; transition:background .15s ease}
.gf-toggle .thumb{position:absolute; top:2px; left:2px; width:1.25rem; height:1.25rem; background:#fff; border-radius:50%; box-shadow:var(--shadow); transition:transform .15s ease}
.gf-toggle input:checked ~ .track{background:var(--red)}
.gf-toggle input:checked ~ .thumb{transform:translateX(1rem)}

/* Dosya yükleme alanı (dashed dropzone) */
.gf-file-input{position:relative; display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem; border:1.5px dashed var(--line-strong); border-radius:.6rem; cursor:pointer; color:var(--muted); font-size:.85rem; transition:border-color .15s ease, background .15s ease}
.gf-file-input:hover{border-color:var(--red); background:color-mix(in srgb, var(--red) 4%, transparent)}
.gf-file-input input[type="file"]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Profil sekme navigasyonu (yetiştirici/profil ekranlarında tekrar eden blok) */
.gf-tabnav{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem}
.gf-tabnav a{padding:.55rem 1.1rem; border-radius:999px; font-size:.85rem; font-weight:600; text-decoration:none; background:var(--bg); color:var(--muted); transition:background .15s ease, color .15s ease}
.gf-tabnav a:hover{background:var(--line); color:var(--ink)}
.gf-tabnav a.is-active{background:var(--red); color:#fff}
.gf-tabnav a.is-active:hover{background:var(--red-dark)}

/* Panel bölüm etiketi (küçük uppercase başlık — kart gruplarını ayırmak için) */
.gf-section-label{font-family:'IBM Plex Mono'; font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.75rem; display:block}

/* Sıralama rozetleri (klasman/liderlik tabloları — 1./2./3.) */
.gf-badge{display:inline-flex; align-items:center; justify-content:center; min-width:1.7rem; height:1.7rem; padding:0 .4rem; border-radius:999px; font-size:.78rem; font-weight:700}
.gf-badge--gold{background:#FBE2A6; color:#8A5A00}
.gf-badge--silver{background:var(--line); color:var(--muted)}
.gf-badge--bronze{background:color-mix(in srgb, var(--red) 16%, transparent); color:var(--red-dark)}

/* ---------------------------------------------------------------------------
   MOBİL KART LİSTESİ — geniş tabloların dar ekran karşılığı
   ---------------------------------------------------------------------------
   `min-width:0` düzeltmesi (bkz. yukarısı) sayfaların KIRILMASINI durdurdu ama
   tablolar hâlâ ekrandan 1.4–2.7 kat geniş kalıyor ve yatay kaydırma
   gerektiriyordu. Çözüm, dar ekranda tabloyu gizleyip her satırı bir karta
   dönüştürmek.

   Bu blok BİLEREK paylaşılan bileşen olarak burada duruyor: desen ilk üç
   ekranda (`member_list`, `bolge_members`, `bolge_denetim`) şablon içi <style>
   olarak ve üstelik farklı sınıf önekleriyle (`mc-`, `buk-`) kopyalanmıştı.
   Yeni ekranlar bu tek tanımı kullanır.

   Kullanımı: tabloyu saran öğeye `.gf-onlywide`, kart listesine `.gf-mcards`.
   Eşik 640px — mevcut üç ekranın kullandığı değerle aynı tutuldu ki iki desen
   aynı cihazda farklı davranmasın.

   Kart anatomisi: başlıkta kaydı TANIYAN alan (ad/etap/konu) + durum rozeti,
   gövdede ikincil alanlar iki sütun, altta eylemler.
--------------------------------------------------------------------------- */
/* Kart ANATOMİSİ media query'nin DIŞINDA tanımlı, yalnızca GÖRÜNÜRLÜK anahtarı
   içeride. Sebebi: iki farklı eşik var (aşağıya bakınız) ve anatomi içeride
   kalsaydı her eşik için baştan yazılması gerekirdi — kopyayı bir yerden
   kaldırıp başka yere koymuş olurduk. Masaüstünde `.gf-mcards` zaten
   `display:none` olduğundan bu tanımların görsel etkisi yok. */
.gf-mcards{display:none; flex-direction:column; gap:.75rem; padding:.75rem}

.gf-mcard{background:var(--surface); border:1px solid var(--line); border-radius:.6rem; padding:.85rem 1rem; display:flex; flex-direction:column; gap:.55rem}
.gf-mcard:active{box-shadow:0 0 0 2px var(--red)}

.gf-mcard-head{display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem}
.gf-mcard-title{font-weight:700; font-size:.97rem; line-height:1.25; min-width:0; flex:1}
.gf-mcard-sub{display:block; font-weight:400; font-size:.74rem; color:var(--muted); margin-top:.1rem}
/* Alt başlık vurgulu hâli: taşıdığı bilgi ikincil değil AYIRT EDİCİ olduğunda
   (bölge geneli listede üyenin derneği gibi) soluk gri yerine kurum rengi. */
.gf-mcard-sub--vurgu{color:var(--red); font-weight:600}
/* Başlığın sağındaki rozet yığını — birden fazla durum rozeti alt alta dizilir */
.gf-mcard-badges{display:flex; flex-direction:column; gap:.2rem; align-items:flex-end; flex-shrink:0}

/* Kişi kartlarında baş harf madalyonu (üye listeleri). Kayıtları taramayı
   kolaylaştırıyor; yarış/kasa gibi kişi olmayan kartlarda kullanılmaz. */
.gf-mcard-avatar{width:2.4rem; height:2.4rem; border-radius:50%; background:var(--red); color:#fff;
                 font-size:.85rem; font-weight:700; display:flex; align-items:center; justify-content:center;
                 flex-shrink:0; font-family:'Big Shoulders Display', sans-serif}
/* Avatarlı başlıkta ad ve avatar dikey ortalanır (varsayılan hizalama üstten) */
.gf-mcard-head--avatar{align-items:center}

.gf-mcard-body{display:grid; grid-template-columns:1fr 1fr; gap:.35rem .75rem; font-size:.78rem}
.gf-mcard-field{display:flex; flex-direction:column; gap:.1rem; min-width:0}
.gf-mcard-label{color:var(--muted); font-size:.67rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.gf-mcard-value{color:var(--ink); overflow-wrap:anywhere}
.gf-mcard-full{grid-column:1 / -1}

/* Etiket ↔ değer satırları. İki sütunlu ızgaraya alternatif: ölçüm listesi
   taşıyan kartlarda (uyum panosu) değerin sağda hizalı olması karşılaştırmayı
   kolaylaştırıyor, ızgara ise sayıları alt alta dağıtıp okunmaz hâle getiriyor. */
.gf-mcard-rows{display:flex; flex-direction:column; gap:.45rem}
.gf-mcard-row{display:flex; align-items:center; justify-content:space-between; gap:.75rem; font-size:.82rem}
.gf-mcard-row-label{color:var(--muted); display:flex; align-items:center; gap:.35rem}

.gf-mcard-foot{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.4rem; border-top:1px solid var(--line)}
/* Alt satırdaki düğmeler yan yana dursun (varsayılan iki uca yaslar). Tek grup
   düğme taşıyan kartlarda iki uca yaslamak aralarını gereksiz açıyor. */
.gf-mcard-foot--start{justify-content:flex-start}
.gf-mcard-actions{display:flex; gap:.3rem; flex-wrap:wrap}
.gf-mcard-actions .gf-dash-iconbtn{width:2rem; height:2rem; font-size:.85rem; border-radius:.35rem; display:flex; align-items:center; justify-content:center}

/* Sayısal üçlü (gönderilen/dönen/kayıp gibi) — kartta tek satırda okunur */
.gf-mcard-stats{display:flex; gap:.5rem; text-align:center}
.gf-mcard-stats > div{flex:1; background:var(--bg); border-radius:.4rem; padding:.35rem .2rem}
.gf-mcard-stats .n{display:block; font-weight:700; font-size:.95rem; line-height:1.1}
.gf-mcard-stats .t{display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-top:.1rem}

.gf-mcard-empty{padding:2rem 1rem; text-align:center; color:var(--muted); font-size:.85rem}

/* --- GÖRÜNÜRLÜK ANAHTARI — iki eşik ---
   Varsayılan 640px. Bazı tablolar ise ekrandan 4 kat geniş (bölge üyeleri 4.2x,
   uyum panosu 8 sütun); onlarda 641–820px arası tablo hâlâ okunmuyordu, bu yüzden
   o ekranlar 820px eşiğini kullanıyor. Eşiği tek değere indirmek iki yönde de
   kayıp olurdu: 640'a çekmek geniş tabloları tablette geri bozar, 820'ye çekmek
   ise hâlihazırda düzgün çalışan beş ekranın davranışını değiştirirdi. */
@media (max-width:640px){
  .gf-onlywide{display:none !important}
  .gf-mcards{display:flex}
}
@media (max-width:820px){
  .gf-onlywide--genis{display:none !important}
  .gf-mcards--genis{display:flex}
}

/* Uyum/durum göstergesi — hem tabloda hem kartta aynı renk dili */
.gf-durum-ok{color:#1E9E5A; font-weight:700}
.gf-durum-eksik{color:var(--red); font-weight:700}

/* Orta ekranda (641–900px) tablonun ikincil sütunlarını gizle. Kart eşiğinin
   ÜSTÜNDE kalan aralıkta tabloyu dar tutmanın tek yolu bu. */
@media (max-width:900px) and (min-width:641px){
  .gf-col-md-gizle{display:none}
}

/* ===================== FAZ 1 — tekrarlayan inline kalıplar =====================
   Görsel çıktıyı değiştirmez; şablonlardaki style="..." isimlendirmesidir.
   Kaynak: docs/css_birlestirme_gorev.md
--------------------------------------------------------------------------- */
.gf-h1--panel{font-size:1.7rem}
.gf-flex-gap{display:flex; gap:.5rem}
.gf-text-red{color:var(--red)}
.gf-btn--lg{padding:.7rem 1.3rem; font-size:.87rem}
.gf-btn--sm{padding:.6rem 1.2rem; font-size:.85rem}
.gf-btn--xs{padding:.4rem 1rem; font-size:.78rem}
.gf-page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem;
}
.gf-card--flush{padding:0}
.gf-card-head{
  font-family:'Big Shoulders Display'; font-weight:650; font-size:1rem;
  margin:0; display:flex; align-items:center; gap:.5rem;
}
.gf-card-bar{padding:1.1rem 1.4rem; border-bottom:1px solid var(--line)}
/* Başlık çubuğu sağında araç taşıdığında (arama kutusu, filtre) */
.gf-card-bar--arac{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem}
/* Kart altındaki sayfalama şeridi */
.gf-card-foot{display:flex; align-items:center; justify-content:space-between; gap:1rem;
              padding:1rem 1.4rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted)}
.gf-mb-6{margin-bottom:1.5rem}
.gf-m-0{margin:0}
.gf-fw-600{font-weight:600}
.gf-sub--narrow{margin-top:.3rem; max-width:38rem}
.gf-sub--flush{margin-top:.3rem; max-width:none}
.gf-icon-nudge{margin-top:.15rem}

/* FAZ 2 — Bootstrap yerine geçen yardımcılar */
.gf-text-end{text-align:right}
.gf-fw-700{font-weight:700}
.gf-flex-between{display:flex; justify-content:space-between; align-items:center; gap:.75rem}
.gf-filter-row{display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end}
.gf-filter-row label{display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:.35rem}
.gf-filter-row select,.gf-filter-row input{
  font-family:'IBM Plex Sans'; border:1px solid var(--line-strong); border-radius:.5rem;
  background:var(--bg); color:var(--ink); padding:.55rem .75rem; font-size:.9rem; min-width:10rem;
}
.gf-img-fluid{max-width:100%; height:auto; display:block}
.gf-field-hint{margin-top:.35rem; max-width:none; font-size:.78rem}
.gf-field-error{color:var(--red); font-size:.78rem; margin-top:.35rem}
.gf-form-row--check label{display:flex; align-items:flex-start; gap:.55rem; font-weight:600; cursor:pointer}
.gf-form-row--check input[type="checkbox"]{width:auto; margin-top:.2rem; flex:none}
.gf-form-grid > .gf-form-row--full{grid-column:1 / -1}
.gf-list{list-style:none; margin:0; padding:0}
.gf-list-item{
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  padding:.9rem 0; border-bottom:1px solid var(--line); font-size:.9rem;
}
.gf-list-item:last-child{border-bottom:0}
.gf-tabpanel{display:none}
.gf-tabpanel.is-active{display:block}
.gf-tabnav button{
  padding:.55rem 1.1rem; border-radius:999px; font-size:.85rem; font-weight:600;
  background:var(--bg); color:var(--muted); border:0; cursor:pointer; font-family:inherit;
  transition:background .15s ease, color .15s ease;
}
.gf-tabnav button:hover{background:var(--line); color:var(--ink)}
.gf-tabnav button.is-active{background:var(--red); color:#fff}
.gf-tabnav button.is-active:hover{background:var(--red-dark)}

/* ===================== FAZ 3 — kalan tekrarlayan inline kalıplar ===================== */
.gf-block{display:block}
.gf-inline{display:inline}
.gf-min-0{min-width:0}
.gf-mb-0{margin-bottom:0}
.gf-mb-1{margin-bottom:.3rem}
.gf-mb-4{margin-bottom:1rem}
.gf-mb-16{margin:0 0 16px}
.gf-mb-20{margin:0 0 20px}
.gf-mt-5{margin-top:1.25rem}
.gf-ml-2{margin-left:.5rem}
.gf-mr-1{margin-right:.25rem}
.gf-max-none{max-width:none}
.gf-no-underline{text-decoration:none}
.gf-text-sm{font-size:.88rem}
.gf-text-muted{color:var(--muted)}
.gf-text-sky{color:var(--sky)}
.gf-text-red-dark{color:var(--red-dark)}
.gf-text-amber-dark{color:#B7791F}
.gf-text-green{color:#1E9E5A}
.gf-ul-indent{margin:0; padding-left:1.2rem}
.gf-sub-plain{margin:0; max-width:none}
.gf-flex-gap-sm{display:flex; gap:.6rem}
.gf-inline-flex-tight{display:flex; align-items:center; gap:.25rem}
.gf-row-between{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.gf-form-actions{
  display:flex; justify-content:flex-end; gap:.75rem;
  padding-top:1rem; margin-top:1.5rem; border-top:1px solid var(--line);
}
.gf-empty-icon{font-size:4rem; opacity:.3}
.gf-empty-pad{padding:2rem 1rem}
.gf-page-pad{padding-block:0 3rem}
.gf-page-narrow{padding-block:0 3rem; max-width:26rem}
.gf-page-mid{padding-block:0 3rem; max-width:36rem}
.gf-page-lead{margin-top:-1rem; margin-bottom:2rem}
.gf-stat-value{
  font-family:'Big Shoulders Display'; font-weight:800; font-size:1.9rem; margin:0 0 .2rem;
}
.gf-card-section{
  font-family:'Big Shoulders Display'; font-weight:650; font-size:1.1rem;
  margin:0 0 1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--line);
}
.gf-card-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--line);
}
.gf-muted-label{opacity:.75; font-size:.85rem; font-weight:600; margin:0}
.gf-label-red{font-weight:600; color:var(--red)}
.gf-field-error-sm{color:var(--red); font-size:.75rem; margin-top:.3rem}
.gf-strong-tight{font-weight:700; margin:0}
.gf-strong-lead{font-weight:700; margin:0 0 .4rem}
.gf-btn--compact{padding:.5rem 1rem; font-size:.82rem}
.gf-cta-block{
  display:inline-block; padding:10px 20px; background-color:var(--red); color:#fff;
  text-decoration:none; border-radius:6px; font-weight:700;
}
.gf-info-box{
  margin:0 0 16px; padding:14px 16px; background-color:var(--bg); border-radius:6px;
}
.gf-auto-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1rem; margin-bottom:1.5rem;
}
.gf-chip-sky{background:var(--sky-soft); color:var(--sky)}

.gf-hint-xs{max-width:none; font-size:.72rem}
.gf-mb-2{margin-bottom:.5rem}
.gf-mb-3{margin-bottom:.8rem}
.gf-mono{font-family:'IBM Plex Mono', monospace}
.gf-empty-icon-md{display:block; font-size:1.6rem; margin-bottom:.5rem; opacity:.5}
.gf-btn--md{padding:.6rem 1.1rem; font-size:.85rem}
.gf-p-6{padding:1.5rem}
.gf-mr-2{margin-right:.35rem}
.gf-shrink-0{flex-shrink:0}
.gf-block-text{display:block; font-size:.9rem}
.gf-sub-sm{margin:.35rem 0 0; max-width:none; font-size:.88rem}
.gf-err-xs{color:var(--red); font-size:.75rem}
.gf-btn--compact-sm{padding:.5rem 1rem; font-size:.85rem}