/* =====================================================================
   MUHAMMER UI  v2
   Tek stylesheet. Her uygulamaya kendi 2 marka rengi verilir,
   geri kalan her şey sabit kalır.

   KULLANIM
   1) Sayfanın kök etiketinde tema: html lang="tr" data-theme="light"
      Tema BODY'de değil, HTML etiketinde durur.
   2) Baslik bolumune DM Sans + DM Mono baglanir (Google Fonts).
   3) Bu dosya baglanir: rel="stylesheet" href="muhammer-ui.css"
   4) Marka rengi — SADECE bu iki degisken degisir:
        :root{ --brand:#6366f1; --brand-2:#0891b2; }

   HAZIR MARKALAR
      Köse / SahaYönetim : #6366f1 + #0891b2   (indigo)
      YapılıO            : #ED9B40 + #262B31   (amber / antrasit)
      Bebeklik           : #2FABBA + #0E7C86   (turkuaz)

   MUTLAK KURAL
      Bu dosyanın dışında hiçbir yere sabit renk yazılmaz.
      Sabit renk yazan sayfa koyu modda bozulur.

   NOT: Bu açıklama bloğunda HTML etiketi yazılmaz — stil bloğunu erken kapatır.
   ===================================================================== */

:root{
  /* ---- MARKA (uygulamaya göre değişen tek şey) ---- */
  --brand:#6366f1;
  --brand-2:#0891b2;

  /* ---- markadan türeyenler (elle dokunma) ---- */
  --brand-soft:color-mix(in srgb, var(--brand) 11%, #ffffff);
  --brand-lift:color-mix(in srgb, var(--brand) 88%, #ffffff);
  --brand-hover:color-mix(in srgb, var(--brand) 86%, #000000);

  /* ---- yüzey ve metin ---- */
  --bg:#f9fafb;
  --surface:#ffffff;
  --surface-2:#f3f4f6;
  --soft:#fbfcfd;
  --hover:#f3f4f6;
  --border:#e5e7eb;
  --border-strong:#d1d5db;
  --text:#111827;
  --text-2:#6b7280;
  --text-muted:#9ca3af;

  /* ---- durum renkleri (markadan bağımsız, sabit) ---- */
  --green:#10b981; --green-soft:#d1fae5;
  --yellow:#f59e0b; --yellow-soft:#fef3c7;
  --red:#ef4444;    --red-soft:#fee2e2;
  --blue:#3b82f6;   --blue-soft:#dbeafe;
  --purple:#8b5cf6; --purple-soft:#ede9fe;

  /* ---- gölge ---- */
  --sh-1:0 1px 2px rgba(17,24,39,.06);
  --sh-2:0 1px 2px rgba(17,24,39,.06), 0 4px 12px -4px rgba(17,24,39,.10);
  --sh-3:0 2px 4px rgba(17,24,39,.08), 0 12px 28px -10px rgba(17,24,39,.22);
  --sh-4:0 4px 8px rgba(17,24,39,.10), 0 24px 48px -16px rgba(17,24,39,.30);
  --sh-btn:0 1px 2px rgba(17,24,39,.16), inset 0 1px 0 rgba(255,255,255,.18);
  --sh-in:inset 0 1px 1px rgba(17,24,39,.04);

  /* ---- ölçü ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  --r-sm:7px; --r:10px; --r-lg:14px; --r-xl:18px;
  --topbar-h:50px;
  --sidebar-w:214px;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* ---- iPhone çentik / alt çubuk ---- */
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
}

[data-theme="dark"]{
  --brand-soft:color-mix(in srgb, var(--brand) 26%, #1e293b);
  --brand-lift:color-mix(in srgb, var(--brand) 82%, #ffffff);
  --bg:#0f172a;
  --surface:#1e293b;
  --surface-2:#334155;
  --soft:#243044;
  --hover:#334155;
  --border:#334155;
  --border-strong:#475569;
  --text:#f1f5f9;
  --text-2:#94a3b8;
  --text-muted:#64748b;
  --green-soft:#064e3b; --yellow-soft:#451a03; --red-soft:#450a0a;
  --blue-soft:#172554;  --purple-soft:#2e1065;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -4px rgba(0,0,0,.6);
  --sh-3:0 2px 4px rgba(0,0,0,.5), 0 12px 28px -10px rgba(0,0,0,.8);
  --sh-4:0 4px 8px rgba(0,0,0,.6), 0 24px 48px -16px rgba(0,0,0,.9);
  --sh-btn:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  --sh-in:inset 0 1px 1px rgba(0,0,0,.3);
}

/* ===================================================================
   TEMEL
   =================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.5;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
svg{display:block}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
.mono{font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.num{text-align:right;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.note{font-size:11.8px;color:var(--text-muted);line-height:1.6}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* odak — klavye ile gezerken görünür olmalı */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ===================================================================
   İSKELET
   =================================================================== */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  padding-bottom:var(--safe-b);
  transition:width .2s var(--ease),left .25s var(--ease);
}
.sidebar.collapsed{width:58px;flex-basis:58px}
.brand{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--border)}
.brand .logo{
  min-width:32px;height:32px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--brand-lift),var(--brand-2));
  display:grid;place-items:center;color:#fff;
  box-shadow:0 2px 5px color-mix(in srgb,var(--brand) 35%,transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand .name{font-weight:700;font-size:14px;line-height:1.15;white-space:nowrap;overflow:hidden}
.brand .sub{font-size:10.5px;color:var(--text-muted);white-space:nowrap}
.sidebar.collapsed .brand .txt{display:none}

.nav{padding:8px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.nav-grp{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
  font-weight:700;padding:13px 10px 5px;white-space:nowrap}
.sidebar.collapsed .nav-grp{display:none}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;
  color:var(--text-2);font-weight:500;font-size:13px;
  width:100%;text-align:left;position:relative;
  min-height:38px;transition:.13s var(--ease);
}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item.active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 14%,#fff),var(--brand-soft));
  color:var(--brand);font-weight:600;
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.6);
}
[data-theme="dark"] .nav-item.active{background:var(--brand-soft);box-shadow:var(--sh-1)}
.nav-item.active::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--brand)}
.nav-item svg{min-width:17px;flex:none}
.nav-item .lbl{white-space:nowrap;overflow:hidden}
.nav-item .dot{margin-left:auto;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:999px;
  background:var(--surface-2);color:var(--text-2);font-family:'DM Mono',monospace}
.nav-item .dot.hot{background:var(--red);color:#fff}
.nav-item.active .dot{background:var(--brand);color:#fff}
.sidebar.collapsed .nav-item .lbl,.sidebar.collapsed .nav-item .dot{display:none}
.side-foot{padding:8px;border-top:1px solid var(--border)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  min-height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:0 18px;
  position:sticky;top:0;z-index:30;box-shadow:var(--sh-1);
  padding-top:var(--safe-t);
}
.crumb{font-size:13px;color:var(--text-2)}
.crumb b{color:var(--text);font-weight:600}
.topbar .sp{flex:1}
.menubtn{display:none;width:36px;height:36px;border-radius:9px;place-items:center;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2)}
.content{padding:18px;max-width:1180px;width:100%;margin:0 auto;
  padding-left:max(18px,var(--safe-l));padding-right:max(18px,var(--safe-r));
  padding-bottom:calc(18px + var(--safe-b))}

.who{display:flex;align-items:center;gap:8px;padding:4px 11px 4px 5px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);font-size:12.5px;box-shadow:var(--sh-1);white-space:nowrap}
.who .av{width:22px;height:22px;border-radius:7px;flex:none;
  background:linear-gradient(140deg,var(--brand-lift),var(--brand-2));color:#fff;
  display:grid;place-items:center;font-size:9.5px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

.scrim{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:35;
  backdrop-filter:blur(2px)}
.scrim.show{display:block}

/* ===================================================================
   SEKMELER
   =================================================================== */
.subtabs{display:flex;gap:3px;margin-bottom:16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:3px;width:fit-content;max-width:100%;overflow-x:auto;
  box-shadow:var(--sh-1);-webkit-overflow-scrolling:touch}
.subtab{padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text-2);
  white-space:nowrap;display:flex;align-items:center;gap:7px;transition:.13s var(--ease);min-height:34px}
.subtab:hover{color:var(--text)}
.subtab.active{background:linear-gradient(180deg,var(--brand-lift),var(--brand));color:#fff;box-shadow:var(--sh-btn)}
.subtab .badge-n{background:var(--red);color:#fff;font-size:9.5px;font-weight:700;padding:1px 6px;
  border-radius:999px;font-family:'DM Mono',monospace}
.subtab.active .badge-n{background:rgba(255,255,255,.26)}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto;margin-bottom:16px}
.tab{padding:11px 15px;font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:7px}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ===================================================================
   KART
   =================================================================== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden}
.card+.card{margin-top:16px}
.card-h{padding:13px 17px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.card-h .ic{width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
[data-theme="dark"] .card-h .ic{box-shadow:none}
.card-h h3{font-size:14.5px;font-weight:700}
.card-h .sub{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.card-h .r{margin-left:auto}
.card-b{padding:17px}
.card-f{padding:11px 17px;background:var(--soft);border-top:1px solid var(--border);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--text-muted)}
.card-b.flush{padding:0}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px 17px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px 17px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px 17px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sp2{margin-left:auto}
.sec{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);
  font-weight:700;margin:20px 0 11px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.sec:first-child{margin-top:0}

/* ===================================================================
   KPI — üç çeşit
   =================================================================== */
/* 1) düz */
.kpi{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.kpi .k{flex:1;min-width:140px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--sh-2)}
.kpi .k .l{font-size:11.5px;color:var(--text-2);font-weight:600}
.kpi .k .v{font-size:23px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.kpi .k .v small{font-size:12px;color:var(--text-muted);font-weight:600}
.kpi .k .s{font-size:11px;color:var(--text-muted);margin-top:1px}

/* 2) renkli — renk ANLAM taşır, dekorasyon değil */
.ckpi{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ck{border-radius:var(--r);padding:11px 13px 11px 15px;position:relative;overflow:hidden;
  border:1px solid var(--border)}
.ck::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac)}
.ck .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);font-weight:700}
.ck .v{font-size:19px;font-weight:700;color:var(--ac);margin-top:3px;letter-spacing:-.02em}
.ck .s{font-size:11px;color:var(--text-muted);margin-top:1px}
.ck.blue{--ac:var(--blue);background:var(--blue-soft)}
.ck.green{--ac:var(--green);background:var(--green-soft)}
.ck.red{--ac:var(--red);background:var(--red-soft)}
.ck.amber{--ac:var(--yellow);background:var(--yellow-soft)}
.ck.purple{--ac:var(--purple);background:var(--purple-soft)}
.ck.brand{--ac:var(--brand);background:var(--brand-soft)}

/* 3) madalyonlu — uzun tutar listelerinde */
.mkpi{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mk{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:13px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-1)}
.mk .md{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
[data-theme="dark"] .mk .md{box-shadow:none}
.mk .tx .v{font-size:17px;font-weight:700;letter-spacing:-.02em}
.mk .tx .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);
  font-weight:700;margin-top:1px}
.md.blue{background:var(--blue-soft);color:var(--blue)}
.md.purple{background:var(--purple-soft);color:var(--purple)}
.md.green{background:var(--green-soft);color:var(--green)}
.md.red{background:var(--red-soft);color:var(--red)}
.md.amber{background:var(--yellow-soft);color:var(--yellow)}
.md.brand{background:var(--brand-soft);color:var(--brand)}

/* ===================================================================
   NESNE KARTI — fiziksel karşılığı olan şeyler
   kredi kartı · banka hesabı · araç · poliçe · sözleşme
   =================================================================== */
.obj{border-radius:var(--r-xl);padding:17px;color:#fff;box-shadow:var(--sh-3);
  position:relative;overflow:hidden}
.obj+.obj{margin-top:13px}
.obj::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% -10%, rgba(255,255,255,.22), transparent 60%)}
.obj>*{position:relative;z-index:1}
.obj .oh{display:flex;align-items:flex-start;gap:11px}
.obj .oh b{font-size:16.5px;letter-spacing:-.01em;display:block}
.obj .oh span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.72}
.obj .oh .ib{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.obj .oh .st{margin-left:auto;background:rgba(255,255,255,.2);border-radius:999px;padding:4px 11px;
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.obj .chip{margin-left:auto;width:32px;height:24px;border-radius:5px;flex:none;
  background:linear-gradient(150deg,#f7c14a,#d98b1a);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.obj .no{font-family:'DM Mono',monospace;font-size:15px;letter-spacing:.22em;margin:15px 0 13px;opacity:.9}
.obj .rows{display:flex;gap:12px}
.obj .rows>div{flex:1}
.obj .rows .l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.7}
.obj .rows .v{font-family:'DM Mono',monospace;font-size:14px;font-weight:500;margin-top:2px}
.obj .rows>div:nth-child(2){text-align:center}
.obj .rows>div:nth-child(3){text-align:right}
.obj .big{display:flex;align-items:flex-end;gap:12px;margin:13px 0 10px}
.obj .big .l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.72}
.obj .big .lft .v{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1}
.obj .big .lft .v small{font-size:14px;font-weight:600;opacity:.8}
.obj .big .rgt{margin-left:auto;text-align:right}
.obj .big .rgt .v{font-family:'DM Mono',monospace;font-size:17px;font-weight:500}
.obj .track{height:5px;border-radius:99px;background:rgba(255,255,255,.24);overflow:hidden;margin:12px 0}
.obj .track i{display:block;height:100%;border-radius:99px;background:rgba(255,255,255,.92)}
.obj .foot{background:rgba(0,0,0,.16);border-radius:10px;padding:8px 11px;
  display:flex;align-items:center;gap:10px;font-size:11.5px;flex-wrap:wrap}
.obj .foot .sep{width:1px;height:14px;background:rgba(255,255,255,.28)}
.obj .foot b{font-family:'DM Mono',monospace;font-weight:500}
.obj .bot{display:flex;align-items:center;gap:10px;font-size:11.5px;opacity:.85}
.obj .acts{margin-left:auto;display:flex;gap:6px}
.obj .acts button{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;color:#fff;transition:.13s}
.obj .acts button:hover{background:rgba(255,255,255,.3)}

/* nesne kartı renkleri — kullanıcı seçer veya otomatik */
.g-slate{background:linear-gradient(135deg,#4b5563,#334155)}
.g-navy{background:linear-gradient(135deg,#3b3f9e,#252a7a)}
.g-indigo{background:linear-gradient(135deg,#6366f1,#4338ca)}
.g-purple{background:linear-gradient(135deg,#a855f7,#7c2fd4)}
.g-emerald{background:linear-gradient(135deg,#10b981,#047857)}
.g-teal{background:linear-gradient(135deg,#0d9488,#115e59)}
.g-amber{background:linear-gradient(135deg,#d97706,#b45309)}
.g-orange{background:linear-gradient(135deg,#e8730c,#c2410c)}
.g-rose{background:linear-gradient(135deg,#e11d48,#9f1239)}
.g-red{background:linear-gradient(135deg,#dc2626,#991b1b)}
.g-pink{background:linear-gradient(135deg,#db2777,#9d174d)}
.g-dark{background:linear-gradient(135deg,#334155,#1e293b)}
/* otomatik: kullanım oranına göre */
.g-auto-ok{background:linear-gradient(135deg,#10b981,#047857)}
.g-auto-warn{background:linear-gradient(135deg,#d97706,#b45309)}
.g-auto-bad{background:linear-gradient(135deg,#dc2626,#991b1b)}

/* ===================================================================
   FORM
   =================================================================== */
.field{min-width:0}
.field label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:5px}
.field label .req{color:var(--red)}
.field label .opt{color:var(--text-muted);font-weight:400;font-size:11px}
.field input,.field select,.field textarea{
  width:100%;padding:9px 11px;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);
  box-shadow:var(--sh-in);transition:.13s;
  font-size:14px;                     /* mobilde 16px'e çıkar — aşağıda */
}
.field textarea{min-height:76px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft), var(--sh-in)}
.field input:disabled,.field select:disabled{opacity:.6;cursor:not-allowed}
.field input.auto{background:var(--surface-2);border-style:dashed;box-shadow:none}
.field input.mono,.field .mono{font-family:'DM Mono',monospace}
.field .hint{font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.5}

/* hatalı alan */
.field.err input,.field.err select,.field.err textarea{border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft), var(--sh-in)}
.field .errmsg{display:none;font-size:11.5px;color:var(--red);margin-top:4px;
  align-items:center;gap:5px;font-weight:600}
.field.err .errmsg{display:flex}
.field.err .hint{display:none}

/* onay kutusu ve radyo */
.chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;padding:5px 0;min-height:34px}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk .bx{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--border-strong);
  background:var(--surface);flex:none;display:grid;place-items:center;color:transparent;
  box-shadow:var(--sh-in);transition:.12s;margin-top:1px}
.chk input:checked+.bx{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--sh-btn)}
.chk input:focus-visible+.bx{outline:2px solid var(--brand);outline-offset:2px}
.chk .bx.round{border-radius:50%}
.chk .tx{font-size:13px}
.chk .tx .d{font-size:11.5px;color:var(--text-muted);margin-top:1px}

/* anahtar */
.sw{width:42px;height:24px;border-radius:999px;background:var(--border-strong);position:relative;
  flex:none;transition:background .2s var(--ease);box-shadow:var(--sh-in)}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.28)}
.sw[aria-checked="true"]{background:var(--brand)}
.sw[aria-checked="true"]::after{transform:translateX(18px)}
.sw:disabled{opacity:.5;cursor:not-allowed}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--border);min-height:52px}
.swrow:last-child{border-bottom:none}
.swrow .t{font-size:13.5px;font-weight:600}
.swrow .d{font-size:11.5px;color:var(--text-muted);margin-top:2px;max-width:62ch}

/* segment seçici */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:3px;gap:3px;box-shadow:var(--sh-in)}
.seg button{padding:7px 15px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--text-2);min-height:34px}
.seg button.on{background:var(--surface);color:var(--brand);box-shadow:var(--sh-1)}

/* büyük seçenek kartı */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
.opt{border:1.5px solid var(--border);border-radius:var(--r);padding:13px;text-align:left;
  background:var(--surface);transition:.14s var(--ease);position:relative}
.opt:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.opt[aria-checked="true"]{border-color:var(--brand);background:var(--brand-soft)}
.opt .nm{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px}
.opt .ds{font-size:11.5px;color:var(--text-muted);margin-top:3px;line-height:1.5}
.opt .tk{position:absolute;top:11px;right:11px;width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--border-strong);display:grid;place-items:center;color:transparent}
.opt[aria-checked="true"] .tk{background:var(--brand);border-color:var(--brand);color:#fff}

/* renk seçici */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:9px}
.sw-btn{aspect-ratio:1;border-radius:12px;position:relative;
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.28);transition:.14s var(--ease)}
.sw-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.28)}
.sw-btn[aria-pressed="true"]{outline:2.5px solid var(--brand);outline-offset:2.5px}
.sw-btn .tk{position:absolute;inset:0;display:none;place-items:center;color:#fff}
.sw-btn[aria-pressed="true"] .tk{display:grid}
.sw-auto{background:repeating-linear-gradient(45deg,#f59e0b 0 9px,#6366f1 9px 18px,#ef4444 18px 27px)}

/* dosya yükleme */
.drop{border:1.5px dashed var(--border-strong);border-radius:var(--r);padding:26px 18px;text-align:center;
  background:var(--soft);transition:.14s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.drop .ic{color:var(--text-muted);margin:0 auto 9px}
.drop.over .ic,.drop:hover .ic{color:var(--brand)}
.drop .t{font-size:13px;font-weight:600}
.drop .d{font-size:11.5px;color:var(--text-muted);margin-top:3px}
.filerow{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface);margin-top:8px}
.filerow .fi{width:32px;height:32px;border-radius:8px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex:none}
.filerow .fn{flex:1;min-width:0;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filerow .fs{font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace}

/* ===================================================================
   BUTON
   =================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-sm);
  font-size:12.8px;font-weight:600;transition:.12s;
  border:1px solid transparent;min-height:38px;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(180deg,var(--brand-lift),var(--brand));color:#fff;box-shadow:var(--sh-btn)}
.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,var(--brand),var(--brand-hover))}
.btn-secondary{background:linear-gradient(180deg,color-mix(in srgb,var(--brand-2) 88%,#fff),var(--brand-2));
  color:#fff;box-shadow:var(--sh-btn)}
.btn-outline{background:var(--surface);border-color:var(--border-strong);color:var(--text);box-shadow:var(--sh-1)}
.btn-outline:hover:not(:disabled){background:var(--hover);border-color:var(--text-muted)}
.btn-soft{background:var(--brand-soft);color:var(--brand)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover:not(:disabled){background:var(--hover);color:var(--text)}
.btn-green{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 86%,#fff),var(--green));
  color:#fff;box-shadow:var(--sh-btn)}
.btn-danger{background:linear-gradient(180deg,color-mix(in srgb,var(--red) 88%,#fff),var(--red));
  color:#fff;box-shadow:var(--sh-btn)}
.btn-sm{padding:6px 11px;font-size:12px;min-height:32px}
.btn-lg{padding:11px 20px;font-size:14px;min-height:44px}
.btn-icon{width:38px;padding:0}
.btn-icon.btn-sm{width:32px}
.btn-pill{border-radius:999px}
.btn-block{width:100%}
/* yükleniyor */
.btn.loading{pointer-events:none;position:relative;color:transparent!important}
.btn.loading::after{content:'';position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.btn-outline.loading::after,.btn-ghost.loading::after{border-color:var(--border-strong);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===================================================================
   TABLO  +  mobil kart listesi
   =================================================================== */
.tbl-wrap{overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - var(--topbar-h) - 132px)}
/* Üst yatay scroll — geniş tabloda alta inmeden sağa kaydır (JS ile senkron) */
.tbl-topscroll{overflow-x:auto;overflow-y:hidden;background:var(--surface);height:16px}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-2);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--soft);white-space:nowrap}
table.data thead th{position:sticky;top:0;z-index:5}
/* Uzun ürün/sipariş adı tek satır — taşarsa … ile kısalır (tam adı title'da) */
.tad{display:block;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:1300px){.tad{max-width:340px}}
@media(max-width:860px){.tad{max-width:64vw}}
table.data th.sortable{cursor:pointer;user-select:none}
table.data th.sortable:hover{color:var(--text)}
table.data td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover td{background:var(--hover)}
table.data tr.sel td{background:var(--brand-soft)}
table.data td.mono,table.data th.mono{font-family:'DM Mono',monospace;font-size:12.3px}
.sub2{font-size:11px;color:var(--text-muted);display:block;margin-top:1px}

/* genişleyen satır */
.exp-row td{background:var(--soft)!important;padding:0!important}
.exp-in{padding:14px 17px;border-top:1px dashed var(--border)}
.exp-btn{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--text-2)}
.exp-btn:hover{background:var(--hover);color:var(--text)}
.exp-btn svg{transition:transform .18s var(--ease)}
.exp-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

/* toplu seçim şeridi */
.bulkbar{display:flex;align-items:center;gap:11px;padding:10px 14px;background:var(--brand-soft);
  border-bottom:1px solid color-mix(in srgb,var(--brand) 22%,transparent);font-size:12.5px;
  color:var(--brand);font-weight:600;flex-wrap:wrap}

/* kart listesi — mobilde tablo yerine */
.rowc{border:1px solid var(--border);border-radius:var(--r);padding:12px;background:var(--surface);
  box-shadow:var(--sh-1)}
.rowc+.rowc{margin-top:9px}
.rowc .r1{display:flex;align-items:flex-start;gap:10px}
.rowc .r1 .dt{font-family:'DM Mono',monospace;font-size:11.5px;color:var(--text-muted);
  background:var(--soft);border:1px solid var(--border);border-radius:6px;padding:2px 7px;flex:none}
.rowc .r1 .nm{font-weight:700;font-size:13.5px;line-height:1.35}
.rowc .r1 .am{margin-left:auto;text-align:right;flex:none}
.rowc .r1 .am .v{font-family:'DM Mono',monospace;font-size:14.5px;font-weight:700}
.rowc .ds{font-size:12px;color:var(--text-2);margin-top:7px;line-height:1.5}
.rowc .r2{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--border);flex-wrap:wrap}
.pill{background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:3px 10px;
  font-size:11px;font-weight:600;font-family:'DM Mono',monospace}

/* sayfalama */
.pager{display:flex;align-items:center;gap:6px;justify-content:center;padding:13px;flex-wrap:wrap}
.pager button{min-width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);font-size:12.5px;font-weight:600;color:var(--text-2);padding:0 9px}
.pager button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pager button.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--sh-btn)}
.pager button:disabled{opacity:.4;cursor:not-allowed}

/* ===================================================================
   ROZET · ÇUBUK · BİLGİ KUTUSU
   =================================================================== */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;white-space:nowrap}
.badge .bd{width:6px;height:6px;border-radius:50%;flex:none}
.b-ok{background:var(--green-soft);color:var(--green)}    .b-ok .bd{background:var(--green)}
.b-wait{background:var(--yellow-soft);color:var(--yellow)} .b-wait .bd{background:var(--yellow)}
.b-err{background:var(--red-soft);color:var(--red)}       .b-err .bd{background:var(--red)}
.b-info{background:var(--brand-soft);color:var(--brand)}  .b-info .bd{background:var(--brand)}
.b-muted{background:var(--surface-2);color:var(--text-2)} .b-muted .bd{background:var(--text-muted)}

.bar{height:6px;border-radius:99px;background:var(--border);overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(180deg,var(--brand-lift),var(--brand));transition:width .4s var(--ease)}
.bar i.warn{background:linear-gradient(180deg,color-mix(in srgb,var(--yellow) 85%,#fff),var(--yellow))}
.bar i.bad{background:linear-gradient(180deg,color-mix(in srgb,var(--red) 85%,#fff),var(--red))}
.bar i.ok{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 85%,#fff),var(--green))}
.ub{min-width:104px}
.ub .lbl{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--text-muted);font-weight:600}
.ub .lbl b{color:var(--text);font-family:'DM Mono',monospace;font-weight:700}

.hint-box{display:flex;gap:10px;background:var(--brand-soft);
  border:1px solid color-mix(in srgb,var(--brand) 24%,transparent);border-radius:var(--r);
  padding:11px 14px;font-size:12.5px;color:var(--brand);box-shadow:var(--sh-1);line-height:1.55}
.hint-box+*{margin-top:15px}
.hint-box svg{min-width:16px;margin-top:1px;flex:none}
.hint-box.amber{background:var(--yellow-soft);border-color:color-mix(in srgb,var(--yellow) 32%,transparent);
  color:color-mix(in srgb,var(--yellow) 78%,#000)}
[data-theme="dark"] .hint-box.amber{color:var(--yellow)}
.hint-box.danger{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 30%,transparent);
  color:color-mix(in srgb,var(--red) 82%,#000)}
[data-theme="dark"] .hint-box.danger{color:var(--red)}
.hint-box.ok{background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 30%,transparent);
  color:color-mix(in srgb,var(--green) 80%,#000)}
[data-theme="dark"] .hint-box.ok{color:var(--green)}

/* denetim satırı — kontrol listesi */
.chkrow{display:flex;align-items:flex-start;gap:14px;padding:14px;border-bottom:1px solid var(--border)}
.chkrow:last-child{border-bottom:none}
.chkrow .ci{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;margin-top:1px}
.chkrow.ok .ci{background:var(--green-soft);color:var(--green)}
.chkrow.wait .ci{background:var(--yellow-soft);color:var(--yellow)}
.chkrow.no .ci{background:var(--red-soft);color:var(--red)}
.chkrow .cb{flex:1;min-width:0}
.chkrow .cb b{font-size:13.5px;display:block}
.chkrow .cb span{font-size:12.3px;color:var(--text-muted);display:block;margin-top:2px;line-height:1.5}

/* ===================================================================
   MODAL   (mobilde alttan panel)
   =================================================================== */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);
  z-index:80;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.modal-bg.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  width:100%;max-width:560px;max-height:85vh;display:flex;flex-direction:column;
  box-shadow:var(--sh-4);animation:pop .22s var(--ease);overflow:hidden}
.modal.sm{max-width:420px}      /* onay */
.modal.md{max-width:560px}      /* form */
.modal.lg{max-width:760px}      /* detay */
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
.modal-h{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px;flex:none}
.modal-h .ic{width:32px;height:32px;border-radius:9px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex:none}
.modal-h .ic.danger{background:var(--red-soft);color:var(--red)}
.modal-h h3{font-size:15.5px;font-weight:700}
.modal-h .sub{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.modal-h .x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  color:var(--text-2);flex:none}
.modal-h .x:hover{background:var(--hover);color:var(--text)}
.modal-b{padding:20px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.modal-f{padding:13px 20px;border-top:1px solid var(--border);background:var(--soft);
  display:flex;gap:10px;justify-content:flex-end;flex:none;flex-wrap:wrap;
  padding-bottom:calc(13px + var(--safe-b))}
.modal-f .lft{margin-right:auto}
.modal-grip{display:none}

/* ===================================================================
   TOAST
   =================================================================== */
.toast{position:fixed;left:50%;bottom:calc(22px + var(--safe-b));transform:translate(-50%,120px);
  background:var(--text);color:var(--bg);padding:12px 18px;border-radius:999px;
  display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;
  box-shadow:var(--sh-4);z-index:99;max-width:calc(100vw - 32px);
  transition:transform .3s var(--ease),opacity .3s;opacity:0}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast .i{flex:none}
.toast.ok .i{color:var(--green)}
.toast.err .i{color:var(--red)}

/* bağlantı koptu şeridi */
.offline{position:fixed;top:0;left:0;right:0;z-index:120;background:var(--red);color:#fff;
  text-align:center;font-size:12.5px;font-weight:600;padding:calc(7px + var(--safe-t)) 12px 7px;
  transform:translateY(-100%);transition:transform .3s var(--ease)}
.offline.show{transform:none}

/* ===================================================================
   BOŞ DURUM · YÜKLENİYOR · HATA
   =================================================================== */
.empty{text-align:center;padding:44px 22px}
.empty .ei{width:56px;height:56px;border-radius:17px;background:var(--surface-2);color:var(--text-muted);
  display:grid;place-items:center;margin:0 auto 15px}
.empty h4{font-size:15px;font-weight:700}
.empty p{font-size:12.8px;color:var(--text-muted);margin-top:6px;max-width:44ch;
  margin-left:auto;margin-right:auto;line-height:1.6}
.empty .acts{margin-top:17px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.empty.danger .ei{background:var(--red-soft);color:var(--red)}

/* iskelet */
.sk{background:linear-gradient(90deg,var(--surface-2) 25%,var(--hover) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:shim 1.4s ease-in-out infinite;border-radius:6px}
@keyframes shim{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-line{height:12px;margin-bottom:9px}
.sk-line.w40{width:40%} .sk-line.w60{width:60%} .sk-line.w80{width:80%}
.sk-box{height:66px;border-radius:var(--r)}
.sk-circle{width:40px;height:40px;border-radius:12px;flex:none}

/* ===================================================================
   ADIM ÇUBUĞU
   =================================================================== */
.wiz{display:flex;gap:2px;overflow-x:auto;margin-bottom:18px;-webkit-overflow-scrolling:touch}
.wstep{flex:1;min-width:118px;padding:11px 14px;border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--border);font-size:12.5px;color:var(--text-muted);
  display:flex;align-items:center;gap:9px;transition:.16s var(--ease)}
.wstep .n{width:21px;height:21px;border-radius:50%;background:var(--surface-2);color:var(--text-muted);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.wstep.done{border-color:color-mix(in srgb,var(--green) 32%,transparent);color:var(--green);background:var(--green-soft)}
.wstep.done .n{background:var(--green);color:#fff}
.wstep.now{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);font-weight:600;box-shadow:var(--sh-1)}
.wstep.now .n{background:var(--brand);color:#fff}

/* dikey ilerleme */
.prog{display:flex;flex-direction:column}
.pstep{display:flex;gap:14px;padding:13px 0;position:relative}
.pstep:not(:last-child)::before{content:'';position:absolute;left:13px;top:38px;bottom:-4px;
  width:2px;background:var(--border)}
.pstep.done:not(:last-child)::before{background:var(--green)}
.pstep .d{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--surface-2);color:var(--text-muted);font-size:12px;font-weight:700;z-index:1}
.pstep.done .d{background:var(--green);color:#fff}
.pstep.now .d{background:var(--brand);color:#fff}
.pstep .b{flex:1;padding-top:3px;min-width:0}
.pstep .b b{font-size:13.5px;display:block}
.pstep .b span{font-size:12.3px;color:var(--text-muted);display:block;margin-top:3px;line-height:1.55}
.pstep.dim .b b{color:var(--text-muted)}

/* ===================================================================
   FİLTRE ÇUBUĞU
   =================================================================== */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters select,.filters input{width:auto;min-width:126px;padding:8px 10px;font-size:12.5px;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);
  color:var(--text);box-shadow:var(--sh-in);min-height:36px}
.search{position:relative;flex:1;min-width:180px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted)}
.search input{width:100%;padding-left:31px}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft),var(--sh-in)}
/* aktif filtre etiketi */
.fchip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--brand);
  border-radius:999px;padding:4px 6px 4px 11px;font-size:11.5px;font-weight:600}
.fchip button{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 20%,transparent);color:var(--brand)}

/* ===================================================================
   MOBİL
   =================================================================== */
@media(max-width:860px){
  .sidebar{position:fixed;left:calc(-1 * var(--sidebar-w) - 8px);top:0;z-index:40;
    box-shadow:var(--sh-4);padding-top:var(--safe-t)}
  .sidebar.open{left:0}
  .menubtn{display:grid}
  .content{padding:14px;padding-bottom:calc(14px + var(--safe-b))}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .ckpi,.mkpi{grid-template-columns:1fr}

  /* iOS: 16px altı yazıda odaklanınca sayfayı zorla yakınlaştırır */
  .field input,.field select,.field textarea,.filters input,.filters select,.search input{font-size:16px}

  /* modal → alttan panel */
  .modal-bg{align-items:flex-end;padding:0}
  .modal,.modal.sm,.modal.md,.modal.lg{
    max-width:100%;max-height:92vh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:none;
    animation:sheet .26s var(--ease)}
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
  .modal-grip{display:block;width:38px;height:4px;border-radius:99px;background:var(--border-strong);
    margin:9px auto 0;flex:none}
  .modal-f{flex-direction:column-reverse}
  .modal-f .btn{width:100%}
  .modal-f .lft{margin-right:0;width:100%}

  /* uzun formda kaydet çubuğu ekranın altına sabitlenir */
  .stickybar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--border);
    padding:11px 14px;padding-bottom:calc(11px + var(--safe-b));display:flex;gap:9px;
    box-shadow:0 -4px 14px -6px rgba(0,0,0,.18);z-index:20}
  .stickybar .btn{flex:1}

  /* dokunma alanı */
  .btn{min-height:42px}
  .btn-sm{min-height:36px}
  .nav-item{min-height:44px}
  .subtab{min-height:38px}
}
@media(min-width:861px){
  .stickybar{display:flex;gap:10px}
  /* masaüstünde tablo görünür, kart listesi gizli */
  .only-mobile{display:none}
}
@media(max-width:860px){
  /* mobilde tablo gizli, kart listesi görünür */
  .only-desktop{display:none}
}

/* dokunmatikte hover yok */
@media(hover:none){
  .btn:hover,.nav-item:hover,table.data tbody tr:hover td{background:inherit}
  .btn-primary:hover{background:linear-gradient(180deg,var(--brand-lift),var(--brand))}
}

/* yazdırma */
@media print{
  .sidebar,.topbar,.toast,.modal-bg,.stickybar,.filters,.pager{display:none!important}
  .content{padding:0;max-width:100%}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  body{background:#fff;color:#000;font-size:11pt}
}

/* hareket azaltma tercihi */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ===================================================================
   AYAR SATIRI DENETİMLERİ
   .swrow içine doğrudan konan select ve input'lar
   (.field kabı olmadan kullanıldığında)
   =================================================================== */
.swrow > div:first-child{flex:1;min-width:0;max-width:62ch}
.swrow > select,
.swrow > input{
  flex:none;width:auto;min-width:126px;max-width:230px;
  padding:8px 11px;font-size:13.5px;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);
  box-shadow:var(--sh-in);min-height:38px;
}
.swrow > select:focus,
.swrow > input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft), var(--sh-in);
}
.swrow > input.mono{font-family:'DM Mono',monospace;text-align:right}
.swrow > .btn{flex:none}

/* ayar listesi çok genişlemesin — etiket ve denetim birbirinden kopmasın */
.card-b > .swrow,
.card-b > .sec + .swrow{max-width:880px}

@media(max-width:860px){
  .swrow{flex-direction:column;align-items:flex-start;gap:9px}
  .swrow > div:first-child{max-width:100%}
  .swrow > select,
  .swrow > input{width:100%;max-width:100%;font-size:16px}
  .swrow > .sw{align-self:flex-end;margin-top:-42px}
}

/* ===================================================================
   PLATFORM ANALİZ EKİ (Trendyol modülü) — sabit renk yok, hepsi değişken
   =================================================================== */
.phead{margin-bottom:16px}
.phead h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
/* okuma amaçlı anahtar-değer satırı */
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.kv:last-child{border-bottom:none}
.kv .k{font-size:12.5px;color:var(--text-2)}
.kv .v{font-size:13px;font-weight:600;text-align:right}
/* metrik satırı (karne sütunları) */
.mrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;width:100%;text-align:left}
.mrow:last-child{border-bottom:none}
.mrow:hover .mn{color:var(--brand)}
.mrow i{width:8px;height:8px;border-radius:2px;flex:none}
.mrow .ml{flex:1;font-size:13px;color:var(--text-2)}
.mrow .mn{font-size:15px;font-weight:700;font-family:'DM Mono',monospace}
.mrow .md{font-size:11px;font-weight:700;width:36px;text-align:right}
.md.up{color:var(--red)} .md.down{color:var(--green)} .md.flat{color:var(--text-muted)}
/* karne notu */
.gbox{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gmark{width:74px;height:74px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none;
  background:var(--yellow-soft);border:2px solid color-mix(in srgb,var(--yellow) 42%,transparent)}
.gmark span{font-size:34px;font-weight:800;color:var(--yellow);letter-spacing:-.05em;line-height:1}
.gtx{flex:1;min-width:220px}
.gtx h3{font-size:17px;font-weight:700;letter-spacing:-.02em}
.gtx .big{font-size:13.5px;color:var(--text-2);margin-top:3px}
.gtx .big b{color:var(--red);font-size:16px}
/* buybox */
.star{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--border-strong);margin:0 auto}
.star:hover{background:var(--surface-2);color:var(--yellow)}
.star.on{color:var(--yellow)}
.bbr{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;font-family:'DM Mono',monospace;font-weight:700;font-size:12px}
.bbr.w{background:var(--green-soft);color:var(--green)}
.bbr.l{background:var(--red-soft);color:var(--red)}
.bbr.n{background:var(--surface-2);color:var(--text-muted)}
.inp{font:inherit;font-family:'DM Mono',monospace;font-size:12.5px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 8px;width:92px;text-align:right;color:var(--text)}
.dist{display:flex;height:7px;border-radius:999px;overflow:hidden;background:var(--surface-2);min-width:104px}
.dist span{display:block;height:100%}
tr.hk{background:var(--red-soft)}
.srcl{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-muted);margin-top:10px}
.srcl .pt{width:6px;height:6px;border-radius:999px;background:var(--brand)}
/* ayar satırı */
.setrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}
.setrow:last-child{border-bottom:none}
.setrow .sl{flex:1}
.setrow .sl b{display:block;font-size:13px;font-weight:600}
.setrow .sl small{display:block;font-size:11.5px;color:var(--text-muted);margin-top:1px}
.setrow select{font:inherit;font-size:12.5px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:7px 10px;color:var(--text);min-width:148px}
/* liste satırı (modal) */
.lrow{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px;align-items:flex-start}
.lrow:last-child{border-bottom:none}
.lrow .no{font-family:'DM Mono',monospace;font-size:12px;color:var(--brand);font-weight:600;flex:none;width:106px}
.lrow .bd2{flex:1;min-width:0}
.lrow .bd2 b{font-weight:600;display:block;font-size:12.5px}
.lrow .bd2 small{display:block;color:var(--text-muted);font-size:11.5px;margin-top:1px}
.cpb{font-size:11px;color:var(--text-muted);flex:none}
.cpb:hover{color:var(--brand)}
@media(max-width:860px){.lrow .no{width:auto}.lrow{flex-wrap:wrap;gap:4px}}
/* Geniş ekranlarda içeriğe daha çok yer — özellikle veri tabloları (ürün, sipariş, iade) */
@media(min-width:1300px){ .content{max-width:1440px} }

/* Akıllı tablo — sütun menüsü */
.ptmenu{ position:relative; display:inline-block }
.ptmenu-liste{ position:absolute; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:6px; min-width:190px; z-index:30; max-height:60vh; overflow:auto }
.ptm-l{ display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:13px; border-radius:var(--r-sm); cursor:pointer; white-space:nowrap }
.ptm-l:hover{ background:var(--surface-2) }
.bulkbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--brand); border-radius:var(--r-lg); padding:8px 12px; margin-bottom:10px; font-size:13px }
.bulkbar > span:first-child{ color:var(--text-1) }
/* Mobil performans: ekran dışı kartları tarayıcı çizmesin (binlerce kartta beyaz ekranı önler) */
.rowc{ content-visibility:auto; contain-intrinsic-size:auto 92px }
/* Mobilde filtre/sütun açılır listesi taşmasın — akış içinde tam genişlik */
@media(max-width:860px){
  .ptmenu{ display:block; width:100% }
  .ptmenu > button{ width:100% }
  .ptmenu-liste{ position:static; left:auto; right:auto; width:100%; min-width:0; margin-top:4px; box-shadow:none }
}