/* PaketBi kasa ekrani — Sicak Organik tasarim dili (PaketEkran ile ayni token'lar).
   Fontlar self-host (SIL OFL 1.1, fonts/OFL.txt). Google Fonts linki kullanilmaz. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/nunito-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/nunito-800.woff2') format('woff2'); }

/* `hidden` ozniteligi HER yazar kuralini ezer; .ses-bandi{display:flex} ve .uyari{display:flex}
   bununla celismez. Bu kural olmadan bant hidden=true iken ekranda kaliyordu. */
[hidden] { display: none !important; }

:root {
  color-scheme: light;
  --cati-menu: #202223; --cati-menu-hover: #2D2F30; --cati-menu-yazi: #F5F3EF;
  --cati-menu-soluk: #B5B6B7; --cati-menu-cizgi: #37393A;
  --cati-border: #E7E4E0; --cati-zemin: #F5F4F2; --cati-baslik: #FFFFFF;
  --cati-yan-genislik: 224px;
  /* Marka yazisi iki tonludur (tasarim: `paket` murekkep, `bi` terakot). Tek metin dugumu
     iki renk tasiyamaz, bu yuzden markanin icinde iki span var. */
  --logo-paket: #1E2022; --logo-bi: #C2593F;
  /* Yan menu her temada koyudur; oradaki marka bu yuzden temayla DEGISMEZ. */
  --logo-menu-paket: #FFFFFF; --logo-menu-bi: #D2725A;
  --app-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* KARAR §11 yigini (PaketEkran'dan tek bilincli fark: 'Inter' yedegi yok, 'Segoe UI' var). */
  --font-heading: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg-primary: #F9F8F6;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #F1EFEC;
  --border: #E2E8F0;
  --border-hover: #CBD5E1;
  --text-primary: #1E2022;
  --text-secondary: #4B4F52;
  --text-muted: #6B6E70;
  --accent: #C2593F;
  --accent-rgb: 194, 89, 63;
  --accent-2: #D98A72;
  --accent-hover: #9E4632;
  --accent-glow: rgba(var(--accent-rgb), 0.1);
  --accent-soft: rgba(var(--accent-rgb), 0.13);
  --accent-emphasis: var(--accent-hover);
  --accent-foreground: #ffffff;
  --danger: #DC2626;   --danger-rgb: 220, 38, 38;    --danger-soft: #FBE3E3;   --danger-text: #B91C1C;
  --warning: #EA580C;  --warning-rgb: 234, 88, 12;   --warning-soft: #FCE7DC;  --warning-text: #C2410C;
  --info: #2563EB;
  --success: #16A34A;  --success-rgb: 22, 163, 74;   --success-soft: #E7F6EC;  --success-text: #15803D;
  --success-foreground: #1A1B1C; --warning-foreground: #1A1B1C; --danger-foreground: #ffffff;
  --info-foreground: #ffffff;
  --pf-ty: #f27a1a;     --pf-ty-rgb: 242, 122, 26;
  --pf-uet: #06C167;    --pf-uet-rgb: 6, 193, 103;
  /* Platform kimlik renkleri YALNIZ platform rozetinde kullanilir ve platform gercekten
     baglandiginda gorunur (tasarim kaynagi: docs/tasarim/kaynak). */
  --pf-ys: #FA0050;     --pf-gy: #5D3EBC;    --pf-mig: #F58220;
  /* Platform karesinin yazi rengi: kimlik renkleri koyu, yazi her iki temada da beyaz kalir. */
  --pf-yazi: #FFFFFF;
  --pf-tint: 0.15;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-xl: 14px;
  --radius-chip: 6px;
  /* Dokunma hedefleri: kasa dokunmatik, mobilde ana eylem tasarimda 60 px. */
  --dokunma-min: 44px;
  /* Dar ekran bayragi. Betiklerin de "mobil miyim" diye sormasi gerekiyor (alt sayfa acilirken
     gecmise kayit eklenip eklenmeyecegi buna bagli), ama kirilim noktasi TEK yerde durmali:
     burada. Betik sayiyi bilmez, `darEkranMi()` yalniz bu degeri okur. */
  --dar-ekran: 0;
  --dokunma-ana: 60px;
  /* Tipografi olcegi (tasarim sistemi typography.css). Govde boyutu 15 px kalir; bu token'lar
     baslik, olcu karti ve kart basliklari icindir. */
  --olcek-kucuk: 12px;
  --olcek-etiket: 14px;
  --olcek-govde: 16px;
  --olcek-kart: 20px;
  --olcek-bolum: 24px;
  --olcek-sayfa: 30px;
  /* Yonetim panelinin koyu yan menusu; musteri catisinin --cati-menu setinden ayridir. */
  --yan-menu: #1E2022;
  --yan-menu-yazi: #F4F2EE;
  --yan-menu-soluk: #9CA0A2;
  --yan-menu-secili: #2A2D2F;
  --yan-menu-secili-yazi: #F4F2EE;
  --yan-menu-cizgi: #34373A;
  --yan-menu-vurgu: #C2593F;
  /* Grafik: yalniz terracotta + antrasit tonlari, gokkusagi yok. */
  --grafik-1: #C2593F;
  --grafik-2: #1E2022;
  --grafik-3: #D98A72;
  --grafik-4: #6B6E70;
  --grafik-5: #9E4632;
  /* Safran YALNIZ yapay zeka yuzeyi icin ayrildi (tasarim sistemi karari). Bu dalgada
     kullanilmaz; ileride baska bir rengin secilmemesi icin burada tanimlidir. */
  --ai: #D97706;
  --ai-yazi: #FFFFFF;
  --ai-soft: #FDEBCF;
  --shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-popover: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  /* Alt sayfa (dar ekranda alttan kayan panel): perdesi ve golgesi. */
  --perde: rgba(0,0,0,0.45);
  --shadow-alt-sayfa: 0 -12px 32px rgba(0,0,0,0.30);
  --duration: 0.26s;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --ease: ease;
  /* Fis kagidi token'lari BILINCLI OLARAK TEMADAN BAGIMSIZDIR: termal kagit fiziksel olarak beyaz,
     murekkep siyahtir. Koyu temada "koyu fis" gostermek bayiyi yanilti r (kagida oyle cikmiyor).
     Bu yuzden html[data-theme="dark"] blogunda YENIDEN TANIMLANMAZLAR. */
  --fis-kagit: #ffffff;
  --fis-murekkep: #111111;
  --fis-solgun: #8a8a8a;
  --fis-cizgi: #c9c9c9;
  --fis-kesik: #bdbdbd;
  /* Harita isaretcileri (Faz 6). KOYU TEMADA YENIDEN TANIMLANMAZ ve bu bilinclidir:
     harita altligi (OSM karolari) uygulamanin temasi ne olursa olsun HER ZAMAN acik renklidir.
     Tema token'lari kullanilsaydi acik temada hedef ignesi acik zemin uzerinde kaybolurdu. */
  --harita-kurye-dolgu: #1f9d55;
  --harita-kurye-cizgi: #0b4a28;
  --harita-hedef-dolgu: #ffffff;
  --harita-hedef-cizgi: #b4531a;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --logo-paket: #FFFFFF; --logo-bi: #D2725A;
  --cati-border: #343739; --cati-zemin: #181A1B; --cati-baslik: #202223;
  --pf-tint: 0.26;
  --bg-primary: #1A1B1C;
  --bg-secondary: #1E2022;
  --bg-card: #1E2022;
  --bg-input: #26282A;
  --border: #34373A;
  --border-hover: #43474A;
  --text-primary: #F4F2EE;
  --text-secondary: #C6C9CB;
  --text-muted: #A0A3A5;
  --accent: #D2725A;
  --accent-rgb: 210, 114, 90;
  --accent-hover: #E59A85;
  --accent-glow: rgba(var(--accent-rgb), 0.15);
  --accent-soft: #3A2620;
  --accent-emphasis: #E59A85;
  --accent-foreground: #1A1B1C;
  --accent-2: #E59A85;
  --danger: #F87171;   --danger-rgb: 248, 113, 113;  --danger-soft: #3A1E1E;   --danger-text: #FCA5A5;
  --warning: #FB923C;  --warning-rgb: 251, 146, 60;  --warning-soft: #3A2412;  --warning-text: #FDBA74;
  --info: #60A5FA;
  --success: #4ADE80;  --success-rgb: 74, 222, 128;  --success-soft: #16321F;  --success-text: #86EFAC;
  --success-foreground: #1A1B1C; --warning-foreground: #1A1B1C; --danger-foreground: #1A1B1C;
  --info-foreground: #1A1B1C;
  --shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --shadow-popover: 0 4px 6px -1px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
  --perde: rgba(0, 0, 0, 0.62);
  --shadow-alt-sayfa: 0 -12px 32px rgba(0, 0, 0, 0.55);
  --yan-menu: #1E2022;
  --yan-menu-yazi: #F4F2EE;
  --yan-menu-soluk: #A0A3A5;
  --yan-menu-secili: #2A2D2F;
  --yan-menu-secili-yazi: #F4F2EE;
  --yan-menu-cizgi: #34373A;
  --yan-menu-vurgu: #D2725A;
  --grafik-1: #D2725A;
  --grafik-2: #C9CCC8;
  --grafik-3: #E59A85;
  --grafik-4: #8A8D8F;
  --grafik-5: #B5604A;
  --ai: #E8901F;
  --ai-yazi: #1A1B1C;
  --ai-soft: #3A2A12;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg-primary); color: var(--text-primary);
  font-family: var(--app-font); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 17px; margin: 0 0 8px; }

/* Ses kilidi bandi: danger zemin, ustundeki metin HER ZAMAN --danger-foreground (sabit beyaz yok). */
.ses-bandi {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px;
  background: var(--danger); color: var(--danger-foreground); font-weight: 700;
}
.ses-bandi button {
  min-height: 48px; padding: 12px 22px; border: 2px solid var(--danger-foreground);
  background: transparent; color: var(--danger-foreground); border-radius: var(--radius-sm);
  font-weight: 800; font-size: 16px;
}

/* Serit kapsayicisi: TUM seritler (hata, yazici, bilgi) burada yasar. position: sticky ile
   kaydirmadan bagimsiz hep gorunur kalir (normal akista kaldigi icin sayfa duzenini bozmaz,
   fixed'in aksine bosluk telafisi gerekmez). Uzun listede asagi kaydirilmis kasiyer "Onaylandı"
   bandinin sessizce geri alinmasini fark edemiyordu; artik serit ustte yapisik kaliyor.
   KAPSAYICI yapisir, seritlerin KENDISI akista kalir: iki serit kardes sticky oldugunda ikisi de
   ayni `top: 0` noktasina yapisiyor ve sonra gelen opak serit digerini tamamen ortuyordu. */
.seritler { position: sticky; top: 0; z-index: 20; }

/* Hata seridi (role="alert"): alert() yerine. */
.uyari {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px;
  background: var(--danger-soft); color: var(--danger-text);
  border-bottom: 2px solid var(--danger); font-weight: 700;
}
.uyari .spacer { flex: 1; }

/* Ekran okuyucu icin gorsel olarak gizli ama erisilebilir agac icinde kalan icerik
   (#saglik-duyuru). Standart "sr-only" deseni; renk/boyut tokenlariyla ilgisi yok. */
.gorsel-gizli {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ustbar {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--bg-card); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.marka { font-family: var(--font-heading); font-size: 18px; font-weight: 800; }
.alt-baslik { color: var(--text-muted); font-weight: 600; }
.spacer { flex: 1; }
.saglik { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px;
  border: 2px solid var(--border); border-radius: var(--radius-sm); font-weight: 700;
  min-height: 44px; background: var(--bg-card); color: var(--text-primary);
}
.pill .nokta { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pill .alt { font-size: 12px; font-weight: 600; opacity: .85; }
.pill.good { border-color: var(--success); background: var(--success-soft); color: var(--success-text); }
.pill.warn { border-color: var(--warning); background: var(--warning-soft); color: var(--warning-text); }
.pill.bad  { border-color: var(--danger);  background: var(--danger-soft);  color: var(--danger-text); }
.btn-tema, .btn-quiet {
  background: transparent; border: 2px solid var(--border); color: var(--text-secondary);
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 700;
  padding: 10px 14px; min-height: 44px;
}
.btn-tema:hover { border-color: var(--border-hover); color: var(--text-primary); }

/* Faz 2: uc sayfa arasi gezinme. Aktif sayfa accent ile; renk + alt cizgi, yalniz renk degil. */
/* SARAR: SISTEM rolunde cubukta DORT baglanti olur (Siparişler / Geçmiş / Ayarlar / Yönetim) ve
   sarmayan tek bir flex ogesi 375 px'te 384 px'e cikip BELGEYI yatay kaydiriyordu -- `.ustbar`
   sarabiliyor ama cocugu saramiyordu. Genis ekranda hicbir sey degismez. */
.gezinme { display: flex; flex-wrap: wrap; gap: 6px; }
.gezinme a {
  padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center;
  border-radius: var(--radius-sm); font-weight: 700; color: var(--text-secondary); text-decoration: none;
  border: 2px solid transparent;
}
.gezinme a:hover { color: var(--text-primary); border-color: var(--border-hover); }
.gezinme a.aktif { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); text-decoration: underline; text-underline-offset: 4px; }
.btn-quiet.baglanti { text-decoration: none; display: inline-flex; align-items: center; }
/* Tus gibi gorunen baglanti alti cizili KALMAMALI: `.btn-quiet.baglanti` bu kurali zaten
   tasiyordu, birincil tus (.btn-go) tasimiyordu ve baglanti hem tus hem link gibi cikiyordu. */
.btn-go.baglanti { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* Yazici seridi: warning zemin (danger olan #uyari ile karismasin); Ayarlar baglantisi her zaman gorunur.
   Kendi `top`u YOK: yapisma kapsayicinin (.seritler) isidir, aksi halde hata seridini ortuyordu. */
.uyari.yazici { background: var(--warning-soft); color: var(--warning-text); border-bottom-color: var(--warning); }
.uyari.yazici .btn-quiet { color: var(--warning-text); border-color: var(--warning); }

/* Faz 3 ust bar: kim oldugun, parolan ve Cikis. Dar ekranda .ustbar zaten sarmalar. */
.kullanici-cubugu { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kullanici { font-weight: 700; color: var(--text-secondary); }

/* Destek gorunumu seridi (yalniz SISTEM): warning zemin, sayfanin EN USTUNDE. Kasa ekraninin
   danger seridiyle karismasin diye ayni renk ailesi kullanilmaz; "bu ekran baska bir bayiye
   yaziliyor" bir hata degil, kalici bir durumdur (role="status"). */
.uyari.destek { background: var(--warning-soft); color: var(--warning-text); border-bottom-color: var(--warning); }
.uyari.destek .btn-quiet { color: var(--warning-text); border-color: var(--warning); }

/* Kiracisiz SISTEM seridi: "bu ekran bir bayiye bagli degil" bir ARIZA degil, bir durumdur
   (role="status"). Kasa ekraninin kirmizi alarm seridiyle karismasin diye destek seridiyle ayni
   warning ailesini kullanir; ayri secici, cunku iki serit ayri sey soyler. */
.uyari.kiracisiz { background: var(--warning-soft); color: var(--warning-text); border-bottom-color: var(--warning); }
.uyari.kiracisiz .btn-quiet { color: var(--warning-text); border-color: var(--warning); }

/* Giris ve parola sayfasi: tek kart, ortada. Alanlar 48 px (kasa dokunmatik, eldivenli parmak).
   Kart icindeki hata seridi tam genislik degil: kartin kosesini takip eder, altina cizgi cizmez. */
.giris-sayfa { display: grid; justify-items: center; align-content: start; gap: var(--space-4); padding: var(--space-6) var(--space-4); }

/* ---- Kimlik ekranlari (giris, parola, parola yardimi, e-posta) -----------------------------
   Yerlesim C (spec 2026-09-13 §4): UST BAR YOK. Marka kartin ustunde ortali, tema tusu ve yardim
   baglantilari kartin altindaki `kimlik-alt` seridinde. Alan yuksekligi 48 px ve yazi 16 px:
   telefonda odaklaninca sayfa yakinlasmasin diye 16 px'in altina inilmez.
   Sayfa dikeyde ORTALANMAZ, ustten 8vh bosluk birakir: ortalama, klavye acilan dar bir ekranda
   kartin ust kenarini gorunmez yapardi. */
body[data-kimlik] .kimlik-marka {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(26px, 5vw, 32px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
body[data-kimlik] .kimlik-adimlar { display: flex; align-items: center; gap: 6px; }
body[data-kimlik] .kimlik-adim {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 600;
  background: var(--bg-input); color: var(--text-muted);
}
body[data-kimlik] .kimlik-adim.acik { background: var(--accent); color: var(--accent-foreground); }
body[data-kimlik] .kimlik-adim-cizgi { width: 18px; height: 1px; background: var(--border); }
body[data-kimlik] .btn-ikon {
  width: var(--dokunma-min); height: var(--dokunma-min); padding: 0; display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary);
}
body[data-kimlik] .giris-sayfa {
  gap: 14px; padding: 8vh 20px 40px; min-height: 100dvh; box-sizing: border-box;
}
body[data-kimlik] .giris-kart {
  width: 100%; max-width: 420px; box-sizing: border-box; padding: 24px; display: grid; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body[data-kimlik] .giris-kart h1, body[data-kimlik] .giris-kart h2 { margin: 0; font-size: var(--olcek-kart); }
body[data-kimlik] .giris-kart .alan { display: grid; gap: 6px; }
body[data-kimlik] .giris-kart label { font-size: var(--olcek-etiket); font-weight: 600; }
body[data-kimlik] .giris-kart input {
  width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 12px; font: inherit;
  font-size: 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text-primary);
}
body[data-kimlik] .giris-kart .btn-go {
  width: 100%; min-height: 48px; font-size: 16px; font-weight: 700; border-radius: var(--radius-md);
}
/* Kart ici ikincil islem baglanti gibi durur: ortada, cercevesiz. */
body[data-kimlik] .giris-kart .baglanti {
  justify-self: center; min-height: var(--dokunma-min); padding: 0 8px; border: 0;
  background: transparent; color: var(--accent-emphasis); font-size: var(--olcek-etiket); font-weight: 600;
}
body[data-kimlik] .kimlik-alt { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
body[data-kimlik] .kimlik-alt .baglanti,
body[data-kimlik] .kimlik-alt .btn-quiet,
body[data-kimlik] .giris-sayfa > .baglanti {
  min-height: var(--dokunma-min); padding: 0 8px; border: 0; background: transparent;
  color: var(--accent-emphasis); font-size: var(--olcek-etiket); font-weight: 600;
}
/* Hata ve sonuc kutulari: nokta + kelime, canli bolge. */
body[data-kimlik] .uyari.serit-ici {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin: 0;
  border: 1px solid var(--danger); border-radius: var(--radius-md); background: var(--danger-soft);
  color: var(--danger-text); font-size: var(--olcek-etiket); font-weight: 600;
}
body[data-kimlik] .uyari.serit-ici::before,
body[data-kimlik] .kimlik-sonuc::before {
  content: ''; flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 999px;
  background: currentColor;
}
body[data-kimlik] .kimlik-sonuc {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  font-size: var(--olcek-etiket); font-weight: 600; color: var(--text-secondary);
}
body[data-kimlik] .kimlik-sonuc.iyi { color: var(--success-text); }
body[data-kimlik] .kimlik-sonuc.kritik { color: var(--danger-text); }
body[data-kimlik] .kimlik-sonuc.dikkat { color: var(--warning-text); }
body[data-kimlik] .kimlik-not { color: var(--warning-text); }
@media (max-width: 760px) {
  body[data-kimlik] .giris-sayfa { padding: 5vh 14px 40px; }
}

/* Kirilim noktasinin biricik tanimi. Asagidaki her @media (max-width: 760px) bu esikle ayni
   olmak zorunda; degisirse ikisi birlikte degisir. */
@media (max-width: 760px) { :root { --dar-ekran: 1; } }

.giris-kart { width: 100%; max-width: 420px; }
.giris-kart input { font: inherit; width: 100%; min-height: 48px; padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); }
.giris-kart .alan { padding-left: 0; }
.giris-kart button[type="submit"] { width: 100%; }
.uyari.serit-ici { border: 2px solid var(--danger); border-radius: var(--radius-sm); padding: 10px 14px; }

/* Kartta fis durumu + Yazdir tusu: eylemlerin altinda tek satir. */
.fis-satiri { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 0; flex: 1 1 auto; min-width: 0; }
/* Reddet + fis durumu/Yazdir tek satirda; Reddet solda kalir, fis bilgisi ve Yazdir saga yaslanir. */
.ikincil-satir { display: flex; align-items: center; gap: 8px; }
.ikincil-satir > .btn-quiet { align-self: center; flex: 0 0 auto; }


/* ---- Fis gorunumu: termal kagidin kendisi ----
   Kagit HER TEMADA beyaz; termal kagit beyazdir ve koyu temada "koyu fis" gostermek yaniltir.
   Genislik KARAKTER IZGARASINA baglidir (--fis-sutun): 80 mm = 48, 58 mm = 32 sutun. Boyut 2/3
   yazi tipini ayni oranda buyutur, boylece satir tasmasi kagittaki gibi gorunur. */
.fis-kagit {
  --fis-sutun: 48;
  --fis-satir-yuksekligi: 1.28;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
  font-size: 12px;
  width: calc(var(--fis-sutun) * 1ch + 28px);
  max-width: 100%;
  background: var(--fis-kagit);
  color: var(--fis-murekkep);
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
/* Kagidin yirtik kenari: fis oldugu bir bakista anlasilsin. */
.fis-kenar {
  height: 8px;
  background:
    linear-gradient(45deg, transparent 50%, var(--fis-kagit) 51%) 0 0 / 10px 8px repeat-x,
    linear-gradient(-45deg, transparent 50%, var(--fis-kagit) 51%) 0 0 / 10px 8px repeat-x;
}
.fis-kenar.fis-ust { transform: rotate(180deg); }
.fis-govde { padding: 4px 14px 10px; }
.fis-blok { margin: 0; }
.fis-satir {
  white-space: pre;
  line-height: var(--fis-satir-yuksekligi);
  letter-spacing: 0;
}
.fis-boyut-2 { font-size: 24px; font-weight: 600; }
.fis-boyut-3 { font-size: 34px; font-weight: 700; line-height: 1.12; }
.fis-kalin { font-weight: 800; }
.fis-orta { text-align: center; }
.fis-sag { text-align: right; }
/* Ters renk (GS B): termal yazicida siyah zemin, beyaz yazi. */
.fis-ters .fis-satir { background: var(--fis-murekkep); color: var(--fis-kagit); }
.fis-cizgi { white-space: pre; line-height: var(--fis-satir-yuksekligi); }
.fis-cerceve .fis-satir { line-height: var(--fis-satir-yuksekligi); }
/* Kagitta gorunmeyen komutlar (kod sayfasi, kesme) isaret olarak gosterilir; yazi degil. */
.fis-komut {
  margin: 5px 0; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fis-solgun); border-top: 1px dashed var(--fis-cizgi); padding-top: 4px;
}
.fis-kes {
  margin: 8px -14px 0; padding: 4px 14px 0; font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--fis-solgun); border-top: 2px dashed var(--fis-kesik); text-align: center;
}
/* Karekod YER TUTUCUSU: gercek karekodu kagitta yazici cizer, ekranda kaplayacagi alan gosterilir.
   Kenar uzunlugu modul boyutuyla orantilidir (--fis-qr-modul, fis-gorunum.js yazar); 3ch olcek
   80 mm'de ~18-20 sutunluk gercekci bir kareye denk duser. Kagida sigmayan olcu kirpilir. */
.fis-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0; }
.fis-qr-kare {
  width: calc(var(--fis-qr-modul, 6) * 3ch); height: calc(var(--fis-qr-modul, 6) * 3ch);
  max-width: 100%; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--fis-cizgi); color: var(--fis-solgun);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.fis-qr-adres { max-width: 100%; font-size: 10px; color: var(--fis-solgun); text-align: center; word-break: break-all; }

/* Onizleme panelinde kagit ortalanir ve kaydirilabilir. */
/* align-items: flex-start SART: varsayilan `stretch` kagidi kapsayicinin yuksekligine esitliyor,
   kagit `overflow: hidden` oldugu icin fisin alti (karekod, kesme bandi) kirpiliyor ve kapsayici
   kagidi "sigmis" saydigi icin kaydirma cubugu da cikmiyordu. */
.onizleme-kagit { display: flex; justify-content: center; align-items: flex-start; max-height: 340px; overflow: auto; padding: 8px 0; }
.pill.mini { min-height: 32px; padding: 4px 10px; font-size: 13px; gap: 6px; }

.kuyruklar { padding: 14px 18px; display: grid; gap: 18px; }
.bos { padding: 40px; text-align: center; color: var(--text-muted); font-weight: 600; }

.satir {
  display: grid; grid-template-columns: 56px 1.6fr 150px 150px 300px; gap: 14px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px 10px 0; box-shadow: var(--shadow); min-height: 88px; overflow: hidden; margin-bottom: 8px;
}
.satir.iptal { border-color: var(--danger); }
.serit {
  align-self: stretch; width: 56px; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-foreground);
  font-family: var(--font-heading); font-weight: 800; font-size: 17px; margin: -10px 0;
}
.satir.iptal .serit { background: var(--danger); color: var(--danger-foreground); }
.ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bname { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.2; }
.rozet {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-chip);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-input);
}
.rozet.platform.trendyol { background: rgba(var(--pf-ty-rgb), var(--pf-tint)); border-color: transparent; color: var(--text-primary); }
.rozet.test { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-text); }
.rozet.inceleme { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-text); text-transform: none; }
/* ALINDI satiri esikten uzun bekliyor: kelime + renk, asla yalniz renk. */
.rozet.gecikti { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-text); }
.kod { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary); }
.items { margin-top: 3px; font-size: 14px; color: var(--text-secondary); font-weight: 500; }
.note {
  margin-top: 4px; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--warning-soft);
  color: var(--warning-text); border: 1px solid var(--warning); font-size: 13px; font-weight: 700; display: inline-block;
}
.adres { margin-top: 3px; font-size: 12px; color: var(--text-muted); }

.tim .hero { font-family: var(--font-heading); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1; }
.tim .small { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.money { font-family: var(--font-heading); font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paid { margin-top: 4px; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.paid.cash {
  padding: 4px 9px; border-radius: var(--radius-sm); background: var(--warning-soft);
  color: var(--warning-text); border: 1px solid var(--warning); font-weight: 800; display: inline-block;
}
/* Bilinmeyen odeme tipi ya da tutar: "Tahsilat: kontrol et" (KARAR §11). Warning token'lari, sabit renk yok. */
.paid.warn {
  padding: 6px 11px; border-radius: var(--radius-sm); background: var(--warning-soft);
  color: var(--warning-text); border: 2px solid var(--warning); font-weight: 800; display: inline-block;
}

/* Birincil eylem tek basina ustte ve en buyuk nesne; yikici eylem (Reddet) ayri satirda. */
.acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.btn-go {
  background: var(--accent); color: var(--accent-foreground); border: 2px solid transparent;
  border-radius: var(--radius-sm); font-size: 16px; font-weight: 800; padding: 12px 16px; min-height: 48px;
}
.btn-go:hover { background: var(--accent-hover); }
/* Sure secenekleri birincil tusun ALTINDA degil YANINDA: eski dizilim satiri ~90px sisiriyordu ve
   ekrana yalniz 2-3 siparis sigiyordu. Hepsi hala tek tikla ulasilir ve 44px dokunma hedefinin ustunde. */
/* Kabul kontrolu: iki satirli birincil tus (eylem + ne oldugu soylenen sure) ve yaninda "Başka süre".
   Yatay dizilim satiri sismez; birincil tus dolu zemin ve ~2 kat genisliktir (yanlis tik korumasi). */
.kabul-grubu { display: flex; flex-direction: row; gap: 6px; align-items: stretch; }
.kabul-grubu .btn-go { flex: 1 1 auto; }
.btn-go.iki-satir {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 6px 14px; min-height: 52px; line-height: 1.15;
}
.btn-go.iki-satir .eylem-ad { font-size: 16px; font-weight: 800; }
.btn-go.iki-satir .eylem-alt { font-size: 12.5px; font-weight: 700; opacity: .92; }
/* Sure paneli: red panelinin (.neden-grubu) birebir deseni, accent tonunda. */
.sure-paneli {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 10px;
  border: 2px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-glow);
}
.sure-paneli .baslik { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--accent-emphasis); }
.sure-paneli .btn-quiet { grid-column: 1 / -1; }
.btn-sure-secim {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--bg-card); border: 2px solid var(--accent); color: var(--text-primary);
  border-radius: var(--radius-sm); font-weight: 800; font-size: 15px; min-height: 52px; padding: 8px 10px;
}
.btn-sure-secim:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-sure-secim .sure-not { font-size: 11px; font-weight: 700; opacity: .85; letter-spacing: .02em; }
.btn-sure {
  background: var(--bg-input); border: 2px solid var(--border); color: var(--text-primary);
  border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; min-height: 48px; padding: 8px 10px;
  white-space: nowrap;
}
.btn-sure:hover { border-color: var(--accent); }
.btn-quiet { align-self: flex-end; }
.btn-quiet:hover { border-color: var(--danger); color: var(--danger-text); }
.neden-grubu {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px;
  border: 2px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-soft);
}
.neden-grubu .baslik { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--danger-text); }
.neden-grubu .btn-quiet { grid-column: 1 / -1; }
.btn-neden {
  background: var(--bg-card); border: 2px solid var(--danger); color: var(--danger-text);
  border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; min-height: 46px; padding: 10px 12px;
}
.btn-neden:hover { background: var(--danger); color: var(--danger-foreground); }
.locked {
  display: flex; align-items: center; padding: 10px 13px; border: 2px dashed var(--border-hover);
  border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; font-weight: 600; min-height: 48px;
}

/* Geri alma bandi (spec §7.2): KABUL/RED tiklandi, ayarlar.geriAlMs dolana kadar POST atilmaz. */
.geri-al-bandi {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px;
  border: 2px solid var(--success); border-radius: var(--radius-sm); background: var(--success-soft);
  color: var(--success-text); font-weight: 800; font-size: 15px; min-height: 48px;
}
.geri-al-bandi button {
  min-height: 44px; padding: 10px 18px; border: 2px solid var(--success-text); background: var(--bg-card);
  color: var(--success-text); border-radius: var(--radius-sm); font-weight: 800; font-size: 15px; white-space: nowrap;
}
.geri-al-bandi button:hover { background: var(--success-text); color: var(--success-foreground); }

/* Faz 2: Gecmis ve Ayarlar sayfalari */
.sayfa { padding: 18px; display: grid; gap: 18px; max-width: 1200px; }
.gun-secici { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gun-secici input[type="date"] {
  font: inherit; padding: 10px 12px; min-height: 44px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-primary);
}
.ozet-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ozet-kart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.ozet-baslik { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ozet-deger { font-family: var(--font-heading); font-weight: 800; font-size: 28px; font-variant-numeric: tabular-nums; margin-top: 4px; }
.ozet-alt { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.kirilim { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.kirilim-kutu { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.kirilim-kutu h3 { font-size: 15px; margin-bottom: 6px; }
.kirilim-satir { padding: 4px 0; color: var(--text-secondary); font-weight: 600; }
.bos-kucuk { color: var(--text-muted); font-weight: 600; }
.tablo { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tablo th, .tablo td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tablo th { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--bg-input); }
.tablo tr.test td { background: var(--warning-soft); }
.tablo td .fis-satiri { margin-top: 0; }
.bname.kucuk { font-size: 16px; margin-right: 8px; }
.money.kucuk { font-size: 17px; }
.rozet.durum.iptal { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-text); }

/* Ayarlar */
.sayfa.ayarlar { max-width: 900px; }
.kart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: grid; gap: 12px; overflow: hidden; }
.kart h2 { margin: 0; }
.aciklama { margin: 0; color: var(--text-secondary); }
.ajan-durum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-go.kucuk { font-size: 16px; padding: 12px 18px; min-height: 48px; justify-self: start; }
.kod-alani { display: grid; gap: 10px; padding: 14px; border: 2px dashed var(--accent); border-radius: var(--radius-sm); background: var(--accent-glow); }
.kod-buyuk { font-family: var(--font-heading); font-weight: 800; font-size: 40px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.adimlar { margin: 0; padding-left: 22px; font-weight: 600; display: grid; gap: 4px; }
.alan-grubu { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.alan-grubu legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.alan { display: grid; gap: 6px; padding-left: 28px; }
.alan.satir-ici, .alan-grubu.satir-ici { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.secenek { display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 44px; }
.secenek input { width: 22px; height: 22px; accent-color: var(--accent); }
.kart label { font-weight: 700; }
.kart select, .kart input[type="text"], .kart input[type="number"], .kart input[type="password"] {
  font: inherit; padding: 10px 12px; min-height: 44px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-primary); min-width: 160px;
}
.kart input[type="number"] { min-width: 110px; }
.kaydet-satiri { display: flex; align-items: center; gap: 14px; }
.onizleme {
  margin: 0; padding: 14px; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 13px;
  line-height: 1.35; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow-x: auto; white-space: pre; color: var(--text-primary);
}
/* Bilgi seridi de .seritler kapsayicisinda yasar; kendi sticky/top degeri YOK (bkz. .seritler). */
.bilgi {
  display: flex; align-items: center; padding: 12px 18px;
  background: var(--success-soft); color: var(--success-text); border-bottom: 2px solid var(--success); font-weight: 700;
}

/* Faz 3 §7.4: "Platform bağlantısı" ve "Kullanıcılar" kartlari (paylasimli yonetim-ortak.js).
   Kart ici mesajlar sayfanin serit kapsayicisina bagli DEGIL: ayni kartlar yonetim konsolunda da
   cizilecek ve orada o serit yok. Kartin kosesini takip eder, sayfa boyu cizgi cizmez. */
.bilgi.serit-ici { border: 2px solid var(--success); border-radius: var(--radius-sm); padding: 10px 14px; }

.baglanti-liste { display: grid; gap: 12px; }
.baglanti-satir {
  display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-primary);
}
.baglanti-basik { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Satir icindeki sessiz tuslar .acts'ten gelen `align-self: flex-end`i almamali (satir sismesin). */
.baglanti-satir .btn-quiet { align-self: center; min-height: 44px; }
.magaza-listesi { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.magaza-satiri {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; border-radius: var(--radius-chip); background: var(--bg-input);
  color: var(--text-secondary); font-weight: 600;
}
/* Pasif magaza SILINMIS degil, kapali: soluk gorunur ama okunur kalir (yeniden acilabilir). */
.magaza-satiri.pasif { color: var(--text-muted); border: 1px dashed var(--border-hover); }
.kimlik-alanlari { display: flex; gap: 12px; flex-wrap: wrap; }
.kimlik-alanlari .alan { flex: 1 1 220px; }
/* Kart ici duz alan: radyo listesinin 28 px girintisi burada yanlis hizalama yapiyordu. */
.alan-duz { padding-left: 0; }
.baglanti-tuslar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.baglanti-tuslar .btn-go.kucuk { justify-self: start; }

/* Test sonucu: renk TEK basina anlam tasimaz, metin de sonucu soyler (renk koru okuyucu). */
.sonuc { font-weight: 700; min-height: 22px; color: var(--text-secondary); }
.sonuc.basarili { color: var(--success-text); }
.sonuc.hatali { color: var(--danger-text); }

.ekle-form { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.ekle-form h3 { font-size: 15px; }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.form-izgara .alan { gap: 4px; }
.form-izgara input, .form-izgara select { width: 100%; min-width: 0; }

/* Satir ici iki adimli onay (modal yok): soru ve iki tus ayni satirda kalir. */
.onay-kap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.onay-soru { font-weight: 700; color: var(--danger-text); }
.onay-evet { border-color: var(--danger); color: var(--danger-text); }

.kullanici-tablo { overflow-x: auto; }
.kart .tablo button { min-height: 44px; align-self: center; }
.satir-eylem { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tablo tr.pasif td { color: var(--text-muted); background: var(--bg-input); }

/* Gecici parola: sunucunun bir daha vermeyecegi bir sir. Dikkat cekmeli ve YANLIS OKUNMAMALI. */
.gecici-parola {
  display: grid; gap: 8px; padding: 14px; border: 2px dashed var(--accent);
  border-radius: var(--radius-sm); background: var(--accent-glow);
}
.gecici-parola-baslik { font-weight: 700; }
.gecici-parola-tuslar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gecici-parola .btn-quiet { align-self: center; }
/* Monospace + tabular: gecici parolada l/1 ve O/0 karismasin (kasiyer telefonla okuyacak). */
.parola-metni {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 22px;
  font-weight: 700; letter-spacing: .08em; user-select: all; word-break: break-all;
  color: var(--text-primary);
}

/* Faz 3 §7.5: yonetim konsolu (`/yonetim/`). Kendi kart ve tablo bicimi yok; kasa ekraninin
   token'lari ve `.kart`/`.tablo` kurallari yeniden kullanilir. Buradaki uc kural yalniz
   konsolun iki farkli seyini cozer: genis tablo (sekiz sutun) telefonda yatay kaydirilmali,
   kiraci basligi tek satirda ad + kasa baglantisi tasimali, ve tablodaki BAGLANTI tuslari
   (Aç / Kasa ekranını gör) tus kadar buyuk kalmali. */
/* `min-width: 0` SART: `.kart` bir grid ve grid ogesinin varsayilan `min-width: auto`su
   kutuyu icindeki tablo kadar genisletiyordu -- 375 px'te tablo kendi icinde kaymak yerine
   kartla birlikte sayfayi yatay kaydiriyordu (belge 809 px, ekran 375 px). */
.tablo-kutu { overflow-x: auto; min-width: 0; }
.kiraci-basligi {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  color: var(--text-primary);
}
.kiraci-basligi h1 { margin: 0; font-size: 24px; }
/* KART basligi + kartin kendi tazeleme tusu ("Son olaylar" / "Yenile") ayni satirda. Sayfa
   basligi `.kiraci-basligi` DEGIL: onun `align-items: baseline`i ve `.btn-quiet`in genel
   `align-self: flex-end`i tusu satirin altina cakiyordu. */
.kart-basligi { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.kart-basligi .btn-quiet { align-self: center; }
/* `.btn-quiet`in genel `align-self: flex-end`i satiri sisiriyordu; hucre icinde ortalanir. */
.kart .tablo a.btn-quiet { min-height: 44px; align-self: center; }

/* Tablet/laptop: dort sutun; serit iki satiri kaplar, eylemler ikinci satira iner. Tutar sarilmaz. */
@media (max-width: 1180px) {
  .satir { grid-template-columns: 48px 1fr auto auto; gap: 10px; }
  .acts { grid-column: 2 / -1; }
  .serit { grid-row: 1 / 3; width: 48px; }
}
/* Cok dar (panel/tablet dikey): sutunlar ust uste binerken satir 550px'e cikiyordu. Ikincil bilgi
   kuculur, eylem satiri yatay kalir; hedef her sipariste 3 ekran degil 1 ekran kaydirma. */
@media (max-width: 760px) {
  .satir { grid-template-columns: 44px 1fr; gap: 8px; padding: 8px 10px 8px 0; }
  .serit { grid-row: 1 / 5; width: 44px; font-size: 15px; }
  .tim, .tutar, .acts { grid-column: 2 / -1; }
  .tim { display: flex; align-items: baseline; gap: 8px; }
  .tim .hero { font-size: 19px; }
  .tutar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .money { font-size: 17px; }
  .paid { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


.pill.tuslu button { min-height: 44px; color: inherit; background: transparent; }
.otomatik-onay-bandi { background: var(--danger); color: var(--danger-foreground); }
.oo-kart .oo-durum { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.oo-kart .oo-kilit, .oo-kart .oo-trendyol, .oo-kart .oo-ozet { line-height: 1.6; overflow-wrap: anywhere; }
.oo-secenekler { display: grid; gap: 12px; }
.oo-secenekler label { min-height: 44px; display: flex; align-items: center; gap: 8px; }

/* Grid ve fieldset'in min-content tabani dar ekrani genisletmemeli. */
.sayfa.ayarlar { grid-template-columns: minmax(0, 1fr); }
.sayfa.ayarlar .kart { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.sayfa.ayarlar fieldset, .oo-kart .alan { min-width: 0; }
.sayfa.ayarlar select { min-width: 0; max-width: 100%; }
.oo-kart input[type="checkbox"] { justify-self: start; width: 22px; height: 22px; accent-color: var(--accent); }
.oo-secenekler input[type="radio"] { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--accent); }

/* F4b: islevsel kartlar; kasa satir duzeni korunur. */
.isletme { max-width: 960px; margin-inline: auto; }
.isletme .kart { margin-block: 16px; }
.isletme-araclar, .isletme-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.isletme-satir { padding-block: 12px; border-bottom: 1px solid var(--border); }
.isletme-satir p { flex-basis: 100%; }
.isletme input, .isletme select, .isletme textarea { min-height: 44px; max-width: 100%; box-sizing: border-box; }
.isletme select, .isletme textarea { display: block; width: 100%; margin-block: 12px; }
.isletme input[type="checkbox"] { width: 44px; height: 44px; flex-shrink: 0; }
.isletme-onay { overflow-wrap: anywhere; }


/* Musteri paneli: ortak cati. Siparis satirlarinin is akisi ayni kalir. */
body[data-musteri-cati] { min-height: 100dvh; background: var(--cati-zemin); --border: var(--cati-border); }
.musteri-yan-menu { position: fixed; inset: 0 auto 0 0; width: var(--cati-yan-genislik); z-index: 30; display: flex; flex-direction: column; background: var(--cati-menu); color: var(--cati-menu-yazi); }
.cati-marka { min-height: 64px; display: flex; align-items: center; padding: 14px 26px; color: var(--cati-menu-yazi); text-decoration: none; font: 800 20px var(--font-heading); border-bottom: 1px solid var(--cati-menu-cizgi); letter-spacing: -.03em; }
/* Kurucu gecisi (2026-09-15, tasarim): yan menu bir dizustunde surekli kayiyor ve tarayicinin
   kalin gri cubugu koyu menunun ustunde yama gibi duruyordu. Iki is birden yapildi:
   (1) menu daha az dikey yer kaplar (gruplar arasi 18 -> 12, dolgu 20 -> 14, baglanti 46 -> 44
   ki dokunma hedefi kurali hala saglanir), (2) cubuk ince ve menu cizgisi renginde -- kayan
   icerik hala kaydirilabilir, ama goze batmaz. `scrollbar-gutter: stable` ile de cubuk
   cikip girerken baglantilar YERINDEN OYNAMAZ. */
.musteri-yan-menu .gezinme { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 12px; padding: 14px 12px; overflow-y: auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: var(--cati-menu-cizgi) transparent; scrollbar-gutter: stable; }
.musteri-yan-menu .gezinme::-webkit-scrollbar { width: 6px; }
.musteri-yan-menu .gezinme::-webkit-scrollbar-track { background: transparent; }
.musteri-yan-menu .gezinme::-webkit-scrollbar-thumb { background: var(--cati-menu-cizgi); border-radius: 999px; }
.musteri-yan-menu .gezinme:hover::-webkit-scrollbar-thumb { background: var(--cati-menu-soluk); }
.cati-menu-grubu { display: grid; gap: 4px; }
.cati-menu-basligi { padding: 0 14px 3px; color: var(--cati-menu-soluk); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.musteri-yan-menu .gezinme a { min-height: 44px; padding: 9px 12px; border: 1px solid transparent; gap: 12px; font-size: 13px; font-weight: 500; color: var(--cati-menu-soluk); border-radius: var(--radius-sm); }
.musteri-yan-menu .gezinme a svg { flex: none; }
.musteri-yan-menu .gezinme a:hover { background: var(--cati-menu-hover); color: var(--cati-menu-yazi); }
.musteri-yan-menu .gezinme a.aktif { background: var(--cati-menu-hover); color: var(--cati-menu-yazi); border-color: var(--cati-menu-cizgi); box-shadow: inset 3px 0 var(--accent); text-decoration: none; font-weight: 700; }
.cati-sayac { margin-left: auto; padding: 1px 7px; border-radius: var(--radius-chip); color: var(--accent-foreground); background: var(--accent); font-size: 12px; }
/* Alt blok yan menunun en buyuk ikinci parcasiydi (199 px). Dolgu ve avatar kuculdu; dugmeler
   44 px kaldi (dokunma hedefi kurali). */
.cati-menu-alt { margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--cati-menu-cizgi); }
.cati-menu-alt .kullanici-cubugu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cati-profil { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin-bottom: 2px; min-width: 0; }
.cati-avatar { width: 32px; height: 32px; font-size: 12px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: 700; background: var(--cati-menu-hover); color: var(--cati-menu-yazi); border: 1px solid var(--cati-menu-cizgi); }
/* `anywhere` burada da kelimeleri ortasindan kirabiliyordu (yan menu dar); `break-word` ayni
   tasmayi onler ama min-content olcusunu bozmaz -- bkz. siparis karti aciklamasi. */
.cati-profil-metin { display: grid; gap: 0; min-width: 0; overflow-wrap: break-word; line-height: 1.35; }
/* Uc satirin da YUKSEKLIGI sabittir: uzun bir kullanici adi ya da isletme adi bloku sisirip
   menuyu daha erken kaydirmaya baslatmasin. Tam metin `title`da durur (musteri-cati.js). */
.cati-profil-metin strong, .cati-profil-metin span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cati-profil-metin strong { font-size: 13px; font-weight: 600; }
.cati-profil-metin span { font-size: 11px; color: var(--cati-menu-soluk); }
.cati-menu-alt .btn-quiet, .cati-menu-alt .btn-tema { color: var(--cati-menu-soluk); border: 1px solid var(--cati-menu-cizgi); font-size: 12px; font-weight: 500; padding: 8px; justify-content: center; }
.cati-menu-alt .btn-tema { margin-top: 6px; width: 100%; }
.cati-menu-alt .btn-quiet:hover, .cati-menu-alt .btn-tema:hover { background: var(--cati-menu-hover); color: var(--cati-menu-yazi); }
.cati-menu-alt .uyari { grid-column: 1 / -1; }
/* Yan menu ve ust serit JS ile kuruluyor (kimlik geldikten sonra). Ilk boyamada sol sutun BOS,
   ust serit de baska olcudeydi; menu gelince ikisi birden yerine oturuyordu. Her sayfa gecisinde
   "menu kayboldu, geri geldi" diye gorunen sey buydu.
   Asagidaki iki kural ilk boyamada AYNI cerceveyi cizer: yer tutucu serit menunun zemini olur,
   statik ust bar da sarilmis halinin olculerini alir. Gercek menu (z-index 30) yer tutucunun
   tam ustune oturdugu icin hicbir sey oynamaz; yalniz menunun ICI dolar. */
body[data-musteri-cati]::before {
  content: ''; position: fixed; inset: 0 auto 0 0; width: var(--cati-yan-genislik);
  background: var(--cati-menu); z-index: 29;
}
body[data-musteri-cati] > .ustbar {
  margin-left: var(--cati-yan-genislik); min-height: 56px; padding: 8px 20px; gap: 12px;
  background: var(--cati-baslik); align-items: center;
}
/* Cati kurulunca JS ust seridin ICINI tamamen degistirir (musteri-cati.js: ust.replaceChildren):
   marka, gezinme, kullanici cubugu ve tema tusu oradan kalkar, yerine sayfa basligi ve arac
   cipleri gelir. Ilk boyamada bunlar goruluyordu ve her sayfa yuklemesinde bir an
   "paketbi ... Açık tema" seridi gecip kayboluyordu.
   Ilk boyamada YALNIZ sayfa adi durur -- son halindeki baslikla ayni yerde ve ayni olcude,
   boylece cati kurulunca yerinden oynamaz. Bu kurallar yalniz JS'ten ONCE eslesir: sarildiktan
   sonra secici `.musteri-tepe > .ustbar` olur ve devre disi kalir. */
body[data-musteri-cati] > .ustbar > .marka,
body[data-musteri-cati] > .ustbar > .gezinme,
body[data-musteri-cati] > .ustbar > .spacer,
body[data-musteri-cati] > .ustbar > .saglik,
body[data-musteri-cati] > .ustbar > #otomatik-onay-pili,
body[data-musteri-cati] > .ustbar > .kullanici-cubugu,
body[data-musteri-cati] > .ustbar > .btn-tema { display: none; }
body[data-musteri-cati] > .ustbar > .alt-baslik {
  font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1.3;
  color: var(--text-primary); letter-spacing: -.01em;
}
.musteri-tepe { position: sticky; top: 0; z-index: 20; margin-left: var(--cati-yan-genislik); }
/* Ust serit 76 -> 56 px (kurucu tasarimi 2026-09-18): siparis alani 20 px daha buyur. */
.musteri-tepe .ustbar { min-height: 56px; padding: 8px 20px; gap: 12px; background: var(--cati-baslik); align-items: center; }
.musteri-tepe .seritler { position: static; }
.cati-baslik { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; min-width: 0; }
.cati-baslik h1 { font-size: 21px; line-height: 1.3; white-space: nowrap; }
.cati-ust-araclar { display: flex; flex: 1; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.cati-isletme-adi { color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
/* Ust seritte cipler ayni yukseklikte, tek satirda ve sakin zeminde durur (tasarim kaynagi:
   SiparisKanban.dc.html data-tools). Renk YALNIZ noktada; gercek sorun tonlu zemin alir. */
.cati-ust-araclar .pill {
  min-height: 36px; padding: 0 10px; gap: 6px; font-size: 13px; font-weight: 500;
  white-space: nowrap; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-primary); color: var(--text-primary);
}
.cati-ust-araclar .pill.good .nokta { background: var(--success); }
.cati-ust-araclar .pill.warn { border-color: var(--warning); background: var(--warning-soft); color: var(--warning-text); }
.cati-ust-araclar .pill.bad { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-text); }
.cati-ust-araclar .pill .alt { font-size: 11px; }
.cati-ust-araclar .pill .nokta { width: 6px; height: 6px; }
.cati-ust-araclar .pill.tuslu { padding: 0 8px; }
.cati-ust-araclar .pill .btn-quiet { border: 0; padding: 6px; font-size: 12px; }
.cati-ust-araclar .ses-bandi { padding: 0; background: transparent; }
.cati-ust-araclar #ses-metin { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cati-ust-araclar #ses-ac { min-height: 44px; padding: 8px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-foreground); font-size: 12px; }
.cati-ust-araclar #ses-ac:hover { background: var(--accent-hover); }
.cati-menu-tusu { display: none; }
.cati-daralt { display: none; }
/* Yan menuyu kapatan ok tusu (2026-09-18, kurucu): 1280 px'lik bir dizustunde menu 224 px yiyor
   ve siparis kolonlari daraliyordu. Kural YALNIZ genis ekranda gecerlidir: dar ekranda ayni yan
   menu bir cekmecedir ve `display: none` onu hic acilmaz yapardi. */
@media (min-width: 761px) {
  /* Ikon + KELIME (kurucu 2026-09-18: "bayiler bulamayabilir"): yalin ok isareti tus gibi
     okunmuyordu. Cerceve kalici, yazi rengi soluk degil; ust seritteki durum cipleriyle ayni
     kabuk (1 px cizgi + sakin zemin). */
  .cati-daralt {
    display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 6px;
    min-height: 44px; padding: 0 12px; background: var(--bg-primary);
    border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary);
  }
  .cati-daralt-ad { font-size: 13px; font-weight: 600; white-space: nowrap; }
  .cati-daralt:hover { border-color: var(--accent); color: var(--accent-emphasis); background: var(--accent-soft); }
  .cati-daralt svg { transition: transform .18s ease; }
  /* Tek degisken butun cerceveyi tasir: yan menu, yer tutucu serit, ust serit ve icerik
     paylarinin hepsi --cati-yan-genislik'e bakar (bkz. ilk boyama nobetcisi). */
  html.cati-yan-kapali { --cati-yan-genislik: 0px; }
  html.cati-yan-kapali .musteri-yan-menu { display: none; }
  html.cati-yan-kapali .cati-daralt svg { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cati-daralt svg { transition: none; }
}
body[data-musteri-cati] > main { margin-left: var(--cati-yan-genislik); max-width: none; min-width: 0; padding: 24px; container-type: inline-size; }
body[data-musteri-cati] > .uyari, body[data-musteri-cati] > .bilgi { margin-left: var(--cati-yan-genislik); }
.cati-atla { position: fixed; z-index: 50; top: 8px; left: 8px; transform: translateY(-200%); padding: 12px 16px; background: var(--bg-card); color: var(--text-primary); border: 2px solid var(--accent); border-radius: var(--radius-sm); }
.cati-atla:focus { transform: translateY(0); }
@container (max-width: 1180px) {
  body[data-musteri-cati] .satir { grid-template-columns: 48px 1fr auto auto; gap: 10px; }
  body[data-musteri-cati] .acts { grid-column: 2 / -1; }
  body[data-musteri-cati] .serit { grid-row: 1 / 3; width: 48px; }
}
@container (max-width: 760px) {
  body[data-musteri-cati] .satir { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 8px 10px 8px 0; }
  body[data-musteri-cati] .serit { grid-row: 1 / 5; width: 44px; }
  body[data-musteri-cati] .tim, body[data-musteri-cati] .tutar, body[data-musteri-cati] .acts { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  body[data-musteri-cati] { display: flex; flex-direction: column; }
  /* Mobil menu AKISTA acilan bir blok DEGIL, cekmecedir. Eskiden `position: static; order: 2`
     ile akisa giriyordu: menu acilinca arkasindaki sayfa oldugu gibi duruyor ve asagi
     kaydirilabiliyordu (kurucunun bildirdigi yapisal hata).
     Cekmece ust seridin (z 20) ve icerigin USTUNE biner ama alt sekme cubugunun (z 40) ALTINDA
     kalir: "Daha" tusu gorunur kalsin ve ayni tusla kapatilabilsin. Alt payi cubugun yuksekligi
     kadardir, yoksa son menu ogesi cubugun arkasinda kaliyordu. */
  .musteri-yan-menu {
    position: fixed; inset: 0; width: auto; z-index: 35; display: none; order: 2;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .cati-menu-acik .musteri-yan-menu { display: flex; }
  /* Cekmece acikken arkadaki sayfa kaydirilmaz: aksi halde parmak cekmecenin uzerinde
     kaydirirken arkadaki liste kayiyordu. Kilit HEM kokte hem govdede olmali -- sayfayi
     kaydiran oge <html>, yalniz govdeye konan kural kilitlemiyordu (olculdu: 800 px kaydi). */
  html.cati-menu-acik, body.cati-menu-acik { overflow: hidden; }
  .musteri-yan-menu .cati-marka { padding: 16px 18px 8px; }
  .musteri-yan-menu .gezinme { padding: 12px; gap: 12px; overflow-y: visible; }
  .cati-menu-alt { padding: 12px 18px; }
  body[data-musteri-cati]::before { display: none; }
  body[data-musteri-cati] > .ustbar { margin-left: 0; padding: 12px 16px; gap: 10px; min-height: 0; }
  .musteri-tepe { order: 1; margin-left: 0; }
  .musteri-tepe .ustbar { padding: 12px 16px; gap: 10px; }
  /* Ust "Menü" tusu mobilde GEREKSIZ: alt sekme cubugundaki "Daha" ayni yan menuyu aciyor.
     Iki tus ayni isi yapinca ustteki yalniz yer kapliyordu. */
  .cati-menu-tusu { display: none; }
  .cati-baslik { flex: 1; gap: 10px; flex-wrap: nowrap; }
  /* Marka suzgeci daralabilir olmali: "Hızlı ayar" cipi ayni satirda kalsin diye yeri o verir.
     Olculdu (375 px): suzgec 186 -> 155 px, baslik satiri TEK satir, tepe alani 229 -> 156 px. */
  .cati-baslik > #cati-marka-alani { flex: 1; min-width: 0; }
  .cati-baslik > #cati-marka-alani select { width: 100%; min-width: 0; }
  .cati-baslik h1 { font-size: 20px; white-space: normal; }
  /* Mobil ust alan (tasarim: Mobil.dc.html, "1 - Siparis kuyrugu"). Tasarimda ustte TEK satir
     baslik + sagda ses tusu, altinda TEK satirlik sakin ozet var. Uygulamada ise dort ayri cip
     alt alta sariyor, ustune bir de tam boy uyari bandi biniyordu: 375 px'lik ekranda icerik
     baslamadan once ekranin yarisi doluyordu.
     Cipler burada ozet SATIRINA doner: cerceve ve zemin kalkar, renk yalniz NOKTADA kalir
     (KARAR 11: durum her zaman nokta + kelime). Bilgi aynen durur, yer kaplamasi dusuyor. */
  .cati-ust-araclar {
    flex-basis: 100%; justify-content: flex-start; flex-wrap: nowrap; gap: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* `position: relative` ZORUNLU. Satirin icinde gorsel-gizli bir metin var (#ses-metin,
       `position: absolute`). Kap konumlandirilmamis olsaydi o metin kaydirma kabindan KACAR,
       en yakin konumlanmis ataya (sticky .musteri-tepe) gore yerlesir ve kirpilmazdi: satir
       nowrap oldugu icin statik konumu 640 px'e dusuyor ve BELGEYI 640 px'e genisletiyordu.
       Olculdu: belge 640 / ekran 375, #ses-metin sag kenari tam 640. Sayfa saga kayiyordu. */
    position: relative;
  }
  .cati-ust-araclar::-webkit-scrollbar { display: none; }
  .cati-ust-araclar:empty { display: none; }
  /* Cipler sarmalayicilarin ICINDE de olabilir (#saglik, #otomatik-onay-pili), bu yuzden
     secici dogrudan cocukla sinirli DEGIL. */
  .cati-ust-araclar > * { flex: none; display: inline-flex; align-items: center; min-height: 0; }
  .cati-ust-araclar > :empty { display: none; }
  .cati-ust-araclar .pill {
    min-height: 0; padding: 0; border: 0; background: none;
    font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
  }
  /* Ayirac cizgi degil, orta nokta: tasarimdaki "· " ile ayni. */
  .cati-ust-araclar > *:not(:first-child):not(.ses-bandi)::before {
    content: '·'; margin: 0 8px; color: var(--text-muted);
  }
  .cati-ust-araclar .pill.warn, .cati-ust-araclar .pill.bad { background: none; border: 0; }
  .cati-ust-araclar .pill.warn { color: var(--warning-text); }
  .cati-ust-araclar .pill.bad { color: var(--danger-text); }
  /* Ses tusu ozet satirinin parcasi degil: kendi dokunma hedefiyle sagda durur (>=44 px). */
  .cati-ust-araclar > .ses-bandi { margin-left: auto; padding-left: 12px; }
  /* Kurucu gecisi (2026-09-15): bu kural ses bandi GORUNURKEN dogruydu (bant `margin-left: auto`
     ile zaten sagda duruyor, ayrica ayirac istemiyoruz). Ama ses ACIKKEN bant `hidden` oluyor,
     yer kaplamiyor -- kural yine de eslesip ayiraci siliyordu ve "Otomatik onay kapalı" ile
     "Ses açık" BITISIK yaziliyordu. Artik yalniz bant GERCEKTEN duruyorken susturulur. */
  .cati-ust-araclar > .ses-bandi:not([hidden]) + .pill::before { content: none; }
  body[data-musteri-cati] > main { order: 3; margin-left: 0; width: 100%; padding: 16px; }
  body[data-musteri-cati] > .uyari, body[data-musteri-cati] > .bilgi { margin-left: 0; }
  /* Bant mobilde uc satira yayilip yarim ekran kapliyordu: metin bir satir, tuslar alt satirda
     tek tek. Artik metin ve tuslar AYNI satirda; metin gerekirse sarar ama tuslar kaymaz.
     Mesaj kisaltilmiyor -- "fisler basilmiyor" bayinin bilmesi gereken bir sey. */
  .seritler .uyari {
    gap: 8px; padding: 8px 14px; font-size: 12px; line-height: 1.35;
    flex-wrap: nowrap; align-items: center;
  }
  .seritler .uyari > span:first-child { flex: 1; min-width: 0; white-space: normal; }
  .seritler .uyari .spacer { display: none; }
  .seritler .uyari .btn-quiet, .seritler .uyari .baglanti {
    flex: none; min-height: 36px; padding: 6px 10px; font-size: 12px; white-space: nowrap;
  }
}
.cati-marka-alani select { min-height: 44px; max-width: 210px; width: 100%; padding: 8px 32px 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--bg-card); font: 500 13px var(--app-font); }
.cati-filtre-bilgi { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); font-size: 13px; }
.cati-filtre-bilgi .btn-quiet { margin-left: auto; align-self: center; }

body[data-musteri-cati] #gecmis-ana { grid-template-columns: minmax(0, 1fr); }

/* Siparis Kanban: ortak cati ve mevcut islem dugmeleri uzerinde dort sutun. */
body[data-siparis-kanban] { height: 100dvh; display: flex; flex-direction: column; }
body[data-siparis-kanban] .musteri-tepe { flex: none; }
body[data-siparis-kanban] > main { flex: 1; min-height: 320px; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; }
body[data-siparis-kanban] .cati-filtre-bilgi { margin-bottom: 0; padding: 8px 12px; flex: none; }
/* Bosluklar kurucu istegiyle daraltildi (2026-09-12): olculdu, eski hal panonun %13,7'sini
   bosluga harciyordu. Sutunlar arasi 12 -> 8, sutun dolgusu 10 -> 6, kart alaninin ust dolgusu
   10 -> 6. Kazanc 1024 px'lik panoda kart basina 11 px icerik genisligi. Dokunma hedeflerine
   dokunulmadi: kucultulen sey yalniz bosluk. */
.kanban-pano { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(244px, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 0; min-height: 320px; overflow-x: auto; padding-bottom: 4px; align-items: stretch; }
/* Kurucu notu (2026-09-18): "sutunlar arasi gereksiz bosluk var -- kaydirma cubugu, bosluk,
   sutun dolgusu, kart boslugu. O aralar cizgi gibi olsa." Sutun artik bir KUTU degil: zemini,
   cercevesi ve kose yuvarlamasi yok, komsusundan 1 px cizgiyle ayrilir. Olculdu (1280, menu
   kapali): kart icerik genisligi 239 -> 262 px. */
.kanban-sutun { display: flex; flex-direction: column; min-height: 280px; max-height: 100%; padding: 0 10px; background: transparent; }
.kanban-sutun:first-child { padding-left: 0; }
.kanban-sutun:last-child { padding-right: 0; }
.kanban-sutun + .kanban-sutun { border-left: 1px solid var(--border); }
/* Sutun basligi: ikon karesi + baslik + adet, altinda sutunun rengiyle 2 px cizgi. */
/* Kurucu gecisi (2026-09-15, tasarim): sutun basligi sarmiyordu, bu yuzden dar sutunda baslik
   (`min-width: 0`) kendi kelimesinden dar bir kutuya ezilip TASIYORDU -- "Hazırlanan" 71 px'lik
   kutuda 81 px yer kapliyor, rozetle carpismaya bir karakter kaliyordu. Baslik artik kendi
   kelimesinin altina inmez (`min-width: min-content`); sigmayan rozet/gecikme alt satira gecer. */
.kanban-sutun-baslik { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 2px 4px 8px; border-bottom: 2px solid var(--border); min-width: 0; }
.kanban-sutun-ikon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); font-size: 17px; background: var(--bg-card); color: var(--text-primary); }
.kanban-sutun.yeni .kanban-sutun-baslik { border-bottom-color: var(--accent); }
.kanban-sutun.yeni .kanban-sutun-ikon { background: var(--accent-soft); color: var(--accent-emphasis); }
.kanban-sutun.tamamlanan .kanban-sutun-baslik { border-bottom-color: var(--success); }
.kanban-sutun.tamamlanan .kanban-sutun-ikon { background: var(--success-soft); color: var(--success-text); }
/* Baslik tek satir: h2 gerekirse kisalir, sayac ve geciken alt satira inmez (kurucu notu 2026-09-17). */
.kanban-sutun-baslik h2 { font-family: var(--font-heading); font-weight: 800; font-size: var(--olcek-govde); line-height: 1.25; margin: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.kanban-adet { flex: none; }
.kanban-geciken-sayi { font-variant-numeric: tabular-nums; }
.kanban-adet { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 5px; border-radius: var(--radius-chip); background: var(--bg-card); border: 1px solid var(--border); font-size: var(--olcek-kucuk); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.kanban-sutun.yeni .kanban-adet { background: var(--accent-soft); color: var(--accent-emphasis); border-color: transparent; }
.kanban-sutun.tamamlanan .kanban-adet { background: var(--success-soft); color: var(--success-text); border-color: transparent; }
.kanban-geciken { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--olcek-kucuk); font-weight: 600; color: var(--danger-text); white-space: nowrap; }
/* Kaydirma cubugu ince ve sessiz (yan menudeki kuralla ayni): kalin gri cubuk sutunun
   kenarinda yama gibi duruyor ve karta 15 px yer kaybettiriyordu. `stable` kalir -- cubuk
   cikip girerken kartlar yerinden oynamasin. */
.kanban-kartlar { flex: 1; min-height: 0; padding: 8px 0 2px; overflow-y: auto; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.kanban-kartlar::-webkit-scrollbar { width: 6px; }
.kanban-kartlar::-webkit-scrollbar-track { background: transparent; }
.kanban-kartlar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.kanban-kartlar:hover::-webkit-scrollbar-thumb { background: var(--text-muted); }
.kanban-kartlar:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.kanban-bos { font-size: 13px; color: var(--text-muted); line-height: 1.7; padding: 12px 4px; margin: 0; }
/* Bos kuyrugun ikinci satiri (prototip) yalniz dar ekranda cikar. Varsayilan BURADA durmali:
   mobil blogun altina yazilmisti ve ayni ozgullukte sonra geldigi icin dar ekranda da
   gizli kaliyordu -- kural gorunuyordu ama hicbir sey gostermiyordu. */
.kanban-bos-aciklama { display: none; margin: 4px 0 0; color: var(--text-muted); font-size: var(--olcek-kucuk); }
.kanban-gecmis { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; color: var(--text-secondary); text-align: center; font-size: 11px; line-height: 1.6; text-decoration: none; }
.kanban-gecmis:hover { color: var(--accent); text-decoration: underline; }
/* Kurucu gecisi (2026-09-15, tasarim): `overflow-wrap: anywhere` idi ve kartlarda kelimeleri
   ORTASINDAN kiriyordu ("Kendi kuryen" -> "Kend / i / kury / en"). Sebep sarma degil OLCU:
   `anywhere` bir ogenin min-content genisligini TEK KARAKTERE indirir, yani flex/grid kardesi
   uzun bir metin (adres) oldugunda etiket bir harfe kadar ezilebilir. `break-word` ayni sarmayi
   yapar (tasma yok, uzun kodlar yine kirilir) ama min-content olcusunu DEGISTIRMEZ: en uzun
   kelime kadar yer garanti edilir. Tek satir, butun kartlar. */
/* Kurucu turu 2d (2026-09-18, "daha kompakt"): dolgu 12/14 -> 10/12, ic aralik 10 -> 6. Dolgu
   TEK degiskende: iptal bandi ve eylem bandi karti negatif kenarla asarken ayni degiskeni okur,
   uc yerde ayri sayi tutulmaz. */
body[data-siparis-kanban] .siparis-karti.satir { --kart-dolgu-x: 12px; --kart-dolgu-y: 10px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0 0 8px; padding: var(--kart-dolgu-y) var(--kart-dolgu-x); min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow); overflow: hidden; overflow-wrap: break-word; }
body[data-siparis-kanban] .siparis-karti.satir:last-child { margin-bottom: 0; }
/* Kapali kart (kurucu karari 2026-09-17): baslik, uyarilar, tek satir ozet, tutar ve eylemler gorunur;
   kalemler/not/teslimat basliga tiklayinca acilir. Durum data-acik ile tasinir (siparis-kanban.js). */
.siparis-karti .kanban-kart-baslik { cursor: pointer; border-radius: var(--radius-sm); }
.siparis-karti .kanban-kart-baslik:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Acma oku: 22 px cerceveli kutu icinde 14 px ikon; kapaliyken asagi, acikken yukari bakar. */
.kanban-kart-ok { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-secondary); font-size: 14px; }
.kanban-kart-ok svg { transform: rotate(90deg); transition: transform .15s ease; }
.siparis-karti[data-acik="1"] .kanban-kart-ok svg { transform: rotate(-90deg); }
.siparis-karti .kanban-kart-baslik:hover .kanban-kart-ok { border-color: var(--border-hover); color: var(--text-primary); }
.siparis-karti[data-acik="0"] .kanban-ayrinti-alani { display: none; }
.siparis-karti[data-acik="1"] .kanban-ozet { display: none; }
.kanban-ayrinti-alani { display: contents; }
.kanban-ozet { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 6px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
.kanban-ozet-kalemler { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-ozet-not { flex: none; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-chip); background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); white-space: nowrap; }
body[data-siparis-kanban] .siparis-karti.iptal { border-color: var(--danger); }
/* Iptal bandi kartin tepesinde tam genislik: negatif kenar bosluguyla kart dolgusunu asar. */
.kanban-iptal-bandi { margin: calc(-1 * var(--kart-dolgu-y)) calc(-1 * var(--kart-dolgu-x)) 0; padding: 8px var(--kart-dolgu-x); display: flex; align-items: center; gap: 8px; background: var(--danger); color: var(--danger-foreground); font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.kanban-iptal-metin { flex: 1; }
.kanban-iptal-saat { font-weight: 600; font-size: var(--olcek-kucuk); font-variant-numeric: tabular-nums; }
/* Kurucu turu 2b (2026-09-18): baslik 103 px'ti. Sebep SARMA DEGIL, sag ust blogun UC SATIR
   olmasiydi (sure / durum / ok). Durum kod satirina indi, blok tek satira dustu.
   Uc sutunlu izgara denendi ve OLCULDU: dar kolonda (kart 233 px) kimlik sutunu 83 px'e ezilip
   marka adi uc satira kiriliyor, baslik 139 px'e CIKIYORDU. Sarma kalir: yer daralinca alt
   satira inen sey METIN degil, kucuk zaman blogudur. Olculdu: 306 px kolonda 60 px (tek satir),
   250 px kolonda 70 px -- ikisi de eski 103'un altinda. */
/* KURUCU TASARIMI (2026-09-18, claude.ai/design "Kasa Kanban Kompakt"): baslik iki SABIT satir;
   hicbiri sarmaz, yer daralinca metin kirpilir. 1. satir: kare · marka adi · kod cipi · sure + ok.
   2. satir: "Platform · kod" · durum. */
.kanban-kart-baslik { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kanban-kart-satir1 { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: nowrap; }
/* Kare 36 -> 28 (olculdu 2026-09-18): kimlik sutunu 139 px'te kaliyor ve marka adi ikinci satira
   kiriliyordu; kare kuculunce 165 px olur ve baslik tek satirda kalir. Harfler 11 px'te okunur. */
.kanban-platform { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-input); font-family: var(--font-heading); font-size: 10px; font-weight: 800; letter-spacing: .02em; }
/* Platform kimlik rengi yalniz gercekten bagli platformda; yazi rengi temadan bagimsiz beyaz. */
.kanban-platform.trendyol { background: var(--pf-ty); color: var(--pf-yazi); }
/* Taban 130 -> 120: zaman blogu tek satira indikten sonra bile 289 px'lik kartta olcu sinirda
   kaliyor ve "9713 dk" gibi uzun bir surede blok alt satira dusuyordu (olculdu). Taban dusunce
   ucu tek satirda kalir; tek satirda zaten flex-grow ile bosluğu kimlik alir. */
.kanban-marka { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.kanban-marka .bname { font-family: var(--font-heading); font-weight: 800; font-size: 14px; line-height: 1.3; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-marka .kod, .kanban-marka .kanban-oto, body[data-siparis-kanban] .kanban-marka .rozet.test { flex: none; }
.kanban-marka .kod { background: var(--bg-input); border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--radius-chip); font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; }
body[data-siparis-kanban] .kanban-marka .rozet.test { align-self: center; margin: 0; padding: 1px 6px; font-size: 11px; background: transparent; border: 1px dashed var(--text-muted); color: var(--text-muted); }
.kanban-oto { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--success-text); }
/* Kod satiri: "Platform · kod" solda kirpilir, durum (nokta + kelime) sagda sabit. Sarmaz. */
.kanban-kod { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--olcek-kucuk); color: var(--text-muted); line-height: 1.5; }
.kanban-kod-metin { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kanban-kod .kanban-durum { flex: none; margin-left: auto; }
.kanban-kart-zaman { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; white-space: nowrap; text-align: right; }
.kanban-zaman { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kanban-ozet-kalemler strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.kanban-durum { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.kanban-durum .nokta { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.kanban-durum.yeni, .kanban-durum.hazirlaniyor { color: var(--accent-emphasis); }
.kanban-durum.hazir, .kanban-durum.tamamlanan { color: var(--success-text); }
.kanban-durum.iptal, .kanban-durum.diger { color: var(--danger-text); }
.kanban-gerekce, .kanban-uyari-metni { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: var(--olcek-kucuk); line-height: 1.45; border-radius: var(--radius-chip); background: var(--bg-input); color: var(--text-secondary); }
.kanban-uyari-metni { color: var(--danger-text); background: var(--danger-soft); font-weight: 700; }
.kanban-urunler { display: grid; gap: 8px; list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.kanban-urun { display: flex; gap: 8px; align-items: baseline; }
.kanban-urun strong { font-size: 13px; min-width: 22px; flex: none; font-variant-numeric: tabular-nums; }
.kanban-secenek { font-size: var(--olcek-kucuk); color: var(--text-muted); margin-top: 2px; }
.kanban-eksik { color: var(--danger-text); }
body[data-siparis-kanban] .siparis-karti .note { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--border); font-weight: 500; font-size: 13px; line-height: 1.5; padding: 8px 10px; background: var(--bg-input); color: var(--text-primary); border-radius: var(--radius-md); margin: 0; white-space: normal; }
body[data-siparis-kanban] .siparis-karti .note svg { margin-top: 3px; flex: none; color: var(--text-muted); }
.note-govde { min-width: 0; }
.kanban-teslimat { display: grid; gap: 4px; font-size: var(--olcek-kucuk); color: var(--text-muted); line-height: 1.5; padding-top: 8px; border-top: 1px solid var(--border); }
.kanban-teslimat-model, .kanban-teslimat-satiri { display: flex; align-items: flex-start; gap: 6px; }
.kanban-teslimat-model svg, .kanban-teslimat-satiri svg { flex: none; margin-top: 3px; }
/* Etiket ve adres AYRI flex ogesi DEGIL, tek metin blogudur: "Kendi kuryen · <adres>" normal bir
   cumle gibi sarar. Ayri oge olduklarinda flex ikisini birden ezip etiketi kiriyordu. */
.kanban-teslimat-metin { min-width: 0; }
.kanban-teslimat-model strong { font-weight: 600; color: var(--text-primary); }
/* Ikinci cizgi YOK: ozet satirinin ustunde zaten bir cizgi var; tutar onun altinda sakin durur. */
body[data-siparis-kanban] .siparis-karti .tutar { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0; padding: 2px 0 0; text-align: left; }
body[data-siparis-kanban] .siparis-karti .money { font: 800 15px var(--font-heading); font-variant-numeric: tabular-nums; flex: none; }
.kanban-odeme { display: inline-block; margin: 0; min-width: 0; padding: 3px 9px; border-radius: var(--radius-sm); font-size: var(--olcek-kucuk); font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-odeme.paid:not(.cash):not(.warn) { background: var(--success-soft); color: var(--success-text); border: 1px solid var(--success); }
/* Fis satiri ve eylemler kartin alt bandinda: ayri zemin, ust cizgi, tam genislik. */
body[data-siparis-kanban] .siparis-karti .acts { margin: 2px calc(-1 * var(--kart-dolgu-x)) calc(-1 * var(--kart-dolgu-y)); padding: 6px var(--kart-dolgu-x) 8px; width: auto; min-width: 0; gap: 6px; background: var(--bg-primary); border-top: 1px solid var(--border); }
body[data-siparis-kanban] .siparis-karti .acts button { border-width: 1px; font-size: 12px; min-height: 44px; min-width: 44px; padding: 8px 10px; white-space: normal; }
body[data-siparis-kanban] .siparis-karti .kabul-grubu { align-items: stretch; flex-wrap: wrap; gap: 6px; }
body[data-siparis-kanban] .siparis-karti .kabul-grubu .btn-go { flex: 1; }
body[data-siparis-kanban] .siparis-karti .eylem-ad { font-size: 13px; }
body[data-siparis-kanban] .siparis-karti .eylem-alt { font-size: 10px; }
body[data-siparis-kanban] .siparis-karti .ikincil-satir { flex-wrap: wrap; gap: 6px; }
/* Eylem satiri (kurucu tasarimi 2026-09-18): ana tus solda esner, fis tusu sagda. */
.eylem-satiri { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.eylem-satiri > .btn-go { flex: 1; }
.eylem-satiri > .locked { flex: 1; }
body[data-siparis-kanban] .siparis-karti .fis-satiri { flex: none; margin-left: auto; min-width: 0; }
body[data-siparis-kanban] .siparis-karti.tamamlanan .fis-satiri, body[data-siparis-kanban] .siparis-karti.tamamlanan .fis-tusu { width: 100%; }
/* Fis tusu durumu TASIR: nokta = basilmadi, tik = basildi; bekliyor/basiliyor/basilamadi kelime olarak. */
.fis-tusu { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 10px; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.fis-tusu .nokta { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.fis-tusu.warn { color: var(--warning-text); }
.fis-tusu.bad { color: var(--danger-text); border-color: var(--danger); }
.fis-tusu .fis-onay { color: var(--success-text); width: 13px; height: 13px; flex: none; }
body[data-siparis-kanban] .siparis-karti .locked { font-size: 11px; line-height: 1.6; }
.kanban-uyari-grubu { flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }
.kanban-uyari-grubu.iptal { border-color: var(--danger); color: var(--danger-text); }
.kanban-uyari-grubu.diger { border-color: var(--warning); color: var(--warning-text); }
.kanban-uyari-grubu summary { min-height: 44px; cursor: pointer; padding: 12px 16px; font-size: 12px; font-weight: 600; }
.kanban-uyari-listesi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding: 12px; max-height: 40dvh; overflow: auto; }
@media (max-width: 760px) {
  body[data-siparis-kanban] { height: auto; min-height: 100dvh; }
  body[data-siparis-kanban] > main { min-height: 0; padding: 16px; }
  .kanban-pano { display: grid; grid-template-columns: minmax(0, 1fr); overflow-x: auto; }
  /* Sutunlar alt alta: dikey ayirici cizgi anlamsiz olur, yan dolgu da gereksiz yer yer. */
  .kanban-sutun, .kanban-sutun:first-child, .kanban-sutun:last-child { padding-inline: 0; }
  .kanban-sutun + .kanban-sutun { border-left: 0; }
  .kanban-kartlar { overflow-y: visible; scrollbar-gutter: auto; }
  .kanban-uyari-listesi { grid-template-columns: minmax(0, 1fr); }
}

body[data-siparis-kanban] .siparis-karti .sure-paneli { grid-template-columns: minmax(0, 1fr); }
/* Fis satiri Reddet ile AYNI satirda kalir (kurucu 2026-09-18): `flex-basis: 100%` onu kendi
   satirina zorluyordu ve tus bandi 94 px oluyordu. Durum metni kisaldigi icin ucu de sigar
   (ekran-yardimci.js fisDurumuKisa); sigmazsa `flex-wrap` yine alt satira indirir. */
body[data-siparis-kanban] .siparis-karti .rozet { align-self: flex-start; }

/* Musteri panelindeki HER alan ayni: tarayici varsayilani (ornegin textarea'nin tek aralikli
   yazi tipi) sayfanin ortasinda yabanci duruyordu. Onay kutusu ve radyo disarida kalir. */
body[data-musteri-cati] input:not([type="radio"]):not([type="checkbox"]),
body[data-musteri-cati] select,
body[data-musteri-cati] textarea {
  font: inherit; min-height: var(--dokunma-min); padding: 10px 12px; max-width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text-primary);
}
body[data-musteri-cati] textarea { min-height: 84px; line-height: 1.5; resize: vertical; }

/* ---- Musteri paneli ortak sayfa sozlugu (musteri-sayfa.js) --------------------------------
   Sayfa basligi CATIDA cizilir; buradaki parcalar <main> icini standartlastirir. Renk ve olcu
   yalniz token'dan gelir; durum her zaman nokta + kelimedir. */
.sayfa-ustu { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.sayfa-aciklama { margin: 0; font-size: 14px; color: var(--text-muted); max-width: 80ch; }
/* Icerik genisligi tasarimla ayni: uzun tablolar ekranin tamamina yayilip okunmaz olmasin. */
body[data-musteri-cati] main.sayfa { max-width: 1180px; box-sizing: border-box; }
.sayfa-ustu-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sayfa-araclar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sayfa-araclar label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-secondary); }
.sayfa-araclar input, .sayfa-araclar select { min-height: var(--dokunma-min); }
.sayfa-tazele { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sayfa-zaman { font-size: var(--olcek-kucuk); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sayfa-tazele .btn-quiet { align-self: center; }

.olcu-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.olcu-kart { display: grid; gap: 4px; align-content: start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); min-width: 0; }
/* Bolum kartinin icindeki olcu kutusu golge tasimaz: kart zaten yuzeydir (tasarim kaynagi). */
.bolum-govde .olcu-kart { box-shadow: none; border-radius: var(--radius-md); }
.olcu-etiket { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.olcu-deger { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.olcu-alt { font-size: 13px; color: var(--text-muted); }

.bolum-kart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; align-content: start; min-width: 0; overflow: hidden; }
.bolum-basligi { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 16px; border-bottom: 1px solid var(--border); }
.bolum-basligi-metin { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bolum-basligi .aciklama { margin: 0; font-size: 13px; color: var(--text-muted); }
.bolum-basligi h2 { margin: 0; font-size: 18px; }
.bolum-basligi h3 { margin: 0; font-size: 16px; }
.bolum-eylem { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.bolum-eylem .btn-quiet { align-self: center; }
.bolum-govde { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 16px; }

.satir-kart { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border); min-width: 0; }
.satir-kart:first-child { border-top: 0; padding-top: 0; }
.satir-kart-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.satir-baslik { font-weight: 700; overflow-wrap: anywhere; }
.satir-meta { margin: 0; font-size: var(--olcek-kucuk); color: var(--text-muted); }
.satir-eylemler { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.satir-eylemler .btn-quiet { align-self: center; }

.durum-oge { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.durum-oge .nokta { width: 8px; height: 8px; border-radius: 999px; background: var(--text-muted); flex: none; }
.ton-iyi { color: var(--success-text); }
.ton-iyi .nokta { background: var(--success); }
.ton-dikkat { color: var(--warning-text); }
.ton-dikkat .nokta { background: var(--warning); }
.ton-kritik { color: var(--danger-text); }
.ton-kritik .nokta { background: var(--danger); }

.form-satiri { display: grid; gap: 6px; min-width: 0; }
.form-etiket { font-size: var(--olcek-etiket); font-weight: 600; }
.form-yardim { font-size: var(--olcek-kucuk); color: var(--text-muted); }
.form-satiri input, .form-satiri select, .form-satiri textarea { min-height: var(--dokunma-min); }

.bos-durum { padding: 24px 16px; display: grid; gap: 4px; justify-items: start; color: var(--text-muted); }
.bos-baslik { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: var(--olcek-govde); color: var(--text-primary); }
.bos-talimat { margin: 0; font-size: var(--olcek-etiket); max-width: 46ch; }
.hata-durumu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger-text); font-weight: 600; }
.hata-durumu .btn-quiet { align-self: center; }
/* Duz metin icindeki baglanti (ornek: kurye sayfasinda "ana sayfaya don"); tarayici mavisi degil, tema vurgusu. */
.metin-baglanti { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.yukleniyor { margin: 0; color: var(--text-muted); font-weight: 600; }

/* Dar ekran: tablo satiri etiketli karta doner. Hucrenin hangi sutun oldugu data-etiket'ten
   okunur; ek DOM dugumu uretilmez. */
@media (max-width: 760px) {
  .tablo-kutu .tablo, .tablo-kutu tbody, .tablo-kutu tr, .tablo-kutu td { display: block; width: 100%; }
  .tablo-kutu thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tablo-kutu tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--bg-card); }
  .tablo-kutu td { border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: baseline; }
  .tablo-kutu tr td:last-child { border-bottom: 0; }
  .tablo-kutu td::before { content: attr(data-etiket); flex: none; min-width: 96px; font-size: var(--olcek-kucuk); color: var(--text-muted); font-weight: 600; }
  .tablo-kutu td.sayisal { justify-content: flex-start; }
  .sayfa-tazele { margin-left: 0; }
}

.oran-satiri { display: grid; gap: 5px; }
.oran-ust { display: flex; align-items: baseline; gap: 10px; font-size: var(--olcek-etiket); }
.oran-ad { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.oran-deger { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.oran-cubuk { height: 8px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.oran-dolgu { display: block; height: 100%; background: var(--grafik-1); }

.durum-listesi { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Iki esit sutun: Gunler/Markalar ve kirilim kartlari (tasarim kaynagi: data-two). */
.ikili-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; min-width: 0; }
.ozet-sayi { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.kirilim-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.tablo-marka { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Tablo icindeki platform hucresi: kimlik karesi + ad (tasarim kaynagi Gecmis.dc.html). */
.platform-hucresi { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.platform-kare { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-secondary); font-family: var(--font-heading); font-weight: 800; font-size: 11px; }
.platform-kare.trendyol { background: var(--pf-ty); color: var(--pf-yazi); }
.platform-adi { font-size: 14px; white-space: nowrap; }
/* Bolum basligindaki kimlik karesi tablodakinden buyuktur (tasarim: storehead 36 px). */
.bolum-basligi > .platform-kare { width: 36px; height: 36px; border-radius: var(--radius-md); font-size: 13px; }
/* Kart icindeki alt bolum: ust cizgili blok, kendi basligi ve sayaci. */
.alt-bolum { display: grid; gap: 10px; margin: 0 -16px; padding: 14px 16px; border-top: 1px solid var(--border); }
.alt-bolum:first-child { border-top: 0; padding-top: 0; }
.alt-bolum-basligi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.alt-bolum-basligi h3 { margin: 0; font-size: 16px; }
.alt-bolum-sayac { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.alt-bolum-govde { display: grid; gap: 10px; min-width: 0; }
/* Iade kartinin baslik ozeti cerceveli bir cip olur (tasarim kaynagi Iadeler.dc.html). */
.bolum-eylem .iade-ozet { min-height: 36px; padding: 0 10px; border: 1px solid currentColor; border-radius: var(--radius-md); }
.alan-sayac { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; justify-self: end; }
.olcu-izgara.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.olcu-izgara.ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ozellik-satiri { margin: 0; }
/* Ayarlar ve yonetim kartlari: numarali baslik blogu + ayri govde (tasarim kaynagi Ayarlar.dc.html). */
.kart-basligi { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: -16px -16px 0; padding: 16px; border-bottom: 1px solid var(--border); }
.kart-basligi-metin { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kart-basligi-metin h2 { margin: 0; font-size: 18px; }
.kart-basligi-metin .aciklama { margin: 0; font-size: 13px; color: var(--text-muted); }
.kart-numara { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-emphasis); font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.kart-govde { display: grid; gap: 14px; min-width: 0; padding-top: 16px; }
.bolum-eylem .durum-oge { min-height: 36px; padding: 0 10px; border: 1px solid currentColor; border-radius: var(--radius-md); }
/* Yazilan yanit ve gonderim onizlemesi: sakin zeminli kutu (tasarim kaynagi Yorumlar.dc.html). */
.yanit-kutusu { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-input); font-size: 14px; }
.onizleme-kutusu { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-input); }
.onizleme-etiket { margin: 0; font-size: 13px; color: var(--text-muted); }
.onizleme-metin { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fis-hucresi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tablo-not { margin: 0; padding: 12px 16px 0; font-size: 13px; color: var(--text-muted); }
.tablo td.sayisal { white-space: nowrap; font-weight: 700; }
.tablo td.tek-satir { white-space: nowrap; }
.tablo-kutu .rozet.test { padding: 1px 6px; font-size: 12px; background: transparent; border: 1px dashed var(--text-muted); color: var(--text-muted); }
.fis-hucresi { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.urun-adi { display: grid; gap: 2px; min-width: 0; }
.urun-adi .aciklama { font-size: var(--olcek-kucuk); }

.yorum-govde { display: grid; gap: 8px; min-width: 0; }
.yorum-metni { margin: 0; overflow-wrap: anywhere; }
.yanit-formu { display: grid; gap: 8px; }
.yanit-formu textarea { min-height: 80px; width: 100%; }

/* ---- Mobil duzen ------------------------------------------------------------------------
   Alt sekme cubugu ve kuyruk cipleri YALNIZ dar ekranda gorunur; masaustunde pano dort
   sutunuyla aynen kalir. */
.alt-sekme { display: none; }
.kuyruk-cipleri { display: none; }
.kanban-pano[data-secili] > .kanban-sutun { display: flex; }

@media (max-width: 760px) {
  .alt-sekme {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    position: fixed; inset: auto 0 0 0; z-index: 40;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-card); border-top: 1px solid var(--border);
  }
  .alt-sekme-oge {
    min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; border: 0; border-radius: var(--radius-md); background: transparent;
    color: var(--text-muted); text-decoration: none; font: inherit; font-size: var(--olcek-kucuk);
  }
  .alt-sekme-oge[aria-current="page"] { color: var(--accent-emphasis); background: var(--accent-soft); font-weight: 700; }
  body[data-musteri-cati] { padding-bottom: 88px; }
  body[data-siparis-kanban] { padding-bottom: 0; }
  body[data-siparis-kanban] > main { padding-bottom: 88px; }

  .kuyruk-cipleri { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; }
  /* Kurucu (2026-09-18, mobil): cip zaten sutunun adini ve sayisini soyler; hemen altindaki sutun
     basligi ayni seyi tekrar edip 48 px yiyordu. Yalniz cipler ciziliyken gizlenir. */
  .kuyruk-cipleri ~ .kanban-pano .kanban-sutun-baslik { display: none; }
  .kuyruk-cipi {
    flex: none; min-height: var(--dokunma-min); padding: 0 16px; display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card);
    color: var(--text-primary); font: inherit; font-size: var(--olcek-etiket); font-weight: 700; white-space: nowrap;
  }
  .kuyruk-cipi[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-card); }
  .kuyruk-cipi-adet { font-variant-numeric: tabular-nums; font-weight: 600; opacity: .75; }
  /* Secili olmayan sutun dar ekranda gizlenir; icerigi DOM'da kalir (odak ve geri alma korunur). */
  .kanban-pano[data-secili="yeni"] > .kanban-sutun:not(.yeni),
  .kanban-pano[data-secili="hazirlaniyor"] > .kanban-sutun:not(.hazirlaniyor),
  .kanban-pano[data-secili="teslimat"] > .kanban-sutun:not(.teslimat),
  .kanban-pano[data-secili="tamamlanan"] > .kanban-sutun:not(.tamamlanan) { display: none; }
  /* Ana eylem mobilde 60 px (tasarim karari); ikincil eylemler 52 px.
     `.acts button` kurali (0,3,1) oldugu icin secici en az onun kadar guclu olmali; yoksa
     kart eylemleri masaustunun 44 px'inde kalir. */
  body[data-siparis-kanban] .siparis-karti .acts .btn-go,
  body[data-siparis-kanban] .siparis-karti .kabul-grubu .btn-go { min-height: var(--dokunma-ana); font-size: 17px; }
  body[data-siparis-kanban] .siparis-karti .acts .btn-quiet,
  body[data-siparis-kanban] .siparis-karti .acts .btn-neden,
  body[data-siparis-kanban] .siparis-karti .acts .btn-sure,
  body[data-siparis-kanban] .siparis-karti .neden-grubu .btn-neden,
  body[data-siparis-kanban] .siparis-karti .sure-paneli .btn-sure { min-height: 52px; }

  /* Bos kuyrukta prototipin ikinci satiri: kasiyer bos ekrana bakarken sistemin calistigini
     bilmeli. Masaustunde gizli kalir -- dort sutunlu panoda satir duzenini degistirmemek icin. */
  .kanban-bos-aciklama { display: block; }

  /* ALT SAYFA (mobil prototip, kurucu karari 2): sure ve red secimi dar ekranda alttan kayar.
     Panel AYNI DOM dugumudur, satir icindeki yerinden cikmaz -- odak koruma makinesi odagi
     `.satir` icinde arar; panel sayfa koklu bir yere tasinsaydi her yoklamada acik panelin
     odagi dusecekti. Alt sekme cubugunun (z-index 40) uzerinde, yeni siparis uyarisinin (45)
     altinda durur: yeni siparis daha aceledir. */
  body[data-siparis-kanban] .siparis-karti .sure-paneli,
  body[data-siparis-kanban] .siparis-karti .neden-grubu {
    position: fixed; inset: auto 0 0 0; z-index: 42;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
    border-width: 2px 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-alt-sayfa);
    /* Tek seferlik; sonsuz animasyon yasak (zayif kasa bilgisayari kurali). Azaltilmis hareket
       tercihinde ustteki genel kural bunu da kapatir. */
    animation: alt-sayfa-gir .2s ease-out;
  }
  body[data-siparis-kanban] .siparis-karti .sure-paneli .baslik,
  body[data-siparis-kanban] .siparis-karti .neden-grubu .baslik { font-size: var(--olcek-etiket); }
  /* Ana secimler alt sayfada da 60 px: prototipteki hedef boyu. */
  body[data-siparis-kanban] .siparis-karti .sure-paneli .btn-sure-secim,
  body[data-siparis-kanban] .siparis-karti .neden-grubu .btn-neden { min-height: var(--dokunma-ana); }
  /* Perde: arkadaki kartlara YANLISLIKLA dokunmayi engeller -- yogun kasada yanlis siparise
     basmak gercek bir risk. Tuzak DEGIL: Vazgec ve telefonun geri tusu paneli kapatir, odak
     serbest kalir. Ayri bir DOM dugumu yok; ::before zaten catinin ilk boyama seridinde. */
  body.alt-sayfa-acik::after {
    content: ''; position: fixed; inset: 0; z-index: 41; background: var(--perde);
  }
  /* Kaydirma kilidi: kaydiran ogenin kendisi <html>, yalniz body'e yazmak yetmiyor. */
  html.alt-sayfa-acik, body.alt-sayfa-acik { overflow: hidden; }
}
@keyframes alt-sayfa-gir { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Mobil siparis yuzeyleri: ayrinti bolumu ve yeni siparis uyarisi. Masaustunde ikisi de yok. */
.kart-ayrinti { display: none; }
.mobil-ayrinti { display: none; }
.yeni-siparis-uyarisi { display: none; }

@media (max-width: 760px) {
  .ikili-izgara, .kirilim-izgara { grid-template-columns: minmax(0, 1fr); }
  .olcu-izgara { grid-template-columns: 1fr 1fr; }
  .olcu-deger { font-size: 22px; }
  .bolum-basligi, .kart-basligi { flex-direction: column; align-items: stretch; }
  .bolum-eylem { margin-left: 0; }
  .kart-ayrinti { display: inline-flex; align-items: center; justify-content: center; min-height: var(--dokunma-min); width: 100%; margin-top: 8px; }
  /* Ayrinti acikken pano ve cipler gizlenir; DOM'da kalirlar (odak ve geri alma korunur). */
  #kuyruklar[data-ayrinti]:not([data-ayrinti=""]) > .kanban-pano,
  #kuyruklar[data-ayrinti]:not([data-ayrinti=""]) > .kuyruk-cipleri,
  #kuyruklar[data-ayrinti]:not([data-ayrinti=""]) > .kanban-uyari-grubu { display: none; }
  .mobil-ayrinti { display: grid; gap: 12px; }
  .mobil-ayrinti-ust { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
  .mobil-geri { min-width: var(--dokunma-min); min-height: var(--dokunma-min); font-size: 22px; line-height: 1; }
  .mobil-ayrinti-kimlik { display: grid; gap: 2px; min-width: 0; flex: 1; }
  .mobil-ayrinti-marka { font-family: var(--font-heading); font-size: var(--olcek-govde); font-weight: 800; }
  .mobil-ayrinti-kod { font-size: var(--olcek-kucuk); color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .mobil-ayrinti-durum { font-size: var(--olcek-kucuk); font-weight: 700; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning-text); white-space: nowrap; }

  .yeni-siparis-uyarisi {
    display: grid; gap: 16px; align-content: center; justify-items: center; text-align: center;
    position: fixed; inset: 0; z-index: 45; padding: 20px; background: var(--accent-soft);
  }
  .uyari-bas { display: grid; gap: 4px; }
  .uyari-baslik { margin: 0; font-family: var(--font-heading); font-size: var(--olcek-bolum); font-weight: 800; }
  .uyari-alt { margin: 0; color: var(--text-secondary); }
  .uyari-kart { display: grid; gap: 8px; width: 100%; max-width: 420px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-card); box-shadow: var(--shadow-popover); }
  .uyari-marka { font-family: var(--font-heading); font-size: var(--olcek-kart); font-weight: 800; }
  .uyari-kod { font-size: var(--olcek-kucuk); color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .uyari-kalemler { margin: 0; color: var(--text-secondary); }
  .uyari-tutar { font-family: var(--font-heading); font-size: var(--olcek-kart); font-weight: 800; font-variant-numeric: tabular-nums; }
  .uyari-eylemler { display: grid; gap: 8px; width: 100%; max-width: 420px; }
  .uyari-eylemler .btn-go { min-height: var(--dokunma-ana); font-size: 17px; }
  .uyari-eylemler .btn-quiet { min-height: 52px; align-self: stretch; justify-content: center; }
}

/* ---- Yonetim paneli catisi (yonetim/yonetim-cati.js) ------------------------------------
   Koyu antrasit yan menu + sicak calisma zemini. Dar ekranda menu yerini yatay serit alir. */
body[data-yonetim-cati] { background: var(--bg-primary); }
.yonetim-yan-menu {
  position: fixed; inset: 0 auto 0 0; width: 236px; z-index: 30; display: flex; flex-direction: column;
  background: var(--yan-menu); color: var(--yan-menu-yazi); border-right: 1px solid var(--yan-menu-cizgi);
}
.yonetim-marka { display: grid; gap: 2px; padding: 18px 18px 14px; border-bottom: 1px solid var(--yan-menu-cizgi); }
.yonetim-marka-ad { font-family: var(--font-heading); font-size: var(--olcek-govde); font-weight: 800; }
.yonetim-marka-alt { font-size: 11px; color: var(--yan-menu-soluk); letter-spacing: .06em; }
.yonetim-menu { display: grid; gap: 2px; padding: 12px; flex: 1; overflow-y: auto; align-content: start; }
.yonetim-menu-oge {
  display: flex; align-items: center; gap: 10px; padding: 10px; min-height: var(--dokunma-min);
  border-radius: var(--radius-md); color: var(--yan-menu-soluk); text-decoration: none; font-size: var(--olcek-etiket);
}
.yonetim-menu-oge:hover { background: var(--yan-menu-secili); color: var(--yan-menu-secili-yazi); }
.yonetim-menu-oge[aria-current="page"] { background: var(--yan-menu-secili); color: var(--yan-menu-secili-yazi); font-weight: 700; }
.yonetim-menu-ad { flex: 1; min-width: 0; }
.yonetim-menu-sayac { padding: 0 6px; border-radius: var(--radius-sm); background: var(--yan-menu-vurgu); color: var(--accent-foreground); font-size: var(--olcek-kucuk); font-variant-numeric: tabular-nums; }
.yonetim-menu-alt { padding: 12px; border-top: 1px solid var(--yan-menu-cizgi); display: grid; gap: 6px; }
.yonetim-profil { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-width: 0; }
.yonetim-avatar { width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: 700; background: var(--yan-menu-secili); border: 1px solid var(--yan-menu-cizgi); }
.yonetim-profil-metin { display: grid; gap: 2px; min-width: 0; font-size: var(--olcek-kucuk); }
.yonetim-profil-metin span { color: var(--yan-menu-soluk); }
.yonetim-menu-alt .kullanici-cubugu { display: grid; gap: 4px; font-size: var(--olcek-kucuk); }
/* Ad ve rol profil satirinda zaten yaziyor; kullanici cubugundaki tekrari gizle. */
.yonetim-menu-alt .kullanici-cubugu .kullanici { display: none; }
.yonetim-menu-alt .btn-tema, .yonetim-menu-alt .btn-quiet, .yonetim-menu-alt .baglanti {
  justify-content: flex-start; min-height: var(--dokunma-min); padding: 8px 10px;
  color: var(--yan-menu-soluk); background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-md); font-size: var(--olcek-etiket); text-align: left;
}
.yonetim-menu-alt .btn-tema:hover, .yonetim-menu-alt .btn-quiet:hover { background: var(--yan-menu-secili); color: var(--yan-menu-secili-yazi); }
.yonetim-profil .btn-tema { flex: none; padding: 6px 8px; font-size: var(--olcek-kucuk); }

.yonetim-tepe { position: sticky; top: 0; z-index: 20; margin-left: 236px; }
.ustbar.yonetim-ust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.yonetim-baslik-kap { min-width: 0; flex: 1; display: grid; gap: 2px; }
.yonetim-iz { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--olcek-kucuk); color: var(--text-muted); }
.yonetim-iz-baglanti { border: 0; background: none; padding: 0; font: inherit; font-size: var(--olcek-kucuk); color: var(--accent-emphasis); cursor: pointer; }
.yonetim-iz-ayrac { color: var(--border-hover); }
.yonetim-baslik { font-family: var(--font-heading); font-size: 22px; font-weight: 800; line-height: 1.2; }
.yonetim-ust-araclar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yonetim-serit { display: none; }
body[data-yonetim-cati] > main { margin-left: 236px; max-width: 1180px; padding: 24px; display: grid; gap: 20px; align-content: start; }

@media (max-width: 900px) {
  .yonetim-yan-menu { display: none; }
  .yonetim-tepe { margin-left: 0; }
  body[data-yonetim-cati] > main { margin-left: 0; padding: 14px; }
  .ustbar.yonetim-ust { padding: 12px 14px; }
  .yonetim-serit { display: flex; gap: 6px; overflow-x: auto; padding: 12px 14px 0; background: var(--bg-card); border-bottom: 1px solid var(--border); }
  .yonetim-serit-oge {
    flex: none; min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card);
    color: var(--text-primary); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .yonetim-serit-oge[aria-current="page"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-card); }
}

.olcu-baglanti { text-decoration: none; color: inherit; display: block; border-radius: var(--radius); }
.olcu-baglanti:hover .olcu-kart { border-color: var(--accent); }

/* Musteri ayrintisi: ozet satiri ve sekme seridi. */
.musteri-ozet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow); }
.musteri-ozet-ad { font-family: var(--font-heading); font-size: var(--olcek-kart); font-weight: 800; }
.musteri-ozet-alt { flex-basis: 100%; font-size: var(--olcek-kucuk); color: var(--text-muted); }
.sekme-serit { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.sekme {
  flex: none; min-height: var(--dokunma-min); padding: 0 14px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-secondary);
  font: inherit; font-size: var(--olcek-etiket); font-weight: 600; white-space: nowrap;
}
.sekme[aria-selected="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-card); }
.sekme-icerik { display: grid; gap: 20px; }

.musteri-ac-sonuc { display: grid; gap: 10px; justify-items: start; padding: 14px; border: 1px solid var(--success); border-radius: var(--radius-sm); background: var(--success-soft); }
.musteri-ac-baslik { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: var(--olcek-govde); }

/* Destek notu zaman cizelgesi: en eski ustte, ekip ici. */
.zaman-cizelgesi { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 10px; border-left: 2px solid var(--border); }
.zaman-oge { display: grid; gap: 2px; }
.zaman-damga { font-size: var(--olcek-kucuk); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.zaman-metin { margin: 0; overflow-wrap: anywhere; }

/* ---- Marka yazisi ---- */
.marka, .cati-marka, .yonetim-marka-ad { letter-spacing: -.025em; }
/* Wordmark tek parca: kapsayicisi flex olsa bile `paket` ile `bi` arasi acilmaz. */
.pb-logo { display: inline; white-space: nowrap; }
/* Cerceve ilk boyamada hazir; icini dolduran parcalar sert belirmesin diye kisa bir
   yumusama. Yer kaplamayi degistirmez, yalniz gorunurluk. */
.musteri-yan-menu .gezinme, .cati-menu-alt, .cati-ust-araclar { animation: cati-belir .28s ease both; }
@keyframes cati-belir { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .musteri-yan-menu .gezinme, .cati-menu-alt, .cati-ust-araclar { animation: none; }
}
.cati-marka { display: flex; align-items: center; gap: 9px; }
.cati-marka-isaret { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.pb-paket { color: var(--logo-paket); }
.pb-bi { color: var(--logo-bi); }
/* Koyu menude marka her zaman koyu zemin uzerindedir: tema ne olursa olsun acik varyant.
   Yonetim panelinin yan menusu de ayni koyu zemindir (--yan-menu, iki temada da koyu); override
   olmayinca acik temada "paket" murekkep rengiyle zemine karisiyor, menude yalniz "bi" gorunuyordu. */
.musteri-yan-menu .cati-marka .pb-paket, .yonetim-yan-menu .yonetim-marka .pb-paket { color: var(--logo-menu-paket); }
.musteri-yan-menu .cati-marka .pb-bi, .yonetim-yan-menu .yonetim-marka .pb-bi { color: var(--logo-menu-bi); }

/* ---- Sayfalar arasi gecis ---- */
/* Bu cok-sayfali bir uygulamadir: her baglanti gercek bir belge yuklemesidir. Tiklamadan sonra
   icerik alani ~240 ms bos kaliyordu -- olculdu: sayfa istegi 51 ms, /api/ben 196 ms'de biter,
   veri istekleri ancak 339 ms'de. Kullanici bunu "ekran bosaliyor sonra geliyor" diye goruyor.
   `navigation: auto` ile tarayici YENI belge boyamaya hazir olana kadar ESKI sayfayi ekranda
   tutar ve capraz gecisle degistirir; bos an ortadan kalkar. Veri daha hizli gelmez, ama
   kullanici bosluk gormez -- asil sikayet buydu.
   Destegi olmayan tarayici kurali yok sayar: davranis bugunkuyle ayni kalir, bozulma olmaz. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

/* ---- Acilis ---- */
/* Oturumda BIR KEZ gosterilir (marka-acilis.js sessionStorage ile karar verir). Perde hicbir
   zaman tiklamayi engellemez (pointer-events:none): kullanici animasyonu beklemek zorunda
   kalmasin. Sureler CSS'te durur; ekran kodunda sayisal sure sabiti yasak (KARAR §11) ve
   zamanlayici da yok -- perde kendi animationend'inde kaldirilir. */
.marka-acilis {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  background: var(--bg-primary); pointer-events: none;
  animation: marka-perde 1.5s ease forwards;
}
.marka-acilis img { width: 76px; height: 76px; border-radius: 17px; animation: marka-isaret .7s cubic-bezier(.2,.8,.2,1) both; }
.marka-acilis .marka-acilis-yazi {
  font-family: var(--font-heading); font-weight: 800; font-size: 30px; letter-spacing: -.025em;
  animation: marka-yazi .6s ease .25s both;
}
@keyframes marka-perde { 0%, 62% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes marka-isaret { 0% { opacity: 0; transform: scale(.82); } 100% { opacity: 1; transform: scale(1); } }
@keyframes marka-yazi { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  /* Hareket istemeyen kullaniciya perde hic acilmaz: marka-acilis.js bu tercihi okur ve
     perdeyi kurmaz. Buradaki kural yalniz emniyet kemeridir. */
  .marka-acilis { display: none; }
}

/* ---- Isletme: fiil kartlari izgarasi ---- */
/* Token adlari BILEREK kullanilmiyor (styles.css :root'ta --space-* token'lari VAR, orn.
   .kart-basligi onlari kullanir): mevcut izgaralar (.olcu-izgara) duz px kullanir, burada da
   ayni yapilir. */
.fiil-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; }
.fiil-kart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: grid; gap: 6px; min-width: 0; }
.fiil-kart.pasif { opacity: .6; }
.fiil-tus { display: block; width: 100%; min-height: var(--dokunma-min); text-align: left;
  font: inherit; font-weight: 700; background: transparent; color: var(--text-primary);
  border: 0; border-radius: var(--radius-md); cursor: pointer; }
.fiil-tus:disabled { cursor: default; color: var(--text-muted); }

/* ---- Ayarlar: kart izgarasi (Gorev 8) ---- */
/* Token adlari BILEREK kullanilmiyor (styles.css :root'ta --space-* token'lari VAR, orn.
   .kart-basligi onlari kullanir): mevcut izgaralar (.olcu-izgara, .fiil-izgara) duz px kullanir,
   burada da ayni yapilir. Kart icindeki tus AYRI bir sinif ACMAZ, .fiil-tus'u TEKRAR KULLANIR
   (ayni dokunma hedefi stili). */
.ayar-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; }
.ayar-kart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: grid; gap: 6px; min-width: 0; }

/* ---- Kasa: Hizli Ayar seridi (Gorev 12) ---- */
/* Token adlari BILEREK kullanilmiyor (styles.css :root'ta --space-* token'lari VAR, orn.
   .kart-basligi onlari kullanir): mevcut izgaralar (.olcu-izgara, .fiil-izgara, .ayar-izgara) duz
   px kullanir, burada da ayni yapilir. Serit ust barin hemen altinda, kanban satir duzenine
   (#kuyruklar) dokunmaz. */
/* Kurucu gecisi (2026-09-15, tasarim): eski duzende dugme yalniz ETIKETI tasiyor, DEGER
   dugmenin altinda ayri duruyordu -- ekranda uc bos kutu ile altlarinda bagimsiz uc yazi
   gorunuyordu, "Gizle" de kolonlardan kisa oldugu icin ortalanip hizasiz kaliyordu. Artik her
   kol TEK bir kutudur: kucuk etiket ustte, deger (nokta + kelime) altta, ikisi de dokunma
   hedefinin ICINDE. Gorsel dil Ayarlar izgarasindaki .ayar-kart ile AYNI -- ayni ise ayni
   gorunum. */
/* Serit ZEMINI sayfa zeminidir (--bg-primary), kutular --bg-card. Ikisi acik temada AYNI beyaz
   oldugu icin eski --bg-secondary zeminde kutular zeminden ayrilmiyor, yalniz cizgileri
   gorunuyordu. Sayfa zemini her iki temada da kart zemininden farklidir; kutular boylece
   kaldirilmis gorunur. */
.hizli-ayar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
  padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg-primary); }
.hizli-kol { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 24rem; }
.hizli-tus { display: grid; gap: 2px; justify-items: start; width: 100%;
  min-height: var(--dokunma-min); padding: 8px 12px; text-align: left; font: inherit;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); cursor: pointer; }
.hizli-tus:hover:not(:disabled) { border-color: var(--border-hover); }
.hizli-tus:disabled { cursor: default; opacity: .65; }
.hizli-etiket { font-size: 12px; font-weight: 600; color: var(--text-muted); }
/* Deger kolun ana bilgisidir: etiketten buyuk ve koyu. .durum-oge'nin kendi 14px'i her yerde
   ayni kalsin diye yalniz serit icinde buyutulur. */
.hizli-tus .durum-oge { font-size: 15px; }
.hizli-kol .aciklama { margin: 0; padding: 0 2px; }
/* Kurucu gecisi (2026-09-15, tasarim): serit gizliyken onu geri getiren tusun HICBIR kabi yoktu.
   Ekranin SOL KENARINA yapisik (x=0), tam agirlikta (2 px cerceve, 14 px/700) tek basina bir
   dugme olarak duruyordu -- mobilde en degerli yerde koca bir kutu. Artik seridin bandiyla ayni
   dolguda, "Gizle" ile AYNI yerde (saga dayali) ve daha sakin bir cip olarak durur: gizle/goster
   ayni noktada olur, duzen ziplamaz. Dokunma hedefi 44 px kalir. */
/* Kurucu gecisi (2026-09-15, tasarim): serit gizliyken onu geri getiren tus KENDI SATIRINDA,
   ekranin sol kenarina yapisik, tam agirlikta bir dugme olarak duruyordu -- 375 px'de icerik
   baslamadan once bir satir daha harciyordu. Artik baslik satirinin saginda, marka suzgecinin
   yaninda duran sakin bir cip (musteri-cati.js onu oraya tasir). Dokunma hedefi 44 px kalir.
   DENENDI VE VAZGECILDI: ust arac satiri (.cati-ust-araclar) dar ekranda YATAY KAYDIRICIDIR
   (overflow-x: auto); tus oraya konunca x=361'e, yani ekranin disina dusup kaydirilmadan
   gorunmuyordu. Gizlenen bir seyi geri getiren tusun kendisi gizli olamaz. */
.cati-baslik > #hizli-ayar-ac:not([hidden]) {
  flex: none; margin-left: auto; align-self: center;
  padding: 8px 12px; border-width: 1px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
/* Cati kurulmadan once tus govde cocugudur ve ILK BOYAMADA gorunmemeli (ustbar parcalariyla
   ayni kural). Cati onu baslik satirina tasiyinca yukaridaki kural devreye girer. */
body[data-musteri-cati] > #hizli-ayar-ac { display: none; }
/* Ayni tus ayni yerde kapatir (kurucu 2026-09-18): serit acikken tusun hali belli olur. */
#hizli-ayar-ac[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-emphasis); }

/* ---- Faz 6: kurye ekranlari ---- */
/* Harita kabi: SABIT yukseklik. Yuzde yukseklik Leaflet'e 0 piksel verir ve harita
   gorunmez olur; bu, harita kutuphaneleriyle en sik yasanan sessiz kusurdur.
   Yukseklik TEK degiskende durur: dar ekran (asagida, 760 px blogu) yalniz degiskeni degistirir --
   375 px'te 420 px'lik kutu ekranin cogunu yiyor, liste gorunmuyordu. */
.kurye-harita { --kurye-harita-yukseklik: 420px; height: var(--kurye-harita-yukseklik); border-radius: var(--radius-sm); overflow: hidden; }
@media (max-width: 760px) {
  .kurye-harita { --kurye-harita-yukseklik: 300px; }
}
/* Harita isaretcileri. Gorsel varlik (PNG) YOKTUR; Leaflet'in varsayilan isaretci resimleri
   kullanilmaz, daireler SVG olarak cizilir. Renkleri temadan BAGIMSIZ token'lardan gelir
   (:root icinde, gerekcesi orada). Renk TEK BASINA bilgi tasimaz: kurye adi kalici ipucunda
   her zaman yazili durur. */
.harita-kurye { stroke: var(--harita-kurye-cizgi); fill: var(--harita-kurye-dolgu); fill-opacity: .9; stroke-width: 3; }
.harita-hedef { stroke: var(--harita-hedef-cizgi); fill: var(--harita-hedef-dolgu); fill-opacity: 1; stroke-width: 3; }
.kurye-satir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border); }
.kurye-satir:last-child { border-bottom: 0; }
.kurye-ad { font-weight: 800; }
.kurye-ayrinti { color: var(--text-muted); font-weight: 600; }
.kurye-kutu { padding: 12px 0; border-bottom: 1px solid var(--border); display: grid; gap: 8px; }
.kurye-kutu:last-child { border-bottom: 0; }
/* Dokunma hedefi >= 44 px: kurye telefonu eldivenli elle, yol kenarinda kullanir. */
.kurye-tuslar { display: flex; gap: 10px; flex-wrap: wrap; }
.kurye-tuslar > * { min-height: 44px; }
.kurye-kod-kutusu { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 12px; display: grid; gap: 8px; }
/* Kod ELLE telefona yazilacak: buyuk, aralikli ve tek tek okunabilir. */
.kurye-kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; font-weight: 800; letter-spacing: 2px; word-break: break-all; }
.kurye-kurulum { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-secondary); font-weight: 600; }
/* Kurye sayfasi tek sutun ve dar: 375 px'te yatay kaydirma olmamali. */
.kurye-sayfa { max-width: 560px; }
/* Kuryenin ekraninin TEPESI isine aittir: adi ve Yenile. Tema ve Cikis nadiren kullanilir
   ve sayfanin altindadir -- 375 px'te ust cubugu iki satira dusuruyorlardi. */
.kurye-ust { display: flex; align-items: center; gap: 8px; }
.kurye-ust #kurye-ad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 18px; }
.kurye-ust > button { flex: none; }
.kurye-alt { display: flex; gap: 10px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border); }
.kurye-siparis .adres { font-size: 17px; font-weight: 700; }