:root{
  --kirmizi:#D6161E; --kirmizi-koyu:#B3121A; --kirmizi-acik:#FDEDED; --siyah:#141417; --metin:#1A1D21; --soluk:#5B6775;
  --zemin:#F3F4F6; --kart:#FFFFFF; --cizgi:#E5E8EC; --cerceve:#CBD2DA; --yesil:#1E7B4D; --yesil-acik:#E8F5EE; --sari:#B7791F; --sari-acik:#FFF6E0;
  --radius:12px; --golge:0 2px 10px rgba(20,20,23,.06);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--metin);background:var(--zemin);font-size:14px;line-height:1.4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Uygulama hissi (telefon): yakınlaştırma yok, metin seçimi yok, kenarda zıplama yok */
body.telefon{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
body.telefon input,body.telefon textarea{-webkit-user-select:text;user-select:text}
body.telefon .fis,body.telefon .fis *{-webkit-user-select:text;user-select:text}
a{color:var(--kirmizi-koyu)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{padding:11px 14px;border:1px solid var(--cerceve);border-radius:10px;background:#fff;width:100%;min-height:44px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--siyah);outline-offset:0;border-color:var(--siyah)}
input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--kirmizi)}
label.etiket{display:block;font-size:12px;color:var(--soluk);margin:0 0 4px}
.yukleniyor{padding:40px;text-align:center;color:var(--soluk)}
.gizli{display:none!important}
.sag{text-align:right}.orta{text-align:center}
.soluk{color:var(--soluk)}.kucuk{font-size:12px}.kalin{font-weight:600}.kirmizi{color:var(--kirmizi)}.yesil{color:var(--yesil)}
.satir{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.araboşluk{flex:1}
.sutun{display:flex;flex-direction:column;gap:10px}
.izgara{display:grid;gap:16px}
.izgara-2{grid-template-columns:repeat(2,minmax(0,1fr))}.izgara-3{grid-template-columns:repeat(3,minmax(0,1fr))}.izgara-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.izgara-4{grid-template-columns:repeat(2,minmax(0,1fr))}.izgara-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.izgara-4,.izgara-3{grid-template-columns:1fr 1fr;gap:10px}.izgara-2{grid-template-columns:1fr;gap:10px}.izgara-2:has(>.kpi){grid-template-columns:1fr 1fr}.izgara-2>.kart{min-width:0}}
.tablo.nowrap td,.tablo.nowrap th{white-space:nowrap}
.arama-satir{display:flex;gap:6px;flex:1 1 240px;min-width:0;flex-wrap:nowrap}.arama-satir>input{flex:1;min-width:0}
body.telefon .arama-satir{flex-basis:100%}
/* Taşma koruması: uzun adlar ve görseller kutuyu aşmasın */
.kart,.liste-kart,.pencere{min-width:0;overflow-wrap:anywhere}
img{max-width:100%}
.dugme{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Düğmeler */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;border:2px solid var(--siyah);background:#fff;color:var(--siyah);font-weight:700;cursor:pointer;min-height:44px;text-decoration:none;white-space:nowrap}
.dugme:hover{background:#F6F6F8}.dugme:disabled{opacity:.5;cursor:default}
.dugme.birincil{background:var(--kirmizi);border-color:var(--kirmizi);color:#fff}.dugme.birincil:hover{background:var(--kirmizi-koyu)}
.dugme.tehlike{border-color:var(--kirmizi);color:var(--kirmizi)}.dugme.tehlike:hover{background:var(--kirmizi-acik)}
.dugme.sade{border-color:transparent;background:transparent;font-weight:600}.dugme.sade:hover{background:#EDEEF1}
.dugme.kucuk{padding:6px 10px;font-size:12px;min-height:32px;border-width:2px}
.dugme.tam{width:100%}
.dugme.ikon{width:44px;padding:0;font-size:20px}

/* Kart, rozet, tablo */
.kart{background:var(--kart);border-radius:var(--radius);padding:18px;box-shadow:var(--golge)}
.kart h2{margin:0 0 12px;font-size:15px;font-weight:600}
.kpi .b{font-size:13px;color:var(--soluk)}.kpi .d{font-size:24px;font-weight:700;margin-top:4px}.kpi .a{font-size:12px;color:var(--soluk);margin-top:4px}
.rozet{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--yesil-acik);color:var(--yesil)}
.rozet.kirmizi{background:var(--kirmizi-acik);color:var(--kirmizi)}.rozet.gri{background:#E6E6EA;color:var(--siyah)}.rozet.siyah{background:var(--siyah);color:#fff}.rozet.sari{background:var(--sari-acik);color:var(--sari)}
.tablo-kutu{overflow-x:auto}
table.tablo{width:100%;border-collapse:collapse;font-size:13px}
.tablo th{text-align:left;padding:9px 8px;border-bottom:1px solid var(--cizgi);color:var(--soluk);font-size:12px;font-weight:600;white-space:nowrap}
.tablo td{padding:10px 8px;border-bottom:1px solid #F0F2F4;vertical-align:middle}
.tablo tr.tiklanir{cursor:pointer}.tablo tr.tiklanir:hover td{background:#F8F9FB}
.tablo td.sag,.tablo th.sag{text-align:right}.tablo td.orta,.tablo th.orta{text-align:center}
.kucuk-gorsel{width:44px;height:44px;border-radius:6px;object-fit:contain;background:#E5E8EC;flex-shrink:0}
.bos{padding:30px;text-align:center;color:var(--soluk)}

/* Düzen: PC */
.uyg{display:flex;min-height:100vh}
.yan-menu{width:220px;background:#fff;border-right:1px solid var(--cizgi);padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;flex-shrink:0}
.yan-menu .logo{padding:4px 8px 16px}.yan-menu .logo img{width:160px;display:block}
.yan-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--metin);text-decoration:none;font-weight:500}
.yan-menu a:hover{background:#F3F4F6}.yan-menu a.aktif{background:var(--kirmizi);color:#fff;font-weight:600}
.yan-menu .alt{margin-top:auto;font-size:12px;color:var(--soluk);padding:8px 12px;line-height:1.6}
.yan-menu .alt a{display:inline;padding:0;font-weight:500}
.icerik{flex:1;min-width:0;padding:22px 26px;display:flex;flex-direction:column;gap:16px}
.baslik-satir{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.baslik-satir h1{margin:0;font-size:22px;font-weight:700}
.baslik-satir .eylemler{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.baslik-satir .eylemler input,.baslik-satir .eylemler select{width:auto}

/* Düzen: telefon */
body.telefon .yan-menu{display:none}
body.telefon .icerik{padding:12px 14px 90px}
body.telefon .baslik-satir h1{font-size:18px;line-height:1.25;overflow-wrap:anywhere}
/* Telefonda başlık düğmeleri: eşit genişlikte ızgara, yamuk sarmalama yok */
body.telefon .baslik-satir .eylemler{margin-left:0;flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
body.telefon .baslik-satir .eylemler .dugme{width:100%;padding:10px 8px;white-space:normal;line-height:1.2;text-align:center}
body.telefon .baslik-satir .eylemler input,body.telefon .baslik-satir .eylemler select{width:100%}
/* Telefonda filtre satırı: alanlar satırı dengeli doldursun */
body.telefon .satir>select,body.telefon .satir>input:not([type=checkbox]):not([type=radio]){flex:1 1 140px!important;min-width:0;max-width:100%}
body.telefon .satir>.dugme.ikon{flex:0 0 44px}
body.telefon .kpi .d{font-size:22px}
body.telefon .kart{padding:14px}
body.telefon .tablo{font-size:12px}
body.telefon .tablo th,body.telefon .tablo td{padding:8px 6px}
.ust-bar{display:none}
body.telefon .ust-bar{display:flex;align-items:center;gap:10px;background:var(--siyah);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;position:sticky;top:0;z-index:5}
.ust-bar .geri{color:#fff;font-size:24px;line-height:1;text-decoration:none;padding:4px 8px}
.ust-bar .b{font-weight:700;font-size:16px;flex:1}
.ust-bar .durum{font-size:12px;color:#8FE0A8}
.alt-menu{display:none}
body.telefon .alt-menu{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--cizgi);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:5}
.alt-menu a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--soluk);text-decoration:none;padding:4px 0;min-height:44px;justify-content:center}
.alt-menu a.aktif{color:var(--kirmizi);font-weight:700}
.alt-menu .ik{font-size:20px}
.alt-sabit{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--cizgi);padding:12px 14px calc(12px + env(safe-area-inset-bottom));z-index:6;display:flex;flex-direction:column;gap:8px}
body.telefon .alt-sabit ~ .alt-menu{display:none}
body.telefon .alt-sabit-bosluk{height:120px}

/* Menü kutuları (telefon ana menü) */
.menu-kutu{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.menu-kutu a{background:#fff;border:1px solid #E3E3E8;border-radius:16px;padding:16px 14px;text-decoration:none;color:var(--metin);display:flex;flex-direction:column;gap:8px;min-height:96px}
.menu-kutu a.one{background:var(--kirmizi);border-color:var(--kirmizi);color:#fff}
.menu-kutu .ik{font-size:26px}.menu-kutu .b{font-weight:700;font-size:15px}.menu-kutu .a{font-size:12px;color:var(--soluk)}.menu-kutu a.one .a{color:#FFD9DB}

/* Giriş */
.giris{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#fff;padding:24px 16px}
.giris .kutu{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:28px}
.giris form{width:100%;border:1px solid #E3E3E8;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 10px 30px rgba(20,20,23,.08)}
.giris h1{margin:0;font-size:22px}

/* Bildirim, pencere */
#bildirimler{position:fixed;top:14px;right:14px;display:flex;flex-direction:column;gap:8px;z-index:50;max-width:min(380px,calc(100vw - 28px))}
.bildirim{background:var(--siyah);color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.2);font-weight:500;animation:gir .2s}
.bildirim.hata{background:var(--kirmizi)}.bildirim.basari{background:var(--yesil)}
@keyframes gir{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}
.perde{position:fixed;inset:0;background:rgba(20,20,23,.45);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}
.pencere{background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:92vh;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:14px}
.pencere.genis{max-width:860px}
.pencere h2{margin:0;font-size:18px}
body.telefon .perde{align-items:flex-end;padding:0}
body.telefon .pencere{border-radius:20px 20px 0 0;max-height:94vh}

/* Satış */
.sepet-satir{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #F0F2F4}
.adet{display:inline-flex;gap:4px;align-items:center}
.adet button{width:36px;height:36px;border-radius:8px;border:2px solid var(--siyah);background:#fff;font-weight:700;font-size:16px;cursor:pointer}
.adet span{min-width:28px;text-align:center;font-weight:700}
.odeme-sec{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.odeme-sec button.secili{background:var(--kirmizi-acik);border-color:var(--kirmizi);color:var(--kirmizi)}
.barkod-giris{border:2px solid var(--siyah);font-size:16px;padding:13px 14px}

/* Kamera */
.kamera{position:relative;background:#202026;border-radius:14px;overflow:hidden;height:220px}
.kamera video{width:100%;height:100%;object-fit:cover}
.kamera .cerceve{position:absolute;left:50%;top:50%;width:240px;height:110px;transform:translate(-50%,-50%);border:3px solid var(--kirmizi);border-radius:12px}
.kamera .cizgi{position:absolute;left:12%;right:12%;top:50%;height:2px;background:var(--kirmizi)}
.kamera .not{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:#E6E6EA;font-size:12px}

/* Fiş */
.fis{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;color:#000;background:#fff;padding:14px;width:300px;margin:0 auto}
.fis .cz{border-top:1px dashed #000;margin:6px 0}
.fis .s{display:flex;justify-content:space-between;gap:8px}
@media print{body{background:#fff}.yan-menu,.alt-menu,.ust-bar,.baslik-satir,.eylemler,#bildirimler,.yazdirma-gizle{display:none!important}.icerik{padding:0}.kart{box-shadow:none}}

/* Çubuk grafik */
.cubuklar{display:flex;align-items:flex-end;gap:4px;height:160px;border-bottom:1px solid var(--cizgi);padding-bottom:3px}
.cubuklar div{flex:1;background:var(--siyah);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.cubuklar div.bugun{background:var(--kirmizi)}
.cubuklar div:hover::after{content:attr(data-b);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--siyah);color:#fff;font-size:11px;padding:3px 6px;border-radius:4px;white-space:nowrap;margin-bottom:4px}
.sekmeler{display:flex;gap:4px;border-bottom:1px solid var(--cizgi);flex-wrap:wrap}
.sekmeler button{padding:10px 14px;border:0;background:none;font-weight:600;color:var(--soluk);border-bottom:2px solid transparent;cursor:pointer;min-height:44px}
.sekmeler button.aktif{color:var(--kirmizi);border-bottom-color:var(--kirmizi)}
.liste-kart{background:#fff;border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--metin);box-shadow:var(--golge)}
.liste-kart .orta-b{flex:1;min-width:0}
.liste-kart .b{font-weight:600}.liste-kart .a{font-size:12px;color:var(--soluk);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anahtar{width:44px;height:26px;border-radius:13px;background:var(--cerceve);position:relative;border:0;cursor:pointer;flex-shrink:0}
.anahtar::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.anahtar.acik{background:var(--kirmizi)}.anahtar.acik::after{left:21px}
.guncelleme-bandi{background:var(--sari-acik);color:var(--sari);padding:10px 14px;border-radius:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:600}