/* Play Teknoloji — Yapay Zeka & Canlı Destek • Premium koyu/açık tema */
/* ═══════════════════════════════════════════════════════════════════════════
   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 KOYU temadır; açık tema [data-tema="acik"] 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,.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);
}
[data-tema="acik"] {
  --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);
}

:root, [data-tema="koyu"] {
  color-scheme: dark;
  --bg: #0b0b0d; --bg2: #101014; --card: #151519; --card2: #1c1c22;
  --brd: #26262e; --txt: #f6f6f8; --mut: #9b9ba6;
  --or: #ff7a00; --or2: #ffa347; --grad: linear-gradient(135deg, #ff7a00, #ff9d3f);
  --ok: #2ecc71; --no: #ff5252;
  --golge: 0 10px 34px rgba(0,0,0,.5);
  --parla: 0 0 22px rgba(255,122,0,.3);
  --ben-balon: linear-gradient(135deg, #ff7a00, #ff8f2a);
}
[data-tema="acik"] {
  color-scheme: light;
  --bg: #f6f6f7; --bg2: #ffffff; --card: #ffffff; --card2: #f2f2f4;
  --brd: #e5e5ea; --txt: #131316; --mut: #6d6d78;
  --or: #f26b00; --or2: #ff8c1a; --grad: linear-gradient(135deg, #ff7a00, #ff9d3f);
  --ok: #16a34a; --no: #dc2626;
  --golge: 0 8px 26px rgba(19,19,22,.09);
  --parla: 0 0 18px rgba(242,107,0,.2);
  --ben-balon: linear-gradient(135deg, #ff7a00, #ff8f2a);
}
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--bg); color: var(--txt); font-size: 15px;
  display: flex; flex-direction: column;
  transition: background .3s, color .3s;
  letter-spacing: .1px; -webkit-font-smoothing: antialiased;
}
[data-tema="koyu"] body::before, [data-tema="koyu"] .arka {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(700px 420px at 85% -10%, rgba(255,122,0,.09), transparent 60%),
              radial-gradient(560px 400px at -10% 110%, rgba(255,122,0,.06), transparent 60%);
}
.gizli { display: none !important; }

/* üst bar */
.ust { display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  background: var(--bg2); border-bottom: 1px solid var(--brd); position: sticky; top: 0; z-index: 20; }
.marka { display: flex; align-items: center; gap: 11px; flex: 1; }
.logo-kutu { width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--parla); }
.marka b { font-size: 16.5px; letter-spacing: .2px; }
.marka em { font-style: normal; color: var(--or); }
.marka small { display: block; color: var(--mut); font-size: 11.5px; font-weight: 600; letter-spacing: .4px; }
.led { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: var(--e2);
  animation: nabiz 2.2s ease-in-out infinite; }
@keyframes nabiz { 50% { opacity: .45; } }
.ikon-btn { border: 1px solid var(--brd); background: var(--card2); color: var(--txt); font-size: 16px;
  border-radius: var(--r-md); padding: 8px 11px; cursor: pointer; transition: transform .15s, box-shadow .15s;
  display: inline-flex; align-items: center; }
.ikon-btn:hover { transform: translateY(-1px); box-shadow: var(--golge); }
.ikon-btn:active { transform: scale(.94); }

/* giriş kartı */
.giris { flex: 1; display: flex; align-items: center; justify-content: center; padding: 22px; overflow: auto; }
.giris-kart { width: 100%; max-width: 430px; background: var(--card); border: 1px solid var(--brd);
  border-radius: var(--r-2xl); padding: 38px 32px 26px; text-align: center; box-shadow: var(--golge);
  animation: kartGel .5s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes kartGel { from { opacity: 0; transform: translateY(22px) scale(.97); } }
.giris-logo { width: 78px; height: 78px; margin: 0 auto 16px; border-radius: var(--r-2xl); background: var(--grad);
  display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff;
  box-shadow: var(--parla); animation: sallan 5s ease-in-out infinite; }
@keyframes sallan { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 60% { transform: rotate(4deg); } }
.giris-kart h1 { font-size: 22px; letter-spacing: -.2px; margin-bottom: 8px; }
.alt-yazi { color: var(--mut); font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; }
.giris-kart label { display: block; text-align: left; font-size: 12.5px; font-weight: 700; margin: 12px 0 5px; }
.opsiyonel { color: var(--mut); font-weight: 500; }
input, textarea { font-family: inherit; font-size: 15px; width: 100%; color: var(--txt);
  background: var(--bg2); border: 1.5px solid var(--brd); border-radius: var(--r-lg); padding: 12px 15px;
  outline: none; transition: border .15s, box-shadow .15s; }
input:focus, textarea:focus { border-color: var(--or); box-shadow: 0 0 0 4px rgba(255,122,0,.13); }
.btn-ana { width: 100%; margin-top: 18px; border: none; border-radius: var(--r-lg); padding: 15px;
  font-family: inherit; font-size: 15.5px; font-weight: 800; color: #fff; cursor: pointer;
  background: var(--grad); box-shadow: 0 10px 26px rgba(255,122,0,.35);
  transition: transform .15s, box-shadow .2s, filter .15s; }
.btn-ana:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,122,0,.45); }
.btn-ana:active { transform: scale(.97); }
.btn-ana:disabled { opacity: .6; transform: none; }
.hata { color: var(--no); font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 10px; }
.ozellik-seridi { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 18px; }
.ozellik-seridi span { font-size: 11.5px; font-weight: 700; color: var(--mut);
  border: 1px solid var(--brd); border-radius: var(--r-tam); padding: 5px 11px; background: var(--card2); }

/* sohbet */
.sohbet { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 760px;
  margin: 0 auto; min-height: 0; }
.mesajlar { flex: 1; overflow-y: auto; padding: 18px 16px 6px; scroll-behavior: smooth; }
.msg { display: flex; gap: 9px; margin: 10px 0; align-items: flex-end; }
.msg.anim { animation: msgGel .3s cubic-bezier(.2,.9,.3,1.1) both; }
.msg.gecici .balon { opacity: .6; } /* optimistik gönderim — sunucu onayı gelince tam görünür */
@keyframes msgGel { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.msg.ben { justify-content: flex-end; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--card2); border: 1px solid var(--brd);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.balon { max-width: 78%; padding: 11px 15px; border-radius: var(--r-xl); font-size: 14.5px; line-height: 1.5;
  background: var(--card); border: 1px solid var(--brd); box-shadow: var(--e3);
  white-space: pre-line; word-break: break-word; }
.msg.bot .balon { border-bottom-left-radius: 6px; }
.msg.magaza .balon { border-bottom-left-radius: 6px; border-color: rgba(255,122,0,.4);
  background: linear-gradient(135deg, rgba(255,122,0,.1), transparent 70%), var(--card); }
.msg.ben .balon { background: var(--ben-balon); color: #fff; border: none; border-bottom-right-radius: 6px;
  box-shadow: 0 6px 18px rgba(255,122,0,.3); }
.kimlik { font-size: 11px; font-weight: 800; color: var(--or); margin-bottom: 3px; letter-spacing: .3px; }
.saat { font-size: 10.5px; opacity: .55; margin-top: 5px; text-align: right; }
.msg-gorsel { max-width: 230px; max-height: 230px; border-radius: var(--r-lg); display: block; cursor: zoom-in; }

/* yazıyor animasyonu */
.yaziyor { display: flex; gap: 5px; padding: 4px 24px 10px; }
.yaziyor span { width: 8px; height: 8px; border-radius: 50%; background: var(--mut);
  animation: zipla 1.2s ease-in-out infinite; }
.yaziyor span:nth-child(2) { animation-delay: .18s; }
.yaziyor span:nth-child(3) { animation-delay: .36s; }
@keyframes zipla { 30% { transform: translateY(-6px); opacity: 1; } 60% { opacity: .4; } }

/* hızlı öneri çipleri */
.hizli { display: flex; gap: 7px; flex-wrap: wrap; padding: 4px 16px 8px; }
.chip { border: 1.5px solid var(--or); color: var(--or); background: transparent; font-family: inherit;
  font-size: 12.5px; font-weight: 700; border-radius: var(--r-tam); padding: 7px 14px; cursor: pointer;
  animation: msgGel .35s ease both; transition: background .15s, color .15s, transform .15s; }
.chip:hover { background: var(--or); color: #fff; transform: translateY(-1px); }

/* yazma alanı */
.alan { display: flex; gap: 9px; align-items: flex-end; padding: 10px 14px;
  background: var(--bg2); border-top: 1px solid var(--brd); }
.alan textarea { resize: none; border-radius: var(--r-lg); max-height: 120px; }
.gonder-btn { border: none; border-radius: 50%; width: 46px; height: 46px; flex-shrink: 0;
  background: var(--grad); color: #fff; font-size: 18px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,122,0,.35); transition: transform .15s; }
.gonder-btn:hover { transform: translateY(-2px) rotate(-8deg); }
.gonder-btn:active { transform: scale(.92); }
/* ═══ v15.2 — arayüze bağlanan özelliklerin stilleri ═══ */
.guven-serit { text-align: center; font-size: 12.5px; color: var(--mut);
  margin: 10px 0 4px; line-height: 1.6; }
.guven-serit b { color: var(--or); }
/* Yazarken çıkan bilgi bankası önerileri — mesaj kutusunun hemen üstünde */
.oneri-kutu:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 12px; background: var(--card2); border-top: 1px solid var(--brd); }
.oneri-kutu .oneri-baslik { width: 100%; margin-bottom: 2px; }

.alt-serit { display: flex; gap: 8px; justify-content: center; padding: 8px 12px calc(10px + var(--sa-alt));
  background: var(--bg2); flex-wrap: wrap; }
.mini-btn { border: 1px solid var(--brd); background: var(--card2); color: var(--txt); font-family: inherit;
  font-size: 12px; font-weight: 700; border-radius: var(--r-tam); padding: 7px 13px; cursor: pointer;
  transition: transform .15s, border-color .15s; }
.mini-btn:hover { transform: translateY(-1px); border-color: var(--or); color: var(--or); }

/* modal + yıldızlar */
.modal-fon { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-kutu { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--brd);
  border-radius: var(--r-2xl); padding: 30px 26px; text-align: center; box-shadow: var(--golge);
  animation: kartGel .35s ease both; }
.modal-kutu h2 { font-size: 19px; margin-bottom: 6px; }
.yildizlar { display: flex; justify-content: center; gap: 8px; margin: 18px 0 6px; }
.yildizlar span { font-size: 36px; color: var(--brd); cursor: pointer; transition: transform .15s, color .15s; }
.yildizlar span:hover { transform: scale(1.2); }
.yildizlar span.dolu { color: #ffc447; text-shadow: 0 0 14px rgba(255,196,71,.5); }
.modal-kutu .mini-btn { margin-top: 10px; }

/* toast */
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: center; }
.tosty { background: #141414; color: #fff; padding: 12px 20px; border-radius: var(--r-lg); font-size: 13.5px;
  font-weight: 600; box-shadow: var(--e4); animation: msgGel .25s ease; max-width: 92vw; text-align: center; }
[data-tema="acik"] .tosty { background: #1c1c22; }

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

@media (min-width: 900px) {
  .sohbet { border-left: 1px solid var(--brd); border-right: 1px solid var(--brd); }
  .balon { max-width: 66%; }
}
@media (max-width: 480px) {
  .giris-kart { padding: 30px 22px 20px; }
  .balon { max-width: 84%; }
}

/* v2 — oylar + akış */
.oylar { display: flex; gap: 6px; margin-top: 7px; }
.oy { border: 1px solid var(--brd); background: var(--card2); border-radius: var(--r-md); padding: 3px 9px;
  cursor: pointer; font-size: 13px; transition: transform .15s, border-color .15s; }
.oy:hover { transform: scale(1.15); border-color: var(--or); }
.oy { min-width: 44px; min-height: 44px; }   /* v24 (B3): yanıt puanlama düğmeleri 34 px idi — dokunma hedefi ≥ 44 px */
.oy-tesekkur { font-size: 11.5px; color: var(--ok); font-weight: 700; }

/* 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(--golge); animation: kartGel .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; }
}

/* ═══ Madde 9: Giriş ekranı durum şeridi + popüler sorular ═══ */
.durum-serit { display: flex; align-items: center; gap: 7px; justify-content: center;
  font-size: 13px; margin: 4px 0 12px; padding: 8px 12px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.durum-nokta { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.durum-nokta.yesil { background: #26d07c; box-shadow: var(--e1); }
.durum-nokta.sari { background: #f2b100; box-shadow: 0 0 0 4px rgba(242,177,0,.2); }
.pop-baslik { font-size: 12.5px; opacity: .75; margin: 14px 0 7px; }
.pop-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.pop-chip { background: rgba(255,122,0,.12); border: 1px solid rgba(255,122,0,.35); color: inherit;
  border-radius: var(--r-tam); padding: 7px 13px; font-size: 12.5px; cursor: pointer; transition: .15s; text-align: left; }
.pop-chip:hover, .pop-chip:active { background: rgba(255,122,0,.25); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   TEMA v17 — Derinlik, tipografi, mikro-etkileşim, erişilebilirlik
   (POS ve Müşteri Paneli ile aynı tasarım dili)
   ═══════════════════════════════════════════════════════════════ */
:root, [data-tema="koyu"] {
  --e1: 0 1px 2px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.10);
  --e2: 0 4px 12px rgba(0,0,0,.20), 0 2px 4px rgba(0,0,0,.12);
  --e3: 0 12px 32px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.16);
  --hiz: .18s;
}
/* Açık temada siyah gölge kirli görünür; lacivert-gri ve daha yumuşak olmalı.
   (Bu blok :root'tan SONRA gelmek ZORUNDA — eşit özgüllükte sıra belirler.) */
[data-tema="acik"] {
  --e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --e2: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);
  --e3: 0 12px 32px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.06);
}

/* Tipografi */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.01em; }
h1 { letter-spacing: -.02em; }

/* Mesaj balonları: yumuşak derinlik + akıcı giriş */
.balon { box-shadow: var(--e1); transition: box-shadow var(--hiz) ease; }
.msg.magaza .balon, .msg.bot .balon { box-shadow: var(--e2); }
.msg-gorsel { box-shadow: var(--e2); transition: transform var(--hiz) ease; }
.msg-gorsel:hover { transform: scale(1.03); }

/* Butonlar: dokunsal geri bildirim */
button, .btn-ana, .chip, .pop-chip { transition: background var(--hiz) ease, box-shadow var(--hiz) ease, transform .1s ease, opacity var(--hiz) ease; }
button:active, .btn-ana:active, .chip: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 #ff7a1a; outline-offset: 2px; border-radius: var(--r-md); }
input:focus, textarea:focus {
  border-color: #ff7a1a !important;
  box-shadow: 0 0 0 3px rgba(255,122,26,.15);
}

/* Giriş kartı derinliği */
.giris-kart { box-shadow: var(--e3); }

/* "Yazıyor" göstergesi — canlı his */
#yaziyor { opacity: .85; }

/* Hızlı yanıt çipleri: sıralı giriş animasyonu */
.chip { animation: chipGel .28s cubic-bezier(.2,.9,.3,1) both; }
.chip:nth-child(2) { animation-delay: .04s; }
.chip:nth-child(3) { animation-delay: .08s; }
.chip:nth-child(4) { animation-delay: .12s; }
@keyframes chipGel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  .chip, .msg-gorsel:hover { animation: none; transform: none; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  MOBİL SERTLEŞTİRME v19 — sohbet için telefon deneyimi           ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html { -webkit-text-size-adjust: 100%; }
/* ══════════════════════════════════════════════════════════════════════
   YATAY TAŞMA ENGELİ — dikey kaydırmayı BOZMADAN (v25 düzeltmesi)
   `overflow-x: hidden` kök öğede kaydırma kabı oluşturur ve bazı masaüstü
   tarayıcılarda fare tekerleğiyle kaydırmayı bozar. `clip` kesme yapar ama
   kaydırma kabı oluşturmaz. `max-width:100vw` de kaldırıldı (kaydırma
   çubuğunu içerdiği için kendi başına yatay taşma yaratıyordu).
   ══════════════════════════════════════════════════════════════════════ */
html { overflow-x: clip; }
body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html { overflow-x: visible; }
  body { overflow-x: hidden; }
}
@media (hover: none) and (pointer: coarse) {
  html, body { overscroll-behavior-y: contain; }
}
.balon, .kimlik, .alt-yazi { word-break: normal; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
input, select, textarea, button { font-size: 16px; }   /* iOS yakınlaştırma engeli */
.mini-btn, .chip { font-size: 13.5px; }
@media (max-width: 640px) {
  /* NOT: sabit yükseklik yalnız dokunmatikte (aşağıdaki ayrı blokta) —
     küçültülmüş masaüstü penceresinde sayfa kaydırması bozulmasın. */
  .mesajlar { padding: 14px 12px 4px; overscroll-behavior: contain; }
  .balon { max-width: 84%; font-size: 15px; padding: 11px 14px; }
  .msg-gorsel { max-width: 68vw; max-height: 68vw; }
  /* Yazma alanı klavye üstünde, güvenli alan korunur */
  .alan { padding: 9px 11px calc(9px + var(--sa-alt)); gap: 8px; }
  .alan textarea { max-height: 108px; }
  .gonder-btn { width: 48px; height: 48px; }
  .hizli { padding: 4px 12px 6px; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hizli::-webkit-scrollbar { display: none; }
  /* v14.7: dokunma hedefi 38 → 44px. Apple ve WCAG 2.2 (2.5.8) asgari
     hedef 44×44'tür; 38px'lik şeritte parmakla yanlış çip seçiliyordu. */
  .chip { flex: 0 0 auto; white-space: nowrap; min-height: 44px; display: inline-flex;
    align-items: center; }
  /* .pop-chip HİÇ kapsanmıyordu — sık sorulan sorular şeridinde en küçük hedefti */
  .pop-chip { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 14px; }
  .ust { padding: 10px 13px; }
  .logo-kutu { width: 36px; height: 36px; }
  .ikon-btn, .mini-btn { min-height: 44px; min-width: 44px; }
  .giris-kart { padding: 22px 18px; border-radius: var(--r-xl); }
}
.mesajlar { -webkit-overflow-scrolling: touch; }
button, .chip, .mini-btn, .ikon-btn { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* ── v20 yeni özellikler ── */
.musaitlik { display: flex; align-items: center; gap: 9px; padding: 8px 16px;
  font-size: 13px; border-top: 1px solid var(--brd); background: var(--card2); color: var(--mut); }
.musaitlik .ms-nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--mut); flex: 0 0 auto; }
.musaitlik.acik   { color: var(--ok); } .musaitlik.acik .ms-nokta { background: var(--ok); box-shadow: var(--e2); }
.musaitlik.bekle  { color: var(--or); } .musaitlik.bekle .ms-nokta { background: var(--or); }
.musaitlik.kapali { color: var(--mut); }
.ms-sure { margin-left: auto; font-size: 12px; opacity: .85; }
.fs-kart { border: 1px solid var(--brd); border-radius: var(--r-lg); padding: 13px; margin-top: 12px; text-align: left; }
.fs-ust { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px;
  padding-bottom: 8px; border-bottom: 1px solid var(--brd); font-size: 14px; }
.fs-satir { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; }
html[data-metin="buyuk"]     { font-size: 18px; }
html[data-metin="cok_buyuk"] { font-size: 20px; }
html[data-metin="buyuk"] .balon,
html[data-metin="cok_buyuk"] .balon { font-size: 1em; }

/* ══════════════════════════════════════════════════════════════════
   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; }

/* ══════════════════════════════════════════════════════════════════════
   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 (Destek Paneli) ══════════ */
.balon { animation: balonGir .26s ease-out both; }
@keyframes balonGir { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
.msg.ben .balon { animation-name: balonGirSag; }
@keyframes balonGirSag { from { opacity: 0; transform: translateX(10px) } to { opacity: 1; transform: none } }

/* "Yazıyor…" göstergesi */
.yaziyor span { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin: 0 1.5px; animation: nokta 1.2s infinite; }
.yaziyor span:nth-child(2) { animation-delay: .18s }
.yaziyor span:nth-child(3) { animation-delay: .36s }
@keyframes nokta { 0%,60%,100% { opacity: .25; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }

/* Sohbet penceresi yumuşak gölge */
.sohbet, .kutu { box-shadow: var(--e4); }
* { scrollbar-width: thin; }

/* ══════════ PREMIUM ARAYÜZ — v23 ══════════ */
.giris-ek { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
/* v18.4: overflow-x:auto BURADAN kaldırıldı — .sohbet-arac artık yalnız 3 öğe
   taşıyor (Temsilciye Bağlan / Sohbeti Bitir / Araçlar), yatay kaydırmaya
   ihtiyaç yok; ÜSTELİK burada kalsaydı "Araçlar" açılır menüsünü (bkz.
   .daha-liste, position:absolute) DOM'daki üst kapsayıcı overflow'u
   yüzünden kesip görünmez yapardı. */
.sohbet-arac { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 8px 12px;
  border-bottom: 1px solid var(--brd); }
.sohbet-arac .mini-btn { white-space: nowrap; }
/* Temsilciye Bağlan — çubuktaki tek "birincil" eylem, hafif turuncu vurgu */
.mini-btn.birincil { border-color: var(--or); color: var(--or); }
.mini-btn.birincil:hover { background: var(--or); color: #fff; }

/* ══ v18.4 — "DİĞER / ARAÇLAR" AÇILIR MENÜSÜ ══
 * Giriş ekranındaki 7 düğmelik satır ve sohbetteki 16 düğmelik iki şerit,
 * POS Hızlı Satış ekranındaki "Araçlar" menüsüyle (app.js: kbAraclar)
 * AYNI ilkeyle sadeleştirildi: yalnız gerçekten sık kullanılan 2 eylem
 * her zaman görünür kalır, geri kalanı tek bir <details> menüsünde durur.
 * <details>/<summary> seçildi çünkü: (1) açma/kapama için ekstra JS
 * gerektirmez, (2) klavyeyle ve ekran okuyucuyla doğal çalışır. */
.daha-menu { position: relative; }
.daha-menu > summary { list-style: none; cursor: pointer; }
.daha-menu > summary::-webkit-details-marker { display: none; }
.daha-menu[open] > summary { border-color: var(--or); color: var(--or); }
.daha-liste {
  /* HATA (menü ekranın dışına taşıyordu): önce burada .sohbet-arac için
     "right:0" vardı — bu, düğmenin şeridin EN SAĞINDA olacağını varsayıyordu
     (POS'taki kb-arac-sar'da margin-left:auto ile öyle konumlanır). Ama bu
     şeritte üç öğe justify-content:center ile ORTALANDIĞI için "Araçlar"
     düğmesi ekranın sağına yapışık değil; right:0 paneli düğmenin epey
     solundan başlatıp dar telefonlarda ekranın SOLUNA taşırıyordu (menünün
     bir kısmı hiç görünmüyor, tıklanamıyordu). Tek, konumdan bağımsız kural:
     panel her zaman KENDİ düğmesinin altında ORTALANIR. */
  position: absolute; z-index: 40; top: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  min-width: 230px; max-width: min(300px, calc(100vw - 32px));
  max-height: min(420px, 70vh); overflow-y: auto;
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r-lg);
  box-shadow: var(--e4); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.daha-liste button {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 9px 10px; min-height: 40px; font-family: inherit;
  background: transparent; border: 0; border-radius: var(--r-md);
  color: var(--txt); text-align: left; cursor: pointer; font-size: 13.5px;
}
.daha-liste button:hover, .daha-liste button:focus-visible { background: var(--card2); }
.daha-liste button span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.daha-liste button small { color: var(--mut); font-size: 11px; font-weight: 400; line-height: 1.3; }
.daha-ayrac { height: 1px; background: var(--brd); margin: 4px 2px; }

/* Çalışma saati şeridi */
.calisma-serit { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 9px 12px; border-radius: var(--r-lg); margin: 10px 0 4px; line-height: 1.45; }
/* v19.5: sabit koyu tonlar (#1e8449/#a05a12) koyu temanın neredeyse siyah
 * zemininde WCAG AA kontrastını (4.5:1) geçmiyordu — .musaitlik'te zaten
 * doğru yapılan gibi tema-duyarlı --ok/--or değişkenlerine bağlandı. */
.calisma-serit.acik { background: rgba(46,204,113,.12); color: var(--ok); }
.calisma-serit.kapali { background: rgba(230,162,60,.14); color: var(--or); }
.calisma-serit.acik .durum-nokta { background: var(--ok); }
.calisma-serit.kapali .durum-nokta { background: var(--or); }

/* Sıra durumu kartı */
.sira-kart { text-align: center; padding: 18px; border-radius: var(--r-xl); background: var(--grad); color: #fff; }
.sira-no { font-size: 44px; font-weight: 900; line-height: 1; }
.sira-alt { font-size: 13px; opacity: .9; margin-top: 4px; }
.sira-bilgi { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 8px; margin: 12px 0; }
.sira-bilgi > div { background: var(--card2, rgba(127,127,127,.08)); border-radius: var(--r-lg); padding: 10px 12px; }
.sira-bilgi span { display: block; font-size: 11px; opacity: .7; }
.sira-bilgi b { font-size: 17px; }

/* SSS */
.sss-kat { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.sss-kat .mini-btn.sec { background: var(--grad); color: #fff; border-color: transparent; }
.sss-sonuc { max-height: 46vh; overflow-y: auto; }
.sss-madde { border-bottom: 1px solid var(--brd); }
.sss-soru { width: 100%; text-align: left; background: none; border: none; padding: 11px 4px;
  font-size: 14px; font-weight: 600; cursor: pointer; color: inherit; white-space: normal; }
.sss-cevap { padding: 0 4px 12px; font-size: 13.5px; line-height: 1.65; opacity: .88; }
.sss-cevap.gizli { display: none; }

/* Özet kutusu */
.ozet-kutu { max-height: 44vh; overflow-y: auto; font-size: 12.5px; line-height: 1.75;
  background: var(--card2, rgba(127,127,127,.08)); border-radius: var(--r-lg); padding: 12px 14px; margin: 10px 0; }

/* Memnuniyet anketi */
.anket-yildiz { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.anket-btn { background: var(--card2, rgba(127,127,127,.08)); border: 1px solid var(--brd);
  border-radius: var(--r-lg); padding: 10px; font-size: 17px; cursor: pointer; letter-spacing: 2px; }
.anket-btn:hover { border-color: var(--or); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════════════
   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(--card2) 25%, rgba(255,255,255,.07) 37%, var(--card2) 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İ ══
   * POS'tan kopyalanan #bottom-nav / .content öğeleri destek panelinde hiç
   * yok; kurallar ölüydü. Sohbette klavye açılınca hızlı yanıt şeridi ve
   * çalışma saati bandı yer kaplayıp mesaj alanını eziyordu. */
  /* v18.4: .alt-serit kaldırıldı (bkz. .sohbet-arac — Temsilciye Bağlan /
     Sohbeti Bitir / Araçlar tek şeride toplandı); seçici onun yerini alan
     .sohbet-arac'a güncellendi ki kural yine ölü kalmasın. */
  body.klavye-acik .sohbet-arac { display: none; }
  body.klavye-acik .calisma-serit { display: none; }
  body.klavye-acik .musaitlik { display: none; }
  body.klavye-acik .pwa-davet { display: none; }
  /* Klavye açıkken mesaj listesi kısalan alana uyum sağlasın */
  body.klavye-acik .mesajlar { padding-bottom: 4px; }

  /* ── 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; }

/* ═══════════════════════════════════════════════════════════════
   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 */
@media (pointer:coarse){ .sifre-goz{ min-height:0 !important; padding:0 16px } }
@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;
}

/* ══════════════════════════════════════════════════════════════════════════
   PLANET DESTEK — MOBİL SOHBET YENİDEN DÜZEN (v13.7)
   Sorun: telefonda mesaj alanı neredeyse görünmüyordu. Alt eylem çubuğu
   (7 düğme) çok satıra sarıyor, sıra/özet/geçmiş çubuğuyla birlikte dikey
   alanı yiyordu; öğeler iç içe/üst üste görünüyordu.
   Çözüm: gerçek uygulama gibi TAM EKRAN yükseklik (dvh), mesajlar esner,
   iki eylem çubuğu TEK satır yatay kaydırılır (sarmaz), her şey ferahlar.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* Dinamik viewport yüksekliği — tarayıcı çubuğu/klavye ile doğru boy.
     dvh desteklemeyen eski tarayıcı yukarıdaki height:100%'i kullanır. */
  html, body { height: 100vh; height: 100svh; height: 100dvh; }
  body { overflow: hidden; }               /* sayfa değil, İÇERİK kayar */

  /* Giriş ekranı kendi içinde kayar (kart uzunsa) */
  .giris { overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: flex-start; padding: 16px; }
  .giris-kart { margin: auto; }

  /* Sohbet tam yüksekliği kaplar; mesajlar esner, çubuklar sabit yükseklik */
  .sohbet { min-height: 0; height: 100%; }
  .mesajlar { flex: 1 1 auto; min-height: 0; padding: 14px 12px 8px; }

  /* v18.4: burada önce İKİ eylem çubuğu (.sohbet-arac + .alt-serit, toplam
     16 düğme) TEK satırda yatay kaydırılıyordu — overflow-x:auto ile.
     Toolbar tek şeride (.sohbet-arac, 3 öğe: Temsilciye Bağlan / Sohbeti
     Bitir / Araçlar) indirilince bu artık gerekmiyor; ÜSTELİK zararlıydı —
     "Araçlar" menüsünün açılır paneli (.daha-liste) position:absolute olsa
     da DOM'da .sohbet-arac'ın içinde kalıyor, overflow-x/y burada set
     olduğu sürece panel kesilip görünmez oluyordu. Artık basitçe sarıyor,
     kesme yok. */
  .sohbet-arac { flex-wrap: wrap; justify-content: center; }

  /* Çubuğu hafiflet — dikey alan mesajlarda kalsın */
  .sohbet-arac { padding: 7px 12px; gap: 7px; }
  .alan       { padding: 9px 12px calc(9px + var(--sa-alt)); }
  .mini-btn   { padding: 9px 13px; font-size: 13px; min-height: 40px; }
  .musaitlik  { padding: 6px 14px; font-size: 12px; }
  .hizli      { padding: 5px 12px 7px; }

  /* Mesaj balonları — ferah ve okunur */
  .msg   { margin: 9px 0; }
  .balon { max-width: 84%; font-size: 15px; line-height: 1.52; padding: 11px 14px; }
  .avatar { width: 30px; height: 30px; font-size: 15px; }

  /* Üst bar biraz daha ince */
  .ust { padding: 10px 14px; }
  .marka small { font-size: 11px; }

  /* Modallar (SSS, Özet, Geçmiş…) telefonda ALT SAYFA (bottom sheet) gibi:
     tam genişlik, alttan yükselir, içerik rahat kaydırılır. */
  .modal-fon { align-items: flex-end; padding: 0; }
  .modal-kutu {
    max-width: none; width: 100%;
    border-radius: 22px 22px 0 0;
    padding: 22px 18px calc(20px + var(--sa-alt));
    max-height: 88vh;
    max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: sheetAcil .3s cubic-bezier(.22,.95,.3,1.05) both;
  }
  .modal-kutu::before {   /* sürükleme tutamacı ipucu */
    content: ""; display: block; width: 42px; height: 5px; border-radius: var(--r-tam);
    background: var(--brd); margin: -6px auto 14px;
  }
  @keyframes sheetAcil { from { transform: translateY(100%); } }

  /* HATA (320px'te taşma): "Diğer"/"Araçlar" paneli (.daha-liste) düğmesinin
     ALTINDA, düğmeye göre ortalanıyordu (left:50%;transform:translateX(-50%),
     .daha-menu'ye göre konumlanır). Düğme ekranın ortasına yakın değilse,
     panel (min 230px) dar telefonlarda viewport'un sağından/solundan taşıp
     bir kısmı tıklanamaz hale geliyordu (320px'te ölçülen: sağdan ~18-47px
     taşma). Çözüm: düğmenin konumundan TAMAMEN bağımsız hale getir — diğer
     modallarla (SSS/Özet/Geçmiş, yukarıdaki .modal-kutu) AYNI dilde, tam
     genişlik, alttan yükselen sayfa. left/right:0 olduğu için hiçbir
     düğme konumunda taşma OLAMAZ. */
  .daha-liste {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0;
    transform: none; width: 100%; min-width: 0; max-width: none;
    border-radius: 22px 22px 0 0;
    max-height: 60vh;
    max-height: 60dvh;
    padding: 10px 10px calc(10px + var(--sa-alt));
    animation: sheetAcil .3s cubic-bezier(.22,.95,.3,1.05) both;
  }
  .daha-liste::before {   /* sürükleme tutamacı ipucu — .modal-kutu ile tutarlı */
    content: ""; display: block; width: 42px; height: 5px; border-radius: var(--r-tam);
    background: var(--brd); margin: -2px auto 10px; flex: 0 0 auto;
  }
  .daha-liste button { min-height: 44px; }

  /* SSS: telefonda daha çok alan */
  .sss-sonuc { max-height: 60vh; max-height: 60dvh; }
  .ozet-kutu { max-height: 58vh; max-height: 58dvh; }
  .sss-soru { padding: 13px 4px; font-size: 15px; }   /* dokunması kolay */
  .sss-cevap { font-size: 14px; }
}

/* Çok dar telefonlar (≤380px): düğme metnini biraz daha küçült */
@media (max-width: 380px) {
  .mini-btn { padding: 8px 11px; font-size: 12.5px; }
  .balon { max-width: 86%; }
}


/* ══════════════════════════════════════════════════════════════════════
   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.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 — DESTEK PANELİNE ("Planet") ÖZEL PALETLER

   Bu panelin işi UZUN SOHBET. Kullanıcı burada dakikalarca metin okur ve
   yazar. Bu yüzden paletler okuma konforuna göre seçildi; POS'un operasyonel
   ya da Müşteri panelinin kişisel amacından farklıdır.

   · Uzay      — varsayılan koyu, düşük parlaklık
   · Kâğıt     — sepya, uzun okuma için en dinlendirici
   · Gece Mavi — akşam, düşük mavi ışık değil, SAKİN mavi
   · Nane      — ferah, yüksek okunurluk
   ═══════════════════════════════════════════════════════════════════════════ */

[data-palet="kagit"] {
  --bg: #f3ece1; --bg2: #ece3d4; --card: #fdf9f2; --card2: #f5ede0;
  --brd: #dccfb8; --txt: #302719; --mut: #6d604e;
  --or: #9a5a1c; --or2: #bd7526;
  --grad: linear-gradient(135deg, #9a5a1c, #bd7526);
  --ben-balon: #e8dcc6;
}
[data-tema="koyu"][data-palet="kagit"] {
  --bg: #191510; --bg2: #211c15; --card: #241f17; --card2: #2c2519;
  --brd: #3a3125; --txt: #efe4d2; --mut: #a29078;
  --or: #d18f45; --or2: #e5a961;
  --ben-balon: #3a3022;
}

[data-palet="gecemavi"] {
  --bg: #0c1220; --bg2: #121a2b; --card: #141d30; --card2: #1b2740;
  --brd: #26344f; --txt: #e6edf8; --mut: #94a3bd;
  --or: #4b8fd6; --or2: #6faae8;
  --grad: linear-gradient(135deg, #4b8fd6, #6faae8);
  --ben-balon: #1e3050;
}
[data-tema="acik"][data-palet="gecemavi"] {
  --bg: #f2f6fc; --bg2: #e8eff8; --card: #ffffff; --card2: #eef3fa;
  --brd: #ccd9ea; --txt: #0e1929; --mut: #4d6180;
  --or: #1a5fa8; --or2: #2b78c9;
  --grad: linear-gradient(135deg, #1a5fa8, #2b78c9);
  --ben-balon: #dbe8f8;
}

[data-palet="nane"] {
  --or: #12866b; --or2: #1aa886;
  --grad: linear-gradient(135deg, #12866b, #1aa886);
}
[data-tema="acik"][data-palet="nane"] { --or: #0d6b55; --or2: #12866b; }

/* Palet seçici — destek panelinde küçük ve sade */
.palet-satir { display: flex; flex-wrap: wrap; gap: 8px; }
/* v24 (B3): Tema seçimi (Gündüz / Gece / Sistemi izle) — dokunma hedefi ≥ 44px; palet noktaları 38 → 44px */
.tema-secim { display: flex; flex-wrap: wrap; gap: 8px; }
.tema-secim button { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; border-radius: var(--r-md, 10px);
  border: 1px solid var(--brd); background: var(--card2); color: var(--txt); font-weight: 600; cursor: pointer; }
.tema-secim button.secili { background: #c2410c; border-color: #c2410c; color: #fff; }
.palet-nokta {
  width: 44px; height: 44px; border-radius: var(--r-tam); cursor: pointer;
  border: 2px solid var(--brd); padding: 0; position: relative;
  transition: transform .12s, border-color .15s;
}
.palet-nokta:hover { transform: scale(1.08); }
.palet-nokta.secili { border-color: var(--txt); }
/* Onay işareti paletin ÜSTÜNDE durur ve zemini kendisi taşır. Böylece
   açık (Kâğıt) ya da koyu (Uzay) hangi renk seçilirse seçilsin okunur —
   önceki sürümde yalnız beyazdı ve açık paletlerde kayboluyordu. */
.palet-nokta.secili::after {
  content: "✓"; position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: var(--r-tam);
  display: flex; align-items: center; justify-content: center;
  background: var(--txt); color: var(--bg);
  font-weight: 800; font-size: 11px; line-height: 1;
  border: 2px solid var(--bg);
}


/* ═══════════════════════════════════════════════════════════════════════════
 *  v19.0 — DOKUNMA HEDEFLERİ ARTIK GENİŞLİĞE DEĞİL CİHAZA BAKIYOR
 *
 *  ══ BULGU (12 cihaz × 2 tema taramasıyla ölçüldü) ══
 *  44px kuralları `@media (max-width: 640px)` bloğunun içindeydi. Yani
 *  ölçüt "ekran dar mı" idi; oysa gerçek ölçüt "parmakla mı kullanılıyor"
 *  olmalıydı. Sonuç:
 *    · 768 ve 834px dokunmatik tabletlerde kural HİÇ uygulanmıyordu:
 *      "⋯ Diğer" özeti 32px, hızlı eylem düğmeleri 40px kalıyordu.
 *    · 1920px dokunmatik kasa ekranında da aynı durum.
 *    · 360px telefonda bile `.mini-btn` için 929. satırdaki `min-height:40px`
 *      kuralı aynı özgüllükte ve DAHA SONRA geldiği için 44px'i eziyordu.
 *
 *  ══ ÇÖZÜM ══
 *  `pointer: coarse` — işaretçinin kaba (parmak) olduğunu söyleyen tek
 *  doğru sinyal. Genişlikten bağımsızdır, dolayısıyla telefon da tablet de
 *  dokunmatik kasa da kapsanır. Blok dosyanın SONUNDA durur ki daha önce
 *  tanımlanmış hiçbir kural onu ezemesin.
 *
 *  WCAG 2.2 (2.5.8 Target Size Minimum) ve Apple HIG: en az 44×44 px.
 * ═════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  button, .btn, .btn-sm, .mini-btn, .ikon-btn, .chip, .pop-chip,
  .hizli-eylem, summary.mini-btn, a.mini-btn,
  /* Açılır menü içindeki eylemler: kendi kuralları 40px veriyordu ve
     özgüllüğü daha yüksek olduğu için yalın `button` seçicisini eziyordu. */
  .daha-liste button, .modal-kutu button, .kart button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea {
    min-height: 44px;
  }
  /* Yalnız ikon taşıyan düğmeler karede kalsın (dar kalıp parmakla ıskalanır). */
  .ikon-btn, .gonder-btn { min-width: 44px; }
  /* v19.5: .palet-nokta zaten yukarıdaki genel `button` kuralından min-height
     alıyordu ama width'i sabit 38px kalıyordu (min-width listesinde yoktu) —
     dokunma hedefi 44×38 gibi WCAG'in genişlik boyutunu karşılamayan bir
     dikdörtgene dönüşüyordu. */
  .palet-nokta { min-width: 44px; }
  /* summary öğesi list-item olarak gelir; min-height uygulanabilmesi için
     blok kutuya çevrilir ve ok işareti korunur. */
  summary.mini-btn { display: flex; align-items: center; }
  /* Onay kutuları görsel olarak küçüktür; dokunma alanını ETİKET taşır. */
  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)
 *
 *  Destek penceresi telefonda tam ekran açılır ve `viewport-fit=cover`
 *  kullanır. Eskiden pay yalnız `body` yan dolgusuna, `.ust` üst dolgusuna
 *  ve yazma alanının alt dolgusuna veriliyordu; `position: fixed` öğeler
 *  (bildirimler, açılır menü, tam ekran kipler, çekerek yenile göstergesi)
 *  bu paydan hiç yararlanmıyordu. Yatay kullanımda "⋯ Diğer" menüsü ve
 *  bildirimler çentiğin 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). */
.ust  { padding-top: calc(10px + var(--sa-ust)); }
.alan { padding-bottom: calc(9px + var(--sa-alt)); }
#bottom-nav {
  padding-bottom: calc(6px + var(--sa-alt));
  padding-left: calc(4px + var(--sa-sol));
  padding-right: calc(4px + var(--sa-sag));
}
.modal-fon {
  padding-top: calc(20px + var(--sa-ust));
  padding-bottom: calc(20px + var(--sa-alt));
  padding-left: calc(20px + var(--sa-sol));
  padding-right: calc(20px + var(--sa-sag));
}
.modal-kutu { max-height: calc(90vh - var(--sa-ust) - var(--sa-alt)); max-height: calc(90dvh - var(--sa-ust) - var(--sa-alt)); overflow-y: auto; }
#toasts { bottom: calc(24px + var(--sa-alt)); }
.ptr-gosterge { top: calc(var(--sa-ust) + 8px); }
.daha-liste {
  max-height: min(420px, calc(70vh - var(--sa-ust) - var(--sa-alt)));
  max-height: min(420px, calc(70dvh - var(--sa-ust) - var(--sa-alt)));
  margin-right: var(--sa-sag);
}
.pwa-davet, .sw-guncelle {
  margin-bottom: var(--sa-alt);
  margin-left: var(--sa-sol);
  margin-right: var(--sa-sag);
}
/* .mesajlar 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.1 — EKSİK YARDIMCI SINIFLAR  ("destek paneli karışık görünüyor")
 *
 * BULUNAN KÖK NEDEN: destek panelinin arayüz kodu, müşteri panelinin yardımcı
 * sınıflarıyla yazılmıştı (.mut, .kck, .mt, .uyari, .oz-k, .roz, .satir…)
 * ama BU SINIFLARIN HİÇBİRİ destek/style.css'te tanımlı değildi. 78 ayrı
 * yerde kullanılıyor, hiçbiri bir şey yapmıyordu. Sonuç tam olarak "karışık
 * görünüyor"du: soluk yazılması gereken açıklamalar ana metinle aynı, küçük
 * olması gereken satırlar aynı puntoda, uyarı kutuları düz yazı, özet
 * kartlarının çerçevesi ve iç boşluğu yok, rozetler düz metin, sohbet
 * satırları arasında ayrım yok. Tasarım hatası değil, eksik stil dosyasıydı.
 *
 * ÇÖZÜM: aynı sınıflar, müşteri panelindeki DAVRANIŞIN AYNISIYLA buraya da
 * tanımlanır — iki panelin görsel dili artık birebir aynıdır (tek kaynak).
 * Mevcut sınıfların hiçbirine dokunulmaz; yalnız eksikler eklenir.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── metin tonları ── */
.mut { color: var(--mut); }
.kck { font-size: 12.5px; }
.kck.mut { line-height: 1.5; }

/* ── boşluk yardımcıları ── */
.mt { margin-top: 10px; }
.mb { margin-bottom: 10px; }

/* ── uyarı kutusu ── */
.uyari {
  border: 1px solid transparent;
  border: 1px solid color-mix(in srgb, var(--no) 45%, transparent);
  background: transparent;
  background: color-mix(in srgb, var(--no) 10%, transparent);
  color: var(--no);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.55;
}

/* ── özet kartı ── */
.oz-k {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-xl);
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.6;
}
.oz-k + .oz-k { margin-top: 8px; }
.oz-k .b { font-size: 21px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ── rozet ── */
.roz {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-tam);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.roz.y { background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.roz.k { background: transparent; background: color-mix(in srgb, var(--no) 14%, transparent); color: var(--no); }
.roz.g { background: transparent; background: color-mix(in srgb, var(--mut) 16%, transparent); color: var(--mut); }

/* ── liste satırı (geçmiş sohbetler) ── */
.satir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--brd); border-radius: var(--r-md);
  background: var(--card); font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--h-hizli) var(--h-egri), transform var(--h-hizli) var(--h-egri);
}
.satir + .satir { margin-top: 6px; }
.satir:hover { border-color: var(--or); transform: translateY(-1px); }

/* ── sohbet balonu gövdesi: uzun bağlantılar taşmasın ── */
.balon .govde { display: block; overflow-wrap: anywhere; word-break: break-word; }

/* ── v19.9.1 — GENİŞ EKRANDA DENGESİZ ARKA PLAN ──
 * Dekoratif "blob"lar vmax ile ölçekleniyordu: 1440px'lik bir ekranda sol üst
 * blob 630px'lik turuncu bir yıkama hâline gelip sağ yarıyı boş gri bırakıyor,
 * ekran "bozuk render olmuş" gibi duruyordu. Mobilde (asıl hedef) davranış
 * aynen korunur; yalnız geniş ekranda yumuşatılır ve dengelenir. */
@media (min-width: 900px) {
  .giris-blob i { filter: blur(90px); }
  .giris-blob i:nth-child(1) { width: 30vmax; height: 30vmax; top: -10vmax; left: -6vmax; opacity: .20; }
  .giris-blob i:nth-child(2) { width: 30vmax; height: 30vmax; bottom: -10vmax; right: -6vmax; opacity: .20; }
  .giris-blob i:nth-child(3) { opacity: .10; }
}

/* ── v19.9.1 — DURUM ŞERİDİ HİZASI ──
 * .giris-kart içinde text-align:center kalıtılıyordu; şerit bir flex kutusu
 * olduğu için metin ortalanıp sağdaki saat etiketinin çevresinde kırılıyor,
 * iki satırlık dağınık bir blok oluşuyordu. Metin sola, saat sağa sabitlenir. */
.calisma-serit { text-align: left; }
.calisma-serit > .kck.mut {
  margin-left: auto; padding-left: 10px; white-space: nowrap;
  font-variant-numeric: tabular-nums; opacity: .9;
}
.calisma-serit .durum-nokta { flex: 0 0 auto; }
/* v23 — dar ekranda (390 px) "kapalıyız" cümlesi saat bilgisiyle yan yana sıkışıp 5 satıra bölünüyordu:
   saat bilgisi kendi satırına iner (noktanın hizasında). */
@media (max-width: 520px) {
  .calisma-serit { flex-wrap: wrap; }
  .calisma-serit > .kck.mut { margin-left: 17px; padding-left: 0; white-space: normal; flex-basis: 100%; }
}
/* v19.9.2 — açık temada turuncu yazılı düğmelerin okunurluğu (WCAG AA ≥ 4.5:1) */
[data-tema="acik"] .chip:not(:hover), [data-tema="acik"] .mini-btn.birincil:not(:hover) { color: #b34a00; }

/* ══ v19.9.3 — AÇIK TEMADA TURUNCU YAZI OKUNURLUĞU ══
 * Açık temada turuncu (--or) YAZI, açık zeminde 2,7:1 kontrasta düşüyordu
 * (WCAG AA 4,5:1 ister): "Asistan hizmetinizde…" şeridi, mesai dışı şeridi,
 * "Temsilciye Bağlan" ve üzerine gelinen menü düğmeleri. Yalnız YAZI rengi
 * koyulaştırılır; zemin ve çerçeve vurguları aynen kalır. color-mix
 * desteklemeyen eski tarayıcılar sabit koyu turuncuyu kullanır. */
[data-tema="acik"] .musaitlik.bekle,
[data-tema="acik"] .calisma-serit.kapali,
[data-tema="acik"] .mini-btn.birincil:not(:hover),
[data-tema="acik"] .mini-btn:hover:not(.birincil):not(.sec) {
  color: #a84a00;
  color: color-mix(in srgb, var(--or) 62%, #000);
}

/* ══ v23 — AÇIK TEMA KONTRAST (WCAG AA 4,5:1) — ölçümle (v23_paneller_ui.cjs) bulundu ══
 * Açık temada turuncu (#f26b00) METİN olarak beyaz zeminde 3,05:1 kalıyordu (üst çubuktaki "Asistan",
 * güven şeridindeki değerler). Yalnız metin kullanımları koyu turuncuya (#c2410c, 5,2:1) çekilir;
 * düğme/zemin turuncusu, koyu tema ve renk paletleri değişmez. */
[data-tema="acik"]:not([data-palet]) .marka em,
[data-tema="acik"]:not([data-palet]) .guven-serit b { color: #c2410c; }
/* v23 — açık temada YEŞİL durum yazıları ("Temsilcilerimiz şu an çevrimiçi", "Canlı destek açık") --ok (#16a34a)
   ile açık zeminde 2,95–3,0:1 kalıyordu (mesai içinde ölçüldü). Yalnız yazı rengi koyulaşır; nokta/zemin aynı. */
[data-tema="acik"] .musaitlik.acik,
[data-tema="acik"] .calisma-serit.acik { color: #166534; }