/* ============================================================================
   KUALIKA — Tasarım Sistemi  ·  "Mühür & Sedef"
   Referans nesne bir uygulama değil, fiziksel Türk davetiyesi:
   ağır krem karton, tel kırma, çini karo, varak, mühür.
   Ürün kabuğu sessizdir; tek gösterişli an davetiyenin kendisidir.

   İçindekiler
     1  Tokenlar (açık)            7  Form
     2  Tokenlar (koyu)            8  Rozet · durum
     3  Sıfırlama · taban          9  Tablo · liste
     4  Tipografi rolleri         10  Sihirbaz · adımlar
     5  İmza öğeleri              11  Yardımcılar
     6  Buton                     12  Hareket kısıtı
   ========================================================================= */

/* ---------- 1 · TOKENLAR (AÇIK TEMA — VARSAYILAN) ---------------------- */
:root{
  /* Yüzeyler */
  --kl-kagit:#F3F0F4;        /* uygulama zemini — soğuk-lila kırık beyaz */
  --kl-yuzey:#FFFFFF;
  --kl-yuzey-2:#FAF8FB;
  --kl-yuzey-3:#EFEBF1;
  --kl-cizgi:#E2DCE6;
  --kl-cizgi-kuv:#CFC7D6;

  /* Mürekkep */
  --kl-murekkep:#1E1A2E;
  --kl-murekkep-2:#55506A;   /* beyaz üzerinde 7.4:1 */
  --kl-murekkep-3:#6A6480;   /* AA 4.5:1 — beyaz 5.6:1, kagit 4.9:1, yuzey-3 4.7:1 (QA D-3) */

  /* Marka */
  --kl-cini:#2A4E9B;         /* birincil eylem — İznik kobaltı */
  --kl-cini-koyu:#1E3A78;
  --kl-cini-yumus:#E7EDF9;
  --kl-turkuaz:#2E8F86;      --kl-turkuaz-y:#E3F2F0;
  --kl-gul:#C25B6E;          --kl-gul-y:#FAE9EC;
  --kl-amber:#A8752A;        --kl-amber-y:#FAF0DF;
  --kl-tel:#B98A3E;          --kl-tel-parlak:#E8CB90;
  --kl-varak:linear-gradient(100deg,#8C6423 0%,#D9B269 18%,#F6E7C0 32%,#C79A4C 46%,#8C6423 62%,#E3C480 80%,#A67C33 100%);

  /* Ritim — 4·8·12·20·32·52·84 (Fibonacci'ye yakın; eşit aralık hissi kırılsın) */
  --kl-s1:4px;  --kl-s2:8px;  --kl-s3:12px; --kl-s4:20px;
  --kl-s5:32px; --kl-s6:52px; --kl-s7:84px;

  /* Tipografi ölçeği */
  --kl-f1:0.68rem; --kl-f2:0.76rem; --kl-f3:0.82rem; --kl-f4:0.88rem;
  --kl-f5:0.94rem; --kl-f6:1rem;    --kl-f7:1.25rem; --kl-f8:1.7rem;
  --kl-f9:2.1rem;  --kl-f10:3.4rem;

  /* Köşe — arayüz yumuşak, davetiye kağıdı keskin */
  --kl-r1:8px; --kl-r2:14px; --kl-r3:22px; --kl-rp:999px; --kl-r-kagit:3px;

  /* Gölge — mürekkep renkli, asla siyah; her kademe 1px renk halkası taşır */
  --kl-g1:0 1px 2px rgba(30,26,46,.06), 0 0 0 1px rgba(30,26,46,.05);
  --kl-g2:0 2px 4px rgba(30,26,46,.05), 0 8px 20px -8px rgba(30,26,46,.14), 0 0 0 1px rgba(30,26,46,.05);
  --kl-g3:0 18px 48px -18px rgba(30,26,46,.34), 0 4px 12px rgba(30,26,46,.08);
  --kl-g-kart:0 30px 70px -30px rgba(30,26,46,.45), 0 2px 8px rgba(30,26,46,.10);

  /* Hareket — üç zamanlama, başka yok */
  --kl-gecis:180ms cubic-bezier(.2,.7,.3,1);
  --kl-gecis-y:420ms cubic-bezier(.16,.84,.32,1);
  --kl-gecis-k:700ms cubic-bezier(.16,.84,.32,1);

  --kl-dokunma:44px;         /* asgari dokunma hedefi */
}

/* ---------- 2 · TOKENLAR (KOYU TEMA) ----------------------------------- */
/* Sistem tercihi koyu ve kullanıcı açık temayı zorlamadıysa */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --kl-kagit:#131120; --kl-yuzey:#1C192B; --kl-yuzey-2:#232032; --kl-yuzey-3:#2B2740;
    --kl-cizgi:#322D46; --kl-cizgi-kuv:#413A58;
    --kl-murekkep:#F1EEF7; --kl-murekkep-2:#B0A9C4; --kl-murekkep-3:#9992B3;
    --kl-cini:#7C9DE8; --kl-cini-koyu:#5E82D6; --kl-cini-yumus:#222C4A;
    --kl-turkuaz:#5FC3B7; --kl-turkuaz-y:#16332F;
    --kl-gul:#E58C9C;     --kl-gul-y:#3A222A;
    --kl-amber:#D9A75A;   --kl-amber-y:#332616;
    --kl-tel:#D8B26C;     --kl-tel-parlak:#F4E2B6;
    --kl-g1:0 1px 2px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.06);
    --kl-g2:0 2px 4px rgba(0,0,0,.30), 0 10px 24px -10px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.06);
    --kl-g3:0 20px 50px -18px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.07);
    --kl-g-kart:0 34px 74px -30px rgba(0,0,0,.80), 0 0 0 1px rgba(255,255,255,.08);
  }
}
/* Kullanıcı açıkça koyu temayı seçtiyse — sistem ne derse desin */
:root[data-theme="dark"]{
  --kl-kagit:#131120; --kl-yuzey:#1C192B; --kl-yuzey-2:#232032; --kl-yuzey-3:#2B2740;
  --kl-cizgi:#322D46; --kl-cizgi-kuv:#413A58;
  --kl-murekkep:#F1EEF7; --kl-murekkep-2:#B0A9C4; --kl-murekkep-3:#9992B3;
  --kl-cini:#7C9DE8; --kl-cini-koyu:#5E82D6; --kl-cini-yumus:#222C4A;
  --kl-turkuaz:#5FC3B7; --kl-turkuaz-y:#16332F;
  --kl-gul:#E58C9C;     --kl-gul-y:#3A222A;
  --kl-amber:#D9A75A;   --kl-amber-y:#332616;
  --kl-tel:#D8B26C;     --kl-tel-parlak:#F4E2B6;
  --kl-g1:0 1px 2px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.06);
  --kl-g2:0 2px 4px rgba(0,0,0,.30), 0 10px 24px -10px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.06);
  --kl-g3:0 20px 50px -18px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.07);
  --kl-g-kart:0 34px 74px -30px rgba(0,0,0,.80), 0 0 0 1px rgba(255,255,255,.08);
}

/* ---------- 3 · SIFIRLAMA · TABAN -------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--kl-kagit); color:var(--kl-murekkep);
  font-family:"Aptos","Aptos Display",system-ui,-apple-system,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.55; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul.kl-liste{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--kl-cini);outline-offset:2px;border-radius:4px}
::selection{background:var(--kl-tel-parlak);color:#241A08}
.kl-gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kl-atla{position:absolute;left:-9999px;top:0;z-index:200;background:var(--kl-yuzey);
  padding:12px 18px;border-radius:var(--kl-r1);box-shadow:var(--kl-g2)}
.kl-atla:focus{left:12px;top:12px}

/* ---------- 4 · TİPOGRAFİ ROLLERİ -------------------------------------- */
/* Tek aile: Aptos. Hiyerarşi aileden değil AĞIRLIK ve ÖLÇEKTEN geliyor:
   gövde 400, vurgu/etiket 600, başlık ve davetiye adı 700. */
.kl-d{
  font-family:"Aptos","Aptos Display",system-ui,-apple-system,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif; 
  
  letter-spacing:-.022em; line-height:1.1; font-weight:700;
}
.kl-m{
  font-family:"Aptos Mono","Aptos",ui-monospace,SFMono-Regular,"Segoe UI Mono",monospace;
  font-size:var(--kl-f1); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.kl-gz{color:var(--kl-murekkep-2)}
.kl-gz3{color:var(--kl-murekkep-3)}
.kl-baslik{font-size:var(--kl-f8);font-weight:700;letter-spacing:-.03em;line-height:1.12}
.kl-baslik-2{font-size:var(--kl-f7);font-weight:700;letter-spacing:-.02em}
.kl-metin{font-size:var(--kl-f5);color:var(--kl-murekkep-2)}
.kl-kucuk{font-size:var(--kl-f3);color:var(--kl-murekkep-2)}

/* ---------- 5 · İMZA ÖĞELERİ ------------------------------------------- */
/* Tel kırma çizgisi — bölüm ayırıcısı. Süs değil: "burada tören başlıyor" işareti. */
.kl-tel-cizgi{display:flex;align-items:center;gap:10px;color:var(--kl-tel);width:100%}
.kl-tel-cizgi::before,.kl-tel-cizgi::after{
  content:"";height:1px;flex:1;opacity:.55;
  background:linear-gradient(90deg,transparent,currentColor 22%,currentColor 78%,transparent);
}
.kl-tel-cizgi i{width:5px;height:5px;background:currentColor;transform:rotate(45deg);flex:none}

/* Varak parlaması — 7 saniyede bir geçen ışık. Yalnız üç yerde kullanılır. */
.kl-varak{
  background:var(--kl-varak); background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:kl-varak-kay 7s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes kl-varak-kay{0%,72%{background-position:0% 0}100%{background-position:100% 0}}

/* Mühür — marka işareti */
.kl-muhur{
  width:28px;height:28px;flex:none;border-radius:50%;
  background:var(--kl-varak);background-size:200% 100%;
  display:grid;place-items:center;color:#3A2708;
  font-family:"Aptos","Aptos Display",system-ui,-apple-system,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), var(--kl-g1);
}

/* ---------- 6 · BUTON --------------------------------------------------- */
.kl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 20px;border-radius:var(--kl-rp);
  font-weight:600;font-size:var(--kl-f5);letter-spacing:-.01em;
  border:1px solid transparent;text-decoration:none;
  transition:transform var(--kl-gecis),box-shadow var(--kl-gecis),background var(--kl-gecis);
}
.kl-btn:active{transform:translateY(1px) scale(.99)}
.kl-btn[disabled],.kl-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.kl-btn .kl-ikon{width:18px;height:18px;flex:none}

.kl-btn-1{background:var(--kl-cini);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--kl-g2)}
.kl-btn-1:hover{background:var(--kl-cini-koyu)}
:root[data-theme="dark"] .kl-btn-1{color:#0F1526}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .kl-btn-1{color:#0F1526} }

.kl-btn-2{background:var(--kl-yuzey);border-color:var(--kl-cizgi-kuv);color:var(--kl-murekkep);box-shadow:var(--kl-g1)}
.kl-btn-2:hover{background:var(--kl-yuzey-2)}
.kl-btn-3{background:transparent;color:var(--kl-murekkep-2);min-height:40px;padding:0 12px}
.kl-btn-3:hover{background:var(--kl-yuzey-3);color:var(--kl-murekkep)}
.kl-btn-tehlike{background:var(--kl-gul-y);color:var(--kl-gul);border-color:color-mix(in srgb,var(--kl-gul) 30%,transparent)}
.kl-btn-tehlike:hover{background:color-mix(in srgb,var(--kl-gul) 16%,var(--kl-gul-y))}

/* Mühür butonu — imza. Basınca gerçekten içeri gömülür: mektubu mühürlemek. */
.kl-btn-muhur{
  background:var(--kl-varak);background-size:200% 100%;color:#2E1F06;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--kl-g2);
  font-weight:700;
}
.kl-btn-muhur:active{
  transform:translateY(2px) scale(.985);
  box-shadow:inset 0 3px 8px rgba(60,40,8,.45);
}
.kl-btn-blok{width:100%}
.kl-btn-k{min-height:38px;padding:0 14px;font-size:var(--kl-f3)}
/* İkon butonu — 40px görünür alan, 44px dokunma alanı */
.kl-btn-ikon{
  width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;position:relative;
  border:1px solid var(--kl-cizgi);background:var(--kl-yuzey);color:var(--kl-murekkep-2);
}
.kl-btn-ikon::after{content:"";position:absolute;inset:-2px}
.kl-btn-ikon:hover{background:var(--kl-yuzey-3);color:var(--kl-murekkep)}

/* Segment — tek seçimli grup */
.kl-seg{display:inline-flex;background:var(--kl-yuzey-3);border:1px solid var(--kl-cizgi);
  border-radius:var(--kl-rp);padding:3px;gap:2px}
.kl-seg button{padding:6px 13px;border-radius:var(--kl-rp);font-size:var(--kl-f2);
  font-weight:600;color:var(--kl-murekkep-2);min-height:34px;transition:var(--kl-gecis)}
.kl-seg button[aria-pressed="true"]{background:var(--kl-yuzey);color:var(--kl-murekkep);box-shadow:var(--kl-g1)}

/* ---------- 7 · KART · PANEL ------------------------------------------- */
.kl-kart{background:var(--kl-yuzey);border:1px solid var(--kl-cizgi);
  border-radius:var(--kl-r2);box-shadow:var(--kl-g1)}
.kl-kart-yuk{box-shadow:var(--kl-g2)}
.kl-pad{padding:var(--kl-s4)}
.kl-kart-bas{display:flex;align-items:center;justify-content:space-between;gap:var(--kl-s3);
  padding:var(--kl-s4);border-bottom:1px solid var(--kl-cizgi)}
.kl-bos{ /* boş durum — davet eder, özür dilemez */
  text-align:center;padding:var(--kl-s6) var(--kl-s4);
  display:flex;flex-direction:column;align-items:center;gap:var(--kl-s3);
}
.kl-bos .kl-ikon{width:32px;height:32px;color:var(--kl-murekkep-3)}

/* ---------- 8 · FORM ---------------------------------------------------- */
.kl-alan{margin-bottom:var(--kl-s3)}
.kl-et{display:block;font-size:var(--kl-f3);font-weight:600;color:var(--kl-murekkep-2);margin-bottom:6px}
.kl-gir{
  width:100%;min-height:46px;padding:11px 14px;background:var(--kl-yuzey-2);
  border:1px solid var(--kl-cizgi-kuv);border-radius:var(--kl-r1);
  font-size:var(--kl-f5);transition:var(--kl-gecis);
}
.kl-gir:focus{outline:none;border-color:var(--kl-cini);background-color:var(--kl-yuzey);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--kl-cini) 18%,transparent)}
.kl-gir::placeholder{color:var(--kl-murekkep-3)}
textarea.kl-gir{min-height:86px;resize:vertical;line-height:1.5}
select.kl-gir{appearance:none;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--kl-murekkep-2) 50%),
                   linear-gradient(135deg,var(--kl-murekkep-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.kl-ipucu{font-size:var(--kl-f2);color:var(--kl-murekkep-3);margin-top:5px}
.kl-hata{font-size:var(--kl-f2);color:var(--kl-gul);margin-top:5px;display:flex;align-items:center;gap:6px}
.kl-gir[aria-invalid="true"]{border-color:var(--kl-gul);background-color:var(--kl-gul-y)}
.kl-secim{display:flex;align-items:flex-start;gap:10px;min-height:var(--kl-dokunma);
  padding:8px 0;cursor:pointer}
.kl-secim input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--kl-cini);flex:none}

/* Dosya yükleme kutusu — ebat yazısı burada, ekranda açıkça durur */
.kl-yukle{
  border:1.5px dashed var(--kl-cizgi-kuv);border-radius:var(--kl-r2);background:var(--kl-yuzey-2);
  padding:var(--kl-s4);text-align:center;transition:var(--kl-gecis);
}
.kl-yukle[data-uzerinde="1"]{border-color:var(--kl-cini);background:var(--kl-cini-yumus)}
.kl-yukle .kl-ebat{font-family:"Aptos Mono","Aptos",ui-monospace,SFMono-Regular,"Segoe UI Mono",monospace;font-size:var(--kl-f2);
  color:var(--kl-murekkep-2);letter-spacing:.04em}

/* ---------- 9 · ROZET · DURUM ------------------------------------------ */
/* Durum yalnızca renkle anlatılmaz: her rozet metin + nokta taşır. */
.kl-rozet{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--kl-rp);
  font-size:var(--kl-f2);font-weight:600;background:var(--kl-yuzey-3);color:var(--kl-murekkep-2)}
.kl-rozet .kl-nokta{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.kl-rozet-ok{background:var(--kl-turkuaz-y);color:var(--kl-turkuaz)}
.kl-rozet-hayir{background:var(--kl-gul-y);color:var(--kl-gul)}
.kl-rozet-belki{background:var(--kl-amber-y);color:var(--kl-amber)}
.kl-rozet-cini{background:var(--kl-cini-yumus);color:var(--kl-cini)}

.kl-uyari{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--kl-r1);
  font-size:var(--kl-f4);background:var(--kl-amber-y);color:var(--kl-amber);
  border:1px solid color-mix(in srgb,var(--kl-amber) 26%,transparent)}
.kl-uyari .kl-ikon{width:18px;height:18px;flex:none;margin-top:2px}
.kl-uyari-hata{background:var(--kl-gul-y);color:var(--kl-gul);border-color:color-mix(in srgb,var(--kl-gul) 26%,transparent)}
.kl-uyari-ok{background:var(--kl-turkuaz-y);color:var(--kl-turkuaz);border-color:color-mix(in srgb,var(--kl-turkuaz) 26%,transparent)}

/* ---------- 10 · TABLO · LİSTE ----------------------------------------- */
.kl-tablo-sar{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--kl-r2)}
.kl-tablo{width:100%;border-collapse:collapse;font-size:var(--kl-f4);min-width:520px}
.kl-tablo th{
  text-align:left;padding:10px 14px;background:var(--kl-yuzey-2);
  font-family:"Aptos Mono","Aptos",ui-monospace,SFMono-Regular,"Segoe UI Mono",monospace;font-size:var(--kl-f1);
  letter-spacing:.12em;text-transform:uppercase;color:var(--kl-murekkep-2);font-weight:600;
  border-bottom:1px solid var(--kl-cizgi);white-space:nowrap;
}
.kl-tablo td{padding:13px 14px;border-bottom:1px solid var(--kl-cizgi);vertical-align:middle}
.kl-tablo tbody tr:hover{background:var(--kl-yuzey-2)}
.kl-tablo .kl-sayi{font-family:"Aptos Mono","Aptos",ui-monospace,SFMono-Regular,"Segoe UI Mono",monospace;text-align:right;
  font-variant-numeric:tabular-nums}
.kl-satir{display:flex;align-items:center;gap:10px}
.kl-dagit{justify-content:space-between}

/* Sihirbaz alt barı — "Devam et" birincil kalır, "Taslak olarak kaydet" ikincil.
   375px'te iki düğme yan yana taşardı; dar ekranda alt alta ve tam genişlik. */
.kl-sihirbaz-alt{gap:var(--kl-s3)}
.kl-sihirbaz-eylem{justify-content:flex-end}
@media (max-width:430px){
  .kl-sihirbaz-alt{flex-direction:column;align-items:stretch}
  .kl-sihirbaz-eylem{flex-direction:column-reverse;align-items:stretch;width:100%}
  .kl-sihirbaz-alt>.kl-btn,.kl-sihirbaz-eylem>.kl-btn{width:100%}
}

/* ---------- 11 · SİHİRBAZ · ADIMLAR ------------------------------------ */
/* 01/02/03 numaralandırması yalnızca gerçekten sıra olan tek yerde: bu sihirbaz. */
.kl-adimlar{display:flex;gap:var(--kl-s2);align-items:center;flex-wrap:wrap}
.kl-adim{display:flex;align-items:center;gap:8px;font-size:var(--kl-f3);color:var(--kl-murekkep-3)}
.kl-adim-no{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:"Aptos Mono","Aptos",ui-monospace,SFMono-Regular,"Segoe UI Mono",monospace;font-size:var(--kl-f1);font-weight:600;
  border:1px solid var(--kl-cizgi-kuv);background:var(--kl-yuzey);
}
.kl-adim[aria-current="step"]{color:var(--kl-murekkep);font-weight:600}
.kl-adim[aria-current="step"] .kl-adim-no{background:var(--kl-cini);border-color:var(--kl-cini);color:#fff}
.kl-adim[data-durum="bitti"] .kl-adim-no{background:var(--kl-turkuaz-y);border-color:var(--kl-turkuaz);color:var(--kl-turkuaz)}

.kl-panel{display:none}
.kl-panel[data-aktif="1"]{display:block;animation:kl-gir var(--kl-gecis-y) both}
@keyframes kl-gir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Canlı önizleme rozeti — nabız */
.kl-canli{display:inline-flex;align-items:center;gap:7px;font-size:var(--kl-f2);
  font-weight:600;color:var(--kl-turkuaz)}
.kl-canli::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:kl-nabiz 2s ease-in-out infinite}
@keyframes kl-nabiz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.kl-onizleme-cer{width:100%;border:0;background:transparent;display:block}

/* ---------- 12 · İKON · YARDIMCILAR ------------------------------------ */
.kl-ikon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kl-ikon-24{width:24px;height:24px}
.kl-ikon-32{width:32px;height:32px}

.kl-yigin{display:flex;flex-direction:column}
.kl-g1{gap:var(--kl-s1)} .kl-g2{gap:var(--kl-s2)} .kl-g3{gap:var(--kl-s3)}
.kl-g4{gap:var(--kl-s4)} .kl-g5{gap:var(--kl-s5)} .kl-g6{gap:var(--kl-s6)}
.kl-mt2{margin-top:var(--kl-s2)} .kl-mt3{margin-top:var(--kl-s3)}
.kl-mt4{margin-top:var(--kl-s4)} .kl-mt5{margin-top:var(--kl-s5)} .kl-mt6{margin-top:var(--kl-s6)}
.kl-orta{text-align:center}
.kl-sar{flex-wrap:wrap}

/* ---------- 13 · KAPSAYICI IZGARALARI ---------------------------------- */
/* @media değil @container: aynı işaretleme panelde, önizlemede ve mobilde
   yeniden akar. Ayrı mobil şablon yok. */
.kl-sahne{container-type:inline-size;container-name:kl-sahne;width:100%;
  max-width:1240px;margin-inline:auto;padding:var(--kl-s4) var(--kl-s3) var(--kl-s7)}
.kl-izgara{display:grid;gap:var(--kl-s3)}
.kl-izgara-kart{display:grid;gap:var(--kl-s4);grid-template-columns:1fr}

@container kl-sahne (min-width:560px){
  .kl-izgara-kart{grid-template-columns:repeat(2,1fr)}
}
@container kl-sahne (min-width:760px){
  .kl-izgara{grid-template-columns:1fr 1fr}
  .kl-sahne{padding:var(--kl-s5) var(--kl-s6) var(--kl-s7)}
  .kl-baslik{font-size:var(--kl-f9)}
}
@container kl-sahne (min-width:880px){
  .kl-izgara-kart{grid-template-columns:repeat(3,1fr)}
  .kl-bolum{padding:var(--kl-s7) var(--kl-s6)}
}
@container kl-sahne (min-width:1000px){
  .kl-izgara-kart{grid-template-columns:repeat(4,1fr)}
}

/* Şablon galerisi — kart kendi kapsayıcısı olduğu için tek işaretleme her ölçekte çalışır */
.kl-galeri{display:grid;gap:var(--kl-s3);grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.kl-galeri-o{display:flex;flex-direction:column;gap:8px;text-align:left;border-radius:var(--kl-r1);
  padding:6px;border:1.5px solid transparent;transition:var(--kl-gecis)}
.kl-galeri-o:hover > *:first-child{transform:translateY(-4px);box-shadow:var(--kl-g3)}
/* Seçili işareti GERÇEK radyo durumundan gelir. Daha önce yalnızca sunucunun
   bastığı aria-pressed'e bağlıydı: tıklayınca radyo değişiyor ama işaret eski
   kartta kalıyordu — kullanıcı "seçimi değiştiremiyorum" sanıyordu (2026-08-28). */
.kl-galeri-o:has(input:checked),
.kl-galeri-o.kl-secili{border-color:var(--kl-cini);background:var(--kl-cini-yumus)}
/* Klavyeyle gezerken hangi kartta olduğun görünsün (radyo görsel olarak gizli) */
.kl-galeri-o:has(input:focus-visible){outline:2px solid var(--kl-cini);outline-offset:2px}
.kl-galeri-ad{font-size:var(--kl-f3);font-weight:600;display:flex;justify-content:space-between;gap:8px}
.kl-galeri-ad small{color:var(--kl-murekkep-3);font-weight:500}
.kl-galeri-o > *:first-child{transition:transform var(--kl-gecis-y),box-shadow var(--kl-gecis-y)}

/* ---------- 14 · HAREKET KISITI ---------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .kl-varak{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--kl-tel)}
}

/* ---------- 14b · SMS KOTASI ------------------------------------------- */
/* SMS hakkı DAVETİYEYE özeldir. Bu blok bilerek etkinlik paketi kartlarına
   (.kl-izgara-kart > .kl-kart) benzemez: orada "paket seç" kararı verilir,
   burada bir davetiyenin hakkı tamamlanır. Aynı görünmeleri kullanıcıyı
   yanıltırdı. Yeni renk YOK — mevcut jetonlar kullanılır. */
.kl-sms-cubuk{height:8px;border-radius:var(--kl-rp);background:var(--kl-yuzey-3);
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--kl-cizgi)}
.kl-sms-cubuk i{display:block;height:100%;background:var(--kl-cini);
  border-radius:var(--kl-rp);transition:width .3s ease}

.kl-sms-paketler{display:flex;flex-direction:column;gap:var(--kl-s2)}
.kl-sms-paket{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--kl-s2);padding:10px 12px;border-radius:var(--kl-r1);
  border:1px solid var(--kl-cizgi);background:var(--kl-yuzey-2)}
.kl-sms-paket-bilgi{display:flex;flex-direction:column;min-width:0}
.kl-sms-paket-bilgi b{font-size:var(--kl-f6)}
.kl-sms-paket-bilgi small{font-size:var(--kl-f2)}
.kl-sms-paket form{margin:0;flex:none}
/* 375px: fiyat düğmesi tam genişliğe düşer, satır asla taşmaz. */
@media (max-width:400px){
  .kl-sms-paket{flex-direction:column;align-items:stretch}
  .kl-sms-paket form,.kl-sms-paket .kl-btn{width:100%}
}

/* Izgara hücresi taşmayı EMER.
   CSS ızgarasında bir track'in varsayılan asgari genişliği `auto`'dur; içindeki
   .kl-tablo (min-width:520px) o track'i 520px'e ZORLAR ve dar ekranda BÜTÜN
   SAYFA yatay kayar — .kl-tablo-sar'ın kendi overflow'u devreye bile giremez.
   min-width:0 hücrenin küçülmesine izin verir; kaydırma tabloyu saran kutuda kalır. */
.kl-iki > *{min-width:0}

/* ---------- 15 · DOKUNMATİK & DAR EKRAN DÜZELTMELERİ -------------------- */
/* En sonda durur: aşağıdaki kurallar bileşen ölçülerini bilerek ezer. */
/* WCAG 2.5.5: dokunmatik girdide her etkileşimli hedef en az --kl-dokunma (44px).
   Fare ile kullanılan geniş ekranda kompakt ölçüler korunur. (QA 3. tur D-2) */
@media (max-width:819px), (pointer:coarse){
  .kl-btn,.kl-btn-3,.kl-btn-k,.kl-btn-ikon{min-height:var(--kl-dokunma)}
  .kl-btn-ikon{width:var(--kl-dokunma);height:var(--kl-dokunma)}
  .kl-seg button{min-height:var(--kl-dokunma)}
}
/* iOS Safari 16px altındaki alana odaklanınca sayfayı zorla yakınlaştırır ve
   kullanıcı geri çıkamaz. Dar ekranda taban 16px. (QA 3. tur D-5) */
@media (max-width:819px){
  .kl-gir,select.kl-gir,textarea.kl-gir{font-size:16px}
}

/* ---------- 16 · ÖDEME ÖZETİ · HESAP PUSULASI (sihirbaz 6. adım) --------- */
/* Bu ekran bir fiyat ızgarası DEĞİL, bir hesap pusulasıdır: karar zaten
   verildi, burada tutar okunur ve ödenir. Bu yüzden paket kartlarına
   (.kl-izgara-kart > .kl-kart) bilerek benzemez — satır satır, sağa hizalı
   rakam, TOPLAM'dan önce tel kırma çizgisi. Yeni renk YOK; mevcut jetonlar. */

/* [hidden] gizleyemiyordu: UA'nın [hidden]{display:none} kuralı, .kl-btn'in
   display:inline-flex'inden DAHA ZAYIF. JS "Toplamı güncelle" düğmesini
   hidden yapıyor ama düğme ekranda kalıyordu (QA, 375px). */
.kl-odeme [hidden]{display:none}

/* Rakam sütunu — pusulada ve seçim satırlarında aynı ritim. */
.kl-tutar{font-family:"Aptos Mono","Aptos",ui-monospace,SFMono-Regular,"Segoe UI Mono",monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.kl-tutar-b{font-weight:600;font-size:var(--kl-f5)}

/* Seçim satırı — .kl-sms-paket ile birlikte kullanılır.
   İşaret GERÇEK radyo durumundan gelir (:has); select'li satırlarda sunucu ve
   JS aynı [data-secili] niteliğini yazar. Kenarlık kalınlığı sabittir:
   seçilince 1px→1.5px büyüseydi satır yerinden oynardı. */
.kl-secim-satir{border-width:1.5px;cursor:pointer;transition:border-color var(--kl-gecis),background var(--kl-gecis)}
.kl-secim-satir:hover{border-color:var(--kl-cizgi-kuv)}
.kl-secim-satir:has(input:checked),
.kl-secim-satir[data-secili="1"]{border-color:var(--kl-cini);background:var(--kl-cini-yumus)}
.kl-secim-satir:has(input:focus-visible){outline:2.5px solid var(--kl-cini);outline-offset:2px}

/* Başlıktaki ikincil not başlıkla aynı ağırlıkta bağırmasın. */
.kl-baslik-not{font-size:var(--kl-f4);font-weight:600;letter-spacing:0}

/* Adet seçici — dar ama dokunma hedefi tam. Etiket ekran okuyucu için görünür. */
.kl-adet{display:flex;align-items:center;gap:8px;flex:none}
.kl-adet-et{margin:0;white-space:nowrap}
.kl-adet-sec{width:84px;min-width:84px}

/* .kl-gir:focus'un `background:` KISAYOLU, select'in ok resmini de sıfırlıyor:
   adet seçicisine odaklanınca ok kayboluyordu (QA). Kısayolu bozmadan yalnızca
   resmi geri koyuyoruz. Not: kök neden .kl-gir:focus — orada `background-color`
   kullanılsaydı tüm select'lerde çözülürdü (Umut'a not). */
.kl-odeme select.kl-gir:focus{
  background-image:linear-gradient(45deg,transparent 50%,var(--kl-murekkep-2) 50%),
                   linear-gradient(135deg,var(--kl-murekkep-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

/* Açılır bölüm ("Paketi değiştir") — kapalı gelir; karar yeniden başlatılmaz. */
.kl-acilir-bas{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  min-height:var(--kl-dokunma);font-size:var(--kl-f4);font-weight:600;color:var(--kl-cini);
  list-style:none;border-radius:var(--kl-r1)}
.kl-acilir-bas::-webkit-details-marker{display:none}
.kl-acilir-bas:focus-visible{outline:2.5px solid var(--kl-cini);outline-offset:2px}
.kl-acilir-ok{width:16px;height:16px;transition:transform var(--kl-gecis)}
.kl-acilir[open] .kl-acilir-ok{transform:rotate(180deg)}

/* Pusula kalemleri */
.kl-pusula-kalemler{margin:0;display:flex;flex-direction:column;gap:var(--kl-s2)}
.kl-pusula-kalem{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--kl-s3);font-size:var(--kl-f4)}
.kl-pusula-kalem dt{color:var(--kl-murekkep-2);min-width:0}
.kl-pusula-kalem dd{margin:0;flex:none}
.kl-pusula-rakam{font-family:"Aptos Mono","Aptos",ui-monospace,SFMono-Regular,"Segoe UI Mono",monospace;
  font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.03em;font-size:var(--kl-f8)}
.kl-pusula-toplam{align-items:baseline}

/* Dar ekranda toplam + ana eylem alt barda yapışık kalır; geniş ekranda
   pusula zaten yapışkan sütunda durduğu için bar kapanır. Aynı eylemin iki
   kopyası aynı anda ASLA görünmez — erişilebilirlik ağacında da tek kalır. */
.kl-pusula-bar{position:sticky;bottom:0;z-index:20;margin-top:var(--kl-s4);
  background:var(--kl-yuzey);border-top:1px solid var(--kl-cizgi);
  box-shadow:0 -8px 24px -12px rgba(30,26,46,.28)}
.kl-pusula-bar-ic{display:flex;align-items:center;justify-content:space-between;
  gap:var(--kl-s3);padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.kl-pusula-bar .kl-pusula-rakam{font-size:var(--kl-f7)}
.kl-pusula-bar .kl-btn{flex:none}
@media (min-width:980px){
  .kl-pusula-bar{display:none}
}
@media (max-width:979px){
  .kl-pusula-eylem{display:none}
}

/* 375px: seçim satırı alt alta akar (.kl-sms-paket kuralı), rakam sola döner. */
@media (max-width:400px){
  .kl-secim-satir .kl-tutar{text-align:left}
  .kl-adet{justify-content:space-between}
  .kl-adet-sec{flex:none}
}

/* ---------- 15 · ETKİNLİK ŞERİDİ · TOPLU EKLE · SEPET ------------------- */
/* Dört sayfanın paylaştığı bölüm şeridi (views/partials/etkinlik-nav.php).
   Kendi kutusu yok: kl-btn-3 zaten sessiz. Tek işi 375px'te taşmamak. */
.kl-etkinlik-nav{flex-wrap:wrap;gap:2px}
.kl-etkinlik-nav .kl-btn{padding:0 10px}
.kl-nav-aktif{color:var(--kl-murekkep);background:var(--kl-yuzey-3);cursor:default;
  font-weight:600;pointer-events:none}
/* Başlık satırının sağ kolonu: şerit + eylemler. Dar ekranda alt alta akar
   ve sola hizalanır — sağa yaslı bir yığın satırı kırardı. */
.kl-sayfa-arac{justify-content:flex-end}
@media (max-width:720px){
  .kl-sayfa-arac{justify-content:flex-start;width:100%}
}
/* Sepet/ödeme formları görünmez; düğmeler onlara `form=` ile bağlanır. */
.kl-gizli-form{display:none}
/* .kl-btn'in display:inline-flex'i tarayıcının [hidden] kuralını eziyordu:
   PHP ya da JS bir düğmeyi gizlediğinde gerçekten gizlensin. */
.kl-btn[hidden]{display:none}

/* ── SEPET DÜĞMESİ (başlık satırı) ────────────────────────────────────── */
.kl-sepet-dugme{position:relative;padding:0 12px}
.kl-sepet-rozet{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
  border-radius:var(--kl-rp);background:var(--kl-cini);color:#fff;
  font-size:var(--kl-f1);font-weight:700;line-height:1;
  box-shadow:0 0 0 2px var(--kl-kagit)}
:root[data-theme="dark"] .kl-sepet-rozet{color:#0F1526}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .kl-sepet-rozet{color:#0F1526} }
.kl-sepet-rozet[hidden]{display:none}

/* ── SEPET KUTUSU ─────────────────────────────────────────────────────────
   JS YOKKEN sayfanın altında sıradan bir kart olarak durur; sepet düğmesi
   ona çapa atar. JS varken davetli-sepet.js .kl-modal ekler ve pencereye
   çevirir. Aynı işaretleme, iki davranış — kullanıcı hiçbirinde kaybolmaz. */
.kl-sepet-kutu{max-width:640px}
.kl-modal{position:fixed;z-index:120;inset:auto 0 0 0;margin:0 auto;
  max-height:88vh;overflow:auto;width:min(640px,100%);
  border-radius:var(--kl-r3) var(--kl-r3) 0 0;box-shadow:var(--kl-g3)}
.kl-modal[hidden]{display:none}
@media (min-width:720px){
  .kl-modal{inset:50% auto auto 50%;transform:translate(-50%,-50%);
    border-radius:var(--kl-r2);max-height:82vh}
}
.kl-sepet-perde{position:fixed;inset:0;z-index:110;background:rgba(30,26,46,.5);
  backdrop-filter:blur(2px)}
.kl-sepet-perde[hidden]{display:none}
body.kl-sepet-acik{overflow:hidden}

/* ── SEPET KALEMLERİ ──────────────────────────────────────────────────── */
.kl-sepet-liste{display:flex;flex-direction:column;gap:var(--kl-s2)}
.kl-sepet-satir{display:flex;align-items:center;gap:var(--kl-s2);flex-wrap:wrap;
  padding:10px 12px;border-radius:var(--kl-r1);
  border:1px solid var(--kl-cizgi);background:var(--kl-yuzey-2)}
.kl-sepet-satir-bilgi{display:flex;flex-direction:column;min-width:0;flex:1 1 130px}
.kl-sepet-satir-bilgi b{font-size:var(--kl-f5)}
.kl-sepet-satir-bilgi small{font-size:var(--kl-f2)}
.kl-sepet-satir-tutar{flex:none;min-width:84px;font-weight:600}
.kl-sepet-sil{flex:none}
/* +/− gerçek düğmeler: dokunma hedefi 38px, rakam ortada sabit genişlikte
   durur ki 9→10 geçişinde satır zıplamasın. */
.kl-adet-dugme{min-width:38px;padding:0;font-size:var(--kl-f6);font-weight:700;
  border:1px solid var(--kl-cizgi);background:var(--kl-yuzey)}
.kl-adet-dugme:hover{background:var(--kl-yuzey-3)}
.kl-adet-sayi{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;
  font-weight:600;font-size:var(--kl-f5)}
/* Sepetteki paket satırı işaretli görünür (SMS/davetli listelerinde). */
.kl-sms-paket[data-secili="1"]{border-color:var(--kl-cini);background:var(--kl-cini-yumus)}
.kl-sms-paket > .kl-btn{flex:none}

/* ── UÇAN KALEM ───────────────────────────────────────────────────────────
   Küçük ve tek seferlik: kullanıcı "gitti mi?" diye sormasın, o kadar.
   prefers-reduced-motion'da JS zaten hiç başlatmaz; katman da boş kalır. */
.kl-sepet-ucus{position:fixed;inset:0;z-index:130;pointer-events:none}
.kl-sepet-ucan{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:var(--kl-rp);background:var(--kl-cini);
  box-shadow:0 0 0 3px var(--kl-cini-yumus)}

/* 375px: kalem satırı iki sıraya iner, yatay kaydırma OLMAZ. */
@media (max-width:460px){
  .kl-sepet-satir-bilgi{flex:1 1 100%}
  .kl-sepet-satir .kl-adet{flex:1 1 auto}
  .kl-sepet-satir-tutar{margin-left:auto;text-align:right}
}

/* 375px YATAY KAYDIRMA DÜZELTMESİ (davetli listesi)
   .kl-tablo-sar konumlandırılmamıştı; içindeki `.kl-gizli` ("Kişisel link"
   kopyalama alanları, position:absolute) kaydırma kabından KAÇIP sayfayı
   449px'e uzatıyordu — dar ekranda tüm sayfa yatay kayıyordu. Kabı
   konumlandırınca mutlak çocuklar içeride kalır ve overflow onları kırpar. */
.kl-tablo-sar{position:relative}

/* ─── §17 · SAYI SÜTUNU BAŞLIK HİZASI ─────────────────────────────────────
   .kl-tablo th varsayılan olarak SOLA, .kl-sayi hücreleri SAĞA yaslıydı;
   sayılar başlığının altına düşmüyordu (patron bildirimi: katılım takibinde
   "KİŞİ" başlığı solda, rakamlar sağda duruyordu).
   Başlığa da .kl-sayi verilir; hizayı buradan alır ama BAŞLIK MONO OLMAZ —
   .kl-sayi'nin mono yazı tipi yalnız rakamlar içindir, başlık şeridinin
   tipografisi bozulmamalı. */
.kl-tablo th.kl-sayi{ text-align:right; font-family:inherit; }

/* §17b · SAYAÇ sütunları SOLA yaslanır.
   Sağa yaslama PARA için doğrudur (basamaklar alt alta gelsin diye), ama
   "Kişi"/"Adet" gibi tek haneli sayaçlarda rakam geniş sütunun sağ ucuna
   yapışıp KOMŞU BAŞLIĞA yaklaşıyordu (patron: "kişi başlığı grup başlığına
   doğru kaymış"). Mono yazı tipi korunur, yalnız hiza değişir.
   Sütun da gereksiz genişlemesin: içerik kadar yer kaplar. */
.kl-tablo .kl-sayi.kl-sol, .kl-tablo th.kl-sayi.kl-sol{ text-align:left; width:1%; white-space:nowrap; }

/* §17c · Sayaç sütunu ile komşu sütun arası boşluk: 42pt (56px).
   Patron ölçüyle istedi. 56px = bu hücrenin SAĞ dolgusu (42px) + komşu
   hücrenin SOL dolgusu (14px, tablo geneli). Tablonun ortak dolgusuna
   dokunmuyoruz — yalnız sayaç sütunu nefes alıyor. */
.kl-tablo td.kl-sayi.kl-sol,
.kl-tablo th.kl-sayi.kl-sol{ padding-right:42px; }