/* Karanlık Oda — görsel dünya
   Koyu tezgah, kehribar güvenlik ışığı, üstünde parlak fotoğraf kağıdı.
   İçerik daima kağıdın üstünde durur; tezgah asla metin taşımaz. */

:root {
  /* Tezgah: sıcak, siyaha yakın. Saf siyah değil — kimyasal lekeli ahşap. */
  --tezgah:      #14120F;
  --tezgah-2:    #1C1915;
  --tezgah-3:    #262119;
  --tezgah-kenar:#332C22;

  /* Fotoğraf kağıdı: içeriğin durduğu yüzey */
  --kagit:       #F2EDE3;
  --kagit-2:     #E7E0D2;
  --kagit-kenar: #CFC6B4;
  --murekkep:    #1A1712;
  --murekkep-2:  #57503F;

  /* Güvenlik ışığı: tek vurgu rengi */
  --safelight:      #E09B3D;
  --safelight-loş:  #8A5F24;
  --safelight-sis:  rgba(224,155,61,.10);

  /* Yağlı kalem: dikkat ve uyarı işareti */
  --chinagraph:  #D8452C;
  --metal:       #6E6A62;

  /* Banyo tepsileri — her aşamanın kendi kimyasalı */
  --t-aday:      #8A8478;
  --t-ornek:     #B9762E;
  --t-arandi:    #C4A63C;
  --t-teklif:    #5B7C8D;
  --t-kazanildi: #4C8B7B;
  --t-kaybedildi:#6B4F49;

  --olcu: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --metin: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r: 3px;
  --gecis: 180ms cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--tezgah);
  color: var(--kagit);
  font-family: var(--metin);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Tezgahın üstündeki güvenlik ışığı yıkaması: sabit, içerikle kaymaz */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 55% at 50% -12%, var(--safelight-sis), transparent 70%),
    radial-gradient(80% 40% at 88% 8%, rgba(224,155,61,.05), transparent 60%);
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--safelight); }

/* ─── Üst şerit: güvenlik lambası ────────────────────────────────────── */
.serit {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px; height: 56px;
  background: linear-gradient(var(--tezgah-2), var(--tezgah-2)) padding-box;
  border-bottom: 1px solid var(--tezgah-kenar);
  box-shadow: 0 12px 28px -18px rgba(0,0,0,.9);
}
.serit::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--safelight-loş) 30%, var(--safelight-loş) 70%, transparent);
}

.marka { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.marka-lamba {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--safelight);
  box-shadow: 0 0 0 3px rgba(224,155,61,.16), 0 0 16px 3px rgba(224,155,61,.32);
}
.marka-ad {
  font-size: 13px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kagit-2); white-space: nowrap;
}

.dolasim { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.dolasim::-webkit-scrollbar { display: none; }
.dolasim a {
  padding: 7px 13px; border-radius: var(--r);
  color: #A79E8C; text-decoration: none; font-size: 14px; white-space: nowrap;
  transition: color var(--gecis), background var(--gecis);
}
.dolasim a:hover { color: var(--kagit); background: var(--tezgah-3); }
.dolasim a[aria-current="page"] { color: var(--tezgah); background: var(--safelight); font-weight: 600; }

.serit-sag { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Sayaç: kaç dokunuş yapıldı. Şeritte her zaman görünür. */
.sayac { display: flex; align-items: baseline; gap: 7px; }
.sayac-deger { font-family: var(--olcu); font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 600; }
.sayac-hedef { font-family: var(--olcu); font-size: 13px; color: var(--metal); }
.sayac-etiket { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--metal); }
.sayac.tamam .sayac-deger { color: var(--t-kazanildi); }
.sayac.geride .sayac-deger { color: var(--safelight); }

/* ─── Sayfa gövdesi ─────────────────────────────────────────────────── */
.sayfa { position: relative; z-index: 1; padding: 24px 20px 72px; max-width: 1560px; margin: 0 auto; }
.sayfa-basi { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.sayfa-baslik { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; color: var(--kagit); }
.sayfa-alt { margin: 5px 0 0; font-size: 13px; color: var(--metal); }

/* ─── Fotoğraf kağıdı: içeriğin durduğu yüzey ───────────────────────── */
.kagit {
  background: var(--kagit);
  color: var(--murekkep);
  border-radius: var(--r);
  box-shadow: 0 2px 3px rgba(0,0,0,.34), 0 14px 30px -14px rgba(0,0,0,.6);
}
.kagit-basi {
  padding: 13px 16px; border-bottom: 1px solid var(--kagit-kenar);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.kagit-baslik { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-2); }

/* ─── Test şeridi: ölçüm göstergesi ─────────────────────────────────────
   Karanlık odanın kendi ölçme aleti. Pozlanmış kademeler koyu, kalanlar açık.
   Büyük-rakam istatistik kutusunun yerine geçer. */
.serit-olcum { display: grid; gap: 9px; }
.olcum-basi { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.olcum-ad { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--murekkep-2); font-weight: 600; }
.olcum-deger { font-family: var(--olcu); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--murekkep); font-weight: 600; }
.olcum-deger small { color: var(--murekkep-2); font-weight: 400; }

.kademeler { display: flex; gap: 2px; height: 26px; }
.kademe {
  flex: 1; border-radius: 1px; background: var(--kagit-2);
  border: 1px solid var(--kagit-kenar);
  transition: background var(--gecis);
}
.kademe.pozlanmis { background: var(--murekkep); border-color: var(--murekkep); }
.kademe.pozlanmis.tasma { background: var(--t-kazanildi); border-color: var(--t-kazanildi); }
.kademe.pozlanmis.uyari { background: var(--chinagraph); border-color: var(--chinagraph); }

/* ─── Tezgah üstü ızgara ────────────────────────────────────────────── */
.tezgah-duzen { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 20px; align-items: start; }
.sutun { display: grid; gap: 20px; }

/* ─── Fiş: bugün aranacaklar ────────────────────────────────────────── */
.fis-liste { display: grid; }
.fis {
  padding: 14px 16px; border-bottom: 1px solid var(--kagit-kenar);
  display: grid; gap: 10px;
}
.fis:last-child { border-bottom: 0; }
.fis-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fis-ad { font-weight: 650; font-size: 15px; color: var(--murekkep); }
.fis-ad a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.fis-ad a:hover { border-bottom-color: var(--murekkep-2); }
.fis-meta { font-size: 13px; color: var(--murekkep-2); margin-top: 2px; }
.fis-tel { font-family: var(--olcu); font-size: 13px; color: var(--murekkep-2); }
.fis-aksiyon { font-size: 13px; color: var(--murekkep); }

/* Gecikmiş takip: yağlı kalemle işaretlenmiş */
.fis.gecikmis { background: rgba(216,69,44,.05); }
.gun-rozet {
  font-family: var(--olcu); font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--kagit-2); color: var(--murekkep-2); white-space: nowrap;
  border: 1px solid var(--kagit-kenar);
}
.gun-rozet.gecikmis { background: var(--chinagraph); color: #fff; border-color: var(--chinagraph); }
.gun-rozet.bugun { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }

/* ─── Tek tık işaretleri: günde 25 kez basılacak ───────────────────── */
.isaretler { display: flex; flex-wrap: wrap; gap: 6px; }
.isaret {
  border: 1px solid var(--kagit-kenar); background: transparent; color: var(--murekkep-2);
  padding: 8px 12px; border-radius: var(--r); cursor: pointer; font-size: 13px; font-weight: 550;
  min-height: 40px; /* telefonda tek elle basılacak */
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.isaret:hover { background: var(--kagit-2); color: var(--murekkep); }
.isaret:active { transform: translateY(1px); }
.isaret:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; }
.isaret.olumlu:hover { border-color: var(--t-kazanildi); color: var(--t-kazanildi); background: rgba(76,139,123,.08); }
.isaret.olumsuz:hover { border-color: var(--chinagraph); color: var(--chinagraph); background: rgba(216,69,44,.07); }
.isaret.kaydedildi { background: var(--murekkep); border-color: var(--murekkep); color: var(--kagit); }

/* ─── Kapasite tepsileri ────────────────────────────────────────────── */
.kapasite-grup { display: grid; gap: 14px; padding: 16px; }
.kapasite-sira { display: grid; gap: 7px; }
.kapasite-ust { display: flex; align-items: baseline; justify-content: space-between; }
.kapasite-ad { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--murekkep-2); font-weight: 600; }
.kapasite-deger { font-family: var(--olcu); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--murekkep); }
.yuvalar { display: flex; gap: 6px; }
.yuva {
  flex: 1; height: 34px; border-radius: 2px;
  border: 1px dashed var(--kagit-kenar); background: var(--kagit-2);
}
.yuva.dolu { border-style: solid; border-color: transparent; }
.yuva.dolu.emlak { background: var(--t-teklif); }
.yuva.dolu.urun  { background: var(--t-ornek); }
.yuva.asim { background: var(--chinagraph); border-color: var(--chinagraph); }

/* ─── Satış hattı: banyo tepsileri ──────────────────────────────────── */
.tepsiler {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(216px, 1fr);
  gap: 12px; overflow-x: auto; padding-bottom: 14px;
  /* Tepsiler eşit yükseklikte: tahta düzgün okunur ve boş tepsi de
     sürüklenen kartı kabul edecek kadar büyük bir hedef sunar. */
  align-items: stretch; min-height: 380px;
}
.tepsi {
  background: var(--tezgah-2); border: 1px solid var(--tezgah-kenar);
  border-radius: 5px; display: flex; flex-direction: column; min-height: 360px;
  transition: background var(--gecis), border-color var(--gecis);
}
/* Tepsinin dibindeki kimyasal: her aşamanın kendi tonu */
.tepsi-dip { height: 4px; border-radius: 5px 5px 0 0; }
.tepsi[data-asama="aday"]       .tepsi-dip { background: var(--t-aday); }
.tepsi[data-asama="ornek"]      .tepsi-dip { background: var(--t-ornek); }
.tepsi[data-asama="arandi"]     .tepsi-dip { background: var(--t-arandi); }
.tepsi[data-asama="teklif"]     .tepsi-dip { background: var(--t-teklif); }
.tepsi[data-asama="kazanildi"]  .tepsi-dip { background: var(--t-kazanildi); }
.tepsi[data-asama="kaybedildi"] .tepsi-dip { background: var(--t-kaybedildi); }

.tepsi-basi { padding: 11px 13px 9px; display: grid; gap: 2px; }
.tepsi-ad { font-size: 13px; font-weight: 650; color: var(--kagit-2); }
.tepsi-alt { font-size: 11px; color: var(--metal); letter-spacing: .04em; }
.tepsi-sayi { font-family: var(--olcu); font-size: 12px; color: var(--metal); font-variant-numeric: tabular-nums; }
/* Bırakma alanı tepsinin tamamını kaplar: kartı tepsinin herhangi bir
   yerine bırakabilmek gerekir, sadece mevcut kartların üstüne değil. */
.tepsi-govde { padding: 0 9px 11px; display: grid; gap: 8px; flex: 1 1 auto; align-content: start; min-height: 120px; }

.tepsi.hedefte { background: var(--tezgah-3); border-color: var(--safelight-loş); }

/* Baskı: tepsideki müşteri kartı — daima kağıt */
.baski {
  background: var(--kagit); color: var(--murekkep);
  border-radius: 2px; padding: 11px 12px; cursor: grab;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 16px -10px rgba(0,0,0,.55);
  display: grid; gap: 7px;
  transition: box-shadow var(--gecis), transform var(--gecis);
}
.baski:hover { box-shadow: 0 2px 4px rgba(0,0,0,.45), 0 14px 26px -12px rgba(0,0,0,.7); }
.baski:active { cursor: grabbing; }
.baski.suruklenen { opacity: .35; }
.baski-ad { font-weight: 650; font-size: 14px; line-height: 1.3; }
.baski-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--murekkep-2); }
.baski-tutar { font-family: var(--olcu); font-variant-numeric: tabular-nums; color: var(--murekkep); font-weight: 600; }

.tip-imi {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 2px 6px; border-radius: 2px;
}
.tip-imi.emlak { background: rgba(91,124,141,.16); color: #3D5B69; }
.tip-imi.urun  { background: rgba(185,118,46,.16); color: #8A5518; }

/* Kuruma teli: kazanılmış müşteriler mandalla asılı */
.tepsi[data-asama="kazanildi"] .tepsi-govde { padding-top: 12px; position: relative; }
.tepsi[data-asama="kazanildi"] .tepsi-govde::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 1px;
  background: var(--metal);
}
.tepsi[data-asama="kazanildi"] .baski { position: relative; }
.tepsi[data-asama="kazanildi"] .baski::before {
  content: ""; position: absolute; top: -9px; left: 14px; width: 7px; height: 11px;
  background: var(--metal); border-radius: 1px;
}

/* ─── Tablolar ──────────────────────────────────────────────────────── */
.tablo { width: 100%; border-collapse: collapse; }
.tablo th {
  text-align: left; padding: 10px 14px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--murekkep-2); font-weight: 700;
  border-bottom: 1px solid var(--kagit-kenar); white-space: nowrap;
}
.tablo td { padding: 11px 14px; border-bottom: 1px solid var(--kagit-kenar); font-size: 14px; vertical-align: middle; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: rgba(26,23,18,.035); }
.sayi { font-family: var(--olcu); font-variant-numeric: tabular-nums; text-align: right; }

/* ─── Durum imleri ──────────────────────────────────────────────────── */
.im {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--kagit-2); color: var(--murekkep-2); white-space: nowrap;
}
.im::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.im.sirada    { color: #6C6455; }
.im.uretimde  { color: #8A5518; background: rgba(185,118,46,.14); }
.im.teslim    { color: #2F6558; background: rgba(76,139,123,.15); }
.im.revizyon  { color: #A8331F; background: rgba(216,69,44,.11); }
.im.odendi    { color: #2F6558; background: rgba(76,139,123,.15); }
.im.bekliyor  { color: #6C6455; }
.im.gecikti   { color: #A8331F; background: rgba(216,69,44,.11); }

/* ─── Düğmeler ──────────────────────────────────────────────────────── */
.dugme {
  border: 1px solid var(--tezgah-kenar); background: var(--tezgah-3); color: var(--kagit-2);
  padding: 9px 15px; border-radius: var(--r); cursor: pointer; font-size: 14px; font-weight: 550;
  min-height: 40px;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis);
}
.dugme:hover { background: #2E2820; border-color: #453B2C; }
.dugme:active { transform: translateY(1px); }
.dugme:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; }
.dugme:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.dugme-birincil { background: var(--safelight); border-color: var(--safelight); color: #221703; font-weight: 650; }
.dugme-birincil:hover { background: #EFAA4B; border-color: #EFAA4B; }
.dugme-tehlike { color: var(--chinagraph); }
.dugme-tehlike:hover { background: rgba(216,69,44,.14); border-color: var(--chinagraph); }
.dugme-kagit { background: transparent; border-color: var(--kagit-kenar); color: var(--murekkep-2); }
.dugme-kagit:hover { background: var(--kagit-2); color: var(--murekkep); border-color: var(--murekkep-2); }
.dugme-kucuk { padding: 5px 10px; font-size: 13px; min-height: 32px; }

/* ─── Alanlar ───────────────────────────────────────────────────────── */
.alan { display: grid; gap: 5px; }
.alan-etiket { font-size: 12px; letter-spacing: .05em; color: var(--murekkep-2); font-weight: 600; }
.alan input, .alan select, .alan textarea {
  background: #fff; border: 1px solid var(--kagit-kenar); color: var(--murekkep);
  padding: 9px 11px; border-radius: var(--r); width: 100%; min-height: 40px;
}
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: 2px solid var(--safelight); outline-offset: -1px; border-color: var(--safelight);
}
.alan textarea { min-height: 84px; resize: vertical; }
.alan input::placeholder, .alan textarea::placeholder { color: #7E7563; }
.alan-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Tezgah üstündeki alanlar (koyu zeminde) */
.koyu-alan .alan-etiket { color: var(--metal); }
.koyu-alan input, .koyu-alan select {
  background: var(--tezgah-3); border-color: var(--tezgah-kenar); color: var(--kagit);
}

/* ─── Kayan panel (müşteri detayı / form) ───────────────────────────── */
.perde {
  position: fixed; inset: 0; z-index: 60; background: rgba(6,5,4,.62);
  display: flex; justify-content: flex-end;
  animation: perde-ac 160ms ease-out;
}
@keyframes perde-ac { from { opacity: 0 } to { opacity: 1 } }
.panel {
  width: min(560px, 100%); height: 100%; overflow-y: auto;
  background: var(--kagit); color: var(--murekkep);
  box-shadow: -18px 0 46px -22px rgba(0,0,0,.9);
  animation: panel-gir 220ms cubic-bezier(.22,.61,.36,1);
}
@keyframes panel-gir { from { transform: translateX(22px); opacity: .6 } to { transform: none; opacity: 1 } }
.panel-basi {
  position: sticky; top: 0; z-index: 2; background: var(--kagit);
  padding: 16px 20px; border-bottom: 1px solid var(--kagit-kenar);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.panel-baslik { margin: 0; font-size: 18px; font-weight: 650; }
.panel-alt { margin: 3px 0 0; font-size: 13px; color: var(--murekkep-2); }
.panel-govde { padding: 18px 20px 40px; display: grid; gap: 20px; }
.panel-bolum { display: grid; gap: 11px; }
.bolum-baslik {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--murekkep-2); padding-bottom: 7px; border-bottom: 1px solid var(--kagit-kenar);
}
.kapat {
  background: none; border: 0; color: var(--murekkep-2); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 4px 8px; border-radius: var(--r);
}
.kapat:hover { background: var(--kagit-2); color: var(--murekkep); }

/* ─── Zaman çizgisi (aktiviteler) ───────────────────────────────────── */
.gecmis { display: grid; gap: 0; }
.gecmis-satir {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--kagit-kenar); font-size: 13px;
}
.gecmis-satir:last-child { border-bottom: 0; }
.gecmis-tarih { font-family: var(--olcu); font-size: 12px; color: var(--murekkep-2); }
.gecmis-tur { font-weight: 600; }
.gecmis-sil { background: none; border: 0; color: var(--metal); cursor: pointer; padding: 2px 6px; border-radius: 2px; }
.gecmis-sil:hover { color: var(--chinagraph); background: rgba(216,69,44,.08); }

/* ─── Boş durumlar ──────────────────────────────────────────────────── */
.bos {
  padding: 34px 22px; text-align: center; color: var(--murekkep-2);
  display: grid; gap: 8px; justify-items: center;
}
.bos-baslik { font-weight: 650; color: var(--murekkep); font-size: 15px; }
.bos-metin { font-size: 13px; max-width: 42ch; line-height: 1.55; }
.bos.koyu { color: var(--metal); }
.bos.koyu .bos-baslik { color: var(--kagit-2); }

/* ─── Giriş ekranı ──────────────────────────────────────────────────── */
.giris-sahne { min-height: 100dvh; display: grid; place-items: center; padding: 24px; position: relative; z-index: 1; }
.giris-kagit {
  background: var(--kagit); color: var(--murekkep); border-radius: 4px;
  padding: 32px 30px; width: min(360px, 100%); display: grid; gap: 15px;
  box-shadow: 0 3px 6px rgba(0,0,0,.4), 0 30px 60px -26px rgba(0,0,0,.85);
  position: relative;
}
.giris-lamba {
  position: absolute; top: -42px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: var(--safelight);
  box-shadow: 0 0 0 6px rgba(224,155,61,.12), 0 0 40px 12px rgba(224,155,61,.28);
}
.giris-baslik { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
.giris-alt { margin: -8px 0 6px; font-size: 13px; color: var(--murekkep-2); }
.giris-hata { margin: 0; color: var(--chinagraph); font-size: 13px; font-weight: 550; }

/* ─── Bildirim ──────────────────────────────────────────────────────── */
.bildirim {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; background: var(--kagit); color: var(--murekkep);
  padding: 11px 18px; border-radius: 4px; font-size: 14px; font-weight: 550;
  box-shadow: 0 3px 8px rgba(0,0,0,.45), 0 18px 34px -18px rgba(0,0,0,.8);
  animation: bildirim-gir 200ms cubic-bezier(.22,.61,.36,1);
  max-width: calc(100vw - 32px);
}
@keyframes bildirim-gir { from { transform: translate(-50%, 12px); opacity: 0 } to { transform: translate(-50%,0); opacity: 1 } }
.bildirim.hata { background: var(--chinagraph); color: #fff; }

/* ─── Duyarlı ───────────────────────────────────────────────────────────
   Telefon ikinci sınıf değil: aramaların sonucu telefondan işaretleniyor. */
@media (max-width: 1080px) {
  .tezgah-duzen { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sayfa { padding: 16px 13px 80px; }
  .serit { height: 52px; padding: 0 13px; gap: 12px; }
  .marka-ad { display: none; }
  .sayac-etiket { display: none; }
  .tepsiler { grid-auto-columns: 84vw; gap: 11px; scroll-snap-type: x mandatory; }
  .tepsi { scroll-snap-align: start; }
  .isaret { flex: 1 1 auto; min-width: 96px; }
  .panel { width: 100%; }
  .alan-satir { grid-template-columns: 1fr; }
  .gecmis-satir { grid-template-columns: 68px 1fr auto; }
  .tablo th:nth-child(n+4), .tablo td:nth-child(n+4) { display: none; }
  .sayfa-basi { align-items: flex-start; }
  /* Şeritteki küçük düğme de parmakla basılabilir kalmalı */
  .serit .dugme-kucuk { min-height: 38px; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Hareketi sıfırlamıyoruz, yumuşatıyoruz: ilerleme göstergeleri bilgi taşır. */
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .perde, .panel, .bildirim { animation: none; }
  :root { --gecis: 60ms linear; }
}

::selection { background: var(--safelight); color: #221703; }