/* ============================================================================
   Tarış Portal — Bileşen Stilleri
   ----------------------------------------------------------------------------
   Envanter: docs/07-tasarim-dili.md · Referans: docs/prototipler/
   TEK KURAL: burada sabit renk / yazı tipi / ölçü YOKTUR.
   Her değer tokens.css'teki belirteçten gelir. Yeni bir değer gerekiyorsa
   önce tokens.css'e belirteç olarak eklenir.
   ========================================================================== */

*{ box-sizing:border-box }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.cond{
  font-family:var(--font-display); margin:0; font-weight:600;
  line-height:var(--lh-tight); text-transform:uppercase;
  letter-spacing:.03em; color:var(--text-900);
}
p{ margin:0 }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit }
img{ max-width:100% }

/* Gorunur odak — WCAG 2.1 AA (docs/07 kural 6) */
:focus-visible{ outline:2px solid var(--accent-500); outline-offset:2px }

/* Ekran okuyucuya gorunur, goze gorunmez */
.gizli-etiket{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.num{ font-variant-numeric:tabular-nums }

/* --- Kabuk ------------------------------------------------------------- */
.app{ display:grid; grid-template-columns:1fr; min-height:100vh }
@media(min-width:1000px){ .app{ grid-template-columns:236px minmax(0,1fr) } }

.side{
  background:var(--ink-900); color:var(--on-ink-700);
  display:flex; flex-direction:column; border-right:1px solid var(--ink-500);
  /*
     min-width:0 — 375px'teki yatay kaydiriciyi kapatan satir (20.09.2026).

     .app bir grid; grid ogesinin varsayilan min-width'i AUTO'dur, yani oge
     icerigin dogal genisliginin altina inmez. .snav'daki overflow-x:auto bu
     yuzden ETKISIZ kaliyordu: menu kendi icinde kaymak yerine .side'i
     genisletiyor, o da sayfayi sisiriyordu — olculdu: scrollWidth 1557px,
     clientWidth 375px.

     Ayni tuzak .main icin biliniyordu (asagida min-width:0 var); kenar cubugunda
     atlanmis. docs/09 Adim 4'un kabul olcutu: "375 px'te sayfada ve IC
     ELEMANLARDA yatay kaydirici yok".
  */
  min-width:0;
}
.side .bd{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4); border-bottom:1px solid var(--ink-500);
}
.side .b1{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3);
  color:var(--on-ink-900); text-transform:uppercase; line-height:1;
}
.side .b2{
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--on-ink-500); font-weight:600; margin-top:var(--sp-1);
}
.snav{ padding:var(--sp-3) var(--sp-2); display:flex; flex-direction:column; gap:2px; flex:1 }
/* Yatay duzende kaydirmanin CALISMASI icin min-width:0 sart: flex ogesi de
   varsayilan olarak icerigin altina inmez. */
@media(max-width:999px){ .snav{ flex-direction:row; overflow-x:auto; min-width:0 } }
.snav a{
  display:flex; align-items:center; gap:var(--sp-3); min-height:var(--tap-min);
  color:var(--on-ink-700); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius);
  font-family:var(--font-display); text-transform:uppercase; font-size:var(--fs-h3);
  font-weight:600; letter-spacing:.04em;
  /*
     DIKEY menude metin SARABILIR (duzeltme 20.09.2026).

     Onceden burada white-space:nowrap vardi ve uc baslik kutusundan tasiyordu —
     olculdu: "Genel Kurul Ilanlari" 257px, kutu 219px. Tasan metin koyu
     kenar cubugunun disina, acik icerik alanina sarkiyordu.

     Kenar cubugunu genisletmek ya da yazi boyutunu kucultmek de mumkundu; ikisi
     de tasarim dilindeki olculeri degistirirdi (docs/07). Sarma, tipografiye
     dokunmadan sorunu cozuyor.
  */
  white-space:normal;
}
/* YATAY (mobil) duzende sarma YOK: satirlar yan yana kayiyor, sarmak
   yuksekligi zipla tirtirdi. */
@media(max-width:999px){ .snav a{ white-space:nowrap } }
.snav a:hover{ background:var(--ink-700); color:var(--on-ink-900) }
.snav a[aria-current="page"]{
  background:var(--ink-700); color:var(--on-ink-900);
  box-shadow:inset 2px 0 0 var(--accent-500);
}

/* Menu grup basligi — "Site yonetimi", "Evrak islemleri"…
   On bir duz bag, aralarinda iliski gostermeden aliniyordu; baslik, ekranin
   hangi ise ait oldugunu bag adina bakmadan soyluyor. */
.snav-grup{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--on-ink-500); font-weight:700;
  padding:var(--sp-4) var(--sp-3) var(--sp-1);
}
/* Ilk baslik ust bosluga ihtiyac duymaz: markanin hemen altinda. */
.snav-grup:first-child{ padding-top:var(--sp-2) }

/*
   YATAY (mobil) duzende baslik GIZLENIR.

   Kenar cubugu 1000 px altinda yan yana kayan bir seride donusuyor; grup
   basligi orada bir seriti bolen, tiklanamayan bir kutu olurdu ve dokunma
   hedefleri arasinda gurultu yaratirdi. Baglar zaten grup sirasiyla diziliyor.
*/
@media(max-width:999px){ .snav-grup{ display:none } }

.main{ min-width:0; display:flex; flex-direction:column }
.top{
  background:var(--paper-000); border-bottom:var(--border); padding:0 var(--sp-5);
  display:flex; align-items:center; gap:var(--sp-4); min-height:62px; flex-wrap:wrap;
}
.crumb{ font-size:var(--fs-sm); color:var(--text-500); display:flex; gap:var(--sp-2); align-items:center }
.crumb b{ color:var(--text-900); font-weight:600 }
.page{ padding:var(--sp-6) var(--sp-5) var(--sp-8); flex:1 }
.wrap{ max-width:var(--container); margin:0 auto }

/* --- Sayfa basligi ----------------------------------------------------- */
.ph{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5);
}
.ph h1{ font-size:var(--fs-h1); font-weight:700 }
.ph .sb{
  font-size:var(--fs-sm); color:var(--text-500); margin-top:var(--sp-1);
  text-transform:none; font-family:var(--font-body); letter-spacing:0;
}
.acts{ display:flex; gap:var(--sp-2); flex-wrap:wrap }

/* --- Dugmeler ---------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-display); text-transform:uppercase; font-weight:600;
  font-size:var(--fs-body); letter-spacing:.05em;
  padding:var(--sp-2) var(--sp-4); min-height:var(--tap-min);
  border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
  white-space:nowrap; transition:background .16s,border-color .16s,color .16s;
}
.btn-a{ background:var(--accent-500); color:var(--on-accent) }
.btn-a:hover{ background:var(--accent-400) }
.btn-d{ background:var(--text-900); color:var(--paper-000) }
.btn-d:hover{ background:var(--ink-900) }
.btn-o{ border-color:var(--line-300); color:var(--text-900); background:var(--paper-000) }
.btn-o:hover{ border-color:var(--text-900) }
.btn-s{ background:var(--ok-600); color:var(--paper-000) }

/* --- Kart -------------------------------------------------------------- */
.card{
  background:var(--paper-000); border:var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
}
.ch{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-bottom:var(--border);
}
.ch h2,.ch h3{ font-size:var(--fs-h3) }
.cb{ padding:var(--sp-4) }
.cb.flush{ padding:0 }

/* --- Durum rozeti — DAIMA metinli (docs/07 kural 2) -------------------- */
.pill{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:var(--sp-1) var(--sp-2);
  border-radius:var(--radius-pill); white-space:nowrap;
}
.p-s{ background:var(--ok-050);     color:var(--ok-600) }
.p-a{ background:var(--warn-050);   color:var(--warn-600) }
.p-r{ background:var(--danger-050); color:var(--danger-600) }
.p-b{ background:var(--info-050);   color:var(--info-600) }
.p-n{ background:var(--paper-100);  color:var(--text-500); border:var(--border) }

/* --- Filtre cubugu ----------------------------------------------------- */
.filters{
  display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
  margin-bottom:var(--sp-4);
}
.fld{
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--paper-000); border:var(--border); border-radius:var(--radius);
  padding:0 var(--sp-3); min-height:var(--tap-min);
  font-size:var(--fs-sm); color:var(--text-700);
}
.fld label,.fld .fld-baslik{ font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-500); font-weight:700 }
/* Onay kutulu suzgec: etiket kutunun YANINDA durur, ustunde degil. */
.fld .onay{ min-height:auto }
.fld .onay label{ text-transform:none; letter-spacing:0;
  font-size:var(--fs-sm); font-weight:500; color:var(--text-900) }
.fld input,.fld select{
  border:0; background:none; outline:none; font:inherit;
  font-size:var(--fs-sm); color:var(--text-900); min-width:0;
  /* Dokunma hedefi kabin TAMAMI olsun: 44 px alt siniri (docs/07 kural 3).
     Girdi kabin icinde kucuk kalirsa parmakla isabet zorlasir. */
  align-self:stretch; min-height:var(--tap-min);
}
.fld input{ width:100% }
.fld.buyu{ flex:1 1 220px }

/* Aktif filtre rozeti — tek tek kaldirilabilir (liste-ekrani a) */
.aktif-filtreler{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4) }
.chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:var(--paper-000); border:var(--border); border-radius:var(--radius-pill);
  padding:var(--sp-1) var(--sp-3); font-size:var(--fs-sm); color:var(--text-700);
}
.chip b{ color:var(--text-900); font-weight:600 }
.chip a{
  display:inline-grid; place-items:center; width:20px; height:20px;
  border-radius:50%; color:var(--text-500); font-weight:700;
}
.chip a:hover{ background:var(--paper-100); color:var(--danger-600) }

/* --- Tablo (>= 768 px) ------------------------------------------------- */
.tw{ overflow-x:auto; border-radius:var(--radius) }   /* kendi kabinda kayar */
.tw table{ border-collapse:collapse; width:100%; min-width:760px; background:var(--paper-000) }
.tw th{
  position:sticky; top:0; z-index:1;
  background:var(--paper-050); font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.1em; font-size:var(--fs-xs);
  font-weight:700; color:var(--text-500); text-align:left;
  padding:var(--sp-3) var(--sp-4); border-bottom:var(--border-strong); white-space:nowrap;
}
.tw th a{ display:inline-flex; align-items:center; gap:var(--sp-1); color:inherit }
.tw th a:hover{ color:var(--text-900) }
.tw th [aria-hidden]{ color:var(--accent-600) }
.tw td{
  padding:var(--sp-3) var(--sp-4); border-bottom:var(--border);
  font-size:var(--fs-body); vertical-align:middle;
}
.tw tr:last-child td{ border-bottom:0 }
.tw tbody tr:hover td{ background:var(--paper-050) }
.tw td.ad{ color:var(--text-900); font-weight:500 }
.tw td.dim{ color:var(--text-500) }
/* Satir ici ikincil metin (ör. "3 gün"). Onceden yalnizca td.dim vardi;
   <span class="dim"> hic soluk gorunmuyordu. */
.dim{ color:var(--text-500) }
.tw td.say{ font-variant-numeric:tabular-nums; white-space:nowrap }
/* Baslik hucresi: baslik detaya giden BAG, altinda soluk bir kunye satiri.
   Ayri bir "Detay" dugmesi yerine — satir basina tek eylem kalir, dugmeler
   dar sutunda alt alta binmez (genelge arsivi, 29.09.2026). */
.tw td .hucre-bag{ color:var(--text-900); font-weight:500 }
.tw td .hucre-bag:hover,.tw td .hucre-bag:focus-visible{
  text-decoration:underline; text-decoration-color:var(--accent-500); text-underline-offset:3px;
}
.tw td .hucre-alt{ margin-top:var(--sp-1); font-size:var(--fs-sm); color:var(--text-500) }
.tw td.eylem{ width:1%; white-space:nowrap; text-align:right }
/* Evrak listelerinde konunun altindaki isaret satiri (_EvrakIsaretleri):
   gonderen + sahsa/gizli/ivedi/ek. Tablo hucresinde ve kartta ayni. */
.isaretler{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2);
  margin-top:var(--sp-1); font-size:var(--fs-sm); color:var(--text-500);
}
/* Rozet + kisa metin yan yana, gerekirse alta sarar (_BeklenenHucresi). */
.isaret-grup{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2) }

/* --- Kart gorunumu (< 768 px) ----------------------------------------- */
/* Esik KESIN: 767 kart, 768 tablo (liste-ekrani c). JS ile olculmez. */
.kartlar{ display:none }
@media(max-width:767px){
  .tw{ display:none }
  .kartlar{ display:flex; flex-direction:column; gap:var(--sp-3) }
}
.kayit-kart{
  background:var(--paper-000); border:var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-1); padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.kayit-kart .kk-bas{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3);
}
.kayit-kart h3{ font-size:var(--fs-h3); line-height:var(--lh-tight) }
.kayit-kart .kk-alt{ font-size:var(--fs-sm); color:var(--text-500) }
/* Uzun resmi basliklar (genelge arsivi) icin: baslik yazi tipi BUYUK HARF ve
   iri; 200 karakterlik bir konu karti dokuz satira uzatiyordu. Govde yazi
   tipinde, kalin, normal boyut. */
.kayit-kart .kk-meta{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap }
.kayit-kart .kk-konu{
  font-family:var(--font-body); text-transform:none; letter-spacing:0;
  font-size:var(--fs-body); font-weight:600; color:var(--text-900); line-height:var(--lh-body);
}
.kayit-kart dl{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-1) var(--sp-3);
  margin:0; font-size:var(--fs-sm);
}
.kayit-kart dt{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--text-500); font-weight:700; align-self:center;
}
.kayit-kart dd{ margin:0; color:var(--text-900) }
/* Razor'da kosullu dt/dd ciftleri bir <div> icinde gruplaniyor (HTML5'te gecerli).
   Grid iki kolonlu oldugu icin o <div> tek hucre olur ve etiket/deger hizasi bozulurdu;
   display:contents sarmalayiciyi duzenden cikarip cocuklarini grid'e birakiyor. */
.kayit-kart dl > div{ display:contents }
.kayit-kart .kk-eylem{ display:flex; gap:var(--sp-2); margin-top:var(--sp-1) }
.kayit-kart .kk-eylem .btn{ flex:1 }

/* --- Kart izgarasi (HER genislikte gorunur) ---------------------------- */
/* .kartlar'dan FARKLI: o, tablonun dar ekran karsiligi ve genis ekranda
   gizli. Tablosu olmayan bir kart kumesi (panodaki kooperatifler) bunu
   kullanir; yoksa masaustunde hic gorunmez. */
.koop-izgara{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill, minmax(min(var(--kart-min), 100%), 1fr));
}

/* --- Sayfalayici ------------------------------------------------------- */
.pager{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-top:var(--border);
  font-size:var(--fs-sm); color:var(--text-500); flex-wrap:wrap;
  background:var(--paper-000);
}
.pgs{ display:flex; gap:var(--sp-1); flex-wrap:wrap }
.pg{
  min-width:var(--tap-min); min-height:var(--tap-min);
  border:var(--border); background:var(--paper-000); border-radius:var(--radius);
  display:grid; place-items:center; font-size:var(--fs-sm); color:var(--text-700);
  font-variant-numeric:tabular-nums; padding:0 var(--sp-2);
}
.pg:hover{ border-color:var(--line-300) }
.pg[aria-current="page"]{
  background:var(--text-900); color:var(--paper-000); border-color:var(--text-900);
}
/* Sinirdaki pasif kontrol. Artik <span> basiliyor (bkz. _Sayfalayici.cshtml):
   zaten tiklanamaz, burada yalnizca gorsel olarak soner. aria-disabled
   secicisi de KALIYOR — baska bir yerde dogru degerle yazilirsa calissin. */
.pg-pasif{ opacity:.45 }
.pg-pasif:hover{ border-color:var(--line-200) }
.pg[aria-disabled="true"]{ opacity:.45; pointer-events:none }

/* --- Bos durum ve notlar ----------------------------------------------- */
.bos{
  padding:var(--sp-7) var(--sp-5); text-align:center; color:var(--text-500);
  background:var(--paper-000);
}
.bos h3{ margin-bottom:var(--sp-2); color:var(--text-900) }
.bos p{ max-width:var(--measure); margin:0 auto var(--sp-4) }

.note{
  border:var(--border); border-left:3px solid var(--line-300);
  background:var(--paper-000); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius); font-size:var(--fs-sm); color:var(--text-700);
}
.note.b{ border-left-color:var(--info-600);   background:var(--info-050) }
.note.r{ border-left-color:var(--danger-600); background:var(--danger-050) }
.note.a{ border-left-color:var(--warn-600);   background:var(--warn-050) }

/* --- Sayac kutusu (kpi) — docs/07 bilesen envanteri --------------------- */
/*
   Panodaki birlesik ozet (docs/16 Faz 7). Sol kenar seridi DURUMU tasir,
   ama serit TEK BASINA bilgi degildir: her kutuda etiket ve alt not
   metinle de anlatir (CLAUDE.md §16).

   SIFIR NOTR RENK ALIR. "0 gecikmis" kirmizi bir seritle gosterilseydi,
   renk anlamini yitirirdi — kirmizi "burada bir sorun var" demek zorunda.
*/
.kpis{
  display:grid; gap:var(--sp-3); grid-template-columns:repeat(2,1fr);
}
@media(min-width:900px){ .kpis{ grid-template-columns:repeat(4,1fr) } }

.kpi{
  position:relative; background:var(--paper-000); border:var(--border);
  border-radius:var(--radius); padding:var(--sp-3) var(--sp-4);
  overflow:hidden;
}
.kpi::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--line-300);
}
.kpi.s::after{ background:var(--ok-600) }
.kpi.a::after{ background:var(--warn-600) }
.kpi.r::after{ background:var(--danger-600) }
.kpi.b::after{ background:var(--info-600) }

.kpi .k{
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-500); font-weight:700;
}
.kpi .v{
  font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700;
  line-height:var(--lh-tight); color:var(--text-900); margin:var(--sp-1) 0;
}
.kpi .n{ font-size:var(--fs-xs); color:var(--text-500) }

/* Kutunun tamami bir bag oldugunda: tiklanabilirligi belli olsun. */
a.kpi{ text-decoration:none; display:block }
a.kpi:hover{ border-color:var(--line-300); background:var(--paper-050) }
a.kpi:focus-visible{ outline:2px solid var(--accent-600); outline-offset:2px }

/* Gorev satiri kart govdesinde: serit kartin KENARINDA olmali, bu yuzden
   govdenin ic bosluğu kaldiriliyor. */
.cb-sifir{ padding:0 }

/* --- Gorev satiri (tk) — docs/07 bilesen envanteri --------------------- */
/*
   Panodaki "yapilacaklar" listesi. Sol kenar seridi ACILIYETI tasir, ama
   serit tek basina bilgi degildir: her satirda ayrica metinli bir rozet var
   ("2 gun gecikme", "Okundu onayi bekliyor") — CLAUDE.md §16.

   SATIRIN TAMAMI BIR BAG: kullanici "tiklayarak ilgili isleme ulasabilmeli".
   Yalnizca bir dugme olsaydi, dokunma hedefi satirin kucuk bir parcasi olur
   ve mobilde isabet ettirmek zorlasirdi.
*/
.tk{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-bottom:var(--border);
  align-items:center; position:relative; text-decoration:none;
  min-height:var(--tap-min);
}
.tk:last-child{ border-bottom:0 }
.tk::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px }
.tk.r::before{ background:var(--danger-600) }
.tk.a::before{ background:var(--warn-600) }
.tk.s::before{ background:var(--ok-600) }
.tk.b::before{ background:var(--info-600) }
.tk.n::before{ background:var(--line-300) }
.tk:hover{ background:var(--paper-050) }
.tk:focus-visible{ outline:2px solid var(--accent-600); outline-offset:-2px }

.tk .tt{
  font-family:var(--font-display); text-transform:uppercase; font-weight:600;
  font-size:var(--fs-h3); color:var(--text-900); line-height:var(--lh-tight);
  display:block; margin-bottom:var(--sp-1);
}
.tk .mt{
  font-size:var(--fs-xs); color:var(--text-500);
  display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
}
.tk .mt .sep{ color:var(--line-300) }
.tk .rt{ display:flex; align-items:center; gap:var(--sp-2) }

/*
   DAR EKRANDA TEK SUTUN. Iki sutunlu izgara 375 px'te rozeti basligin
   ustune bindiriyordu; rozet alta gecip sola hizalaniyor.
*/
@media(max-width:560px){
  .tk{ grid-template-columns:1fr }
  .tk .rt{ justify-content:flex-start }
}

/* --- Form -------------------------------------------------------------- */
.form-izgara{ display:grid; gap:var(--sp-4); grid-template-columns:1fr }
@media(min-width:620px){ .form-izgara{ grid-template-columns:repeat(2,1fr) } }
.alan{ display:flex; flex-direction:column; gap:var(--sp-1) }
.alan.genis{ grid-column:1/-1 }
.alan label{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--text-500); font-weight:700;
}
.inp{
  font:inherit; font-size:var(--fs-body); color:var(--text-900);
  background:var(--paper-000); border:var(--border-strong); border-radius:var(--radius);
  padding:var(--sp-2) var(--sp-3); min-height:var(--tap-min); width:100%;
}
.inp:focus{ border-color:var(--accent-500) }
.inp[aria-invalid="true"]{ border-color:var(--danger-600); background:var(--danger-050) }
textarea.inp{ min-height:calc(var(--tap-min) * 2); resize:vertical }
.alan .yardim{ font-size:var(--fs-xs); color:var(--text-500) }
.alan .hata{ font-size:var(--fs-xs); color:var(--danger-600); font-weight:600 }
.onay{ display:flex; align-items:center; gap:var(--sp-2); min-height:var(--tap-min) }
.onay input{ width:18px; height:18px }
.onay label{
  text-transform:none; letter-spacing:0; font-size:var(--fs-body);
  color:var(--text-700); font-weight:400;
}
.form-alt{
  display:flex; gap:var(--sp-2); flex-wrap:wrap; justify-content:flex-end;
  padding-top:var(--sp-4); border-top:var(--border); margin-top:var(--sp-5);
}

/* --- htmx gostergesi --------------------------------------------------- */
.htmx-indicator{ opacity:0; transition:opacity .12s }
.htmx-request .htmx-indicator{ opacity:1 }
.htmx-request.liste-kap{ opacity:.55 }

/* --- Public site ------------------------------------------------------- */
.kamu-ust{
  background:var(--ink-900); color:var(--on-ink-900);
  padding:var(--sp-4) var(--sp-5);
}
.kamu-ust .b1{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700 }
.kamu-ust .b2{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--on-ink-500); font-weight:600;
}
/* Yapiskan footer. Kisa sayfalarda (iki duyuruluk bir liste) govde ekrani
   doldurmuyor ve footer yukari cikip ALTINDA bos bir serit birakiyordu —
   ekran goruntusuyle dogrulandi 22.09.2026.

   YALNIZCA .kamu'ya: yonetim ve extranet yerlesimleri kendi kaydirma
   duzenlerini kuruyor, oralara dokunmak baska bir sey kirardi.
   100vh once yaziliyor; dvh'yi tanimayan tarayici birinciyi kullanir. */
body.kamu{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}
body.kamu > .kamu-govde{ flex:1 0 auto }
body.kamu > .kamu-alt{ flex:none }

.kamu-govde{ padding:var(--sp-6) var(--sp-5) var(--sp-8) }
.kamu-alt{
  background:var(--ink-900); color:var(--on-ink-500);
  padding:var(--sp-5); font-size:var(--fs-sm);
}

/* Public kooperatif listesi — masaustunde ikili izgara */
.kamu-liste{ display:grid; gap:var(--sp-3); grid-template-columns:1fr }
@media(min-width:768px){ .kamu-liste{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1080px){ .kamu-liste{ grid-template-columns:repeat(3,1fr) } }
.kamu-liste .kayit-kart{ display:flex }

/* --- Kimlik ekranlari --------------------------------------------------- */
.kimlik-sayfa{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--sp-5);
  padding:var(--sp-5); background:var(--ink-900);
}
.kimlik-kutu{ width:100%; max-width:420px }
/* Karsilama sayfasi: daha fazla icerik ve uc dugme. Dar kutuda sonuncusu
   alt satira dusuyordu (olculdu). */
.kimlik-kutu.genis{ max-width:560px }
.kimlik-marka{ text-align:center; margin-bottom:var(--sp-5); display:block }
/* b1/b2 artik <span>: marka bir bag oldugu icin blok etiket icine konamaz. */
.kimlik-marka .b1,.kimlik-marka .b2{ display:block }
.kimlik-marka:hover .b1,.kimlik-marka:focus-visible .b1{ color:var(--accent-500) }
.kimlik-donus{ text-align:center; margin-top:var(--sp-5); font-size:var(--fs-sm) }
.kimlik-donus a{ color:var(--on-ink-700) }
.kimlik-donus a:hover,.kimlik-donus a:focus-visible{ color:var(--accent-500) }
.kimlik-marka .b1{
  font-family:var(--font-display); font-size:var(--fs-h1); font-weight:700;
  color:var(--on-ink-900); text-transform:uppercase; line-height:1;
}
.kimlik-marka .b2{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--on-ink-500); font-weight:600; margin-top:var(--sp-1);
}
.kimlik-alt{
  color:var(--on-ink-500); font-size:var(--fs-xs); text-align:center;
  max-width:var(--measure);
}
/* Tek dugmeli satirda (giris formu) dugme tam genislige uzasin. */
.kimlik-kutu .form-alt{ justify-content:stretch }
.kimlik-kutu .form-alt .btn:only-child{ flex:1 }

/* Birden fazla dugme YAN YANA dursun ve uzamasin.
   Onceki kural her dugmeye flex:1 veriyordu; 420 px'lik kutuda uc dugme
   sigmayip alt alta diziliyordu. */
.kimlik-kutu .form-alt.dugme-satiri{
  justify-content:center; gap:var(--sp-2); flex-wrap:wrap;
}
.kimlik-kutu .form-alt.dugme-satiri .btn{ flex:0 0 auto }

/* <dl> icinde dt/dd ciftini gruplayan <div> (HTML5'te gecerli) */
.kayit-kart dl > div{ display:contents }

/* Bos dogrulama ozeti gorunmez. asp-validation-summary hata yokken de kutuyu
   basiyor; bos bir kirmizi kutu kullaniciya "bir sorun var" diye yanlis sinyal verir. */
.validation-summary-valid{ display:none }
.field-validation-valid{ display:none }

/* --- Zengin metin (duyuru govdesi) ------------------------------------- */
/* Govde sunucuda temizlenmis HTML; burada YALNIZCA tipografi veriliyor.
   Stil oznitelikleri temizleyicide dusuruldugu icin icerik kendi rengini
   veya olcusunu getiremez — tasarim belirtecleri tek kaynak (CLAUDE.md §16). */
.zengin{ color:var(--text-700) }
.zengin > * + *{ margin-top:var(--sp-4) }

/* Okuma olcusu METNE ait, tabloya degil.
   Olcu eskiden kapsayiciya veriliyordu (.zengin{max-width}); o zaman veri
   tablosu da 70ch'e sikisiyor ve genis ekranda kartin sag yarisi bos kaliyordu
   — olculdu 18.09.2026, Tarihce sayfasi: 1196px kart, 593px icerik. */
.zengin p,.zengin ul,.zengin ol,.zengin blockquote,
.zengin h2,.zengin h3,.zengin h4{ max-width:var(--measure) }
.zengin h2{ font-size:var(--fs-h2) }
.zengin h3{ font-size:var(--fs-h3) }
.zengin h4{ font-size:var(--fs-body); letter-spacing:.04em }
.zengin ul,.zengin ol{ padding-left:var(--sp-5) }
.zengin li + li{ margin-top:var(--sp-2) }
.zengin a{ color:var(--accent-600); text-decoration:underline }
.zengin blockquote{
  border-left:3px solid var(--line-300); padding-left:var(--sp-4); color:var(--text-500);
}
.zengin table{ border-collapse:collapse; width:100%; font-size:var(--fs-sm) }
.zengin th,.zengin td{ border:var(--border); padding:var(--sp-2) var(--sp-3); text-align:left }
.zengin th{ background:var(--paper-050); font-weight:600; color:var(--text-900) }
.zengin img{ height:auto; border-radius:var(--radius) }

/* Eski siteden aktarilan govdelerde YERLESIM tablosu kabugu kalabiliyor: eski
   Classic ASP sayfalari butun icerigi <table><tr><td> icine koyuyordu. Kabuk
   veri tasimaz, ama .zengin td kurali ona da cerceve cizer ve ekranda anlamsiz
   bir kutu gorunur.

   Olcut: satirlarinda YAN YANA IKI HUCRE olmayan tablo veri degil kabuktur.
   :has() icindeki > zinciri kasitli — ic ice duran GERCEK veri tablosunun
   hucreleri disaridaki kabugu "veri" gostermesin diye.

   :has() desteklenmeyen bir tarayicida kural dusar, cerceve gorunur kalir;
   asil sorun olan genislik kisiti yine de cozulmus olur. */
.zengin table:not(:has(> tbody > tr > td + td)):not(:has(> thead > tr > th + th))
  > tbody > tr > td{ border:0; padding:0 }
.zengin table:not(:has(> tbody > tr > td + td)):not(:has(> thead > tr > th + th))
  > tbody > tr > td > * + *{ margin-top:var(--sp-4) }
.zengin hr{ border:0; border-top:var(--border) }
.ozet{
  font-size:var(--fs-h3); color:var(--text-900); font-weight:500;
  max-width:var(--measure); margin-bottom:var(--sp-4);
}
/* --- Akis (feed) — tarih kutulu duyuru listesi -------------------------- */
/* docs/07 envanterinde "feed / fi" olarak KAYITLIYDI ama bu dosyada yalnizca
   asagidaki :hover kurali vardi. Tek basina bir hover, bilesenin stilli
   oldugu izlenimi veriyordu; gercekte .feed/.fi/.db hicbir duzen almiyor,
   tarih kutusu duz metin olarak alt alta dokuluyordu.
   Olculdu ve yazildi 22.09.2026; kaynak: docs/prototipler/02-extranet.html.  */
.feed{ display:flex; flex-direction:column }

.fi{
  display:grid; grid-template-columns:var(--sp-7) minmax(0,1fr);
  gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border-bottom:var(--border);
}
/* Son satirin alt cizgisi kart kenarligiyla ust uste binerdi. */
.fi:last-child{ border-bottom:0 }

.fi .db{
  height:fit-content; text-align:center;
  padding:var(--sp-1) 0; border:var(--border);
  border-radius:var(--radius); background:var(--paper-050);
}
.fi .db .d{
  font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700;
  line-height:var(--lh-tight); color:var(--text-900);
}
.fi .db .m{
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; font-weight:700; color:var(--text-500);
}

.fi h3{ font-size:var(--fs-body); margin:0 0 var(--sp-1) }
.fi h3 a{ color:var(--text-900); text-decoration:none }
.fi p{ margin:0; font-size:var(--fs-sm); color:var(--text-500); line-height:var(--lh-body) }

.feed .fi h3 a:hover{ color:var(--accent-600) }

/* --- Kunye (etiket/deger listesi) --------------------------------------- */
/* Detay kartlarindaki "Kooperatif: Altinova" turu bilgi listesi.
   Yeni bir gorsel dil DEGIL: kayit-kart'taki dl deseninin ayni dili, detay
   ekranina uygun olculerde. Sabit renk/olcu yok (CLAUDE.md §16).

   DUZELTILDI 18.09.2026: bu liste <dl class="ozet"> ile basiliyordu. .ozet bir
   GIRIS PARAGRAFI stili (fs-h3, agirlik 500, olculu genislik); tanim listesine
   uygulaninca etiket ve deger alt alta, kocaman ve girintili cikiyordu. Ekran
   goruntusuyle dogrulandi. */
.kunye{
  display:grid; grid-template-columns:auto 1fr;
  gap:var(--sp-2) var(--sp-5); margin:0;
}
.kunye dt{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--text-500); font-weight:700; align-self:baseline; white-space:nowrap;
}
.kunye dd{ margin:0; color:var(--text-900); font-weight:500 }

/* Razor'da her etiket/deger cifti bir <div> icinde (HTML5'te gecerli).
   Grid iki kolonlu oldugu icin o <div> tek hucre olur ve hizalama bozulurdu;
   display:contents sarmalayiciyi duzenden cikarip cocuklari grid'e birakir. */
.kunye > div{ display:contents }

/* Dar ekranda iki kolon sikisiyor: etiket ustte, deger altta. */
@media(max-width:539px){
  .kunye{ grid-template-columns:1fr; gap:var(--sp-1) 0 }
  .kunye > div + div{ margin-top:var(--sp-3) }
  .kunye dd{ margin-bottom:var(--sp-2) }
}

/* --- Zaman cizelgesi (onay zinciri) ------------------------------------- */
/* HIC TANIMLI DEGILDI (18.09.2026): uc onay ekrani da .tl/.tle/.mk/.t/.m
   siniflarini basiyordu ama karsiliklari CSS'te yoktu — zincir bicimsiz bir
   metin yigini olarak cikiyordu. */
.tl{
  position:relative; padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;
  margin:0; list-style:none;
}
.tle{
  position:relative; padding:0 0 var(--sp-4) var(--sp-6);
}
.tle:last-child{ padding-bottom:0 }

/* Dikey cizgi: ogenin KENDISINDEN ciziliyor, kapsayicidan degil — boylece
   son ogenin altinda bosluga sarkan bir cizgi kalmiyor. */
.tle::before{
  content:""; position:absolute; left:calc(var(--sp-3) - 1px); top:var(--sp-4);
  bottom:0; width:2px; background:var(--line-200);
}
.tle:last-child::before{ display:none }

/* Nokta. Durum RENK + METIN ile anlatiliyor (docs/07): nokta tek basina bilgi
   tasimiyor, yanindaki baslik durumu zaten yaziyor. */
.tle .mk{
  position:absolute; left:0; top:var(--sp-1);
  width:var(--sp-5); height:var(--sp-5); border-radius:50%;
  background:var(--paper-000); border:2px solid var(--line-300);
}
.tle.done .mk{ background:var(--ok-050); border-color:var(--ok-600) }

.tle .t{
  font-family:var(--font-display); font-size:var(--fs-h3);
  line-height:var(--lh-tight); color:var(--text-900); text-transform:uppercase;
  letter-spacing:.02em;
}
.tle .m{ font-size:var(--fs-sm); color:var(--text-500); margin-top:var(--sp-1) }
.tle .m b{ color:var(--text-700) }

/* --- Kurul uye listesi (public "Yonetim Kurulu") ------------------------ */
/* Yeni bir gorsel duzen degil: kayit-kart ile ayni dil — koyu baslik, acik
   icerik, tek vurgu. Sabit renk/olcu YOK, hepsi tokens.css belirtecleri
   (CLAUDE.md §16). */
.uye-listesi{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--sp-4); grid-template-columns:1fr;
}
@media(min-width:620px){ .uye-listesi{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:980px){ .uye-listesi{ grid-template-columns:repeat(3,1fr) } }

.uye{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3); border:var(--border); border-radius:var(--radius);
  background:var(--paper-000);
}
.uye-foto{
  width:var(--sp-8); height:var(--sp-8); flex:0 0 auto;
  object-fit:cover; border-radius:50%; border:var(--border-strong);
}
/* Riza yoksa fotograf yok — ama satir bozulmasin diye ayni olcude bir yer tutucu.
   Bos daire bilgi tasimaz, yalnizca hizalamayi korur (aria-hidden). */
.uye-foto-bos{ background:var(--paper-100); display:block }

/* --- Kisi fotografi (yonetim paneli) ----------------------------------- */
/* Onizleme public'teki daireden BUYUK ve KARE: panelde amac kimligi tanimak
   degil, yuklenen dosyanin dogru ve duzgun kirpilmis oldugunu gormek. */
.foto-duzen{ display:flex; gap:var(--sp-4); align-items:flex-start; flex-wrap:wrap }
.foto-onizleme{
  width:var(--portre); height:var(--portre); flex:0 0 auto;
  object-fit:cover; border-radius:var(--radius); border:var(--border-strong);
}
.foto-bos{ background:var(--paper-100); display:block }
.foto-eylem{ flex:1 1 20rem; min-width:0 }

.uye-bilgi{ min-width:0 }
.uye-ad{
  font-family:var(--font-display); font-size:var(--fs-h3);
  line-height:var(--lh-tight); color:var(--text-900);
}
.uye-gorev{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--accent-600); font-weight:700; margin-top:var(--sp-1);
}
.uye-unvan{ font-size:var(--fs-sm); color:var(--text-500) }
.uye-eposta{ font-size:var(--fs-sm); margin-top:var(--sp-1); overflow-wrap:anywhere }
.uye-eposta a{ color:var(--accent-600) }

/* ======================================================================
   KURUMSAL SITE — docs/prototipler/01-public-site.html
   Prototipteki sabit degerlerin TAMAMI tokens.css belirteclerine cevrildi
   (CLAUDE.md §16: sabit renk/olcu yazilmaz).
   ====================================================================== */

.kamu{ background:var(--ink-900); color:var(--on-ink-700) }
.kamu .wrap{ max-width:1240px; margin:0 auto; padding:0 var(--sp-5) }
@media(max-width:640px){ .kamu .wrap{ padding:0 var(--sp-4) } }

.kicker{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  font-weight:600; color:var(--accent-500);
}

/* --- Ust yardimci serit ------------------------------------------------ */
.util{
  background:var(--ink-800); border-bottom:1px solid var(--ink-500);
  font-size:var(--fs-xs); color:var(--on-ink-500);
}
.util .wrap{
  display:flex; gap:var(--sp-5); align-items:center;
  min-height:var(--sp-7); flex-wrap:wrap;
}
.util .sep{ margin-left:auto }
.util a:hover,.util a:focus-visible{ color:var(--on-ink-900) }
.util .live{ display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--ok-300) }
.util .live i{
  width:7px; height:7px; border-radius:50%; background:var(--ok-300); display:block;
}

/* --- Ust cubuk (marka + menu) ------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:40;
  background:var(--ink-900); border-bottom:1px solid var(--ink-500);
}
.nav .wrap{
  display:flex; align-items:center; gap:var(--sp-5);
  min-height:70px; flex-wrap:wrap; padding-top:var(--sp-2); padding-bottom:var(--sp-2);
}
.brand{ display:flex; align-items:center; gap:var(--sp-3); margin-right:auto }
.brand .mk{ width:36px; height:36px; flex:none; color:var(--on-ink-900) }
/* Amblemde vurgu rengi YOK: kurumun gercek ambleminde tek renk var.
   Kehribar, prototipten kalma bir suslemeydi. */
.brand .b1{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3);
  color:var(--on-ink-900); text-transform:uppercase; letter-spacing:.02em;
  line-height:1; display:block;
}
.brand .b2{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--on-ink-500); font-weight:600; margin-top:3px; display:block;
}
.menu{ display:flex; gap:var(--sp-5); flex-wrap:wrap }
.menu a{
  font-family:var(--font-display); text-transform:uppercase; font-size:var(--fs-body);
  font-weight:600; letter-spacing:.04em; color:var(--on-ink-700);
  padding:var(--sp-1) 0; border-bottom:2px solid transparent;
}
.menu a:hover,.menu a:focus-visible{ color:var(--on-ink-900); border-bottom-color:var(--accent-500) }

/* --- Menu grubu (Kurumsal) --------------------------------------------- */
/* JAVASCRIPT YOK: genis ekranda :hover ve :focus-within ile aciliyor, yani
   klavyeyle de gezilebiliyor. Dar ekran kurallari asagida, burger blogunda. */
.menu-grup{ position:relative; display:flex; align-items:center }
.menu-basi{
  font-family:var(--font-display); font-size:var(--fs-sm); letter-spacing:.06em;
  text-transform:uppercase; color:var(--on-ink-700); cursor:default;
  border-bottom:2px solid transparent; padding-bottom:2px;
}
.menu-alt{ display:none; list-style:none; margin:0; padding:0 }
.menu-alt a{ display:block }

/* --- Hero -------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink-900); border-bottom:1px solid var(--ink-500);
}
/* Izgara dokusu ve kehribar isik: prototipteki derinlik, resim dosyasi olmadan. */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--ink-500) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ink-500) 1px,transparent 1px);
  background-size:74px 74px; opacity:.45;
}
.hero .wrap{
  position:relative; z-index:2; display:grid; gap:var(--sp-6);
  grid-template-columns:1fr; padding-top:var(--sp-8); padding-bottom:var(--sp-8);
}
@media(min-width:980px){
  .hero .wrap{ grid-template-columns:1.15fr .85fr; align-items:center }
}
.hero h1{
  font-family:var(--font-display); font-size:var(--fs-display); font-weight:700;
  /* RENK ACIKCA: genel h1 kurali koyu renk atiyor ve daha ozgul oldugu icin
     hero'nun acik rengini EZIYORDU — koyu zeminde koyu baslik. */
  color:var(--on-ink-900);
  line-height:var(--lh-tight); letter-spacing:var(--ls-display);
  text-transform:uppercase; margin:var(--sp-4) 0 var(--sp-5);
}
.hero h1 .a{ color:var(--accent-500) }
.hero .sub{ font-size:var(--fs-h3); max-width:50ch; color:var(--on-ink-700); font-weight:400 }
.hero .acts{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6) }

/* --- Guncel Pano ------------------------------------------------------- */
.panel{
  background:var(--ink-700); border:1px solid var(--ink-500);
  border-radius:var(--radius); overflow:hidden;
}
.panel .pnh{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--ink-500);
}
.panel .pnh h4{ font-size:var(--fs-body); color:var(--on-ink-900); letter-spacing:.06em }
.panel .pnh .st{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--ok-300); font-weight:600;
}
.prow{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--ink-500);
}
.prow:last-of-type{ border-bottom:0 }
.prow:hover{ background:var(--ink-600) }
.prow .tag{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  font-weight:700; padding:var(--sp-1) 7px; border-radius:2px; flex:none; margin-top:2px;
}
.tag-a{ background:var(--accent-050); color:var(--accent-600) }
.tag-s{ background:var(--ink-600); color:var(--ok-300) }
.prow .tx{ min-width:0 }
.prow .tt{
  color:var(--on-ink-900); font-weight:500; font-size:var(--fs-body);
  line-height:1.35; display:block; margin-bottom:3px;
}
.prow .dd{ font-size:var(--fs-xs); color:var(--on-ink-500); display:block }
.panel .pnf{
  padding:var(--sp-3) var(--sp-4); display:flex; justify-content:space-between;
  align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  background:var(--ink-800); border-top:1px solid var(--ink-500);
  font-size:var(--fs-xs); color:var(--on-ink-500);
}
.panel .pnf a{ color:var(--accent-500); font-weight:600 }

/* --- Hizli erisim kutucuklari ------------------------------------------ */
.tiles{ background:var(--ink-800); border-bottom:1px solid var(--ink-500) }
.tiles .wrap{
  display:grid; gap:1px; background:var(--ink-500);
  grid-template-columns:repeat(2,1fr); padding:0;
}
@media(min-width:760px){ .tiles .wrap{ grid-template-columns:repeat(3,1fr) } }
@media(min-width:1080px){ .tiles .wrap{ grid-template-columns:repeat(5,1fr) } }
.tile{
  background:var(--ink-800); padding:var(--sp-6) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-3); min-height:var(--tap-min);
}
.tile:hover,.tile:focus-visible{ background:var(--ink-700) }
.tile svg{ width:26px; height:26px; color:var(--accent-500) }
.tile .t{
  font-family:var(--font-display); text-transform:uppercase; font-weight:600;
  font-size:var(--fs-h3); color:var(--on-ink-900); letter-spacing:.04em; line-height:1.1;
}
.tile .c{ font-size:var(--fs-xs); color:var(--on-ink-500) }

/* --- Acik bolumler ------------------------------------------------------ */
.light{ background:var(--paper-050); color:var(--text-700); padding:var(--sp-8) 0 }
.light h2,.light h3,.light h4{ color:var(--text-900) }
.shead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4);
  flex-wrap:wrap; margin-bottom:var(--sp-6);
}
.shead h2{ font-size:var(--fs-h2); font-weight:700 }
.shead .kicker{ display:block; margin-bottom:var(--sp-2); color:var(--accent-600) }
.shead .more{
  font-family:var(--font-display); text-transform:uppercase; font-weight:600;
  font-size:var(--fs-body); letter-spacing:.05em; color:var(--text-900);
  border-bottom:2px solid var(--accent-500); padding-bottom:2px;
}
.bolum-not{ font-size:var(--fs-sm); color:var(--text-500); margin-top:var(--sp-4) }

/* --- Duyuru izgarasi ---------------------------------------------------- */
.dgrid{ display:grid; gap:var(--sp-5); grid-template-columns:1fr }
@media(min-width:900px){ .dgrid{ grid-template-columns:1.25fr 1fr } }
.feat{
  background:var(--paper-000); border:var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.feat .bd{ padding:var(--sp-5) }
.feat .mt{ display:flex; gap:var(--sp-3); align-items:center; margin-bottom:var(--sp-3); flex-wrap:wrap }
.chip.am{
  background:var(--accent-500); color:var(--on-accent);
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  font-weight:700; padding:var(--sp-1) var(--sp-2); border-radius:2px;
}
.feat .dt{ font-size:var(--fs-xs); color:var(--text-500) }
.feat h3{ font-size:var(--fs-h2); margin-bottom:var(--sp-3); font-weight:700 }
.feat h3 a:hover{ color:var(--accent-600) }
.feat p{ font-size:var(--fs-body); color:var(--text-500) }

.dlist{
  display:flex; flex-direction:column; background:var(--paper-000);
  border:var(--border); border-radius:var(--radius);
}
.dl{
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--sp-3);
  padding:var(--sp-4); border-bottom:var(--border); align-items:start;
}
.dl:last-child{ border-bottom:0 }
.dl:hover,.dl:focus-visible{ background:var(--paper-050) }
.dl .dbox{
  background:var(--paper-050); border-radius:2px; text-align:center; padding:6px 0 5px;
}
.dl .dbox .d{
  font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700;
  color:var(--text-900); line-height:1; display:block;
}
.dl .dbox .m{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--text-500); font-weight:600; margin-top:2px; display:block;
}
.dl .dl-b{
  font-family:var(--font-display); font-size:var(--fs-h3); line-height:1.15;
  color:var(--text-900); text-transform:uppercase; font-weight:600; display:block;
}
.dl .dl-o{ font-size:var(--fs-sm); color:var(--text-500); line-height:1.5; display:block; margin-top:var(--sp-1) }
.dl-bos{ padding:var(--sp-5); font-size:var(--fs-sm); color:var(--text-500) }

/* --- Kooperatif secici (JavaScript'siz sekmeler) ------------------------ */
/* Gizli radyo dugmeleri + kardes secici: kapali JavaScript'te de calisir. */
.ktabs{ display:flex; gap:var(--sp-2); flex-wrap:wrap }
.ktab-radyo{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.ktab{
  font-family:var(--font-display); text-transform:uppercase; font-weight:600;
  font-size:var(--fs-body); letter-spacing:.05em; padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius); border:var(--border-strong);
  background:var(--paper-000); color:var(--text-700); cursor:pointer;
  display:inline-flex; align-items:center; min-height:var(--tap-min);
}
.ktab-radyo:checked + .ktab{
  background:var(--text-900); color:var(--paper-000); border-color:var(--text-900);
}
.ktab-radyo:focus-visible + .ktab{ outline:2px solid var(--accent-500); outline-offset:3px }
/* Bag olarak kullanilan sekme (adres paylasilabilir olsun diye): secili hal
   radyo kardesi olmadan da gorunmeli. */
.ktab.etkin{
  background:var(--text-900); color:var(--paper-000); border-color:var(--text-900);
}
.ktab .n{ font-size:var(--fs-xs); opacity:.65; margin-left:var(--sp-2) }

.kgrid{ display:none; width:100%; gap:var(--sp-3); grid-template-columns:1fr; margin-top:var(--sp-5) }
@media(min-width:660px){ .kgrid{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){ .kgrid{ grid-template-columns:repeat(3,1fr) } }
/* Secili radyonun izgarasi: radyolar ve izgaralar ayni sirada kardes. */
.ktabs .ktab-radyo:nth-of-type(1):checked ~ .kgrid:nth-of-type(1),
.ktabs .ktab-radyo:nth-of-type(2):checked ~ .kgrid:nth-of-type(2),
.ktabs .ktab-radyo:nth-of-type(3):checked ~ .kgrid:nth-of-type(3),
.ktabs .ktab-radyo:nth-of-type(4):checked ~ .kgrid:nth-of-type(4),
.ktabs .ktab-radyo:nth-of-type(5):checked ~ .kgrid:nth-of-type(5),
.ktabs .ktab-radyo:nth-of-type(6):checked ~ .kgrid:nth-of-type(6),
.ktabs .ktab-radyo:nth-of-type(7):checked ~ .kgrid:nth-of-type(7),
.ktabs .ktab-radyo:nth-of-type(8):checked ~ .kgrid:nth-of-type(8){ display:grid }

.kc{
  background:var(--paper-000); border:var(--border); border-radius:var(--radius);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:7px;
}
.kc:hover{ border-color:var(--accent-500) }
.kc .kn{
  font-family:var(--font-display); text-transform:uppercase; font-weight:700;
  font-size:var(--fs-h3); color:var(--text-900); line-height:1.1;
}
.kc .kl{ font-size:var(--fs-xs); color:var(--text-500); display:flex; gap:var(--sp-2); flex-wrap:wrap }
.kc .kl b{ color:var(--text-700); font-weight:600 }

/* --- KVKK seridi -------------------------------------------------------- */
.kvkk{ background:var(--ink-700); padding:var(--sp-7) 0 }
.kvkk h2{ font-size:var(--fs-h2); color:var(--on-ink-900); margin:var(--sp-3) 0; font-weight:700 }
.kvkk p{ font-size:var(--fs-body); color:var(--on-ink-700); max-width:64ch }

/* --- Govde ve alt bilgi -------------------------------------------------- */
.kamu-govde{ display:block }
.kamu-alt{ background:var(--ink-900); padding:var(--sp-7) 0 var(--sp-5); font-size:var(--fs-sm); color:var(--on-ink-500) }
.kamu-alt .b1{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3);
  color:var(--on-ink-900); text-transform:uppercase; letter-spacing:.02em;
}
.fg{ display:grid; gap:var(--sp-6); grid-template-columns:1fr }
@media(min-width:720px){ .fg{ grid-template-columns:1.6fr 1fr 1fr 1fr } }
.kamu-alt h4{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); color:var(--accent-500);
  margin:0 0 var(--sp-3); font-weight:600;
}
.kamu-alt ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px }
.kamu-alt a:hover,.kamu-alt a:focus-visible{ color:var(--on-ink-900) }
.kamu-alt .ab{ color:var(--on-ink-700); max-width:36ch; line-height:var(--lh-body); margin-top:var(--sp-2) }
.fb{
  margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--ink-500);
  display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:space-between;
  font-size:var(--fs-xs); color:var(--on-ink-500);
}

/* Acik bolumlerdeki bos durum, koyu govde uzerinde de okunur kalsin. */
.light .bos{ background:var(--paper-000); border:var(--border); border-radius:var(--radius) }

/* --- Dar ekran menusu (JavaScript'siz) ---------------------------------- */
.burger-kutu{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.burger{
  display:flex; flex-direction:column; gap:4px; width:var(--tap-min);
  height:var(--tap-min); align-items:center; justify-content:center;
  cursor:pointer; order:2;
}
.burger span{ height:2px; width:24px; background:var(--on-ink-900); display:block }
.burger-kutu:focus-visible + .burger{ outline:2px solid var(--accent-500); outline-offset:2px }

@media(max-width:1039px){
  /* Menu varsayilan olarak KAPALI; burger ile aciliyor. */
  .nav .menu{ display:none; order:4; width:100%; flex-direction:column; gap:0 }
  .burger-kutu:checked ~ .menu{ display:flex }
  .nav .menu a{
    padding:var(--sp-3) 0; border-bottom:1px solid var(--ink-500);
    border-left:2px solid transparent; padding-left:var(--sp-2);
    min-height:var(--tap-min); display:flex; align-items:center;
  }
  .nav .menu a:hover,.nav .menu a:focus-visible{
    border-bottom-color:var(--ink-500); border-left-color:var(--accent-500);
  }
  .nav .btn-a{ order:3 }

  /* Dar ekranda menu zaten dikey bir yigin: alt basliklar girintili ve HER
     ZAMAN acik. Ic ice bir ac/kapat, dokunmatikte fazladan bir adim olurdu. */
  .menu-grup{ display:block; width:100% }
  .menu-basi{
    display:block; padding:var(--sp-3) 0 var(--sp-2) var(--sp-2);
    color:var(--on-ink-500);
  }
  .menu-alt{ display:block }
  .nav .menu-alt a{ padding-left:var(--sp-5) }
}
@media(min-width:1040px){
  /* Genis ekranda burger gizli, menu her zaman acik. */
  .burger{ display:none }
  .nav .menu{ display:flex }

  /* Acilir kutu: fare ile ustune gelince ya da icindeki bir oge odaga
     girince aciliyor. Kapanmasi icin JavaScript gerekmiyor. */
  .menu-grup:hover .menu-alt,
  .menu-grup:focus-within .menu-alt{ display:block }
  .menu-grup:hover .menu-basi,
  .menu-grup:focus-within .menu-basi{
    color:var(--on-ink-900); border-bottom-color:var(--accent-500);
  }

  .menu-alt{
    position:absolute; top:100%; left:calc(var(--sp-3) * -1); z-index:20;
    min-width:14rem; background:var(--ink-900); border:1px solid var(--ink-500);
    border-radius:var(--radius); box-shadow:var(--shadow-1);
    padding:var(--sp-2) 0;
  }
  .menu-alt a{
    padding:var(--sp-2) var(--sp-4); border-bottom:0; white-space:nowrap;
  }
  .menu-alt a:hover,.menu-alt a:focus-visible{
    background:var(--ink-700); border-bottom:0;
  }
}

/* --- Oturum cubugu (yonetim ust cubugu ve public menu) ------------------- */
.oturum{ display:flex; align-items:center; gap:var(--sp-3); margin-left:auto; flex-wrap:wrap }
.oturum-ad{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  font-weight:700; color:var(--text-500); white-space:nowrap;
}
.oturum-bag{
  font-family:var(--font-display); text-transform:uppercase; font-weight:600;
  font-size:var(--fs-body); letter-spacing:.05em; color:var(--text-700);
  border-bottom:2px solid transparent; padding:var(--sp-1) 0; white-space:nowrap;
}
.oturum-bag:hover,.oturum-bag:focus-visible{ color:var(--text-900); border-bottom-color:var(--accent-500) }
/* Koyu zeminli public cubukta ayni sinif acik renk alir. */
.util .oturum-ad{ color:var(--on-ink-700) }

/* --- Bekleyen is zili (public ust serit) -------------------------------- */
/* Rozet DURUM bilgisidir: kehribar (birincil eylem) DEGIL, --danger.
   Durum iki kanaldan: rozetin rengi + baglantinin aria-label/title metni. */
.zil{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap-min); min-height:var(--tap-min); color:var(--on-ink-700);
}
.zil-var{ color:var(--on-ink-900) }
.zil-ikon{
  width:1.7em; height:1.7em; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transform-origin:50% 8%;
}
/* Surekli titreme dikkat dagitir: dort saniyede bir kisa bir sallanma. */
.zil-var .zil-ikon{ animation:zil-salla 4s ease-in-out infinite }
.zil-rozet{
  position:absolute; top:var(--sp-1); right:0;
  min-width:1.7em; padding:0 var(--sp-1); border-radius:var(--radius-pill);
  background:var(--danger-600); color:var(--paper-000);
  font-size:var(--fs-label); font-weight:700; line-height:1.7; text-align:center;
  font-variant-numeric:tabular-nums;
}
@keyframes zil-salla{
  0%, 20%, 100%{ transform:rotate(0) }
  4%{ transform:rotate(14deg) }
  8%{ transform:rotate(-12deg) }
  12%{ transform:rotate(8deg) }
  16%{ transform:rotate(-4deg) }
}

/* --- Toast (tek seferlik bildirim, ornek: cikis onayi) ------------------ */
/*
   JAVASCRIPT YOK: kaybolma tamamen CSS animasyonuyla. CSP satir ici script'i
   engelliyor ve bu is icin ayri bir dosya yuklemek asiri kacardi.

   BASLANGIC DURUMU GORUNUR — bu bilincli. tokens.css, prefers-reduced-motion
   tercihinde TUM animasyonlari !important ile kapatiyor. Gorunmezden baslayip
   animasyonla gorunur olsaydi, hareket tercihi kapali kullanici mesaji HIC
   goremezdi. Simdi animasyon kapaliysa mesaj duruyor ve bir sonraki sayfa
   gecisinde kendiliginden gidiyor (TempData tek seferlik).

   position:fixed — toast duzeni etkilemez; serit halinde sayfayi asagi itmiyordu
   ama yerini de birakmiyor.
*/
.toast{
  position:fixed; z-index:60;
  right:var(--sp-4); bottom:var(--sp-4); left:var(--sp-4);
  max-width:380px; margin-left:auto;
  background:var(--ink-700); color:var(--on-ink-900);
  border:1px solid var(--ink-500); border-left:3px solid var(--ok-300);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm); font-weight:600;
  pointer-events:none;                 /* hicbir tiklamayi engellemesin */
  animation:toast-akis 5.5s ease-in-out forwards;
}
@keyframes toast-akis{
  0%   { opacity:0; transform:translateY(var(--sp-4)) }
  8%   { opacity:1; transform:none }
  80%  { opacity:1; transform:none }
  100% { opacity:0; transform:translateY(var(--sp-4)); visibility:hidden }
}

/* Tek sutunlu uygulama duzeni (extranet: sol menu Adim 13'te gelecek). */
.app.tek-sutun{ grid-template-columns:1fr }

/* --- Aralik yardimcilari ------------------------------------------------ */
/* Bunlar SATIR ICI STIL YERINE var. Content-Security-Policy'de
   style-src 'self' 'nonce-...' tanimli ve nonce, style ETIKETINE uygulanir;
   style OZNITELIGINE uygulanmaz. Yani her style="..." tarayicida engelleniyordu
   ve kart araliklari kayiyordu (olculdu: 33 ihlal).
   Degerler yine belirtecten geliyor, sabit olcu yok (CLAUDE.md §16). */
/* ust-2 KULLANILIYORDU ama tanimli degildi: uc ekranda ust bosluk hic
   uygulanmiyordu (olculdu 22.09.2026). Olcek sp ile birebir. */
.ust-2{ margin-top:var(--sp-2) }
.ust-3{ margin-top:var(--sp-3) }
.ust-4{ margin-top:var(--sp-4) }
.ust-5{ margin-top:var(--sp-5) }
.alt-3{ margin-bottom:var(--sp-3) }
.alt-5{ margin-bottom:var(--sp-5) }
.ustsuz{ padding-top:0 }

/* Belge editoru kabi. Yukseklik BURADA: satir ici stil CSP'ye takilir (docs/07). */
.belge-editor{ min-height:640px }

/* Bir kez gosterilen gecici parola. Tek aralikli ve BUYUK: yonetici bunu
   telefonda okuyacak ya da elle yazacak; l/1 ve O/0 ayrimi gorunmeli.
   user-select serbest birakiliyor — kopyalanabilmesi ISIN KENDISI. */
.gecici-parola{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:var(--fs-h2); letter-spacing:.08em; word-break:break-all;
  background:var(--paper-100); border:var(--border-strong);
  border-radius:var(--radius); padding:var(--sp-4); margin-top:var(--sp-4);
}
.dar{ max-width:var(--measure) }

/* --- Amblem: baglama gore olcu ------------------------------------------ */
/* Isaretin kendisi ortak parcadadir (_Amblem.cshtml); olcu ve renk buradan.
   currentColor kullandigi icin her zemin kendi metin rengini verir. */

/* Yonetim kenar cubugu: marka blogu artik bir bag. */
.side a.bd{ text-decoration:none }
.side a.bd:hover .b1,.side a.bd:focus-visible .b1{ color:var(--accent-500) }
.side .bd .mk{ width:30px; height:30px; flex:none; color:var(--on-ink-900) }

/* Giris ekrani: amblem baslikta, ortalanmis ve daha buyuk. */
.kimlik-marka .mk{
  width:52px; height:52px; color:var(--on-ink-900);
  display:block; margin:0 auto var(--sp-3);
}
.kimlik-marka:hover .mk,.kimlik-marka:focus-visible .mk{ color:var(--accent-500) }

/* Extranet ust cubugu: kucuk amblem, konum cizgisinin solunda. */
.crumb-marka{ display:inline-flex; align-items:center; flex:none }
.crumb-marka .mk{ width:26px; height:26px; color:var(--text-900) }
.crumb-marka:hover .mk,.crumb-marka:focus-visible .mk{ color:var(--accent-600) }

/* --- Olcum gunlugu (belge editoru deneme ekrani) ----------------------- */
.gunluk{
  margin:var(--sp-4) 0 0; padding:var(--sp-3); border:var(--border);
  border-radius:var(--radius); background:var(--paper-050);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-xs); line-height:1.7; white-space:pre-wrap;
  max-height:280px; overflow:auto; color:var(--text-700);
}
/* Editor kabini: bilesen kendi yuksekligini alir, kap yalnizca cerceve verir. */
#belge-editor{ min-height:420px }

/* --- Gruplu coklu secim (alici kooperatifler) --------------------------- */
/*
   Yayimlama ekraninda 40 kooperatif ILE GORE gruplanmis olarak seciliyor.
   Duz bir liste taranabilir degildi; merkez personeli "Izmir'in tamami"
   gibi dusunuyor.

   Mevcut bilesenlerden tureiyor: kutu/etiket ikilisi .onay, boslukar ve
   renkler belirteclerden. Sabit renk veya olcu YOK (CLAUDE.md §16).
*/
.secim-grubu{
  border:var(--border); border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
  margin:0 0 var(--sp-4);
}
.secim-grubu legend{
  display:flex; align-items:center; gap:var(--sp-3); padding:0 var(--sp-2);
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--text-700); font-weight:700;
}

/* Otomatik sutun: dar ekranda tek, genis ekranda kac sigarsa o kadar.
   Kirilma noktasi elle yazilmiyor — kooperatif adlari degisken uzunlukta. */
.secim-izgara{
  display:grid; gap:var(--sp-1) var(--sp-4);
  grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
  margin-top:var(--sp-2);
}

/* --- Kullanici menusu (acilir) ----------------------------------------- */
/*
   <details>/<summary> tabanli: JAVASCRIPT YOK.

   CSP satir ici script'i engelliyor (unsafe-inline yok) ve bu is icin ayri bir
   dosya yuklemek asiri kacardi. Ustelik <details> klavyeyle calisir, ekran
   okuyucuya acik/kapali durumunu soyler ve JavaScript kapaliyken de acilir.
*/
.kmenu{ position:relative; margin-left:auto }
.kmenu > summary{
  display:flex; align-items:center; gap:var(--sp-2);
  min-height:var(--tap-min); padding:var(--sp-1) var(--sp-2);
  cursor:pointer; list-style:none; border-radius:var(--radius);
  border:1px solid transparent;
}
/* Varsayilan ucgen isareti kaldiriliyor; kendi okumuzu koyuyoruz. */
.kmenu > summary::-webkit-details-marker{ display:none }
.kmenu > summary:hover{ border-color:var(--line-300) }
.kmenu > summary:focus-visible{ outline:2px solid var(--accent-500); outline-offset:2px }

.kmenu-ad{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  font-weight:700; color:var(--text-700); white-space:nowrap;
}
.kmenu-ok{
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--text-500); transition:transform .15s ease;
}
.kmenu[open] .kmenu-ok{ transform:rotate(180deg) }

.kmenu-kutu{
  position:absolute; right:0; top:calc(100% + var(--sp-2)); z-index:50;
  min-width:15rem; padding:var(--sp-2);
  background:var(--paper-000); border:var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-2); display:flex; flex-direction:column;
}
.kmenu-kutu a,
.kmenu-kutu button{
  display:block; width:100%; text-align:left;
  padding:var(--sp-2) var(--sp-3); min-height:var(--tap-min);
  font-family:var(--font-display); text-transform:uppercase; font-weight:600;
  font-size:var(--fs-body); letter-spacing:.05em;
  color:var(--text-700); background:none; border:0; border-radius:var(--radius);
  cursor:pointer;
}
.kmenu-kutu a:hover,.kmenu-kutu a:focus-visible,
.kmenu-kutu button:hover,.kmenu-kutu button:focus-visible{
  background:var(--paper-050); color:var(--text-900);
}
.kmenu-kutu hr{ border:0; border-top:var(--border); margin:var(--sp-2) 0 }

/* Koyu zeminli public cubukta ad acik renk alir. */
.util .kmenu-ad{ color:var(--on-ink-700) }

/*
   Dar ekranda menu SAGDA kalir, yalnizca genisligi sinirlanir.

   Once burada left:0 yaziliyordu ve YANLISTI: .kmenu ust cubugun SAGINDA
   duruyor, kutuyu soldan hizalamak onu saga dogru tasiriyordu. Olculdu:
   375px'te sayfa scrollWidth'i 77px artiyordu (20.09.2026).
*/
@media(max-width:539px){
  .kmenu-kutu{ min-width:0; width:min(15rem, calc(100vw - var(--sp-5))) }
}

/* --- Belge onizlemesi --------------------------------------------------- */
/*
   PDF tarayicinin kendi goruntuleyicisinde, <iframe> icinde gosteriliyor.

   <object>/<embed> DEGIL: sitenin CSP'sinde object-src 'none' var (docs/02) ve
   bu bilincli bir kisit. Belgenin kendisi kum havuzunda servis ediliyor
   (Content-Security-Policy: sandbox) — PDF icindeki JavaScript siteye erisemez.

   Yukseklik viewport'a gore: sabit bir piksel degeri buyuk ekranda kucuk,
   kucuk ekranda tasan bir cerceve verirdi.
*/
.belge-onizleme{
  display:block; width:100%; height:min(70vh, 800px);
  border:var(--border); border-radius:var(--radius); background:var(--paper-050);
}
@media(max-width:767px){ .belge-onizleme{ height:60vh } }

/* --- Birim agaci ---------------------------------------------------------
   Kademe girintisi SABIT PX degil, bosluk belirtecinin kati (CLAUDE.md §16).
   Kademe sayisi Birim.EnFazlaDerinlik ile sinirli; en derin satir
   4 x --sp-5 kadar icerde baslar.                                          */
.agac-girinti{ display:inline-flex; align-items:center; gap:var(--sp-2) }

/* Girinti OZNITELIK SECICISIYLE, satir ici stille degil: CSP
   unsafe-inline icermiyor (docs/02) ve style="" ozniteligi tarayicida
   uygulanmaz. Kademe sayisi Birim.EnFazlaDerinlik (5) ile sinirli oldugu
   icin bes kural yetiyor; alti bir kademe zaten kaydedilemez.            */
.agac-girinti[data-kademe="2"]{ padding-left:var(--sp-5) }
.agac-girinti[data-kademe="3"]{ padding-left:calc(var(--sp-5) * 2) }
.agac-girinti[data-kademe="4"]{ padding-left:calc(var(--sp-5) * 3) }
.agac-girinti[data-kademe="5"]{ padding-left:calc(var(--sp-5) * 4) }

/* Alt birim oldugunu gosteren kisa cizgi. Yalnizca gorsel ipucu —
   "alt birim" bilgisi Kademe girintisiyle ve tablonun kendi sutunuyla
   da anlatiliyor, renk/sekil tek basina bilgi tasimiyor.                   */
.agac-dal{
  flex:none; width:var(--sp-3); height:1px; background:var(--line-300);
}

/* Dar ekranda girinti yarilaniyor: tablo zaten yatay kayiyor (.tw), ama
   40 karakterlik bir birim adinin girintiyle birlikte ekrani terk etmesi
   gereksiz kaydirma demek.                                                 */
@media(max-width:767px){
  .agac-girinti[data-kademe="2"]{ padding-left:var(--sp-3) }
  .agac-girinti[data-kademe="3"]{ padding-left:calc(var(--sp-3) * 2) }
  .agac-girinti[data-kademe="4"]{ padding-left:calc(var(--sp-3) * 3) }
  .agac-girinti[data-kademe="5"]{ padding-left:calc(var(--sp-3) * 4) }
}

/* ------------------------------------------------------------------ duz-metin

   Gonderilen e-posta govdesi gibi DUZ METIN icerigi. `.zengin`den ayri bir
   bilesen olmak zorunda: `.zengin` sunucuda temizlenmis HTML'i basar, bu ise
   HTML'i HIC yorumlamaz. Ikisini birlestirmek, duz metni bir gun Html.Raw ile
   basmaya davet ederdi (CLAUDE.md 1.8).

   Satir sonlari anlam tasiyor (e-posta govdesi paragraflara boyle ayriliyor),
   bu yuzden pre-wrap; uzun bir baglanti kabi tasirmasin diye kelime kirilmasi
   acik.                                                                      */
.duz-metin{
  margin:0; white-space:pre-wrap; overflow-wrap:anywhere;
  font-family:var(--font-body); font-size:var(--fs-sm);
  line-height:var(--lh-body); color:var(--text-700);
  background:var(--paper-050); border:var(--border);
  border-radius:var(--radius); padding:var(--sp-3) var(--sp-4);
}

/* --- cols — iki sutunlu onay/detay duzeni ------------------------------- */
/* Duyurular, GenelKurullar ve Sayfalar onay ekranlari bu kabi kullaniyordu
   ama kural HIC yazilmamisti: sutunlar alt alta dusuyordu (olculdu
   22.09.2026). Kaynak: docs/prototipler/02-extranet.html.

   Mobil ONCE tek sutun; genis ekranda islem sutunu daha genis (1.6fr) cunku
   formlar orada. Esik prototipteki 1080px.                                  */
.cols{ display:grid; gap:var(--sp-5); grid-template-columns:1fr }

@media(min-width:1080px){
  .cols{ grid-template-columns:1.6fr 1fr }
}

/* --- MFA kurulumu ------------------------------------------------------- */
/* QR karesi. Genislik sinirli: 300px'i asan bir kare telefon kamerasi icin
   daha kolay olmuyor, yalnizca ekrani dolduruyor. Zemin BEYAZ olmak zorunda --
   koyu temada okuyucular kareyi secemiyor.                                   */
.qr-kutu{
  max-width:280px; margin:var(--sp-4) 0; padding:var(--sp-3);
  background:#FFFFFF; border:var(--border); border-radius:var(--radius);
}
.qr-kutu svg{ display:block; width:100%; height:auto }

/* Elle girilecek TOTP anahtari: dorderli gruplar, tek aralikli yazi tipi.
   Orantili bir yazi tipinde 0/O ve 1/I ayirt edilemiyor.                     */
.anahtar{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:var(--fs-sm); letter-spacing:.06em;
  background:var(--paper-100); padding:var(--sp-1) var(--sp-2);
  border-radius:var(--radius); user-select:all;
}

/* Kurtarma kodlari: iki sutun, numarali. Kagida yazilacagi icin secilebilir
   ve tek aralikli.                                                           */
.kurtarma-kodlari{
  display:grid; grid-template-columns:1fr; gap:var(--sp-2);
  margin:0; padding-left:var(--sp-5);
}
@media(min-width:520px){ .kurtarma-kodlari{ grid-template-columns:repeat(2,1fr) } }

.kurtarma-kodlari code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:var(--fs-body); letter-spacing:.08em; user-select:all;
}