/* ===== Siteni Tasarla — konfigurator arayuzu =====
   Faz 1.4 · 2026-08-08

   Bu dosya JUSTHISE'nin kendi dilini kullanir (koyu zemin, teal vurgu).
   Uretilen musteri sitesi kendi paletini kullanir — ikisi karistirilmaz.
   Motorun stil dosyasindan (js/wb/stil.js) tamamen ayridir. */

:root{
  --kf-bg:#0E1A20; --kf-bg2:#15262F; --kf-bg3:#1B3038;
  --kf-teal:#58A596; --kf-teal2:#3C8276;
  --kf-text:#EAFBF8; --kf-muted:#9FC3C0; --kf-dim:#7A9B98;
  --kf-bdr:rgba(120,200,190,.16); --kf-bdr2:rgba(120,200,190,.34);
  --kf-ust:64px;
  --kf-sec-dolgu:rgba(88,165,150,.24);   /* secili durum dolgusu (bkz. SECILI DURUM) */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kf-bg);color:var(--kf-text);
  font-family:'Sora',system-ui,sans-serif;font-size:15.5px;line-height:1.6}
h1,h3{font-family:'Poppins',system-ui,sans-serif;margin:0;letter-spacing:-.02em}
button,input{font:inherit;color:inherit}
input{-webkit-appearance:none;appearance:none}

/* ---- Ust bar ---- */
.kf-ust{position:sticky;top:0;z-index:40;height:var(--kf-ust);display:flex;align-items:center;gap:22px;
  padding:0 20px;background:rgba(14,26,32,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--kf-bdr)}
/* Dokunma hedefi: 24px'lik metin baglantisi parmakla vurulmuyordu. */
.kf-logo{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:17px;color:var(--kf-text);text-decoration:none;letter-spacing:-.02em;flex:none}
.kf-ust-orta{flex:1;display:flex;align-items:center;gap:14px;min-width:0}
.kf-adim-no{font-size:12.5px;color:var(--kf-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.kf-ilerleme-yol{flex:1;height:3px;background:var(--kf-bg3);border-radius:3px;overflow:hidden;max-width:340px}
.kf-ilerleme{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--kf-teal2),var(--kf-teal));transition:width .3s ease}
.kf-ust-sag{display:flex;align-items:baseline;gap:8px;flex:none}
.kf-toplam-et{font-size:12px;color:var(--kf-dim)}
.kf-toplam-sar{position:relative;display:inline-flex;flex-direction:column;align-items:flex-end}
.kf-toplam{font-family:'Poppins',sans-serif;font-size:17px;color:var(--kf-teal);font-variant-numeric:tabular-nums}
/* Delta tutarin ALTINDA yerinde belirir - ucan rozet degil: mobilde ekrani
   boydan boya gecer ve koordinat matematigi ister. */
.kf-delta{position:absolute;top:100%;right:0;margin-top:2px;font-size:12px;font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.kf-delta-arti{color:var(--kf-teal)}
.kf-delta-eksi{color:#F0A8C0}

.kf-kaynak-uyari{margin:0;padding:10px 20px;background:#3A2A15;color:#F0C98A;font-size:13px;border-bottom:1px solid rgba(240,201,138,.2)}

/* ---- Taslak: kayit gostergesi ve devam bandi ---- */
.kf-kayit{font-size:12px;color:var(--kf-dim);white-space:nowrap;transition:opacity .2s}
.kf-kayit-uyari{color:#F0C98A}
.kf-devam-band{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0;
  padding:10px 20px;background:var(--kf-bg2);border-bottom:1px solid var(--kf-bdr);font-size:13.5px;color:var(--kf-muted)}
.kf-sifirla{cursor:pointer;background:transparent;border:1px solid var(--kf-bdr);color:var(--kf-muted);
  border-radius:99px;padding:6px 14px;font-size:12.5px;min-height:32px}
.kf-sifirla:hover{border-color:var(--kf-bdr2);color:var(--kf-text)}
.kf-devam-kutu{margin-top:22px;padding:18px;background:var(--kf-bg2);border:1px solid var(--kf-bdr);border-radius:13px}
.kf-devam-kutu h3{font-size:14.5px;font-weight:600;margin-bottom:6px}
.kf-kopya{display:flex;gap:9px;margin-top:12px}
.kf-kopya input{flex:1;min-width:0;background:var(--kf-bg);border:1px solid var(--kf-bdr);border-radius:10px;
  padding:11px 13px;font-size:13px;color:var(--kf-muted)}
.kf-kopya .kf-btn{padding:11px 18px;font-size:14px;flex:none}

/* ---- Duzen ---- */
.kf-duzen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;
  min-height:calc(100vh - var(--kf-ust))}
.kf-panel{padding:38px 34px 120px;max-width:720px;width:100%;margin-left:auto}
.kf-baslik{font-size:clamp(23px,2.7vw,31px);font-weight:600}
.kf-aciklama{color:var(--kf-muted);margin:9px 0 28px;font-size:15px;max-width:56ch}
.kf-govde{display:flex;flex-direction:column;gap:14px}

/* ---- Kartlar (sektor, seviye, kulvar) ---- */
.kf-kartlar{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.kf-kartlar-genis{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
/* ---- SECILI DURUM ----
   OLCUM (2026-08-10): secili/secisiz kart zemini #15262F -> #1B3038 = 1,13:1.
   Goz bunu durum degisikligi olarak OKUMAZ; geriye tek sinyal olarak 1px kenar
   rengi kaliyordu. Kullanicinin sikayeti buydu: "secim yaptigim anlasilmiyor".
   Cozum tek sinyali guclendirmek degil, DORT bagimsiz sinyal vermek:
   dolgu + 2px dis halka + tik + not yazisinin aydinlanmasi. */
.kf-kart{position:relative;display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
  background:var(--kf-bg2);border:1px solid var(--kf-bdr);border-radius:12px;padding:16px 17px;
  transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
.kf-kart:hover:not(.pasif){border-color:var(--kf-bdr2);transform:translateY(-2px)}
.kf-kart.secili{border-color:var(--kf-teal);
  background:linear-gradient(var(--kf-sec-dolgu),var(--kf-sec-dolgu)) var(--kf-bg3);
  box-shadow:0 0 0 2px var(--kf-teal)}
/* Dolgu gelince not yazisi 4,57 -> 3,10'a duser ve AA kirilir; muted ile 4,92. */
.kf-kart.secili .kf-kart-not{color:var(--kf-muted)}
.kf-kart.pasif{opacity:.44;cursor:not-allowed}

/* Tik: GLIF DEGIL, kenarlikla cizilir. '✓' Sora/Poppins'te yok, tofu riski var. */
.kf-tik{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;
  background:var(--kf-teal);display:none;place-items:center}
.kf-tik::after{content:"";width:5px;height:9px;margin-top:-2px;
  border:solid #08161A;border-width:0 2px 2px 0;transform:rotate(45deg)}
.secili>.kf-tik,.acik>.kf-tik{display:grid}
.kf-kart-ad{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px}
.kf-kart-fiyat{color:var(--kf-teal);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
.kf-kart-not{color:var(--kf-dim);font-size:13px;line-height:1.5}
.kf-rozet{position:absolute;margin-top:-6px;align-self:flex-end;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kf-dim);border:1px solid var(--kf-bdr);border-radius:99px;padding:2px 8px}

/* ---- Alanlar ---- */
.kf-alan{display:flex;flex-direction:column;gap:7px}
.kf-alan>span{font-size:13.5px;color:var(--kf-muted)}
.kf-alan>span i{color:var(--kf-dim);font-style:normal;font-size:12.5px}
.kf-zorunlu{color:#F0A8C0}
.kf-alan input{background:var(--kf-bg2);border:1px solid var(--kf-bdr);border-radius:10px;padding:12px 14px;
  transition:border-color .18s}
.kf-alan input:focus{outline:none;border-color:var(--kf-teal)}
.kf-alan input::placeholder{color:#5E7B78}

/* ---- Gorunum: paletler ---- */
.kf-grup{display:flex;flex-direction:column;gap:11px}
.kf-grup h3{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--kf-dim)}
.kf-paletler{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.kf-palet{position:relative;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;
  background:var(--kf-bg2);border:1px solid var(--kf-bdr);border-radius:11px;padding:10px;transition:border-color .18s,transform .18s,box-shadow .18s}
.kf-palet:hover{border-color:var(--kf-bdr2);transform:translateY(-2px)}
/* Palette TEAL DOLGU YOK: 12 gercek renk yan yana yargilaniyor, uzerlerine
   teal yikamak escanli kontrastla paletleri yalan soyletir. Yalnizca notr
   yukselti + halka + tik. */
.kf-palet.secili{border-color:var(--kf-teal);box-shadow:0 0 0 2px var(--kf-teal);transform:translateY(-3px)}
.kf-palet.secili .kf-palet-ad{color:var(--kf-text)}
/* ---- Palet minyaturu: gercek bir sayfanin kucugu ----
   Once 4 bantli gradyan seritti; paletin SITEDE nasil duracagini anlatmiyordu.
   Simdi zemin + kart + baslik + iki metin satiri + vurgu butonu, hepsi paletin
   kendi degerleriyle. Koyu paletlerde kart zemine karismasin diye 1px kenar sart. */
.kf-mini{display:block;height:64px;border-radius:8px;overflow:hidden;padding:7px;
  background:var(--m-bg);border:1px solid rgba(255,255,255,.09)}
.kf-mini-kart{display:flex;flex-direction:column;gap:4px;height:100%;padding:6px 7px;
  border-radius:5px;background:var(--m-yz);border:1px solid var(--m-kn)}
.kf-mini-baslik{display:block;height:6px;width:62%;border-radius:2px;background:var(--m-mt);opacity:.92}
.kf-mini-satir{display:block;height:3px;width:88%;border-radius:2px;background:var(--m-sl);opacity:.8}
.kf-mini-kisa{width:54%}
.kf-mini-btn{display:block;margin-top:auto;height:9px;width:38%;border-radius:3px;background:var(--m-vg)}
.kf-palet-ad{font-size:12.5px;color:var(--kf-muted)}
.kf-secler{display:flex;gap:9px;flex-wrap:wrap}
.kf-sec{cursor:pointer;background:var(--kf-bg2);border:1px solid var(--kf-bdr);border-radius:99px;
  padding:9px 16px;font-size:14px;min-height:40px;transition:border-color .18s,background .18s,box-shadow .18s}
.kf-sec:hover{border-color:var(--kf-bdr2)}
.kf-sec.secili{border-color:var(--kf-teal);color:var(--kf-text);font-weight:600;
  background:linear-gradient(var(--kf-sec-dolgu),var(--kf-sec-dolgu)) var(--kf-bg3);
  box-shadow:0 0 0 2px var(--kf-teal)}

/* ---- Bolgeler ve moduller ---- */
.kf-bolge{margin-bottom:26px}
.kf-bolge-baslik{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.kf-bolge-baslik h3{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--kf-muted)}
.kf-bolge-baslik p{margin:0;width:100%;color:var(--kf-dim);font-size:12.5px}
.kf-bolge-kap{font-size:11.5px;color:var(--kf-dim);border:1px solid var(--kf-bdr);border-radius:99px;padding:2px 9px}
.kf-bolge-kap.dolu{color:var(--kf-teal);border-color:rgba(88,165,150,.45)}
.kf-modul-kilit{display:inline-block;margin-top:3px;font-size:11.5px;color:#F0C98A;
  border:1px solid rgba(240,201,138,.28);border-radius:99px;padding:1px 9px;width:fit-content}
.kf-bilgi{margin:14px 0 0;padding:11px 14px;background:rgba(88,165,150,.1);
  border:1px solid rgba(88,165,150,.3);border-radius:10px;color:var(--kf-text);font-size:13.5px;line-height:1.55}

/* ---- Moduller ---- */
.kf-moduller{display:flex;flex-direction:column;gap:9px}
.kf-modul{position:relative;display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  background:var(--kf-bg2);border:1px solid var(--kf-bdr);border-radius:11px;padding:14px 16px;
  transition:border-color .18s,background .18s,box-shadow .18s}
.kf-modul:hover{border-color:var(--kf-bdr2)}
.kf-modul.acik{border-color:var(--kf-teal);
  background:linear-gradient(var(--kf-sec-dolgu),var(--kf-sec-dolgu)) var(--kf-bg3);
  box-shadow:0 0 0 1px var(--kf-teal)}
/* Dolgu gelince not yazisi 5,52 -> 3,49'a duser; muted ile 5,52'de kalir. */
.kf-modul.acik .kf-modul-not{color:var(--kf-muted)}
.kf-modul.kilitli{opacity:.72;cursor:default}
.kf-modul.kilitli.acik{box-shadow:none}
.kf-modul input{margin:3px 0 0;width:17px;height:17px;accent-color:var(--kf-teal);flex:none;cursor:inherit}
.kf-modul-govde{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.kf-modul-ad{font-family:'Poppins',sans-serif;font-weight:500;font-size:14.5px}
.kf-modul-not{color:var(--kf-dim);font-size:13px;line-height:1.5}
.kf-modul-fiyat{color:var(--kf-teal);font-size:13.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.kf-modul.kilitli .kf-modul-fiyat{color:var(--kf-dim)}

/* ---- Ozet ---- */
.kf-ozet{list-style:none;padding:0;margin:0;background:var(--kf-bg2);border:1px solid var(--kf-bdr);border-radius:13px;overflow:hidden}
.kf-ozet li{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;font-size:14.5px}
.kf-ozet li+li{border-top:1px solid var(--kf-bdr)}
.kf-ozet li b{font-variant-numeric:tabular-nums}
/* Sektor satiri: tutara girmez, "dahil" yazar. Fiyat sutunu sayi tasimadigi
   icin soluk - musterinin gozu ucretli kalemlerde kalsin. */
.kf-ozet-sektor b{color:var(--kf-dim);font-weight:500}
.kf-ozet-toplam{background:var(--kf-bg3);font-family:'Poppins',sans-serif}
.kf-ozet-toplam b{color:var(--kf-teal);font-size:19px}
.kf-not{color:var(--kf-dim);font-size:13px;line-height:1.6;margin:4px 0 0}
.kf-not-orta{text-align:center}
/* Supheli icerik taramasi (K14): otomatik teslim yerine elle inceleme.
   Kirmizi DEGIL amber - bu bir hata degil, bir bekleme suresi. Kirmizi
   musteriye "yanlis bir sey yaptin" der; yapmis olmayabilir. */
.kf-not-uyari{color:#B4813A;background:rgba(180,129,58,.10);border-left:3px solid #B4813A;
  padding:10px 14px;border-radius:4px;margin:12px 0 0}
.kf-kapat{margin-top:20px;display:flex;flex-direction:column;gap:10px}

/* ---- Gezinme ---- */
.kf-uyari{color:#F0A8C0;font-size:13.5px;min-height:20px;margin:14px 0 0}
.kf-gezinme{display:flex;gap:11px;margin-top:22px}
.kf-btn{cursor:pointer;border-radius:11px;padding:13px 26px;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;
  border:1px solid transparent;transition:transform .18s,opacity .18s,border-color .18s}
.kf-btn-ana{background:linear-gradient(135deg,var(--kf-teal),var(--kf-teal2));color:#08161A;flex:1}
.kf-btn-ana:hover:not(:disabled){transform:translateY(-2px)}
.kf-btn-ikinci{background:transparent;border-color:var(--kf-bdr);color:var(--kf-text)}
.kf-btn-ikinci:hover:not(:disabled){border-color:var(--kf-bdr2)}
.kf-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ---- Onizleme ---- */
.kf-onizleme-alan{position:sticky;top:var(--kf-ust);height:calc(100vh - var(--kf-ust));
  display:flex;flex-direction:column;background:var(--kf-bg2);border-left:1px solid var(--kf-bdr)}
.kf-onizleme-baslik{display:flex;align-items:baseline;gap:10px;padding:13px 20px;border-bottom:1px solid var(--kf-bdr);flex:none}
.kf-onizleme-baslik span{font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px}
.kf-onizleme-baslik small{color:var(--kf-dim);font-size:12px}
.kf-cerceve{position:relative;flex:1;padding:16px;min-height:0}
/* Vurgu halkasi iframe'in USTUNDE durur, icine enjekte edilmez: teslim edilen
   sitede olmayan mureккep onizlemede gorunmemeli. */
.kf-halka{position:absolute;pointer-events:none;z-index:2;border-radius:10px;
  box-shadow:0 0 0 3px var(--kf-teal), 0 0 24px rgba(88,165,150,.5);
  animation:kf-halka-sol 1.4s ease forwards}
@keyframes kf-halka-sol{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.kf-halka{animation:none;opacity:1}}
/* Zemin secili paletin bg'sine baglanir (konfigurator.js: cerceveZemini).
   Sabit #fff birakilirsa koyu paletlerde her yeniden yuklemede beyaz caki oluyor. */
#kf-onizleme{width:100%;height:100%;border:0;border-radius:12px;
  background:var(--kf-onizleme-bg,#fff);
  box-shadow:0 20px 50px rgba(0,0,0,.36)}

/* ---- Tam ekran onizleme dugmesi: HER GENISLIKTE ----
   OLCUM (2026-08-10): 1440px pencerede yan paneldeki iframe ic genisligi 705,6px.
   Motorun mobil bloğu @media(max-width:720px) orada devreye giriyor - yani musteri
   MASAUSTU sitesi tasarliyor ama ekranda TELEFON duzenini goruyor. Defterde
   olculup ovulen her karakter hamlesi (gorsel bleed, metin binismesi, yapiskan
   menu basligi, SSS bolunmesi) onizlemede HIC cizilmiyordu.
   Tam ekranda iframe ~1248px olur ve motorun masaustu bloklari ilk kez calisir. */
.kf-onizle-ac{display:block;position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:45;
  cursor:pointer;background:var(--kf-bg3);border:1px solid var(--kf-bdr2);color:var(--kf-text);
  border-radius:99px;padding:12px 24px;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;
  min-height:44px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.kf-onizle-ac:hover{border-color:var(--kf-teal)}

body.kf-onizleme-acik .kf-onizleme-alan{position:fixed;inset:var(--kf-ust) 0 0;z-index:35;
  border-left:0;height:auto}
body.kf-onizleme-acik .kf-cerceve{padding:20px}

@media(max-width:1080px){
  .kf-duzen{grid-template-columns:1fr}
  .kf-panel{max-width:none;margin:0;padding:30px 22px 132px}
  /* Mobilde panel KAPALIYKEN gizli; masaustunde yan sutun olarak durur. */
  .kf-onizleme-alan{position:fixed;inset:var(--kf-ust) 0 0;z-index:35;border-left:0;
    transform:translateY(101%);transition:transform .28s ease;visibility:hidden}
  body.kf-onizleme-acik .kf-onizleme-alan{transform:none;visibility:visible}
  .kf-ust-orta{gap:10px}
  .kf-ilerleme-yol{max-width:none}
}
@media(max-width:560px){
  .kf-logo{font-size:15px}
  .kf-toplam{font-size:15px}
  .kf-toplam-et{display:none}
  .kf-adim-no{display:none}
  .kf-kartlar,.kf-kartlar-genis{grid-template-columns:1fr}
  .kf-paletler{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--kf-teal);outline-offset:2px}

/* ===== MUSTERI ICERIGI DUZENLEYICI =====
   Modul kartinin ALTINDA acilan panel. Ayri bir adim degil (bkz.
   konfigurator.js ICERIK_MODULU yorumu): "hizmetler" her sektorde zorunlu
   oldugu icin ayri adim herkesin akisini uzatirdi. */
.kf-modul-sarmal{display:flex;flex-direction:column}
.kf-modul-sarmal.acik .kf-modul{border-bottom-left-radius:0;border-bottom-right-radius:0}

.kf-ic-ac{align-self:flex-start;margin:6px 0 0;padding:6px 12px;
  background:transparent;border:1px solid var(--kf-bdr);border-radius:8px;
  color:var(--kf-muted);font:inherit;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:border-color .18s,color .18s}
.kf-ic-ac:hover{border-color:var(--kf-bdr2);color:var(--kf-text)}
.kf-ic-ac:focus-visible{outline:2px solid var(--kf-teal);outline-offset:2px}
.kf-ic-adet{background:var(--kf-bg3);border-radius:20px;padding:1px 8px;
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--kf-dim)}

.kf-ic-panel{margin-top:8px;padding:14px;background:var(--kf-bg2);
  border:1px solid var(--kf-bdr);border-radius:11px}
.kf-ic-liste{display:flex;flex-direction:column;gap:10px}
.kf-ic-bos{margin:0;color:var(--kf-dim);font-size:13px}

.kf-ic-satir{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;
  padding:10px;background:var(--kf-bg);border:1px solid var(--kf-bdr);border-radius:9px}
.kf-ic-no{color:var(--kf-dim);font-size:12px;font-variant-numeric:tabular-nums;
  padding-top:20px;min-width:14px;text-align:right}

/* Alanlar: ana alan (ad/baslik) tam genislik, digerleri yan yana.
   auto-fit DEGIL auto-fill kullanilmiyor - 2 alanli bir tip geldiginde
   auto-fit ikisini de sayfa genisligine yayar ve fiyat kutusu 400px olur. */
.kf-ic-alanlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;min-width:0}
.kf-ic-alan{display:flex;flex-direction:column;gap:3px;min-width:0}
.kf-ic-alan.kf-ic-ana{grid-column:1/-1}
.kf-ic-alan>span{color:var(--kf-dim);font-size:11px;letter-spacing:.03em;text-transform:uppercase}
/* font-size 16px SART, kucultulmez: iOS Safari 16px'in ALTINDA font tasiyan
   bir input'a odaklaninca sayfayi otomatik yakinlastirir ve kullanici formun
   ortasinda zoomlanmis bir sayfada kalir. Ilk yazdigim hali 14px'ti - hem bu
   tuzaga dusuyordu hem de sayfanin diger kutulariyla (font:inherit) tutarsizdi.
   Turkiye'de mobil web %74,52 (TUIK); bu kutu 32 kez tekrarlaniyor. */
.kf-ic-alan>textarea{resize:vertical;min-height:64px;line-height:1.45;font-family:inherit}
.kf-ic-alan>input,.kf-ic-alan>textarea{width:100%;box-sizing:border-box;padding:8px 10px;
  background:var(--kf-bg2);border:1px solid var(--kf-bdr);border-radius:7px;
  color:var(--kf-text);font:inherit;font-size:16px}
.kf-ic-alan>input:focus,.kf-ic-alan>textarea:focus{outline:none;border-color:var(--kf-teal);
  box-shadow:0 0 0 1px var(--kf-teal)}
.kf-ic-alan>input::placeholder,.kf-ic-alan>textarea::placeholder{color:var(--kf-dim)}

/* Silme dugmesi 34px: WCAG 2.5.8 asgari 24x24'un ustunde, ve satirin
   sagindaki en kucuk dokunma hedefi bu. */
.kf-ic-sil{width:34px;height:34px;flex:none;margin-top:16px;
  background:transparent;border:1px solid var(--kf-bdr);border-radius:8px;
  color:var(--kf-dim);font-size:20px;line-height:1;cursor:pointer;
  transition:border-color .18s,color .18s}
.kf-ic-sil:hover{border-color:#C4756B;color:#E5A79E}
.kf-ic-sil:focus-visible{outline:2px solid var(--kf-teal);outline-offset:2px}

.kf-ic-arac{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.kf-ic-ekle,.kf-ic-sifirla{padding:8px 14px;background:var(--kf-bg3);
  border:1px solid var(--kf-bdr);border-radius:8px;color:var(--kf-text);
  font:inherit;font-size:13px;cursor:pointer;transition:border-color .18s}
.kf-ic-ekle:hover:not(:disabled),.kf-ic-sifirla:hover{border-color:var(--kf-teal)}
.kf-ic-ekle:disabled{opacity:.45;cursor:not-allowed}
.kf-ic-ekle:focus-visible,.kf-ic-sifirla:focus-visible{outline:2px solid var(--kf-teal);outline-offset:2px}
.kf-ic-sifirla{background:transparent;color:var(--kf-muted)}
.kf-ic-sayi{margin-left:auto;color:var(--kf-dim);font-size:12px;font-variant-numeric:tabular-nums}

/* Dar ekran: satir numarasi ve silme dugmesi ayni satirda kalirsa alan
   kutulari 90px'e duser. Numara gizlenir, silme dugmesi ust sagda durur. */
@media (max-width:560px){
  .kf-ic-satir{grid-template-columns:1fr auto}
  .kf-ic-no{display:none}
  .kf-ic-sil{margin-top:0}
  .kf-ic-alanlar{grid-template-columns:1fr}
}