/* ═══════════════════════════════════════════════════════════════════════
   ULTIMATE GARAGE · KABUL PANELİ — ORTAK STİL
   Tek kaynak. Her ekran (sihirbaz, kontrol, taslaklar, giriş) bunu kullanır.

   Bugün canlıda: kabul.css (476) + kabul-new.css (1201) + kabul-theme.css (590)
                  + inspection.css (1250) = 3.517 satır, 274 farklı renk değeri,
                  29 border-radius, 74 font-size, 341 satır içi style.
   Burada: tek dosya, 3 radius, 8 yazı boyu, 0 satır içi style.

   Palet markadan alındı (ultimategarageturkey.com ölçüldü), uydurulmadı.
   Kontrast palet2.js ile hesaplandı: 15/15 eşik geçti.
   ═══════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   KABUL · ADIM 4 — FİYATLANDIRMA  ·  PROTOTİP
   Tasarım dili: ../tasarim-dili.html (markanın kendi tokenleri)
   Hedef: iPad yatay 1180×820 (birincil) · dikey 820×1180 (ikincil)
   Kural: satır içi style YOK · 3 yuvarlaklık · 8 yazı boyu · 44px altı hedef YOK
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --zemin:#030508; --yuzey-1:#0A0D12; --yuzey-2:#111419; --yuzey-3:#171B22; --yuzey-4:#1E232C;
  --cizgi:#232832; --cizgi-2:#2E3440; --cizgi-3:#3A4152;
  --ink-1:#F2F4F8; --ink-2:#AEB6C4; --ink-3:#7A8496;
  --aksan:#8B9CC9;
  --aksan-koyu:#5D6C93; --aksan-mor:#A498C9; --aksan-cam:#7FB8C9;
  --aksan-sis:rgba(113,192,237,.14);
  /* IMZA: marka degradesi YALNIZ 2px sac teli cizgide, TAM doygunlukla.
     Dolgu olarak hicbir yerde kullanilmaz — premium olan az ve yerinde olmasidir. */
  --aksan-hat:linear-gradient(90deg,#22D3EE,#6C8CFF,#A78BFA);
  /* Marka isareti (logo) — ayni uc renk, 135 derece. TEK KAYNAK. */
  --marka-isaret:linear-gradient(135deg,#22D3EE,#6C8CFF,#A78BFA);
  /* ── METAL ── birincil eylem doygun renk degil, platin yuzeydir */
  --platin:#E6E9F0;
  --platin-ust:#FFFFFF;
  --platin-ink:#08090C;
  --koyu-ink:#04120C;   /* koyu zemin uzerindeki metin (yesil/altin dolgu) */
  --golge-yumusak:0 18px 40px -24px rgba(0,0,0,.9);
  --golge-eylem:0 10px 30px -12px rgba(230,233,240,.18);
  --para:#F5D68A; --para-sis:rgba(227,199,126,.10);
  --iyi:#6FBF9B; --iyi-sis:rgba(143,191,154,.13);
  --uyari:#D9B168; --uyari-sis:rgba(113,192,237,.13);
  --hata:#D98A96; --hata-sis:rgba(216,135,123,.13);
  --f-baslik:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-govde:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-mikro:11px; --t-etiket:13px; --t-kucuk:15px; --t-govde:17px;
  --t-orta:20px; --t-buyuk:26px; --t-dev:34px; --t-tutar:44px;
  --b1:4px; --b2:8px; --b3:12px; --b4:16px; --b5:24px; --b6:32px; --b7:48px;
  --r-kucuk:8px; --r-kontrol:10px; --r-kart:14px; --r-hap:999px;
  --dokun:48px; --dokun-ana:56px;
  --halka:inset 0 1px 0 rgba(255,255,255,.04);
  --halka-ust:inset 0 1px 0 rgba(255,255,255,.07);
  --odak:0 0 0 3px rgba(113,192,237,.40);
  --ust-h:60px; --ray-h:56px; --para-g:392px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--zemin); color:var(--ink-1);
  font-family:var(--f-govde); font-size:var(--t-govde); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
h1,h2,h3,h4{font-family:var(--f-baslik); margin:0; letter-spacing:-.02em}
/* Tarayici varsayilani: button rengi govdeden MIRAS ALMAZ (buttontext).
   Bu yuzden kart basliklari koyu zeminde koyu ciziliyordu — gozle bakmasam kacardi. */
button{font-family:inherit; color:inherit}
.tnum{font-variant-numeric:tabular-nums}

/* ── YARDIMCI SINIFLAR ──
   Bunlar tasarim-dili sayfasinin kendi <style> blogunda kalmisti; ortak dosyaya
   cikarilmamisti ve 4 ekranda SESSIZCE hicbir sey yapmiyordu. Sinif denetimi yakaladi. */
.not{font-size:var(--t-etiket); color:var(--ink-2); line-height:1.5; margin:var(--b3) 0 0}
.alt-0{margin-bottom:0}
.ust-b2{margin-top:var(--b2)}
.ust-b3{margin-top:var(--b3)}
.ust-b4{margin-top:var(--b4)}
.ust-b5{margin-top:var(--b5)}
/* Bağlantı stili tanımlı değildi: tarayıcı varsayılanı #0000EE koyu zeminde 1.74:1.
   Görünürlük denetimi yakaladı. */
a{color:var(--aksan); text-underline-offset:3px}
a:hover{color:var(--ink-1)}
a:focus-visible{outline:none; box-shadow:var(--odak); border-radius:var(--r-kucuk)}
.gizli{display:none !important}

/* ══ UYGULAMA IZGARASI ══ */
.uyg{display:grid; grid-template-rows:var(--ust-h) var(--ray-h) 1fr; height:100vh}

/* ── üst bar ── */
.ust{
  display:flex; align-items:center; gap:var(--b4); padding:0 var(--b5);
  background:var(--yuzey-1); border-bottom:1px solid var(--cizgi); position:relative;
}
.ust::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--aksan-hat)}
.logo{
  /* IMZA: marka isareti TAM doygunlukta kalir. 30px'lik tek yuzey — dolgu degil, kimlik. */
  width:30px; height:30px; border-radius:var(--r-kontrol); flex:0 0 auto;
  background:var(--marka-isaret);
}
.ust .baslik{font-family:var(--f-baslik); font-weight:800; font-size:var(--t-kucuk)}
.ust .arac{
  margin-left:var(--b5); display:flex; align-items:center; gap:var(--b3);
  font-size:var(--t-etiket); color:var(--ink-2); min-width:0;
}
.plaka{
  font-family:var(--f-mono); font-weight:500; letter-spacing:.06em; color:var(--ink-1);
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); padding:4px var(--b3);
  border-radius:var(--r-kontrol); font-size:var(--t-etiket); white-space:nowrap;
}
.ust .sag{margin-left:auto; display:flex; align-items:center; gap:var(--b3)}
.kullanici{font-size:var(--t-etiket); color:var(--ink-3); white-space:nowrap}

/* ── adım rayı ── */
.ray{
  display:flex; align-items:center; gap:var(--b2); padding:0 var(--b5);
  background:var(--zemin); border-bottom:1px solid var(--cizgi); overflow-x:auto;
}
.ray-a{
  display:flex; align-items:center; gap:var(--b2); padding:var(--b2) var(--b4);
  border-radius:var(--r-hap); min-height:44px; font-size:var(--t-etiket); font-weight:600;
  color:var(--ink-3); border:1px solid transparent; background:none; cursor:pointer;
  white-space:nowrap; transition:.14s ease;
}
.ray-a:hover{color:var(--ink-2)}
.ray-a .no{
  width:22px; height:22px; border-radius:var(--r-hap); display:grid; place-items:center;
  font-size:var(--t-mikro); font-weight:700; background:var(--yuzey-3); color:var(--ink-3);
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.ray-a.bitti{color:var(--ink-2)}
.ray-a.bitti .no{background:var(--iyi-sis); color:var(--iyi)}
.ray-a.aktif{background:var(--aksan-sis); color:var(--ink-1); border-color:rgba(113,192,237,.36)}
.ray-a.aktif .no{background:var(--platin); color:var(--platin-ink)}
.ray-c{width:16px; height:1px; background:var(--cizgi-2); flex:0 0 auto}

/* ── gövde: iki kolon ── */
.govde{display:grid; grid-template-columns:1fr var(--para-g); min-height:0}
.sol{overflow-y:auto; padding:var(--b5); -webkit-overflow-scrolling:touch}
.sag-panel{
  border-left:1px solid var(--cizgi); background:var(--yuzey-1);
  display:flex; flex-direction:column; min-height:0;
}

/* ── teklif referansı ── */
.teklif{
  display:flex; align-items:center; gap:var(--b3); padding:var(--b3) var(--b4);
  background:var(--uyari-sis); border:1px solid rgba(113,192,237,.30);
  border-radius:var(--r-kart); margin-bottom:var(--b4); font-size:var(--t-etiket);
  flex-wrap:wrap;
}
.teklif .rz{flex:0 0 auto}
.teklif b{color:var(--ink-1); font-family:var(--f-baslik)}
.teklif{flex-direction:column; align-items:stretch; padding:0; overflow:hidden}
.teklif-ust{
  display:flex; align-items:center; gap:var(--b3); width:100%; background:none;
  border:0; color:var(--ink-1); padding:var(--b3) var(--b4); min-height:52px;
  cursor:pointer; font-size:var(--t-etiket); text-align:left;
}
.teklif-ust .ok{transition:.18s ease; color:var(--uyari); font-size:var(--t-orta)}
.teklif-ust[aria-expanded="false"] .ok{transform:rotate(-90deg)}
.teklif-ic{padding:0 var(--b4) var(--b4); display:grid; gap:var(--b3)}
.teklif-kart{
  background:rgba(0,0,0,.28); border:1px solid rgba(113,192,237,.24);
  border-radius:var(--r-kontrol); padding:var(--b4); display:grid; gap:6px;
}
.tk-ust{display:flex; align-items:center; gap:var(--b3); flex-wrap:wrap}
.tk-ust b{font-family:var(--f-mono); font-size:var(--t-kucuk); color:var(--ink-1)}
.tk-tarih{color:var(--ink-3); font-size:var(--t-etiket)}
.tk-satir{font-size:var(--t-etiket); color:var(--ink-2); display:flex; gap:var(--b3)}
.tk-et{
  color:var(--ink-3); font-size:var(--t-mikro); text-transform:uppercase;
  letter-spacing:.1em; min-width:56px; flex:0 0 auto; padding-top:2px;
}
.tk-fiyat{display:flex; align-items:baseline; gap:var(--b3); margin-top:var(--b2)}
.tk-liste{font-size:var(--t-etiket); color:var(--ink-3); text-decoration:line-through}
.tk-son{font-family:var(--f-baslik); font-size:var(--t-orta); font-weight:700; color:var(--para)}
.teklif-ipucu{margin:0; font-size:var(--t-etiket); color:var(--ink-3); line-height:1.5}
.teklif-ipucu b{color:var(--ink-2)}
.teklif .fark{margin-left:auto; font-family:var(--f-mono); font-weight:500; color:var(--ink-2)}
.teklif .fark.artti{color:var(--uyari)}
.teklif .fark.azaldi{color:var(--iyi)}
.teklif .fark.ayni{color:var(--ink-3)}
.teklif button{
  background:none; border:1px solid rgba(113,192,237,.42); color:var(--uyari);
  border-radius:var(--r-kontrol); min-height:44px; padding:0 var(--b4);
  font-size:var(--t-etiket); font-weight:600; cursor:pointer;
}

/* ── liste başlığı ── */
.liste-ust{
  display:flex; align-items:center; gap:var(--b3); margin-bottom:var(--b3);
  padding-bottom:var(--b3); border-bottom:1px solid var(--cizgi);
}
.liste-ust h2{font-size:var(--t-orta); font-weight:700}
.liste-ust .sayi{
  font-size:var(--t-mikro); font-weight:700; color:var(--ink-3);
  background:var(--yuzey-2); border:1px solid var(--cizgi-2);
  padding:3px var(--b3); border-radius:var(--r-hap); font-variant-numeric:tabular-nums;
}
.liste-ust .hepsi{
  margin-left:auto; background:none; border:1px solid var(--cizgi-2); color:var(--ink-2);
  border-radius:var(--r-kontrol); min-height:44px; padding:0 var(--b4);
  font-size:var(--t-etiket); font-weight:600; cursor:pointer;
}
.liste-ust .hepsi:hover{color:var(--ink-1); border-color:var(--cizgi-3)}

/* ══ KALEM SATIRI — kapalıyken 76px ══ */
.kalem{
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-radius:var(--r-kart);
  margin-bottom:var(--b2); box-shadow:var(--halka); overflow:hidden;
  transition:border-color .16s ease, background .16s ease;
}
.kalem:hover{border-color:var(--cizgi-2)}
.kalem.acik{border-color:var(--cizgi-3); background:var(--yuzey-2)}
.kalem.kilitli{border-left:2px solid var(--aksan-koyu)}
.kalem.bedava{border-left:2px solid var(--iyi)}

.kalem-ust{display:flex; align-items:center; gap:var(--b4); padding:var(--b3) var(--b4); min-height:76px}
.kalem-bilgi{flex:1 1 auto; min-width:0}
.kalem-ad{
  font-family:var(--f-baslik); font-size:var(--t-govde); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kalem-detay{
  font-size:var(--t-etiket); color:var(--ink-3); margin-top:2px;
  display:flex; align-items:center; gap:var(--b2); flex-wrap:wrap;
}
.kalem-detay .pul{
  /* Ust veri (Air 80 / 1 No / +4 pencere) BILGIDIR, aksan degil.
     v1'de aksan rengiyle basiliyordu ve yanlis onemlendiriyordu. */
  font-family:var(--f-mono); font-size:var(--t-mikro); font-weight:500;
  background:var(--yuzey-3); color:var(--ink-2); padding:1px 7px;
  border-radius:var(--r-hap); border:1px solid var(--cizgi-2);
}
.kalem-rozetler{display:flex; gap:var(--b2); flex:0 0 auto}
.kalem-tutar{
  text-align:right; flex:0 0 auto; min-width:132px;
  font-family:var(--f-baslik); font-variant-numeric:tabular-nums;
}
.kalem-tutar .son{font-size:var(--t-buyuk); font-weight:700; color:var(--para); letter-spacing:-.02em; display:block; line-height:1.15}
.kalem-tutar .ind-rz{
  display:inline-block; font-size:var(--t-mikro); font-weight:700; letter-spacing:.05em;
  background:var(--para-sis); color:var(--para); border:1px solid rgba(227,199,126,.28);
  padding:2px var(--b2); border-radius:var(--r-hap); margin-bottom:3px;
}
.kalem-tutar .eski{font-size:var(--t-etiket); color:var(--ink-3); text-decoration:line-through; font-weight:400; display:block}
.kalem-tutar.sifir .son{color:var(--iyi)}
.kalem-ac{
  width:var(--dokun); height:var(--dokun); flex:0 0 auto; border-radius:var(--r-kontrol);
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; font-size:var(--t-orta);
  transition:.14s ease;
}
.kalem-ac:hover{background:var(--yuzey-4); color:var(--ink-1)}
.kalem.acik .kalem-ac{background:var(--aksan-sis); color:var(--aksan); border-color:rgba(113,192,237,.36)}
.kalem-kilit{
  /* Ac/kapa dugmesinin yerini tutan sessiz isaret — emoji degil, gecirimsiz bir yuzey.
     Kilitli oldugunu sol kenar cizgisi ve detay satiri zaten soyluyor. */
  flex:0 0 auto; width:var(--dokun); height:var(--dokun);
  border-radius:var(--r-kontrol); border:1px dashed var(--cizgi-2);
  display:grid; place-items:center; position:relative;
}
.kalem-kilit::after{
  content:''; width:10px; height:8px; border:1.5px solid var(--ink-3);
  border-radius:2px; border-top-width:1.5px; box-shadow:0 -4px 0 -1.5px transparent;
}
.kalem-kilit::before{
  content:''; position:absolute; width:8px; height:7px; margin-top:-9px;
  border:1.5px solid var(--ink-3); border-bottom:0;
  border-radius:4px 4px 0 0;
}
.ayrac{color:var(--ink-3); padding:0 3px}   /* 1.91:1 -> 5.16:1 (gorunurluk denetimi yakaladi) */

/* ── kalem denetimleri (açılır) ── */
.kalem-alt{
  border-top:1px solid var(--cizgi); padding:var(--b4); background:var(--yuzey-1);
  display:grid; gap:var(--b4);
}
.denet{display:flex; align-items:flex-end; gap:var(--b4); flex-wrap:wrap}
.dgrup{display:flex; flex-direction:column; gap:6px}
.dgrup > span{font-size:var(--t-mikro); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600}
.gir{
  min-height:var(--dokun); background:var(--yuzey-4); color:var(--ink-1);
  border:1px solid var(--cizgi-2); border-radius:var(--r-kontrol);
  padding:0 var(--b4); font-family:var(--f-govde); font-size:var(--t-govde); width:100%;
}
.gir::placeholder{color:var(--ink-3)}
.gir:focus{outline:none; border-color:var(--aksan); box-shadow:var(--odak)}
.gir.tutar{font-family:var(--f-baslik); font-weight:700; font-variant-numeric:tabular-nums; text-align:right; color:var(--para); width:150px}
.gir.dar{width:132px; font-variant-numeric:tabular-nums; text-align:right}
.gir.tam{width:100%}

/* TL / % seçici — segmentli, 48px */
.seg{display:flex; background:var(--yuzey-4); border:1px solid var(--cizgi-2); border-radius:var(--r-kontrol); padding:2px; gap:2px}
.seg button{
  min-width:56px; min-height:44px; border:0; background:none; color:var(--ink-2);
  border-radius:var(--r-kucuk); font-size:var(--t-kucuk); font-weight:700; cursor:pointer; transition:.14s ease;
}
.seg button.sec{background:var(--aksan-sis); color:var(--aksan); box-shadow:var(--halka-ust)}

/* hızlı indirim rozetleri */
.hizli{display:flex; gap:var(--b2); flex-wrap:wrap}
.hizli button{
  min-height:44px; padding:0 var(--b4); border-radius:var(--r-hap);
  background:var(--yuzey-4); border:1px solid var(--cizgi-2); color:var(--ink-2);
  font-size:var(--t-kucuk); font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums;
}
.hizli button:hover{color:var(--ink-1); border-color:var(--cizgi-3)}
.hizli button.sec{background:var(--para-sis); color:var(--para); border-color:rgba(227,199,126,.34)}

.dg{
  font-family:var(--f-baslik); font-size:var(--t-kucuk); font-weight:700;
  min-height:var(--dokun); padding:0 var(--b5); border-radius:var(--r-kontrol);
  border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:var(--b2); transition:.16s ease; letter-spacing:-.01em;
}
.dg:focus-visible{outline:none; box-shadow:var(--odak)}
.dg-ana{
  background:linear-gradient(180deg,var(--platin-ust),var(--platin));
  color:var(--platin-ink); min-height:var(--dokun-ana); font-size:var(--t-govde);
  box-shadow:var(--golge-eylem); letter-spacing:-.005em;
}
.dg-ana:hover{background:var(--platin-ust)}
.dg-ana:active{transform:translateY(1px)}
.dg-ikinci{background:var(--yuzey-3); color:var(--ink-1); border-color:var(--cizgi-2)}
.dg-ikinci:hover{background:var(--yuzey-4); border-color:var(--cizgi-3)}
.dg-hayalet{background:transparent; color:var(--ink-2); border-color:var(--cizgi-2)}
.dg-hayalet:hover{color:var(--ink-1); border-color:var(--cizgi-3)}
.dg-tehlike{background:var(--hata-sis); color:var(--hata); border-color:rgba(216,135,123,.32)}
.dg-tehlike:hover{background:rgba(216,135,123,.20)}
.dg-iyi{background:var(--iyi-sis); color:var(--iyi); border-color:rgba(143,191,154,.32)}
.dg-iyi.sec{background:var(--iyi); color:var(--koyu-ink)}

.rz{
  display:inline-flex; align-items:center; gap:5px; font-size:var(--t-mikro); font-weight:700;
  padding:5px var(--b3); border-radius:var(--r-hap); letter-spacing:.05em;
  text-transform:uppercase; border:1px solid transparent; white-space:nowrap;
}
.rz-iyi{background:var(--iyi-sis); color:var(--iyi); border-color:rgba(143,191,154,.30)}
.rz-uyari{background:var(--uyari-sis); color:var(--uyari); border-color:rgba(113,192,237,.30)}
.rz-hata{background:var(--hata-sis); color:var(--hata); border-color:rgba(216,135,123,.30)}
.rz-notr{background:var(--yuzey-3); color:var(--ink-2); border-color:var(--cizgi-2)}
.rz-para{background:var(--para-sis); color:var(--para); border-color:rgba(227,199,126,.28)}
.rz-aksan{background:var(--aksan-sis); color:var(--aksan); border-color:rgba(113,192,237,.30)}

/* ── boş durum ── */
.bos{
  text-align:center; padding:var(--b7) var(--b5); border:1px dashed var(--cizgi-2);
  border-radius:var(--r-kart); background:var(--yuzey-1);
}
.bos .ikon{font-size:var(--t-dev); color:var(--ink-3); margin-bottom:var(--b3)}
.bos h3{font-size:var(--t-orta); font-weight:700; margin-bottom:var(--b2)}
.bos p{color:var(--ink-3); font-size:var(--t-kucuk); margin:0 0 var(--b5)}

/* ══ SAĞ — PARA PANELİ ══ */
.para-ic{flex:1 1 auto; overflow-y:auto; padding:var(--b5); min-height:0}
.para-dip{border-top:1px solid var(--cizgi); padding:var(--b4) var(--b5); display:grid; gap:var(--b3); background:var(--yuzey-2)}

.toplam{
  background:linear-gradient(180deg,var(--yuzey-3),var(--yuzey-2));
  border:1px solid var(--cizgi-2); border-radius:var(--r-kart); padding:var(--b5);
  box-shadow:var(--halka-ust); position:relative; overflow:hidden; margin-bottom:var(--b4);
}
.toplam::before{content:''; position:absolute; inset:0 0 auto; height:2px; background:var(--aksan-hat)}
.toplam{box-shadow:var(--halka-ust), var(--golge-yumusak)}
.toplam .et{font-size:var(--t-mikro); text-transform:uppercase; letter-spacing:.16em; color:var(--ink-3); font-weight:600}
.toplam .rakam{
  font-family:var(--f-baslik); font-size:var(--t-tutar); font-weight:800; color:var(--para);
  font-variant-numeric:tabular-nums; letter-spacing:-.035em; line-height:1.08;
  margin:var(--b1) 0 2px; display:block; width:100%; text-align:left;
  text-shadow:0 1px 24px rgba(227,199,126,.14);
}
.toplam .liste{font-size:var(--t-etiket); color:var(--ink-3); text-decoration:line-through; font-variant-numeric:tabular-nums}
.toplam .alt{display:flex; align-items:center; gap:var(--b3); margin-top:var(--b3); flex-wrap:wrap}
.toplam .kazanc{font-size:var(--t-etiket); color:var(--para); font-variant-numeric:tabular-nums; font-weight:600}

/* toplam ezme kutusu */
.ezme{margin-top:var(--b4); padding-top:var(--b4); border-top:1px solid var(--cizgi-2); display:grid; gap:var(--b3)}
.ezme .aciklama{font-size:var(--t-etiket); color:var(--ink-2); display:flex; gap:var(--b2); align-items:flex-start}
.ezme .aciklama::before{content:'ⓘ'; color:var(--aksan); flex:0 0 auto}
.ezme .dugmeler{display:flex; gap:var(--b2)}
.ezme .dugmeler .dg{flex:1 1 0}

.bolum{margin-bottom:var(--b5)}
.bolum > h4{
  font-size:var(--t-mikro); text-transform:uppercase; letter-spacing:.13em;
  color:var(--ink-3); font-weight:600; margin-bottom:var(--b3);
  display:flex; align-items:center; gap:var(--b2);
}
.bolum > h4 i{color:var(--hata); font-style:normal}

/* satıcı — prim belirlediği için vurgulu */
.satici{
  background:var(--yuzey-2); border:1px solid var(--cizgi-2); border-radius:var(--r-kart);
  padding:var(--b4); box-shadow:var(--halka);
}
.satici.eksik{border-color:rgba(216,135,123,.48); background:var(--hata-sis)}
.satici .uyari{font-size:var(--t-etiket); color:var(--hata); margin-top:var(--b2); display:flex; gap:6px; align-items:center}
/* .satici.eksik zemini kirmizimsi; ink-3 orada 4.35:1 e dusuyor. */
.satici .bilgi{font-size:var(--t-etiket); color:var(--ink-2); margin-top:var(--b2)}
select.gir{appearance:none; cursor:pointer; padding-right:var(--b6); background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px; background-size:6px 6px,6px 6px; background-repeat:no-repeat}

textarea.gir{min-height:96px; padding:var(--b3) var(--b4); resize:vertical; line-height:1.5; font-size:var(--t-kucuk)}

.yonetim-ac{
  width:100%; justify-content:space-between; font-size:var(--t-etiket);
}
.yonetim-ac .ok{transition:.18s ease}
.yonetim-ac.acik .ok{transform:rotate(180deg)}

/* ── bildirim şeridi ── */
.bildirim{
  padding:var(--b3) var(--b5); font-size:var(--t-etiket); font-weight:600;
  border-top:1px solid var(--cizgi); display:flex; align-items:center; gap:var(--b2);
}
.bildirim.iyi{background:var(--iyi-sis); color:var(--iyi)}
.bildirim.uyari{background:var(--uyari-sis); color:var(--uyari)}
.bildirim::before{content:'✓'}
.bildirim.uyari::before{content:'!'}

/* ── alt eylem çubuğu ── */
.eylem{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--b3)}
.eylem .dg-ana{width:100%}

/* ── dikey yerleşim ── */
@media (max-width:1023px){
  .govde{grid-template-columns:1fr; grid-template-rows:1fr auto}
  .sag-panel{
    border-left:0; border-top:1px solid var(--cizgi);
    max-height:46vh; box-shadow:0 -18px 40px -20px rgba(0,0,0,.85);
  }
  .para-ic{padding:var(--b4)}
  .toplam{padding:var(--b4)}
  .toplam .rakam{font-size:var(--t-dev)}
  .ust .arac{margin-left:var(--b3)}
}
@media (max-width:700px){
  .sol{padding:var(--b4)}
  .ust{padding:0 var(--b4)} .ray{padding:0 var(--b4)}
  .ust .baslik{display:none}
  .kalem-tutar{min-width:104px}
  .kalem-tutar .son{font-size:var(--t-orta)}
}

/* ═══════════════════════════════════════════════════════════════════════
   HİZMET SEÇİMİ (adım 3) — bu bileşenler de ortak dosyada durur.
   Bugün canlıda bu ekran 1.455px: iPad'de iki ekran kaydırma.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── kategori şeridi ── */
.kat-serit{
  display:flex; gap:var(--b2); padding-bottom:var(--b3); margin-bottom:var(--b4);
  border-bottom:1px solid var(--cizgi); overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.kat-serit button{
  min-height:44px; padding:0 var(--b4); border-radius:var(--r-hap); white-space:nowrap;
  background:var(--yuzey-2); border:1px solid var(--cizgi-2); color:var(--ink-2);
  font-size:var(--t-etiket); font-weight:600; cursor:pointer; transition:.14s ease;
  display:inline-flex; align-items:center; gap:var(--b2);
}
.kat-serit button:hover{color:var(--ink-1); border-color:var(--cizgi-3)}
.kat-serit button.sec{background:var(--yuzey-4); color:var(--ink-1); border-color:var(--cizgi-3)}
.kat-serit .adet{
  font-family:var(--f-mono); font-size:var(--t-mikro); color:var(--ink-3);
  background:var(--yuzey-1); padding:1px 6px; border-radius:var(--r-hap);
}
.kat-serit button.sec .adet{color:var(--ink-2)}

/* ── koruma hizmeti kartları (ekranın kalbi) ── */
.koruma{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--b3); margin-bottom:var(--b5)}
.kart{
  position:relative; text-align:left; cursor:pointer; overflow:hidden; color:var(--ink-1);
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-radius:var(--r-kart);
  padding:var(--b4); min-height:132px; box-shadow:var(--halka);
  display:flex; flex-direction:column; gap:6px; transition:.16s ease;
}
.kart:hover{border-color:var(--cizgi-2); background:var(--yuzey-2)}
.kart:focus-visible{outline:none; box-shadow:var(--odak)}
.kart .ad{font-family:var(--f-baslik); font-size:var(--t-kucuk); font-weight:700; line-height:1.25}
.kart .aciklama{font-size:var(--t-etiket); color:var(--ink-3); line-height:1.4; flex:1 1 auto}
.kart .fiyat{
  font-family:var(--f-baslik); font-size:var(--t-orta); font-weight:700; color:var(--para);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.kart .fiyat small{font-size:var(--t-mikro); color:var(--ink-3); font-weight:500; letter-spacing:.06em}
.kart.secili{background:var(--yuzey-2); border-color:var(--cizgi-3)}
.kart.secili::before{
  content:''; position:absolute; inset:0 0 auto; height:2px; background:var(--aksan-hat);
}
.kart .tik{
  position:absolute; top:var(--b3); right:var(--b3); width:24px; height:24px;
  border-radius:var(--r-hap); background:var(--platin); color:var(--platin-ink);
  display:none; place-items:center; font-size:var(--t-etiket); font-weight:700;
}
.kart.secili .tik{display:grid}
.kart .yapilandir{
  font-size:var(--t-mikro); color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em;
  font-weight:600;
}
.kart.secili .yapilandir{color:var(--aksan)}

/* ── sade hizmet listesi ── */
.hliste{display:grid; gap:var(--b2)}
.hsatir{
  display:flex; align-items:center; gap:var(--b4); width:100%; text-align:left; cursor:pointer; color:var(--ink-1);
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-radius:var(--r-kart);
  padding:var(--b3) var(--b4); min-height:64px; box-shadow:var(--halka); transition:.14s ease;
}
.hsatir:hover{border-color:var(--cizgi-2); background:var(--yuzey-2)}
.hsatir:focus-visible{outline:none; box-shadow:var(--odak)}
.hsatir .kutu{
  width:22px; height:22px; flex:0 0 auto; border-radius:var(--r-kucuk);
  border:1.5px solid var(--cizgi-3); display:grid; place-items:center;
  font-size:var(--t-mikro); color:transparent; transition:.14s ease;
}
.hsatir.secili{background:var(--yuzey-2); border-color:var(--cizgi-3)}
.hsatir.secili .kutu{background:var(--platin); border-color:var(--platin); color:var(--platin-ink)}
.hsatir .bilgi{flex:1 1 auto; min-width:0}
.hsatir .bilgi b{
  display:block; font-family:var(--f-baslik); font-size:var(--t-kucuk); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hsatir .bilgi small{color:var(--ink-3); font-size:var(--t-etiket)}
.hsatir .tut{
  font-family:var(--f-baslik); font-size:var(--t-govde); font-weight:700; color:var(--para);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hsatir .tut.sifir{color:var(--ink-3); font-weight:500; font-size:var(--t-etiket)}

/* ── sağ raydaki seçilenler listesi ── */
.secilenler{display:grid; gap:var(--b2); margin-bottom:var(--b4)}
.secilen{
  display:flex; align-items:center; gap:var(--b3); padding:var(--b3);
  background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:var(--r-kontrol);
  font-size:var(--t-etiket);
}
.secilen .ad{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.secilen .tut{font-variant-numeric:tabular-nums; color:var(--para); font-weight:600; white-space:nowrap}
.secilen .sil{
  width:32px; height:32px; flex:0 0 auto; border-radius:var(--r-kucuk); cursor:pointer;
  background:none; border:1px solid var(--cizgi-2); color:var(--ink-3);
  display:grid; place-items:center; font-size:var(--t-etiket);
}
.secilen .sil:hover{color:var(--hata); border-color:rgba(216,135,123,.32)}
.secilen.kilitli .sil{visibility:hidden}
.secilen.kilitli{border-left:2px solid var(--aksan-koyu)}

/* ── bölüm başlığı ── */
.bolum-bas{
  display:flex; align-items:baseline; gap:var(--b3); margin:var(--b5) 0 var(--b3);
}
.bolum-bas:first-of-type{margin-top:0}
.bolum-bas h3{font-family:var(--f-baslik); font-size:var(--t-orta); font-weight:700}
.bolum-bas span{font-size:var(--t-etiket); color:var(--ink-3)}

/* ── dikey uyarlama ── */
@media (max-width:1023px){
  .koruma{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .koruma{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   ONAY (adım 5) — özet, teslim, ödeme, fatura, KDV, onay
   Bugün canlıda: 1.378px + 14 adet 44px altı dokunma hedefi + BEYAZ kartlar.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── özet ızgarası ── */
.ozet{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--b2); margin-bottom:var(--b4)}
.ozet-kart{
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-radius:var(--r-kart);
  padding:var(--b3) var(--b4); box-shadow:var(--halka); min-width:0;
}
.ozet-kart .et{
  display:block; font-size:var(--t-mikro); text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-3); font-weight:600; margin-bottom:3px;
}
.ozet-kart .deg{
  font-family:var(--f-baslik); font-size:var(--t-govde); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
}
.ozet-kart .deg.mono{font-family:var(--f-mono); letter-spacing:.05em; font-weight:500}
.ozet-kart.genis{grid-column:1 / -1}

/* ── hizmet dökümü (müşterinin okuduğu yer) ── */
.dokum{display:grid; gap:0; margin-top:var(--b2)}
.dokum-satir{
  display:flex; align-items:baseline; gap:var(--b3); padding:7px 0;
  border-bottom:1px solid var(--cizgi); font-size:var(--t-kucuk);
}
.dokum-satir:last-child{border-bottom:0}
.dokum-satir .ad{flex:1 1 auto; min-width:0}
.dokum-satir .tut{
  font-variant-numeric:tabular-nums; color:var(--para); font-weight:600; white-space:nowrap;
}
.dokum-satir .tut.sifir{color:var(--iyi)}
.dokum-satir .eski{
  font-size:var(--t-etiket); color:var(--ink-3); text-decoration:line-through; margin-right:6px;
}

/* ── kısayol pilleri (teslim tarihi) ── */
.pil-sira{display:flex; gap:var(--b2); flex-wrap:wrap; margin-top:var(--b3)}
.pil{
  min-height:44px; padding:0 var(--b4); border-radius:var(--r-hap);
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); color:var(--ink-2);
  font-size:var(--t-etiket); font-weight:600; cursor:pointer; transition:.14s ease;
}
.pil:hover{color:var(--ink-1); border-color:var(--cizgi-3)}
.pil.sec{background:var(--yuzey-4); color:var(--ink-1); border-color:var(--cizgi-3)}

/* ── segment seçici (ödeme yöntemi, evet/hayır) ── */
.segment{
  display:flex; background:var(--yuzey-4); border:1px solid var(--cizgi-2);
  border-radius:var(--r-kontrol); padding:3px; gap:3px; flex-wrap:wrap;
}
.segment button{
  /* ink-3 ile 4.18:1 cikiyordu (esik 4.5) — tiklanabilir kontrol okunmali. */
  flex:1 1 auto; min-width:96px; min-height:46px; border:0; background:none;
  color:var(--ink-2); border-radius:var(--r-kucuk); font-size:var(--t-kucuk); font-weight:600;
  cursor:pointer; transition:.14s ease; font-family:inherit;
}
.segment button:hover{color:var(--ink-1)}
.segment button.sec{background:var(--yuzey-2); color:var(--ink-1); box-shadow:var(--halka-ust)}
.segment.ikili button{min-width:0}

/* ── açılır detay kutusu ── */
.detay-kutu{
  margin-top:var(--b3); padding:var(--b4); background:var(--yuzey-2);
  border:1px solid var(--cizgi); border-radius:var(--r-kart); display:grid; gap:var(--b4);
}
.ikili{display:grid; grid-template-columns:1fr 1fr; gap:var(--b3)}
.gir-son{position:relative}
.gir-son .gir{padding-right:38px; text-align:right; font-variant-numeric:tabular-nums}
/* Renkli (hata/uyarı) zeminlerde ink-3 4.35:1 e dusuyordu — esik 4.5 */
.gir-son .isaret{
  position:absolute; right:var(--b4); top:50%; transform:translateY(-50%);
  color:var(--ink-2); font-size:var(--t-kucuk); pointer-events:none;
}

/* ── KDV kutusu ── */
.kdv{
  background:var(--yuzey-2); border:1px solid var(--cizgi-2); border-radius:var(--r-kart);
  padding:var(--b4); display:grid; gap:var(--b3); margin-top:var(--b3);
}
.kdv-satirlar{display:grid; gap:6px; padding-top:var(--b3); border-top:1px solid var(--cizgi)}
.kdv-satir{
  display:flex; justify-content:space-between; gap:var(--b3);
  font-size:var(--t-kucuk); color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.kdv-satir b{color:var(--ink-1); font-weight:600}
.kdv-satir.brut{
  padding-top:var(--b3); margin-top:2px; border-top:1px solid var(--cizgi-2);
  font-size:var(--t-govde);
}
.kdv-satir.brut b{color:var(--para); font-family:var(--f-baslik); font-weight:700}

/* ── onay kutusu ── */
.onay{
  display:flex; gap:var(--b3); align-items:flex-start; cursor:pointer;
  background:var(--yuzey-2); border:1px solid var(--cizgi-2); border-radius:var(--r-kart);
  padding:var(--b4); transition:.14s ease;
}
.onay:hover{border-color:var(--cizgi-3)}
.onay.eksik{border-color:rgba(216,135,123,.45); background:var(--hata-sis)}
.onay input{position:absolute; opacity:0; width:0; height:0}
.onay .kutu{
  width:26px; height:26px; flex:0 0 auto; border-radius:var(--r-kucuk); margin-top:1px;
  border:1.5px solid var(--cizgi-3); display:grid; place-items:center;
  font-size:var(--t-etiket); color:transparent; transition:.14s ease;
}
.onay input:checked + .kutu{background:var(--platin); border-color:var(--platin); color:var(--platin-ink)}
.onay input:focus-visible + .kutu{box-shadow:var(--odak)}
.onay .metin{font-size:var(--t-etiket); color:var(--ink-2); line-height:1.55}

/* ── uyarı satırı ── */
.uyari-satir{
  display:flex; gap:var(--b2); align-items:flex-start; font-size:var(--t-etiket);
  color:var(--uyari); margin-top:var(--b2);
}
.uyari-satir.hata{color:var(--hata)}
.uyari-satir.iyi{color:var(--iyi)}

@media (max-width:1023px){
  .ozet{grid-template-columns:1fr 1fr}
  .ikili{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ozet{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   MÜŞTERİ (adım 1) ve ARAÇ (adım 2)
   Sağ ray bu adımlarda PARA değil BAĞLAM taşır: eşleşen müşteri, geçmiş
   iş emirleri, kayıtlı araçlar. Kabuk aynı kalır, içerik değişir.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── randevu / bağlam kartı ── */
.bkart{
  display:flex; align-items:center; gap:var(--b3); width:100%; text-align:left;
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-radius:var(--r-kart);
  padding:var(--b3) var(--b4); min-height:64px; cursor:pointer; color:var(--ink-1);
  box-shadow:var(--halka); transition:.14s ease;
}
.bkart:hover{border-color:var(--cizgi-2); background:var(--yuzey-2)}
.bkart:focus-visible{outline:none; box-shadow:var(--odak)}
.bkart + .bkart{margin-top:var(--b2)}
.bkart .saat{
  font-family:var(--f-mono); font-size:var(--t-kucuk); color:var(--ink-2);
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); border-radius:var(--r-kucuk);
  padding:4px var(--b3); flex:0 0 auto; letter-spacing:.04em;
}
.bkart .bilgi{flex:1 1 auto; min-width:0}
.bkart .bilgi b{
  display:block; font-family:var(--f-baslik); font-size:var(--t-kucuk); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bkart .bilgi small{color:var(--ink-3); font-size:var(--t-etiket)}
.bkart .ok{color:var(--ink-3); flex:0 0 auto; font-size:var(--t-orta)}

/* ── eşleşen müşteri uyarısı ── */
.eslesme{
  background:var(--yuzey-2); border:1px solid var(--cizgi-2); border-left:2px solid var(--iyi);
  border-radius:var(--r-kart); padding:var(--b4); display:grid; gap:var(--b2);
}
.eslesme.mukerrer{border-left-color:var(--uyari)}
.eslesme .bas{display:flex; align-items:center; gap:var(--b3); flex-wrap:wrap}
.eslesme .bas b{font-family:var(--f-baslik); font-size:var(--t-govde); font-weight:700}
.eslesme .sat{
  display:flex; justify-content:space-between; gap:var(--b3);
  font-size:var(--t-etiket); color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.eslesme .sat b{color:var(--ink-1); font-weight:600}

/* ── geçmiş satırı ── */
.gecmis{display:grid; gap:var(--b2)}
.gsatir{
  display:flex; align-items:center; gap:var(--b3); padding:var(--b3);
  background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:var(--r-kontrol);
  font-size:var(--t-etiket);
}
.gsatir .tar{font-family:var(--f-mono); color:var(--ink-3); flex:0 0 auto; font-size:var(--t-mikro)}
.gsatir .ad{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gsatir .tut{font-variant-numeric:tabular-nums; color:var(--para); font-weight:600; white-space:nowrap}

/* ── form ızgarası ── */
.form-izgara{display:grid; grid-template-columns:1fr 1fr; gap:var(--b4)}
.form-izgara .genis{grid-column:1 / -1}
.alan-ek{display:flex; gap:var(--b2); align-items:flex-end}
.alan-ek .alan{flex:1 1 auto; margin-bottom:0}
.ek-dgm{
  min-height:var(--dokun); padding:0 var(--b4); border-radius:var(--r-kontrol); flex:0 0 auto;
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); color:var(--ink-2);
  font-size:var(--t-etiket); font-weight:600; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.ek-dgm:hover{color:var(--ink-1); border-color:var(--cizgi-3)}
.ek-dgm.sec{background:var(--yuzey-4); color:var(--ink-1); border-color:var(--cizgi-3)}

/* ── doğrulama mesajı ── */
.dogrula{font-size:var(--t-etiket); margin-top:6px; display:flex; gap:6px; align-items:flex-start}
.dogrula.iyi{color:var(--iyi)}
.dogrula.uyari{color:var(--uyari)}
.dogrula.hata{color:var(--hata)}
.gir.hatali{border-color:rgba(216,135,123,.55)}
.gir.iyi{border-color:rgba(143,191,154,.45)}

/* ── boş bağlam ── */
.bos-baglam{
  text-align:center; padding:var(--b6) var(--b4); color:var(--ink-3);
  font-size:var(--t-etiket); border:1px dashed var(--cizgi-2); border-radius:var(--r-kart);
}

@media (max-width:700px){
  .form-izgara{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   ARAÇ KABUL KONTROLÜ (ekspertiz modalı)
   Bugün canlıda KENDİ token setiyle AÇIK TEMA adası:
     --i-bg #f4f6f9 · --i-card #fff · --i-text #1f2937 · --i-primary #0ea5e9
   Koyu panelin ortasında beyaz bir ada — 34 açık yüzey buradan geliyor.

   ⚠ İSTİSNA: krokinin 4 DURUM RENGİ aynen korunur.
     orijinal #22c55e · boyalı #3b82f6 · değişen #ef4444 · lokal boyalı #f97316
     Bunlar shared/expertise_diagram.php'den gelir ve GARANTİ BELGESİNE de basılır.
     Arayüz aksanı değil, VERİ KODLAMASIDIR; donuklaştırılırsa ekran ile belge ayrışır.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --kroki-orijinal:#22c55e;
  --kroki-boyali:#3b82f6;
  --kroki-degisen:#ef4444;
  --kroki-lokal:#f97316;
}

/* ── ilerleme ── */
.ilerleme{display:grid; gap:var(--b2)}
.ilerleme .ust-satir{
  display:flex; align-items:center; gap:var(--b3); flex-wrap:wrap;
  font-size:var(--t-etiket); color:var(--ink-2);
}
.ilerleme .ust-satir .tnum{color:var(--ink-1); font-weight:600}
.ilerleme .cubuk{height:4px; background:var(--yuzey-4); border-radius:var(--r-hap); overflow:hidden}
.ilerleme .dolu{
  height:100%; width:var(--oran, 0%); border-radius:var(--r-hap); transition:width .25s ease;
  background:linear-gradient(90deg,var(--aksan),var(--iyi));
}

/* ── fotoğraf yuvaları ── */
.foto-izgara{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--b3)}
.foto{
  position:relative; aspect-ratio:4/3; border-radius:var(--r-kart); cursor:pointer;
  background:var(--yuzey-2); border:1px dashed var(--cizgi-2); color:var(--ink-1);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:var(--b3); transition:.14s ease; overflow:hidden;
}
.foto:hover{border-color:var(--cizgi-3); background:var(--yuzey-3)}
.foto:focus-visible{outline:none; box-shadow:var(--odak)}
.foto .aci{font-family:var(--f-baslik); font-size:var(--t-kucuk); font-weight:700}
.foto .ipucu{font-size:var(--t-mikro); color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em}
.foto .ikon{font-size:var(--t-buyuk); color:var(--ink-3); line-height:1}
.foto.dolu{
  border-style:solid; border-color:var(--cizgi-2);
  background:linear-gradient(160deg,var(--yuzey-4),var(--yuzey-2));
}
.foto.dolu .ikon{color:var(--iyi)}
.foto .rz{position:absolute; top:var(--b2); left:var(--b2)}
.foto .sil{
  position:absolute; top:var(--b2); right:var(--b2); width:30px; height:30px;
  border-radius:var(--r-kucuk); background:rgba(3,5,8,.7); border:1px solid var(--cizgi-2);
  color:var(--ink-2); display:none; place-items:center; cursor:pointer; font-size:var(--t-etiket);
}
.foto.dolu .sil{display:grid}

/* ── kontrol maddesi ── */
.madde{
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-radius:var(--r-kart);
  box-shadow:var(--halka); overflow:hidden;
}
.madde + .madde{margin-top:var(--b2)}
.madde.sorunlu{border-left:2px solid var(--uyari)}
.madde.eksik-kanit{border-left:2px solid var(--hata)}
.madde.temiz{border-left:2px solid var(--iyi)}
.madde-ust{display:flex; align-items:center; gap:var(--b4); padding:var(--b3) var(--b4); min-height:68px}
.madde-ust .sira{
  font-family:var(--f-mono); font-size:var(--t-mikro); color:var(--ink-3);
  min-width:20px; flex:0 0 auto;
}
.madde-ust .ad{flex:1 1 auto; min-width:0; font-family:var(--f-baslik); font-size:var(--t-kucuk); font-weight:600}
.madde-alt{
  border-top:1px solid var(--cizgi); padding:var(--b4); background:var(--yuzey-2);
  display:grid; gap:var(--b3);
}
.kanit-uyari{
  display:flex; gap:var(--b2); align-items:flex-start; font-size:var(--t-etiket);
  color:var(--hata);
}
.mini-foto{display:flex; gap:var(--b2); flex-wrap:wrap}
.mini-foto .kutu{
  width:72px; height:56px; border-radius:var(--r-kucuk); flex:0 0 auto;
  background:var(--yuzey-4); border:1px solid var(--cizgi-2); color:var(--ink-2);
  display:grid; place-items:center; font-size:var(--t-etiket); cursor:pointer;
}
.mini-foto .kutu.dolu{border-style:solid; color:var(--iyi); background:var(--iyi-sis)}
.mini-foto .ekle{border-style:dashed}

/* ── kaporta hasar satırı ── */
.hasar{display:grid; grid-template-columns:1.1fr 1fr 1.6fr auto; gap:var(--b2); align-items:end}
.hasar + .hasar{margin-top:var(--b2)}
.hasar .sil{
  width:var(--dokun); height:var(--dokun); border-radius:var(--r-kontrol); flex:0 0 auto;
  background:var(--hata-sis); border:1px solid rgba(216,135,123,.32); color:var(--hata);
  display:grid; place-items:center; cursor:pointer; font-size:var(--t-orta);
}

/* ── kroki ── */
.kroki-sar{
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-radius:var(--r-kart);
  padding:var(--b4); box-shadow:var(--halka);
}
.durum-sec{display:flex; gap:var(--b2); flex-wrap:wrap; margin-bottom:var(--b4)}
.durum-sec button{
  min-height:44px; padding:0 var(--b4); border-radius:var(--r-hap); cursor:pointer;
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); color:var(--ink-2);
  font-size:var(--t-etiket); font-weight:600; display:inline-flex; align-items:center; gap:var(--b2);
}
.durum-sec button .nokta{width:10px; height:10px; border-radius:var(--r-hap); flex:0 0 auto}
/* 4 durum renginin TEK KAYNAĞI burasıdır; JS'ten style yazılmaz. */
.nokta[data-durum="orijinal"]{background:var(--kroki-orijinal)}
.nokta[data-durum="boyali"]{background:var(--kroki-boyali)}
.nokta[data-durum="degisen"]{background:var(--kroki-degisen)}
.nokta[data-durum="lokal_boyali"]{background:var(--kroki-lokal)}
.durum-sec button.sec{background:var(--yuzey-4); color:var(--ink-1); border-color:var(--cizgi-3)}
.kroki{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.parca{
  min-height:52px; border-radius:var(--r-kucuk); cursor:pointer; padding:4px;
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); color:var(--ink-2);
  font-size:var(--t-mikro); line-height:1.25; display:grid; place-items:center; text-align:center;
  transition:.12s ease;
}
.parca:hover{border-color:var(--cizgi-3)}
.parca[data-durum="orijinal"]{background:rgba(34,197,94,.18); border-color:var(--kroki-orijinal); color:var(--ink-1)}
.parca[data-durum="boyali"]{background:rgba(59,130,246,.18); border-color:var(--kroki-boyali); color:var(--ink-1)}
.parca[data-durum="degisen"]{background:rgba(239,68,68,.18); border-color:var(--kroki-degisen); color:var(--ink-1)}
.parca[data-durum="lokal_boyali"]{background:rgba(249,115,22,.18); border-color:var(--kroki-lokal); color:var(--ink-1)}

/* ── imza ── */
.imza{
  height:150px; border:1px dashed var(--cizgi-2); border-radius:var(--r-kart);
  background:var(--yuzey-2); position:relative; touch-action:none; cursor:crosshair;
}
.imza canvas{width:100%; height:100%; display:block; border-radius:var(--r-kart)}
.imza .ipucu{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  color:var(--ink-3); font-size:var(--t-etiket);
}
.imza.cizildi .ipucu{display:none}

/* ── eksik listesi ── */
.eksikler{
  background:var(--uyari-sis); border:1px solid rgba(113,192,237,.30);
  border-radius:var(--r-kart); padding:var(--b4);
}
.eksikler h4{
  font-size:var(--t-mikro); text-transform:uppercase; letter-spacing:.13em;
  color:var(--uyari); font-weight:700; margin-bottom:var(--b3);
}
.eksikler ul{margin:0; padding:0; list-style:none; display:grid; gap:var(--b2)}
.eksikler li{font-size:var(--t-etiket); color:var(--ink-2); display:flex; gap:var(--b2)}
.eksikler li::before{content:'—'; color:var(--uyari); flex:0 0 auto}
/* Renkli zeminde ink-3 4.19:1 e dusuyordu (esik 4.5) */
.eksikler li.bilgi{color:var(--ink-2); opacity:.82}
.eksikler li.bilgi::before{content:'·'}

@media (max-width:1023px){
  .foto-izgara{grid-template-columns:repeat(2,1fr)}
  .kroki{grid-template-columns:repeat(4,1fr)}
  .hasar{grid-template-columns:1fr 1fr; }
  .hasar .sil{grid-column:2; justify-self:end}
}
@media (max-width:620px){
  .kroki{grid-template-columns:repeat(3,1fr)}
  .hasar{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   TASLAKLAR ve GİRİŞ
   Canlıda ikisi de AÇIK TEMA: taslaklar.php koyu üst bant + beyaz kartlar,
   login.php lacivert gradyan zemin + BEYAZ kart.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── sayaç kartları ── */
.sayaclar{display:grid; gap:var(--b3); grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); margin-bottom:var(--b5)}
.sayac{
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-left:2px solid var(--cizgi-3);
  border-radius:var(--r-kart); padding:var(--b4); box-shadow:var(--halka);
}
.sayac .rakam{
  font-family:var(--f-baslik); font-size:var(--t-dev); font-weight:800; line-height:1.05;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; display:block;
}
.sayac .et{
  font-size:var(--t-mikro); text-transform:uppercase; letter-spacing:.13em;
  color:var(--ink-3); font-weight:600; margin-top:var(--b1); display:block;
}
.sayac.ilgi{border-left-color:var(--hata)}      .sayac.ilgi .rakam{color:var(--hata)}
.sayac.bagli{border-left-color:var(--aksan)}    .sayac.bagli .rakam{color:var(--aksan)}
.sayac.devam{border-left-color:var(--uyari)}    .sayac.devam .rakam{color:var(--uyari)}
.sayac.terk{border-left-color:var(--ink-3)}     .sayac.terk .rakam{color:var(--ink-3)}

/* ── plaka rozeti ── */
.plaka-rz{
  font-family:var(--f-mono); font-size:var(--t-etiket); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap; position:relative; padding:5px var(--b3) 5px 18px;
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); border-radius:var(--r-kucuk);
  color:var(--ink-1); display:inline-block;
}
.plaka-rz::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:7px;
  background:var(--aksan); border-radius:var(--r-kucuk) 0 0 var(--r-kucuk);
}
.plaka-rz.bos{border-style:dashed; color:var(--ink-3)}
.plaka-rz.bos::before{background:var(--cizgi-3)}

/* ── kayıt kartı ── */
.kayit{
  display:flex; align-items:center; gap:var(--b4); flex-wrap:wrap;
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-left:2px solid var(--uyari);
  border-radius:var(--r-kart); padding:var(--b4); box-shadow:var(--halka); transition:.14s ease;
}
.kayit + .kayit{margin-top:var(--b2)}
.kayit:hover{border-color:var(--cizgi-2); border-left-color:var(--uyari)}
.kayit.bagli{border-left-color:var(--aksan)}
.kayit.ilgi{border-left-color:var(--hata)}
.kayit.terk{border-left-color:var(--ink-3)}
.kayit .ana{flex:1 1 300px; min-width:0; display:grid; gap:6px}
.kayit .bas{display:flex; align-items:center; gap:var(--b3); flex-wrap:wrap}
.kayit .bas b{font-family:var(--f-baslik); font-size:var(--t-govde); font-weight:600}
.kayit .meta{font-size:var(--t-etiket); color:var(--ink-3); display:flex; gap:var(--b2); flex-wrap:wrap}
.kayit .cipler{display:flex; gap:var(--b2); flex-wrap:wrap}
.kayit .eylemler{display:flex; gap:var(--b2); flex-wrap:wrap; flex:0 0 auto}

/* ── bölüm başlığı (taslaklar) ── */
.tbolum{margin-top:var(--b6)}
.tbolum:first-of-type{margin-top:0}
.tbolum .bas{display:flex; align-items:center; gap:var(--b3); flex-wrap:wrap; margin-bottom:var(--b2)}
.tbolum .bas h3{font-family:var(--f-baslik); font-size:var(--t-orta); font-weight:700}
.tbolum .bas .nokta{width:10px; height:10px; border-radius:var(--r-hap); flex:0 0 auto}
.tbolum > p{color:var(--ink-3); font-size:var(--t-etiket); margin:0 0 var(--b3)}

/* ── boş durum ── */
.bos-kutu{
  border:1px dashed var(--cizgi-2); border-radius:var(--r-kart); padding:var(--b7) var(--b4);
  text-align:center; background:var(--yuzey-1);
}
.bos-kutu .ikon{font-size:var(--t-buyuk); color:var(--ink-3); display:block; margin-bottom:var(--b2)}
.bos-kutu b{font-family:var(--f-baslik); font-size:var(--t-kucuk); display:block; margin-bottom:4px}
.bos-kutu span{color:var(--ink-3); font-size:var(--t-etiket); max-width:46ch; display:inline-block}

/* ── giriş ekranı ── */
.giris-sar{
  min-height:100vh; display:grid; place-items:center; padding:var(--b5);
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(113,192,237,.10), transparent 70%),
    var(--zemin);
}
.giris-kart{
  width:100%; max-width:404px; background:var(--yuzey-1);
  border:1px solid var(--cizgi-2); border-radius:var(--r-kart);
  padding:var(--b7) var(--b6); box-shadow:var(--halka-ust), var(--golge-yumusak);
  position:relative; overflow:hidden;
}
.giris-kart::before{content:''; position:absolute; inset:0 0 auto; height:2px; background:var(--aksan-hat)}
.giris-marka{display:grid; justify-items:center; gap:var(--b3); margin-bottom:var(--b6)}
.giris-marka .logo{width:52px; height:52px; border-radius:var(--r-kart)}
.giris-marka b{font-family:var(--f-baslik); font-size:var(--t-orta); font-weight:800}
.giris-marka span{
  font-size:var(--t-mikro); text-transform:uppercase; letter-spacing:.16em; color:var(--ink-3);
}
.giris-hata{
  background:var(--hata-sis); border:1px solid rgba(216,135,123,.30); color:var(--hata);
  border-radius:var(--r-kontrol); padding:var(--b3) var(--b4); font-size:var(--t-etiket);
  display:flex; gap:var(--b2); margin-bottom:var(--b4);
}
.giris-dip{
  margin-top:var(--b5); padding-top:var(--b4); border-top:1px solid var(--cizgi);
  text-align:center; font-size:var(--t-mikro); color:var(--ink-3); letter-spacing:.05em;
}

/* ── onay diyaloğu ── */
.modal{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(3,5,8,.78); padding:var(--b5); backdrop-filter:blur(3px);
}
.modal-kart{
  width:100%; max-width:440px; background:var(--yuzey-2);
  border:1px solid var(--cizgi-2); border-radius:var(--r-kart); padding:var(--b6);
  box-shadow:var(--halka-ust), var(--golge-yumusak); position:relative; overflow:hidden;
}
.modal-kart::before{content:''; position:absolute; inset:0 0 auto; height:2px; background:var(--aksan-hat)}
.modal-kart h3{font-family:var(--f-baslik); font-size:var(--t-orta); font-weight:700; margin-bottom:var(--b3)}
.modal-kart p{color:var(--ink-2); font-size:var(--t-kucuk); line-height:1.6; margin:0}
.modal-kart p b{color:var(--ink-1)}
.modal-kart .sira .dg{flex:1 1 0}

/* ── bölüm noktası renkleri (taslaklar) ── */
.tbolum .nokta[data-b="ilgi"]{background:var(--hata)}
.tbolum .nokta[data-b="bagli"]{background:var(--aksan)}
.tbolum .nokta[data-b="devam"]{background:var(--uyari)}
.tbolum .nokta[data-b="terk"]{background:var(--ink-3)}

/* ═══════════════════════════════════════════════════════════════════════
   TELEFON TAŞMA DÜZELTMESİ
   Kök neden (ölçüldü): 390px ekranda belge 604px oluyordu.
   (a) Üst bar daralmıyordu — içindeki metinler white-space:nowrap ve
       esneme payı yok; flex satırı içerik genişliğine kilitleniyordu.
   (b) Grid çocuklarında min-width:0 yoktu — CSS Grid'de öğelerin
       varsayılan min-width'i AUTO'dur, yani içerikten küçülemezler.
   ═══════════════════════════════════════════════════════════════════════ */
.uyg, .govde, .sol, .sag-panel, .ust, .ray{min-width:0}
.sol > *, .para-ic > *{min-width:0}
.foto-izgara > *, .koruma > *, .ozet > *, .form-izgara > *,
.sayaclar > *, .ikili > *, .hasar > *, .kroki > *{min-width:0}

@media (max-width:620px){
  .ust{flex-wrap:wrap; padding-block:var(--b2); height:auto; min-height:var(--ust-h)}
  .ust .arac{margin-left:var(--b2); flex:1 1 100%; order:3; gap:var(--b2)}
  .ust .arac .kullanici{white-space:normal}
  .ust .sag{gap:var(--b2)}
  .ust .sag .kullanici{display:none}      /* kim olduğu alt barda zaten belli */
  .uyg{grid-template-rows:auto var(--ray-h) 1fr}
  .foto-izgara{grid-template-columns:repeat(2,1fr)}
  .foto .ipucu{display:none}              /* dar ekranda açı adı yeter */
  .eylem{grid-template-columns:1fr; gap:var(--b2)}
  .eylem .dg{width:100%}
  .liste-ust{flex-wrap:wrap}
  .bolum-bas{flex-wrap:wrap}
}

/* ═══════════════════════════════════════════════════════════════════════
   HİZMET YAPILANDIRMA MODALI
   Şirketin ANA hizmetleri (PPF 96/97, seramik 98, cam filmi 99, ayna 100)
   burada yapılandırılır. Üretilen veri: ppfType · ppfColor · coverageType ·
   selectedParts · partIds · partNames · partFilmTypes
   Bu yüzey olmadan `selected_parts` NULL kalır, usta ne yapacağını görmez,
   parça bazlı prim ve ekstra PPF talebi zinciri kopar.
   ═══════════════════════════════════════════════════════════════════════ */
.yap-modal{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:rgba(3,5,8,.82); padding:var(--b4); backdrop-filter:blur(4px);
}
.yap-kart{
  width:100%; max-width:880px; max-height:92vh; background:var(--yuzey-1);
  border:1px solid var(--cizgi-2); border-radius:var(--r-kart);
  box-shadow:var(--halka-ust), var(--golge-yumusak);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
}
.yap-kart::before{content:''; position:absolute; inset:0 0 auto; height:2px; background:var(--aksan-hat); z-index:1}
.yap-ust{
  display:flex; align-items:center; gap:var(--b4); padding:var(--b5);
  border-bottom:1px solid var(--cizgi); background:var(--yuzey-2); flex-wrap:wrap;
}
.yap-ust h3{font-family:var(--f-baslik); font-size:var(--t-orta); font-weight:700; flex:1 1 220px; min-width:0}
.yap-ust .kapat{
  width:var(--dokun); height:var(--dokun); border-radius:var(--r-kontrol); flex:0 0 auto;
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; font-size:var(--t-orta);
}
.yap-ust .kapat:hover{background:var(--yuzey-4); color:var(--ink-1)}
.yap-adimlar{display:flex; gap:var(--b2); flex-wrap:wrap}
.yap-adim{
  display:inline-flex; align-items:center; gap:6px; padding:5px var(--b3);
  border-radius:var(--r-hap); font-size:var(--t-mikro); font-weight:700;
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.06em;
}
.yap-adim.aktif{background:var(--aksan-sis); color:var(--aksan); border-color:rgba(113,192,237,.30)}
.yap-adim.bitti{background:var(--iyi-sis); color:var(--iyi); border-color:rgba(143,191,154,.30)}
.yap-govde{flex:1 1 auto; overflow-y:auto; padding:var(--b5); min-height:0}
.yap-dip{
  border-top:1px solid var(--cizgi); padding:var(--b4) var(--b5); background:var(--yuzey-2);
  display:flex; gap:var(--b3); align-items:center; flex-wrap:wrap;
}
.yap-dip .ozet{flex:1 1 200px; min-width:0; font-size:var(--t-etiket); color:var(--ink-2)}
.yap-dip .ozet b{color:var(--ink-1)}

/* ── seçenek ızgarası (tip / renk) ── */
.secenek{display:grid; gap:var(--b2); grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.secenek button{
  min-height:var(--dokun); padding:var(--b3) var(--b4); text-align:left; cursor:pointer;
  background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:var(--r-kontrol);
  color:var(--ink-1); transition:.14s ease; display:grid; gap:2px;
}
.secenek button:hover{border-color:var(--cizgi-3); background:var(--yuzey-3)}
.secenek button:focus-visible{outline:none; box-shadow:var(--odak)}
.secenek button.sec{background:var(--yuzey-4); border-color:var(--aksan)}
.secenek button b{font-family:var(--f-baslik); font-size:var(--t-kucuk); font-weight:600}
.secenek button small{color:var(--ink-3); font-size:var(--t-mikro)}

/* ── kroki / parça ızgarası ── */
.parca-izgara{display:grid; gap:6px; grid-template-columns:repeat(4,1fr)}
.parca-izgara > *{min-width:0}
.p-btn{
  min-height:52px; padding:var(--b2); cursor:pointer; text-align:center;
  background:var(--yuzey-2); border:1px solid var(--cizgi-2); border-radius:var(--r-kucuk);
  color:var(--ink-2); font-size:var(--t-mikro); line-height:1.25; transition:.12s ease;
  display:grid; place-items:center;
}
.p-btn:hover{border-color:var(--cizgi-3); color:var(--ink-1)}
.p-btn:focus-visible{outline:none; box-shadow:var(--odak)}
.p-btn.sec{background:var(--aksan-sis); border-color:var(--aksan); color:var(--ink-1); font-weight:600}
.p-btn.kilit{opacity:.55; cursor:default}
.p-btn .film{
  display:block; font-family:var(--f-mono); font-size:var(--t-mikro); letter-spacing:.04em;
  color:var(--aksan); margin-top:2px;
}

/* ── cam başına film tipi ── */
.cam-satir{
  display:flex; align-items:center; gap:var(--b3); padding:var(--b3);
  background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:var(--r-kontrol);
  flex-wrap:wrap;
}
.cam-satir + .cam-satir{margin-top:var(--b2)}
.cam-satir .ad{flex:1 1 130px; min-width:0; font-size:var(--t-kucuk); font-weight:600}
.cam-satir .secimler{display:flex; gap:6px; flex-wrap:wrap}
.cam-satir .f{
  min-height:44px; padding:0 var(--b3); border-radius:var(--r-kucuk); cursor:pointer;
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); color:var(--ink-2);
  font-size:var(--t-mikro); font-weight:600; white-space:nowrap;
}
.cam-satir .f:hover{color:var(--ink-1); border-color:var(--cizgi-3)}
.cam-satir .f:focus-visible{outline:none; box-shadow:var(--odak)}
.cam-satir .f.sec{background:var(--aksan-sis); color:var(--aksan); border-color:rgba(113,192,237,.34)}
.cam-satir .f.air{border-style:dashed}

@media (max-width:820px){ .parca-izgara{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .parca-izgara{grid-template-columns:repeat(2,1fr)} .yap-kart{max-height:96vh} }


/* ═══════════════════════════════════════════════════════════════════════
   PREMİUM KATMAN (13.09.2026)
   Kullanıcı: "tasarımsal açıdan son derece premium… müşteriler bu ekranları
   görüyor çok ama çok şık olmalı gerekirse arkaplan animasyonları geçiş
   tıklama efektleri vs olmalı çok şık olmalı renk paleti."

   Önceki katman bilinçli olarak sönüktü (doygunluk %36, platin düğme,
   sıfır hareket). Bu katman onu geçersiz kılmaz, ÜSTÜNE gelir: aynı
   tokenler, aynı ölçüler, üstüne atmosfer + derinlik + hareket.

   ÖLÇÜLMÜŞ KARARLAR
   · Birincil düğme marka degradesi; ama camgöbeği ucu (#22D3EE) beyaz metinle
     2,8:1 — okunmaz. Düğme yalnız indigo→mor (#4A66E0→#7C5CE0): beyaz metin
     4,9:1 / 4,7:1 ✓. Camgöbeği saç teli imzada kalır.
   · Cam (backdrop-filter) yalnız 4 büyük yüzeyde: üst bar, ray, sağ panel,
     modal. Onlarca kartta blur iPad GPU'sunu yorar; kartlar opak + parlaklık.
   · Aurora 48sn, yalnız transform; layout tetiklemez. Gren 3,5% — bantlanmayı
     kırar, dokunmayı hissettirir.
   · prefers-reduced-motion:reduce → tüm animasyon ve geçişler kapanır.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ana-deg:linear-gradient(135deg,#4A66E0 0%,#6A63E4 55%,#7C5CE0 100%);
  --ana-ink:#FFFFFF;
  --ana-parilti:0 14px 34px -12px rgba(113,192,237,.62), inset 0 1px 0 rgba(255,255,255,.28);
  --ana-parilti-ust:0 18px 42px -12px rgba(113,192,237,.78), inset 0 1px 0 rgba(255,255,255,.34);
  --odak:0 0 0 3px rgba(113,192,237,.48);
  --sirt:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 42%);
  --cam-yuzey:rgba(10,13,18,.74);
  --kart-golge:0 22px 44px -26px rgba(0,0,0,.85);
  --kart-golge-ust:0 0 0 1px rgba(113,192,237,.28), 0 26px 50px -22px rgba(113,192,237,.30);
  --para-deg:linear-gradient(180deg,#FFF0BE 0%,#F2CC7A 70%,#D9AE5C 100%);
  --aksan-acik:#9FB2FF; --aksan-acik-2:#B7C4FF; --aksan-canli:#6C8CFF;
  --hiz-1:.16s; --hiz-2:.28s; --hiz-3:.48s;
  --egri:cubic-bezier(.2,.75,.2,1);
}

/* ── ATMOSFER ── */
body{background:var(--zemin); position:relative}
body::before{
  content:''; position:fixed; inset:-22%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(113,192,237,.13), transparent 65%),
    radial-gradient(42% 46% at 82% 18%, rgba(113,192,237,.16), transparent 66%),
    radial-gradient(48% 52% at 60% 88%, rgba(113,192,237,.13), transparent 68%);
  filter:blur(46px); will-change:transform;
  animation:ug-aurora 48s ease-in-out infinite alternate;
}
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
@keyframes ug-aurora{
  0%  {transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50% {transform:translate3d(3%,-2%,0) rotate(4deg) scale(1.06)}
  100%{transform:translate3d(-2%,3%,0) rotate(-3deg) scale(1.03)}
}
.uyg, .giris{position:relative; z-index:1}

/* ── CAM YÜZEYLER (yalnız 4 büyük yüzey) ── */
.ust{background:var(--cam-yuzey); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%)}
.ray{background:rgba(3,5,8,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.sag-panel{background:var(--cam-yuzey); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%)}
.yap-modal{background:rgba(3,5,8,.72); backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%)}

/* ── MARKA İŞARETİ: canlı, nefes alan ── */
.logo{
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 22px -8px rgba(113,192,237,.75);
  animation:ug-nefes 6s ease-in-out infinite;
}
@keyframes ug-nefes{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 22px -8px rgba(113,192,237,.55)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 30px -8px rgba(113,192,237,.85)}}
.ust::after{height:2px; opacity:.95; box-shadow:0 0 18px rgba(113,192,237,.35)}

/* ── ADIM RAYI ── */
.ray-a{transition:background var(--hiz-2) var(--egri), color var(--hiz-2), border-color var(--hiz-2), transform var(--hiz-1)}
.ray-a.aktif{
  background:linear-gradient(180deg,rgba(113,192,237,.16),rgba(113,192,237,.08));
  border-color:rgba(113,192,237,.42);
  box-shadow:0 0 0 1px rgba(113,192,237,.12), 0 10px 24px -14px rgba(113,192,237,.55);
}
.ray-a.aktif .no{background:var(--ana-deg); color:var(--ana-ink); box-shadow:0 4px 12px -4px rgba(113,192,237,.7)}
.ray-a.bitti .no{box-shadow:inset 0 0 0 1px rgba(143,191,154,.35)}

/* ── KARTLAR: sırt parlaklığı + kalkma ── */
.kart, .kalem, .toplam, .teklif, .bkart, .kayit, .bos, .foto, .madde, .giris-kart, .sayac, .gsatir{
  background-image:var(--sirt);
  box-shadow:var(--halka), var(--kart-golge);
  transition:transform var(--hiz-2) var(--egri), box-shadow var(--hiz-2) var(--egri),
             border-color var(--hiz-2), background-color var(--hiz-2);
}
.kart:hover, .kayit:hover, .bkart:hover, .gsatir:hover{transform:translateY(-2px); box-shadow:var(--halka-ust), var(--kart-golge-ust); border-color:rgba(113,192,237,.36)}
.kart.secili{
  background-color:var(--yuzey-2);
  box-shadow:var(--halka-ust), 0 0 0 1px rgba(113,192,237,.55), 0 0 44px -12px rgba(113,192,237,.45);
  border-color:rgba(113,192,237,.55);
}
.kart .tik{background:var(--ana-deg); color:var(--ana-ink); box-shadow:0 4px 12px -4px rgba(113,192,237,.7)}
.kart.secili .yapilandir{color:var(--aksan-acik)}

/* ── PARA: rakam altın degradeli ── */
.toplam .rakam, .kart .fiyat, .kalem-tutar .son, .sayac .rakam{
  background:var(--para-deg); -webkit-background-clip:text; background-clip:text;
  color:transparent; text-shadow:none;
}
.toplam .rakam{filter:drop-shadow(0 6px 18px rgba(242,204,122,.22))}

/* ── DÜĞMELER ── */
.dg{transition:transform var(--hiz-1) var(--egri), box-shadow var(--hiz-2) var(--egri), background var(--hiz-2), border-color var(--hiz-2), filter var(--hiz-2); position:relative; overflow:hidden; isolation:isolate}
.dg-ana{background:var(--ana-deg); color:var(--ana-ink); box-shadow:var(--ana-parilti); border-color:transparent}
.dg-ana:hover{background:var(--ana-deg); filter:brightness(1.07); box-shadow:var(--ana-parilti-ust); transform:translateY(-1px)}
.dg-ana:active, .dg-ana.basili{transform:translateY(0) scale(.985); filter:brightness(.98); box-shadow:var(--ana-parilti)}
.dg-ikinci{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) , var(--yuzey-3); box-shadow:var(--halka)}
.dg-ikinci:hover{transform:translateY(-1px); box-shadow:var(--halka-ust), 0 12px 24px -16px rgba(0,0,0,.9)}
.dg:active, .dg.basili{transform:scale(.985)}
.dg-ana:focus-visible, .dg:focus-visible{box-shadow:var(--odak), var(--ana-parilti)}

/* ── DALGA (ripple) ── */
.dalga{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,.10) 40%, transparent 70%);
  transform:scale(0); opacity:.9; animation:ug-dalga .55s var(--egri) forwards;
}
.dg-ana .dalga{background:radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 40%, transparent 70%)}
@keyframes ug-dalga{to{transform:scale(1); opacity:0}}
.kart, .secenek button, .p-btn, .ray-a, .kat, .pil, .seg button, .foto, .kayit, .cam-satir .f{position:relative; overflow:hidden; isolation:isolate}
.kart > *, .secenek button > *, .p-btn > *{position:relative; z-index:1}
.secenek button, .p-btn, .kat, .cam-satir .f, .pil, .seg button{transition:transform var(--hiz-1) var(--egri), background var(--hiz-2), border-color var(--hiz-2), color var(--hiz-2), box-shadow var(--hiz-2)}
.secenek button.basili, .p-btn.basili, .kat.basili, .kart.basili{transform:scale(.975)}
.secenek button.sec{border-color:rgba(113,192,237,.6); box-shadow:0 0 0 1px rgba(113,192,237,.25), 0 10px 26px -14px rgba(113,192,237,.6)}
.p-btn.sec{box-shadow:0 0 0 1px rgba(113,192,237,.3)}

/* ── KADEMELİ GİRİŞ ── */
@keyframes ug-gir{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.ug-gir{animation:ug-gir var(--hiz-3) var(--egri) both; animation-delay:calc(var(--i,0) * 48ms)}

/* ── MODAL GİRİŞİ ── */
@keyframes ug-perde{from{opacity:0}to{opacity:1}}
@keyframes ug-kart-gir{from{opacity:0; transform:translateY(16px) scale(.965)}to{opacity:1; transform:none}}
.yap-modal:not(.gizli){animation:ug-perde var(--hiz-2) ease-out both}
.yap-modal:not(.gizli) .yap-kart{animation:ug-kart-gir var(--hiz-3) var(--egri) both; box-shadow:var(--halka-ust), 0 40px 90px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(113,192,237,.12)}
.yap-kart::before{box-shadow:0 0 22px rgba(113,192,237,.45)}
.yap-adim.aktif{background:linear-gradient(180deg,rgba(113,192,237,.18),rgba(113,192,237,.08)); color:var(--aksan-acik-2); border-color:rgba(113,192,237,.4)}

/* ── BİLDİRİM ── */
@keyframes ug-bildirim{from{opacity:0; transform:translateY(10px) scale(.98)}to{opacity:1; transform:none}}
.bildirim:not(.gizli){animation:ug-bildirim var(--hiz-2) var(--egri) both; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}

/* ── GİRİŞ EKRANI ── */
.giris-kart{backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); background-color:rgba(10,13,18,.7)}

/* ── FORM ALANLARI ── */
input:not([type=checkbox]):not([type=radio]), select, textarea{
  transition:border-color var(--hiz-2), box-shadow var(--hiz-2), background var(--hiz-2);
}
/* [TUR 4] odak halkası markanın mavisi — eski altın turdan kalan !important kuralı buydu */
input:focus, select:focus, textarea:focus{border-color:rgba(113,192,237,.65) !important; box-shadow:0 0 0 3px rgba(113,192,237,.20)}

/* ── KAYDIRMA ÇUBUĞU / SEÇİM ── */
::selection{background:rgba(113,192,237,.35); color:var(--ink-1)}
.sol::-webkit-scrollbar, .yap-govde::-webkit-scrollbar, .para-ic::-webkit-scrollbar{width:8px}
.sol::-webkit-scrollbar-thumb, .yap-govde::-webkit-scrollbar-thumb, .para-ic::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10); border-radius:var(--r-hap); border:2px solid transparent; background-clip:padding-box}
.sol::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18); background-clip:padding-box}

/* ── TİPOGRAFİ İNCE AYAR ── */
h1,h2,h3{letter-spacing:-.028em}
.toplam .etiket, .bolum-bas .etiket, .yapilandir{letter-spacing:.14em}

/* ── AZALTILMIŞ HAREKET ── */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation:none !important; transition:none !important}
  body::before{filter:blur(46px)}
  .ug-gir{opacity:1; transform:none}
}

/* ── FOLYO BLOĞU (kapı kolu + ayna, full PPF'te zorunlu) — canlı 13.09 ── */
.folyo-blok{
  margin-top:var(--b4); padding:var(--b4); border-radius:var(--r-kart);
  background:linear-gradient(180deg,rgba(113,192,237,.10),rgba(113,192,237,.05));
  border:1px solid rgba(113,192,237,.30); box-shadow:var(--halka);
}
.folyo-blok .bolum-bas{margin-top:0}
.folyo-blok .not{margin:0 0 var(--b3)}
.folyo-satir{flex-direction:column; align-items:stretch; gap:var(--b2)}
.folyo-satir .ad{flex:0 0 auto}
.folyo-satir .secimler{flex-wrap:wrap}
.folyo-satir .ek{display:flex; gap:var(--b2); align-items:center; flex-wrap:wrap}
.folyo-satir .ek select.gir{width:150px; min-height:44px; padding:0 var(--b3)}
.folyo-satir .ek .gir-son{width:150px}
.folyo-satir .f.sec{background:rgba(113,192,237,.16); color:var(--uyari); border-color:rgba(113,192,237,.45)}

/* ═══ PREMİUM · İKİNCİ GEÇİŞ (13.09) — görüntü ölçüldü, üç eksik ═══
   1) Aurora ilk geçişte yalnız köşelerde hissediliyordu (alfa .13–.16): zemin
      hâlâ düz siyah okunuyordu. Alfa .20–.28, blur 70px, üstüne vinyet: kenarlar
      merkezden koyu → derinlik.
   2) Giriş ekranı: küçük sola yaslı düğme, kahraman anı yok. Düğme tam genişlik,
      logo arkasında nefes alan hale (yalnız CSS, işaretleme değişmedi).
   3) Kategori şeridi .kat değil .kat-serit button — aktif degrade oraya. */
body::before{
  background:
    radial-gradient(44% 48% at 14% 18%, rgba(113,192,237,.20), transparent 64%),
    radial-gradient(46% 50% at 86% 14%, rgba(113,192,237,.28), transparent 66%),
    radial-gradient(54% 58% at 58% 92%, rgba(113,192,237,.22), transparent 68%),
    radial-gradient(30% 34% at 40% 50%, rgba(113,192,237,.10), transparent 70%);
  filter:blur(70px);
}
.uyg::before, .giris-sar::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(3,5,8,.55) 100%);
}
.uyg > *, .giris-sar > *{position:relative; z-index:1}

/* kart sırtı daha görünür */
.kart, .kalem, .toplam, .teklif, .bkart, .kayit, .foto, .madde, .giris-kart, .sayac, .gsatir{
  background-image:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 38%);
  border-color:rgba(255,255,255,.09);
}
.kart:hover{background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 40%)}

/* kategori şeridi */
.kat-serit button{position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--hiz-1) var(--egri), background var(--hiz-2), border-color var(--hiz-2), color var(--hiz-2), box-shadow var(--hiz-2)}
.kat-serit button.basili{transform:scale(.975)}
.kat-serit button.sec{
  background:linear-gradient(180deg,rgba(113,192,237,.18),rgba(113,192,237,.08));
  border-color:rgba(113,192,237,.42);
  box-shadow:0 0 0 1px rgba(113,192,237,.12), 0 10px 24px -14px rgba(113,192,237,.55);
}
.kat-serit button.sec .adet{background:var(--ana-deg); color:var(--ana-ink)}

/* giriş: kahraman anı */
.giris-kart{padding:var(--b7) var(--b6); max-width:520px}
.giris-marka{position:relative; margin-bottom:var(--b6)}
.giris-marka::before{
  content:''; position:absolute; left:50%; top:26px; width:220px; height:220px;
  transform:translate(-50%,-50%); border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(113,192,237,.30), rgba(113,192,237,.14) 45%, transparent 70%);
  filter:blur(18px); animation:ug-hale 7s ease-in-out infinite;
}
@keyframes ug-hale{0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.85}50%{transform:translate(-50%,-50%) scale(1.18); opacity:1}}
.giris-marka .logo{width:64px; height:64px; border-radius:var(--r-kart)}
.giris-marka b{font-size:var(--t-buyuk)}
.giris-kart form{display:grid; gap:var(--b4)}
.giris-kart .dg-ana{width:100%; margin-top:var(--b2)}
.giris-dip{margin-top:var(--b5)}

/* modal özeti: çipler (ayraç noktaları alt satıra düşüyordu) */
.yap-dip .ozet{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.yap-dip .ozet .rz{text-transform:none; letter-spacing:0; font-size:var(--t-etiket); font-weight:600}
/* kontrol: "Kontrolü Tamamla" 1180px'de iki satıra kırılıyordu (ölçüldü) */
.eylem .dg-ana{padding:0 var(--b4); white-space:nowrap}

/* ═══ ÖZELLİK EŞİTLİĞİ (13.09) — G1 değişim · G9 kontrol kartı · G11 araç anahtarı ·
   G12 periyodik kontrol · genel yardımcılar ═══ */
.ray-a.atlandi{opacity:.45; text-decoration:line-through; text-decoration-color:var(--ink-3)}
.degisim-bas{display:flex; flex-direction:column; gap:6px; padding:var(--b3) 0 var(--b4); border-bottom:1px dashed var(--cizgi-2); margin-bottom:var(--b3)}
.bkart.sec{border-color:rgba(113,192,237,.55); background-color:var(--yuzey-2); box-shadow:var(--halka-ust), 0 0 0 1px rgba(113,192,237,.25)}
.bkart.yeni{border-style:dashed}
.bkart.yeni .saat{background:var(--aksan-sis); color:var(--aksan)}
.bkart .bilgi .ipucu{display:block; color:var(--aksan); margin-top:2px}
.islem-sec{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--b3); margin-bottom:var(--b3)}
.islem-sec .kart{min-height:96px}
.kontrol-kart{
  position:relative; padding:var(--b4); margin-bottom:var(--b5); border-radius:var(--r-kart);
  background:linear-gradient(180deg,rgba(143,191,154,.12),rgba(143,191,154,.05)); border:1px solid rgba(143,191,154,.35);
  box-shadow:var(--halka);
}
.kontrol-kart .bas{display:flex; align-items:center; gap:var(--b3); flex-wrap:wrap; font-family:var(--f-baslik); font-size:var(--t-kucuk)}
.kontrol-kart .plaka{font-family:var(--f-mono); letter-spacing:.06em; background:var(--yuzey-3); border:1px solid var(--cizgi-2); padding:4px var(--b3); border-radius:var(--r-kontrol); margin-left:auto}
.kontrol-kart .sat{display:flex; gap:var(--b2); align-items:center; flex-wrap:wrap; margin-top:var(--b2); color:var(--ink-2); font-size:var(--t-etiket)}
.kontrol-kart code{font-family:var(--f-mono); color:var(--ink-1)}
.onay.kilitli{opacity:.6; cursor:not-allowed}
.onay.kilitli .metin b{color:var(--uyari)}
.dg.kucuk{min-height:44px; padding:0 var(--b3); font-size:var(--t-etiket)}

/* periyodik kontrol */
.pk-arama{display:grid; grid-template-columns:1fr auto; gap:var(--b3); align-items:end}
.plaka-gir{font-family:var(--f-mono); letter-spacing:.08em; font-size:var(--t-orta); min-height:var(--dokun-ana)}
.pk-hero{padding:var(--b5); border-radius:var(--r-kart); background:var(--yuzey-1); background-image:var(--sirt); border:1px solid rgba(255,255,255,.09); box-shadow:var(--halka), var(--kart-golge); margin-bottom:var(--b5); position:relative; overflow:hidden}
.pk-hero::before{content:''; position:absolute; inset:0 0 auto; height:2px; background:var(--aksan-hat)}
.pk-hero .bas{display:flex; align-items:center; gap:var(--b4); flex-wrap:wrap; margin-bottom:var(--b4)}
.pk-hero .plaka-buyuk{font-family:var(--f-mono); font-size:var(--t-dev); letter-spacing:.1em; font-weight:500; color:var(--ink-1)}
.pk-hero .piller{display:flex; gap:var(--b2); flex-wrap:wrap; margin-left:auto}
.pk-hero .ozet{margin:0}
.zaman{display:grid; gap:var(--b3); margin-bottom:var(--b5)}
.zaman-k{
  text-align:left; cursor:pointer; color:var(--ink-1); padding:var(--b4); border-radius:var(--r-kart);
  background:var(--yuzey-1); background-image:var(--sirt); border:1px solid var(--cizgi); border-left:3px solid var(--iyi);
  display:grid; gap:6px; box-shadow:var(--halka); transition:transform var(--hiz-2) var(--egri), border-color var(--hiz-2);
}
.zaman-k.dolmus{border-left-color:var(--ink-3); opacity:.9}
.zaman-k:hover{transform:translateY(-1px); border-color:var(--cizgi-3)}
.zaman-k:focus-visible{outline:none; box-shadow:var(--odak)}
.zaman-k .ust{display:flex; align-items:center; gap:var(--b3); flex-wrap:wrap; font-size:var(--t-kucuk)}
.zaman-k .ust .rz{margin-left:auto}
.zaman-k .tar{font-size:var(--t-etiket); color:var(--ink-3)}
.zaman-k .hiz{display:flex; gap:6px; flex-wrap:wrap}
.zaman-k .kod{font-size:var(--t-etiket); color:var(--aksan)}
.zaman-k .detay{margin-top:var(--b2); padding-top:var(--b2); border-top:1px dashed var(--cizgi-2); font-size:var(--t-etiket); color:var(--ink-2)}
.zaman-k .detay ul{margin:6px 0 0; padding-left:0; list-style:none; display:grid; gap:4px}
.mono{font-family:var(--f-mono); letter-spacing:.04em}
.radyo{display:grid; gap:var(--b2)}
.radyo button{
  display:flex; align-items:center; gap:var(--b3); text-align:left; cursor:pointer; color:var(--ink-1);
  min-height:var(--dokun); padding:var(--b3); border-radius:var(--r-kontrol);
  background:var(--yuzey-2); border:1px solid var(--cizgi); transition:border-color var(--hiz-2), background var(--hiz-2);
}
.radyo button .nokta{width:18px; height:18px; border-radius:50%; border:2px solid var(--cizgi-3); flex:0 0 auto; position:relative}
.radyo button.sec{border-color:rgba(113,192,237,.55); background:var(--yuzey-3)}
.radyo button.sec .nokta{border-color:var(--aksan-canli)}
.radyo button.sec .nokta::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--ana-deg)}
.radyo button .bilgi{display:grid; gap:2px; min-width:0}
.radyo button small{color:var(--ink-3); font-size:var(--t-mikro)}
.randevu-k .eylemler{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.randevu-k.kontrol{border-color:rgba(227,199,126,.35)}
.basari{padding:var(--b6) var(--b5); border-radius:var(--r-kart); background:var(--yuzey-1); background-image:var(--sirt); border:1px solid rgba(143,191,154,.35); box-shadow:var(--halka), var(--kart-golge); display:grid; gap:var(--b4); justify-items:start}
.basari h2{font-size:var(--t-buyuk)}
.hsatir .plaka{font-family:var(--f-mono); letter-spacing:.06em; background:var(--yuzey-3); border:1px solid var(--cizgi-2); padding:4px var(--b3); border-radius:var(--r-kontrol); font-size:var(--t-etiket); white-space:nowrap}
@media (max-width:700px){ .islem-sec{grid-template-columns:1fr} .pk-arama{grid-template-columns:1fr} }

.randevu-k .bilgi b{white-space:normal; overflow:visible; text-overflow:clip; display:flex; gap:6px; flex-wrap:wrap; align-items:center}

/* [13.09 denetim] etiket degradeli fiyatın dışında; dar modal sınıfı (satır içi style yerine) */
.kart .fiyat-not{font-size:var(--t-mikro); color:var(--ink-3); font-weight:500; letter-spacing:.06em; margin-top:-2px}
.yap-kart.dar{max-width:560px}

/* ═══════════════════════════════════════════════════════════════════════════
   TUR 4 — MARKA (14.09.2026)

   Kullanıcı: "web sitesinin renkleri logo renkleri göz önüne alarak… olay
   sadece renkler değil: anlaşılırlık, kullanışlılık, animasyonlar, şık sadelik."

   RENK ARTIK TAHMİN DEĞİL, ÖLÇÜM:
   assets/images/logo.png piksel piksel örneklendi (800×542).
     · şeridin açık ucu   #71C0ED   (gök mavisi)
     · şeridin gövdesi    #4050A0   (lacivert — pikselin %23,5'i, en baskın renk)
     · şeridin pembe ucu  #DB3D8E   (magenta)
     · geçiş tonları      #8E5FC0 · #A070B0 · #C060A0
   Zemin, kurumsal sitenin kendi koyularından: #030508 / #0a0d12 / #111419
   (assets/css/site.css :root). Tipografi de siteyle aynı: Plus Jakarta Sans + Inter.

   SADELEŞTİRME KARARLARI (asıl şikâyet "karışık"tı):
   1. Marka degradesi SAYFADA TEK YERDE: ana eylem düğmesi + logo. Başka hiçbir
      yerde degrade yok — ne metinde, ne kenarlıkta, ne zeminde.
   2. Tek yükseklik düzlemi: gölge yok, ayrım ince çizgi ve boşlukla kurulur.
   3. Kart üç satır: ad → fiyat → tek ipucu. "BAŞLANGIÇ" gibi büyük harfli
      mikro etiketler kaldırıldı (fiyatın yanında zaten anlamı yok).
   4. Rozetler dolgusuz; yalnız DURUM taşıyanlar renkli.
   5. Köşe üç değere indi: 12 / 10 / 8. Sekmelerde 0.
   6. Yazı ölçeği daraltıldı; ağırlık farkı boyut farkının yerini aldı.

   HAREKET (amaçlı, prefers-reduced-motion'a saygılı):
   adım geçişi · kart seçimi · sepete giriş · aktif sekme çizgisinin kayması ·
   ana düğmede degradenin ısınması · modalin yükselmesi · tutarın sayması.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── zemin: kurumsal sitenin koyuları ── */
  --zemin:#05070C; --yuzey-1:#0A0E16; --yuzey-2:#111724; --yuzey-3:#18202F; --yuzey-4:#212B3D;
  --cizgi:#1B2331; --cizgi-2:#26314695; --cizgi-3:#36435E;
  /* ink-3 ölçüldü: #727F94 koyu yüzeyde 4.03:1 kalıyordu (eşik 4.5) → yükseltildi */
  --ink-1:#F4F7FC; --ink-2:#B2BECF; --ink-3:#8A97AC;

  /* ── marka: logodan örneklenen üç renk ── */
  --m-mavi:#71C0ED; --m-lacivert:#4050A0; --m-pembe:#DB3D8E; --m-mor:#8E5FC0;

  --aksan:#71C0ED;                      /* bilgi ve vurgu: gök mavisi */
  --aksan-koyu:#4E8FB8; --aksan-mor:#8E5FC0; --aksan-cam:#71C0ED;
  --aksan-acik:#9BD3F3; --aksan-acik-2:#BFE3F8; --aksan-canli:#71C0ED;
  --aksan-sis:rgba(113,192,237,.12);
  --aksan-hat:linear-gradient(90deg,rgba(113,192,237,0),rgba(113,192,237,.7) 20%,rgba(113,192,237,.7) 80%,rgba(113,192,237,0));

  /* şerit: yalnız ana eylemde ve logoda */
  --ana-deg:linear-gradient(100deg,#4E63C8 0%,#8E5FC0 50%,#DB3D8E 100%);
  --ana-ink:#FFFFFF;
  --marka-isaret:var(--ana-deg);
  --ana-parilti:0 10px 28px -16px rgba(142,95,192,.55);
  --ana-parilti-ust:0 14px 34px -16px rgba(219,61,142,.5);

  --platin:#F4F7FC; --platin-ust:#FFFFFF; --platin-ink:#05070C; --koyu-ink:#05070C;
  --para:#F4F7FC; --para-sis:rgba(113,192,237,.10);
  --para-deg:none;

  --iyi:#5BC98E;   --iyi-sis:rgba(91,201,142,.12);
  --uyari:#E3A44B; --uyari-sis:rgba(227,164,75,.12);
  --hata:#E5687A;  --hata-sis:rgba(229,104,122,.12);

  --f-baslik:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-govde:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* daha dar ölçek: 8 boy yerine gerçekte 6 kademe kullanılıyor */
  --t-mikro:11px; --t-etiket:13px; --t-kucuk:15px; --t-govde:16px;
  --t-orta:19px; --t-buyuk:24px; --t-dev:30px; --t-tutar:40px;

  --r-kart:12px; --r-kontrol:10px; --r-kucuk:8px; --r-sifir:0;
  --odak:0 0 0 3px rgba(113,192,237,.38);
  --halka:none; --halka-ust:none; --sirt:none;
  --kart-golge:none; --kart-golge-ust:0 0 0 1px rgba(113,192,237,.30);
  --golge-yumusak:none; --golge-eylem:none;
  --cam-yuzey:var(--yuzey-1);

  --hiz-1:.14s; --hiz-2:.22s; --hiz-3:.34s;
  --egri:cubic-bezier(.2,.7,.3,1);
}

/* ── zemin sakin: aurora, gren, vinyet yok ────────────────────────────────── */
body{background:var(--zemin)}
body::before{display:none}
body::after{display:none}
.uyg::before, .giris-sar::before{background:none}

/* ── tipografi: ağırlık farkı, boyut farkının yerine ───────────────────────── */
h1,h2,h3,h4{font-family:var(--f-baslik); font-weight:700; letter-spacing:-.015em}
.bolum-bas h3, .liste-ust h2{font-size:var(--t-orta); font-weight:700}
.bolum-bas .not, .liste-ust .not{font-size:var(--t-etiket); color:var(--ink-3); font-weight:400}
.et{font-size:var(--t-mikro); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600}

/* ── üst bar ───────────────────────────────────────────────────────────────── */
.ust{background:var(--zemin); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--cizgi)}
.ust::after{display:none}
.ust .baslik{font-family:var(--f-baslik); font-weight:800; letter-spacing:.02em; font-size:var(--t-kucuk); text-transform:none; color:var(--ink-1)}
.kullanici{color:var(--ink-3); font-size:var(--t-etiket)}

/* logo: markanın kendi işareti (yer tutucu harf yok) */
.logo{
  background:var(--zemin); border:0; box-shadow:none; animation:none; overflow:hidden;
  display:grid; place-items:center; border-radius:var(--r-kucuk);
}
.logo::after{content:none}
.logo::before{
  content:''; display:block; width:100%; height:100%;
  /* [CANLI GECIS 14.09] Yol TOKENDAN gelir: prototipte logo.png CSS'in yaninda,
     canlida /assets/images/logo.png. Sayfa --ug-logo ezerse oraya bakar. */
  background:var(--ug-logo, url('logo.png')) center/contain no-repeat;
}
.giris-marka .logo{width:64px; height:64px}

.plaka{background:var(--yuzey-2); border:1px solid var(--cizgi-2); border-radius:var(--r-kucuk); color:var(--ink-1)}

/* ── adım rayı: kayan alt çizgi ────────────────────────────────────────────── */
.ray{background:var(--zemin); backdrop-filter:none; -webkit-backdrop-filter:none; gap:var(--b5); border-bottom:1px solid var(--cizgi)}
.ray-c{display:none}                        /* raylar arası bağlantı çizgisi: gürültü */
.ray-a, .ray-a.aktif, .ray-a.bitti{
  background:none; border:0; border-radius:var(--r-sifir); box-shadow:none; transform:none;
  padding:0 10px; min-width:44px; min-height:var(--ray-h); position:relative; color:var(--ink-3);
  transition:color var(--hiz-2) var(--egri);
}
.ray-a::after{
  content:''; position:absolute; left:10px; right:10px; bottom:0; height:2px; border-radius:2px;
  background:var(--aksan); transform:scaleX(0); transform-origin:center;
  transition:transform var(--hiz-3) var(--egri);
}
.ray-a.aktif{color:var(--ink-1)}
.ray-a.aktif::after{transform:scaleX(1)}
.ray-a.bitti{color:var(--ink-2)}
.ray-a:hover{color:var(--ink-2)}
.ray-a .no{
  background:var(--yuzey-2); color:var(--ink-3); border:1px solid var(--cizgi-2);
  box-shadow:none; transition:background var(--hiz-2), color var(--hiz-2), border-color var(--hiz-2);
}
.ray-a.aktif .no{background:var(--aksan-sis); color:var(--aksan); border-color:rgba(113,192,237,.45)}
.ray-a.bitti .no{background:var(--iyi-sis); color:var(--iyi); border-color:rgba(91,201,142,.35)}

/* ── kategori şeridi: aynı sekme dili ──────────────────────────────────────── */
.kat-serit button, .kat-serit button.sec{
  background:none; border:0; border-radius:var(--r-sifir); box-shadow:none; transform:none;
  padding:0 10px; min-width:44px; min-height:48px; color:var(--ink-3); position:relative;
  transition:color var(--hiz-2) var(--egri);
}
.kat-serit button::after{
  content:''; position:absolute; left:10px; right:10px; bottom:0; height:2px; border-radius:2px;
  background:var(--aksan); transform:scaleX(0); transition:transform var(--hiz-3) var(--egri);
}
.kat-serit button.sec{color:var(--ink-1)}
.kat-serit button.sec::after{transform:scaleX(1)}
.kat-serit button:hover{color:var(--ink-2)}
.kat-serit .adet, .kat-serit button.sec .adet{
  background:var(--yuzey-3); color:var(--ink-3); border:0; font-size:var(--t-mikro);
}
.kat-serit button.sec .adet{background:var(--aksan-sis); color:var(--aksan)}

/* ── hizmet kartları: üç satır, tek yüzey ──────────────────────────────────── */
.kart{
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-radius:var(--r-kart);
  box-shadow:none; transition:border-color var(--hiz-2) var(--egri), background var(--hiz-2), transform var(--hiz-1) var(--egri);
}
.kart:hover{border-color:var(--cizgi-3); background:var(--yuzey-2)}
.kart:active{transform:scale(.992)}
.kart.secili{border-color:rgba(113,192,237,.55); background:var(--yuzey-2); box-shadow:inset 0 0 0 1px rgba(113,192,237,.28)}
.kart h4{font-size:var(--t-kucuk); font-weight:700; letter-spacing:-.01em}
.kart .aciklama{color:var(--ink-3); font-size:var(--t-etiket)}
.kart .fiyat{
  display:inline; font-family:var(--f-baslik); font-weight:800; font-size:var(--t-orta);
  color:var(--ink-1); background:none; -webkit-text-fill-color:currentColor;
}
.kart .fiyat-not{
  display:inline; margin-left:7px; text-transform:none; letter-spacing:0;
  font-size:var(--t-etiket); color:var(--ink-3); font-weight:500;
}
.kart .yapilandir{
  text-transform:none; letter-spacing:0; font-size:var(--t-etiket); font-weight:500; color:var(--ink-3);
}

/* ── sepet / kalem satırları: kutu değil, çizgi ────────────────────────────── */
.kalem{background:none; background-image:none; border:0; border-bottom:1px solid var(--cizgi); border-radius:var(--r-sifir)}
.kalem:hover{background:var(--yuzey-1)}
.kalem-ad{font-weight:600; color:var(--ink-1)}
.kalem-detay, .kalem-alt{color:var(--ink-3); font-size:var(--t-etiket)}
.secilen{
  background:none; border:0; border-bottom:1px solid var(--cizgi); border-radius:var(--r-sifir);
  animation:ug-sepete-gir var(--hiz-3) var(--egri) both;
}
.toplam{background:none; background-image:none; border:0; border-top:1px solid var(--cizgi-3); border-radius:var(--r-sifir); box-shadow:none; padding-left:0; padding-right:0}

/* ── para paneli: tek büyük sayı ───────────────────────────────────────────── */
.tutar, .para-ic .tutar{
  font-family:var(--f-baslik); font-weight:800; color:var(--ink-1);
  background:none; -webkit-text-fill-color:currentColor; letter-spacing:-.02em;
}
.sag-panel, .para-dip{background:var(--zemin); border-left:1px solid var(--cizgi)}
.brut{color:var(--ink-3)}

/* ── düğmeler: degrade YALNIZ ana eylemde ──────────────────────────────────── */
.dg{
  border-radius:var(--r-kontrol); font-family:var(--f-baslik); font-weight:700;
  transition:background var(--hiz-2) var(--egri), border-color var(--hiz-2), color var(--hiz-2), transform var(--hiz-1);
}
.dg:active{transform:scale(.98)}
.dg-ana{
  background:var(--ana-deg); background-size:180% 100%; background-position:0% 50%;
  color:var(--ana-ink); border:0; box-shadow:var(--ana-parilti); border-radius:var(--r-kontrol);
  transition:background-position var(--hiz-3) var(--egri), box-shadow var(--hiz-2), transform var(--hiz-1);
}
.dg-ana:hover{background-position:100% 50%; box-shadow:var(--ana-parilti-ust)}
.dg-ikinci{background:var(--yuzey-2); border:1px solid var(--cizgi-2); color:var(--ink-1)}
.dg-ikinci:hover{border-color:var(--cizgi-3); background:var(--yuzey-3)}
.dg-hayalet{background:none; border:1px solid var(--cizgi-2); color:var(--ink-2)}
.dg-hayalet:hover{color:var(--ink-1); border-color:var(--cizgi-3)}
.dg-iyi{background:var(--iyi-sis); border:1px solid rgba(91,201,142,.35); color:var(--iyi)}
.dg-tehlike{background:var(--hata-sis); border:1px solid rgba(229,104,122,.35); color:var(--hata)}
.eylem .dg-ana{padding-inline:var(--b3); min-width:0}

/* ── rozetler: dolgusuz, sessiz ────────────────────────────────────────────── */
.rz{background:none; border:1px solid var(--cizgi-2); color:var(--ink-2); font-weight:600; border-radius:var(--r-kucuk)}
.rz-iyi{border-color:rgba(91,201,142,.40); color:var(--iyi); background:var(--iyi-sis)}
.rz-uyari{border-color:rgba(227,164,75,.40); color:var(--uyari); background:var(--uyari-sis)}
.rz-hata{border-color:rgba(229,104,122,.40); color:var(--hata); background:var(--hata-sis)}
.rz-aksan{border-color:rgba(113,192,237,.40); color:var(--aksan); background:var(--aksan-sis)}
.rz-para{border-color:rgba(113,192,237,.30); color:var(--ink-2); background:none}
.rz-notr{border-color:var(--cizgi-2); color:var(--ink-3); background:none}

/* ── formlar ───────────────────────────────────────────────────────────────── */
.alan{background:var(--yuzey-1); border:1px solid var(--cizgi-2); border-radius:var(--r-kontrol); color:var(--ink-1);
      transition:border-color var(--hiz-2), box-shadow var(--hiz-2)}
.alan:hover{border-color:var(--cizgi-3)}
.alan:focus{border-color:rgba(113,192,237,.6); box-shadow:var(--odak); outline:none}
.seg, .segment{background:var(--yuzey-1); border:1px solid var(--cizgi-2); border-radius:var(--r-kontrol)}
.seg button.sec, .segment button.sec, .secenek.sec{background:var(--aksan-sis); color:var(--aksan); border-color:rgba(113,192,237,.45)}

/* ── kartlar/kutular: tek düzlem ───────────────────────────────────────────── */
.ozet-kart, .kutu, .detay-kutu, .bkart, .teklif-kart, .kontrol-kart, .giris-kart, .yap-kart, .modal-kart{
  background:var(--yuzey-1); border:1px solid var(--cizgi); border-radius:var(--r-kart); box-shadow:none;
}
.bkart:hover{border-color:var(--cizgi-3); background:var(--yuzey-2)}
.bkart.sec{border-color:rgba(113,192,237,.55); background:var(--yuzey-2); box-shadow:inset 0 0 0 1px rgba(113,192,237,.25)}
.bkart.yeni .saat{background:var(--aksan-sis); color:var(--aksan)}
.teklif{border-color:rgba(113,192,237,.35)}
.pk-hero{background:var(--yuzey-1); border:1px solid var(--cizgi)}

/* ── modal: yükselerek gelir ───────────────────────────────────────────────── */
.yap-modal, .modal{background:rgba(5,7,12,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.yap-kart, .modal-kart{animation:ug-modal-gir var(--hiz-3) var(--egri) both}
.yap-ust, .yap-dip{background:var(--yuzey-1); border-color:var(--cizgi)}
.yap-adim{color:var(--ink-3)}
.yap-adim.aktif{color:var(--aksan)}

/* ── hareket ───────────────────────────────────────────────────────────────── */
@keyframes ug-modal-gir{from{opacity:0; transform:translateY(12px) scale(.995)} to{opacity:1; transform:none}}
@keyframes ug-sepete-gir{from{opacity:0; transform:translateX(10px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
                         transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ── dikey/dar uyarlama ────────────────────────────────────────────────────── */
@media (max-width:820px){
  .ray{gap:var(--b3)}
  .ray-a{padding:0 8px}
}

/* ═══ TUR 4 · GÖZLE DENETİM DÜZELTMELERİ ══════════════════════════════════════
   Ekran görüntüleri ölçüldükten sonra bulunan beş gerçek kusur. Hepsi TUR 2/3
   katmanlarından artakalan süslerdi; sadeleşme kararıyla çelişiyorlardı.     */

/* 1) Her kartın/panelin tepesindeki 2px renkli şerit — yedi ayrı yerde vardı,
      ekranı çizgilerle bölüyordu. Vurgu tek yerde (ana eylem) kalsın.        */
.ust::after, .toplam::before, .kart.secili::before, .giris-kart::before,
.modal-kart::before, .yap-kart::before, .pk-hero::before{content:none !important}

/* 2) Logo "nefes alan" gölge + altın hale taşıyordu (eski altın turdan kalma);
      gerçek logo geldiği için süse gerek yok.                                */
.logo{box-shadow:none !important; animation:none !important}
.ust::after{box-shadow:none}

/* 3) .alan bir SARMALAYICI (label + içindeki kontrol), kontrolün kendisi değil.
      Kenarlığı ona verince etiket çerçevenin üstüne biniyordu (giriş ekranı). */
.alan{background:none; border:0; border-radius:var(--r-sifir); box-shadow:none}
.alan:hover, .alan:focus{border:0; box-shadow:none}
.alan input, .alan select, .alan textarea{
  background:var(--yuzey-1); border:1px solid var(--cizgi-2); border-radius:var(--r-kontrol);
  color:var(--ink-1); transition:border-color var(--hiz-2), box-shadow var(--hiz-2);
}
.alan input:hover, .alan select:hover, .alan textarea:hover{border-color:var(--cizgi-3)}
.alan input:focus, .alan select:focus, .alan textarea:focus{
  border-color:rgba(113,192,237,.65); box-shadow:var(--odak); outline:none;
}

/* 4) Teklif bandı hâlâ altın/kehribardı (eski tur). Markanın mavisine geçti;
      "dikkat" değil "bilgi" taşıyor.                                          */
.teklif{background:var(--aksan-sis); border-color:rgba(113,192,237,.32)}
.teklif .rz, .teklif-ust .rz{border-color:rgba(113,192,237,.40); color:var(--aksan); background:none}
.teklif .tutar, .teklif-ust .tutar, .teklif .mono{color:var(--ink-1)}

/* 5) Sağ rayda boş sepette duran "0 hizmet" çipi gürültüydü — JS artık boşken
      gizliyor; burada da güvenlik ağı.                                        */
.rz.gizli{display:none !important}

/* ═══ TUR 4 · ikinci gözle denetim ═════════════════════════════════════════ */

/* Giriş ekranındaki sarı hale (eski altın turdan kalma) kaldırıldı; marka
   işareti kendi rengiyle zaten görünüyor, arkasına ışık gerekmiyor. */
.giris-sar{background:var(--zemin)}
.giris-marka::before{content:none}
.giris-marka .logo{background:none}
.logo{background:none}

/* Teklif bandı: kalan turuncu vurgular markanın mavisine geçti. */
.teklif-ust .ok{color:var(--aksan)}
.teklif .rz-uyari, .teklif-ust .rz-uyari{
  border-color:rgba(113,192,237,.40); color:var(--aksan); background:var(--aksan-sis);
}
.teklif .para, .teklif-ust .para, .teklif-ust b, .teklif-ust .tnum{color:var(--ink-1)}
.teklif .fark, .teklif-ust .fark{color:var(--ink-1)}

/* ═══ TUR 4 · üçüncü gözle denetim ═════════════════════════════════════════ */

/* Seçili çipler (folyo tipi, film no…) altın metinle kalmıştı — marka mavisi. */
.secenek button.sec, .seg button.sec, .hizli button.sec{color:var(--aksan)}
.hizli button.sec{background:var(--aksan-sis); border-color:rgba(113,192,237,.34)}
.teklif button{color:var(--aksan)}
.teklif-ust .ok{color:var(--aksan)}

/* Periyodik kontrol randevu kartı: rozet metnin üstüne biniyordu, eylemler
   dar sütunda kırılıyordu (TUR 3'te çözülmüştü, katman değişince geri geldi). */
.randevu-k{flex-wrap:wrap; align-items:flex-start}
.randevu-k .bilgi{flex:1 1 0; min-width:0}
.randevu-k .bilgi small{display:block; line-height:1.45}
.randevu-k .bilgi .rz{display:inline-block; margin-top:6px}
.randevu-k .eylemler{
  display:flex; flex-direction:row; justify-content:flex-end; gap:8px;
  flex:1 0 100%; margin-top:4px; padding-top:10px; border-top:1px solid var(--cizgi);
}
.randevu-k .eylemler .dg{white-space:nowrap; justify-content:center}

/* ═══ İKONLAR — [TUR 4] ════════════════════════════════════════════════════
   24×24 çizgi ikonlar; rengi bulundukları yerden alır (currentColor).
   Metinle aynı hizada dursun diye optik hizalama uygulanır. */
.ik{
  width:20px; height:20px; flex:0 0 auto; display:inline-block;
  vertical-align:-4px; color:inherit;
}
.ik-buyuk{width:28px; height:28px; vertical-align:-7px}
.ik-dev{width:44px; height:44px}

/* kategori şeridi: ikon + ad + adet */
.kat-serit button{display:inline-flex; align-items:center; gap:8px}
.kat-serit button .ik{width:18px; height:18px; opacity:.9}

/* hizmet kartı: ikon başlığın üstünde, sessiz bir rozet içinde */
.kart .kart-ik{
  width:38px; height:38px; border-radius:var(--r-kucuk); display:grid; place-items:center;
  background:var(--yuzey-3); color:var(--aksan); margin-bottom:var(--b2);
  transition:background var(--hiz-2) var(--egri), color var(--hiz-2);
}
.kart:hover .kart-ik{background:var(--aksan-sis)}
.kart.secili .kart-ik{background:var(--aksan-sis); color:var(--aksan)}

/* boş durum: büyük, sessiz ikon */
.bos .ik-dev, .bos-kutu .ik-dev{color:var(--ink-3); opacity:.45; margin-bottom:var(--b3)}

/* kontrol: fotoğraf yuvası ve sekme ikonları */
.foto .ik-buyuk{color:var(--ink-3)}
.foto.dolu .ik-buyuk{color:var(--iyi)}
.kat-serit button .ik, .ray-a .ik{opacity:.85}

/* kontrol: bölüm rayında ikon + metin */
.ray-a{display:inline-flex; align-items:center; gap:8px}
.ray-a .ik{width:18px; height:18px}
/* fotoğraf yuvasındaki ikon kutusu */
.foto .ikon{display:grid; place-items:center; color:var(--ink-3)}
.foto.dolu .ikon{color:var(--iyi)}

/* ═══ EŞİTLİK 2 · yeni yüzeyler ══════════════════════════════════════════ */

/* randevu arama (müşteri adımı) */
.randevu-ara{margin-top:var(--b2)}
.randevu-ara input{font-size:var(--t-kucuk)}

/* değişim toplu düğmeleri */
.dugmeler.alt-b2{margin-bottom:var(--b2)}
.dugmeler{display:flex; gap:var(--b2); flex-wrap:wrap}
.dg.kucuk{min-height:44px; padding:0 var(--b3); font-size:var(--t-etiket)}  /* parmak eşiği 44 */

/* özel hizmet modalı: dar kart */
.yap-kart.dar{max-width:560px}

/* başarı ekranı (iş emri oluşturuldu) */
body.basari-acik .govde, body.basari-acik .ray, body.basari-acik .sag-panel{display:none}
.basari-sar{display:grid; place-items:center; min-height:calc(100vh - var(--ust-h)); padding:var(--b6)}
.basari-kart{
  width:min(560px, 100%); text-align:center; background:var(--yuzey-1); border:1px solid var(--cizgi);
  border-radius:var(--r-kart); padding:var(--b7) var(--b6);
  animation:ug-modal-gir var(--hiz-3) var(--egri) both;
}
.basari-ikon{display:inline-grid; place-items:center; width:72px; height:72px; border-radius:var(--r-hap);
  background:var(--iyi-sis); color:var(--iyi); margin-bottom:var(--b4)}
.basari-kart h2{font-size:var(--t-buyuk); margin:0 0 var(--b2)}
.basari-kart .not{color:var(--ink-3); margin:0 0 var(--b4)}
.garanti-kod{
  font-family:var(--f-mono); font-size:var(--t-dev); font-weight:700; letter-spacing:.06em;
  color:var(--ink-1); background:var(--yuzey-2); border:1px dashed var(--cizgi-3);
  border-radius:var(--r-kontrol); padding:var(--b4); margin:0 0 var(--b5);
}
.basari-kart .dugmeler{justify-content:center}

/* kontrol: fotoğraf yuvası — iki kaynak, önizleme */
.foto{display:grid; gap:var(--b2); justify-items:center; text-align:center; padding:var(--b4)}
.foto .foto-kaynak{display:flex; gap:var(--b2); flex-wrap:wrap; justify-content:center; margin-top:var(--b1)}
.foto .foto-onizle{
  background:none; border:0; color:var(--iyi); font-weight:600; font-size:var(--t-etiket);
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; min-height:44px; padding:0 var(--b3);
  border-radius:var(--r-kucuk);
}
.foto .foto-onizle:hover{background:var(--iyi-sis)}
.foto.dolu{border-style:solid; border-color:rgba(91,201,142,.35)}
.foto .rz{position:absolute; top:var(--b2); right:var(--b2)}
.foto{position:relative}

/* kroki toplu düğmeler */
#krokiToplu{margin-bottom:var(--b3)}

/* kilit */
body.kilitli .foto .foto-kaynak, body.kilitli #krokiToplu, body.kilitli .madde .segment{opacity:.35; pointer-events:none}
body.kilitli .parca-izgara button{pointer-events:none; opacity:.7}
body.kilitli .durum-sec{pointer-events:none; opacity:.5}

/* ışıklı kutu */
.isikli{position:fixed; inset:0; z-index:1200; background:rgba(5,7,12,.92); display:grid;
        grid-template-columns:64px 1fr 64px; align-items:center}
.isikli-govde{display:grid; place-items:center; height:100%}
.isikli-kare{
  width:min(72vw, 720px); aspect-ratio:4/3; max-height:78vh; display:grid; place-content:center;
  justify-items:center; gap:var(--b3); background:var(--yuzey-2); border:1px solid var(--cizgi-2);
  border-radius:var(--r-kart); color:var(--ink-2);
}
.isikli-kare .ik-dev{width:96px; height:96px; color:var(--aksan)}
.isikli-kare b{font-size:var(--t-orta); color:var(--ink-1)}
.isikli-kare small{color:var(--ink-3)}
.isikli-ok, .isikli-kapat{
  background:none; border:0; color:var(--ink-1); font-size:var(--t-dev); line-height:1; cursor:pointer;
  width:56px; height:56px; display:grid; place-items:center; border-radius:var(--r-hap);
  justify-self:center;
}
.isikli-ok:hover, .isikli-kapat:hover{background:rgba(255,255,255,.08)}
.isikli-kapat{position:absolute; top:var(--b4); right:var(--b4); font-size:var(--t-buyuk)}

/* periyodik: randevu oluştur + slot ızgarası */
.bolum h4{display:flex; align-items:center; gap:var(--b2); flex-wrap:wrap}
.bolum h4 .sag-yasla{margin-left:auto}
.slotlar{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:var(--b2); margin-top:var(--b1)}
.slotlar .slot{
  min-height:44px; border-radius:var(--r-kucuk); border:1px solid var(--cizgi-2); background:var(--yuzey-1);
  color:var(--ink-1); font-family:var(--f-mono); font-size:var(--t-etiket); cursor:pointer;
  transition:border-color var(--hiz-2), background var(--hiz-2);
}
.slotlar .slot:hover{border-color:var(--cizgi-3)}
.slotlar .slot.sec{background:var(--aksan-sis); border-color:rgba(113,192,237,.5); color:var(--aksan)}
.slotlar .slot.dolu{opacity:.45; cursor:not-allowed; text-decoration:line-through}
.slotlar .not.hata{color:var(--hata)}

/* ═══ ASİSTAN · KENETLENME FORMÜLÜ ═══════════════════════════════════════
   "Uyurken küçük, konuşurken büyük." Söyleyecek bir şeyi yokken karakter
   köşeye 44px'lik bir sekme gibi kenetlenir (yarısı dışarıda, hafif soluk);
   dokununca ya da mesaj gelince tam boya çıkar, balon açılır. Kural CSS'te,
   durum sınıflarını canlıdaki ug-assistant.js verir — JS değişmedi. */
.ugas{transition:right var(--hiz-3) var(--egri)}
.ugas:not(.is-uyari):not(.is-oneri):not(.is-kutlama):not(.is-dusunme):not(.is-acik):not(.has-mesaj) .ugas-bot{
  width:56px; height:56px; opacity:.55;
  transform:translateX(38%) scale(.9);
  transition:transform var(--hiz-3) var(--egri), opacity var(--hiz-2), width var(--hiz-3), height var(--hiz-3);
}
.ugas:not(.is-uyari):not(.is-oneri):not(.is-kutlama):not(.is-dusunme):not(.is-acik):not(.has-mesaj) .ugas-bot:hover,
.ugas:not(.is-uyari):not(.is-oneri):not(.is-kutlama):not(.is-dusunme):not(.is-acik):not(.has-mesaj) .ugas-bot:focus-visible{
  opacity:1; transform:translateX(0) scale(1);
}
/* mesaj var / açık / durumlu: tam boy, yerinde */
.ugas.is-uyari .ugas-bot, .ugas.is-oneri .ugas-bot, .ugas.is-kutlama .ugas-bot,
.ugas.is-dusunme .ugas-bot, .ugas.is-acik .ugas-bot, .ugas.has-mesaj .ugas-bot{
  transform:translateX(0) scale(1); opacity:1;
}

/* modal alt çubuğundaki özet metni (özel hizmet, yeni randevu) */
.yap-ozet{color:var(--ink-3); font-size:var(--t-etiket); align-self:center}
/* kenetli hâlde kapsayıcı da kenara yaslanır: sekme ekran kenarından taşar,
   dokununca/mesajda 22px içeri döner (.ugas{transition:right} yukarıda). */
/* [TUR 7] right:-14px ile kapsayıcı ekran DIŞINA taşıyordu; Chrome mobil emülasyonu (ve iOS Safari) sabit kutuyu
   sayfa genişliğine katıp yerleşim görünümünü 392-396px'e büyütüyordu (periyodik-kontrol telefonda yatay kayma).
   Kapsayıcı kenarda kalır (right:0), sekme görünümü "yarısı dışarıda" hissi için bot transform ile kaydırılır ve
   kapsayıcı taşan kısmı KIRPAR: aynı görünüm, sıfır yerleşim taşması. */
.ugas:not(.is-uyari):not(.is-oneri):not(.is-kutlama):not(.is-dusunme):not(.is-acik):not(.has-mesaj){right:0; overflow:hidden; padding-left:6px}
.ugas:not(.is-uyari):not(.is-oneri):not(.is-kutlama):not(.is-dusunme):not(.is-acik):not(.has-mesaj):hover{right:6px}

/* fotoğraf yuvası: iki kaynak düğmesi alt alta sığsın — sabit yükseklik/oran yerine içerik kadar */
.foto{height:auto; min-height:190px; aspect-ratio:auto; overflow:visible; padding:var(--b4) var(--b3)}
.foto .foto-kaynak{flex-direction:column; align-items:stretch; width:100%; gap:6px}
.foto .foto-kaynak .dg{width:100%; justify-content:center}
.foto .aci{font-weight:700}
/* dolu yuvada "Çekildi" rozeti yön ikonuna binmesin: rozet sol üstte, ikon rozetin altından başlar */
.foto .rz{top:var(--b2); left:var(--b2); right:auto}
.foto.dolu{padding-top:calc(var(--b4) + 26px)}

/* ═══════════════════════════════════════════════════════════════════════
   TUR 7 · MOBİL & TABLET DÜZENİ, GEÇİŞ ve SEÇİM HAREKETİ (14.09.2026)
   Ölçüm: telefon 390×844 ve iPad dikey 820×1180 görüntülerinde sağ panel
   46vh'lik sabit levha olarak ekranın yarısını kapatıyordu; adım rayı
   ("Müşt", "Ara") ve kategori sekmeleri ("Korum", "Loj") kelime ortasından
   kesiliyordu (overflow:hidden → flex min-width 0); alt çubuk iki satır
   (2×56px) yer yiyordu; asistan Geri düğmesinin kenarına biniyordu.
   Karar: ≤1023px'te iki kolon TEK AKIŞA döner — sol içerik, ardından sağ
   panel içeriği doğal akışta (hiçbir alan gizlenmez, zorunlu alanlar
   erişilir); eylem çubuğu ekrana sabitlenir; üstünde tek satır ÖZET ŞERİDİ
   (toplam / ilerleme) durur, dokununca özete kaydırır. iPad yatay (1180)
   iki kolon kalır.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--alt-yigin:0px}

/* ── ray ve sekmeler: KESİLMEZ, kayar ── */
.ray-a{flex:0 0 auto}
.ray{scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth}
.ray::-webkit-scrollbar{display:none}
.ray-a .no{transition:background var(--hiz-2), color var(--hiz-2), border-color var(--hiz-2), transform var(--hiz-2)}
.kat-serit button{flex:0 0 auto; scroll-snap-align:center}
.kat-serit{scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none}
.kat-serit::-webkit-scrollbar{display:none}

/* ── üst bar bağlantıları (canlı: Kontrol · Taslaklar · Çıkış) ── */
.ust-baglar{display:flex; align-items:center; gap:2px}
.ust-bag{
  display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 10px;
  border-radius:var(--r-kontrol); color:var(--ink-3); text-decoration:none;
  font-size:var(--t-etiket); font-weight:600; border:1px solid transparent;
  transition:color var(--hiz-2), background var(--hiz-2), border-color var(--hiz-2);
}
.ust-bag .ik{width:17px; height:17px; opacity:.9}
.ust-bag:hover{color:var(--ink-1); background:var(--yuzey-2); border-color:var(--cizgi)}
.ust-bag:focus-visible{outline:none; box-shadow:var(--odak); color:var(--ink-1)}
.ust-bag.cikis:hover{color:var(--hata)}
.ust .sag .ust-baglar + .kullanici{padding-left:var(--b3); border-left:1px solid var(--cizgi)}
@media (max-width:820px){
  .ust-bag .ad{display:none}
  .ust-bag{min-width:44px; min-height:44px; justify-content:center; padding:0}
}

/* ── özet şeridi (yalnız ≤1023) ── */
.levha-serit{display:none}

@media (max-width:1023px){
  .uyg{height:auto; min-height:100vh; min-height:100dvh; grid-template-rows:auto auto 1fr}
  .ust{position:static}
  .ray{position:sticky; top:0; z-index:59; background:var(--zemin)}
  .govde{display:block}
  .sol{overflow:visible; overflow-x:clip; padding-bottom:var(--b4)}
  /* backdrop-filter / transform / filter sabit konumlu torunlara KAPSAYICI BLOK olur: alt çubuk sayfanın
     dibine yapışırdı. Mobilde panel düz akışta, cam efektine gerek yok. */
  .sag-panel{display:block; max-height:none; border:0; box-shadow:none; background:transparent;
    backdrop-filter:none; -webkit-backdrop-filter:none; filter:none; transform:none; will-change:auto}
  .para-ic{
    border-top:1px solid var(--cizgi); background:var(--yuzey-1);
    padding:var(--b4) var(--b4) calc(var(--alt-yigin) + var(--b5));
    scroll-margin-top:calc(var(--ray-h) + var(--b3));
  }
  .para-ic.ug-vurgu{animation:ug-vurgu 1.1s ease-out}
  .para-dip{
    position:fixed; left:0; right:0; bottom:0; z-index:70; grid-template-columns:minmax(0,1fr);
    padding:var(--b2) var(--b4) calc(var(--b3) + env(safe-area-inset-bottom));
    background:var(--zemin); border-top:1px solid var(--cizgi);
    box-shadow:0 -18px 40px -22px rgba(0,0,0,.9);
  }
  .sag-panel .bildirim{
    position:fixed; left:var(--b4); right:var(--b4); bottom:calc(var(--alt-yigin) + var(--b3)); z-index:71;
    border:1px solid var(--cizgi-2); border-radius:var(--r-kart); box-shadow:var(--golge-yumusak);
  }
  .eylem{grid-template-columns:auto minmax(0,1fr); gap:var(--b2)}
  .eylem .dg-ikinci{padding:0 var(--b4)}
  .eylem .dg{min-width:0; padding-inline:var(--b3)}
  .ugas{bottom:calc(var(--alt-yigin) + 12px) !important}

  .levha-serit{
    display:flex; align-items:center; gap:var(--b2); width:100%; min-height:44px;
    padding:0 var(--b2) 0 var(--b3); margin-bottom:var(--b2);
    background:var(--yuzey-2); border:1px solid var(--cizgi-2); border-radius:var(--r-kontrol);
    color:var(--ink-2); font:inherit; font-size:var(--t-etiket); font-weight:600; cursor:pointer; text-align:left;
    transition:border-color var(--hiz-2), background var(--hiz-2);
  }
  .levha-serit:hover, .levha-serit:focus-visible{border-color:var(--cizgi-3); outline:none}
  .levha-serit .ls-ik{
    display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto;
    border-radius:var(--r-kucuk); background:var(--aksan-sis); color:var(--aksan);
  }
  .levha-serit .ls-ik .ik{width:15px; height:15px}
  .levha-serit .ls-baslik{
    flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    text-transform:uppercase; letter-spacing:.08em; font-size:var(--t-mikro); color:var(--ink-3);
  }
  .levha-serit .ls-deger{font-family:var(--f-baslik); font-weight:800; color:var(--ink-1); font-size:var(--t-kucuk); white-space:nowrap}
  .levha-serit .ls-ok{color:var(--ink-3); font-size:var(--t-orta); line-height:1; transform:rotate(90deg); padding:0 4px}

  /* kategori şeridi kenarlarda eriyerek "devamı var" der */
  .kat-serit{
    margin-inline:calc(var(--b4) * -1); padding-inline:var(--b4);
    -webkit-mask-image:linear-gradient(90deg,transparent,rgb(0 0 0) var(--b4),rgb(0 0 0) calc(100% - 32px),transparent);
            mask-image:linear-gradient(90deg,transparent,rgb(0 0 0) var(--b4),rgb(0 0 0) calc(100% - 32px),transparent);
  }
}
@keyframes ug-vurgu{0%{box-shadow:inset 0 0 0 2px rgba(113,192,237,.55)} 100%{box-shadow:inset 0 0 0 2px rgba(113,192,237,0)}}

@media (max-width:620px){
  .ray{gap:var(--b2); padding:0 var(--b3)}
  .ray.ray-adimli .ray-a:not(.aktif) .ad{display:none}   /* telefonda yalnız etkin adımın adı (bölüm rayları etiketli kalır) */
  .ray.ray-adimli .ray-a:not(.aktif){padding:0 7px}
  .ray.ray-adimli .ray-a.aktif{padding:0 12px}
  .teklif-ust{flex-wrap:wrap; row-gap:var(--b1)}
  .teklif-ust b{flex:1 1 55%}
  .teklif-ust .fark, .teklif-ust .tutar{white-space:nowrap}
  /* fiyat kalemi adı telefonda kesilmek yerine iki satıra kırılır ("ULTIMATE PPF …" okunmuyordu) */
  .kalem-ad{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25}
  .kalem-tutar{min-width:88px}

  /* modaller alt levha olur: başparmakla ulaşılır, tutamaç var */
  .yap-modal{place-items:end center; padding:0}
  .yap-kart{
    max-width:none; max-height:92vh; max-height:92dvh; width:100%;
    border-radius:var(--r-kart) var(--r-kart) 0 0; border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .yap-kart::after{
    content:''; position:absolute; top:6px; left:50%; width:36px; height:4px; margin-left:-18px;
    border-radius:var(--r-hap); background:var(--cizgi-3); z-index:2;
  }
  .yap-modal:not(.gizli) .yap-kart{animation:ug-levha-gir var(--hiz-3) var(--egri) both}
}
@keyframes ug-levha-gir{from{transform:translateY(28px); opacity:0} to{transform:none; opacity:1}}

/* ── SAYFA GEÇİŞLERİ: giden sayfa yöne doğru çekilir, gelen aynı yönden girer ── */
@keyframes ug-sayfa-ileri{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
@keyframes ug-sayfa-geri{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}
html.ug-giris-ileri .sol{animation:ug-sayfa-ileri .42s var(--egri) both}
html.ug-giris-geri  .sol{animation:ug-sayfa-geri  .42s var(--egri) both}
html.ug-cikis .sol, html.ug-cikis .para-ic{transition:opacity .17s ease-in, transform .17s ease-in}
html.ug-cikis-ileri .sol{opacity:0; transform:translateX(-22px)}
html.ug-cikis-geri  .sol{opacity:0; transform:translateX(22px)}
html.ug-cikis .para-ic{opacity:0}
/* aynı sayfadaki adım değişimi (müşteri ⇄ araç) */
.sol > section:not(.gizli){animation:ug-sayfa-ileri .36s var(--egri) both}
/* KÖK NEDEN (mobil): giriş animasyonunun ilk karesi içeriği 26px sağa kaydırır; Chrome/Safari mobil yerleşim görünümünü
   bu geçici taşmaya göre BÜYÜTÜP geri almıyordu (periyodik-kontrol 392px, 2px yatay kayma). Dönüşüm taşması kırpılır;
   clip kaydırma bağlamı yaratmaz, dikey akış aynen sürer. */
.uyg{overflow-x:clip}
.sol{overflow-x:clip}

/* ── MODAL KAPANIŞI ── */
@keyframes ug-perde-cik{from{opacity:1} to{opacity:0}}
@keyframes ug-kart-cik{from{opacity:1; transform:none} to{opacity:0; transform:translateY(10px) scale(.985)}}
.yap-modal.kapaniyor, .modal.kapaniyor, .isikli.kapaniyor{animation:ug-perde-cik .19s ease-in both; pointer-events:none}
.yap-modal.kapaniyor .yap-kart, .modal.kapaniyor .modal-kart{animation:ug-kart-cik .19s ease-in both}
@media (max-width:620px){ .yap-modal.kapaniyor .yap-kart{animation:ug-levha-cik .19s ease-in both} }
@keyframes ug-levha-cik{from{transform:none; opacity:1} to{transform:translateY(24px); opacity:0}}

/* ── SEÇİM HAREKETİ ── */
@keyframes ug-pop{0%{transform:scale(.5); opacity:0} 60%{transform:scale(1.18); opacity:1} 100%{transform:scale(1)}}
.ug-pop{animation:ug-pop .32s var(--egri) both}
@keyframes ug-secildi{0%{box-shadow:0 0 0 0 rgba(113,192,237,.5)} 100%{box-shadow:0 0 0 12px rgba(113,192,237,0)}}
.ug-secildi{animation:ug-secildi .5s ease-out}
.parca.ug-secildi, .slot.ug-secildi, .seg button.ug-secildi, .pil.ug-secildi{animation:ug-secildi .5s ease-out, ug-parca .34s var(--egri)}
@keyframes ug-parca{0%{transform:scale(.94)} 55%{transform:scale(1.05)} 100%{transform:none}}
.parca{transition:background var(--hiz-2), border-color var(--hiz-2), color var(--hiz-2), transform var(--hiz-1)}
.kart .tik, .hsatir .kutu{transition:transform var(--hiz-1), background var(--hiz-2), border-color var(--hiz-2)}
.kart{transition:border-color var(--hiz-2), background var(--hiz-2), transform var(--hiz-1), box-shadow var(--hiz-2)}
.foto{transition:border-color var(--hiz-2), background var(--hiz-2), transform var(--hiz-1)}
.foto .foto-onizle{animation:ug-perde .4s ease-out both}
body.kilitli #kilitRozet{animation:ug-pop .4s var(--egri) both}
.ug-cikiyor{transition:height .21s var(--egri), opacity .15s ease-in, margin .21s var(--egri), padding .21s var(--egri)}

/* ── TEKLİF ÖNİZLEME (canlı: quoteModal + api/get-quote-preview.php) ── */
.tk-belge{border:1px solid var(--cizgi-2); border-radius:var(--r-kart); background:var(--yuzey-2); overflow:hidden}
.tk-belge-ust{display:flex; align-items:center; gap:var(--b3); padding:var(--b4); border-bottom:1px solid var(--cizgi); flex-wrap:wrap}
.tk-belge-ust .logo{width:28px; height:28px; flex:0 0 auto}
.tk-belge-ust .firma{font-family:var(--f-baslik); font-weight:800; color:var(--ink-1)}
.tk-belge-ust .no{margin-left:auto; font-family:var(--f-mono); font-size:var(--t-etiket); color:var(--ink-2)}
.tk-belge-meta{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--b2) var(--b4); padding:var(--b3) var(--b4); font-size:var(--t-etiket); color:var(--ink-2); border-bottom:1px solid var(--cizgi)}
.tk-belge-meta b{display:block; color:var(--ink-1); font-weight:600}
.tk-belge-meta .et{font-size:var(--t-mikro); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3)}
.tk-belge table{width:100%; border-collapse:collapse; font-size:var(--t-etiket)}
.tk-belge th{font-size:var(--t-mikro); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; text-align:left; padding:var(--b2) var(--b4); border-bottom:1px solid var(--cizgi)}
.tk-belge td{padding:var(--b3) var(--b4); border-bottom:1px solid var(--cizgi); vertical-align:top; color:var(--ink-1)}
.tk-belge .sayi{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tk-belge .eski{color:var(--ink-3); text-decoration:line-through; font-size:var(--t-mikro); display:block}
.tk-belge-toplam{display:flex; justify-content:flex-end; gap:var(--b5); padding:var(--b4); align-items:baseline}
.tk-belge-toplam .et{font-size:var(--t-mikro); text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3)}
.tk-belge-toplam .rakam{font-family:var(--f-baslik); font-size:var(--t-buyuk); font-weight:800; color:var(--para); font-variant-numeric:tabular-nums}
.tk-belge-not{padding:0 var(--b4) var(--b4); font-size:var(--t-mikro); color:var(--ink-3); line-height:1.5}
.tk-onizle-ipucu{font-size:var(--t-mikro); color:var(--ink-3); line-height:1.5; margin:var(--b3) 0 0}
.tk-onizle-ipucu code{font-family:var(--f-mono); color:var(--ink-2)}
@media (max-width:620px){ .tk-belge-meta{grid-template-columns:1fr} .tk-belge th:nth-child(2), .tk-belge td:nth-child(2){display:none} }


/* ═══════════════════════════════════════════════════════════════════════════
   KROKİLER [14.09.2026] — canlının kendi çizimleri
     .kroki-cizim  : expertizkroki.svg (19 parça · 4 durum) · kontrol ekranı
     .arac-kroki   : #vehicleDiagram (28 parça) · hizmet yapılandırma modalı
   Renkler JS'ten fill ile verilir (canlıda da öyle) — CSS yalnız etkileşim,
   çerçeve ve okunabilirlik katar.
   ═══════════════════════════════════════════════════════════════════════════ */
.kroki-cizim{
  background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:var(--r-kart);
  padding:var(--b3); margin-bottom:var(--b3); overflow:hidden;
}
.kroki-cizim svg{display:block; width:100%; height:auto; max-height:46vh; margin:0 auto}
.kroki-cizim .kroki-parca{cursor:pointer; transition:opacity var(--hiz-2), stroke-width var(--hiz-2)}
.kroki-cizim .kroki-parca:hover{opacity:.82}
.kroki-cizim .kroki-parca:focus-visible{outline:none; stroke:var(--aksan); stroke-width:6}
.kroki-cizim .kroki-parca.is-secili{stroke:rgba(255,255,255,.55); stroke-width:3}

.kroki-gosterge{display:flex; flex-wrap:wrap; gap:var(--b3); margin-bottom:var(--b3)}
.kg-oge{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-mikro); color:var(--ink-2)}
.kg-nokta{width:11px; height:11px; border-radius:var(--r-hap); flex:0 0 auto}
.kg-nokta.kg-bos{background:#e2e8f0; border:1px solid var(--cizgi-3)}

.kroki-liste{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
@media (max-width:820px){ .kroki-liste{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .kroki-liste{grid-template-columns:repeat(2,1fr)} .kroki-cizim svg{max-height:38vh} }

.arac-kroki{
  background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:var(--r-kart);
  padding:var(--b3); margin-bottom:var(--b3);
}
.arac-kroki svg{display:block; width:100%; height:auto; max-height:34vh; margin:0 auto}
.arac-kroki .ak-parca{cursor:pointer; transition:fill var(--hiz-2), opacity var(--hiz-2)}
.arac-kroki .ak-parca:hover{opacity:.8}
.arac-kroki .ak-parca:focus-visible{outline:none; stroke:var(--aksan); stroke-width:2}
.arac-kroki .ak-parca.is-secili{fill:var(--aksan) !important; stroke:var(--aksan-acik); stroke-width:1.5}
.arac-kroki text{pointer-events:none; fill:var(--ink-2); font-size:7px}


/* ═══════════════════════════════════════════════════════════════════════════
   TASLAKLAR — KOMPAKT LİSTE [14.09.2026]
   Dört bölüm + dört sayaç kartı + dört paragraf yerine: ray'de filtre, tek
   listede tek katlı satırlar. Tür bilgisi satırın sol şeridinde ve küçük
   etiketinde; başlık tekrarına gerek kalmaz.
   ═══════════════════════════════════════════════════════════════════════════ */
.t-ara{margin-left:auto; min-width:260px; flex:0 1 320px}
.t-ara .gir{min-height:44px}

.t-liste{display:grid; gap:8px}
/* İki satır: [plaka | araç | eylem] / [plaka | tür · müşteri · çipler | eylem].
   Tek satıra sıkıştırmak 660px lik ana sütunda araç adını kırpıyordu. */
.t-satir{
  display:grid; align-items:center; column-gap:var(--b4); row-gap:3px;
  grid-template-columns:118px minmax(0,1fr) auto;
  grid-template-areas:'plaka arac eylem' 'plaka alt eylem';
  background:var(--yuzey-1); border:1px solid var(--cizgi);
  border-left:3px solid var(--cizgi-3); border-radius:var(--r-kontrol);
  padding:9px var(--b4); min-height:60px;
  transition:border-color var(--hiz-2), background var(--hiz-2);
}
.t-plaka{grid-area:plaka} .t-eylem{grid-area:eylem}
.t-bas{grid-area:arac; display:flex; align-items:baseline; gap:var(--b2); min-width:0}
.t-alt{grid-area:alt; display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0}
.t-satir:hover{border-color:var(--cizgi-3); background:var(--yuzey-2)}
.t-satir.ilgi{border-left-color:var(--hata)}
.t-satir.bagli{border-left-color:var(--aksan)}
.t-satir.devam{border-left-color:var(--uyari)}
.t-satir.terk{border-left-color:var(--ink-3)}

/* tür etiketi: araç adının yanında küçük rozet — sol şeridin rengini tekrarlar,
   böylece "Tümü" görünümünde satırın hangi kovaya ait olduğu okunur kalır. */
.t-tur{
  font-size:var(--t-mikro); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap; flex:0 0 auto;
  border:1px solid var(--cizgi-2); border-radius:var(--r-hap); padding:2px 8px;
  line-height:1.5;
}
.t-satir.ilgi  .t-tur{color:var(--hata);  border-color:color-mix(in srgb, var(--hata) 38%, transparent)}
.t-satir.bagli .t-tur{color:var(--aksan); border-color:color-mix(in srgb, var(--aksan) 38%, transparent)}
.t-satir.devam .t-tur{color:var(--uyari); border-color:color-mix(in srgb, var(--uyari) 38%, transparent)}
.t-plaka{
  font-family:var(--f-mono); font-size:var(--t-etiket); letter-spacing:.05em;
  background:var(--yuzey-3); border:1px solid var(--cizgi-2); border-radius:var(--r-kucuk);
  padding:4px 8px; text-align:center; white-space:nowrap; color:var(--ink-1);
}
/* ink-3 bu zeminde 4.43:1 ölçüldü (eşik 4.5) → bir ton koyulaştı */
.t-plaka i{color:var(--ink-2); font-style:normal; font-family:var(--f-govde)}
.t-arac{font-weight:600; color:var(--ink-1); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.t-meta{color:var(--ink-3); font-size:var(--t-etiket); white-space:nowrap; flex:0 1 auto;
  overflow:hidden; text-overflow:ellipsis; min-width:0}
/* liste içi çipler mikro ölçekte: üç çipli kayıt tek satırda kalsın */
.t-alt .rz{flex:0 0 auto; font-size:var(--t-mikro); padding:2px 8px; line-height:1.5; letter-spacing:.02em}
.t-eylem{display:flex; gap:6px; align-items:center}
/* parmak eşiği 44px — denetim 38px düğmeleri bulgu olarak yazdı */
.t-eylem .dg{min-height:44px; min-width:44px}
.t-eylem .dg-hayalet{min-width:44px; padding:0 10px; font-size:var(--t-orta); line-height:1}

/* sağ panel: dağılım çubukları (4 büyük sayaç kartının yerini tutar) */
.t-dagilim{display:grid; gap:6px}
.t-dag{
  display:grid; grid-template-columns:minmax(0,1fr) 64px 28px; align-items:center; gap:var(--b3);
  background:none; border:1px solid transparent; border-radius:var(--r-kucuk);
  padding:7px 8px; cursor:pointer; color:var(--ink-2); font:inherit; font-size:var(--t-etiket); text-align:left;
  min-height:44px; transition:background var(--hiz-2), border-color var(--hiz-2), color var(--hiz-2);
}
.t-dag:hover{background:var(--yuzey-2); color:var(--ink-1)}
.t-dag.aktif{background:var(--aksan-sis); border-color:rgba(113,192,237,.35); color:var(--ink-1)}
.t-dag-ad{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.t-dag-cubuk{height:6px; border-radius:var(--r-hap); background:var(--yuzey-3); overflow:hidden}
.t-dag-cubuk i{display:block; height:100%; border-radius:var(--r-hap); background:var(--ink-3)}
.t-dag.ilgi .t-dag-cubuk i{background:var(--hata)}
.t-dag.bagli .t-dag-cubuk i{background:var(--aksan)}
.t-dag.devam .t-dag-cubuk i{background:var(--uyari)}
.t-dag-n{text-align:right; font-weight:700; color:var(--ink-1); font-variant-numeric:tabular-nums}

/* açılır bilgi kutusu: dört paragraf yerine bir tane */
.t-bilgi{
  margin-top:var(--b4); background:var(--yuzey-2); border:1px solid var(--cizgi);
  border-radius:var(--r-kontrol); padding:0 var(--b4);
}
.t-bilgi summary{
  cursor:pointer; padding:12px 0; font-size:var(--t-etiket); font-weight:600; color:var(--ink-2);
  list-style:none; min-height:44px; display:flex; align-items:center;
}
.t-bilgi summary::-webkit-details-marker{display:none}
.t-bilgi summary::after{content:'⌄'; margin-left:auto; color:var(--ink-3); transition:transform var(--hiz-2)}
.t-bilgi[open] summary::after{transform:rotate(180deg)}
.t-bilgi p{margin:0 0 var(--b3); font-size:var(--t-etiket); color:var(--ink-3); line-height:1.55}
.t-bilgi p b{color:var(--ink-2)}

@media (max-width:1023px){
  .t-satir{grid-template-columns:106px minmax(0,1fr) auto; column-gap:var(--b3)}
  .t-ara{flex:1 1 100%; margin-left:0; min-width:0}
}
/* telefon: eylemler tam satır — 44px dokunma hedefi bozulmasın */
@media (max-width:700px){
  .t-satir{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:'plaka' 'arac' 'alt' 'eylem';
    row-gap:7px; align-items:start; padding:var(--b3) var(--b4);
  }
  .t-plaka{justify-self:start}
  .t-bas{flex-wrap:wrap; align-items:center}
  .t-meta{white-space:normal}
  .t-eylem{width:100%} .t-eylem .dg{flex:1 1 auto}
}


/* ── filtre rayı: adım rayından ayrı davranır ────────────────────────────────
   Adlar her ölçüde görünür; dar ekranda ray yatay kayar (kesilmez).           */
.ray.ray-filtre{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.ray.ray-filtre::-webkit-scrollbar{display:none}
.ray.ray-filtre .ray-a{flex:0 0 auto}
.ray.ray-filtre .ray-a .ad{display:inline !important}
@media (max-width:620px){
  .ray.ray-filtre{gap:var(--b3)}
  .ray.ray-filtre .ray-a{padding:0 6px; font-size:var(--t-etiket)}
}


/* ═══════════════════════════════════════════════════════════════════════════
   CANLI ÖZET (sağ ray) — aşamalar doldukça yansır  [14.09.2026]
   Ölçü: satır 30px, dokunmatik hedef değil (salt okunur), 13px etiket / 13px
   değer; etkin aşama sol şeritle işaretlenir, biten aşama yeşile döner.
   ═══════════════════════════════════════════════════════════════════════════ */
.oz-akis{display:grid; gap:var(--b3)}
.oz-grup{
  border:1px solid var(--cizgi); border-left:3px solid var(--cizgi-2);
  border-radius:var(--r-kontrol); padding:var(--b3) var(--b4) 10px;
  background:var(--yuzey-1); transition:border-color var(--hiz-2), background var(--hiz-2);
}
.oz-grup.etkin{border-left-color:var(--aksan); background:var(--yuzey-2)}
.oz-grup.tam{border-left-color:var(--iyi)}
.oz-bas{display:flex; align-items:center; gap:var(--b2); margin-bottom:var(--b2)}
.oz-bas b{font-family:var(--f-baslik); font-size:var(--t-etiket); font-weight:700; color:var(--ink-1)}
.oz-no{
  width:20px; height:20px; border-radius:var(--r-hap); flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--t-mikro); font-weight:700; font-variant-numeric:tabular-nums;
  /* ink-3 açık temada bu zeminde 4.4:1 ölçüldü (eşik 4.5) → ink-2 */
  background:var(--yuzey-3); color:var(--ink-2); border:1px solid var(--cizgi-2);
}
.oz-grup.etkin .oz-no{background:var(--aksan-sis); color:var(--aksan); border-color:rgba(113,192,237,.45)}
.oz-grup.tam .oz-no{background:var(--iyi-sis); color:var(--iyi); border-color:rgba(91,201,142,.35)}
.oz-sayi{margin-left:auto; font-size:var(--t-mikro); font-weight:700; color:var(--ink-3)}
.oz-grup.tam .oz-sayi{color:var(--iyi)}
.oz-cubuk{display:block; height:3px; border-radius:var(--r-hap); background:var(--yuzey-3); overflow:hidden}
.oz-cubuk i{
  display:block; height:100%; border-radius:var(--r-hap); background:var(--aksan);
  transition:width var(--hiz-3) var(--egri);
}
.oz-grup.tam .oz-cubuk i{background:var(--iyi)}
.oz-satirlar{margin-top:var(--b2)}
.oz-sat{
  display:flex; align-items:baseline; gap:var(--b3); min-height:26px;
  font-size:var(--t-etiket); border-top:1px solid var(--cizgi); padding-top:5px; margin-top:5px;
}
.oz-satirlar .oz-sat:first-child{border-top:0; padding-top:0; margin-top:0}
.oz-et{color:var(--ink-3); flex:0 0 auto}
.oz-dg{
  margin-left:auto; text-align:right; color:var(--ink-1); font-weight:600;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oz-sat.eksik .oz-dg{color:var(--ink-3); font-weight:400}

/* Randevu kartı alt satırı ("BMW X5 · PPF + Cam Filmi"): ink-3, teklif bandının
   aksan sisi üzerinde 4.05:1 ölçüldü (eşik 4.5). Bant içinde bir ton yukarı —
   ink-2 açık temada 6.4:1, koyu temada zaten daha okunur. */
.teklif .bkart .bilgi small, .teklif-ic .bkart .bilgi small{color:var(--ink-2)}
/* aynı bantta ayraç noktası da ink-3 ile 4.05:1 kalıyordu */
.teklif .bkart .ayrac, .teklif-ic .bkart .ayrac{color:var(--ink-2)}


/* ═══════════════════════════════════════════════════════════════════════════
   ARAÇ KABUL KONTROLÜ DURUM ÇUBUĞU  [TUR 9 · 14.09.2026]
   Canlı: .wo-insp-bar (yeni-is-emri.php:3344) — sticky, adım panellerinin
   DIŞINDA, 5 adımın hepsinde görünür. Sol şerit durumu taşır:
     none kırmızı · partial amber · ready/done yeşil · error koyu kırmızı
   Yükseklik 52px; düğme 44px (parmak eşiği). Rayın hemen altına yapışır.
   ═══════════════════════════════════════════════════════════════════════════ */
.kontrol-cubugu{
  position:sticky; top:var(--ust-h); z-index:40;
  display:flex; align-items:center; gap:var(--b3); flex-wrap:wrap;
  padding:9px var(--b5); min-height:52px;
  background:var(--yuzey-1); border-bottom:1px solid var(--cizgi);
  border-left:3px solid var(--hata);
}
.kontrol-cubugu .kc-ik{width:18px; height:18px; flex:0 0 auto; color:var(--hata)}
.kc-ad{font-family:var(--f-baslik); font-weight:700; font-size:var(--t-etiket); color:var(--ink-1); white-space:nowrap}
.kc-rozet{
  font-size:var(--t-mikro); font-weight:700; letter-spacing:.02em;
  padding:3px 10px; border-radius:var(--r-hap); white-space:nowrap;
  background:var(--hata-sis); color:var(--hata); border:1px solid transparent;
}
.kc-bosluk{flex:1 1 auto; min-width:4px}
.kc-plaka{
  font-family:var(--f-mono); font-size:var(--t-mikro); letter-spacing:.05em;
  color:var(--ink-3); white-space:nowrap;
}
.kc-dgm{
  display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 var(--b4);
  border-radius:var(--r-kontrol); border:1px solid transparent; cursor:pointer;
  background:var(--hata); color:var(--kc-ink, var(--kk-koyu-ink)); font:inherit;
  font-size:var(--t-etiket); font-weight:700;
  transition:filter var(--hiz-2), transform var(--hiz-1);
}
.kc-dgm .ik{width:16px; height:16px}
.kc-dgm:hover{filter:brightness(1.08)}
.kc-dgm:active{transform:scale(.985)}
.kc-dgm:focus-visible{outline:none; box-shadow:var(--odak)}

.kontrol-cubugu[data-insp-state="partial"]{border-left-color:var(--uyari)}
.kontrol-cubugu[data-insp-state="partial"] .kc-ik{color:var(--uyari)}
.kontrol-cubugu[data-insp-state="partial"] .kc-rozet{background:var(--uyari-sis); color:var(--uyari)}
.kontrol-cubugu[data-insp-state="partial"] .kc-dgm{background:var(--uyari)}

.kontrol-cubugu[data-insp-state="ready"],
.kontrol-cubugu[data-insp-state="done"]{border-left-color:var(--iyi)}
.kontrol-cubugu[data-insp-state="ready"] .kc-ik,
.kontrol-cubugu[data-insp-state="done"] .kc-ik{color:var(--iyi)}
.kontrol-cubugu[data-insp-state="ready"] .kc-rozet,
.kontrol-cubugu[data-insp-state="done"] .kc-rozet{background:var(--iyi-sis); color:var(--iyi)}
.kontrol-cubugu[data-insp-state="ready"] .kc-dgm,
.kontrol-cubugu[data-insp-state="done"] .kc-dgm{background:var(--iyi)}

/* kaydedilemedi: dikkat çeksin (canlı data-insp-state="error") */
.kontrol-cubugu[data-insp-state="error"]{background:var(--hata-sis); border-left-color:var(--hata)}
.kontrol-cubugu[data-insp-state="error"] .kc-rozet{background:var(--hata); color:var(--beyaz)}

@media (max-width:1023px){
  .kontrol-cubugu{padding:9px var(--b4); gap:var(--b2)}
}
@media (max-width:620px){
  .kontrol-cubugu{position:static; row-gap:8px}
  .kc-plaka{display:none}
  .kc-rozet{order:3; flex:1 1 100%; text-align:center}
}


/* ═══════════════════════════════════════════════════════════════════════════
   KORUMA HİZMETİ KARTI — yeniden düzen  [TUR 9 · 14.09.2026]
   Kusur: altı kart aynı ağırlıkta düz beyaz kutuydu; fiyat ortada asılıydı,
   "başlangıç" kendi satırındaydı, yapılandırma ipucu gövde metni gibiydi.
   Yeni okuma sırası: [ikon + ad] → açıklama → [fiyat | ipucu çipi].
   Kart 380px'ten ~250px'e indi; ayak satırı üstten ince çizgiyle ayrılıyor.
   Her hizmetin kendi aksan rengi var → kartlar tek bakışta ayrılıyor.
   ═══════════════════════════════════════════════════════════════════════════ */
.koruma .kart{
  display:flex; flex-direction:column; gap:var(--b2);
  padding:var(--b4); min-height:0;
}
.kart-bas{display:flex; align-items:center; gap:var(--b3); min-width:0}
.koruma .kart .kart-ik{
  width:38px; height:38px; flex:0 0 auto; margin:0;
  border-radius:var(--r-kontrol); display:inline-flex; align-items:center; justify-content:center;
  background:var(--hiz-sis, var(--yuzey-3)); color:var(--hiz-renk, var(--ink-2));
  transition:background var(--hiz-2), color var(--hiz-2);
}
.koruma .kart .kart-ik .ik{width:19px; height:19px}
.koruma .kart .ad{
  font-family:var(--f-baslik); font-size:var(--t-kucuk); font-weight:700; line-height:1.25;
  min-width:0; text-align:left; color:var(--ink-1);
}
.koruma .kart .aciklama{
  font-size:var(--t-etiket); color:var(--ink-3); line-height:1.45; text-align:left;
  margin-bottom:var(--b2);
}
/* ayak İKİ SATIR sabit: fiyat satırı + ipucu çipi. Tek flex satırda kısa çip
   fiyatın yanına sığıyor, uzun çip alta düşüyordu — altı kart farklı görünüyordu. */
.kart-ayak{
  display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:2px var(--b2);
  margin-top:auto; padding-top:var(--b3); border-top:1px solid var(--cizgi);
}
.kart-ayak .yapilandir{grid-column:1 / -1; justify-self:start}
.koruma .kart .fiyat{font-size:var(--t-orta); font-weight:800; letter-spacing:-.02em}
.koruma .kart .fiyat-not{font-size:var(--t-mikro); color:var(--ink-3); letter-spacing:.04em}
.koruma .kart .yapilandir{
  font-size:var(--t-mikro); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--hiz-renk, var(--ink-3));
  background:var(--hiz-sis, var(--yuzey-3)); border-radius:var(--r-hap); padding:3px 9px;
  white-space:nowrap; align-self:center;
}

/* hizmet aksanları — logodan türetilmiş üç marka rengi + iki nötr ton.
   Yalnız İKON KUTUSU ve İPUCU ÇİPİ boyanır; gövde metni token renginde kalır. */
.koruma .kart[data-hiz="96"] { --hiz-renk:var(--m-mavi);     --hiz-sis:rgba(113,192,237,.14) }
.koruma .kart[data-hiz="97"] { --hiz-renk:var(--hiz-97);          --hiz-sis:rgba(219,61,142,.13) }
.koruma .kart[data-hiz="98"] { --hiz-renk:var(--hiz-98);          --hiz-sis:rgba(142,95,192,.15) }
/* cam filmi PPF ile aynı maviydi — ayırd edici olsun diye teal */
.koruma .kart[data-hiz="99"] { --hiz-renk:var(--hiz-99);         --hiz-sis:rgba(79,209,197,.14) }
.koruma .kart[data-hiz="100"]{ --hiz-renk:var(--hiz-100);          --hiz-sis:rgba(64,80,160,.16) }
/* Özel/Diğer: canlıda da amber çerçeveli (yeni-is-emri.php:3843) */
.koruma .kart[data-hiz="0"]  { --hiz-renk:var(--uyari);      --hiz-sis:var(--uyari-sis) }
.koruma .kart[data-hiz="0"]  { border-style:dashed }

/* seçili: kenar + ince üst şerit hizmetin kendi renginde */
.koruma .kart.secili{border-color:var(--hiz-renk, var(--aksan))}
.koruma .kart.secili::after{
  content:''; position:absolute; inset:0 0 auto; height:3px;
  border-radius:var(--r-kart) var(--r-kart) 0 0;
  background:var(--hiz-renk, var(--aksan));
}
.koruma .kart.secili .kart-ik{background:var(--hiz-renk, var(--aksan)); color:var(--beyaz)}

/* ── TAM KAPLAMA ÖZETİ: parça arayüzü yerine tek satır bilgi ── */
.kapsam-ozet{
  display:grid; grid-template-columns:auto 1fr; gap:2px var(--b3); align-items:center;
  background:var(--yuzey-2); border:1px solid var(--cizgi);
  border-left:3px solid var(--aksan); border-radius:var(--r-kontrol);
  padding:var(--b3) var(--b4); margin-top:var(--b4);
}
.kapsam-ozet .ik{width:20px; height:20px; grid-row:span 2; color:var(--aksan)}
.kapsam-ozet b{font-size:var(--t-kucuk); color:var(--ink-1)}
.kapsam-ozet span{font-size:var(--t-etiket); color:var(--ink-3)}


/* ═══════════════════════════════════════════════════════════════════════════
   BÖLGE ZEMİNLERİ — alanları tonla ve dokuyla ayır  [TUR 10 · 14.09.2026]

   Her bölge: OPAK ton (background-color) + ≤%5 saydam DOKU (background-image).
   Doku okunurluğu bozmaz; kontrast opak tonun üstünden ölçülür.

   TABAN = KOYU TEMA. Açık tema yalnız TOKENLARI ezer (ug-acik.css).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* — kroma (çerçeve): üst bar · ray · dip eylem çubuğu — */
  --z-ust:#0C121C;
  --z-ust-dsn:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 72%);
  --z-ray:#070B12;
  --z-ray-dsn:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0) 100%);
  --z-dip:#0C121C;
  --z-dip-dsn:linear-gradient(0deg,rgba(255,255,255,.035),rgba(255,255,255,0) 78%);

  /* — çalışma yüzeyi: nokta ızgara, milimetrik kâğıt hissi — */
  --z-sol:#03050A;
  --z-sol-dsn:radial-gradient(circle at 1px 1px, rgba(255,255,255,.062) 1px, transparent 0);
  --z-sol-olcu:22px 22px;

  /* — özet/bağlam paneli: çapraz tel dokusu + üstten aksan ışığı — */
  --z-sag:#131B29;
  --z-sag-dsn:
    radial-gradient(115% 62% at 50% 0%, rgba(113,192,237,.085), rgba(113,192,237,0) 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.024) 0 1px, rgba(255,255,255,0) 1px 13px);
  --z-sag-cizgi:rgba(113,192,237,.18);
}

/* ── üst bar ─────────────────────────────────────────────────────────────────
   Cam yerine opak ton: hem ayırdedicilik arttı hem de backdrop-filter'ın
   sabit konumlu torunlara kapsayıcı blok olma tuzağı ortadan kalktı. */
.ust{
  background-color:var(--z-ust);
  background-image:var(--z-ust-dsn);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:1px solid var(--cizgi);
}
.ray{
  background-color:var(--z-ray);
  background-image:var(--z-ray-dsn);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.sol{
  background-color:var(--z-sol);
  background-image:var(--z-sol-dsn);
  background-size:var(--z-sol-olcu);
}
.sag-panel{
  background-color:var(--z-sag);
  background-image:var(--z-sag-dsn);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-left:1px solid var(--z-sag-cizgi);
}
.para-dip{
  background-color:var(--z-dip);
  background-image:var(--z-dip-dsn);
  border-top:1px solid var(--cizgi);
}
/* kontrol çubuğu kroma ailesine ait: durum rengi sol şeritte kalır */
.kontrol-cubugu{background-color:var(--z-ust); background-image:var(--z-ust-dsn)}

/* Panelin üst kenarında marka saç teli — bölge başlangıcını işaretler.
   İmza kuralı bozulmaz: tam doygun degrade YALNIZ 2px çizgide. */
.sag-panel{position:relative}
.sag-panel::before{
  content:''; position:absolute; inset:0 0 auto; height:2px; z-index:1;
  background:var(--aksan-hat); pointer-events:none;
}

/* ── mobil: panel düz akışa girer, dokuyu .para-ic taşır ──────────────────── */
@media (max-width:1023px){
  .sag-panel{background:transparent; background-image:none; border-left:0}
  .sag-panel::before{display:none}
  .para-ic{
    background-color:var(--z-sag);
    background-image:var(--z-sag-dsn);
    border-top:1px solid var(--z-sag-cizgi);
  }
  .para-dip{background-color:var(--z-dip); background-image:var(--z-dip-dsn)}
  .ray{background-color:var(--z-ray); background-image:var(--z-ray-dsn)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BÜYÜK RAKAMLAR — degrade kırpma HER İKİ TEMADA kapatıldı  [TUR 10]
   ug.css:1300 bu öğeleri `background:var(--para-deg)` + `color:transparent`
   ile boyuyor. `--para-deg` HEM açık temada (ug-acik.css:58) HEM DE koyu
   temanın TUR 6 sadeleştirmesinde (ug.css:1579) `none` yapılmış → dolgu
   saydam kalıyor ve tutar İKİ TEMADA DA GÖRÜNMÜYORDU.
   Açık tema için 14.09'da düzeltilmişti; koyu tema ancak kontrast taraması
   iki temaya birden koşulduğunda ortaya çıktı. Düz renk: --para.
   ═══════════════════════════════════════════════════════════════════════════ */
.toplam .rakam, .kart .fiyat, .kalem-tutar .son, .sayac .rakam{
  background:none; background-image:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--para); -webkit-text-fill-color:var(--para);
  filter:none; text-shadow:none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ÜST BAR — YENİDEN DÜZEN  [TUR 11 · 14.09.2026]
   Yapışkan "Araç Kabul Kontrolü" şeridi KALDIRILDI; işlevi üst bardaki
   .ust-kontrol düğmesine taşındı (kullanıcı kararı).
   ═══════════════════════════════════════════════════════════════════════════ */
.kontrol-cubugu{display:none !important}

/* ── 1) KABUL KONTROL: üst bardaki TEK vurgulu öğe ──────────────────────────
   Diğer bağlar hayalet; renk ve dolgu yalnız burada. Durum rengi korunur
   (canlı data-insp-state sözleşmesi). 20px ikon, 46px yükseklik — komşularından
   bilerek bir ölçü büyük. */
.ust-kontrol{
  display:inline-flex; align-items:center; gap:var(--b2);
  min-height:46px; padding:0 var(--b4); border-radius:var(--r-kontrol);
  border:1px solid var(--kk-cizgi); background:var(--kk-zemin); color:var(--kk-ink);
  font:inherit; font-size:var(--t-kucuk); font-weight:700; cursor:pointer;
  white-space:nowrap; transition:background var(--hiz-2), border-color var(--hiz-2),
              transform var(--hiz-1), box-shadow var(--hiz-2);
}
.ust-kontrol .ik{width:20px; height:20px; flex:0 0 auto; color:var(--kk-ikon)}
.ust-kontrol:hover{background:var(--kk-zemin-ust); border-color:var(--kk-cizgi-ust)}
.ust-kontrol:active{transform:scale(.985)}
.ust-kontrol:focus-visible{outline:none; box-shadow:var(--odak)}
.kc-cip{
  font-size:var(--t-mikro); font-weight:800; font-variant-numeric:tabular-nums;
  background:var(--kk-cip); color:var(--kk-ink); border-radius:var(--r-hap);
  padding:2px 8px; line-height:1.5;
}

/* durum renkleri — taban KOYU tema */
.ust-kontrol{
  --kk-zemin:rgba(229,104,122,.16); --kk-zemin-ust:rgba(229,104,122,.26);
  --kk-cizgi:rgba(229,104,122,.42); --kk-cizgi-ust:rgba(229,104,122,.62);
  --kk-ink:var(--durum-hata-ink); --kk-ikon:var(--durum-hata-ikon); --kk-cip:rgba(229,104,122,.26);
}
.ust-kontrol[data-insp-state="partial"]{
  --kk-zemin:rgba(227,164,75,.16); --kk-zemin-ust:rgba(227,164,75,.26);
  --kk-cizgi:rgba(227,164,75,.42); --kk-cizgi-ust:rgba(227,164,75,.62);
  --kk-ink:var(--durum-uyari-ink); --kk-ikon:var(--durum-uyari-ikon); --kk-cip:rgba(227,164,75,.26);
}
.ust-kontrol[data-insp-state="ready"],
.ust-kontrol[data-insp-state="done"]{
  --kk-zemin:rgba(91,201,142,.16); --kk-zemin-ust:rgba(91,201,142,.26);
  --kk-cizgi:rgba(91,201,142,.42); --kk-cizgi-ust:rgba(91,201,142,.62);
  --kk-ink:var(--durum-iyi-ink); --kk-ikon:var(--durum-iyi-ikon); --kk-cip:rgba(91,201,142,.26);
}
.ust-kontrol[data-insp-state="error"]{
  --kk-zemin:rgba(229,104,122,.34); --kk-zemin-ust:rgba(229,104,122,.44);
  --kk-cizgi:var(--durum-hata-ikon); --kk-cizgi-ust:var(--durum-hata-ikon);
  --kk-ink:var(--beyaz); --kk-ikon:var(--beyaz); --kk-cip:rgba(0,0,0,.28);
}

/* ── 2) bağ çipleri: hayalet, eşit ağırlık, ayraçla ayrılmış gruplar ── */
.ust .sag{gap:var(--b3)}
.ust-baglar{
  display:flex; align-items:center; gap:2px;
  padding:0 var(--b3); margin:0 var(--b1);
  border-left:1px solid var(--cizgi); border-right:1px solid var(--cizgi);
}
.ust-bag{position:relative}
.ust-bag.yeni .ik{color:var(--aksan)}
.ust-rozet{
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-hap);
  background:var(--hata); color:var(--beyaz); font-size:var(--t-rozet); font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  margin-left:4px; font-variant-numeric:tabular-nums;
}
/* Çıkış ve tema YALNIZ ikon: üst barda dört etiketli çip fazla oluyordu */
.ust-bag.cikis .ad{display:none}
.ust-bag.cikis{min-width:44px; min-height:44px; justify-content:center; padding:0}
.ust .sag .ust-baglar + .kullanici{padding-left:0; border-left:0}
.ust .kullanici{font-size:var(--t-etiket); color:var(--ink-3)}

@media (max-width:880px){
  .ust-bag:not(.cikis) .ad{display:none}
  .ust-bag{min-width:44px; min-height:44px; justify-content:center; padding:0}
  .ust-rozet{position:absolute; top:2px; right:2px; margin:0}
}
@media (max-width:1023px){
  .ust-kontrol .ad{display:none}
  .ust-kontrol{padding:0 var(--b3); min-width:52px; justify-content:center}
}
@media (max-width:700px){
  .ust-baglar{padding:0 var(--b2); margin:0}
  .ust .sag{gap:var(--b2)}
}

/* ── üst bar: SIRA ve DARALMA ÖNCELİĞİ  [TUR 11] ─────────────────────────────
   Sıra DOM'a bırakılmıştı (iki ayrı betik sag.firstChild'a ekliyor) → tema
   düğmesi vurgulu düğmeyle bağların arasına giriyordu. Sıra artık burada.
   Daralırken FEDA SIRASI: kullanıcı adı → tema etiketi → Yeni etiketi.
   "Servis" ve "Bekleyenler" adları 1180px'te (birincil cihaz) KORUNUR. */
.ust-kontrol{order:1}
.ust-baglar{order:2}
.tema-dgm{order:3}
.ust .sag .kullanici{order:4}

@media (max-width:1360px){
  .ust .sag .kullanici{display:none}
  .tema-dgm .ad{display:none}
  .tema-dgm{min-width:44px; justify-content:center; padding:0}
}
@media (max-width:1120px){
  .ust-bag.yeni .ad{display:none}
  .ust-bag.yeni{min-width:44px; min-height:44px; justify-content:center; padding:0}
}
@media (max-width:980px){
  .ust .baslik{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   DENETİM GÖRÜNÜRLÜĞÜ — "hangisi düğme, hangisi seçili"  [TUR 11 · 14.09.2026]

   Sekiz ekran tek tek ölçüldü: ödeme yöntemi, fatura Evet/Hayır, kontrol
   maddesi Sorunsuz/Sorunlu, kategori sekmeleri, foto ekle ve dağılım satırları
   SAYDAM zeminli + çok soluk kenarlıklıydı; düğme oldukları anlaşılmıyordu.

   Kenarlık hedefi WCAG 1.4.11 (metin dışı öğe) = 3:1, ölçülerek seçildi.
   SEÇİLİ durum artık yalnız kenarlıkla değil DOLGUYLA da ayrışıyor.
   TABAN = KOYU TEMA.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --dnt-zemin:var(--yuzey-1);
  --dnt-cizgi:#5B6C8C;              /* en kötü koyu bölgede 3.26:1 */
  --dnt-zemin-ust:var(--yuzey-3);
  --dnt-cizgi-ust:#7A8BAB;
  --dnt-zemin-sec:#20304F;          /* karttan 1.47 fark */
  --dnt-cizgi-sec:var(--aksan);
  --dnt-ink-sec:var(--ink-1);
}

.pil, .seg button, .secenek button, .p-btn, .hizli button,
.kat-serit button, .cam-satir .f, .ek-dgm, .kutu.ekle{
  background-color:var(--dnt-zemin);
  border:1px solid var(--dnt-cizgi);
}
.pil:hover, .seg button:hover, .secenek button:hover, .p-btn:hover,
.hizli button:hover, .kat-serit button:hover, .cam-satir .f:hover, .ek-dgm:hover{
  background-color:var(--dnt-zemin-ust);
  border-color:var(--dnt-cizgi-ust);
}
.pil.sec, .seg button.sec, .secenek button.sec, .p-btn.sec, .hizli button.sec,
.kat-serit button.sec, .cam-satir .f.sec{
  background-color:var(--dnt-zemin-sec);
  border-color:var(--dnt-cizgi-sec);
  color:var(--dnt-ink-sec);
  box-shadow:inset 0 0 0 1px var(--dnt-cizgi-sec);   /* 2px etkisi: seçim uzaktan okunur */
}
/* hayalet düğme: kenarlığı görünür olsun, dolgusu kalmasın */
.dg-hayalet{border:1px solid var(--dnt-cizgi)}
.dg-hayalet:hover{border-color:var(--dnt-cizgi-ust)}
/* fotoğraf ekle karosu: kesikli ama görünür */
.kutu.ekle{border:1.5px dashed var(--dnt-cizgi); background-color:transparent}
.kutu.ekle:hover{border-color:var(--dnt-cizgi-ust); background-color:var(--dnt-zemin-ust)}
/* dağılım satırları: kenarlık değil YÜZEY ile ayrılır (liste satırı, düğme değil) */
.t-dag{background-color:var(--yuzey-1); border-color:var(--cizgi)}
.t-dag:hover{background-color:var(--yuzey-2); border-color:var(--dnt-cizgi)}

/* ── segment (bölünmüş seçici): ödeme yöntemi · Evet/Hayır · Sorunsuz/Sorunlu ──
   Burada ÇERÇEVE gruba aittir, tek tek düğmelere değil — doğru desen. Kusur
   SEÇİM'deydi: seçili düğme %9'luk bir aksan sisiyle işaretleniyordu, açık
   zeminde okunmuyordu. Artık dolgu + aksan kenarlık + kalın mürekkep. */
.seg, .segment{border:1px solid var(--dnt-cizgi)}
.seg button.sec, .segment button.sec{
  background-color:var(--dnt-zemin-sec);
  color:var(--dnt-ink-sec);
  border:1px solid var(--dnt-cizgi-sec);
  box-shadow:inset 0 0 0 1px var(--dnt-cizgi-sec);
  font-weight:700;
}
.seg button:not(.sec):hover, .segment button:not(.sec):hover{
  background-color:var(--dnt-zemin-ust); color:var(--ink-1);
}

/* rozet ve ikincil düğme — koyu temada ölçülen iki kalıntı  [TUR 11]
   · .ust-rozet: beyaz metin soluk kırmızı üstünde 3.2:1 idi (canlıdaki #ef4444
     de 3.4). Bildirim rozeti sabit koyu kırmızı: iki temada da 5.5+.
   · .dg-ikinci ve .t-dag koyu temada 1.12-1.17 ayrımdaydı; denetim kenarlığına
     ve bir üst yüzeye çekildi. */
.ust-rozet{background:var(--rozet-zemin); color:var(--beyaz)}
.dg-ikinci{border:1px solid var(--dnt-cizgi)}
.dg-ikinci:hover{border-color:var(--dnt-cizgi-ust)}
.t-dag{background-color:var(--yuzey-1); border:1px solid var(--dnt-cizgi)}
.t-dag:hover{background-color:var(--yuzey-2); border-color:var(--dnt-cizgi-ust)}

/* ── segment: İZ + AYRAÇ  [TUR 11] ──────────────────────────────────────────
   Çerçeve göründü ama hiçbiri seçili değilken İKİ düğme olduğu anlaşılmıyordu
   (ölçüm: "Fatura isteniyor mu?" tek kutu gibi okunuyor). Standart bölünmüş
   seçici deseni: KAP bir "iz"dir (zeminden koyu), düğmeler izin üstünde durur,
   aralarında ince ayraç vardır, seçili olan yükselir. */
.seg, .segment{background-color:var(--dnt-iz); gap:0; padding:3px}
.seg button, .segment button{background-color:transparent; border:1px solid transparent}
.seg button + button, .segment button + button{border-left:1px solid var(--dnt-cizgi)}
.seg button.sec, .segment button.sec{
  border-radius:var(--r-kucuk); border:1px solid var(--dnt-cizgi-sec);
  box-shadow:inset 0 0 0 1px var(--dnt-cizgi-sec), 0 1px 3px rgba(0,0,0,.18);
}
:root{
  /* segment izi + içteki köşe (dış 10px kaptan 3px iç boşluk düşer) */
  --dnt-iz:#161D2B;
  --t-rozet:10px;
  --beyaz:#FFFFFF;

  /* durum renkleri — üst bardaki kontrol düğmesi ve rozet bunları okur.
     Koyu temada YÜZEY soluk + MÜREKKEP açık; açık temada tersi (ug-acik). */
  --kk-koyu-ink:#2A0A0F;
  --durum-hata-ikon:#E5687A;  --durum-hata-ink:#F5A9B4;
  --durum-uyari-ikon:#E3A44B; --durum-uyari-ink:#EFC98C;
  --durum-iyi-ikon:#5BC98E;   --durum-iyi-ink:#9BDFBB;
  --rozet-zemin:#A32836;

  /* koyu temada hizmet aksanları (açık temadakiler ug-acik.css'te) */
  --hiz-97:#E85BA2; --hiz-98:#A47AD1; --hiz-99:#4FD1C5; --hiz-100:#8B9CE8;
}
/* ikon-only üst bar öğeleri parmak eşiğini korur (mobil testi ölçer) */
.ust-bag, .tema-dgm, .ust-kontrol{min-height:44px}

/* ═══════════════════════════════════════════════════════════════════════════
   BİLGİ ŞERİDİ — sayfa üstü açıklama/uyarı bandı  [CANLI GEÇİŞ · 14.09.2026]
   Canlıdaki `.notice` / gölge-mod bandı / taslak yaşı bandı / temizlik notu
   burada tek bileşene indi. Üç ton: nötr · uyarı · hata.
   ═══════════════════════════════════════════════════════════════════════════ */
.bilgi-serit{
  display:flex; align-items:flex-start; gap:var(--b3);
  padding:var(--b3) var(--b4); border-radius:var(--r-kontrol);
  background:var(--yuzey-2); border:1px solid var(--cizgi);
  border-left:3px solid var(--ink-3);
  font-size:var(--t-etiket); line-height:1.55; color:var(--ink-2);
}
.bilgi-serit .ik{width:18px; height:18px; flex:0 0 auto; margin-top:2px; color:var(--ink-3)}
.bilgi-serit b{color:var(--ink-1)}
.bilgi-serit.uyari{background:var(--uyari-sis); border-left-color:var(--uyari)}
.bilgi-serit.uyari .ik{color:var(--uyari)}
.bilgi-serit.hata{background:var(--hata-sis); border-left-color:var(--hata)}
.bilgi-serit.hata .ik{color:var(--hata)}

/* ── .dg bir BAĞ (<a>) olarak da kullanılır: alt çizgi kalmasın ──────────────
   Canlıda "← Panel" ve "+ Yeni İş Emri" gerçek bağlantılar; prototipte düğme.
   Aynı sınıf iki etikette de aynı görünmeli. */
a.dg, a.dg:hover, a.dg:visited{text-decoration:none}
.ust-bag, .ust-bag:hover, .ust-bag:visited{text-decoration:none}