/* ============================================================
   Renk düzeni: beyaz zemin + kırmızı vurgu. Koyu mod açılabilir.
   Açık palet bare :root'ta; koyu palet üç durumda da tanımlı:
   uygulama düğmesi, görüntüleyici teması ve işletim sistemi.
   ============================================================ */
:root{
  --ink:#FFFFFF; --panel:#FFFFFF; --panel2:#F8F5F4; --panel3:#F1EBEA;
  --line:#E5DDDB; --line-soft:#EFE9E8;
  --text:#1A1413; --muted:#6B605E; --dim:#948A87;
  --acc:#CE2029; --acc-deep:#A5151C; --acc-ink:#FFFFFF;
  --acc-soft:rgba(206,32,41,.07); --acc-line:rgba(206,32,41,.26);
  --ok:#1E7A4C; --warn:#A96A08; --bad:#C0272D; --info:#2C6BAF;
  --purple:#6B4EA8; --teal:#0F726D;
  --ok-soft:rgba(30,122,76,.09); --warn-soft:rgba(169,106,8,.10);
  --bad-soft:rgba(192,39,45,.09); --info-soft:rgba(44,107,175,.09);
  --purple-soft:rgba(107,78,168,.09); --teal-soft:rgba(15,114,109,.09);
  --field:#FFFFFF; --hover:#F5F0EF; --track:#E9E2E0; --thumb:#C9BFBC;
  --sh:0 1px 2px rgba(26,20,19,.05), 0 8px 22px rgba(26,20,19,.07);
  --sh-soft:0 1px 2px rgba(26,20,19,.05);
  --r:6px; --r-lg:10px;
  --f-dsp:'Archivo','Segoe UI',system-ui,sans-serif;
  --f-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;
  --top:rgba(255,255,255,.92);
}
:root[data-app-theme="dark"],
:root[data-theme="dark"]:not([data-app-theme="light"]){
  --ink:#16110F; --panel:#1D1817; --panel2:#241E1D; --panel3:#2C2523;
  --line:#3A312F; --line-soft:#2B2422;
  --text:#F3EDEB; --muted:#A69B98; --dim:#7A6F6D;
  --acc:#F4585D; --acc-deep:#FF8085; --acc-ink:#2A0406;
  --acc-soft:rgba(244,88,93,.13); --acc-line:rgba(244,88,93,.34);
  --ok:#4FBE7E; --warn:#E0A03A; --bad:#F0736E; --info:#6FAAE6;
  --purple:#A88AD8; --teal:#46B8B0;
  --ok-soft:rgba(79,190,126,.13); --warn-soft:rgba(224,160,58,.13);
  --bad-soft:rgba(240,115,110,.13); --info-soft:rgba(111,170,230,.13);
  --purple-soft:rgba(168,138,216,.13); --teal-soft:rgba(70,184,176,.13);
  --field:#241E1D; --hover:#2C2523; --track:#332C2A; --thumb:#4A403D;
  --sh:0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.5);
  --sh-soft:0 1px 0 rgba(255,255,255,.03);
  --top:rgba(22,17,15,.92);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-app-theme="light"]){
    --ink:#16110F; --panel:#1D1817; --panel2:#241E1D; --panel3:#2C2523;
    --line:#3A312F; --line-soft:#2B2422;
    --text:#F3EDEB; --muted:#A69B98; --dim:#7A6F6D;
    --acc:#F4585D; --acc-deep:#FF8085; --acc-ink:#2A0406;
    --acc-soft:rgba(244,88,93,.13); --acc-line:rgba(244,88,93,.34);
    --ok:#4FBE7E; --warn:#E0A03A; --bad:#F0736E; --info:#6FAAE6;
    --purple:#A88AD8; --teal:#46B8B0;
    --ok-soft:rgba(79,190,126,.13); --warn-soft:rgba(224,160,58,.13);
    --bad-soft:rgba(240,115,110,.13); --info-soft:rgba(111,170,230,.13);
    --purple-soft:rgba(168,138,216,.13); --teal-soft:rgba(70,184,176,.13);
    --field:#241E1D; --hover:#2C2523; --track:#332C2A; --thumb:#4A403D;
    --sh:0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.5);
    --sh-soft:0 1px 0 rgba(255,255,255,.03);
    --top:rgba(22,17,15,.92);
  }
}
/* uygulama içi seçim işletim sistemini de yener */
:root[data-app-theme="light"]{ color-scheme:light }
:root[data-app-theme="dark"]{ color-scheme:dark }

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--text);
  font-family:var(--f-body); font-size:14.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  overflow-wrap:anywhere;
}
h1,h2,h3,h4{font-family:var(--f-dsp); font-weight:700; margin:0; text-wrap:balance; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--acc); color:var(--acc-ink)}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px; border-radius:3px}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.hide{display:none !important}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.eyebrow{font-family:var(--f-dsp); font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dim)}
.hazard{height:4px;
  background:repeating-linear-gradient(135deg,var(--acc) 0 10px,transparent 10px 20px)}

/* ===== scrollbar ===== */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--thumb); border-radius:6px; border:2px solid var(--ink)}

/* ===== giriş / kurulum ===== */
#gate{min-height:100dvh; display:grid; place-items:center; padding:24px; background:var(--panel2)}
.gate-card{width:min(400px,100%); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh)}
.gate-card .hazard{height:5px}
.gate-body{padding:28px 26px 26px}
.brand{display:flex; align-items:center; gap:11px; margin-bottom:22px}
.brand-mark{width:38px;height:38px;border-radius:8px;background:var(--acc);color:#fff;
  display:grid;place-items:center;font-family:var(--f-dsp);font-weight:800;font-size:17px;flex:0 0 auto}
.brand-name{font-family:var(--f-dsp);font-weight:800;font-size:16.5px;letter-spacing:-.02em;line-height:1.15}
.brand-sub{font-size:11px;color:var(--dim);letter-spacing:.04em}
/* giriş ekranında logo — çerçevenin içinde, üstte, ortalı */
.gate-logo{display:flex; justify-content:center; align-items:center; min-height:64px;
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r);
  padding:12px 16px; margin:0 0 20px}
.gate-logo img{max-height:64px; max-width:100%; width:auto; height:auto; display:block; object-fit:contain}
.brand.center{flex-direction:column; align-items:center; text-align:center; gap:3px}
.brand-logo{flex:0 0 auto; display:flex; align-items:center; min-height:38px}
.brand-logo img{max-height:38px; max-width:134px; width:auto; height:auto; display:block}
@media (max-width:640px){
  .brand-logo{min-height:28px}
  .brand-logo img{max-height:28px; max-width:100px}
}

/* ===== form ===== */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px; min-width:0}
.field > label{font-family:var(--f-dsp); font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted)}
.inp, .sel, .txt{
  width:100%; background:var(--field); border:1px solid var(--line); border-radius:var(--r);
  padding:9px 11px; color:var(--text); transition:border-color .12s, box-shadow .12s;
}
.inp:hover,.sel:hover,.txt:hover{border-color:var(--dim)}
.inp:focus,.sel:focus,.txt:focus{outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft)}
.inp::placeholder,.txt::placeholder{color:var(--dim)}
.txt{resize:vertical; min-height:80px; line-height:1.55}
.sel{appearance:none; padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.sel option{background:var(--panel); color:var(--text)}
input[type=number].inp,input[type=date].inp{font-family:var(--f-mono)}
input[type=checkbox]{accent-color:var(--acc)}
.hint{font-size:11.5px; color:var(--dim); line-height:1.45}
.row{display:grid; gap:0 14px}
.row.c2{grid-template-columns:1fr 1fr}
.row.c3{grid-template-columns:1fr 1fr 1fr}
.row.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:640px){.row.c2,.row.c3,.row.c4{grid-template-columns:1fr}}

/* ===== butonlar ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--f-dsp); font-weight:600; font-size:13px; letter-spacing:.01em;
  padding:8px 14px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--panel); color:var(--text); cursor:pointer; white-space:nowrap;
  box-shadow:var(--sh-soft);
  transition:background .12s,border-color .12s,transform .06s}
.btn:hover{background:var(--hover); border-color:var(--dim)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn.p{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
.btn.p:hover{background:var(--acc-deep); border-color:var(--acc-deep)}
.btn.ghost{background:transparent; box-shadow:none}
.btn.ghost:hover{background:var(--hover)}
.btn.danger{color:var(--bad); border-color:var(--line)}
.btn.danger:hover{background:var(--bad-soft); border-color:var(--bad)}
.btn{min-height:36px}
.btn svg{width:15px; height:15px; flex:0 0 auto}
.btn.sm{padding:5px 10px; font-size:12px; min-height:30px}
.btn.xs{padding:3px 8px; font-size:11px; min-height:24px}
.btn.xs svg{width:13px;height:13px}
/* sayfa başlığındaki ana eylem, altındaki form alanlarıyla aynı yükseklikte olsun */
.page-actions .btn{min-height:41px; padding-left:16px; padding-right:16px}
.btn.block{width:100%}
.linkbtn{background:none;border:none;padding:0;color:var(--acc);cursor:pointer;font-size:12.5px;
  font-family:var(--f-body)}
.linkbtn:hover{text-decoration:underline}

/* ===== app kabuk ===== */
#app{min-height:100dvh; display:flex; flex-direction:column; background:var(--ink)}
.topbar{position:sticky; top:0; z-index:40; background:var(--top);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; gap:14px; padding:9px 16px; min-height:54px}
.top-actions{margin-left:auto; display:flex; align-items:center; gap:8px}
.who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.avatar{width:27px;height:27px;border-radius:50%;background:var(--acc-soft);border:1px solid var(--acc-line);
  display:grid;place-items:center;font-family:var(--f-dsp);font-size:11px;font-weight:700;color:var(--acc)}
.iconbtn{display:inline-grid;place-items:center;width:31px;height:31px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;
  box-shadow:var(--sh-soft)}
.iconbtn:hover{background:var(--hover);color:var(--text)}
.iconbtn svg{width:16px;height:16px}
.shell{flex:1; display:flex; align-items:flex-start; width:100%; max-width:1420px; margin:0 auto;
  padding:0 16px 90px; gap:22px}
.nav{position:sticky; top:70px; width:206px; flex:0 0 206px; padding:16px 0; display:flex;
  flex-direction:column; gap:2px}
.nav-item{display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:var(--r);
  color:var(--muted); cursor:pointer; border:1px solid transparent; font-size:13.5px;
  font-family:var(--f-dsp); font-weight:600; text-align:left; background:none; width:100%}
.nav-item:hover{background:var(--hover); color:var(--text)}
.nav-item.on{background:var(--acc-soft); border-color:var(--acc-line); color:var(--acc)}
.nav-item svg{width:17px;height:17px;flex:0 0 auto}
.nav-count{margin-left:auto; font-family:var(--f-mono); font-size:11px; color:var(--dim)}
.nav-item.on .nav-count{color:var(--acc)}
.main{flex:1; min-width:0; padding:18px 0 0}

@media (max-width:860px){
  .shell{padding:0 12px 96px; gap:0}
  .nav{position:fixed; bottom:0; left:0; right:0; top:auto; width:100%; flex:none; z-index:50;
    flex-direction:row; padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:var(--top); backdrop-filter:blur(10px); border-top:1px solid var(--line);
    gap:2px; overflow-x:auto}
  .nav-item{flex-direction:column; gap:3px; font-size:9.5px; padding:6px 2px; letter-spacing:0;
    flex:1 1 0; width:auto; min-width:0; justify-content:center; text-align:center; overflow:hidden}
  .nav-item span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .nav-item svg{width:19px;height:19px}
  .nav-count{display:none}
  .main{padding-top:14px}
}
@media (max-width:640px){
  .hide-sm{display:none}
  .brand-name{font-size:14px}
  .brand-sub{display:none}
  .topbar-in{padding:8px 12px; min-height:48px; gap:10px}
}
body.ro .wr{display:none !important}

/* ===== sayfa başlığı ===== */
.page-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.page-head h1{font-size:24px; letter-spacing:-.025em}
.page-head .sub{color:var(--dim); font-size:12.5px}
.page-actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:640px){ .page-head h1{font-size:20px} .page-actions{margin-left:0; width:100%} }

/* ===== kartlar ===== */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-soft)}
.card-h{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line-soft);
  flex-wrap:wrap}
.card-h h3{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700}
.card-h .right{margin-left:auto; display:flex; gap:8px; align-items:center}
.card-b{padding:16px}
.grid{display:grid; gap:14px}
.stats{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 15px 14px 18px; position:relative; overflow:hidden; box-shadow:var(--sh-soft)}
.stat::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--acc)}
.stat.ok::before{background:var(--ok)} .stat.bad::before{background:var(--bad)}
.stat.info::before{background:var(--info)} .stat.warn::before{background:var(--warn)}
.stat-v{font-family:var(--f-dsp); font-weight:800; font-size:26px; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin-top:5px; line-height:1.1}
.stat-x{font-size:11.5px; color:var(--dim); margin-top:3px}

/* ===== rozetler ===== */
.chip{display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-family:var(--f-dsp); font-weight:600; letter-spacing:.02em;
  border:1px solid var(--line); background:var(--panel2); color:var(--muted); white-space:nowrap}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.acc{color:var(--acc); border-color:var(--acc-line); background:var(--acc-soft)}
.chip.ok{color:var(--ok); border-color:var(--ok); background:var(--ok-soft)}
.chip.bad{color:var(--bad); border-color:var(--bad); background:var(--bad-soft)}
.chip.warn{color:var(--warn); border-color:var(--warn); background:var(--warn-soft)}
.chip.info{color:var(--info); border-color:var(--info); background:var(--info-soft)}
.chip.purple{color:var(--purple); border-color:var(--purple); background:var(--purple-soft)}
.chip.teal{color:var(--teal); border-color:var(--teal); background:var(--teal-soft)}
.chip.mut{color:var(--dim)}
.tag{display:inline-block; padding:2px 7px; border-radius:4px; font-size:10.5px;
  background:var(--panel2); border:1px solid var(--line); color:var(--muted)}
.qno{font-family:var(--f-mono); font-weight:600; letter-spacing:.06em; color:var(--acc);
  background:var(--acc-soft); border:1px solid var(--acc-line); padding:1px 7px; border-radius:4px; font-size:12px}

/* ===== araç çubuğu ===== */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.search{position:relative; flex:1 1 210px; min-width:0}
.search .inp{padding-left:32px}
.search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:15px;height:15px; color:var(--dim); pointer-events:none}
.seg{display:inline-flex; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:2px}
.seg button{background:none;border:none;padding:5px 11px;border-radius:4px;cursor:pointer;
  font-family:var(--f-dsp);font-weight:600;font-size:12px;color:var(--muted)}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--acc); color:var(--acc-ink)}

/* ===== liste / tablo ===== */
.tw{overflow-x:auto; border-radius:var(--r-lg)}
table.tbl{width:100%; border-collapse:collapse; font-size:13px; min-width:560px}
table.tbl th{font-family:var(--f-dsp); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); text-align:left; padding:9px 12px;
  border-bottom:1px solid var(--line); white-space:nowrap; background:var(--panel2)}
table.tbl td{padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
table.tbl tbody tr{background:var(--panel)}
table.tbl tbody tr:hover{background:var(--hover)}
table.tbl tr.clickable{cursor:pointer}
table.tbl td.r, table.tbl th.r{text-align:right}
table.tbl td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

.plist{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.pcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:13px 14px; cursor:pointer; position:relative; overflow:hidden; box-shadow:var(--sh-soft);
  transition:border-color .12s, transform .08s, box-shadow .12s}
.pcard:hover{border-color:var(--acc-line); transform:translateY(-1px); box-shadow:var(--sh)}
.pcard-top{display:flex; align-items:center; gap:8px; margin-bottom:7px}
.pcard h4{font-size:14.5px; margin:2px 0 5px; line-height:1.3}
.pcard .cust{font-size:12.5px; color:var(--muted)}
.pcard-foot{display:flex; align-items:center; gap:8px; margin-top:10px;
  padding-top:9px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--dim)}
.thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;border:1px solid var(--line);
  flex:0 0 auto;background:var(--panel2)}

.combo{position:relative}
.combo .combo-in{padding-right:30px}
.combo-x{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none;
  color:var(--dim); cursor:pointer; font-size:17px; line-height:1; padding:1px 5px; border-radius:4px}
.combo-x:hover{color:var(--text); background:var(--hover)}
.combo-menu{display:none; position:fixed; z-index:220; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh); max-height:262px; overflow-y:auto; padding:3px}
.combo.open .combo-menu{display:block}
.combo-item{padding:7px 10px; border-radius:4px; cursor:pointer; font-size:13.5px;
  display:flex; gap:10px; align-items:baseline}
.combo-item > span:first-child{flex:1; min-width:0}
.combo-item .combo-sub{margin-left:auto; font-size:11px; color:var(--dim); white-space:nowrap}
.combo-item.on{background:var(--hover)}
.combo-item.sel{color:var(--acc); font-weight:600}
.combo-empty{padding:9px 10px; font-size:12.5px; color:var(--dim)}
.tagbox{display:flex; flex-wrap:wrap; gap:6px; max-height:132px; overflow-y:auto;
  padding:2px; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--panel2)}
.tagbox:empty{display:none}
.tagbox::-webkit-scrollbar{width:8px}
/* ayarlar: sütunlu (masonry) yerleşim — kısa kartlar boşluk bırakmasın */
.settings-cols{column-count:3; column-gap:14px}
@media (max-width:1240px){.settings-cols{column-count:2}}
@media (max-width:820px){.settings-cols{column-count:1}}
.settings-cols > .card{break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  display:inline-block; width:100%; margin:0 0 14px}
.pplgrid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.pcard2{border:1px solid var(--line); border-radius:var(--r); padding:11px 12px; background:var(--panel2)}
.pcard2 a{word-break:break-all}
details summary::-webkit-details-marker{color:var(--muted)}
.empty{text-align:center; padding:44px 20px; color:var(--dim)}
.empty svg{width:34px;height:34px;opacity:.45;margin-bottom:10px}
.empty h4{font-size:15px;color:var(--muted);margin-bottom:5px}

/* ===== modal ===== */
.ovl{position:fixed; inset:0; background:rgba(26,20,19,.42); backdrop-filter:blur(3px);
  z-index:100; display:flex; align-items:flex-start; justify-content:center;
  padding:24px 14px; overflow-y:auto}
:root[data-app-theme="dark"] .ovl,
:root[data-theme="dark"]:not([data-app-theme="light"]) .ovl{background:rgba(6,4,4,.66)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-app-theme="light"]) .ovl{background:rgba(6,4,4,.66)}
}
.modal{width:min(760px,100%); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh); margin:auto 0; animation:pop .14s ease-out}
.modal.wide{width:min(1020px,100%)}
.modal.narrow{width:min(460px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}
.modal-h{display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line)}
.modal-h h3{font-size:15.5px}
.modal-h .x{margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:20px; line-height:1; padding:4px 6px; border-radius:5px}
.modal-h .x:hover{background:var(--hover); color:var(--text)}
.modal-b{padding:18px; max-height:calc(100dvh - 220px); overflow-y:auto}
.modal-f{display:flex; gap:9px; padding:14px 18px; border-top:1px solid var(--line); flex-wrap:wrap}
.modal-f .sp{margin-left:auto}

/* ===== sekmeler ===== */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto}
.tabs button{background:none; border:none; border-bottom:2px solid transparent; padding:9px 13px;
  cursor:pointer; color:var(--muted); font-family:var(--f-dsp); font-weight:600; font-size:13px;
  white-space:nowrap; margin-bottom:-1px}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--acc); border-bottom-color:var(--acc)}
.tabs .cnt{font-family:var(--f-mono); font-size:10.5px; color:var(--dim); margin-left:5px}

/* ===== detay ===== */
.detail-head{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; margin-bottom:18px}
.detail-head h1{font-size:22px; letter-spacing:-.025em; line-height:1.2}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; align-items:baseline}
.kv dt{color:var(--dim); font-size:11.5px; font-family:var(--f-dsp); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.kv dd{margin:0}
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:9px}
.photo{position:relative; aspect-ratio:1; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--panel2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.photo .del{position:absolute; top:4px; right:4px; background:var(--panel); border:1px solid var(--line);
  color:var(--bad); border-radius:5px; padding:1px 6px; cursor:pointer; font-size:12px; line-height:1.5}
.drop{border:1.5px dashed var(--line); border-radius:var(--r); padding:16px; text-align:center;
  color:var(--dim); cursor:pointer; font-size:12.5px; transition:border-color .12s,background .12s}
.drop:hover,.drop.over{border-color:var(--acc); background:var(--acc-soft); color:var(--acc)}

.note{display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-soft)}
.note:last-child{border-bottom:none}
.note .body{flex:1; min-width:0; white-space:pre-wrap; font-size:13.5px}
.note .meta{font-size:11px; color:var(--dim); margin-top:3px}

/* ===== fiyat satırı ===== */
.orow{border:1px solid var(--line); border-radius:var(--r); margin-bottom:9px; background:var(--panel)}
.orow.chosen{border-color:var(--acc-line); background:var(--acc-soft)}
.orow-h{display:flex; align-items:center; gap:9px; padding:10px 12px; flex-wrap:wrap}
.orow-h .nm{font-family:var(--f-dsp); font-weight:700; font-size:13.5px}
.orow-h .sp{margin-left:auto; display:flex; gap:6px; align-items:center}
.orow-b{padding:0 12px 11px}
.pricegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px}
.pcell{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:8px 10px}
.pcell .q{font-size:10.5px; color:var(--dim); font-family:var(--f-dsp); font-weight:600; letter-spacing:.06em}
.pcell .v{font-family:var(--f-mono); font-size:14.5px; font-weight:500; margin-top:2px}
.best{color:var(--ok); font-weight:600}

/* teklif hesap tablosu */
.calc{width:100%; border-collapse:collapse; font-size:13px}
.calc th{font-family:var(--f-dsp); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); text-align:right; padding:7px 8px; border-bottom:1px solid var(--line); font-weight:700}
.calc th:first-child{text-align:left}
.calc td{padding:6px 8px; border-bottom:1px solid var(--line-soft); text-align:right;
  font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.calc td:first-child{text-align:left; font-family:var(--f-body)}
.calc input.inp{padding:4px 7px; text-align:right; font-family:var(--f-mono); max-width:96px}

.banner{display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:var(--r);
  border:1px solid var(--acc-line); background:var(--acc-soft); font-size:12.5px; margin-bottom:14px}
.banner.bad{border-color:var(--bad); background:var(--bad-soft)}
.banner.warn{border-color:var(--warn); background:var(--warn-soft)}
.banner strong{color:var(--acc)}
.banner.bad strong{color:var(--bad)}
.banner.warn strong{color:var(--warn)}

.bar{height:7px; border-radius:4px; background:var(--track); overflow:hidden; display:flex}
.bar span{display:block; height:100%}

/* toast */
#toasts{position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:300;
  display:flex; flex-direction:column; gap:7px; align-items:center; pointer-events:none; width:min(420px,92vw)}
.toast{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:var(--r); padding:9px 14px; font-size:13px; box-shadow:var(--sh); animation:pop .14s}
.toast.bad{border-left-color:var(--bad)} .toast.ok{border-left-color:var(--ok)}
@media (max-width:860px){#toasts{bottom:76px}}

.saving{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--dim)}
.spin{width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;
  animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* ===== kâr analizi görselleri ===== */
.viz{
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300;
  --s-other:#9C9691;
  --viz-cost:#6B7A8C; --viz-profit:#1E7A4C;
}
:root[data-app-theme="dark"] .viz,
:root[data-theme="dark"]:not([data-app-theme="light"]) .viz{
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300;
  --s-other:#7A736E;
  --viz-cost:#8FA0B3; --viz-profit:#4FBE7E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-app-theme="light"]) .viz{
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300;
    --s-other:#7A736E;
    --viz-cost:#8FA0B3; --viz-profit:#4FBE7E;
  }
}
.viz-row{display:flex; gap:22px; flex-wrap:wrap; align-items:center}
.donut{flex:0 0 auto}
.legend{display:flex; flex-direction:column; gap:7px; flex:1 1 220px; min-width:200px}
.legend-item{display:flex; align-items:center; gap:8px; font-size:12.5px}
.legend-sw{width:11px; height:11px; border-radius:3px; flex:0 0 auto}
.legend-item .lv{margin-left:auto; font-family:var(--f-mono); color:var(--muted); white-space:nowrap}
.pbar{display:flex; height:26px; border-radius:5px; overflow:hidden; background:var(--track); gap:2px}
.pbar span{display:block; min-width:2px}
.pbar-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:7px; font-size:12px; color:var(--muted)}
.pbar-legend b{font-family:var(--f-mono); font-weight:600; color:var(--text)}
.mini{display:flex; height:9px; border-radius:3px; overflow:hidden; background:var(--track); gap:2px; min-width:90px}
.preview-wrap{background:var(--panel3); padding:16px; overflow:auto; border-radius:var(--r)}