/* StokAkış — Apple "liquid glass" tasarım sistemi.
   Buzlu cam paneller, mesh arka plan, açık/koyu tema. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;

  /* Zemin ve mesh */
  --app-bg:#E7ECF4;
  --mesh-1:rgba(10,132,255,.30);
  --mesh-2:rgba(48,209,158,.24);
  --mesh-3:rgba(175,120,255,.22);
  --mesh-4:rgba(255,159,74,.16);

  /* Cam */
  --glass:rgba(255,255,255,.58);
  --glass-2:rgba(255,255,255,.72);
  --glass-brd:rgba(255,255,255,.75);
  --glass-edge:rgba(16,20,32,.08);
  --glass-shadow:0 10px 30px rgba(20,28,48,.12), 0 2px 6px rgba(20,28,48,.06);
  --hair:rgba(16,20,32,.09);

  /* Metin */
  --ink:#0F1420; --text:#28313F; --muted:#606B7C; --faint:#8A93A3;

  /* Vurgu / durum */
  --accent:#0A84FF; --accent-2:#0060DF; --accent-soft:rgba(10,132,255,.12);
  --good:#1FA971; --good-soft:rgba(31,169,113,.14);
  --warn:#C67C1B; --warn-soft:rgba(230,161,58,.16);
  --crit:#E5484D; --crit-soft:rgba(229,72,77,.14);
  --on-accent:#fff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --app-bg:#080A0F;
    --mesh-1:rgba(10,132,255,.34);
    --mesh-2:rgba(30,180,140,.24);
    --mesh-3:rgba(150,100,255,.26);
    --mesh-4:rgba(255,140,60,.14);
    --glass:rgba(26,31,42,.55);
    --glass-2:rgba(34,40,54,.66);
    --glass-brd:rgba(255,255,255,.12);
    --glass-edge:rgba(0,0,0,.5);
    --glass-shadow:0 16px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
    --hair:rgba(255,255,255,.09);
    --ink:#F4F6FB; --text:#D3D9E3; --muted:#9AA3B2; --faint:#6D7686;
    --accent:#0A84FF; --accent-2:#409CFF; --accent-soft:rgba(10,132,255,.20);
    --good:#32D29A; --good-soft:rgba(50,210,154,.16);
    --warn:#E7A54B; --warn-soft:rgba(231,165,75,.18);
    --crit:#FF6961; --crit-soft:rgba(255,105,97,.18);
  }
}
:root[data-theme="dark"]{
  --app-bg:#080A0F;
  --mesh-1:rgba(10,132,255,.34); --mesh-2:rgba(30,180,140,.24); --mesh-3:rgba(150,100,255,.26); --mesh-4:rgba(255,140,60,.14);
  --glass:rgba(26,31,42,.55); --glass-2:rgba(34,40,54,.66); --glass-brd:rgba(255,255,255,.12); --glass-edge:rgba(0,0,0,.5);
  --glass-shadow:0 16px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); --hair:rgba(255,255,255,.09);
  --ink:#F4F6FB; --text:#D3D9E3; --muted:#9AA3B2; --faint:#6D7686;
  --accent:#0A84FF; --accent-2:#409CFF; --accent-soft:rgba(10,132,255,.20);
  --good:#32D29A; --good-soft:rgba(50,210,154,.16); --warn:#E7A54B; --warn-soft:rgba(231,165,75,.18); --crit:#FF6961; --crit-soft:rgba(255,105,97,.18);
}

*{box-sizing:border-box}
/* [hidden] özniteliği, author CSS'te display tanımlıysa EZİLİR: tarayıcının
   [hidden]{display:none} kuralı düşük öncelikli. .sk-bulk gibi display:flex
   verilen kutular hidden olmasına rağmen görünüyordu — "0 sipariş seçili"
   çubuğu ekranda kalıp düğmeler tıklanabilir sanılıyordu. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.55; background:var(--app-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Mesh arka plan (sabit) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 12% 8%, var(--mesh-1), transparent 60%),
    radial-gradient(55% 50% at 92% 12%, var(--mesh-3), transparent 62%),
    radial-gradient(60% 60% at 78% 88%, var(--mesh-2), transparent 60%),
    radial-gradient(50% 50% at 20% 92%, var(--mesh-4), transparent 60%);
  filter:saturate(1.05);
}
h1,h2,h3,h4{margin:0; color:var(--ink); letter-spacing:-.015em; line-height:1.18; font-weight:700}
a{color:var(--accent); text-decoration:none}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
button{font-family:inherit}

/* ---- Cam yüzey ---- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(165%);
  backdrop-filter:blur(26px) saturate(165%);
  border:1px solid var(--glass-brd);
  border-radius:22px;
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---- Marka ---- */
.brand{display:inline-flex; align-items:center; gap:.6rem; font-weight:800; color:var(--ink); font-size:1.1rem; letter-spacing:-.03em}
.brand .glyph{
  width:2rem; height:2rem; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem; font-weight:800;
  background:linear-gradient(140deg,#0A84FF,#5E5CE6);
  box-shadow:0 4px 14px rgba(10,132,255,.4), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ================= GİRİŞ ================= */
.center-page{min-height:100dvh; display:grid; place-items:center; padding:1.2rem}
.auth-card{width:min(94vw,26rem); padding:2.3rem 2.1rem}
.auth-card .brand{font-size:1.4rem; margin-bottom:.15rem}
.auth-card .glyph{width:2.5rem; height:2.5rem; font-size:1.15rem}
.auth-sub{color:var(--muted); font-size:.92rem; margin:.5rem 0 1.7rem}
.seg{display:flex; gap:.3rem; background:var(--glass-2); border:1px solid var(--hair); border-radius:12px; padding:.25rem; margin-bottom:1.4rem}
.seg button{flex:1; border:none; background:transparent; color:var(--muted); font-weight:600; font-size:.9rem; padding:.5rem; border-radius:9px; cursor:pointer}
.seg button.active{background:var(--glass); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---- Form ---- */
.field{display:block; margin-bottom:1.05rem}
.field>span{display:block; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:.4rem}
.input{
  width:100%; padding:.72rem .9rem; font-size:1rem; font-family:inherit; color:var(--ink);
  background:var(--glass-2); border:1px solid var(--glass-edge); border-radius:12px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.input::placeholder{color:var(--faint)}
.input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
select.input{appearance:none; padding-right:2.4rem; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
/* İzin kutucukları ızgarası */
.perm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:.4rem; margin-top:.4rem}
.perm-grid label{display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; border:1px solid var(--glass-edge); border-radius:10px; background:var(--glass-2); cursor:pointer; font-size:.9rem; user-select:none}
.perm-grid input{width:1.05rem; height:1.05rem; accent-color:var(--accent); cursor:pointer}
@media (max-width:520px){.row2{grid-template-columns:1fr}}

/* ---- Butonlar ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.1rem; font-size:.95rem; font-weight:600; font-family:inherit; cursor:pointer;
  border:1px solid transparent; border-radius:12px; transition:filter .15s, transform .05s, background .15s;
  color:var(--on-accent);
  background:linear-gradient(180deg,#2B93FF,#0A84FF);
  box-shadow:0 4px 14px rgba(10,132,255,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55; cursor:default; filter:none}
.btn.block{width:100%}
.btn.ghost{background:var(--glass-2); color:var(--ink); border-color:var(--glass-edge); box-shadow:none}
.btn.ghost:hover{background:var(--glass); filter:none}
.btn.sm{padding:.42rem .7rem; font-size:.82rem; border-radius:9px}
.btn.danger{background:linear-gradient(180deg,#FF6B66,#E5484D); box-shadow:0 4px 14px rgba(229,72,77,.3)}

.msg{margin-top:.9rem; font-size:.9rem; min-height:1.2em}
.msg.error{color:var(--crit)} .msg.ok{color:var(--good)} .msg.warn{color:var(--warn)}
.fineprint{margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--hair); font-size:.82rem; color:var(--muted)}

/* ================= UYGULAMA KABUĞU ================= */
.shell{max-width:78rem; margin:0 auto; padding:1rem 1.1rem 4rem}
.topbar{
  position:sticky; top:.7rem; z-index:30; margin:.7rem auto 1.4rem; max-width:88rem;
  display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem;
}
.topbar .brand{margin-right:.3rem; flex:none}
/* Tek satır: taşarsa alta kırılmaz, görünmez şekilde yatay kayar. */
/* overflow YOK: overflow-x:auto verilince tarayici overflow-y'yi de auto yapar
   ve asagi acilan grup menusunu KIRPAR (menu aciliyor ama gorunmuyordu).
   Sekmeler gruplandigi icin tasma da kalmadi; daralinca alta sarar. */
.nav{display:flex; gap:.1rem; flex-wrap:wrap; min-width:0}
.nav button{
  border:none; background:transparent; color:var(--muted); font-weight:600; font-size:.86rem;
  padding:.45rem .62rem; border-radius:11px; cursor:pointer; transition:background .15s, color .15s;
  white-space:nowrap; flex:none;
}
.nav button:hover{color:var(--ink); background:var(--glass-2)}
.nav button.active{color:var(--accent-2); background:var(--accent-soft)}

/* Gruplanmis sekmeler: 15 sekme tek satira sigmiyordu. */
.navgrp{position:relative; flex:none}
.topbar{overflow:visible}
.navgrp-menu{
  position:absolute; top:calc(100% + .45rem); left:0; z-index:60;
  display:none; flex-direction:column; min-width:12.5rem; padding:.35rem;
  /* --card/--line bu projede TANIMSIZ; mevcut degiskenler kullanilir, aksi
     halde menu saydam kalip arkasindaki sayfa okunuyordu. */
  border-radius:14px; background:var(--app-bg); border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow, 0 12px 32px rgba(0,0,0,.18));
}
.navgrp.acik .navgrp-menu{display:flex}
.navgrp.acik > .navgrp-btn{color:var(--accent-2); background:var(--accent-soft)}
.navgrp-menu button{width:100%; text-align:left; padding:.5rem .7rem; border-radius:10px}
/* Grup icindeki secili sayfa isaretli kalsin */
.navgrp-btn.icerik-aktif{color:var(--accent-2); background:var(--accent-soft)}
.spacer{flex:1}
.who{display:flex; align-items:center; gap:.6rem; font-size:.86rem; color:var(--muted)}
.who b{color:var(--ink)}
.iconbtn{width:2.1rem; height:2.1rem; border-radius:11px; border:1px solid var(--glass-edge); background:var(--glass-2); color:var(--text); cursor:pointer; display:grid; place-items:center; font-size:.95rem}
.iconbtn:hover{color:var(--accent)}

.view{display:none; animation:rise .3s ease}
.view.active{display:block}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.view,.view.active{animation:none} }

.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 .3rem 1.2rem}
.page-head h1{font-size:1.75rem; font-weight:800; letter-spacing:-.03em}
.page-head .sub{color:var(--muted); font-size:.92rem; margin-top:.15rem}
.stamp{font-size:.78rem; color:var(--faint)}

/* ---- KPI ---- */
/* 6 kart TEK SATIR. Eskiden minmax(12rem,1fr) ile auto-fit vardi: 6x12rem
   genis ekranda bile sigmayip sonuncu karti alta dusuruyordu. Sabit 6 sutun
   + min-width:0 ile kartlar birlikte daralir, satir bolunmez. */
.kpis{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.8rem; margin-bottom:1.3rem}
.kpis > .kpi{min-width:0}
/* Dar ekranda once 3'e, sonra 2'ye iner (alt alta yigilmaz) */
@media (max-width:1200px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
.kpi{padding:1rem 1.1rem; position:relative; overflow:hidden}
.kpi .lab{font-size:.78rem; font-weight:600; color:var(--muted)}
.kpi .val{font-size:1.9rem; font-weight:800; color:var(--ink); margin-top:.25rem; line-height:1; letter-spacing:-.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi .foot{font-size:.76rem; color:var(--faint); margin-top:.4rem}
.kpi .orb{position:absolute; right:-16px; top:-16px; width:70px; height:70px; border-radius:50%; filter:blur(6px); opacity:.5; background:var(--accent)}
.kpi.good .val{color:var(--good)} .kpi.good .orb{background:var(--good)}
.kpi.warn .val{color:var(--warn)} .kpi.warn .orb{background:var(--warn)}
.kpi.crit .val{color:var(--crit)} .kpi.crit .orb{background:var(--crit)}

/* ---- Panel ---- */
/* align-items:start sag sutunu kisa birakip altinda bosluk biraktiriyordu.
   stretch ile iki sutun ayni yuksekligi paylasir, hizalar tutar. */
.grid{display:grid; grid-template-columns:1.5fr 1fr; gap:1.1rem; align-items:stretch}
.grid > .panel{display:flex; flex-direction:column}
.grid > .panel > .panel-body{flex:1; min-height:0}
/* Iki sutunun IC yuksekligi de esitlensin. "Son hareketler" bir TABLO ve
   basligi (th) var; yanindaki liste kutusunda baslik satiri YOK. Ayni sayida
   satir (8) olmasina ragmen sol taraf bir baslik satiri kadar uzun kaliyor ve
   alt kenarlar kayiyordu. Govde asagi yayilir, son satir alta yaslanir. */
.grid > .panel > .panel-body > table{height:100%}
.grid > .panel > .panel-body > table tr:last-child td{border-bottom:none}
@media (max-width:860px){.grid{grid-template-columns:1fr}}
.panel{padding:0; overflow:hidden}
/* Sabit yukseklik: bazi basliklarda dugme var ("Tumunu gor"), bazilarinda
   yalniz yazi. Dugme satiri basligi sisirip yan yana duran iki kutunun alt
   kenarini kaydiriyordu. min-height ile iki baslik ayni yukseklikte durur;
   dolgu dikeyde kisildi ki dugmeli baslik da tasmasin. */
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.7rem 1.2rem; min-height:3.6rem; box-sizing:border-box; border-bottom:1px solid var(--hair)}
.panel-head h2{font-size:1.05rem; font-weight:700}
.panel-head .meta{font-size:.78rem; color:var(--faint)}
.panel-body{padding:.3rem 0}
/* Panel gorseli: listeler bittiginde alt bosluk iki sutunda ESIT kalsin */
.grid > .panel > .panel-body:last-child{padding-bottom:.3rem}

/* ---- Pazaryeri kartları ---- */
.mkt-list{display:grid; gap:.9rem; padding:1.2rem}
.mkt-card{display:flex; align-items:center; gap:1rem; padding:1.1rem; border:1px solid var(--hair); border-radius:16px; background:var(--glass-2); flex-wrap:wrap}
.mkt-logo{width:2.7rem; height:2.7rem; border-radius:13px; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.9rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.mkt-logo.ty{background:linear-gradient(140deg,#FB8C2E,#EF5A0F)}
.mkt-logo.hb{background:linear-gradient(140deg,#FF7A1A,#E4520A)}
.mkt-main{flex:1; min-width:11rem}
.mkt-main .n{font-weight:700; color:var(--ink); font-size:1rem}
.mkt-main .s{font-size:.82rem; color:var(--muted)}
.status{display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:700}
.status .d{width:.55rem; height:.55rem; border-radius:50%}
.status.off{color:var(--faint)} .status.off .d{background:var(--faint)}
.status.on{color:var(--good)} .status.on .d{background:var(--good); box-shadow:0 0 0 4px var(--good-soft)}
.status.pending{color:var(--warn)} .status.pending .d{background:var(--warn); box-shadow:0 0 0 4px var(--warn-soft)}
.mkt-actions{display:flex; gap:.5rem}

/* ---- Tablo ---- */
.table-wrap{overflow-x:auto}

/* Buybox tablosu: derli toplu — ilk sütun kısaltılır, girişler kompakt, sığmazsa temiz kayar */
#buybox-wrap .result-count, #hbBbBody .result-count{padding:.2rem .9rem .6rem}
#buybox-wrap table, #hbBbBody table{min-width:900px}
#buybox-wrap th, #buybox-wrap td, #hbBbBody th, #hbBbBody td{white-space:nowrap}
#buybox-wrap td:first-child, #hbBbBody td:first-child{max-width:22rem; white-space:normal}
#buybox-wrap td:first-child b, #hbBbBody td:first-child b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:21rem}
#buybox-wrap input.input, #hbBbBody input.input{width:6rem; padding:.45rem .6rem; font-size:.85rem; border-radius:10px; text-align:right; font-variant-numeric:tabular-nums}
#buybox-wrap input.input::-webkit-outer-spin-button,#buybox-wrap input.input::-webkit-inner-spin-button,#hbBbBody input.input::-webkit-outer-spin-button,#hbBbBody input.input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#buybox-wrap th, #buybox-wrap td, #hbBbBody th, #hbBbBody td{white-space:nowrap; vertical-align:middle}

/* Ürün tablosu: uzun adlar tabloyu taşırıp sağdaki butonları kesmesin */
#prod-wrap td:nth-child(2){max-width:30rem}
#prod-wrap .prow > div{min-width:0}
#prod-wrap .pname{display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom}
#prod-wrap table{min-width:880px}

/* Ürün Kartları ızgarası */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.9rem}
.pcard{background:var(--glass); border:1px solid var(--glass-edge); border-radius:14px; overflow:hidden; display:flex; flex-direction:column}
.pcard-img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--glass-2)}
/* Görseli olmayan ya da yüklenemeyen kart: kırık ikon yerine sade yer tutucu.
   Eskiden yalnız arka plan veriliyordu; başarısız <img> yine de tarayıcının
   kırık ikonunu çiziyordu. Artık <img> yerine bu <div> basılıyor. */
.pcard-img.noimg{background:var(--glass-2); display:grid; place-items:center}
.pcard-img.noimg::after{content:"📦"; font-size:2rem; opacity:.3}
.pcard-b{padding:.6rem .7rem; display:flex; flex-direction:column; gap:.25rem}
.pcard-n{font-weight:600; font-size:.88rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcard-f{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; margin-top:.15rem}
@media (max-width:640px){ .card-grid{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.6rem} }
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{text-align:left; padding:.65rem 1.2rem; border-bottom:1px solid var(--hair); white-space:nowrap}
th{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:700}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--glass-2)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.pill{display:inline-block; font-size:.68rem; font-weight:700; padding:.14rem .5rem; border-radius:999px; letter-spacing:.02em}
.pill.in{background:var(--good-soft); color:var(--good)}
.pill.out{background:var(--crit-soft); color:var(--crit)}
.pill.adjust{background:var(--warn-soft); color:var(--warn)}
.pill.muted{background:var(--glass-2); color:var(--muted)}
/* Karşılaştırma raporu renkleri: yeşil=uygun, kırmızı=eksik, turuncu=fazla */
#compare-wrap tr.cmp-ok td{background:var(--good-soft)}
#compare-wrap tr.cmp-short td{background:var(--crit-soft)}
#compare-wrap tr.cmp-over td{background:var(--warn-soft)}
#compare-wrap .fk-ok{color:var(--good); font-weight:800}
#compare-wrap .fk-short{color:var(--crit); font-weight:800}
#compare-wrap .fk-over{color:var(--warn); font-weight:800}
.prow{display:flex; align-items:center; gap:.7rem}
.thumb{width:44px; height:44px; border-radius:10px; object-fit:cover; flex:none; background:var(--glass-2); border:1px solid var(--hair); box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.thumb.sm{width:38px; height:38px; border-radius:9px}
.thumb.noimg{visibility:hidden}
.pname{font-weight:600; color:var(--ink)}
a.pname{cursor:pointer; transition:color .12s}
a.pname:hover{color:var(--accent)}
a.pname.link::after{content:"↗"; font-size:.72em; margin-left:.28rem; color:var(--faint); vertical-align:super}
a.pname.link:hover::after{color:var(--accent)}
.mbadge{display:inline-block;font-size:.58rem;font-weight:800;padding:.06rem .32rem;border-radius:5px;color:#fff;margin-left:.35rem;vertical-align:middle;letter-spacing:.02em}
.mbadge.ty{background:linear-gradient(135deg,#FB8C2E,#EF5A0F)}
.mbadge.hb{background:linear-gradient(135deg,#0F63C8,#0B4EA0)}
/* Rozetler artik link: her pazaryerine kendi rozetinden gidiliyor. */
a.mbadge{text-decoration:none; cursor:pointer; transition:transform .12s ease, filter .12s ease}
a.mbadge:hover{transform:translateY(-1px); filter:brightness(1.12)}
.mst{display:inline-block;font-size:.72rem;font-weight:700;padding:.14rem .5rem;border-radius:7px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mst.ty{background:var(--warn-soft);color:var(--warn)}
.mst.hb{background:rgba(255,96,0,.14);color:#E4520A}
.mst.total{background:var(--accent-soft);color:var(--accent-2);font-size:.86rem;padding:.16rem .55rem}
.mst-bd{font-size:.72rem;color:var(--muted);margin-left:.35rem;white-space:nowrap;font-variant-numeric:tabular-nums}
:root:not([data-theme="light"]) .mst.hb, :root[data-theme="dark"] .mst.hb{color:#FF8A4C}
.pmeta{font-size:.75rem; color:var(--faint); font-variant-numeric:tabular-nums}
.chan{font-size:.8rem; color:var(--muted)}
.stockcell{font-weight:700; font-variant-numeric:tabular-nums}
.stockcell.zero{color:var(--crit)} .stockcell.low{color:var(--warn)}

.low-item{display:flex; align-items:center; gap:.8rem; padding:.6rem 1.2rem; border-bottom:1px solid var(--hair)}
/* Son satirin alt cizgisi paneli bir piksel uzatip iki kutunun alt kenarini
   kaydiriyordu. Ayrica satir yuksekligi sabitlenir: soldaki listede sira
   numarasi, sagdakinde "tukendi" rozeti var; ikisi ayni yukseklikte dursun. */
.low-item:last-child{border-bottom:none}
.low-item{min-height:3.4rem; box-sizing:border-box}
.low-item:last-child{border-bottom:none}
.low-item .nm{flex:1; min-width:0}
.low-item .nm b,.low-item .nm .pname{display:block; color:var(--ink); font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.low-item .nm small{color:var(--faint); font-size:.74rem; font-variant-numeric:tabular-nums}
.qty{font-weight:800; font-size:.95rem; padding:.15rem .6rem; border-radius:9px; font-variant-numeric:tabular-nums}
.qty.zero{background:var(--crit-soft); color:var(--crit)}
.qty.low{background:var(--warn-soft); color:var(--warn)}

/* ---- Boş durum ---- */
.empty{padding:2.6rem 1.4rem; text-align:center; color:var(--muted)}
.empty .ic{font-size:2.1rem; opacity:.6}
.empty h3{margin:.6rem 0 .3rem; color:var(--ink); font-size:1.05rem}
.empty p{margin:0 auto .9rem; max-width:26rem; font-size:.9rem}

.bulkbar{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;margin:0 .3rem 1rem;border-radius:12px}
.rowsel,.selall{width:1.1rem;height:1.1rem;accent-color:var(--accent);cursor:pointer}

/* ---- Filtre çubuğu ---- */
.filters{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:0 .3rem 1rem}
.chips{display:flex; gap:.35rem; flex-wrap:wrap}
.chip{border:1px solid var(--glass-edge); background:var(--glass-2); color:var(--muted); font-family:inherit; font-size:.84rem; font-weight:600; padding:.4rem .8rem; border-radius:999px; cursor:pointer; transition:all .12s; display:inline-flex; align-items:center; gap:.4rem}
.chip:hover{color:var(--ink); border-color:var(--accent)}
.chip.active{background:var(--accent); color:#fff; border-color:transparent; box-shadow:0 3px 10px rgba(10,132,255,.28)}
.chip b{font-weight:700; font-variant-numeric:tabular-nums; opacity:.85; font-size:.78rem}
.chip.active b{opacity:1}
.input.sm{padding:.42rem .7rem; font-size:.85rem; border-radius:10px; max-width:12rem; width:auto}
/* Küçük select'te ok yazıya binmesin: sağ boşluğu artır (specificity .input.sm'i geçer) */
select.input.sm{padding-right:2.1rem; min-width:7.5rem}
.result-count{font-size:.82rem; color:var(--faint); margin-left:auto; font-variant-numeric:tabular-nums}
#clearFilters{margin-left:0}

/* ---- Araç çubuğu (ürünler) ---- */
.toolbar{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:0 .3rem 1rem}
.toolbar .search{flex:1; min-width:12rem; position:relative}
.toolbar .search .input{padding-left:2.2rem}
.toolbar .search::before{content:"⌕"; position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--faint); font-size:1.1rem}

/* ---- Modal ---- */
.overlay{position:fixed; inset:0; z-index:60; background:rgba(10,14,22,.4); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:1.2rem}
.overlay.open{display:flex}
.modal{width:min(94vw,32rem); max-height:90dvh; overflow:auto; padding:1.5rem 1.6rem}
.modal.wide{width:min(94vw,40rem)}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem}
.modal-head h3{font-size:1.2rem; font-weight:800}
.modal .hint{font-size:.84rem; color:var(--muted); margin:.2rem 0 1rem}
.modal-actions{display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.3rem}
.chk-row{display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .85rem; border:1px solid var(--hair); border-radius:11px; margin-bottom:.6rem; cursor:pointer; background:var(--glass-2)}
.chk-row input{margin-top:.15rem; width:1.15rem; height:1.15rem; accent-color:var(--accent); flex:none}
.chk-row span{font-size:.9rem; color:var(--text)}
.chk-row b{color:var(--ink)}

/* ---- Toast ---- */
.toasts{position:fixed; z-index:80; right:1rem; bottom:1rem; display:flex; flex-direction:column; gap:.6rem}
.toast{padding:.8rem 1rem; min-width:15rem; max-width:24rem; font-size:.9rem; color:var(--ink); border-left:3px solid var(--accent); animation:rise .25s ease}
.toast.ok{border-left-color:var(--good)} .toast.err{border-left-color:var(--crit)}
.toast b{display:block; color:var(--ink)}
.toast small{color:var(--muted)}

.switch{position:relative;display:inline-block;width:3.1rem;height:1.7rem;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;cursor:pointer;background:var(--glass-2);border:1px solid var(--hair);border-radius:999px;transition:.2s}
.switch .slider::before{content:"";position:absolute;height:1.25rem;width:1.25rem;left:.2rem;top:.16rem;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked+.slider{background:var(--good);border-color:transparent}
.switch input:checked+.slider::before{transform:translateX(1.35rem)}
.scan-ok{background:var(--good-soft); border:1px solid var(--good); border-radius:12px; padding:.7rem .9rem}
.scan-ok .prow{align-items:center}
.scan-ok b{color:var(--ink)}
.scan-count{margin-left:auto; font-size:1.8rem; font-weight:800; color:var(--good); font-variant-numeric:tabular-nums}
.scan-err{background:var(--crit-soft); border:1px solid var(--crit); border-radius:12px; padding:.7rem .9rem; color:var(--crit); font-size:.92rem}
.quick-add{background:var(--warn-soft); border:1px solid var(--warn); border-radius:12px; padding:.9rem 1rem}
.qa-head{color:var(--warn); font-weight:600; font-size:.9rem; margin-bottom:.7rem}
.qa-head .mono{color:var(--ink)}
.qa-grid{display:flex; flex-wrap:wrap; gap:.6rem; align-items:end}
.qa-grid .field{margin:0; flex:1; min-width:8rem}
.qa-grid .field:first-child{flex:2.2; min-width:12rem}
.qa-grid button{align-self:end; white-space:nowrap}
textarea.input{min-height:8rem; resize:vertical; font-family:ui-monospace,Menlo,monospace; font-size:.85rem}
.kbd{font-variant-numeric:tabular-nums; font-family:ui-monospace,Menlo,monospace; font-size:.82rem; background:var(--glass-2); border:1px solid var(--hair); border-radius:6px; padding:.05em .4em; color:var(--accent-2)}
.foot-note{margin-top:1.6rem; text-align:center; font-size:.82rem; color:var(--faint)}

/* ==================== DUYARLI: TABLET & TELEFON ==================== */

/* iOS odakta otomatik yakınlaşmayı önle (girişler ≥16px) + momentum kaydırma */
@media (max-width:820px){
  .input, select.input, textarea.input{ font-size:16px; }
  .table-wrap{ -webkit-overflow-scrolling:touch; }
}

/* ---- Tablet (≤900px) ---- */
@media (max-width:900px){
  .shell{ padding:.8rem .8rem 3rem; }
  .topbar{ margin:.5rem auto 1rem; padding:.55rem .7rem; gap:.5rem; }
  .grid{ grid-template-columns:1fr; }
}

/* ---- Telefon (≤640px) ---- */
@media (max-width:640px){
  .shell{ padding:.6rem .7rem 3.4rem; }

  /* Üst bar: satır 1 = marka + tema/çıkış; satır 2 = kaydırılabilir menü */
  .topbar{ flex-wrap:wrap; row-gap:.45rem; top:.4rem; margin:.4rem .4rem .9rem; padding:.5rem .6rem; border-radius:16px; }
  .topbar .brand{ font-size:1rem; margin-right:auto; }
  .who, .spacer{ display:none; }
  .nav{ order:3; width:100%; flex-wrap:wrap; gap:.2rem; padding-bottom:.1rem; }
  .nav button{ flex:none; white-space:nowrap; padding:.5rem .8rem; }
  .iconbtn{ width:2.4rem; height:2.4rem; font-size:1.05rem; }

  /* Sayfa başlığı */
  .page-head{ margin:0 .1rem 1rem; gap:.5rem; }
  .page-head h1{ font-size:1.4rem; }
  .page-head .sub{ font-size:.85rem; }

  /* KPI: 2'li ızgara */
  .kpis{ grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:1rem; }
  .kpi{ padding:.85rem .9rem; }
  .kpi .val{ font-size:1.7rem; }
  .kpi .lab{ font-size:.72rem; }
  .kpi .foot{ font-size:.7rem; }

  /* Araç / filtre / toplu çubukları — tam genişlik akış */
  .toolbar, .filters, .bulkbar{ margin:0 .1rem .8rem; gap:.5rem; }
  .toolbar .search{ min-width:100%; order:-1; }
  .toolbar > .btn, .toolbar .input.sm{ flex:1; }
  .input.sm{ max-width:none; }
  .chips{ width:100%; }
  .chip{ flex:1; justify-content:center; }
  .result-count{ width:100%; margin-left:0; text-align:right; }

  /* Tablolar: dar padding, dokunuşa uygun butonlar */
  th, td{ padding:.55rem .7rem; }
  table{ font-size:.87rem; }
  .thumb{ width:38px; height:38px; }
  .thumb.sm{ width:34px; height:34px; }
  .btn.sm{ padding:.5rem .7rem; font-size:.8rem; }

  /* Liste / kart padding */
  .panel-head{ padding:.85rem 1rem; }
  .mkt-list{ padding:.8rem; gap:.7rem; }
  .mkt-card{ padding:.9rem; gap:.7rem; }
  .mkt-main{ min-width:100%; }
  .mkt-actions{ width:100%; }
  .mkt-actions .btn{ flex:1; }
  .low-item{ padding:.6rem .8rem; }

  /* Depo Sayımı okutma alanı: barkod tam genişlik, adet+ekle altta */
  #scanForm{ gap:.5rem; }
  #scanInput{ min-width:100% !important; font-size:1.1rem; }
  #scanQty{ flex:1; }
  #scanForm > .btn{ flex:1; }
  .qa-grid .field{ min-width:100%; flex:auto; }
  .qa-grid button{ flex:1; }
  .scan-count{ font-size:1.5rem; }

  /* Modal: alt sayfa (bottom-sheet) hissi, butonlar tam genişlik */
  .overlay{ padding:.7rem; align-items:flex-end; }
  .modal, .modal.wide{ width:100%; max-height:88dvh; padding:1.2rem 1.1rem; border-radius:20px; }
  .modal-actions{ flex-direction:column; gap:.5rem; }
  .modal-actions .btn{ width:100%; }
  .chk-row{ padding:.8rem; }

  /* Toast: tam genişlik */
  .toasts{ left:.6rem; right:.6rem; bottom:.6rem; }
  .toast{ min-width:0; max-width:none; }

  /* Fatura kalem satırı: açıklama tam satır, miktar/fiyat/kdv altta akar */
  .inv-line{ flex-wrap:wrap; }
  .inv-line [data-f="desc"]{ flex:1 1 100%; }
  .inv-line [data-f="qty"]{ flex:1 1 3rem; width:auto; }
  .inv-line [data-f="price"]{ flex:2 1 5rem; width:auto; }
  .inv-line [data-f="kdv"]{ flex:1 1 3rem; width:auto; }

  /* Sayfa başlığındaki eylem butonları: tam genişlik, dokunmatik */
  .page-head > .btn{ width:100%; }
  .head-actions{ width:100%; display:flex; }
  .head-actions .btn{ flex:1; }

  /* Buybox: geniş tablo yatay kayar; hücreler daralmasın */
  #buybox-wrap table, #hbBbBody table{ min-width:640px; }
  #buybox-wrap input.input, #hbBbBody input.input{ padding:.4rem .45rem; }
}

/* ---- Çok dar (≤380px) ince ayar ---- */
@media (max-width:380px){
  .kpi .val{ font-size:1.5rem; }
  .nav button{ padding:.45rem .65rem; font-size:.85rem; }
  .page-head h1{ font-size:1.3rem; }
}

/* Çoklu liste stok hizalama modalı */
.gs-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr)); gap:.6rem; margin:.2rem 0 1rem}
.gs-stat{background:var(--glass-2); border:1px solid var(--hair); border-radius:.7rem; padding:.7rem .8rem}
.gs-stat b{display:block; font-size:1.35rem; font-weight:800; line-height:1.1}
.gs-stat span{font-size:.76rem; color:var(--muted)}
.gs-stat.up b{color:var(--good)}
.gs-stat.down b{color:var(--warn)}
.gs-warn{display:flex; gap:.6rem; align-items:flex-start; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.35);
  border-radius:.7rem; padding:.7rem .8rem; margin-bottom:1rem; font-size:.84rem; line-height:1.45}
.gs-warn .ic{font-size:1.1rem; line-height:1}
.gs-table{width:100%; border-collapse:collapse; font-size:.84rem}
.gs-table th{position:sticky; top:0; background:var(--glass-2); text-align:left; font-weight:700; font-size:.74rem;
  color:var(--muted); padding:.5rem .7rem; border-bottom:1px solid var(--hair)}
.gs-table td{padding:.45rem .7rem; border-bottom:1px solid var(--hair)}
.gs-table td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem}
.gs-table .to{font-weight:800}
.gs-table .up .to{color:var(--good)}
.gs-table .down .to{color:var(--warn)}
.gs-more{padding:.6rem .7rem; font-size:.8rem; color:var(--muted)}


/* ===== Panel zenginleştirmeleri ===================================== */

/* Senkron sağlığı şeridi */
.healthbar{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  padding:.7rem 1.15rem; margin-bottom:1rem; border-radius:16px}
.healthbar:empty{display:none}
.hb-item{display:flex; align-items:center; gap:.55rem; min-width:0}
.hb-item b{display:block; font-size:.85rem; color:var(--ink); font-weight:650; line-height:1.25}
.hb-item small{display:block; font-size:.74rem; color:var(--faint); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:22rem}
.dot{width:9px; height:9px; border-radius:50%; flex:none; background:var(--faint)}
.dot.ok{background:var(--good); box-shadow:0 0 0 3px var(--good-soft)}
.dot.warn{background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft)}
.dot.err{background:var(--crit); box-shadow:0 0 0 3px var(--crit-soft)}
.hb-spacer{flex:1; min-width:0}
.hb-note{font-size:.78rem; font-weight:600; padding:.28rem .65rem; border-radius:999px;
  background:var(--glass-2); color:var(--muted); cursor:pointer; border:1px solid var(--hair)}
.hb-note.warn{background:var(--warn-soft); color:var(--warn); border-color:transparent}
.hb-note.err{background:var(--crit-soft); color:var(--crit); border-color:transparent}

/* KPI: satış kartları ve tıklanabilir stok kartları */
.kpi.sale .val{color:var(--accent)} .kpi.sale .orb{background:var(--accent)}
.kpi[data-stock]{cursor:pointer; transition:transform .14s ease, box-shadow .14s ease}
.kpi[data-stock]:hover{transform:translateY(-2px);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px var(--accent-soft)}
.kpi .foot .delta{font-weight:700; font-variant-numeric:tabular-nums}
.kpi .foot .delta.up{color:var(--good)} .kpi .foot .delta.down{color:var(--crit)}

/* Üst üste gelen grid satırları + eşit sütun düzeni */
.grid + .grid{margin-top:1.1rem}
/* .even ARTIK AYRI ORAN KULLANMAZ. Ust bloklar 1.5fr/1fr iken bu blok
   1fr/1fr idi: panelde alt alta duran kutularin dikey kenarlari birbirini
   tutmuyor, sayfa kayik gorunuyordu. Tum bloklar ayni sutun orani. */
.grid.even{grid-template-columns:1.5fr 1fr}
@media (max-width:860px){.grid.even{grid-template-columns:1fr}}

/* Panel başlığındaki araçlar (okuma + metrik seçici) */
.head-tools{display:flex; align-items:center; gap:.7rem; min-width:0}
.head-tools .meta{white-space:nowrap; font-variant-numeric:tabular-nums}
.seg{display:inline-flex; background:var(--glass-2); border:1px solid var(--hair);
  border-radius:999px; padding:2px}
.seg button{border:0; background:none; font:inherit; font-size:.76rem; font-weight:600;
  color:var(--muted); padding:.24rem .7rem; border-radius:999px; cursor:pointer}
.seg button.active{background:var(--accent); color:var(--on-accent)}

/* Satış grafiği (bağımlılıksız inline SVG) */
.chart{padding:1rem 1.1rem .5rem}
.chart svg{display:block; width:100%; height:auto}
.chart .gridline{stroke:var(--hair); stroke-width:1}
.chart .bar{fill:url(#barGrad); transition:opacity .12s ease}
.chart:hover .bar{opacity:.4}
.chart .col:hover .bar{opacity:1}
.chart .hit{fill:transparent; cursor:pointer}
.chart .axis{fill:var(--faint); font-size:11px; font-family:var(--font)}
.chart .peak{fill:var(--muted); font-size:11px; font-weight:600; font-family:var(--font)}

/* HB buybox tablosu, Trendyol tablosunun stillerini AYNEN paylasir (yukarida
   secicilere #hbBbBody eklendi). Once yalniz #buybox-wrap'a bagliydi; bu yuzden
   HB tablosunda sayi kutulari eziliyor ve "1220" yalnizca "1" gorunuyordu. */

/* Pazaryeri kırılımı (grafiğin altı) */
.split{display:flex; gap:1.4rem; flex-wrap:wrap; padding:.7rem 1.2rem 1rem;
  border-top:1px solid var(--hair)}
.split:empty{display:none}
.split .s-item{display:flex; align-items:baseline; gap:.45rem; font-size:.8rem}
.split .s-item .k{font-weight:650; color:var(--ink)}
.split .s-item .v{color:var(--muted); font-variant-numeric:tabular-nums}

/* Aksiyon kuyruğu */
.act-item{display:flex; align-items:center; gap:.8rem; width:100%; text-align:left;
  font:inherit; color:inherit; cursor:pointer; padding:.72rem 1.2rem;
  background:none; border:0; border-bottom:1px solid var(--hair)}
.act-item:last-child{border-bottom:none}
.act-item:hover{background:var(--glass-2)}
.act-item:disabled{cursor:default}
.act-item:disabled:hover{background:none}
/* .thumb bir <span> de olabilir (görseli olmayan satır) — kutu yine yer tutar. */
span.thumb{display:inline-block}
.act-item .ic{width:34px; height:34px; border-radius:10px; flex:none; display:grid;
  place-items:center; font-size:1rem; background:var(--glass-2); color:var(--muted)}
.act-item.crit .ic{background:var(--crit-soft); color:var(--crit)}
.act-item.warn .ic{background:var(--warn-soft); color:var(--warn)}
.act-item.good .ic{background:var(--good-soft); color:var(--good)}
.act-item .tx{flex:1; min-width:0}
.act-item .tx b{display:block; font-size:.89rem; font-weight:600; color:var(--ink)}
.act-item .tx small{display:block; font-size:.75rem; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.act-item .n{font-size:.95rem; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink)}
.act-item.crit .n{color:var(--crit)} .act-item.warn .n{color:var(--warn)}
.act-item.good .n{color:var(--good)}
.act-item .go{color:var(--faint); font-size:1rem; flex:none}

/* Sıralı listeler: en çok satanlar / tükenmek üzere */
.rank{width:1.35rem; flex:none; text-align:center; font-size:.82rem; font-weight:800;
  color:var(--faint); font-variant-numeric:tabular-nums}
.qty.sold{background:var(--accent-soft); color:var(--accent)}
.days{font-size:.72rem; font-weight:700; padding:.16rem .5rem; border-radius:999px;
  white-space:nowrap; background:var(--warn-soft); color:var(--warn)}
.days.zero{background:var(--crit-soft); color:var(--crit)}
.days.calm{background:var(--good-soft); color:var(--good)}

@media (max-width:640px){
  .healthbar{gap:.8rem; padding:.6rem .85rem}
  .hb-item small{max-width:12rem}
  .chart{padding:.7rem .6rem .3rem}
}

/* ---------- Sürat Kargo barkodu ---------- */
.modal .hint.warnhint{ color:var(--warn); background:var(--warn-soft); border-radius:10px; padding:.55rem .7rem }
.modal .check{ display:flex; align-items:center; gap:.55rem; margin:.2rem 0 .5rem; font-size:.9rem; cursor:pointer }
.modal .check input{ width:1rem; height:1rem; accent-color:var(--accent) }

/* Ortam rozeti: CANLI gerçek kargo kaydı oluşturur — göze batmalı. */
.stamp.env-canli{ background:var(--crit-soft); color:var(--crit); font-weight:800 }
.stamp.env-test{ background:var(--good-soft); color:var(--good); font-weight:700 }

.sk-bulk{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--accent-soft); border:1px solid var(--glass-edge); border-radius:14px;
  padding:.6rem .9rem; margin-bottom:.7rem; font-size:.88rem; font-weight:600 }
.sk-bulk-actions{ display:flex; gap:.5rem; flex-wrap:wrap }

.sk-flags{ display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.25rem }
.sk-engel{ color:var(--crit); font-size:.76rem; margin-top:.25rem; max-width:20rem }
.sk-row-actions{ display:flex; gap:.35rem; justify-content:flex-end; flex-wrap:wrap }
.sk-check{ width:1.05rem; height:1.05rem; accent-color:var(--accent); cursor:pointer }
tr.sk-blocked{ opacity:.62 }

/* Aynı alıcıya birden çok sipariş: birleştirilemez, yan yana hazırlanır. */
.sk-same{ background:var(--warn-soft); color:var(--warn); font-size:.68rem; font-weight:700;
  padding:.14rem .5rem; border-radius:999px; white-space:nowrap }

/* Etiket önizleme */
.zpl-body{ display:flex; gap:1.1rem; align-items:flex-start; flex-wrap:wrap }
.zpl-canvas{ flex:0 0 auto; background:#fff; border-radius:12px; padding:.6rem;
  box-shadow:var(--glass-shadow); line-height:0 }
.zpl-canvas svg{ display:block; width:19rem; height:19rem }
.zpl-canvas img{ display:block; width:19rem; height:auto; border-radius:4px }
.zpl-side{ flex:1 1 15rem; min-width:14rem }
.zpl-meta{ margin:0 0 .9rem; font-size:.84rem }
.zpl-meta div{ display:flex; justify-content:space-between; gap:.8rem; padding:.28rem 0;
  border-bottom:1px solid var(--hair) }
.zpl-meta dt{ color:var(--muted) } .zpl-meta dd{ margin:0; font-weight:600; text-align:right; word-break:break-all }
.zpl-actions{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.8rem }
.zpl-actions .field{ margin:0 }
.zpl-actions .btn{ justify-content:center; text-align:center; text-decoration:none }
@media (max-width:640px){ .zpl-canvas svg, .zpl-canvas img{ width:min(78vw,19rem); height:auto } }

/* Yazdırma ajanı kutusu (Sürat ayarları içinde) */
.agent-box{ border:1px solid var(--glass-edge); background:var(--glass-2); border-radius:14px;
  padding:.85rem 1rem; margin:.2rem 0 1rem }
.agent-box h4{ margin:0 0 .35rem; font-size:.95rem }
.agent-box .hint{ margin:.2rem 0 .6rem !important }
.agent-conf{ background:var(--app-bg); border:1px solid var(--hair); border-radius:10px;
  padding:.6rem .75rem; margin:0 0 .55rem; font-size:.76rem; line-height:1.5;
  overflow-x:auto; white-space:pre; font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
.agent-live{ color:var(--good); font-weight:600 }
.agent-dead{ color:var(--warn); font-weight:600 }

/* ---------- Barkod tablosu yerleşimi ----------
   Genel kural (th,td{white-space:nowrap}) uzun ürün adlarını tek satırda
   tutuyordu: metin hücreden taşıp "bekliyor" rozetinin üstüne biniyor ve
   tabloyu panelden dışarı itip işlem sütununu kırpıyordu. Ürün hücresi
   sarmalanır hale getirilir; genişlik İÇTEKİ div'e verilir, çünkü otomatik
   tablo düzeninde td'nin max-width'i yok sayılır. */
#sk-wrap table{ min-width:1120px }
#sk-wrap td, #labels-wrap td{ vertical-align:top }

#sk-wrap .sk-urunler{ white-space:normal }
.sk-urun-liste{
  max-width:23rem; font-size:.78rem; line-height:1.45; color:var(--muted);
  overflow-wrap:anywhere;                 /* uzun kodlar (VN000H4XEMW1-...) bölünsün */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;                        /* 3 satırı aşarsa kırp — tamamı title'da */
}
#sk-wrap .sk-alici{ white-space:normal; max-width:12rem }
#sk-wrap .sk-takip{ white-space:nowrap }
#sk-wrap .sk-row-actions{ white-space:nowrap }

/* Satır içi alt metin (şehir, taşıyıcı, Sürat takip no) — ürün listesiyle
   aynı sınıfı paylaşıyordu, artık yalnızca bu iş için. */
.sk-urun{ white-space:normal; color:var(--muted); font-size:.78rem; line-height:1.35 }

/* Filtre sekmelerindeki adet ve üstteki özet satırı.
   Varsayılan sekme barkodlu siparişleri gizliyor; bu sayılar olmadan kullanıcı
   Trendyol'daki toplamla kıyaslayıp "siparişler kayboluyor" sanıyordu. */
.chip .chip-n{ display:inline-block; margin-left:.35rem; padding:0 .34rem; border-radius:999px;
  background:var(--glass-2); color:var(--muted); font-size:.72rem; font-weight:700;
  font-variant-numeric:tabular-nums }
.chip.active .chip-n{ background:rgba(255,255,255,.28); color:inherit }
.sk-ozet{ margin:0 0 .7rem; font-size:.85rem; color:var(--muted) }
.sk-ozet b{ color:var(--ink); font-variant-numeric:tabular-nums }
.sk-ozet-t{ color:var(--faint) }
.sk-uyari{ color:var(--warn); font-weight:600 }

/* Desi: kutuya giden desi ve nereden geldiği (kural / pazaryeri / varsayılan) */
.sk-desi{ white-space:nowrap }
.desi-rozet{ display:inline-block; font-size:.8rem; font-weight:700; padding:.14rem .5rem;
  border-radius:999px; background:var(--good-soft); color:var(--good); cursor:help }
.desi-rozet.tahmin{ background:var(--warn-soft); color:var(--warn) }

/* Desi kural düzenleyici */
.desi-tablo{ font-size:.84rem }
.desi-tablo th, .desi-tablo td{ padding:.4rem .5rem; white-space:nowrap }
.desi-tablo .input.sm{ padding:.32rem .5rem; font-size:.82rem; min-width:8rem }
.desi-tablo .input.sm.mono{ min-width:15rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
.desi-sira{ display:flex; gap:.15rem }
.desi-sira .iconbtn.sm{ width:1.5rem; height:1.5rem; font-size:.75rem; padding:0 }
.desi-actions{ display:flex; gap:.5rem; margin:.6rem 0 1rem }
.desi-dene{ border-top:1px solid var(--hair); padding-top:.9rem; margin-bottom:.5rem }
.desi-dene-tablo{ font-size:.82rem; margin-top:.5rem }
.desi-dene-tablo td{ padding:.3rem .5rem; white-space:normal }
.desi-yok{ color:var(--warn); font-weight:600 }

/* Buybox pazaryeri sekmeleri — HB tablosu sayfa dibinde kalmasın diye */
.mp-tabs{display:flex; gap:.5rem; margin:0 0 1rem}
.mp-tab{display:flex; align-items:center; gap:.55rem; padding:.7rem 1.1rem; cursor:pointer;
  background:var(--glass-2); border:1px solid var(--hair);
  border-radius:.8rem; color:var(--muted); font-weight:700; font-size:.92rem; transition:.15s}
.mp-tab:hover{border-color:var(--accent); color:var(--ink)}
.mp-tab.active{background:var(--accent-soft); color:var(--ink); border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset}
.mp-badge{display:inline-flex; align-items:center; justify-content:center; min-width:2.1rem; height:1.35rem;
  border-radius:.4rem; font-size:.7rem; font-weight:800; letter-spacing:.02em; color:#fff}
.mp-badge.ty{background:#f27a1a}
.mp-badge.hb{background:#ff6000}
.mp-count{margin-left:.15rem; padding:.1rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700;
  background:var(--glass-2); color:var(--muted)}
.mp-tab.active .mp-count{background:var(--accent); color:#fff}
.mp-rule{font-size:.84rem; color:var(--muted); line-height:1.5; margin:0 0 .9rem}
@media (max-width:640px){ .mp-tab{flex:1; justify-content:center; padding:.7rem .6rem} .mp-name{display:none} }

/* Kargo geçmişi — gün şeridi ve kayıt tablosu */
.gh-days{display:flex; gap:.55rem; overflow-x:auto; padding:.15rem .15rem .5rem; margin-bottom:1rem}
.gh-day{flex:0 0 auto; min-width:8.5rem; text-align:left; cursor:pointer; padding:.65rem .85rem;
  background:var(--glass-2); border:1px solid var(--hair);
  border-radius:.75rem; transition:.15s}
.gh-day:hover{border-color:var(--accent)}
/* Seçili gün: --card kullanınca açık temada koyu zemin + koyu yazı çıkıp
   rakamlar okunmuyordu. Vurgu rengiyle hafif zemin her iki temada da güvenli. */
.gh-day.sel{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;
  background:color-mix(in srgb, var(--accent) 12%, transparent)}
.gh-day.sel .g{color:var(--accent); font-weight:700}
.gh-day.sel .n{color:var(--ink)}
.gh-day .g{font-size:.74rem; color:var(--muted); font-weight:600}
.gh-day .n{font-size:1.45rem; font-weight:800; line-height:1.15; color:var(--ink)}
.gh-day .k{font-size:.72rem; color:var(--muted)}
.gh-day .k b{color:var(--good); font-weight:700}
.gh-day .k i{font-style:normal; color:var(--warn)}
.gh-tbl{width:100%; border-collapse:collapse; font-size:.85rem}
.gh-tbl th{position:sticky; top:0; z-index:1; background:var(--glass-2); text-align:left;
  font-size:.72rem; font-weight:700; color:var(--muted); padding:.55rem .7rem;
  border-bottom:1px solid var(--hair)}
.gh-tbl td{padding:.55rem .7rem; border-bottom:1px solid var(--hair); vertical-align:top}
.gh-tbl tr:hover td{background:var(--glass-2)}
.gh-tbl .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem}
.gh-tbl .sub{font-size:.74rem; color:var(--muted); margin-top:.15rem; max-width:22rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gh-act{display:flex; gap:.35rem; justify-content:flex-end}
.gh-scroll{max-height:34rem; overflow:auto}

/* ---- Pano: "Son hareketler" tablosu ----
   Genel kural th,td{white-space:nowrap}; uzun ürün adları tabloyu panelden
   taşırıyor, altta yatay kaydırma çubuğu çıkıp son satır kesiliyordu.
   NOT: table-layout:fixed + width:1px DENENDI, SUTUNLAR UST USTE BINDI —
   sabit düzende 1px harfiyen uygulanıyor. Doğrusu tabloya dokunmamak,
   yalnızca ürün adını sınırlamak: tablo kendi doğal düzeninde kalır,
   ad sığmazsa "…" ile kısalır, tablo panelden taşmaz. */
#mv-wrap{overflow-x:hidden}
#mv-wrap .prow{min-width:0}
#mv-wrap .prow > div{min-width:0}
#mv-wrap .pname, #mv-wrap .prow .pmeta{
  display:block; max-width:min(24rem, 30vw);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Dar ekranda önce "Kanal", sonra "Zaman" gizlenir — asıl bilgi ürün, tip, adet. */
@media (max-width:1100px){ #mv-wrap th:nth-child(2), #mv-wrap td:nth-child(2){display:none} }
@media (max-width:920px){ #mv-wrap th:nth-child(5), #mv-wrap td:nth-child(5){display:none} }

/* Panel başlığı: içinde düğme olan başlık ("Tümünü gör") düğmesizden yüksek
   kalıyor, yan yana paneller hizasız görünüyordu. */
.panel-head{min-height:4rem}

/* Kargo araç çubuğundaki yazdırma-ajanı rozeti.
   Ajan ölüyken barkod üretimi de basım da durur; sebep düğmeye basmadan görünsün. */
.ajan-rozet{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .6rem; border-radius:999px;
  border:1px solid var(--hair); background:var(--glass-2);
  font-size:.78rem; font-weight:600; white-space:nowrap;
}
.ajan-rozet.canli{ color:var(--good); border-color:var(--good-soft) }
.ajan-rozet.olu{ color:var(--crit); border-color:var(--crit-soft); background:var(--crit-soft) }

/* ===== Ürün Birleştirme ===== */
.bl-grup{
  border:1px solid var(--hair); border-radius:.8rem; background:var(--glass-2);
  margin-bottom:.8rem; overflow:hidden;
}
.bl-bas{ display:flex; gap:.8rem; align-items:center; padding:.8rem 1rem; border-bottom:1px solid var(--hair) }
.bl-img{ width:3rem; height:3rem; border-radius:.5rem; object-fit:cover; flex:0 0 auto; background:var(--glass-2) }
.bl-img-yok{ display:grid; place-items:center; font-size:1.3rem; border:1px solid var(--hair) }
.bl-ad{ font-weight:650; color:var(--ink); margin-bottom:.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bl-meta{ font-size:.78rem; color:var(--muted); display:flex; gap:.4rem; align-items:center; flex-wrap:wrap }
.bl-meta code{ font-size:.74rem }
.bl-meta .uyari{ color:var(--crit) }
.bl-btn{ display:flex; gap:.4rem; flex:0 0 auto }

.bl-listeler{ padding:.4rem .6rem .6rem }
.bl-satir{
  display:grid; grid-template-columns:11rem 10rem 1fr 6rem 6rem auto;
  gap:.6rem; align-items:center; padding:.4rem .4rem; border-radius:.45rem;
  font-size:.82rem;
}
.bl-satir:hover{ background:var(--accent-soft) }
.bl-bc{ font-size:.75rem; color:var(--muted) }
.bl-sku,.bl-nm,.bl-st,.bl-fy{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bl-st,.bl-fy{ text-align:right; font-variant-numeric:tabular-nums }

/* durum rozetleri */
.tag{
  display:inline-block; padding:.1rem .45rem; border-radius:999px;
  border:1px solid var(--hair); font-size:.72rem; font-weight:600; color:var(--muted);
}
.tag.ok{ color:var(--good); border-color:var(--good-soft); background:var(--good-soft) }
.tag.warn{ color:var(--warn); border-color:var(--hair) }
.tag.crit{ color:var(--crit); border-color:var(--crit-soft); background:var(--crit-soft) }
.tag.muted{ opacity:.75 }

@media (max-width:860px){
  .bl-satir{ grid-template-columns:1fr auto; row-gap:.2rem }
  .bl-nm{ grid-column:1 / -1 }
}