:root{
  --bg:#f6f7fb; --side:#ffffff; --card:#ffffff; --soft:#f3f5f9; --tx:#0b1220; --tx2:#3b4456; --mut:#8a93a6; --line:#eceef3;
  --navy:#0b2a55; --cyan:#17c1d6; --black:#0b0f19;
  --ok:#12b76a; --okbg:#e8f8f0; --bad:#f04438; --badbg:#feeceb; --warn:#f79009; --warnbg:#fff4e5;
  --blue:#2e90fa; --bluebg:#eaf3ff; --violet:#7a5af8; --violetbg:#f1edff; --tealbg:#e6fafc;
  --r:18px; --shadow:0 1px 2px rgba(16,24,40,.04);
  --hero:linear-gradient(135deg,#e9fbfd 0%,#f5fbff 45%,#f3f1ff 100%);
}
[data-theme=dark]{
  --bg:#0a0e17; --side:#0f1521; --card:#111827; --soft:#172031; --tx:#eef1f7; --tx2:#c3cad8; --mut:#7c879c; --line:#1f2a3c;
  --black:#f3f5f9; --okbg:rgba(18,183,106,.14); --badbg:rgba(240,68,56,.14); --warnbg:rgba(247,144,9,.14);
  --bluebg:rgba(46,144,250,.14); --violetbg:rgba(122,90,248,.16); --tealbg:rgba(23,193,214,.14);
  --hero:linear-gradient(135deg,#0f2230 0%,#111827 50%,#1a1636 100%);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;background:var(--bg);color:var(--tx);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.hidden{display:none!important}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 16px;font-weight:600;font-size:13.5px;border:1px solid var(--line);background:var(--card);cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--soft)}
.btn-dark{background:var(--black);color:var(--card);border-color:var(--black)}
.btn-dark:hover{background:var(--black);opacity:.88}
.btn-dark:disabled{opacity:.55;cursor:wait}
.btn-cyan{background:var(--cyan);border-color:var(--cyan);color:#fff}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:10px}
.btn-xs{padding:5px 9px;font-size:12px;border-radius:8px}
.btn-ghost{border-color:transparent;background:transparent}
.btn-danger{color:var(--bad)}
.icon-btn{width:36px;height:36px;padding:0;border-radius:10px}

.inp{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);outline:none;transition:.15s}
.inp:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(23,193,214,.14)}
label.f{display:block;font-size:12px;font-weight:600;color:var(--tx2);margin:14px 0 6px}
.tg{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--tx2);cursor:pointer}
.tg input{accent-color:var(--cyan);width:16px;height:16px}

/* layout */
#app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
aside{background:var(--side);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 16px}
.brand img{height:22px}
[data-theme=dark] .brand img.l{content:url(img/logo-white.png)}
.tag{font-size:11px;font-weight:700;color:var(--cyan);background:var(--tealbg);padding:4px 8px;border-radius:8px}
.new-btn{margin:0 4px 14px;width:calc(100% - 8px);padding:12px}
.sec{font-size:11px;color:var(--mut);font-weight:600;padding:16px 10px 6px}
.nav{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--tx2);font-weight:500;border:0;background:none;width:100%;text-align:left;font-size:13.5px}
.nav:hover{background:var(--soft)}
.nav.on{background:var(--soft);color:var(--tx);font-weight:700;box-shadow:inset 0 0 0 1px var(--line)}
.nav .cnt{margin-left:auto;font-size:11px;font-weight:700;background:var(--soft);border-radius:8px;padding:2px 7px;color:var(--tx2)}
.nav.on .cnt{background:var(--card)}
aside .grow{flex:1}
.me{display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid var(--line);margin-top:10px}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;background:linear-gradient(135deg,#1d4ed8,#17c1d6);flex:none}
.me .n{font-weight:700;font-size:13px}.me .r{font-size:11.5px;color:var(--mut)}

main{padding:28px 32px;min-width:0;max-width:1440px;width:100%;margin:0 auto}
.mtop{display:none}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.ph h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.6px}
.ph p{margin:4px 0 0;color:var(--mut)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.card h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.3px}
.card .sub{color:var(--mut);font-size:12.5px;margin-top:3px}
.ch{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.mb{margin-bottom:18px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}

/* hero */
.hero{background:var(--hero);border:1px solid var(--line);border-radius:24px;padding:34px;display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center}
.chip-s{display:inline-block;font-size:12px;font-weight:700;color:#0e9fb3;background:var(--tealbg);padding:5px 10px;border-radius:8px}
.hero h2{font-size:34px;line-height:1.15;margin:14px 0 10px;font-weight:800;letter-spacing:-1.2px}
.hero p{color:var(--tx2);margin:0 0 22px;max-width:480px;line-height:1.55}
.sbox{display:flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 6px 6px 16px;box-shadow:0 6px 24px rgba(11,42,85,.06)}
.sbox input{flex:1;border:0;outline:none;background:transparent;font-size:15px;padding:10px 4px;min-width:0}
.sbox .btn{padding:11px 18px}
.hstats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hs{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center}
.hs b{font-size:26px;font-weight:800;letter-spacing:-.8px;display:block;line-height:1}
.hs small{color:var(--mut);font-size:12px}
.ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none}
.ic.t{background:var(--tealbg);color:#0e9fb3}.ic.b{background:var(--bluebg);color:var(--blue)}.ic.g{background:var(--okbg);color:var(--ok)}
.ic.v{background:var(--violetbg);color:var(--violet)}.ic.o{background:var(--warnbg);color:var(--warn)}.ic.r{background:var(--badbg);color:var(--bad)}

.stat{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--card)}
.stat b{display:block;font-size:26px;font-weight:800;margin-top:12px;letter-spacing:-.8px}
.stat small{color:var(--mut);font-size:12px}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:8px}
.badge.ok{background:var(--okbg);color:var(--ok)}.badge.bad{background:var(--badbg);color:var(--bad)}
.badge.warn{background:var(--warnbg);color:var(--warn)}.badge.mut{background:var(--soft);color:var(--mut)}
.badge.blue{background:var(--bluebg);color:var(--blue)}.badge.teal{background:var(--tealbg);color:#0e9fb3}
.badge.violet{background:var(--violetbg);color:var(--violet)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pulse{animation:pl 1.6s infinite}@keyframes pl{50%{opacity:.35}}

/* supplier cards */
.sup{border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;align-items:center;gap:12px;background:var(--card)}
.sup .n{font-weight:700}.sup .s{font-size:12px;color:var(--mut)}
.bar{height:5px;border-radius:5px;background:var(--soft);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#1d4ed8,var(--cyan));border-radius:5px}

/* recent cards */
.rc{border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;transition:.15s;background:var(--card)}
.rc:hover{border-color:var(--cyan);transform:translateY(-1px);box-shadow:0 8px 20px rgba(11,42,85,.06)}
.rc .q{font-family:ui-monospace,Consolas,monospace;font-weight:700;font-size:14px}
.rc .m{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--mut)}
.rc .p{font-weight:800;color:var(--ok);font-size:15px}

/* table */
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.tools .inp{max-width:260px;padding:9px 12px}
.tw{overflow:auto;border:1px solid var(--line);border-radius:14px;max-height:68vh}
table{width:100%;border-collapse:collapse;font-size:13px}
th{position:sticky;top:0;z-index:1;background:var(--soft);text-align:left;padding:11px 12px;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--mut);font-weight:700;white-space:nowrap;cursor:pointer;user-select:none}
td{padding:11px 12px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr:hover td{background:var(--soft)}
tr.best td{background:rgba(18,183,106,.06)}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.price{font-weight:800}
.muted{color:var(--mut)}
.small{font-size:12px}
.empty{text-align:center;color:var(--mut);padding:46px 16px}
.empty svg.i{width:34px;height:34px;margin-bottom:8px;stroke-width:1.4}

.seg{display:inline-flex;background:var(--soft);border-radius:12px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:7px 13px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--mut);font-size:13px}
.seg button.on{background:var(--card);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.list{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);flex-wrap:wrap}
.row .grow{flex:1;min-width:180px}
.row .t{font-weight:700}
.row .s{color:var(--mut);font-size:12px;margin-top:3px}

/* cart / plan */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qty button{border:0;background:var(--soft);width:28px;height:28px;cursor:pointer;font-weight:700}
.qty input{width:42px;border:0;text-align:center;background:transparent;outline:none}
select.mini{padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--card);max-width:220px}
.saving{background:linear-gradient(135deg,#0b2a55,#0e7490);color:#fff;border-radius:var(--r);padding:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.saving b{font-size:30px;font-weight:800;letter-spacing:-1px;display:block}
.saving small{opacity:.75}

/* report */
.ai{border:1px solid var(--line);border-radius:var(--r);background:var(--hero);padding:22px}
.ai ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ai li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;line-height:1.5;display:flex;gap:10px}
.hbar{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:13px}
.hbar .l{width:130px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .b{flex:1;height:10px;background:var(--soft);border-radius:6px;overflow:hidden}
.hbar .b i{display:block;height:100%;background:linear-gradient(90deg,#1d4ed8,var(--cyan));border-radius:6px}
.hbar .v{width:70px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* login */
#login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--bg)}
.lg-l{padding:40px;display:flex;flex-direction:column}
.lg-l form{margin:auto;width:100%;max-width:380px}
.lg-l h1{font-size:30px;font-weight:800;letter-spacing:-1px;margin:22px 0 6px}
.lg-r{margin:16px;border-radius:28px;background:radial-gradient(circle at 80% 10%,rgba(23,193,214,.55),transparent 45%),radial-gradient(circle at 10% 90%,rgba(122,90,248,.45),transparent 45%),#0b2a55;color:#fff;padding:44px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.lg-r h2{font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-1px;margin:0 0 12px}
.lg-r p{opacity:.8;max-width:420px;line-height:1.6}
.lg-r .mock{position:absolute;top:44px;left:44px;right:44px;display:grid;gap:12px}
.lg-r .mock div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;font-size:13px}
.lg-r .mock b{color:#7ff0ff}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:12px}

/* modal + toast */
.modal{position:fixed;inset:0;background:rgba(11,18,32,.45);backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;z-index:50}
.modal .card{width:100%;max-width:540px;max-height:92vh;overflow:auto}
.toast{position:fixed;bottom:22px;right:22px;background:#0b0f19;color:#fff;padding:12px 16px;border-radius:12px;z-index:60;font-weight:600;font-size:13px;animation:tin .2s;box-shadow:0 10px 30px rgba(0,0,0,.2)}
@keyframes tin{from{transform:translateY(8px);opacity:0}}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{height:44px;border-radius:10px;background:linear-gradient(90deg,var(--soft) 25%,var(--line) 50%,var(--soft) 75%);background-size:200% 100%;animation:sk 1.2s infinite;margin-bottom:8px}
@keyframes sk{to{background-position:-200% 0}}

@media(max-width:1100px){
  .hero{grid-template-columns:1fr}.g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  #app{grid-template-columns:1fr}
  aside{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:40;transform:translateX(-100%);transition:.2s;box-shadow:0 0 40px rgba(0,0,0,.2)}
  aside.open{transform:none}
  .mtop{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--side);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
  .mtop img{height:20px}
  main{padding:18px 16px 40px}
  .hero{padding:22px}.hero h2{font-size:26px}
  .g2,.g3{grid-template-columns:1fr}.g4,.g5{grid-template-columns:1fr 1fr}
  #login{grid-template-columns:1fr}.lg-r{display:none}
  .hide-m{display:none}
  .sbox{flex-wrap:wrap}
}
@media print{
  aside,.mtop,.tools,.no-print{display:none!important}
  #app{display:block}main{padding:0}
  .card{border:0;box-shadow:none}
  .tw{max-height:none;overflow:visible}
}

/* topbar + bildirimler */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 32px 0;max-width:1440px;margin:0 auto;gap:12px}
.bell-btn{position:relative}
.bdot{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:8px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.npanel{position:fixed;top:64px;right:24px;width:380px;max-width:calc(100vw - 24px);max-height:70vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(11,18,32,.18);z-index:45}
.nph{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.ni{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.ni:hover{background:var(--soft)}
.ni.unread{background:rgba(23,193,214,.06)}
.ni .t{font-weight:700;font-size:13px}.ni .m{font-size:12px;color:var(--tx2);white-space:pre-line;margin-top:2px}.ni .d{font-size:11px;color:var(--mut);margin-top:4px}
.cartcard{border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;background:var(--card);transition:.15s}
.cartcard:hover{border-color:var(--cyan)}
.cartcard.on{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(23,193,214,.15)}
.wa{background:linear-gradient(135deg,#0f9d58,#25d366);color:#fff;border-radius:var(--r);padding:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wa .ic{background:rgba(255,255,255,.18);color:#fff;width:46px;height:46px;border-radius:14px}
.wa b{font-size:17px}.wa p{margin:4px 0 0;opacity:.9;font-size:13px}
.spark{display:block}
@media(max-width:860px){.topbar{display:none}.npanel{top:60px;right:12px}}

/* taşma koruması (mobil) */
#app>div,.hero>*,.g2>*,.g3>*,.g4>*,.g5>*,.hstats>*{min-width:0}
.hs b,.stat b{overflow-wrap:anywhere}
@media(max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .sbox .btn{width:100%;margin-top:6px}
  .ph h1{font-size:22px}
  .row>.btn{flex:1 1 auto}
  .saving b{font-size:24px}
  .tools .inp{max-width:none;flex:1 1 100%}
}