/* Play Teknoloji Müşteri Paneli — Turuncu • Beyaz • Siyah, mobil öncelikli */
/* ═══════════════════════════════════════════════════════════════════════════
   v14.3 — TASARIM TOKENLERİ (tek kaynak)
   SORUN: yarıçaplar 15-20 farklı değere, gölgeler 60+ farklı tanıma dağılmıştı;
   aynı işi gören iki kart farklı yuvarlaklıkta/gölgede olabiliyordu.
   ÇÖZÜM: 7 basamaklı yarıçap + 6 basamaklı yükseklik + 3 basamaklı hareket
   ölçeği. Tüm bileşenler buradan beslenir.

   ⚠ ÖNEMLİ: Bu panelde tema kutupları :root AÇIK temadır; koyu tema [data-tema="koyu"] ile gelir.
   Bu yüzden gölge ölçeği DOĞRU BLOKTA tanımlanır; ters konursa koyu temada
   gölgeler kaybolur (koyu zemin üstünde açık gölge görünmez).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 14px;
  --r-xl: 18px; --r-2xl: 22px; --r-tam: 999px;
  --h-hizli: .12s; --h-orta: .22s; --h-yavas: .38s;
  --h-egri: cubic-bezier(.2,.8,.3,1);
  --h-yayli: cubic-bezier(.34,1.4,.5,1);
  --e0: none;
  --e1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --e2: 0 2px 6px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --e3: 0 6px 16px rgba(0,0,0,.09), 0 2px 5px rgba(0,0,0,.05);
  --e4: 0 12px 32px rgba(0,0,0,.13), 0 4px 10px rgba(0,0,0,.06);
  --e5: 0 24px 60px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.08);
}
[data-tema="koyu"] {
  --e0: none;
  --e1: 0 1px 2px rgba(0,0,0,.40);
  --e2: 0 2px 8px rgba(0,0,0,.46);
  --e3: 0 8px 20px rgba(0,0,0,.54);
  --e4: 0 14px 38px rgba(0,0,0,.60);
  --e5: 0 26px 68px rgba(0,0,0,.68);
}

:root {
  --or: #ff7a00; --or2: #ff9d3f; --txt: #141414; --mut: #5f5f6b;
  --bg: #f7f7f8; --kart2: #f1f2f5; --card: #ffffff; --brd: #e9e9ec;
  --grad: linear-gradient(135deg, #ff7a00, #ff9d3f);
  --ok: #15803d; --no: #dc2626; --sari: #b45309; --mavi: #2563eb;
}
[data-tema="koyu"] {
  --txt: #f5f5f7; --mut: #9a9aa5; --bg: #0c0c0e; --kart2: #1f1f25; --card: #16161a; --brd: #26262c;
  --ok: #2ecc71; --no: #ff5252; --sari: #ffc447; --mavi: #4d8dff;
  /* Marka turuncusu koyu zeminde biraz daha parlak okunur (POS ile aynı ayrım) */
  --or2: #ffa347;
  --grad: linear-gradient(135deg, #ff7a00, #ffa347);
}
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: "Segoe UI", system-ui, Roboto, sans-serif; background: var(--bg); color: var(--txt);
  font-size: 15px; min-height: 100vh; min-height: 100dvh; transition: background .25s, color .25s; }
.gizli { display: none !important; }
.wrap { max-width: 560px; margin: 0 auto; padding: 16px 14px 90px; }
.kart { background: var(--card); border: 1px solid var(--brd); border-radius: var(--r-xl); padding: 16px; margin-bottom: 14px;
  box-shadow: var(--e3); animation: gel .3s ease both; }
@keyframes gel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
h2 { font-size: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
h2::before { content: ""; width: 4px; height: 16px; border-radius: var(--r-xs); background: var(--grad); }
.mut { color: var(--mut); } .kck { font-size: 12.5px; }
button, .btn { font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--brd);
  border-radius: var(--r-lg); padding: 12px 16px; background: var(--card); color: var(--txt); transition: transform .1s; }
button:active { transform: scale(.97); }
.btn-tur { background: var(--grad); border: none; color: #fff; box-shadow: 0 8px 22px rgba(255,122,0,.3); }
.btn-kck { padding: 7px 12px; font-size: 12.5px; border-radius: var(--r-md); }
input, select, textarea { font-family: inherit; font-size: 15px; width: 100%; color: var(--txt);
  background: var(--card); border: 1.5px solid var(--brd); border-radius: var(--r-lg); padding: 12px 14px; outline: none; }
input:focus, textarea:focus { border-color: var(--or); box-shadow: 0 0 0 4px rgba(255,122,0,.12); }
label { display: block; font-size: 12.5px; font-weight: 700; margin: 12px 0 5px; }
.roz { display: inline-block; padding: 3px 10px; border-radius: var(--r-tam); font-size: 11.5px; font-weight: 700; }
.roz.y { background: rgba(22,163,74,.12); color: var(--ok); }
.roz.k { background: rgba(220,38,38,.12); color: var(--no); }
.roz.s { background: rgba(180,83,9,.14); color: var(--sari); }
.roz.m { background: rgba(37,99,235,.12); color: var(--mavi); }
.roz.g { background: rgba(110,110,120,.14); color: var(--mut); }

/* giriş */
#giris { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(600px 400px at 80% -10%, rgba(255,122,0,.12), transparent 60%), var(--bg); }
.giris-kart { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--brd);
  border-radius: var(--r-2xl); padding: 36px 28px; text-align: center; box-shadow: var(--e5);
  animation: gel .4s ease; }
.logo { width: 74px; height: 74px; border-radius: var(--r-2xl); margin: 0 auto 16px; background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  box-shadow: 0 12px 30px rgba(255,122,0,.35); }
.giris-kart h1 { font-size: 22px; } .giris-kart .alt { color: var(--mut); font-size: 13px; margin: 6px 0 20px; }
.otp { text-align: center; font-size: 26px !important; letter-spacing: 10px; font-weight: 800; }
.hata { color: var(--no); font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 10px; }

/* üst bar + alt menü */
.ust { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--brd);
  padding: 13px 16px; display: flex; align-items: center; gap: 10px; }
.ust b { flex: 1; font-size: 16px; } .ust .tur { color: var(--or); }
.alt-menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex;
  background: var(--card); border-top: 1px solid var(--brd);
  padding: 6px 4px calc(8px + var(--sa-alt)); }
/* v14.7: alt menü öğeleri asgari 44px yüksekliğe getirildi (WCAG 2.5.8).
   Eskiden 6px dolgu + 21px ikon + 10.5px yazı ≈ 40px idi; parmakla komşu
   sekmeye basmak sıktı. */
.am { flex: 1; text-align: center; color: var(--mut); font-size: 10.5px; font-weight: 700; padding: 6px 2px;
  cursor: pointer; border-radius: var(--r-md); position: relative;
  min-height: 44px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; }
.am .i { font-size: 21px; display: block; }
.am.sec { color: var(--or); }
.am .nokta { position: absolute; top: 2px; right: 22%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--no); animation: yanip 1.4s infinite; }
@keyframes yanip { 50% { opacity: .35; } }

/* özet ızgara */
.oz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oz-k { background: var(--card); border: 1px solid var(--brd); border-radius: var(--r-xl); padding: 14px; }
.oz-k .b { font-size: 21px; font-weight: 800; margin-top: 4px; }
.oz-k.vurgu { background: var(--grad); border: none; color: #fff; }
.oz-k.vurgu .mut { color: rgba(255,255,255,.85); }
.ilerle { height: 7px; border-radius: var(--r-sm); background: var(--bg); overflow: hidden; margin-top: 8px; }
.ilerle > div { height: 100%; border-radius: var(--r-sm); background: var(--grad); }
.satir { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--brd); font-size: 14px; }
.satir:last-child { border-bottom: none; }
.baloncuk { max-width: 86%; padding: 10px 13px; border-radius: var(--r-lg); font-size: 13.5px; margin: 4px 0; }
.baloncuk.ben { background: rgba(255,122,0,.12); border: 1px solid rgba(255,122,0,.35); margin-left: auto; }
.baloncuk.magaza { background: var(--bg); border: 1px solid var(--brd); }
.tosty { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 60;
  background: #141414; color: #fff; padding: 12px 20px; border-radius: var(--r-lg); font-size: 14px; font-weight: 600;
  box-shadow: var(--e4); animation: gel .25s ease; max-width: 92vw; text-align: center; }
@media (min-width: 700px) { .wrap { max-width: 720px; } .oz-grid { grid-template-columns: repeat(4, 1fr); } }
.am { min-width: 0; } .am .i { line-height: 1.2; }
@media (max-width: 380px) { .am { font-size: 9.5px; } }
.duyuru { border-color: var(--or) !important; background: linear-gradient(90deg, rgba(255,122,0,.1), transparent) !important;
  font-weight: 600; animation: gel .4s ease, duyuruParla 2.5s ease-in-out infinite; }
@keyframes duyuruParla { 50% { border-color: var(--or); box-shadow: 0 0 16px rgba(255,122,0,.25); } }
.konf { position: fixed; top: -14px; width: 9px; height: 15px; border-radius: var(--r-xs); z-index: 300;
  animation: konfDus linear forwards; pointer-events: none; }
@keyframes konfDus { to { transform: translateY(105vh) rotate(680deg); opacity: .7; } }

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v3 — CİHAZA ÖZEL YERLEŞİM + YENİ BİLEŞENLER         ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
:root { color-scheme: light; }
[data-tema="koyu"] { color-scheme: dark; }

/* TABLET (700–979px): iki sütun içerik, geniş kartlar */
@media (min-width: 700px) and (max-width: 979px) {
  .wrap { max-width: 860px; padding: 20px 24px 100px; }
  .oz-grid { grid-template-columns: repeat(4, 1fr); }
  .am .i { font-size: 24px; } .am { font-size: 12px; padding: 8px 2px; }
}

/* MASAÜSTÜ (≥980px): alt menü SOL DİKEY RAY olur — bambaşka, ferah yerleşim */
@media (min-width: 980px) {
  /* v19.3 — ultra geniş ekranlarda (ör. 2560px+) sabit 250px sol boşluk
     içeriği sola yasladırıp sağda büyük, dengesiz bir boş alan bırakıyordu.
     Rayın (218px + boşluk) altına düşmeyecek şekilde, kalan alanda ortalanır. */
  .wrap { max-width: 880px; margin-left: max(250px, calc(50vw - 440px)); padding: 26px 34px 40px; }
  .ust { padding: 15px 26px 15px 250px; }
  .ust b { font-size: 18px; }
  .alt-menu {
    top: 0; bottom: 0; right: auto; width: 218px; flex-direction: column;
    justify-content: flex-start; gap: 4px; padding: 84px 14px 20px;
    border-top: none; border-right: 1px solid var(--brd);
  }
  .am { display: flex; align-items: center; gap: 12px; text-align: left;
    font-size: 14.5px; padding: 12px 14px; border-radius: var(--r-lg); flex: 0 0 auto;
    transition: background .15s, transform .15s; }
  .am:hover { background: rgba(255,122,0,.08); transform: translateX(3px); }
  .am .i { display: inline; font-size: 20px; }
  .am.sec { background: linear-gradient(90deg, rgba(255,122,0,.14), transparent); }
  .am .nokta { top: 10px; right: 12px; }
  .oz-grid { grid-template-columns: repeat(4, 1fr); }
  .tosty { bottom: 30px; }
  .kart:hover { box-shadow: var(--e4); }
}

/* Doğum günü kutlama kartı */
.dogum { text-align: center; border: none !important; color: #fff;
  /* Kutlama gradyanı korunur; metin gölgesi okunurluğu garanti eder
     (açık renkli duraklarda beyaz yazı sönük kalıyordu). */
  text-shadow: 0 1px 3px rgba(0,0,0,.42);
  background: linear-gradient(135deg, #c25400, #b81a5c, #6a19b8) !important;
  background-size: 220% 220% !important; animation: gel .4s ease, dogumAkis 6s ease infinite; }
@keyframes dogumAkis { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* İstatistik çubukları */
.ist-cubuklar { display: flex; align-items: flex-end; gap: 8px; padding: 6px 0; }
.ist-c { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.ist-bar { background: var(--grad); border-radius: 7px 7px 3px 3px; margin: 0 auto; width: 70%;
  min-width: 16px; box-shadow: 0 4px 14px rgba(255,122,0,.25); transform-origin: bottom;
  animation: barBuyu .7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes barBuyu { from { transform: scaleY(0); } }


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v4 — PREMIUM TEMA: yalnız GÜNDÜZ + GECE, yeni tipografi & animasyon ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
:root {
  --bg: #f7f7f8; --kart2: #f1f2f5; --card: #ffffff; --brd: #e6e6ea; --txt: #17171a; --mut: #5f5f6b;
  --or: #ee6c00; --grad: linear-gradient(135deg, #ff7a00 0%, #ff9330 55%, #ffb25c 100%);
}
[data-tema="koyu"] {
  --bg: #09090b; --kart2: #1c1c21; --card: #131316; --brd: rgba(255,255,255,.09);
  --txt: #f7f7f8; --mut: #a2a2ae; --or: #ff7a00;
  --grad: linear-gradient(135deg, #ff7a00 0%, #ff9330 55%, #ffb25c 100%);
}
[data-tema="koyu"] body {
  background: radial-gradient(700px 400px at 85% -10%, rgba(255,122,0,.08), transparent 60%), #09090b;
}
body { letter-spacing: .1px; }
h1, h2, .oz-k .b { letter-spacing: -.3px; }
.oz-k .b, .satir { font-variant-numeric: tabular-nums; }
::selection { background: rgba(255,122,0,.3); }
h2::before { width: 4px; border-radius: var(--r-sm); }

/* butonlar: kalkış + parıltı süpürme + odak halkası */
button, .btn { border-radius: var(--r-lg); position: relative; overflow: hidden;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s, border-color .2s, background .2s; }
button:hover { transform: translateY(-1px); }
button:active { transform: scale(.96); }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.btn-tur::after { content: ""; position: absolute; top: 0; left: -85%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.3), transparent);
  transition: left .5s ease; pointer-events: none; }
.btn-tur:hover::after { left: 130%; }
.btn-tur:hover { box-shadow: 0 12px 28px rgba(255,122,0,.4); }

/* kartlar */
.kart { border-radius: var(--r-xl); transition: border-color .2s, box-shadow .2s, transform .2s; }
.kart:hover { border-color: rgba(255,122,0,.25); }
[data-tema="koyu"] .kart { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 20px rgba(0,0,0,.35); }
.oz-k { transition: transform .2s, box-shadow .2s; }
.oz-k:hover { transform: translateY(-3px); box-shadow: var(--e4); }

/* üst bar + menü */
.ust { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
[data-tema="koyu"] .ust { background: rgba(14,14,17,.82); }
[data-tema="koyu"] .alt-menu { background: rgba(14,14,17,.92); }
.am { transition: color .15s, background .15s, transform .15s; }
.am.sec .i { animation: secilenZipla .35s cubic-bezier(.2,.9,.3,1.4); }
@keyframes secilenZipla { 40% { transform: translateY(-4px) scale(1.15); } }

/* giriş ekranı parlaklığı */
.giris-kart { border-radius: var(--r-2xl); }
.logo { animation: logoNefes 4.5s ease-in-out infinite; }
@keyframes logoNefes { 50% { box-shadow: 0 12px 40px rgba(255,122,0,.55); transform: scale(1.04); } }

/* kaydırma çubuğu */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--brd); border-radius: var(--r-md); }
::-webkit-scrollbar-thumb:hover { background: var(--or); }

/* PWA davet bandı */
.pwa-davet { position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 55;
  display: flex; gap: 11px; align-items: center; padding: 13px 15px;
  background: var(--card); border: 1.5px solid var(--or); border-radius: var(--r-xl);
  box-shadow: var(--e4); animation: gel .4s ease both; font-size: 13.5px; }
.pwa-davet > span:first-child { font-size: 26px; }
@media (min-width: 700px) { .pwa-davet { max-width: 430px; left: auto; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
input[type="checkbox"] { accent-color: var(--or); }

/* ═══════════════════════════════════════════════════════════════
   TEMA v17 — Derinlik, tipografi, mikro-etkileşim, erişilebilirlik
   (POS ile aynı tasarım dili — üç platform tutarlı görünür)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --e2: 0 3px 10px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);
  --e3: 0 12px 30px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.06);
  --e4: 0 24px 56px rgba(16,24,40,.16), 0 8px 18px rgba(16,24,40,.09);
  --hiz: .18s; --r2: 14px; --r3: 18px;
}
[data-tema="koyu"] {
  --e1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.22);
  --e2: 0 3px 10px rgba(0,0,0,.34), 0 2px 4px rgba(0,0,0,.24);
  --e3: 0 12px 30px rgba(0,0,0,.42), 0 4px 10px rgba(0,0,0,.28);
  --e4: 0 24px 56px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.32);
}

/* Tipografi */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.01em; }
h1, h2, h3 { letter-spacing: -.02em; }
.kck { font-size: 12.5px; line-height: 1.55; }
/* Tutarlı rakam hizası (tutar/puan alanları) */
.tutar, .puan, .deger, b { font-variant-numeric: tabular-nums; }

/* Kart derinliği + yumuşak etkileşim */
.kart { box-shadow: var(--e2); transition: box-shadow var(--hiz) ease, transform var(--hiz) ease; }
.kart:hover { box-shadow: var(--e3); }

/* Butonlar: dokunsal geri bildirim */
button, .btn-ana, .btn-kck, .am { transition: background var(--hiz) ease, box-shadow var(--hiz) ease, transform .1s ease, opacity var(--hiz) ease; }
button:active, .btn-ana:active, .btn-kck:active { transform: translateY(1px) scale(.99); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* Erişilebilirlik: net odak halkası */
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: var(--r-md); }
input:focus, select:focus, textarea:focus {
  border-color: var(--or) !important;
  box-shadow: 0 0 0 3px rgba(255,122,0,.14);
}

/* Alt menü: aktif sekme belirginliği */
.am { position: relative; }
.am.sec::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: var(--r-xs); background: var(--or);
}

/* İlerleme çubuğu (seviye/garanti) yumuşak dolum */
.ilerle { overflow: hidden; border-radius: var(--r-tam); }
.ilerle > div { transition: width .6s cubic-bezier(.2,.9,.3,1); }

/* İskelet yükleme */
.iskelet {
  background: linear-gradient(90deg, var(--brd) 25%, var(--card) 37%, var(--brd) 63%);
  background-size: 400% 100%; animation: iskeletKay 1.3s ease infinite; border-radius: var(--r2);
}
@keyframes iskeletKay { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  .kart:hover { transform: none; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  MOBİL SERTLEŞTİRME v19 — telefon deneyimi                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */
/* ══════════════════════════════════════════════════════════════════════
   YATAY TAŞMA ENGELİ — dikey kaydırmayı BOZMADAN (v25 düzeltmesi)

   SORUN: `html, body { overflow-x: hidden }` kök öğeyi kaydırma kabına
   çevirir. Bazı masaüstü tarayıcılarda bu, fare tekerleğinin sayfayı
   kaydırmamasına yol açar — yalnız sağdaki kaydırma çubuğu çalışır.

   ÇÖZÜM: `overflow-x: clip` taşmayı keser ama kaydırma kabı OLUŞTURMAZ.
   Desteklemeyen eski tarayıcılarda hidden'a düşülür (yalnız body'de).
   `max-width: 100vw` de kaldırıldı: 100vw kaydırma çubuğunu içerdiği için
   kendi başına yatay taşma yaratıyordu.
   ══════════════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html { overflow-x: visible; }
  body { overflow-x: hidden; }
}
/* Lastik/rubber-band engeli YALNIZ dokunmatik cihazlarda — masaüstünde
   tekerlek davranışına karışmaz. */
@media (hover: none) and (pointer: coarse) {
  html, body { overscroll-behavior-y: contain; }
}

/* Uzun ürün/kampanya adları harf harf kırılmasın */
.satir, .kart, .oz-k, .baloncuk { word-break: normal; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* iOS: 16px altı input odaklanınca sayfayı yakınlaştırıyor */
input, select, textarea, button { font-size: 16px; }
.otp { font-size: 26px !important; }
.btn-kck { font-size: 13px; }
@media (max-width: 640px) {
  /* Alt menü + güvenli alan; içerik menünün altında kalmasın */
  .wrap { padding: 14px 13px calc(96px + var(--sa-alt)); }
  .alt-menu { padding-bottom: var(--sa-alt); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .am { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .tosty { bottom: calc(92px + var(--sa-alt)); }
  /* Dokunma hedefleri (v19.3 — .btn-kck'yi 38px'e düşüren satır kaldırıldı:
     bu sınıf her zaman gerçek bir <button> üzerinde kullanılıyor, yani zaten
     44px kuralına tabi olmalıydı; aksi durum dokunma hedefini küçültüyordu) */
  button, .btn-tur, .am, .roz { min-height: 44px; }
  /* Satırlar dar ekranda alt alta, değer sağa hizalı */
  .satir { gap: 8px; font-size: 13.5px; }
  .satir > *:last-child { text-align: right; flex-shrink: 0; }
  .kart { padding: 14px; border-radius: var(--r-xl); }
  /* Özet kutuları: 2 sütun korunur ama içerik taşmaz */
  .oz-grid { gap: 9px; }
  .oz-k { padding: 12px; min-width: 0; }
  .baloncuk { max-width: 92%; }
}
@media (max-width: 360px) { .oz-grid { grid-template-columns: 1fr; } }
/* Momentum kaydırma + kazara metin seçimi engeli */
.wrap, .mesajlar { -webkit-overflow-scrolling: touch; }
button, .am, .roz, .btn-tur { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* ── v20 yeni özellikler ── */
.baslik-satir { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; }
.odul-liste { display: flex; flex-direction: column; gap: 9px; }
.odul-k { display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border: 1px solid var(--brd); border-left: 4px solid var(--or); border-radius: var(--r-lg);
  background: var(--bg); }
.odul-k.yetersiz { border-left-color: var(--brd); opacity: .7; }
.odul-p { font-size: 20px; font-weight: 800; color: var(--or); line-height: 1; }

/* ── İlk giriş karşılaması ── */
.krs-fon { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px;
  background: rgba(6,6,10,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .32s ease; overflow-y: auto; }
.krs-fon.acik { opacity: 1; }
.krs-kutu { width: min(430px,100%); background: var(--card); border: 1px solid var(--brd);
  border-radius: var(--r-2xl); padding: 28px 26px calc(26px + var(--sa-alt));
  box-shadow: var(--e5); text-align: center;
  transform: translateY(16px) scale(.97); transition: transform .38s cubic-bezier(.22,1,.32,1); }
.krs-fon.acik .krs-kutu { transform: none; }
.krs-ikon { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.krs-kutu h2 { margin: 0 0 6px; font-size: 21px; }
.krs-kutu .alt { color: var(--mut); font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
.krs-kutu label { display: block; text-align: left; font-size: 12.5px; font-weight: 700;
  margin: 12px 0 5px; }
.krs-kutu input { width: 100%; box-sizing: border-box; }
.krs-not { text-align: left; font-size: 12px; color: var(--mut); line-height: 1.55;
  margin: 8px 0 0; padding: 9px 11px; border-radius: var(--r-md); background: var(--bg);
  border: 1px solid var(--brd); }
.krs-hata { text-align: left; font-size: 12.5px; color: var(--no); font-weight: 600;
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r-md);
  background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.3); }
.krs-btn { width: 100%; margin-top: 18px; border: none; border-radius: var(--r-lg); padding: 14px;
  background: var(--grad); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.krs-btn:disabled { opacity: .6; cursor: default; }
.krs-btn.ikincil { background: var(--bg); color: var(--txt); border: 1px solid var(--brd); }
.krs-dugmeler { display: flex; gap: 9px; }
.krs-dugmeler .krs-btn { flex: 1; }

/* ── Karşılama 3. adımı: KVKK ve İYS onay kutuları (v25) ──
   Dokunma hedefi 44px'in altına düşmez; kutu ile metin aynı satırda
   hizalanır ve uzun metinlerde kutu yukarıda sabit kalır. */
.krs-izin { display: flex; align-items: flex-start; gap: 11px; text-align: left;
  padding: 12px 12px; margin: 8px 0 0; border-radius: var(--r-lg);
  background: var(--bg); border: 1px solid var(--brd); cursor: pointer;
  transition: border-color .16s, background .16s; }
.krs-izin:hover { border-color: var(--acc, #ff7a1a); }
.krs-izin input[type=checkbox] { width: 21px; height: 21px; margin: 1px 0 0; flex: 0 0 21px;
  accent-color: var(--acc, #ff7a1a); cursor: pointer; }
.krs-izin span { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; font-weight: 400; }
.krs-izin span b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.krs-izin span em { display: block; font-style: normal; font-size: 12px; color: var(--mut);
  line-height: 1.5; }
.krs-izin span em a { color: var(--acc, #ff7a1a); }
.krs-izin:has(input:checked) { border-color: var(--ok, #16a34a);
  background: var(--bg);
  background: color-mix(in srgb, var(--ok, #16a34a) 8%, var(--bg)); }
/* :has() desteklemeyen tarayıcıda görünüm bozulmaz — yalnız vurgu olmaz. */
.krs-izin.krs-zorunlu { border-color: rgba(220,38,38,.35); }
.krs-izin.krs-zorunlu:has(input:checked) { border-color: var(--ok, #16a34a); }
.krs-ops { font-weight: 400; color: var(--mut); font-size: 11.5px; }
.krs-baslik-kucuk { text-align: left; font-size: 12.5px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; color: var(--mut);
  margin: 20px 0 6px; padding-top: 14px; border-top: 1px solid var(--brd); }
.krs-ozet { text-align: left; background: var(--bg); border: 1px solid var(--brd);
  border-radius: var(--r-lg); padding: 4px 14px; margin-bottom: 4px; }
.ko-satir { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0;
  border-bottom: 1px dashed var(--brd); font-size: 13.5px; }
.ko-satir:last-child { border-bottom: 0; }
.ko-satir span { color: var(--mut); }
@media (max-width: 420px) { .krs-kutu { padding: 22px 18px; } .krs-ikon { font-size: 38px; } }

/* ── Sadakat kartı v22 ── */
.sk-kart { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 20px 22px;
  margin-bottom: 14px; color: #fff; border: none;
  background: linear-gradient(135deg, #121218 0%, #23232c 55%, #2c2118 100%);
  box-shadow: var(--e4); }
.sk-isik { position: absolute; right: -50px; top: -50px; width: 200px; height: 200px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(245,166,35,.34), transparent 70%); }
.sk-ust { position: relative; display: flex; justify-content: space-between;
  align-items: center; gap: 10px; }
.sk-ust b { font-size: 17px; font-weight: 700; }
.sk-ust b span { color: var(--or); }
.sk-seviye { background: rgba(245,166,35,.24); border: 1px solid rgba(245,166,35,.5);
  border-radius: var(--r-tam); padding: 4px 13px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.sk-etiket { position: relative; margin: 20px 0 3px; font-size: 11px; letter-spacing: 2.5px;
  text-transform: uppercase; opacity: .62; }
.sk-ad { position: relative; font-size: 19px; font-weight: 800; letter-spacing: .5px; }
.sk-alt { position: relative; display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-top: 15px; font-size: 13px; }
.sk-alt b { font-weight: 800; }
.sk-tel { margin-left: auto; opacity: .72; font-variant-numeric: tabular-nums; }
.sk-ilerle { position: relative; margin-top: 15px; }
.sk-cubuk { height: 6px; border-radius: var(--r-sm); background: rgba(255,255,255,.14); overflow: hidden; }
.sk-cubuk > div { height: 100%; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--or), #ffd479); transition: width .7s ease; }
.sk-ilerle span { display: block; margin-top: 7px; font-size: 11.5px; opacity: .72; }
.sk-barkod { background: #fff; border-radius: var(--r-lg); padding: 14px 16px; }
.sk-numara { margin-top: 9px; font-size: 14px; letter-spacing: 3px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--mut); }
.sk-tam { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  padding: 20px; background: #fff; opacity: 0; transition: opacity .26s ease; overflow-y: auto; }
.sk-tam.acik { opacity: 1; }
.sk-tam-ic { width: min(560px, 100%); text-align: center; }
.sk-tam-barkod { background: #fff; padding: 10px 4px; }
/* TEMA-SABIT: tam ekran sadakat kartı kendi sabit zeminini taşır
   (.sk-tam-barkod/.sk-tam-kod beyaz, kaplama koyu). Yazı renkleri bilinçli
   sabittir; tema değişkenine bağlanırsa kart üstünde okunmaz hâle gelir. */
.sk-tam-no { margin: 14px 0 20px; font-size: 19px; letter-spacing: 5px; font-weight: 800;
  color: #111; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .sk-ad { font-size: 17px; } .sk-tam-no { font-size: 15px; letter-spacing: 3px; } }

/* ══════════════════════════════════════════════════════════════════
   DÜĞME SIKIŞMA KORUMASI
   Kalıp: <div style="display:flex"><input><button>Ara</button></div>
   input'un width:100% değeri flex-basis'i şişirir; düğme min-content'e
   iner ve "Ara" harf harf alt alta diziliyordu (A / R / A).
   Çözüm: düğmeler asla küçülmez ve satır kırmaz; input küçülebilir.
   ══════════════════════════════════════════════════════════════════ */
button, .btn, .btn-sm, .btn-kck, .btn-tur, .btn-ana {
  white-space: nowrap;
  flex-shrink: 0;
  min-width: fit-content;
}
input, select, textarea { min-width: 0; }   /* sıkışmayı input üstlenir */
/* Dar ekranda satır tümden sığmazsa alt alta geçsin — harf harf değil */
@media (max-width: 420px) {
  .ara-satir { flex-wrap: wrap; }
  .ara-satir > input { flex: 1 1 100%; }
  .ara-satir > button { flex: 0 0 auto; }
}

/* nowrap istisnası: bilinçli olarak satır kırması gereken uzun etiketler */
button.btn-sar, .btn.btn-sar { white-space: normal; line-height: 1.35; }

/* ── "Yeni sürüm hazır" şeridi (SW güncellemesi) ── */
.sw-guncelle {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + var(--sa-alt));
  z-index: 9999; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px 11px 18px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #17171a, #26262c); color: #fff;
  box-shadow: var(--e4); font-size: 14px; font-weight: 600;
  animation: swGir .34s cubic-bezier(.2,.9,.3,1.2) both;
  max-width: calc(100vw - 24px);
}
.sw-guncelle button {
  background: linear-gradient(135deg,#c25400,#e8720f); color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.3);
  border: none; border-radius: var(--r-md); padding: 8px 16px; font-weight: 800;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.sw-guncelle button:hover { filter: brightness(1.08); }
/* v23 — "Sonra" düğmesi (şerit artık kalıcı; kapatılabilir) — ikincil görünüm, dokunma hedefi ≥ 40px */
.sw-guncelle button.sw-sonra { background: transparent; border: 1px solid rgba(255,255,255,.35); font-weight: 600; text-shadow: none; }
.sw-guncelle button { min-height: 40px; }
@media (max-width: 420px) { .sw-guncelle { gap: 8px; padding: 9px 10px 9px 14px; font-size: 13px; } .sw-guncelle button { padding: 8px 12px; } }
@keyframes swGir { from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.94); }
                   to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .sw-guncelle { animation: none; } }

/* Telefon alanı geri bildirimi */
input.tel-gecerli { border-color: #2ecc71 !important; box-shadow: var(--e1); }
input.tel-eksik   { border-color: #e6a23c !important; }

/* ══════════ SADAKAT KARTI — kod sekmeleri, QR, tam ekran ══════════ */
.kod-sekme { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.kod-sek { background: var(--kart2, #f4f5f8); border: 1px solid var(--brd); border-radius: var(--r-md);
  padding: 8px 16px; font-size: 13.5px; font-weight: 700; }
.kod-sek.sec { background: var(--grad); color: #fff !important; border-color: transparent; }
.kod-alan.gizli { display: none; }
.sk-qr { background: #fff; border-radius: var(--r-xl); padding: 14px; max-width: 260px; margin: 0 auto;
  box-shadow: var(--e3); }
.sk-qr svg { display: block; width: 100%; height: auto; }

/* TEMA-SABIT: tam ekran kart kaplaması daima koyudur; başlık beyaz sabit. */
.sk-tam-baslik { color: #fff; font-weight: 800; font-size: 16px; margin-bottom: 14px; opacity: .92; }
.sk-tam-kod { background: #fff; padding: 14px 8px; border-radius: var(--r-lg); }
.sk-tam-kod.qr { padding: 18px; max-width: 340px; margin: 0 auto; }
.sk-tam-kod svg { display: block; width: 100%; height: auto; }
.sk-tam-dugme { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* Arkadaş getir kodu */
.davet-kod { font-size: 30px; font-weight: 900; letter-spacing: 6px; text-align: center;
  padding: 16px 10px; border-radius: var(--r-xl); background: var(--grad); color: #fff;
  box-shadow: 0 10px 26px rgba(255,122,0,.28); -webkit-user-select: all; user-select: all; }
@media (max-width: 420px) { .davet-kod { font-size: 24px; letter-spacing: 4px; } }

/* ══════════════════════════════════════════════════════════════════════
   MOBİL DENEYİM — v23 ince ayarlar
   Hedef: tek elle kullanılabilir, kaydırma akıcı, dokunma hedefleri
   yeterli, çentikli ekranlarda içerik kesilmiyor.
   ══════════════════════════════════════════════════════════════════════ */

/* Çentik/gesture bar güvenli alanı — iPhone'da alt menü ve düğmeler kesilmesin */
@supports (padding: max(0px)) {
  body { padding-left: var(--sa-sol);
         padding-right: var(--sa-sag); }
  .topbar { padding-top: var(--sa-ust); }
}

@media (max-width: 860px) {
  /* Dokunma hedefleri: WCAG 44×44 px */
  button, .btn, .btn-sm, select, input[type="checkbox"] + span,
  .tab, .nav-item, .pay-btn, .qbtn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding: 9px 13px; }

  /* iOS'ta 16px altı font input'a odaklanınca sayfayı yakınlaştırır */
  input, select, textarea { font-size: 16px !important; }

  /* Yatay kaydırma çubukları: parmakla akıcı, momentumlu */
  .table-wrap, .fav-serit, .kod-sekme, .urun-cip, .urun-filtre {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  /* Modal: tam ekrana yakın, alt kısımdan yükselir (tek elle erişim) */
  .modal { max-height: 92vh; border-radius: 20px 20px 0 0; }
  .modal-back { align-items: flex-end; }
  .modal-actions { position: sticky; bottom: 0; background: var(--card);
    padding: 12px 0 calc(8px + var(--sa-alt));
    margin-bottom: calc(-1 * var(--sa-alt));
    border-top: 1px solid var(--brd); z-index: 2; }
  .modal-actions button { flex: 1 1 auto; }

  /* Uzun sayı sütunları taşmasın */
  .t-right, .sag { font-variant-numeric: tabular-nums; }

  /* Sekme şeridi: aktif sekme görünür kalsın */
  .tabs { scroll-snap-type: x proximity; }
  .tab { scroll-snap-align: center; }
}

@media (max-width: 480px) {
  /* Başlıklar ekrana sığsın */
  h1 { font-size: 20px; }
  h2, .sec { font-size: 16px; }
  .card { padding: 14px; border-radius: var(--r-xl); }
  .modal { padding: 16px 14px calc(14px + var(--sa-alt)); }
  /* Satır grupları alt alta ve tam genişlik */
  .row > input, .row > select, .row > textarea { flex: 1 1 100%; }
  .modal-actions { flex-wrap: wrap; }
}

/* Dokunmatik cihazda hover efektleri KAPALI — parmak "yapışkan hover" bırakır */
@media (hover: none) {
  button:hover, .btn:hover, .card:hover, .stat:hover,
  .nav-item:hover, tbody tr:hover, .tab:hover {
    transform: none !important; filter: none !important; box-shadow: inherit;
  }
  .btn-primary:hover::after, .btn-blue:hover::after, .btn-green:hover::after { left: -85%; }
  /* Basılı geri bildirim hover yerine active ile verilir */
  button:active, .btn:active { transform: scale(.97); }
}

/* Hareket azaltma tercihi: tüm animasyonlar kapanır (erişilebilirlik) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Klavye ile gezinme: odak her zaman görünür (fare kullanımında değil) */
:focus-visible { outline: 3px solid var(--orange, #ff7a1a); outline-offset: 2px; border-radius: var(--r-sm); }

/* Yazdırma: gereksiz arayüz gitsin, mürekkep harcanmasın */
@media print {
  /* v14.3 — tema cilası: gölge/animasyon kâğıda basılmaz (mürekkep tasarrufu).
     NOT: bu kurallar bilinçli olarak MEVCUT print bloğuna eklendi; ayrı bir
     @media print açmak, v14.1'de tek bloğa indirilen yapıyı yeniden bölerdi. */
  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }
  a[href]::after { content: ""; }

  .sidebar, .topbar, .toasts, #modal-root, .alt-menu, .sw-guncelle,
  button, .btn, .btn-sm, .tabs { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; page-break-inside: avoid; }
  body { background: #fff !important; color: #000 !important; }
}

/* ══════════ TEMA CİLASI — v23 (Müşteri Paneli) ══════════ */
.kart { box-shadow: var(--e4);
        animation: kartGir .38s cubic-bezier(.22,.9,.28,1.02) both; }
.kart:nth-of-type(1) { animation-delay: .02s } .kart:nth-of-type(2) { animation-delay: .07s }
.kart:nth-of-type(3) { animation-delay: .12s } .kart:nth-of-type(n+4) { animation-delay: .16s }
@keyframes kartGir { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* Sadakat kartında ışık huzmesi yavaşça geçer */
.sk-kart .sk-isik { animation: skIsik 6s ease-in-out infinite; }
@keyframes skIsik { 0%,100% { opacity: .28; transform: translateX(-12%) } 50% { opacity: .55; transform: translateX(12%) } }

/* Alt menü: seçili sekmede yukarı doğru yumuşak vurgu */
.am { transition: color .16s ease, transform .16s ease; }
.am.sec { transform: translateY(-2px); }
.am.sec .i { filter: drop-shadow(0 4px 10px rgba(255,122,0,.4)); }

/* Puan/seviye çubuğu dolarken akış hissi */
.sk-cubuk > div { transition: width .8s cubic-bezier(.22,.9,.28,1.02); }

* { scrollbar-width: thin; }

/* ══════════ HARCAMA KARNESİ ══════════ */
.karne-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; }
.ko-k { background: var(--kart2, #f4f5f8); border-radius: var(--r-lg); padding: 12px 14px; }
.ko-k span { display: block; font-size: 11.5px; color: var(--mut); margin-bottom: 4px; }
.ko-k b { font-size: 19px; }
/* v24 (B3): 360 px'te 2 sütunlu karne kutusu "22.142,24 TL"yi sığdıramayıp rakamın ortasından bölüyordu */
.ko-k b { white-space: nowrap; font-size: clamp(15px, 4.6vw, 19px); }
@media (max-width: 380px) { .karne-ozet { grid-template-columns: 1fr 1fr; } .ko-k { padding: 10px; } }
.ko-k.vurgu { background: var(--grad); color: #fff; }
.ko-k.vurgu span { color: rgba(255,255,255,.85); }

.karne-grafik { display: flex; align-items: flex-end; gap: 6px; height: 160px; margin-top: 14px;
  overflow-x: auto; padding-bottom: 4px; }
.kg-kolon { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; }
.kg-cubuk { width: 100%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: var(--grad);
  min-height: 4px; transition: height .6s cubic-bezier(.22,.9,.28,1.02); }
.kg-etiket { font-size: 10px; color: var(--mut); margin-top: 6px; white-space: nowrap; }

.kat-satir { margin-top: 12px; }
.kat-ust { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; }
.kat-cubuk { height: 8px; border-radius: var(--r-tam); background: var(--kart2, #eceef3); overflow: hidden; }
.kat-cubuk > div { height: 100%; background: var(--grad); border-radius: var(--r-tam);
  transition: width .7s cubic-bezier(.22,.9,.28,1.02); }

/* Alışveriş listesi */
.liste-satir.alindi b { text-decoration: line-through; opacity: .55; }
.liste-satir.alindi { opacity: .72; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBİL UYGULAMA DENEYİMİ — v24
   Hedef: tarayıcıda açılan bir web sayfası gibi değil, telefona kurulmuş
   GERÇEK BİR UYGULAMA gibi hissettirmek.

   · Sayfalar yandan kayarak gelir/gider (uygulama geçişi)
   · Alt sayfa (bottom sheet) tutamaçla aşağı sürüklenerek kapanır
   · Dokunma geri bildirimi: basınca içeri çöken düğmeler
   · Aşağı çekince yenile (pull-to-refresh)
   · Kaydırma sırasında üst bar incelir
   · İskelet yükleme (içerik gelene kadar parıltı)
   · Sistem yazı tipi ve iOS/Android'e uygun ölçüler
   ══════════════════════════════════════════════════════════════════════════ */

/* NOT: aşağıdaki blok hem DAR EKRAN hem DOKUNMATİK cihaz ister.
   Böylece küçültülmüş masaüstü penceresi "uygulama modu"na girmez:
   metin seçilebilir kalır, fare tekerleği normal çalışır. */
@media (max-width: 900px) and (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; }
  body {
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
            user-select: none;                     /* uygulama hissi: metin seçilmez */
  }
  input, textarea, select, .secilebilir, .table-wrap { -webkit-user-select: text; user-select: text; }

  /* ── Sayfa geçiş animasyonu ── */
  .content.anim > * { animation: sayfaGir .3s cubic-bezier(.25,.9,.3,1) both; }
  @keyframes sayfaGir {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: none; }
  }
  .content.geri > * { animation: sayfaGeri .3s cubic-bezier(.25,.9,.3,1) both; }
  @keyframes sayfaGeri {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: none; }
  }

  /* ── Alt sayfa (bottom sheet) ── */
  .modal-back { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%; max-width: none; max-height: 90vh;
    border-radius: 22px 22px 0 0;
    padding: 0 18px calc(18px + var(--sa-alt));
    animation: sayfaAcil .32s cubic-bezier(.22,.95,.3,1.05) both;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  @keyframes sayfaAcil {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
  /* Tutamaç — sürükleyip kapatma ipucu */
  .modal::before {
    content: ""; display: block; width: 42px; height: 5px; border-radius: var(--r-tam);
    background: var(--brd); margin: 10px auto 14px; flex-shrink: 0;
    position: sticky; top: 0;
  }
  .modal h3 { position: sticky; top: 0; background: var(--card); z-index: 3;
    margin: 0 -18px 12px; padding: 4px 18px 12px; border-bottom: 1px solid var(--brd); }

  /* ── Dokunma geri bildirimi ── */
  button:active, .btn:active, .nav-item:active, .am:active,
  .fav-kart:active, .qbtn:active, .card.tiklanir:active {
    transform: scale(.96); opacity: .9;
  }
  button, .btn, .nav-item, .am { transition: transform .09s ease, opacity .09s ease; }

  /* ── Üst bar kaydırınca incelir ── */
  .topbar { transition: min-height .2s ease, box-shadow .2s ease; }
  .topbar.kucuk { min-height: 46px; box-shadow: var(--e3); }
  .topbar.kucuk h1 { font-size: 15px; }

  /* ── Aşağı çekince yenile ── */
  .ptr-gosterge {
    position: fixed; top: 0; left: 50%; transform: translate(-50%, -46px);
    z-index: 60; width: 38px; height: 38px; border-radius: 50%;
    background: var(--card); border: 1px solid var(--brd);
    display: grid; place-items: center; font-size: 17px;
    box-shadow: var(--e3); transition: transform .16s ease, opacity .16s ease;
    pointer-events: none;
  }
  .ptr-gosterge.gorunur { transform: translate(-50%, 12px); }
  .ptr-gosterge.donuyor span { display: inline-block; animation: ptrDon .8s linear infinite; }
  @keyframes ptrDon { to { transform: rotate(360deg); } }

  /* ── Alt gezinme çubuğu: uygulama sekmesi gibi ── */
  #bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; justify-content: space-around; align-items: stretch;
    background: var(--card); border-top: 1px solid var(--brd);
    padding-bottom: var(--sa-alt);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
            backdrop-filter: saturate(1.4) blur(12px);
  }
  #bottom-nav .bn, #bottom-nav .bn-item, .alt-menu .am {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 4px 7px; font-size: 10.5px; font-weight: 600;
    color: var(--mut); background: none; border: none; position: relative;
    min-height: 56px; transition: color .16s ease;
  }
  #bottom-nav .bn .i, #bottom-nav .bn-item .ico, .alt-menu .am .i { font-size: 20px; line-height: 1; transition: transform .18s cubic-bezier(.2,.9,.3,1.3); }
  #bottom-nav .bn.sec, #bottom-nav .bn-item.active, .alt-menu .am.sec { color: var(--or); }
  #bottom-nav .bn.sec .i, #bottom-nav .bn-item.active .ico, .alt-menu .am.sec .i { transform: translateY(-3px) scale(1.12); }
  #bottom-nav .bn.sec::after, #bottom-nav .bn-item.active::after, .alt-menu .am.sec::after {
    content: ""; position: absolute; top: 4px; width: 22px; height: 3px;
    border-radius: var(--r-tam); background: var(--grad);
  }
  #bottom-nav .bn:active .i, #bottom-nav .bn-item:active .ico, .alt-menu .am:active .i { transform: scale(.88); }
  .content { padding-bottom: calc(72px + var(--sa-alt)); }

  /* ── İskelet yükleme ── */
  .iskelet-satir { height: 58px; border-radius: var(--r-lg); margin: 8px 0;
    background: linear-gradient(90deg, var(--card) 25%, rgba(255,255,255,.07) 37%, var(--card) 63%);
    background-size: 400% 100%; animation: iskeletAk 1.3s ease infinite; }
  @keyframes iskeletAk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

  /* ── Kartlar: dokunulabilir görünsün ── */
  .card { border-radius: var(--r-xl); }
  .table-wrap { border-radius: var(--r-lg); }

  /* ── Yatay kaydırmalı sekme şeridi ── */
  .tabs {
    display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; scroll-snap-align: center; border-radius: var(--r-tam); padding: 9px 15px; }

  /* ── Klavye açılınca alt çubuk gizlensin ── */
  /* ══ v14.7 — SEÇİCİLER DÜZELTİLDİ ══
   * Bu iki kural POS'tan olduğu gibi kopyalanmıştı ve #bottom-nav / .content
   * öğelerine bakıyordu. Müşteri panelinde böyle öğe YOK: alt menü .alt-menu,
   * içerik .wrap. Yani klavye açıldığında hiçbir şey olmuyor, alt menü
   * klavyenin üzerinde asılı kalıyordu. Artık doğru öğelere uygulanır. */
  body.klavye-acik .alt-menu { display: none; }
  body.klavye-acik .wrap { padding-bottom: 16px; }
  /* Klavye açıkken yüzen davetler/bildirimler girdi alanını kapatmasın */
  body.klavye-acik .pwa-davet { display: none; }

  /* ── Uygulama gibi: seçim vurgusu ve odak halkası yumuşak ── */
  ::selection { background: rgba(255,122,26,.28); }
}

/* Kurulu PWA'da (standalone) ekstra dokunuşlar */
@media (display-mode: standalone) {
  .pwa-card, .pwa-yukle-serit { display: none !important; }   /* zaten kurulu */
}
/* Lastik etkisini yalnız DOKUNMATİK kurulu uygulamada kapat — masaüstü
   PWA'da fare tekerleği davranışına karışmasın. */
@media (display-mode: standalone) and (pointer: coarse) {
  body { overscroll-behavior: none; }
}

/* Hareket azaltma tercihi her şeyin üstündedir */
@media (prefers-reduced-motion: reduce) {
  .content.anim > *, .content.geri > *, .modal, .ptr-gosterge,
  #bottom-nav .bn .i, .iskelet-satir { animation: none !important; transition: none !important; }
}

/* ── TEMA GELİŞTİRMELERİ (v26) ──
 * POS ile aynı ilkeler: görünür klavye odağı, güvenli dokunma hedefi,
 * hareket hassasiyetine saygı. Üç panel de aynı hissi versin. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--acc, #ff9138);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:where(button, a, input, select, textarea):focus:not(:focus-visible) { outline: none; }
@media (pointer: coarse) {
  button, .btn, .sekme, .alt-nav a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: more) {
  .kart, .card, input, select, textarea, button { border-width: 2px !important; }
}
.t-right, .tutar { font-variant-numeric: tabular-nums; }
td, .baslik { overflow-wrap: anywhere; }


/* ═══════════════════════════════════════════════════════════════
   v31 — OTP KUTULARI · KART RENKLERİ · ROZET ŞERİDİ · YIL ÖZETİ
   ═══════════════════════════════════════════════════════════════ */
.otp-kutular{display:flex;gap:8px;justify-content:center;margin:8px 0 4px;cursor:text}
.otp-kutular span{width:42px;height:52px;border:2px solid var(--brd);border-radius: var(--r-lg);
  display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;
  background:var(--card);transition:border-color .15s,transform .15s;font-variant-numeric:tabular-nums}
.otp-kutular span.dolu{border-color:var(--or);transform:scale(1.05)}
.otp-kutular span.imlec{border-color:var(--or);box-shadow:0 0 0 3px rgba(255,122,0,.16)}
.otp-kutular.hata span{border-color:var(--no);animation:kutuSalla .4s ease}
.otp-kutular.dogru span{border-color:var(--ok);background:rgba(46,204,113,.12)}
@keyframes kutuSalla{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.otp-gizli{position:absolute;opacity:0;pointer-events:none;height:0;width:0}

/* Kart rengi paletleri — üyelik kartının zemin gradyanını değiştirir */
[data-kart="gece"]  { --grad:linear-gradient(135deg,#1e3a8a,#3b82f6) }
[data-kart="zumrut"]{ --grad:linear-gradient(135deg,#065f46,#10b981) }
[data-kart="mor"]   { --grad:linear-gradient(135deg,#5b21b6,#a78bfa) }
[data-kart="gul"]   { --grad:linear-gradient(135deg,#9d174d,#f472b6) }
[data-kart="altin"] { --grad:linear-gradient(135deg,#92400e,#f59e0b) }
.kart-renk{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer;
  transition:transform .15s,border-color .15s}
.kart-renk:hover{transform:scale(1.14)}
.kart-renk.sec{border-color:var(--txt);transform:scale(1.1)}
.kart-renk[data-r=""]{background:linear-gradient(135deg,#ff7a00,#ff9d3f)}
.kart-renk[data-r="gece"]{background:linear-gradient(135deg,#1e3a8a,#3b82f6)}
.kart-renk[data-r="zumrut"]{background:linear-gradient(135deg,#065f46,#10b981)}
.kart-renk[data-r="mor"]{background:linear-gradient(135deg,#5b21b6,#a78bfa)}
.kart-renk[data-r="gul"]{background:linear-gradient(135deg,#9d174d,#f472b6)}
.kart-renk[data-r="altin"]{background:linear-gradient(135deg,#92400e,#f59e0b)}

/* Yazı boyutu */
html[data-boy="buyuk"]{font-size:17.5px}

/* Rozet şeridi (özet üstü) + açık nabzı */
.rozet-serit{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.acik-nabiz{animation:acikNabiz 2.2s ease-in-out infinite}
@keyframes acikNabiz{0%,100%{opacity:1}50%{opacity:.65}}

/* Yıl özeti kartı */
.yo-kart{max-width:340px;margin:auto;background:var(--grad);border-radius: var(--r-2xl);padding:22px;
  color:#fff;box-shadow: var(--e5);animation:yoGir .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes yoGir{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:none}}
.yo-yil{font-size:46px;font-weight:900;opacity:.35;line-height:1}
.yo-kart h2{margin:4px 0 14px;font-size:18px}
.yo-satir{display:flex;flex-direction:column;padding:9px 0;border-top:1px solid rgba(255,255,255,.25)}
.yo-satir b{font-size:21px}
.yo-satir.kucultulmus b{font-size:15px}
.yo-satir span{font-size:12px;opacity:.85}
@media (prefers-reduced-motion:reduce){.yo-kart{animation:none}.acik-nabiz{animation:none}}

.konfeti{position:fixed;top:-12px;width:9px;height:14px;z-index:999;pointer-events:none;
  border-radius: var(--r-xs);animation:konfetiDus linear forwards}
@keyframes konfetiDus{to{transform:translateY(105vh) rotate(540deg)}}


/* ═══════════ v33 — İSKELET YÜKLEME + SAYFA GEÇİŞİ ═══════════ */
/* Veri beklerken boş beyazlık yerine nabız atan iskelet — "hızlı" hissettirir */
.iskelet{border-radius: var(--r-md);background:linear-gradient(90deg,var(--card) 25%,var(--brd) 50%,var(--card) 75%);
  background-size:200% 100%;animation:iskeletKay 1.2s ease-in-out infinite;min-height:16px}
@keyframes iskeletKay{to{background-position:-200% 0}}
/* Sayfa içeriği belirirken yumuşak giriş */
.sayfa-gir{animation:sayfaGir .22s cubic-bezier(.2,.9,.3,1) both}
@keyframes sayfaGir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.iskelet{animation:none}.sayfa-gir{animation:none}}

/* ═══════════════════════════════════════════════════════════════
   v35 — GİRİŞ TEMASI: MASKOT + CANLI ARKA PLAN
   Maskot yazarken gözleriyle takip eder, şifrede gözlerini kapatır,
   yanlış kodda sarsılıp üzülür, doğru kodda sevinir.  Tümü saf CSS/JS;
   prefers-reduced-motion açıkken animasyonlar durur, işlev bozulmaz.
   ═══════════════════════════════════════════════════════════════ */
.giris-blob{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.giris-blob i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;
  background:var(--grad,linear-gradient(135deg,#ff7a00,#ffa347));animation:blobYuz 16s ease-in-out infinite}
.giris-blob i:nth-child(1){width:44vmax;height:44vmax;top:-18vmax;left:-12vmax}
.giris-blob i:nth-child(2){width:36vmax;height:36vmax;bottom:-14vmax;right:-10vmax;animation-delay:-6s;opacity:.22}
.giris-blob i:nth-child(3){width:22vmax;height:22vmax;top:40%;left:60%;animation-delay:-11s;opacity:.16}
@keyframes blobYuz{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vmax,-3vmax) scale(1.08)}66%{transform:translate(-3vmax,3vmax) scale(.94)}}

.maskot{width:118px;height:118px;margin:0 auto 8px;position:relative;-webkit-user-select:none;user-select:none}
.maskot svg{overflow:visible}
.mk-govde{transform-origin:60px 58px;animation:mkNefes 4.2s ease-in-out infinite}
@keyframes mkNefes{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3.5px) scale(1.012)}}
.mk-golge{transform-origin:60px 112px;animation:mkGolge 4.2s ease-in-out infinite}
@keyframes mkGolge{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.86);opacity:.6}}
/* İris takibi JS'ten --bx/--by ile — yumuşak yaylı geçiş */
.mk-iris{transform:translate(var(--bx,0px),var(--by,0px));transition:transform .16s cubic-bezier(.3,1.2,.4,1)}
/* Kapaklar: normalde yüzün üstünde gizli, şifrede yumuşakça iner */
.mk-kapak{transform:translateY(-26px);transition:transform .34s cubic-bezier(.55,0,.25,1)}
.maskot.gizli .mk-kapak{transform:translateY(0)}
.maskot.gizli .mk-kas{transform:translateY(3px)}
.maskot.gizli .mk-govde{transform:translateY(1px) rotate(-1deg);transition:transform .34s ease}
.maskot.gizli .mk-yanak{r:6.6;transition:r .34s ease}
.maskot.gizli .mk-agiz{d:path("M50 78 q10 4 20 0");transition:d .34s ease}
.mk-kas{transition:transform .3s ease;transform-origin:center}
/* Otomatik göz kırpma — 5.2 sn'de bir, canlılık hissi */
.maskot:not(.gizli) .mk-kapak{animation:mkKirp 5.2s infinite}
@keyframes mkKirp{0%,94.5%,100%{transform:translateY(-26px)}96.5%,97.5%{transform:translateY(-2px)}}
/* Elle göz kırpma (tık) — tek göz */
.maskot.kirp .mk-goz.sag .mk-kapak{animation:none;transform:translateY(-2px)}
/* Duygular */
.mk-agiz{transition:d .25s ease}
.maskot.mutlu .mk-agiz{d:path("M45 74 q15 15 30 0")}
.maskot.mutlu .mk-govde{animation:mkZipla .55s cubic-bezier(.3,1.4,.4,1)}
@keyframes mkZipla{0%,100%{transform:translateY(0)}45%{transform:translateY(-13px) scale(1.05)}}
.maskot.mutlu .mk-yanak{r:7}
.maskot.uzgun .mk-agiz{d:path("M48 82 q12 -9 24 0")}
.maskot.uzgun .mk-kas.sol{transform:rotate(12deg) translateY(2px)}
.maskot.uzgun .mk-kas.sag{transform:rotate(-12deg) translateY(2px)}
.maskot.uzgun .mk-govde{animation:mkSars .5s ease}
@keyframes mkSars{0%,100%{transform:translateX(0)}22%{transform:translateX(-7px) rotate(-2.5deg)}66%{transform:translateX(7px) rotate(2.5deg)}}

/* Caps Lock uyarısı + şifre göster düğmesi */
.caps-uyari{display:none;color:var(--yellow,#ffc447);font-size:12.5px;margin-top:4px}
.caps-uyari.acik{display:block}
/* v40 — ŞİFRE ALANI: flex sarmalayıcı (buton ASLA kaymaz).
   Eski hâl absolute + top:50% idi; caps-lock uyarısı ya da mobil min-yükseklik
   devreye girince göz düğmesi kayıyordu.  Artık sarmalayıcı border taşır,
   input şeffaf, buton normal akışta — dikey ortalama garantidir. */
.sifre-sar{ display:flex; align-items:stretch; gap:0;
  background:#f7f8fa; border:1.6px solid #e5e8ee; border-radius: var(--r-lg);
  transition:border .18s, box-shadow .18s, background .18s; overflow:hidden }
.sifre-sar:focus-within{ border-color:#ff7a1a; background:#fff; box-shadow:0 0 0 4px rgba(255,122,26,.13) }
.sifre-sar input{ border:none !important; background:transparent !important; box-shadow:none !important;
  flex:1 1 auto; min-width:0; border-radius:0 !important }
.sifre-goz{ flex:0 0 auto; border:none; background:none; cursor:pointer; font-size:18px;
  opacity:.55; padding:0 14px; min-height:0; display:flex; align-items:center;
  transition:opacity .15s, transform .12s; color:inherit }
.sifre-goz:hover{ opacity:1 }
.sifre-goz:active{ transform:scale(.88) }
/* Dokunmatikte de kaymaz — flex zaten ortalıyor, min-height dayatma yok.
   v19.3: :hover dokunmatikte hiç tetiklenmediği için ikon hep soluk (.55)
   kalıyordu — dokunmatik cihazlarda tam opaklık zorlanır. */
@media (pointer:coarse){ .sifre-goz{ min-height:0 !important; padding:0 16px; opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .giris-blob i,.maskot .kafa{animation:none!important}
}


/* v36 — tema geçiş yumuşatması + maskot göz kırpma */
html.tema-gecis, html.tema-gecis body, html.tema-gecis .card, html.tema-gecis .kart,
html.tema-gecis input, html.tema-gecis button, html.tema-gecis table, html.tema-gecis td {
  transition: background-color .32s ease, color .32s ease, border-color .32s ease !important;
}


/* ══════════════════════════════════════════════════════════════════════
   TEMA ERİŞİLEBİLİRLİK GENİŞLETMESİ (v14.1)
   Modern işletim sistemi tercihleri artık destekleniyor:

   1) forced-colors (Windows Yüksek Kontrast / zorunlu renk modu)
      Windows'ta "Yüksek Kontrast" açan kullanıcıda tarayıcı kendi renk
      paletini DAYATIR. Gradyanlı düğmelerimiz o modda düz renge dönüp
      görünmez olabiliyordu; kenarlık ve sistem renkleriyle net kalır.

   2) prefers-reduced-transparency (saydamlığı azalt)
      Bulanıklık/yarı saydam katmanlar bazı kullanıcılarda okumayı
      zorlaştırır ve zayıf cihazlarda yavaşlatır. Bu tercihte katmanlar
      OPAK yapılır — hem okunur hem daha hızlı.
   ══════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  /* Sistem paleti kazansın; kendi gölge/gradyanlarımız karışmasın */
  * { forced-color-adjust: auto; }
  button, .btn, .btn-sm, .btn-ana, .btn-tur, .mini-btn, .chip, .tab,
  .card, .kart, .modal, .modal-kutu, .table-wrap, input, select, textarea {
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }
  /* Yalnız renkle anlatılan durumlar kenarlıkla da belli olsun */
  .tag, .rozet, .badge { border: 1px solid CanvasText !important; }
  /* Odak halkası sistemde de görünür kalsın */
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px !important; }
}

@media (prefers-reduced-transparency: reduce) {
  /* Bulanıklık kaldırılır, yarı saydam yüzeyler opak zemine oturur */
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .modal, .modal-kutu, .modal-back, .modal-fon, .topbar, .ust, .sidebar,
  #bottom-nav, .alt-menu, .pwa-davet, .toast, .tosty {
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v14.2 — GİRİŞ EKRANI YENİLEMESİ (kurumsal & modern)
   · Katmanlı gradyan zemin (mesh) — marka turuncusu yumuşak, göz yormaz
   · Yumuşak butonlar: geniş yarıçap, katmanlı gölge, ince üst ışık
   · Sahnelenmiş giriş animasyonu: kart yükselir, içerik sırayla belirir
   · Adım göstergesi (1 Telefon → 2 Doğrulama)
   · Karşılama / veda perdesi
   Tüm renkler mevcut değişkenlerden gelir; yeni tema değişkeni eklenmedi.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Zemin: çok katmanlı yumuşak gradyan ── */
#giris {
  position: relative;
  background:
    radial-gradient(900px 620px at 82% -14%, rgba(255, 122, 0, .16), transparent 62%),
    radial-gradient(720px 520px at -8% 108%, rgba(255, 157, 63, .13), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
}
/* İnce ızgara dokusu — "kurumsal" his, içeriği bastırmaz */
#giris::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(120, 120, 130, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 120, 130, .06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 76%);
}

/* ── Kart: cam etkisi + gradyan kenar ışığı ── */
.giris-kart {
  position: relative; z-index: 1;
  max-width: 400px; padding: 34px 28px 28px;
  border-radius: var(--r-2xl);
  background: var(--card);
  box-shadow: var(--e5);
  animation: kartYuksel .62s cubic-bezier(.16, .86, .3, 1) both;
}
/* Üst kenarda ince gradyan çizgi — marka imzası */
.giris-kart::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px;
  border-radius: 0 0 4px 4px; background: var(--grad); opacity: .9;
}
@keyframes kartYuksel {
  from { opacity: 0; transform: translateY(26px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
/* Kart içeriği sırayla belirir — sakin, sahnelenmiş açılış */
.giris-kart > * { animation: icerikGel .5s ease both; }
.giris-kart > *:nth-child(1) { animation-delay: .08s; }
.giris-kart > *:nth-child(2) { animation-delay: .14s; }
.giris-kart > *:nth-child(3) { animation-delay: .20s; }
.giris-kart > *:nth-child(4) { animation-delay: .26s; }
.giris-kart > *:nth-child(5) { animation-delay: .32s; }
.giris-kart > *:nth-child(n+6) { animation-delay: .38s; }
@keyframes icerikGel { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* ── Marka başlığı: gradyan yazı ── */
.marka-baslik { font-size: 25px; font-weight: 800; letter-spacing: -.4px; }
.marka-baslik span {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--or);   /* geri düşüş */
}
#g-selam { font-weight: 700; color: var(--txt); margin: 8px 0 2px; font-size: 14px; }
.giris-kart .alt:last-of-type { margin-bottom: 4px; }

/* ── Adım göstergesi ── */
.g-adimlar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  list-style: none; padding: 0; margin: 16px 0 4px;
}
.g-adimlar li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--mut);
  transition: color .3s ease;
}
.g-adimlar li + li::before {
  content: ""; width: 26px; height: 2px; border-radius: var(--r-xs);
  background: var(--brd); margin-right: 3px; transition: background .3s ease;
}
.g-adimlar li span {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; background: var(--brd); color: var(--mut);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.g-adimlar li.etkin { color: var(--txt); }
.g-adimlar li.etkin span { background: var(--grad); color: #fff; transform: scale(1.08); }
.g-adimlar li.tamam span { background: var(--ok); color: #fff; }
.g-adimlar li.tamam + li::before { background: var(--or); }

/* ── Yumuşak butonlar ── */
.btn-yumusak {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: 15px 18px; font-size: 15px; letter-spacing: .1px;
  box-shadow: 0 10px 26px rgba(255, 122, 0, .30), 0 2px 4px rgba(255, 122, 0, .18),
              inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .16s cubic-bezier(.34, 1.4, .5, 1), box-shadow .22s ease, filter .2s ease;
}
.btn-yumusak:hover { transform: translateY(-1.5px); box-shadow: 0 15px 34px rgba(255, 122, 0, .38); }
.btn-yumusak:active { transform: translateY(0) scale(.985); }
.btn-yumusak:disabled { filter: grayscale(.5) opacity(.6); cursor: not-allowed; transform: none; }
.btn-yumusak > span { position: relative; z-index: 1; }
/* Metin bağlantı butonları */
.g-metin-btn {
  width: 100%; margin-top: 8px; border: none; background: none;
  color: var(--mut); font-size: 13px; font-weight: 600; padding: 8px;
  border-radius: var(--r-md); transition: color .2s ease, background .2s ease;
}
.g-metin-btn:hover:not(:disabled) { color: var(--or); background: rgba(255, 122, 0, .07); }
.g-metin-btn:disabled { opacity: .5; cursor: default; }

/* Adım geçişi: yeni panel yandan yumuşakça girer */
.g-panel:not(.gizli) { animation: panelKay .38s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes panelKay { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ── Güven şeridi ── */
.g-guven {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--brd);
}
/* v19.11: yalnız DOĞRUDAN çocuk — eskiden seçici ikonun (ikonlar.js .pt-i)
 * kendi span'ini de hap gibi boyuyor, simge boş bir oval olarak görünüyordu. */
.g-guven > span {
  font-size: 11px; font-weight: 600; color: var(--mut);
  background: var(--bg); border: 1px solid var(--brd);
  border-radius: var(--r-tam); padding: 5px 10px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.g-guven > span .pt-i { width: 13px; height: 13px; display: inline-flex; }
.g-guven > span .pt-i svg { width: 13px; height: 13px; }

/* ── KARŞILAMA / VEDA PERDESİ ── */
.perde {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  /* Koyu-turuncu gradyan: beyaz yazı her stopta ≥5:1 okunur (açık turuncu
     üzerinde beyaz yalnız 2.6:1 kalıyordu — erişilebilir değildi). */
  background: linear-gradient(150deg, #1b1206, #7a3600 48%, #a84a00);
  color: #fff; text-align: center; padding: 24px;
  animation: perdeAc .34s ease both;
}
.perde.kapan { animation: perdeKapa .42s ease both; }
.perde-ic { animation: perdeIc .55s cubic-bezier(.16, .86, .3, 1) .06s both; }
.perde-ikon { font-size: 54px; line-height: 1; animation: perdeIkon 1.5s ease-in-out infinite; }
.perde-baslik { font-size: 25px; font-weight: 800; margin-top: 14px; letter-spacing: -.3px; }
.perde-alt { font-size: 14px; opacity: .92; margin-top: 7px; }
@keyframes perdeAc  { from { opacity: 0; } to { opacity: 1; } }
@keyframes perdeKapa { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes perdeIc  { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes perdeIkon { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.06); } }

@media (max-width: 400px) {
  .giris-kart { padding: 28px 20px 24px; border-radius: var(--r-2xl); }
  .marka-baslik { font-size: 22px; }
  .g-guven > span { font-size: 10.5px; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .giris-kart, .giris-kart > *, .g-panel:not(.gizli),
  .perde, .perde-ic, .perde-ikon { animation: none !important; }
  .btn-yumusak, .g-adimlar li, .g-adimlar li span, .g-metin-btn { transition: none !important; }
  .btn-yumusak:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   v14.3 — TEMA CİLASI (tüm panellerde ortak ilkeler)
   1) ODAK HALKASI: klavyeyle gezen kullanıcı her zaman nerede olduğunu görür.
      Tek bir kural tüm etkileşimli öğeleri kapsar; tek tek yazmak gerekmez.
   2) SEÇİM RENGİ: metin seçimi marka rengiyle uyumlu ve OKUNUR olur.
   3) KAYDIRMA ÇUBUĞU: koyu temada varsayılan açık çubuk göze batıyordu.
   4) GEÇİŞ TUTARLILIĞI: rastgele sürelerin yerini üç basamaklı ölçek alır.
   5) YAZDIRMA: gölge/animasyon kâğıda basılmaz, mürekkep israfı olmaz.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) Tek ve tutarlı odak halkası — sıçrama yaratmaz (outline, layout'u itmez) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--or, var(--orange, #ff7a00));
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Fare ile tıklamada halka çıkmaz (yalnız klavye) */
:focus:not(:focus-visible) { outline: none; }

/* 2) Metin seçimi — marka turuncusu üstünde BEYAZ yalnız 2.6:1 veriyordu
   (okunmaz). Açık turuncu zemin + neredeyse siyah metin 11:1 üstü kontrast
   verir ve her iki temada da net görünür. */
::selection { background: #ffd9b0; color: #16120d; }

/* 3) İnce, temaya uyan kaydırma çubuğu */
* { scrollbar-width: thin; scrollbar-color: var(--brd, var(--border, #888)) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--brd, var(--border, #888));
  border-radius: var(--r-tam);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--mut, var(--muted, #666)); background-clip: content-box; }

/* 4) Hareket: kullanıcı azaltma istediyse HER ŞEY durur (tek yerde garanti) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 5) Yazdırma kuralları AŞAĞIDAKİ mevcut @media print bloğuna eklendi. */

/* 6) Yüksek kontrast tercihi — kenarlıklar belirginleşir */
@media (prefers-contrast: more) {
  .card, .kart, .modal, .modal-kutu, input, select, textarea, button, .btn, .tab {
    border-width: 2px !important;
  }
}

/* v14.5: dokunmatik cihazda :hover YOKTUR. Şifre göster düğmesi
   %55 saydamlıkta kalıyor ve "pasif" görünüyordu; parmakla kullanan
   kişi düğmenin tıklanabilir olduğunu anlamıyordu. */
@media (hover: none) {
  .sifre-goz { opacity: .9; }
  .sifre-goz:active { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v14.5 — MÜŞTERİ PANELİNE ÖZEL PALETLER
   
   POS'tan FARKLI bir amaç: burası müşterinin kendi hesabı. Kişiselleştirme
   bir "sahiplik" duygusu verir ve panele dönüşü artırır. Paletler sıcak ve
   davetkârdır; operasyonel değil, kişiseldir.
   
   Marka turuncusu VARSAYILAN kalır — kimlik korunur. Diğer paletler
   kullanıcının kendi tercihidir ve yalnız kendi cihazını etkiler.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Gün Batımı (varsayılan marka turuncusu — burada tanım yok, :root taşır) ── */

/* ── Okyanus — sakin mavi ── */
[data-palet="okyanus"] {
  --or: #0d7fa8; --or2: #1a9fce;
  --grad: linear-gradient(135deg, #0d7fa8, #1a9fce);
  --mavi: #0d7fa8;
}
[data-tema="koyu"][data-palet="okyanus"] { --or2: #3fbde8; --grad: linear-gradient(135deg, #0d7fa8, #3fbde8); }

/* ── Orman — dingin yeşil ── */
[data-palet="orman"] {
  --or: #1c7a4a; --or2: #26a563;
  --grad: linear-gradient(135deg, #1c7a4a, #26a563);
}
[data-tema="koyu"][data-palet="orman"] { --or2: #3fce85; --grad: linear-gradient(135deg, #1c7a4a, #3fce85); }

/* ── Gece Moru — akşam okuması ── */
[data-palet="mor"] {
  --or: #6a3fb5; --or2: #8b5fd6;
  --grad: linear-gradient(135deg, #6a3fb5, #8b5fd6);
}
[data-tema="koyu"][data-palet="mor"] { --or2: #a97ff0; --grad: linear-gradient(135deg, #6a3fb5, #a97ff0); }

/* ── Sepya — kâğıt hissi, uzun okuma ── */
[data-palet="sepya"] {
  --bg: #f4ece0; --kart2: #f3e8d8; --card: #fdf8f0; --brd: #ded0ba; --txt: #33291c; --mut: #6f6152;
  --or: #9a5a1c; --or2: #bd7526;
  --grad: linear-gradient(135deg, #9a5a1c, #bd7526);
}
[data-tema="koyu"][data-palet="sepya"] {
  --bg: #1a1611; --kart2: #2b251c; --card: #221d16; --brd: #372f24; --txt: #f0e6d6; --mut: #a2917c;
  --or: #d18f45; --or2: #e5a961;
  --grad: linear-gradient(135deg, #d18f45, #e5a961);
}

/* ── Palet seçici ── */
.palet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 9px; }
.palet-kart {
  display: flex; flex-direction: column; gap: 7px; padding: 11px;
  border: 2px solid var(--brd); border-radius: var(--r-md);
  background: var(--card); color: var(--txt); cursor: pointer;
  font-family: inherit; text-align: left; transition: border-color .15s, transform .12s;
}
.palet-kart:active { transform: scale(.97); }
.palet-kart.secili { border-color: var(--or); }
.palet-ad { font-weight: 700; font-size: 13px; }
.palet-ornek { display: flex; gap: 4px; }
.palet-ornek i { width: 20px; height: 20px; border-radius: var(--r-xs); border: 1px solid rgba(128,128,128,.3); }


/* ═══════════════════════════════════════════════════════════════════════════
 *  v19.0 — DOKUNMA HEDEFLERİ (bkz. POS ve Destek'teki aynı blok)
 *  Ölçüt genişlik değil `pointer: coarse` olmalı: dokunmatik tablet ve
 *  dokunmatik kasa ekranları genişlik eşiğinin üstünde kalıyor ve 44px
 *  kuralından hiç yararlanamıyordu. Fare ile kullanımda hiçbir şey değişmez.
 *  WCAG 2.2 (2.5.8) ve Apple HIG: en az 44×44 px.
 * ═════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  button, .btn, .btn-sm, .tab, .chip, .kart button, .modal button,
  select, textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) {
    min-height: 44px;
  }
  .ikon-btn, .tb-ikon { min-height: 44px; min-width: 44px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 *  v20.0 — GÜVENLİ ALAN KATMANI (bkz. POS'taki aynı bloğun gerekçesi)
 *
 *  Sayfa `viewport-fit=cover` ile açılıyor; güvenli alan payını uygulamanın
 *  vermesi gerekir. Eskiden pay yalnız `body` yan dolgusuna ve alt menünün
 *  alt dolgusuna veriliyordu. `position: fixed` öğeler GÖRÜNTÜ ALANINA göre
 *  konumlanır; `body` dolgusu onları etkilemez. Sonuç: yatay kullanımda alt
 *  menünün ilk/son sekmesi çentiğin altında kalıp basılamıyor, tam ekran
 *  katmanların kapatma düğmesi durum çubuğunun altına giriyordu.
 * ═════════════════════════════════════════════════════════════════════════ */

:root {
  --sa-ust: env(safe-area-inset-top, 0px);
  --sa-alt: env(safe-area-inset-bottom, 0px);
  --sa-sol: env(safe-area-inset-left, 0px);
  --sa-sag: env(safe-area-inset-right, 0px);
}

/* ══ ÖNEMLİ: YAN PAYI İKİ KEZ VERME ══
   `body` zaten yan güvenli alan payını taşır (yukarıdaki @supports bloğu).
   AKIŞ İÇİNDEKİ (static/sticky) öğelere aynı payı BİR KEZ DAHA vermek,
   payı iki katına çıkarır ve esnek satırı (flex row) taşırır: ölçümde üst
   şeritteki çıkış düğmesi, yatay çevrilmiş çentikli ekranda üst şeridin
   sağ kenarını 37 px aşıyordu. Bu yüzden aşağıda YALNIZ `position: fixed`
   öğelere yan pay verilir; akıştaki öğeler yalnız ÜST/ALT payı alır
   (body'de üst/alt pay yoktur). */
.topbar { padding-top: calc(12px + var(--sa-ust)); }
.alt-menu {
  padding-bottom: calc(8px + var(--sa-alt));
  padding-left: calc(4px + var(--sa-sol));
  padding-right: calc(4px + var(--sa-sag));
}
#bottom-nav {
  padding-bottom: calc(6px + var(--sa-alt));
  padding-left: calc(4px + var(--sa-sol));
  padding-right: calc(4px + var(--sa-sag));
}
/* Tam ekran katmanlar: içerik güvenli alanın DIŞINDA kalır. */
.krs-fon, .sk-tam, .perde, .modal-back {
  padding-top: calc(18px + var(--sa-ust));
  padding-bottom: calc(18px + var(--sa-alt));
  padding-left: calc(18px + var(--sa-sol));
  padding-right: calc(18px + var(--sa-sag));
}
.tosty { bottom: calc(84px + var(--sa-alt)); }
.ptr-gosterge { top: calc(var(--sa-ust) + 8px); }
.pwa-davet, .sw-guncelle {
  margin-bottom: var(--sa-alt);
  margin-left: var(--sa-sol);
  margin-right: var(--sa-sag);
}
/* İçerik sütunu yatayda yan çentikten kaçınır. */
/* .wrap akışta; yan payı body'den gelir, burada tekrarlanmaz. */
@media print { :root { --sa-ust: 0px; --sa-alt: 0px; --sa-sol: 0px; --sa-sag: 0px; } }

/* v19.9.2 — alt menü etiketleri taşmaz; dar ekranda "Daha" listesi */
.am-ad { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daha-perde { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; animation: gel .2s ease; }
.daha-kutu { width: 100%; max-width: 520px; background: var(--card); border: 1px solid var(--brd); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 10px 10px calc(78px + var(--sa-alt, 0px)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.daha-oge { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--bg); border: 1px solid var(--brd); color: var(--txt, inherit); font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; }
.daha-oge.sec { border-color: var(--or); color: var(--or); }
.daha-oge .i { font-size: 20px; }
/* v19.9.2 — satırdaki rozet uzun açıklamada gerilip metni üst kenara itmesin */
.roz { line-height: 1.35; }
.satir > .roz { min-height: 0; align-self: center; flex: 0 1 auto; max-width: 62%; text-align: center; border-radius: var(--r-md); }

/* ── v19.11 — Hesap Aç paneli ── */
#g-kayit { text-align: left; }
.g-kayit-baslik { font-size: 18px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 4px; text-align: left; }
#g-kayit label:not(.krs-izin) { display: block; margin-top: 10px; }
#g-kayit input:not([type=checkbox]) { width: 100%; }
#g-kayit .krs-izin { margin-top: 10px; }
.g-kayit-lnk { display: inline; width: auto; padding: 2px 4px; margin: 0; font-weight: 700; }
.teklif-kart { border: 1px solid var(--brd); border-radius: var(--r-lg); padding: 14px; margin-top: 10px; background: var(--bg); }
.teklif-kart .tk-bas { display: flex; align-items: center; gap: 10px; }
.teklif-kart .tk-rz { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  color: #fff; flex: 0 0 38px; font-size: 18px; }
.teklif-kart ul { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; }
.teklif-kart .krs-izin { margin-top: 10px; }
.teklif-kart .tk-soz { max-height: 140px; overflow: auto; white-space: pre-line; font-size: 12.5px; color: var(--mut);
  border: 1px dashed var(--brd); border-radius: 10px; padding: 8px 10px; margin-top: 10px; }
.rozet-cip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; border-radius: 999px;
  padding: 5px 11px; margin: 4px 6px 0 0; border: 1px solid transparent; max-width: 100%; overflow-wrap: anywhere; }


/* v19.11.1 — AÇIK TEMADA OKUNURLUK (WCAG 4,5:1)
 * İkincil yazı rengi koyulaştırıldı (4,37 → 5,7:1). Turuncu, beyaz zeminde
 * METİN rengi olarak 3,1:1 kalıyordu; bağlantı ve durum rozetlerinde metin
 * için koyu tonlar kullanılır (vurgu/zemin rengi aynı kalır). */
:root:not([data-tema="koyu"]) .satir a[href^="tel:"] { color: #c2410c !important; }
:root:not([data-tema="koyu"]) .roz.y { color: #15803d; }
:root:not([data-tema="koyu"]) .roz.s { color: #92400e; }

/* v19.11.1 — parmakla kullanımda onay kutuları okunur/dokunulur boyutta */
input[type="checkbox"], input[type="radio"] { min-width: 18px; min-height: 18px; }
@media (pointer: coarse), (max-width: 760px) {
  input[type="checkbox"], input[type="radio"] { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; flex-shrink: 0 !important; }
}

/* v19.11.1 — gündüz temasında turuncu METİN okunurluğu (WCAG AA 4.5:1).
   Marka turuncusu (#ee6c00) beyaz zeminde 3.1:1 kalıyordu; yalnız yazı
   olarak kullanılan yerlerde koyulaştırılmış tonu kullanılır. Gece teması
   ve dolgulu düğmeler değişmez. */
:root:not([data-tema="koyu"]) .am.sec,
:root:not([data-tema="koyu"]) .alt-menu .am.sec,
:root:not([data-tema="koyu"]) #bottom-nav .bn.sec,
:root:not([data-tema="koyu"]) .ust .tur,
:root:not([data-tema="koyu"]) .odul-p,
:root:not([data-tema="koyu"]) .sk-ust b span,
:root:not([data-tema="koyu"]) .daha-oge.sec,
:root:not([data-tema="koyu"]) #k-bilgi,
:root:not([data-tema="koyu"]) .izin em a { color: #c2410c; }
:root:not([data-tema="koyu"]) .krs-izin span em a { color: #c2410c; }   /* v20: açık temada sözleşme bağlantıları WCAG AA kontrastı */
/* v19.11.1 — alt menü etiketleri ve güven rozetleri en az 11 px */
.am, .am .am-ad { font-size: 11px; }
@media (max-width: 380px) { .am, .am .am-ad { font-size: 10.5px; } }
.g-guven span { font-size: 11px; }

/* ══ v21 — R2: YÜZEN KARTLAR ALT MENÜYÜ ÖRTÜYORDU ══
 * Bildirim izni kartı (push-riza) bottom:12px / z-index 60, PWA davet bandı bottom:14px ile
 * mobilde ve tablette (<980px, alt menü ekranın altındayken) alt menünün ÜSTÜNE biniyor,
 * "Ürün Talebim" dahil sekmelere dokunulamıyordu. Kartlar artık alt menünün üstünde durur;
 * uzun KVKK metni küçük ekranda kartın içinde kayar (ekrandan taşmaz). Masaüstünde (sol ray)
 * eski konum korunur. */
.push-riza { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--sa-alt)); z-index: 60;
  max-width: 520px; margin: 0 auto; box-shadow: 0 8px 30px rgba(0,0,0,.35);
  max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 979px) {
  .push-riza { bottom: calc(76px + var(--sa-alt)); max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); }
  .pwa-davet { bottom: calc(76px + var(--sa-alt)); }
  .sw-guncelle { bottom: calc(80px + var(--sa-alt)); }
}

/* ══ v23 — AÇIK TEMA KONTRAST (WCAG AA 4,5:1) — ölçümle (v23_paneller_ui.cjs) bulundu ══
 * Açık temada durum rozetleri açık renk zeminde 3,8–4,4:1 kalıyordu ("Şu an kapalıyız" 3,76; "Yıl Özetim"
 * 4,10; "Tamamlandı" 4,39) ve tutar gibi turuncu METİNLER beyaz zeminde 3,1:1 idi. Rozet yazıları bir ton
 * koyulaştırıldı; turuncu yalnız METİN olarak kullanıldığında (satır içi color:var(--or)) koyu turuncu
 * #c2410c (5,2:1) olur — düğme/zemin turuncusu ve marka degradesi DEĞİŞMEZ. Koyu tema ve renk paletleri etkilenmez. */
:root:not([data-tema="koyu"]) .roz.y { color: #166534; }
:root:not([data-tema="koyu"]) .roz.k { color: #b91c1c; }
:root:not([data-tema="koyu"]) .roz.m { color: #1d4ed8; }
:root:not([data-tema="koyu"]):not([data-palet]) [style*="color:var(--or)"] { color: #c2410c !important; }

/* ══ v24 (B3) — Profilim › Tema seçimi (Gündüz / Gece / Sistemi izle) ══ seçili düğme marka renginde, dokunma hedefi ≥ 44px */
.tema-secim { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.tema-secim .btn-kck { min-height: 44px; flex: 1 1 auto; }
.tema-secim .btn-kck.secili { background: #c2410c; border-color: #c2410c; color: #fff; }   /* beyaz yazı 5,2:1 (turuncu #ff7a00 üstünde 2,9:1 kalırdı) */
/* v24 (B3) — telefonda dokunma hedefleri ≥ 44 px (ölçüldü: üst çubuk zil/tema 39,6 px, kart rengi 38 px,
 * Destek Hattı numarası 16 px yüksekliğinde metin bağlantısıydı) */
#bild-btn, #tema-btn { min-width: 44px; min-height: 44px; }
.kart-renk { width: 40px; height: 40px; }
.satir > a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 40px; }