/* 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);
  /* --bad: kodun bircok yerinde kullaniliyordu ama TANIMLI DEGILDI;
     tanimsiz degisken sessizce yok sayilir ve renk uygulanmazdi. */
  --bad:#E5484D;
  --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);
    --bad:#FF6961;
  }
}
: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. */
/* 7 kart TEK SATIRDA: stok hacmi eklenince 7'ye cikti, 6 sutunlu
   izgarada sonuncusu alta dusuyordu. Kartlar biraz kuculdu. */
.kpis{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.6rem; margin-bottom:1.3rem}
.kpis > .kpi{min-width:0}
/* Dar ekranda kademeli iner (alt alta yigilmaz) */
@media (max-width:1400px){ .kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1000px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
.kpi{padding:.8rem .85rem; position:relative; overflow:hidden}
.kpi .lab{font-size:.72rem; font-weight:600; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi .val{font-size:1.55rem; font-weight:800; color:var(--ink); margin-top:.2rem; line-height:1; letter-spacing:-.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi .foot{font-size:.7rem; color:var(--faint); margin-top:.3rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi .orb{position:absolute; right:-16px; top:-16px; width:58px; height:58px; 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 }
}

/* ---- Fatura kontrolu ----
   .panel-body varsayilan olarak YATAY dolgu vermez (icine tablo konur).
   Bu ekranda serbest metin + form var; dolguyu burada veriyoruz, yoksa
   yazi panel kenarina yapisip alttan tasiyordu. */
.fk-pad{padding:1.1rem 1.2rem}
.fk-aciklama{margin:0 0 .2rem; line-height:1.55}
.fk-liste-wrap{margin-top:.9rem}
/* Tablo panel kenarina kadar uzansin ama dolgunun disina tasmasin */
.fk-liste-wrap table{margin:0 -1.2rem; width:calc(100% + 2.4rem)}
.fk-liste-wrap:empty{display:none}

.fk-form{display:flex; gap:.7rem; flex-wrap:wrap; align-items:flex-end}
.fk-form[hidden]{display:none}
.fk-form .field{margin:0}
.fk-form .fk-f1{flex:1 1 7rem; min-width:7rem}
.fk-form .fk-f2{flex:2 1 12rem; min-width:12rem}
.fk-form .btn{flex:0 0 auto; height:2.6rem}

/* 5 kutu: dar ekranda ikiye/uce kirilsin, tasmasin */
.fk-kpis{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); margin-bottom:1.1rem}

/* Fark sutunu: goz tarama kolay olsun */
.fk-fark{font-weight:700; white-space:nowrap}
.fk-not{font-size:.75rem; color:var(--faint); margin-top:.15rem}

@media (max-width:720px){
  .fk-pad{padding:1rem}
  .fk-liste-wrap table{margin:0 -1rem; width:calc(100% + 2rem)}
  .fk-form .fk-f1,.fk-form .fk-f2{flex:1 1 100%; min-width:0}
}

/* Islem sutunu: dugmeler sag kenarda kesilmesin */
.fk-islem{text-align:right; white-space:nowrap; padding-right:1.2rem !important}
.fk-islem .btn{margin-left:.35rem}
/* Urun adi uzun olabilir: KOD sutununun ustune tasmasin.
   max-width tek basina yetmiyor -- tablo hucresi yine genisliyordu;
   sabit duzen + tasmayi kirpma gerekiyor. */
#fk-tablo table,.fk-liste-wrap table{width:100%; table-layout:fixed}
#fk-tablo table td:nth-child(2),
.fk-liste-wrap table td:first-child{
  max-width:0;              /* fixed duzende oran belirler */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Sutun oranlari: urun adina bol yer, sayilara dar. Toplam 100%. */
/* 1. sutun secim kutusu; digerleri bir kaydi */
#fk-tablo table th:nth-child(1){width:2.6rem}
#fk-tablo table th:nth-child(2){width:34%}
#fk-tablo table th:nth-child(3){width:13%}
#fk-tablo table th:nth-child(4),
#fk-tablo table th:nth-child(5){width:8%}
#fk-tablo table th:nth-child(6){width:10%}
#fk-tablo table th:nth-child(7){width:6%}
/* Islem sutunu: iki dugme + dolgu sigmali, yoksa "Sil" kesiliyor */
#fk-tablo table th:nth-child(8){width:auto; min-width:9.5rem}
#fk-tablo table td:nth-child(2) .fk-not{white-space:normal}
/* Kod sutunu: uzun barkodlar kirpilsin, satiri bozmasin */
#fk-tablo table td:nth-child(3),
.fk-liste-wrap table td:nth-child(2){
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- Fatura kontrolu: adim sekmeleri ----
   Onceki hali genel .chip idi; filtre rozeti gibi durdugu icin
   kullanici ikinci adimin tiklanabilir oldugunu fark etmiyordu. */
.fk-adimlar{display:flex; gap:.7rem; margin-bottom:1.1rem; flex-wrap:wrap}
.fk-adim{
  display:flex; align-items:center; gap:.7rem;
  flex:1 1 15rem; min-width:13rem;
  padding:.75rem 1rem; border-radius:14px; cursor:pointer;
  border:1px solid var(--hair); background:var(--glass-2);
  font-family:inherit; text-align:left; transition:all .14s;
}
.fk-adim:hover{border-color:var(--accent); transform:translateY(-1px)}
.fk-adim-no{
  flex:none; width:1.9rem; height:1.9rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--hair);
  font-weight:800; font-size:.9rem; color:var(--muted);
}
.fk-adim-ad{font-weight:700; font-size:.95rem; color:var(--ink)}
.fk-adim-alt{
  display:block; width:100%; margin-left:2.6rem; margin-top:-.15rem;
  font-size:.76rem; color:var(--faint); font-weight:500;
}
.fk-adim{flex-wrap:wrap}
.fk-adim.active{
  background:var(--accent); border-color:transparent;
  box-shadow:0 4px 14px rgba(10,132,255,.28);
}
.fk-adim.active .fk-adim-ad{color:#fff}
.fk-adim.active .fk-adim-alt{color:rgba(255,255,255,.85)}
.fk-adim.active .fk-adim-no{background:rgba(255,255,255,.25); border-color:transparent; color:#fff}

/* Barkod okutma alani: depoda hizli kullanim icin belirgin */
.fk-okut-giris{font-size:1.05rem; font-weight:600}

/* Fatura disi barkodu kaleme baglama listesi */
.fk-bagla-liste{display:grid; gap:.5rem; max-height:22rem; overflow:auto; margin:.2rem 0 .4rem}
.fk-bagla-sec{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  width:100%; padding:.7rem .9rem; border-radius:12px; cursor:pointer;
  border:1px solid var(--hair); background:var(--glass-2);
  font-family:inherit; text-align:left; transition:all .12s;
}
.fk-bagla-sec:hover{border-color:var(--accent); transform:translateY(-1px)}
.fk-bagla-ad{font-weight:600; font-size:.92rem; color:var(--ink)}
.fk-bagla-kod{font-size:.78rem; color:var(--faint); margin-top:.1rem}
.fk-bagla-durum{font-size:.8rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}

/* Beden satirlari: kalemin altinda girintili alt satirlar */
.fk-beden-satir td{background:rgba(127,127,127,.04)}
.fk-beden-ad{padding-left:1.6rem; font-size:.88rem; color:var(--muted)}
.fk-beden-ad b{color:var(--ink); font-weight:700}
.fk-beden-rozet{
  display:inline-block; padding:.1rem .45rem; border-radius:6px;
  background:var(--glass-2); border:1px solid var(--hair);
  font-size:.72rem; font-weight:700; margin-right:.4rem;
}

/* Belgeden doldurma alani */
.fk-dosya{display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:1.1rem;
  padding-bottom:1.1rem; border-bottom:1px dashed var(--hair)}
.fk-dosya-not{flex:2; min-width:16rem; margin:0; font-size:.82rem; color:var(--muted); line-height:1.5}

/* Onay tablosu: okunanlari duzenle */
/* Onay tablosu dar modala sigmiyordu: bu modal daha genis olsun */
#fkOnayOverlay .modal{width:min(96vw,62rem)}
.fk-onay-wrap{max-height:26rem; overflow:auto; margin:.3rem 0 .2rem;
  border:1px solid var(--hair); border-radius:12px}
.fk-onay-tablo{width:100%; border-collapse:collapse; font-size:.86rem}
.fk-onay-tablo th{position:sticky; top:0; z-index:1; background:var(--glass-2);
  text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em;
  color:var(--faint); padding:.55rem .6rem; border-bottom:1px solid var(--hair)}
.fk-onay-tablo td{padding:.35rem .6rem; border-bottom:1px solid var(--hair); vertical-align:middle}
.fk-onay-tablo tr:last-child td{border-bottom:none}
.fk-onay-tablo input[type="text"],.fk-onay-tablo input[type="number"]{
  width:100%; padding:.35rem .5rem; border-radius:8px; font-family:inherit; font-size:.85rem;
  border:1px solid var(--hair); background:var(--glass-2); color:var(--ink)}
.fk-onay-tablo input:focus{outline:none; border-color:var(--accent)}
.fk-onay-tablo input[type="checkbox"]{width:1.05rem; height:1.05rem; accent-color:var(--accent)}
.fk-onay-tablo tr.pasif{opacity:.4}
.fk-onay-supheli input[type="text"]{border-color:var(--warn)}
.fk-onay-ipucu{font-size:.72rem; color:var(--warn); margin-top:.15rem}

/* OCR durum rozeti: taranmis belge okunabiliyor mu, okunmuyorsa NEDEN */
.fk-ocr-rozet{display:block; margin-top:.5rem; padding:.45rem .65rem; border-radius:9px;
  font-size:.78rem; line-height:1.45; border:1px solid var(--hair); background:var(--glass-2)}
.fk-ocr-rozet.ok{color:var(--good); border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.fk-ocr-rozet.yok{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.fk-ocr-rozet button{margin-left:.5rem; font-size:.74rem; padding:.15rem .5rem; border-radius:6px;
  border:1px solid var(--hair); background:var(--glass-2); color:inherit; cursor:pointer; font-family:inherit}

/* Panel guncellendi uyarisi: sayfa eski kodla caliyorsa gorunur */
/* Panel guncellendi uyarisi.
   Onceki hali: <b> kendi satirina dusuyordu, yazi zemine gore soluk
   kaliyordu, dugme sikisiyordu. Metin tek satir, renkler net. */
.surum-uyari{
  position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%);
  z-index:9999; display:flex; align-items:center; gap:1rem;
  max-width:min(92vw,40rem); padding:.85rem 1rem .85rem 1.15rem;
  border-radius:14px; font-size:.87rem; line-height:1.45;
  background:#1c1f26; color:#f2f4f8;
  box-shadow:0 12px 34px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.1);
}
/* Metin blogu: baslik ve aciklama alt alta ama baslik kirilmasin */
.surum-uyari .su-metin{flex:1; min-width:0}
.surum-uyari b{display:block; font-weight:700; white-space:nowrap; margin-bottom:.1rem}
.surum-uyari small{display:block; font-size:.82rem; color:rgba(242,244,248,.72)}
.surum-uyari button{
  flex:none; padding:.5rem 1rem; border-radius:10px; border:0; cursor:pointer;
  font-family:inherit; font-size:.84rem; font-weight:700; white-space:nowrap;
  background:var(--accent); color:#fff; transition:filter .12s;
}
.surum-uyari button:hover{filter:brightness(1.1)}
@media (max-width:560px){
  .surum-uyari{flex-direction:column; align-items:stretch; gap:.7rem; text-align:left}
  .surum-uyari button{width:100%}
}

/* Baglama: beden secim adimi */
.fk-bagla-geri{width:100%; padding:.5rem .8rem; margin-bottom:.2rem; border-radius:10px;
  border:1px dashed var(--hair); background:transparent; color:var(--muted);
  font-family:inherit; font-size:.82rem; cursor:pointer; text-align:left}
.fk-bagla-geri:hover{color:var(--ink); border-color:var(--accent)}
.fk-bagla-ipuc{font-size:.72rem; color:var(--accent); font-weight:600}
.fk-bagla-durum{text-align:right; line-height:1.35}

/* Toplu secim: kalem satirlarinda onay kutusu + islem cubugu */
.fk-sec-sut{width:2.6rem; text-align:center; padding-left:1.1rem !important}
.fk-sec-sut input[type="checkbox"]{width:1.05rem; height:1.05rem; accent-color:var(--accent); cursor:pointer}
.fk-secim-cubuk{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1.2rem; background:var(--glass-2);
  border-bottom:1px solid var(--hair); font-size:.88rem;
}
.fk-secim-cubuk b{font-variant-numeric:tabular-nums}
.fk-secim-cubuk[hidden]{display:none}

/* ===== Çoklu kayıt · stok eşitleme ===== */
.ck-kume{
  border:1px solid var(--hair); border-radius:.8rem; background:var(--glass-2);
  margin-bottom:.8rem; overflow:hidden;
}
.ck-kume.ck-uyari{ border-color:var(--crit-soft); background:var(--crit-soft) }
.ck-bas{ display:flex; gap:.8rem; align-items:center; padding:.8rem 1rem; border-bottom:1px solid var(--hair) }
.ck-giris{ display:flex; gap:.4rem; align-items:center; flex:0 0 auto }
.ck-stok{ width:5.5rem; text-align:right; font-variant-numeric:tabular-nums }
@media (max-width:860px){
  .ck-bas{ flex-wrap:wrap }
  .ck-giris{ width:100%; justify-content:flex-end }
}

/* ---- 3. adim: sayim sonucu raporu ---- */
/* Durum kutusu: bir bakista "tuttu mu tutmadi mi" */
.fk-sonuc-durum{display:flex; flex-direction:column; gap:.2rem;
  padding:1rem 1.15rem; border-radius:14px; margin-bottom:1.2rem; line-height:1.5}
.fk-sonuc-durum b{font-size:1.02rem}
.fk-sonuc-durum span{font-size:.88rem; opacity:.85}
.fk-sonuc-durum.tamam{background:var(--good-soft,rgba(52,199,89,.12));
  border:1px solid color-mix(in srgb,var(--good) 35%,transparent); color:var(--good)}
.fk-sonuc-durum.sorunlu{background:var(--bad-soft,rgba(255,59,48,.1));
  border:1px solid color-mix(in srgb,var(--bad) 35%,transparent); color:var(--bad)}
.fk-sonuc-durum.bekliyor{background:var(--glass-2);
  border:1px solid var(--hair); color:var(--muted)}
.fk-sonuc-durum.tamam b,.fk-sonuc-durum.sorunlu b,.fk-sonuc-durum.bekliyor b{color:inherit}

.fk-sonuc-not{font-size:.85rem; color:var(--warn); margin:-.6rem 0 1.1rem}

.fk-sonuc-blok{margin-bottom:1.5rem}
.fk-sonuc-blok:last-child{margin-bottom:.2rem}
.fk-sonuc-baslik{font-size:1rem; font-weight:700; margin:0 0 .15rem}
.fk-sonuc-baslik span{font-weight:600; opacity:.6; font-size:.88rem}
.fk-sonuc-baslik.eksik{color:var(--bad)}
.fk-sonuc-baslik.fazla{color:var(--warn)}
.fk-sonuc-baslik.disi{color:var(--bad)}
.fk-sonuc-aciklama{font-size:.82rem; color:var(--faint); margin:0 0 .6rem}
.fk-sonuc-blok table{width:100%; font-size:.88rem}
.fk-sonuc-blok .table-wrap{border:1px solid var(--hair); border-radius:12px; overflow:hidden}

/* Sonuc adiminda karsilastirma tablosu geri planda kalsin */
.panel.fk-ikincil{opacity:.72}
.panel.fk-ikincil:hover{opacity:1}

/* ---- Fatura mağaza kartı ----
   Alanlar kart genişliğince uzamasın: .input width:100% oldugu icin
   sarmalayiciya sabit bir taban genislik verilir. */
/* Liste sarmalayicisi: panelin .mkt-list kalibi. Panel govdesinin
   yatay dolgusu 0 oldugu icin kart kenara YAPISIYORDU. */
.fat-magaza-liste{display:grid; gap:.9rem; padding:1.2rem}

.fat-magaza{
  padding:1.1rem;
  background:var(--glass-2); border:1px solid var(--hair);
  border-radius:16px;
}
/* Salt okunur mağaza: renkli şerit yerine panelin kendi sönük anlatımı. */
.fat-magaza.salt-okunur{opacity:.7}

.fat-magaza-ust{display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem 2rem; flex-wrap:wrap}
.fat-magaza-ad{font-weight:700; color:var(--ink); font-size:1rem; line-height:1.3}
.fat-magaza-alt{display:flex; gap:.5rem 1rem; align-items:center; flex-wrap:wrap; margin-top:.4rem; font-size:.82rem; color:var(--muted)}
.fat-magaza-alt code{font-size:.82rem; color:var(--text); background:none; padding:0}
.fat-uyari{margin-top:.45rem; font-size:.84rem; color:var(--warn)}

.fat-magaza-kimlik{flex:1 1 18rem; min-width:0}
.fat-magaza-islem{display:flex; gap:.85rem; align-items:center; flex-wrap:wrap; flex:none}
/* Cerceveli .chk-row yerine sade anahtar: kart icinde kutu-icinde-kutu olmasin. */
.fat-switch{display:inline-flex; gap:.45rem; align-items:center; cursor:pointer; font-size:.88rem; color:var(--text); white-space:nowrap}
.fat-switch input{width:1.05rem; height:1.05rem; accent-color:var(--accent); margin:0; flex:none; cursor:pointer}
.fat-switch input:disabled{cursor:not-allowed}
.fat-switch input:disabled + span{color:var(--faint)}

.fat-gib{margin-top:1.25rem; padding-top:1.1rem; border-top:1px solid var(--hair)}
.fat-gib-baslik{display:flex; gap:.6rem; align-items:center; margin-bottom:.85rem; font-weight:600; font-size:.9rem; color:var(--ink)}
/* Alanlar SABIT genislikte: kart ne kadar genis olursa olsun uzamazlar. */
.fat-gib-satir{display:flex; gap:.85rem 1rem; align-items:flex-end; flex-wrap:wrap}
.fat-alan{display:block; margin:0; flex:0 1 16rem; min-width:12rem; max-width:16rem}
.fat-alan>span{display:block; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:.4rem}

/* Dugmeler giris alanlarina YAPISIK durmasin: kendi grubunda,
   belirgin bir bosluktan sonra. Alanlarin yuksekligiyle hizali. */
.fat-gib-dugmeler{display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; margin-left:.5rem}
.fat-gib-satir .btn{align-self:flex-end; white-space:nowrap}
.fat-gib-not{margin-top:.9rem; font-size:.8rem; color:var(--muted); line-height:1.55; max-width:62ch}
.fat-gib .msg:empty{display:none}

@media (max-width:640px){
  .fat-magaza-liste{padding:.8rem; gap:.7rem}
  .fat-magaza{padding:1rem}
  .fat-magaza-ust{flex-direction:column; gap:1rem}
  .fat-magaza-islem{width:100%; justify-content:space-between}
  .fat-alan{flex:1 1 100%; max-width:none; min-width:0}
  /* Dugmeler tam genislikte ve esit paylassin -- kenara yapismasin. */
  .fat-gib-dugmeler{margin-left:0; width:100%}
  .fat-gib-dugmeler .btn{flex:1 1 auto}
}

/* Fatura kuyrugu: Islem sutunu tasmasin.
   Tablo genisligi kabin disina cikinca son sutundaki dugmeler
   kesiliyordu; islem hucresi sabit genislikte ve dugmeler kucuk. */
.fat-islem-bas{width:11.5rem}
.fat-islem{width:11.5rem}
.fat-islem-ic{display:flex; gap:.3rem; flex-wrap:wrap; justify-content:flex-end}
.fat-islem-ic .btn{padding:.3rem .55rem; font-size:.78rem; white-space:nowrap}
.fat-kod{white-space:nowrap}
/* Belge numarasi TIKLANABILIR: faturanin kendisi acilir. */
.fat-belge-bag{color:inherit; text-decoration:none; border-bottom:1px dashed var(--accent)}
.fat-belge-bag:hover{color:var(--accent)}
/* Islem sutunundaki baglantilar dugmelerle ayni hizada dursun. */
.fat-islem-ic a.btn{display:inline-flex; align-items:center; text-decoration:none}
.fat-kod code{font-size:.82rem}

/* SMS kodu: ortali, aralikli rakamlar -- okumasi kolay olsun */
.fat-kod-girdi{text-align:center; letter-spacing:.25em; font-weight:600}
/* Kod alani kisa: 6-8 hane. Satir ici style yerine sinif. */
.fat-alan-kod{flex:0 0 9rem; min-width:8rem; max-width:9rem}

/* ---- Toplu islem cubugu ----
   Sekme satiriyla tablo arasinda durur; panelin yatay dolgusunu
   (1.1rem) izler ki kenara yapismasin. */
.fat-toplu{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem 1rem; flex-wrap:wrap;
  margin:0 1.1rem .6rem; padding:.7rem .9rem;
  background:var(--accent-soft); border:1px solid var(--hair); border-radius:12px;
}
.fat-toplu[hidden]{display:none}
.fat-toplu-sayi{font-size:.88rem; color:var(--ink)}
.fat-toplu-dugmeler{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
@media (max-width:640px){
  .fat-toplu{margin:0 .8rem .6rem}
  .fat-toplu-dugmeler{width:100%}
  .fat-toplu-dugmeler .btn{flex:1 1 auto}
}
.fat-alan>span small{font-weight:400; color:var(--faint)}

/* Magaza kartinda kucuk durum rozeti */
.fat-rozet{font-size:.74rem; font-weight:600; padding:.1rem .45rem; border-radius:999px; white-space:nowrap}
.fat-rozet.iyi{color:var(--good,#2d8f5f); background:color-mix(in srgb, var(--good,#4c9) 14%, transparent)}
.fat-rozet.eksik{color:var(--crit); background:var(--crit-soft)}

/* Ortak onay penceresi */
.onay-liste{margin:0 0 .7rem; padding-left:1.1rem; font-size:.9rem; color:var(--text); line-height:1.6}
.onay-liste li{margin-bottom:.25rem}
.onay-liste b{color:var(--ink)}
.onay-uyari{
  padding:.65rem .8rem; border-radius:10px; font-size:.86rem; line-height:1.5;
  color:var(--ink); background:color-mix(in srgb, var(--warn) 12%, transparent);
  border-left:3px solid var(--warn);
}
/* .btn gradyan kullaniyor; duz renk onu EZMELI (yoksa mavi kaliyor).
   DIKKAT: degisken adi --crit (--bad diye bir degisken YOK). */
.btn.tehlike{
  background:linear-gradient(180deg,#EF6065,var(--bad));
  border-color:var(--bad);
  box-shadow:0 4px 14px var(--crit-soft), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn.tehlike:hover{filter:brightness(1.08)}

/* ================= BİLDİRİM MERKEZİ (üst çubuktaki 🔔) =================
   Paneldeki "Aksiyon kuyruğu" (.act-item) kalıbı: tek satır, renkli simge,
   başlık + tek satır özet. Ayrıntı yalnız tıklanan satırda açılır. */
.bld-wrap{position:relative; flex:none}
#bldBtn{position:relative}
.bld-sayi{position:absolute; top:-.3rem; right:-.3rem; min-width:1.05rem; height:1.05rem; padding:0 .28rem;
  border-radius:999px; background:var(--warn); color:#fff; font-size:.62rem; font-weight:800;
  display:grid; place-items:center; font-variant-numeric:tabular-nums; line-height:1}
.bld-sayi.kritik{background:var(--crit)}
.bld-panel{position:absolute; top:calc(100% + .5rem); right:0; z-index:70; width:min(92vw,24rem);
  max-height:min(72dvh,34rem); display:flex; flex-direction:column; overflow:hidden; border-radius:14px;
  background:var(--app-bg); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow)}
.bld-panel[hidden]{display:none}
.bld-head{display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--hair)}
.bld-head b{font-size:.92rem; font-weight:700; color:var(--ink)}
.bld-head .n{font-size:.75rem; color:var(--faint); font-variant-numeric:tabular-nums}
.bld-link{margin-left:auto; border:0; background:none; padding:0; font:inherit; font-size:.76rem;
  font-weight:600; color:var(--accent-2); cursor:pointer}
.bld-link:hover{text-decoration:underline}
.bld-list{overflow:auto}
.bld-bos{padding:1.8rem 1rem; text-align:center; color:var(--muted); font-size:.85rem}

.bld-item{border-bottom:1px solid var(--hair)}
.bld-item:last-child{border-bottom:none}
.bld-row{display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; font:inherit; color:inherit;
  cursor:pointer; padding:.65rem 1rem; background:none; border:0}
.bld-row:hover{background:var(--glass-2)}
.bld-row .ic{width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  font-size:.85rem; font-weight:800}
.bld-item.kritik .ic{background:var(--crit-soft); color:var(--crit)}
.bld-item.uyari .ic{background:var(--warn-soft); color:var(--warn)}
.bld-item.bilgi .ic{background:var(--accent-soft); color:var(--accent-2)}
.bld-row .tx{flex:1; min-width:0}
.bld-row .tx b{display:block; font-size:.84rem; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bld-row .tx small{display:block; font-size:.73rem; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bld-item.okundu .tx b{font-weight:500; color:var(--muted)}
.bld-nokta{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none}
.bld-row .ok{color:var(--faint); font-size:.95rem; flex:none; transition:transform .15s}
.bld-item.acik .bld-row .ok{transform:rotate(90deg)}
.bld-detay{display:none; padding:0 1rem .75rem calc(1rem + 30px + .7rem); font-size:.78rem; color:var(--text)}
.bld-item.acik .bld-detay{display:block}
.bld-detay p{margin:0 0 .35rem}
.bld-detay .yap{color:var(--muted)}
.bld-detay ul{margin:.2rem 0 .5rem; padding:0; list-style:none; color:var(--faint); font-size:.73rem}
.bld-detay li{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:.08rem 0}
.bld-detay .aks{display:flex; gap:1rem}
/* Telefonda zil sağ kenarda değil (tema/çıkış yanında); pencere ekrandan taşmasın. */
@media (max-width:560px){ .bld-panel{position:fixed; top:4.6rem; left:16px; right:16px; width:auto} }
.bld-sekme{display:flex; gap:.2rem; padding:.45rem .7rem 0; border-bottom:1px solid var(--hair)}
.bld-sekme button{border:0; background:none; font:inherit; font-size:.8rem; font-weight:600; color:var(--muted);
  padding:.35rem .6rem .5rem; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.bld-sekme button.active{color:var(--accent-2); border-bottom-color:var(--accent)}
.bld-grup{display:flex; justify-content:space-between; align-items:center; width:100%; border:0; border-top:1px solid var(--hair);
  background:var(--glass-2); font:inherit; font-size:.74rem; font-weight:700; color:var(--muted); letter-spacing:.02em;
  text-transform:uppercase; padding:.5rem 1rem; cursor:pointer}
.bld-alt{padding:.6rem 1rem; border-top:1px solid var(--hair); font-size:.75rem; color:var(--muted); line-height:1.5}
.bld-alt .bld-link{margin-left:.5rem; font-size:.75rem}

/* ---- Stok hacmi raporu ---- */
.hcm-ust{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  padding:1.1rem 1.2rem .3rem}
.hcm-kutu{padding:.9rem 1rem; border-radius:13px; border:1px solid var(--hair); background:var(--glass-2)}
.hcm-kutu .lab{font-size:.76rem; color:var(--faint); text-transform:uppercase; letter-spacing:.03em}
.hcm-kutu .val{font-size:1.45rem; font-weight:800; margin-top:.15rem; font-variant-numeric:tabular-nums}
.hcm-kutu .foot{font-size:.78rem; color:var(--muted); margin-top:.1rem}
.hcm-kutu.ana{background:linear-gradient(140deg,rgba(10,132,255,.12),rgba(10,132,255,.04));
  border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.hcm-kutu.ana .val{color:var(--accent); font-size:1.75rem}
.hcm-uyari{margin:.3rem 1.2rem .6rem; font-size:.82rem; color:var(--warn)}
.hcm-bolum{padding:.4rem 1.2rem 1rem}
.hcm-bolum h3{font-size:.95rem; font-weight:700; margin:.8rem 0 .5rem}
.hcm-bolum table{width:100%; font-size:.86rem}
.hcm-cubuk{height:.4rem; border-radius:999px; background:var(--glass-2); overflow:hidden; min-width:4rem}
.hcm-cubuk i{display:block; height:100%; background:var(--accent); border-radius:999px}

/* Komisyon guven gostergesi */
.hcm-kutu.net{border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.hcm-guven{margin:.3rem 1.2rem 1rem;padding:.9rem 1.1rem;border-radius:12px;
  border:1px solid var(--hair);background:var(--glass-2);border-left-width:3px}
.hcm-guven.iyi{border-left-color:var(--good)}
.hcm-guven.orta{border-left-color:var(--warn)}
.hcm-guven.zayif{border-left-color:var(--bad)}
.hcm-guven-ust{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.hcm-guven-ust .ad{font-weight:700;font-size:.9rem}
.hcm-guven-ust .oran{font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.hcm-guven.iyi .ad,.hcm-guven.iyi .oran{color:var(--good)}
.hcm-guven.orta .ad,.hcm-guven.orta .oran{color:var(--warn)}
.hcm-guven.zayif .ad,.hcm-guven.zayif .oran{color:var(--bad)}
.hcm-guven-cubuk{height:.4rem;background:var(--hair);border-radius:999px;overflow:hidden;margin:.5rem 0 .6rem}
.hcm-guven-cubuk i{display:block;height:100%;border-radius:999px}
.hcm-guven.iyi .hcm-guven-cubuk i{background:var(--good)}
.hcm-guven.orta .hcm-guven-cubuk i{background:var(--warn)}
.hcm-guven.zayif .hcm-guven-cubuk i{background:var(--bad)}
.hcm-guven-not{margin:0;font-size:.84rem;color:var(--muted);line-height:1.5}

/* Komisyon kaynak dokumu: hangi duzeyden ne kadar */
.hcm-kaynaklar{display:grid;gap:.35rem;margin:.1rem 0 .6rem}
.hcm-kaynak{display:grid;grid-template-columns:9rem auto 1fr;gap:.6rem;align-items:baseline;
  font-size:.82rem;padding:.25rem 0;border-top:1px solid var(--hair)}
.hcm-kaynak:first-child{border-top:0}
.hcm-kaynak .et{font-weight:600}
.hcm-kaynak .dg{font-variant-numeric:tabular-nums;white-space:nowrap}
.hcm-kaynak .ac{color:var(--faint);font-size:.76rem}
.hcm-guven-alt{margin:.5rem 0 0;padding-top:.5rem;border-top:1px solid var(--hair)}
@media (max-width:640px){
  .hcm-kaynak{grid-template-columns:1fr;gap:.1rem}
  .hcm-kaynak .ac{margin-bottom:.2rem}
}

/* Komisyon guveni -- PANELDE tek satir ozet (detay rapor sayfasinda) */
.hcm-guven-satir{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin:.2rem 1.2rem 1rem; padding:.6rem .9rem;
  border:1px solid var(--hair); border-radius:10px; background:var(--glass-2);
  font-size:.86rem;
}
.hcm-guven-satir .nokta{width:.5rem;height:.5rem;border-radius:50%;flex:none}
.hcm-guven-satir.iyi .nokta{background:var(--good)}
.hcm-guven-satir.orta .nokta{background:var(--warn)}
.hcm-guven-satir.zayif .nokta{background:var(--bad)}
.hcm-guven-satir .ad{color:var(--muted)}
.hcm-guven-satir .ad b{color:var(--ink)}
.hcm-guven-satir.iyi .ad b{color:var(--good)}
.hcm-guven-satir.orta .ad b{color:var(--warn)}
.hcm-guven-satir.zayif .ad b{color:var(--bad)}
.hcm-guven-satir .oran{font-weight:700;font-variant-numeric:tabular-nums}
.hcm-guven-satir.iyi .oran{color:var(--good)}
.hcm-guven-satir.orta .oran{color:var(--warn)}
.hcm-guven-satir.zayif .oran{color:var(--bad)}
.hcm-guven-satir .cubuk{flex:1 1 6rem;min-width:4rem;height:.35rem;
  background:var(--hair);border-radius:999px;overflow:hidden}
.hcm-guven-satir .cubuk i{display:block;height:100%;border-radius:999px}
.hcm-guven-satir.iyi .cubuk i{background:var(--good)}
.hcm-guven-satir.orta .cubuk i{background:var(--warn)}
.hcm-guven-satir.zayif .cubuk i{background:var(--bad)}
.hcm-guven-satir .detay{flex:none;font-size:.8rem;font-weight:600;color:var(--accent);
  text-decoration:none;white-space:nowrap}
.hcm-guven-satir .detay:hover{text-decoration:underline}
@media (max-width:560px){
  .hcm-guven-satir .cubuk{flex-basis:100%;order:9}
}

/* ---- Ayarlar sayfası ---------------------------------------------------
   Paneller eskiden `max-width:32rem` ile dar bir sütunda alt alta
   diziliyordu: geniş ekranda sağ taraf boş kalıyor, sayfa uzuyordu.
   Izgaraya alındı — ama ilk denemede kartlar farklı yüksekliklerde
   kalıp hizasız göründü. Şimdi her satırdaki kartlar AYNI YÜKSEKLİKTE
   ve içerik dikeyde düzenli akıyor. */
.ayar-izgara{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(21rem, 1fr));
  gap:1.1rem;
  align-items:stretch;          /* satırdaki kartlar aynı yükseklik */
  max-width:76rem;
}
.ayar-kart{
  padding:1.4rem 1.5rem; margin:0;
  display:flex; flex-direction:column;   /* başlık → açıklama → form */
}
.ayar-kart.genis{grid-column:1 / -1}

.ayar-kart h2{
  font-size:1.02rem; margin:0 0 .35rem;
  color:var(--ink); font-weight:700; letter-spacing:-.01em;
}
/* Açıklama metni: kartlar arasında aynı hizada dursun diye en az iki
   satırlık yer tutar — biri kısa biri uzun olduğunda formlar kaymaz. */
.ayar-kart > .pmeta{
  margin:0 0 1.1rem; line-height:1.55; min-height:2.9em;
}
/* Form kartın altına yaslanır: farklı uzunluktaki açıklamalara rağmen
   giriş alanları ve düğmeler aynı hizada başlar. */
.ayar-kart > form{margin-top:auto}

/* Kart içindeki alan ızgarası (bildirim eşikleri gibi çok alanlı formlar).
   `auto-fit` ile sütun sayısı genişliğe göre değişiyordu: 6 alan 5+1
   bölünüp son alan tek başına alt satıra düşüyordu. Sabit 3 sütun ile
   6 alan 3+3 olarak dengeli yerleşir. */
.ayar-alanlar{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.9rem 1.1rem;
  align-items:start;
}
.ayar-alanlar .field{margin:0}
/* Etiketler iki satıra taşsa bile giriş kutuları aynı hizada kalsın. */
.ayar-alanlar .field > span{
  display:block; min-height:2.6em; line-height:1.3;
}
@media (max-width:1100px){ .ayar-alanlar{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:620px){
  .ayar-alanlar{grid-template-columns:1fr}
  .ayar-alanlar .field > span{min-height:0}
}

/* Form öğeleri arası tutarlı boşluk */
.ayar-kart form > .field{margin-bottom:.8rem}
.ayar-kart form > .btn{margin-top:1rem}
.ayar-kart form > .msg:empty{display:none}
.ayar-kart > *:last-child{margin-bottom:0}

@media (max-width:860px){
  .ayar-izgara{grid-template-columns:1fr}
  .ayar-kart > .pmeta{min-height:0}
}

/* ===================== EMA Sesli Asistan ===================== */

/* ---- Küre (Siri benzeri, sağ altta sabit) ---- */
.ema-kure{
  position:fixed; bottom:24px; right:24px; z-index:9999;
  width:64px; height:64px; border-radius:50%;
  cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  --ses-seviye:0;
}
.ema-kure:hover{ transform:scale(1.1); }
.ema-kure:active{ transform:scale(0.92); }

/* Dış halka — glow efekti */
.ema-kure::before{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(10,132,255,.4), rgba(48,209,158,.3), rgba(175,120,255,.4),
    rgba(255,159,74,.3), rgba(10,132,255,.4));
  filter:blur(12px);
  opacity:0; transition:opacity .4s;
  animation:ema-glow-don 4s linear infinite;
}
@keyframes ema-glow-don{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.ema-kure-ic{
  width:100%; height:100%; border-radius:50%;
  background:conic-gradient(from 180deg,
    #0A84FF 0deg, #30D19E 90deg, #AF78FF 180deg, #FF9F4A 270deg, #0A84FF 360deg);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:box-shadow .4s, filter .4s;
}

.ema-kure-ic::after{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:var(--app-bg);
  transition:inset .4s cubic-bezier(.34,1.56,.64,1), background .3s;
}

.ema-kure-ikon{
  position:relative; z-index:1; font-size:22px; line-height:1;
  transition:color .3s, transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}

/* ===== KAPALI — soluk, hareketsiz ===== */
.ema-kure[data-durum="kapali"] .ema-kure-ic{
  filter:saturate(0.3) brightness(0.7);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.ema-kure[data-durum="kapali"] .ema-kure-ikon{ color:var(--muted); opacity:.6; }

/* ===== HAZIR — yavaş döner, hafif nabız ===== */
.ema-kure[data-durum="hazir"]::before{ opacity:.4; }
.ema-kure[data-durum="hazir"] .ema-kure-ic{
  animation:ema-hazir-don 6s linear infinite;
  box-shadow:
    0 0 18px rgba(10,132,255,.3),
    0 0 36px rgba(10,132,255,.1),
    0 4px 14px rgba(0,0,0,.15);
}
.ema-kure[data-durum="hazir"] .ema-kure-ic::after{
  animation:ema-hazir-nabiz 3s ease-in-out infinite;
}
.ema-kure[data-durum="hazir"] .ema-kure-ikon{ color:var(--accent); }
@keyframes ema-hazir-don{
  from{transform:rotate(0deg)} to{transform:rotate(360deg)}
}
@keyframes ema-hazir-nabiz{
  0%,100%{inset:3px} 50%{inset:5px}
}

/* ===== DİNLİYOR — Siri dalga efekti, yeşil tonlar, iç halka nefes alır ===== */
.ema-kure[data-durum="dinliyor"]::before{ opacity:.7; }
.ema-kure[data-durum="dinliyor"] .ema-kure-ic{
  animation:ema-dinle-don 2s linear infinite;
  box-shadow:
    0 0 24px rgba(48,209,158,.55),
    0 0 48px rgba(48,209,158,.25),
    0 0 72px rgba(48,209,158,.1),
    0 4px 14px rgba(0,0,0,.15);
}
.ema-kure[data-durum="dinliyor"] .ema-kure-ic::after{
  inset:calc(4px + 10px * var(--ses-seviye));
  background:radial-gradient(circle, rgba(48,209,158,.08), var(--app-bg) 70%);
  transition:inset .1s;
}
.ema-kure[data-durum="dinliyor"] .ema-kure-ikon{
  color:#30D19E; transform:scale(1.15);
  animation:ema-ikon-titresim .15s ease-in-out infinite alternate;
}
@keyframes ema-dinle-don{
  from{transform:rotate(0deg)} to{transform:rotate(360deg)}
}
@keyframes ema-ikon-titresim{
  from{transform:scale(1.1)} to{transform:scale(1.2)}
}

/* ===== DÜŞÜNÜYOR — hızlı döner, mor nabız, ikon pulse ===== */
.ema-kure[data-durum="dusunuyor"]::before{ opacity:.8; }
.ema-kure[data-durum="dusunuyor"] .ema-kure-ic{
  animation:ema-dusun-don .8s linear infinite;
  box-shadow:
    0 0 28px rgba(175,120,255,.6),
    0 0 56px rgba(175,120,255,.25),
    0 0 84px rgba(175,120,255,.1),
    0 4px 14px rgba(0,0,0,.15);
}
.ema-kure[data-durum="dusunuyor"] .ema-kure-ic::after{
  inset:6px;
  background:radial-gradient(circle, rgba(175,120,255,.1), var(--app-bg) 70%);
  animation:ema-dusun-nabiz .6s ease-in-out infinite alternate;
}
.ema-kure[data-durum="dusunuyor"] .ema-kure-ikon{
  color:#AF78FF;
  animation:ema-ikon-nabiz .8s ease-in-out infinite;
}
@keyframes ema-dusun-don{
  from{transform:rotate(0deg)} to{transform:rotate(360deg)}
}
@keyframes ema-dusun-nabiz{
  from{inset:5px} to{inset:10px}
}
@keyframes ema-ikon-nabiz{
  0%,100%{transform:scale(1); opacity:.7} 50%{transform:scale(1.3); opacity:1}
}

/* ===== KONUŞUYOR — sıcak renkler, nefes alan iç halka ===== */
.ema-kure[data-durum="konusuyor"]::before{ opacity:.7; }
.ema-kure[data-durum="konusuyor"] .ema-kure-ic{
  animation:ema-konus-don 3s linear infinite;
  box-shadow:
    0 0 24px rgba(255,159,74,.5),
    0 0 48px rgba(10,132,255,.2),
    0 0 72px rgba(255,159,74,.1),
    0 4px 14px rgba(0,0,0,.15);
}
.ema-kure[data-durum="konusuyor"] .ema-kure-ic::after{
  animation:ema-konus-nabiz .5s ease-in-out infinite alternate;
  background:radial-gradient(circle, rgba(255,159,74,.06), var(--app-bg) 70%);
}
.ema-kure[data-durum="konusuyor"] .ema-kure-ikon{
  color:#FF9F4A;
  animation:ema-konus-ikon .5s ease-in-out infinite alternate;
}
@keyframes ema-konus-don{
  from{transform:rotate(0deg)} to{transform:rotate(360deg)}
}
@keyframes ema-konus-nabiz{
  from{inset:6px} to{inset:14px}
}
@keyframes ema-konus-ikon{
  from{transform:scale(1)} to{transform:scale(1.15)}
}

/* ===== YÜKLÜYOR — orta hız dönüş ===== */
.ema-kure[data-durum="yukluyor"]::before{ opacity:.5; }
.ema-kure[data-durum="yukluyor"] .ema-kure-ic{
  animation:ema-hazir-don 1.5s linear infinite;
  box-shadow:0 0 20px rgba(10,132,255,.3), 0 4px 14px rgba(0,0,0,.15);
}
.ema-kure[data-durum="yukluyor"] .ema-kure-ikon{
  color:var(--accent);
  animation:ema-ikon-nabiz .8s ease-in-out infinite;
}

/* ===== HATA — kırmızı, titreşim ===== */
.ema-kure[data-durum="hata"]::before{ opacity:0; }
.ema-kure[data-durum="hata"] .ema-kure-ic{
  box-shadow:0 0 24px rgba(229,72,77,.5), 0 4px 14px rgba(0,0,0,.15);
  animation:ema-hata-salla .4s ease-in-out;
}
.ema-kure[data-durum="hata"] .ema-kure-ikon{ color:var(--crit); }
@keyframes ema-hata-salla{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)} 60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}

/* ---- Ekran kenarı ışık şeridi (Apple Intelligence) ---- */
.ema-serit{
  position:fixed; inset:0; z-index:9997;
  pointer-events:none;
  opacity:0; transition:opacity .6s;
}
.ema-serit.aktif{ opacity:1; }

/* 4 kenar — her biri bağımsız ince glow şerit */
.ema-serit-ust,
.ema-serit-alt,
.ema-serit-sol,
.ema-serit-sag{
  position:fixed; pointer-events:none;
}

/* Üst kenar */
.ema-serit-ust{
  top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg, #0A84FF, #30D19E, #AF78FF, #FF9F4A, #0A84FF);
  background-size:200% 100%;
  animation:ema-yatay 4s linear infinite;
  box-shadow:0 0 20px 4px rgba(10,132,255,.5), 0 0 60px 8px rgba(175,120,255,.3);
}

/* Alt kenar */
.ema-serit-alt{
  bottom:0; left:0; right:0; height:6px;
  background:linear-gradient(270deg, #0A84FF, #30D19E, #AF78FF, #FF9F4A, #0A84FF);
  background-size:200% 100%;
  animation:ema-yatay 4s linear infinite;
  box-shadow:0 0 20px 4px rgba(255,159,74,.5), 0 0 60px 8px rgba(48,209,158,.3);
}

/* Sol kenar */
.ema-serit-sol{
  top:0; bottom:0; left:0; width:6px;
  background:linear-gradient(180deg, #0A84FF, #30D19E, #AF78FF, #FF9F4A, #0A84FF);
  background-size:100% 200%;
  animation:ema-dikey 4s linear infinite;
  box-shadow:0 0 20px 4px rgba(10,132,255,.5), 0 0 60px 8px rgba(48,209,158,.3);
}

/* Sağ kenar */
.ema-serit-sag{
  top:0; bottom:0; right:0; width:6px;
  background:linear-gradient(0deg, #0A84FF, #30D19E, #AF78FF, #FF9F4A, #0A84FF);
  background-size:100% 200%;
  animation:ema-dikey 4s linear infinite;
  box-shadow:0 0 20px 4px rgba(175,120,255,.5), 0 0 60px 8px rgba(255,159,74,.3);
}

@keyframes ema-yatay{
  from{background-position:0% 0%} to{background-position:200% 0%}
}
@keyframes ema-dikey{
  from{background-position:0% 0%} to{background-position:0% 200%}
}

/* Köşe birleşim — yumuşak geçiş */
.ema-serit-ust{ border-radius:0 0 4px 4px; }
.ema-serit-alt{ border-radius:4px 4px 0 0; }
.ema-serit-sol{ border-radius:0 4px 4px 0; }
.ema-serit-sag{ border-radius:4px 0 0 4px; }

/* ===== Durum bazlı şerit değişimleri ===== */

/* HAZIR — yavaş, soluk */
.ema-serit[data-durum="hazir"] .ema-serit-ust,
.ema-serit[data-durum="hazir"] .ema-serit-alt,
.ema-serit[data-durum="hazir"] .ema-serit-sol,
.ema-serit[data-durum="hazir"] .ema-serit-sag{
  animation-duration:6s; opacity:.5;
  height:4px; width:4px;
}
.ema-serit[data-durum="hazir"] .ema-serit-sol,
.ema-serit[data-durum="hazir"] .ema-serit-sag{ height:auto; }
.ema-serit[data-durum="hazir"] .ema-serit-ust,
.ema-serit[data-durum="hazir"] .ema-serit-alt{ width:auto; }

/* DİNLİYOR — orta hız, parlak */
.ema-serit[data-durum="dinliyor"] .ema-serit-ust,
.ema-serit[data-durum="dinliyor"] .ema-serit-alt,
.ema-serit[data-durum="dinliyor"] .ema-serit-sol,
.ema-serit[data-durum="dinliyor"] .ema-serit-sag{
  animation-duration:3s; opacity:.8;
}

/* DÜŞÜNÜYOR — hızlı, kalın, parlak */
.ema-serit[data-durum="dusunuyor"] .ema-serit-ust,
.ema-serit[data-durum="dusunuyor"] .ema-serit-alt{
  animation-duration:1s; height:8px;
  box-shadow:0 0 30px 8px rgba(175,120,255,.7), 0 0 80px 16px rgba(10,132,255,.4);
}
.ema-serit[data-durum="dusunuyor"] .ema-serit-sol,
.ema-serit[data-durum="dusunuyor"] .ema-serit-sag{
  animation-duration:1s; width:8px;
  box-shadow:0 0 30px 8px rgba(175,120,255,.7), 0 0 80px 16px rgba(10,132,255,.4);
}

/* KONUŞUYOR — nefes efekti */
.ema-serit[data-durum="konusuyor"] .ema-serit-ust,
.ema-serit[data-durum="konusuyor"] .ema-serit-alt,
.ema-serit[data-durum="konusuyor"] .ema-serit-sol,
.ema-serit[data-durum="konusuyor"] .ema-serit-sag{
  animation-duration:3s;
}
.ema-serit[data-durum="konusuyor"] .ema-serit-ust,
.ema-serit[data-durum="konusuyor"] .ema-serit-alt{
  animation:ema-yatay 3s linear infinite, ema-nefes 1.5s ease-in-out infinite alternate;
}
.ema-serit[data-durum="konusuyor"] .ema-serit-sol,
.ema-serit[data-durum="konusuyor"] .ema-serit-sag{
  animation:ema-dikey 3s linear infinite, ema-nefes 1.5s ease-in-out infinite alternate;
}

@keyframes ema-nefes{
  from{opacity:.6; filter:blur(0)} to{opacity:1; filter:blur(2px)}
}

/* ---- Alt bar — durum + cevap + yazı ---- */
.ema-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:9998;
  opacity:0; transform:translateY(100%);
  transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.ema-bar.aktif{
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}
.ema-bar-ic{
  max-width:720px; margin:0 auto;
  padding:12px 20px 14px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  backdrop-filter:blur(32px) saturate(180%);
  border:1px solid var(--glass-brd);
  border-bottom:none;
  border-radius:20px 20px 0 0;
  box-shadow:0 -4px 32px rgba(0,0,0,.1);
  display:flex; align-items:center; gap:14px;
}
.ema-bar-sol{
  display:flex; align-items:center; gap:10px; flex:1; min-width:0;
}
.ema-bar-ikon{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(from 180deg, #0A84FF, #30D19E, #AF78FF, #FF9F4A, #0A84FF);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff;
  animation:ema-yavas-don 6s linear infinite;
}
@keyframes ema-yavas-don{
  from{transform:rotate(0deg)} to{transform:rotate(360deg)}
}
.ema-bar-metin{
  flex:1; min-width:0;
}
.ema-durum{
  font-size:12px; color:var(--muted); line-height:1.3;
}
.ema-bar-cevap{
  font-size:14px; color:var(--text); line-height:1.4;
  max-height:42px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  animation:ema-bar-gir .3s ease-out;
}
.ema-bar-cevap:empty{ display:none; }
@keyframes ema-bar-gir{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}
.ema-bar-sag{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.ema-yaz{
  width:200px; border:1px solid var(--hair); border-radius:14px;
  padding:8px 14px; font-size:14px; font-family:inherit;
  background:var(--glass-2); color:var(--text);
  outline:none; resize:none; min-height:36px; max-height:36px;
}
.ema-yaz:focus{ border-color:var(--accent); }
.ema-yaz::placeholder{ color:var(--faint); }
.ema-gonder{
  width:34px; height:34px; border-radius:50%;
  border:none; background:var(--accent);
  color:#fff; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .1s;
  flex-shrink:0;
}
.ema-gonder:hover{ background:var(--accent-2); }
.ema-gonder:active{ transform:scale(0.92); }
.ema-kapat{
  width:28px; height:28px; border-radius:50%;
  border:none; background:var(--hair);
  color:var(--muted); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.ema-kapat:hover{ background:var(--crit-soft); color:var(--crit); }

/* Mobil uyum */
@media (max-width:480px){
  .ema-bar-ic{ padding:10px 14px 12px; gap:10px; }
  .ema-yaz{ width:120px; }
  .ema-kure{ bottom:16px; right:16px; width:52px; height:52px; }
  .ema-kure-ikon{ font-size:18px; }
}