/* ============================================================================
   KUALIKA — UYGULAMA KABUĞU (yapısal)
   Bu dosya Atlas'ın tasarım sistemi DEĞİLDİR ve onun yerine geçmez.
   assets/css/kualika.css'te karşılığı olmayan üç yapısal parça burada durur:
   üst şerit, mobil menü, alt bilgi — artı app/flash.php'nin bastığı .kl-flash.
   KURAL: burada hiçbir ham renk yoktur; her değer kualika.css tokenıdır.
   Atlas bunları tasarım sistemine aldığında bu dosya silinir.
   ========================================================================= */

/* --- Üst şerit ---------------------------------------------------------- */
.kl-serit{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--kl-kagit) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--kl-cizgi);
}
.kl-serit-ic{
  max-width:1240px; margin-inline:auto;
  display:flex; align-items:center; gap:var(--kl-s2);
  padding:var(--kl-s2) var(--kl-s3);
  min-width:0;                       /* flex çocukları gerçekten daralabilsin */
}
/* Marka daralabilir (taşmayı o emer), birincil eylem ASLA daralmaz. */
.kl-marka{display:flex;align-items:center;gap:9px;text-decoration:none;
  flex:0 1 auto;min-width:0;overflow:hidden;min-height:var(--kl-dokunma)}
.kl-marka .kl-d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-serit nav{display:none;align-items:center;gap:2px;margin-inline:auto}
.kl-serit-sag{display:flex;align-items:center;gap:var(--kl-s2);margin-left:auto;flex:none;min-width:0}
.kl-serit-genis{display:none;align-items:center;gap:var(--kl-s2)}
.kl-serit-eylem{flex:none;white-space:nowrap}
.kl-serit nav a[aria-current="page"]{background:var(--kl-yuzey-3);color:var(--kl-murekkep)}

/* Mobil menü — <details>, JS yok, klavyeyle çalışır */
.kl-mobil{border-top:1px solid var(--kl-cizgi)}
.kl-mobil > summary{list-style:none;padding:10px var(--kl-s3);min-height:var(--kl-dokunma);
  display:flex;align-items:center;gap:8px;font-size:var(--kl-f3);font-weight:600;
  color:var(--kl-murekkep-2);cursor:pointer}
.kl-mobil > summary::-webkit-details-marker{display:none}
.kl-mobil[open] > summary{color:var(--kl-murekkep)}
.kl-mobil nav{display:flex;flex-direction:column;padding:0 var(--kl-s3) var(--kl-s2)}
.kl-mobil nav a{justify-content:flex-start;min-height:var(--kl-dokunma)}
/* Şeritten inen parçalar (tema anahtarı) — panelin altında, ayrı bir bant */
.kl-mobil-ek{display:flex;align-items:center;flex-wrap:wrap;gap:var(--kl-s2);
  padding:var(--kl-s3);border-top:1px solid var(--kl-cizgi);margin:0 var(--kl-s3) var(--kl-s3);
  padding-inline:0}
.kl-mobil-ek .kl-seg{flex-wrap:wrap}
.kl-mobil-ek .kl-seg button{min-height:var(--kl-dokunma);padding-inline:16px}

@media (min-width:820px){
  .kl-serit nav{display:flex}
  .kl-serit-genis{display:flex}
  .kl-mobil{display:none}
  .kl-serit-ic{padding:var(--kl-s2) var(--kl-s5);gap:var(--kl-s3)}
}

/* --- Flash (app/flash.php çıktısı) -------------------------------------- */
.kl-flash-alan{max-width:1240px;margin:var(--kl-s3) auto 0;padding:0 var(--kl-s3);
  display:flex;flex-direction:column;gap:var(--kl-s2)}
.kl-flash{padding:12px 14px;border-radius:var(--kl-r1);font-size:var(--kl-f4);
  background:var(--kl-cini-yumus);color:var(--kl-cini);
  border:1px solid color-mix(in srgb,var(--kl-cini) 26%,transparent)}
.kl-flash--basari{background:var(--kl-turkuaz-y);color:var(--kl-turkuaz);
  border-color:color-mix(in srgb,var(--kl-turkuaz) 26%,transparent)}
.kl-flash--hata{background:var(--kl-gul-y);color:var(--kl-gul);
  border-color:color-mix(in srgb,var(--kl-gul) 26%,transparent)}
.kl-flash--uyari{background:var(--kl-amber-y);color:var(--kl-amber);
  border-color:color-mix(in srgb,var(--kl-amber) 26%,transparent)}

/* --- Alt bilgi ----------------------------------------------------------- */
.kl-alt{border-top:1px solid var(--kl-cizgi);margin-top:var(--kl-s7);background:var(--kl-yuzey-2)}
.kl-alt-ic{max-width:1240px;margin-inline:auto;padding:var(--kl-s6) var(--kl-s3);
  display:grid;gap:var(--kl-s4);grid-template-columns:1fr}
.kl-alt h2{font-size:var(--kl-f2);font-family:"Aptos Mono","Aptos",ui-monospace,SFMono-Regular,"Segoe UI Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kl-murekkep-3);margin-bottom:10px}
.kl-alt a{color:var(--kl-murekkep-2);text-decoration:none;font-size:var(--kl-f4);
  display:inline-flex;min-height:var(--kl-dokunma);align-items:center}
.kl-alt a:hover{color:var(--kl-murekkep)}
@media (min-width:720px){ .kl-alt-ic{grid-template-columns:1fr 1fr 1fr} }
@media (min-width:1040px){ .kl-alt-ic{grid-template-columns:2fr repeat(4,1fr)} }

/* --- Sihirbaz iki sütun (form | canlı önizleme) -------------------------- */
.kl-iki{display:grid;gap:var(--kl-s4);grid-template-columns:1fr;align-items:start}
@media (min-width:980px){
  .kl-iki{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
  .kl-yapiskan{position:sticky;top:80px}
}

/* --- Kahraman bölüm (landing) ------------------------------------------- */
.kl-kahraman{display:grid;gap:var(--kl-s5);grid-template-columns:1fr;align-items:center;
  padding-block:var(--kl-s6)}
@media (min-width:900px){ .kl-kahraman{grid-template-columns:1.1fr .9fr} }
.kl-fiyat{font-family:"Aptos Mono","Aptos",ui-monospace,SFMono-Regular,"Segoe UI Mono",monospace;font-size:var(--kl-f9);
  font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* --- Şablon galerisi: radio ile seçim (JS'siz) --------------------------- */
/* kualika.css seçili durumu [aria-pressed="true"] ile boyuyor; radio tabanlı
   galeride aynı görünümü :has() ile alırız — ikinci bir JS durum makinesi yok. */
.kl-galeri-o:has(input:checked){border-color:var(--kl-cini);background:var(--kl-cini-yumus)}
label.kl-galeri-o{cursor:pointer}
label.kl-galeri-o:has(input:focus-visible){outline:2.5px solid var(--kl-cini);outline-offset:2px}

/* --- Tür seçimi kartları (sihirbaz 1. adım) ------------------------------ */
.kl-tur-o{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:var(--kl-s4) var(--kl-s3);border-radius:var(--kl-r2);cursor:pointer;
  border:1.5px solid var(--kl-cizgi);background:var(--kl-yuzey);
  min-height:110px;justify-content:center;transition:var(--kl-gecis)}
.kl-tur-o:hover{border-color:var(--kl-cizgi-kuv);box-shadow:var(--kl-g2)}
.kl-tur-o:has(input:checked){border-color:var(--kl-cini);background:var(--kl-cini-yumus);
  color:var(--kl-cini)}
.kl-tur-o:has(input:focus-visible){outline:2.5px solid var(--kl-cini);outline-offset:2px}
.kl-tur-izgara{display:grid;gap:var(--kl-s2);grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}