/* ---------- header: marka | menu | araclar ---------- */
/* Kural: logo blogu asla kuculmez, menu arada esnek bosluk kullanir,
   araclar saga sabitlenir. Boylece 9 link olsa da ust uste binmez. */
.site-header .inner{
  height:var(--header-h); display:flex; align-items:center; gap:var(--sp-4);
  max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-6);
  min-width:0;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:660; color:var(--ink);
  font-size:1.0625rem; letter-spacing:-.02em; white-space:nowrap;
  flex:0 0 auto; min-width:0; margin-right:var(--sp-2);
}
.brand:hover{text-decoration:none; color:var(--ink)}
.brand-mark{
  width:32px; height:32px; flex:none; border-radius:9px;
  background:linear-gradient(150deg,#4F46E5 0%,#6366F1 55%,#4338CA 100%);
  box-shadow:0 1px 2px rgba(79,70,229,.35), inset 0 1px 0 rgba(255,255,255,.18);
  display:grid; place-items:center;
}
.brand-mark svg{width:18px; height:18px; display:block}
.brand-word{display:flex; flex-direction:column; line-height:1.12; min-width:0}
.brand-word b{font-weight:680; letter-spacing:-.025em; white-space:nowrap}
.brand-word small{
  font-size:.625rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted-2); margin-top:1px; white-space:nowrap;
}
.nav{
  display:flex; align-items:center; gap:2px; margin:0;
  flex:1 1 auto; min-width:0; justify-content:flex-start;
}
.nav a{
  color:var(--ink-soft); padding:var(--sp-2) 10px; border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:500; white-space:nowrap; text-decoration:none;
}
.nav a:hover{background:var(--surface-2); color:var(--ink)}
.nav a[aria-current="page"]{color:var(--primary); background:var(--primary-soft); font-weight:600}
.header-tools{
  margin-left:auto; display:flex; align-items:center; gap:var(--sp-2);
  flex:0 0 auto;
}

/* "Araclar" acilir menusu */
.nav-group{position:relative; flex:none}
.nav-group-btn{
  display:inline-flex; align-items:center; gap:4px;
  background:none; border:0; cursor:pointer; font:inherit;
  color:var(--ink-soft); padding:var(--sp-2) 10px; border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:500; white-space:nowrap;
}
.nav-group-btn:hover{background:var(--surface-2); color:var(--ink)}
.nav-group-btn[data-active="true"]{color:var(--primary); background:var(--primary-soft); font-weight:600}
.nav-caret{font-size:.7em; line-height:1}
.nav-menu{
  display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  min-width:220px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:var(--sp-2);
}
.nav-group[data-open="true"] .nav-menu{display:block}
.nav-menu a{
  display:block; padding:9px 12px; border-radius:var(--r-sm);
  color:var(--ink-soft); font-size:var(--fs-sm); white-space:nowrap;
}
.nav-menu a:hover{background:var(--surface-2); color:var(--ink)}
.nav-menu a[aria-current="page"]{color:var(--primary); background:var(--primary-soft); font-weight:600}

/* AI Maliyet Merkezi — design tokens
   Açık tema varsayılan; koyu tema [data-theme="dark"] veya sistem tercihi ile. */
:root{
  color-scheme: light;

  /* renk — yüzey */
  --canvas:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9; --elevated:#FFFFFF;
  --border:#E2E8F0; --border-strong:#CBD5E1;

  /* renk — metin */
  --ink:#111827; --ink-soft:#334155;
  /* muted: #64748B -> #5A677C (AA 4.5:1 on both #FFF and #F1F5F9) */
  --muted:#5A677C; --muted-2:#8892A6;

  /* renk — anlam */
  --primary:#4F46E5; --primary-hover:#4338CA; --primary-soft:#EEF2FF; --primary-ink:#3730A3;
  /* Birincil buton uzerindeki metin: acik temada beyaz (6,3:1) */
  --on-primary:#FFFFFF;
  --success:#15803D; --success-soft:#F0FDF4;
  --warn:#B45309; --warn-soft:#FFFBEB;
  --danger:#B91C1C; --danger-soft:#FEF2F2;
  --info:#0369A1; --info-soft:#F0F9FF;

  /* tipografi */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --fs-h1: 2rem;    --lh-h1: 2.5rem;
  --fs-h2: 1.5rem;  --lh-h2: 2rem;
  --fs-h3: 1.125rem;--lh-h3: 1.625rem;
  --fs-body: .9375rem; --lh-body: 1.5rem;
  --fs-sm: .8125rem; --lh-sm: 1.25rem;
  --fs-xs: .75rem;  --lh-xs: 1rem;

  /* boşluk */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* yarıçap */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;

  /* gölge */
  --shadow-1: 0 1px 2px rgba(15,23,42,.05);
  --shadow-2: 0 4px 12px rgba(15,23,42,.08);

  /* yerleşim */
  --container: 1400px;
  --header-h: 68px;
  --focus: 0 0 0 3px rgba(79,70,229,.35);
}

[data-theme="dark"]{
  color-scheme: dark;
  --canvas:#0B1220; --surface:#111B2E; --surface-2:#17243B; --elevated:#17243B;
  --border:#26354D; --border-strong:#334765;
  --ink:#F8FAFC; --ink-soft:#DCE4F0; --muted:#A7B4C8; --muted-2:#7C8CA6;
  --primary:#818CF8; --primary-hover:#A5B4FC; --primary-soft:#1E2A4A; --primary-ink:#C7D2FE;
  /* Koyu temada primary acik indigo; beyaz metin 2,98:1 kalirdi. Koyu metin 7,5:1 */
  --on-primary:#111B2E;
  --success:#4ADE80; --success-soft:#0F2A1D;
  --warn:#FBBF24; --warn-soft:#2A1F0A;
  --danger:#F87171; --danger-soft:#2A1113;
  --info:#38BDF8; --info-soft:#08283B;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 18px rgba(0,0,0,.45);
  --focus: 0 0 0 3px rgba(129,140,248,.45);
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-sm)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100; padding:var(--sp-3) var(--sp-4);
  background:var(--primary); color:var(--on-primary); border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

/* ---------- layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-6)}
@media (max-width:640px){ .container{padding-inline:var(--sp-4)} }
.grid12{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--sp-5); align-items:start;
}
@media (max-width:1023px){ .grid12{grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--sp-4)} }
@media (max-width:639px){ .grid12{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3)} }
.col-main{grid-column:span 12}
.stack-4>*+*{margin-top:var(--sp-4)}
.stack-5>*+*{margin-top:var(--sp-5)}
.stack-6>*+*{margin-top:var(--sp-6)}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--surface);
  border-bottom:1px solid var(--border);
}
.site-header .inner{
  height:var(--header-h); display:flex; align-items:center; gap:var(--sp-5);
  max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-6);
}
@media (max-width:640px){
  .site-header .inner{padding-inline:var(--sp-3); gap:var(--sp-2)}
  .brand{font-size:.875rem}
  .brand .sub{display:none}
  .header-tools .btn{padding-inline:var(--sp-3)}
}
.brand{display:flex; align-items:center; gap:var(--sp-2); font-weight:650; color:var(--ink); font-size:1rem; white-space:nowrap; min-width:0}
.brand:hover{text-decoration:none}
.brand .mark{
  width:28px;height:28px;border-radius:8px;background:var(--primary);
  color:#fff;display:grid;place-items:center;font-size:.8125rem;font-weight:700;letter-spacing:-.02em;
}
.brand .sub{color:var(--muted); font-weight:400; font-size:var(--fs-xs)}
.nav{display:flex; align-items:center; gap:var(--sp-1); margin-left:var(--sp-4)}
.nav a{
  color:var(--ink-soft); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:500; white-space:nowrap;
}
.nav a:hover{background:var(--surface-2); text-decoration:none; color:var(--ink)}
.nav a[aria-current="page"]{color:var(--primary); background:var(--primary-soft); font-weight:600}
.header-tools{margin-left:auto; display:flex; align-items:center; gap:var(--sp-2)}
.pref-form{display:flex; gap:6px; align-items:center}
.pref-select{
  width:auto; min-height:34px; height:34px; padding:0 26px 0 9px; font-size:var(--fs-xs);
  font-weight:600; letter-spacing:.02em; border-radius:var(--r-sm);
}
@media (max-width:1023px){ .pref-form{display:none} }
@media (max-width:1023px){
  .nav{display:none}
  .nav[data-open="true"]{
    display:flex; flex-direction:column; align-items:stretch; position:absolute; top:var(--header-h);
    left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border);
    padding:var(--sp-3) var(--sp-4) var(--sp-4); gap:var(--sp-1);
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .nav[data-open="true"] a{padding:var(--sp-3)}
  /* Mobilde acilir menu duz listeye donusur */
  .nav[data-open="true"] .nav-group{position:static}
  .nav[data-open="true"] .nav-group-btn{
    width:100%; justify-content:space-between; padding:var(--sp-3);
    font-size:var(--fs-sm); font-weight:600; color:var(--muted); text-transform:uppercase;
    letter-spacing:.06em;
  }
  .nav[data-open="true"] .nav-menu{
    display:block !important; position:static; box-shadow:none; border:0;
    padding:0 0 0 var(--sp-3); min-width:0; background:none;
  }
  .nav[data-open="true"] .nav-menu a{padding:var(--sp-3)}
  .nav-caret{display:none}
}
@media (max-width:640px){
  .site-header .inner{padding-inline:var(--sp-3); gap:var(--sp-2)}
  .brand{font-size:.9375rem; gap:8px; margin-right:0}
  .brand-mark{width:28px; height:28px; border-radius:8px}
  .brand-mark svg{width:16px; height:16px}
  .brand-word small{display:none}
  .header-tools .btn{padding-inline:var(--sp-3)}
}
.icon-btn{
  appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--ink);
  width:38px; height:38px; border-radius:var(--r-sm); display:grid; place-items:center; cursor:pointer;
}
.icon-btn:hover{background:var(--surface-2)}
.menu-btn{display:none}
@media (max-width:1023px){ .menu-btn{display:grid} }

/* ---------- typography ---------- */
h1,h2,h3,h4{margin:0; font-weight:640; letter-spacing:-.015em; color:var(--ink)}
h1{font-size:var(--fs-h1); line-height:var(--lh-h1)}
h2{font-size:var(--fs-h2); line-height:var(--lh-h2)}
h3{font-size:var(--fs-h3); line-height:var(--lh-h3)}
p{margin:0}
.lede{color:var(--muted); font-size:1rem; max-width:70ch}
.eyebrow{
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:600;
}
.help{font-size:var(--fs-sm); color:var(--muted)}
.formula{
  font-family:var(--font-num); font-size:var(--fs-sm); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-sm); padding:var(--sp-3);
  overflow-x:auto; white-space:nowrap; color:var(--ink-soft);
}
.num{font-variant-numeric:tabular-nums; text-align:right; font-feature-settings:"tnum" 1}

/* ---------- page header ---------- */
.page-head{padding-block:var(--sp-6) var(--sp-5)}
.breadcrumb{display:flex; flex-wrap:wrap; gap:var(--sp-2); list-style:none; margin:0 0 var(--sp-3); padding:0;
  font-size:var(--fs-sm); color:var(--muted)}
.breadcrumb li+li::before{content:"/"; margin-right:var(--sp-2); color:var(--muted-2)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--primary)}
.page-head .meta{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-3);
  font-size:var(--fs-sm); color:var(--muted)}

/* ---------- surfaces ---------- */
.surface{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
}
.surface-pad{padding:var(--sp-5)}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}


/* ---------- marka ---------- */
.brand{display:flex; align-items:center; gap:10px; font-weight:660; color:var(--ink);
  font-size:1.0625rem; letter-spacing:-.02em; white-space:nowrap}
.brand:hover{text-decoration:none; color:var(--ink)}
.brand-mark{
  width:32px; height:32px; flex:none; border-radius:9px;
  background:linear-gradient(150deg,#4F46E5 0%,#6366F1 55%,#4338CA 100%);
  box-shadow:0 1px 2px rgba(79,70,229,.35), inset 0 1px 0 rgba(255,255,255,.18);
  display:grid; place-items:center;
}
.brand-mark svg{width:18px; height:18px; display:block}
.brand-word{display:flex; flex-direction:column; line-height:1.12; min-width:0}
.brand-word b{font-weight:680; letter-spacing:-.025em}
.brand-word small{
  font-size:.625rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted-2); margin-top:1px;
}
@media (max-width:640px){
  .brand{font-size:.9375rem; gap:8px}
  .brand-mark{width:28px; height:28px; border-radius:8px}
  .brand-mark svg{width:16px; height:16px}
  .brand-word small{display:none}
}

/* ---------- kpi (küçük, en fazla 4) ---------- */
.kpis{display:flex; flex-wrap:wrap; gap:var(--sp-4)}
.kpi{flex:1 1 160px; min-width:140px}
.kpi .k{font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.kpi .v{font-size:1.375rem; font-weight:640; font-variant-numeric:tabular-nums; margin-top:2px}
.kpi .n{font-size:var(--fs-xs); color:var(--muted)}

/* ---------- controls ---------- */
.toolbar{
  display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-end;
  padding:var(--sp-4); border-bottom:1px solid var(--border); background:var(--surface);
}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field>label{font-size:var(--fs-xs); font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.field-search{flex:2 1 240px}
.field-xs{flex:0 1 150px}
textarea{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  padding:12px; font:inherit; font-size:var(--fs-sm); resize:vertical;
}
textarea:focus{outline:none; border-color:var(--primary); box-shadow:var(--focus)}
input[type="text"],input[type="search"],input[type="number"],select{
  width:100%; appearance:none; background:var(--surface); color:var(--ink);
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  padding:9px 12px; font:inherit; font-size:var(--fs-sm); min-height:40px;
}
select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px;
}
input:focus,select:focus{outline:none; border-color:var(--primary); box-shadow:var(--focus)}
input::placeholder{color:var(--muted-2)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:40px; padding:0 var(--sp-4); border-radius:var(--r-sm); cursor:pointer;
  font:inherit; font-size:var(--fs-sm); font-weight:600; border:1px solid transparent;
  background:var(--primary); color:var(--on-primary, #fff); white-space:nowrap;
}
.btn:hover{background:var(--primary-hover); text-decoration:none}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-ghost{background:transparent; color:var(--muted); border-color:transparent; padding-inline:var(--sp-2)}
.btn-ghost:hover{color:var(--ink); background:var(--surface-2)}
.btn[aria-pressed="true"]{background:var(--primary-soft); color:var(--primary-ink); border-color:var(--primary)}
.chip-row{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink-soft);
  font-size:var(--fs-xs); font-weight:500;
}
.chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:0}
.chip button:hover{color:var(--danger)}

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:600; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-soft);
  white-space:nowrap;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge-ok{background:var(--success-soft); color:var(--success); border-color:currentColor}
.badge-warn{background:var(--warn-soft); color:var(--warn); border-color:currentColor}
.badge-danger{background:var(--danger-soft); color:var(--danger); border-color:currentColor}
.badge-info{background:var(--info-soft); color:var(--info); border-color:currentColor}
.badge-neutral{background:var(--surface-2); color:var(--muted)}

/* ---------- table ---------- */
/* overflow-x burada KULLANILMAZ: scroll konteyneri olusturup thead sticky'sini bozar.
   Mobilde tablo zaten kart listesine donusuyor. */
.table-wrap{width:100%}
table.prices{width:100%; border-collapse:collapse; font-size:var(--fs-sm); table-layout:fixed}
table.prices caption{
  caption-side:top; text-align:left; padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm); color:var(--muted);
}
table.prices thead th{
  position:sticky; top:var(--header-h); z-index:10;
  box-shadow:0 1px 0 var(--border);
  background:var(--surface-2); color:var(--muted); text-align:left; font-weight:600;
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em;
  padding:10px var(--sp-4); border-bottom:1px solid var(--border); white-space:nowrap;
}
table.prices thead th.is-num{text-align:right}
table.prices thead th button{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  color:inherit; font:inherit; letter-spacing:inherit;
}
table.prices thead th button:hover{color:var(--ink)}
table.prices thead th button:focus-visible{box-shadow:var(--focus); border-radius:4px}
table.prices thead th a{color:inherit}
th[aria-sort="ascending"] button::after{content:"▲"; font-size:.6em; opacity:.8}
th[aria-sort="descending"] button::after{content:"▼"; font-size:.6em; opacity:.8}
table.prices tbody td{
  padding:9px var(--sp-3); border-bottom:1px solid var(--border); vertical-align:middle;
}
table.prices tbody td:first-child{padding-left:var(--sp-4)}
table.prices tbody td:last-child{padding-right:var(--sp-4)}
table.prices tbody tr:hover{background:var(--surface-2)}
table.prices tbody tr:target{background:var(--primary-soft)}
.cell-model{display:flex; flex-direction:column; gap:2px; min-width:0}
.cell-model .name{font-weight:560; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cell-model .name:hover{color:var(--primary)}
.cell-model .variant{font-size:var(--fs-xs); color:var(--muted)}
.cell-price{font-variant-numeric:tabular-nums; text-align:right}
.cell-price .pv{display:block; font-weight:560; white-space:nowrap}
.cell-price .pu{display:block; font-size:var(--fs-xs); color:var(--muted); white-space:nowrap}
.cell-price .cur{font-size:var(--fs-xs); color:var(--muted); font-weight:500}
.row-actions{display:flex; gap:var(--sp-2); align-items:center; justify-content:flex-end}
.link-ext{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); color:var(--muted)}
.link-ext:hover{color:var(--primary)}

.cell-date{font-size:var(--fs-sm); color:var(--muted); white-space:nowrap}
.cell-date time{font-variant-numeric:tabular-nums}
.cell-date .stale{display:block; color:var(--warn)}

/* mobil kart listesi */
@media (max-width:767px){
  table.prices caption{
    display:block; padding:var(--sp-3) 0; font-size:var(--fs-xs); line-height:1.45;
  }
  table.prices thead{display:none}
  table.prices, table.prices tbody, table.prices tr, table.prices td{display:block; width:100%}
  table.prices tbody tr{
    border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);
    margin-bottom:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  }
  table.prices tbody td{border:0; padding:2px 0; text-align:left !important}
  table.prices tbody td[data-label]{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2);
    padding:4px 0; font-size:var(--fs-sm);
  }
  table.prices tbody td[data-label]::before{
    content:attr(data-label); flex:0 0 108px; white-space:nowrap;
    font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
  }
  table.prices tbody td[data-label] > *{flex:0 0 auto; min-width:0}
  table.prices tbody td[data-label] > .pv{flex:0 0 auto}
  table.prices tbody td[data-label] > .badge{flex:0 0 auto}
  table.prices tbody td[data-label] > .pu{flex:1 1 100%; margin-left:0; padding-left:0}
  table.prices tbody td:first-child{display:block; padding-bottom:var(--sp-2); border-bottom:1px solid var(--border); margin-bottom:var(--sp-2)}
  table.prices tbody td:first-child::before{display:none}
  .cell-price{text-align:left !important; white-space:normal}
  .cell-price .pv, .cell-price .pu{display:inline}
  .cell-price .pu{margin-left:4px}
  .row-actions{justify-content:flex-start; margin-top:0}
}

/* ---------- pagination ---------- */
.pager{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border); font-size:var(--fs-sm); color:var(--muted)}
.pager .pages{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.pager .pages a,.pager .pages span{
  min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--r-sm); color:var(--ink-soft); padding-inline:8px;
}
.pager .pages a:hover{background:var(--surface-2); text-decoration:none}
.pager .pages [aria-current="page"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary); font-weight:600}

/* ---------- states ---------- */
.empty{text-align:center; padding:var(--sp-7) var(--sp-4); color:var(--muted)}
.empty h3{color:var(--ink); margin-bottom:var(--sp-2)}
.notice{
  display:flex; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink-soft); font-size:var(--fs-sm);
}
.notice-warn{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
.notice-danger{background:var(--danger-soft); border-color:var(--danger); color:var(--danger)}
.notice-info{background:var(--info-soft); border-color:var(--info); color:var(--info)}
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%);
  background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:var(--r-sm);
}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- forms (calculator) ---------- */
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4)}
@media (max-width:767px){ .form-grid{grid-template-columns:1fr} }
.form-grid .full{grid-column:1/-1}
.help-text{font-size:var(--fs-xs); color:var(--muted)}
.error-text{font-size:var(--fs-xs); color:var(--danger); font-weight:600}
[aria-invalid="true"]{border-color:var(--danger)}
.fieldset{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); margin:0}
.fieldset legend{padding-inline:var(--sp-2); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted)}
details.disclosure{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface)}
details.disclosure>summary{
  cursor:pointer; padding:var(--sp-3) var(--sp-4); font-weight:600; font-size:var(--fs-sm);
  list-style:none; display:flex; align-items:center; gap:var(--sp-2);
}
details.disclosure>summary::-webkit-details-marker{display:none}
details.disclosure>summary::before{content:"▸"; color:var(--muted); font-size:.8em}
details.disclosure[open]>summary::before{content:"▾"}
details.disclosure .body{padding:0 var(--sp-4) var(--sp-4); font-size:var(--fs-sm); color:var(--ink-soft)}

/* ---------- result ---------- */
.result-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--sp-4)}
.result{
  border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); background:var(--surface);
}
.result .k{font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.result .v{font-size:1.5rem; font-weight:650; font-variant-numeric:tabular-nums; margin-top:4px}
.result .n{font-size:var(--fs-xs); color:var(--muted); margin-top:2px}
.result-save{border-color:var(--success); background:var(--success-soft)}
.result-save .v{color:var(--success)}
.result-cost{border-color:var(--danger); background:var(--danger-soft)}
.result-cost .v{color:var(--danger)}

/* ---------- compare ---------- */
.compare-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-4)}
.compare-card{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); background:var(--surface)}
.compare-card.is-best{border-color:var(--success); box-shadow:0 0 0 1px var(--success) inset}
.compare-card dl{display:grid; grid-template-columns:auto 1fr; gap:6px var(--sp-3); margin:var(--sp-3) 0 0; font-size:var(--fs-sm)}
.compare-card dt{color:var(--muted)}
.compare-card dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.bar{height:8px; border-radius:var(--r-full); background:var(--surface-2); overflow:hidden; margin-top:var(--sp-3)}
.bar>span{display:block; height:100%; background:var(--primary)}

/* ---------- prose (rehber) ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:var(--sp-6); margin-bottom:var(--sp-3)}
.prose h3{margin-top:var(--sp-5); margin-bottom:var(--sp-2)}
.prose p, .prose ul, .prose ol{margin:var(--sp-3) 0}
.prose ul, .prose ol{padding-left:var(--sp-5)}
.prose li{margin:6px 0}
.prose code{font-family:var(--font-num); font-size:.875em; background:var(--surface-2); padding:2px 5px; border-radius:4px}
.prose table{width:100%; border-collapse:collapse; font-size:var(--fs-sm); margin:var(--sp-4) 0}
.prose th,.prose td{border:1px solid var(--border); padding:8px 12px; text-align:left}
.prose th{background:var(--surface-2)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border); margin-top:var(--sp-8); padding-block:var(--sp-6); color:var(--muted); font-size:var(--fs-sm)}
.site-footer .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-5)}
.site-footer h4{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin-bottom:var(--sp-3)}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2)}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--primary)}
.site-footer .legal{margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--border); font-size:var(--fs-xs)}

/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.flex{display:flex} .items-center{align-items:center} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)}
.wrap{flex-wrap:wrap} .ml-auto{margin-left:auto} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mb-3{margin-bottom:var(--sp-3)}
.text-muted{color:var(--muted)} .text-sm{font-size:var(--fs-sm)} .text-xs{font-size:var(--fs-xs)}
.nowrap{white-space:nowrap} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}