/* =========================================================
   DBOtech — kurumsal site
   Tasarım kaynağı: "Website design with package templates"
   artboard'ları (1440 masaüstü / 390 mobil).
   Tüm değerler artboard'lardan birebir alınmıştır.
   ========================================================= */

:root{
  /* renk */
  --ink:#16191D;
  --muted:#5A6570;
  --teal:#0E7C86;
  --teal-dark:#0A5C64;
  --teal-bright:#2CC5CF;
  --teal-wash:#EAF3F4;
  --paper:#F5F3EF;
  --canvas:#E9E6E0;
  --band:#F1EFEA;
  --white:#FFFFFF;
  --line:#D8D3CA;
  --line-soft:#E7E3DC;
  --line-faint:#F0EDE8;
  --fill:#E4E0D8;
  --fill-2:#EDEAE4;
  --table-head:#FAF9F7;
  --row-alt:#FCFBF9;
  --footer-bg:#0F1214;
  --footer-text:#F5F3EF;
  --footer-muted:#9AA3AB;
  --footer-dim:#6C757D;
  --footer-line:#23282C;

  /* tipografi */
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --head:Archivo,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:120px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--teal-dark); }
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4{ font-family:var(--head); margin:0; letter-spacing:-0.03em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

.wrap{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- yardımcı tipografi ---------- */
.mono{ font-family:var(--mono); }

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}
.eyebrow--teal{ color:var(--teal); }
.eyebrow--ink{ color:var(--ink); }
.crumb{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted);
}

.h1{ font-family:var(--head); font-weight:800; font-size:58px; line-height:1.02; }
.h2{ font-family:var(--head); font-weight:700; font-size:46px; line-height:1.05; }
.h2-xl{ font-family:var(--head); font-weight:800; font-size:52px; line-height:1.02; }
.h3{ font-family:var(--head); font-weight:700; font-size:34px; line-height:1.08; }
.lede{ font-size:17px; line-height:1.6; color:var(--muted); }
.lede-lg{ font-size:18px; line-height:1.6; color:var(--muted); }

/* ---------- butonlar ---------- */
.btn{
  display:inline-block; padding:15px 24px; border-radius:4px;
  font-size:15px; font-weight:600; border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-teal{ background:var(--teal); color:var(--white); }
.btn-teal:hover{ background:var(--teal-dark); color:var(--white); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-lg{ padding:16px 26px; font-size:16px; }

.link-underline{
  display:inline-block; font-size:15px; font-weight:600;
  border-bottom:1px solid var(--teal); padding-bottom:2px;
}
.link-underline:hover{ border-bottom-color:var(--teal-dark); }

/* ---------- etiketler ---------- */
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  padding:6px 10px; border:1px solid var(--line); border-radius:4px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.10em; color:var(--muted);
}

/* =========================================================
   NAV
   ========================================================= */
.site-nav{
  position:sticky; top:0; z-index:60;
  height:76px; background:rgba(245,243,239,0.94);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{ height:100%; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--ink); }
.brand:hover{ color:var(--ink); }
.brand-name{ font-family:var(--head); font-weight:800; font-size:20px; letter-spacing:-0.02em; }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--muted); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.is-active{
  font-weight:600; color:var(--ink);
  border-bottom:2px solid var(--teal); padding-bottom:2px;
}
.nav-links a.nav-cta{ padding:12px 20px; background:var(--teal); color:var(--white); font-size:15px; font-weight:600; border-radius:4px; }
.nav-links a.nav-cta:hover{ background:var(--teal-dark); color:var(--white); }

.nav-toggle{
  display:none; width:44px; height:44px; padding:0; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:5px;
}
.nav-toggle span{ display:block; width:22px; height:1.5px; background:var(--ink); transition:transform .22s ease, opacity .22s ease; }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* =========================================================
   ORTAK BÖLÜM DÜZENLERİ
   ========================================================= */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:80px; align-items:end; }
.split-start{ align-items:start; }
.rule-top{ border-top:1px solid var(--line); }
.rule-top-ink{ border-top:1px solid var(--ink); }

/* bölüm başlıkları */
.sec{ padding-top:120px; }
.sec-mark{ display:flex; align-items:center; gap:12px; }

/* üç rakam */
.stats3{ margin-top:88px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.stats3 > div{ padding:32px 32px 0 0; border-right:1px solid var(--line); }
.stats3 > div:nth-child(2){ padding:32px 32px 0; }
.stats3 > div:last-child{ padding:32px 0 0 32px; border-right:0; }
.stat-num{ font-family:var(--head); font-weight:800; font-size:44px; letter-spacing:-0.03em; line-height:1; }
.stat-num--sm{ font-size:30px; line-height:1.15; }
.stat-lbl{ margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }

/* dört rakam (hakkımızda) */
.stats4{ margin-top:72px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }
.stats4 > div{ padding:32px; border-right:1px solid var(--line); }
.stats4 > div:first-child{ padding:32px 32px 0 0; }
.stats4 > div:last-child{ padding:32px 0 0 32px; border-right:0; }
.stats4 .stat-num{ font-size:40px; }
.stats4 .stat-lbl{ font-size:10.5px; }

/* teknoloji şeridi */
.techstrip{
  margin-top:96px; padding-block:18px;
  background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.techstrip div{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.10em; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* =========================================================
   ÜRÜN EKRANI (mockup)
   ========================================================= */
.screen{
  background:var(--white); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 24px 60px rgba(22,25,29,0.10); overflow:hidden;
}
.screen--sm{ box-shadow:0 14px 34px rgba(22,25,29,0.07); }
.screen--md{ box-shadow:0 18px 44px rgba(22,25,29,0.08); }
.screen-bar{
  height:36px; padding:0 14px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between;
}
.screen-bar--tall{ height:40px; padding:0 18px; }
.screen-bar span{ font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.screen-bar .lbl{ letter-spacing:0.14em; text-transform:uppercase; }
.screen-pad{ padding:14px; }
.screen-chips{ padding:14px; display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line-soft); }
.chip{
  padding:6px 10px; border:1px solid var(--line); border-radius:4px;
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
}
.chip--on{ border-color:var(--teal); color:var(--teal); }

.kpis{ display:grid; grid-template-columns:repeat(3,1fr); }
.kpis--4{ grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line-soft); }
.kpis > div{ padding:16px; border-right:1px solid var(--line-soft); }
.kpis--4 > div{ padding:18px; }
.kpis > div:last-child{ border-right:0; }
.kpi-lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.kpi-val{ margin-top:8px; font-family:var(--mono); font-size:22px; font-variant-numeric:tabular-nums; }
.kpi-val--teal{ color:var(--teal); }

.dtable{ border-top:1px solid var(--line-soft); }
.dtable-head, .dtable-row{ display:grid; padding:11px 16px; }
.dtable-head{
  padding:9px 16px; background:var(--table-head); border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
}
.dtable-row{
  border-bottom:1px solid var(--line-faint);
  font-family:var(--mono); font-size:11px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.dtable-row:last-child{ border-bottom:0; }
.dtable .num{ text-align:right; }
.c-pair{ display:none; }
.pill{ font-style:normal; padding:2px 6px; font-size:9.5px; }
.pill--ok{ background:var(--teal-wash); color:var(--teal); }
.pill--wait{ background:#F1EEE8; color:var(--muted); }

/* barlar */
.bars{ display:flex; align-items:flex-end; gap:10px; height:120px; margin-top:20px; }
.bars--sm{ height:104px; gap:8px; margin-top:0; }
.bars > i{ flex:1; background:var(--fill); display:block; }
.bars > i.on{ background:var(--teal); }
.bars-axis{ display:flex; justify-content:space-between; margin-top:12px; font-family:var(--mono); font-size:10px; color:var(--muted); }

/* mini kart iskeleti */
.mini{
  height:64px; background:var(--white); border:1px solid var(--line-soft); border-radius:4px;
  padding:10px; display:flex; flex-direction:column; gap:6px;
}
.mini i{ display:block; height:6px; background:var(--fill); }
.mini i:first-child{ height:8px; }
.mini i.on{ background:var(--teal); }
.mini--grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.mini--grid i{ height:auto; }

.placeholder{
  height:120px; border:1px dashed var(--line); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted);
}

/* =========================================================
   ANA SAYFA
   ========================================================= */
.hero{ padding-top:104px; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); gap:80px; align-items:start; }
.hero h1{ margin-top:24px; font-weight:800; font-size:68px; line-height:1.02; text-wrap:pretty; }
.hero p{ margin-top:28px; max-width:480px; font-size:18px; line-height:1.6; color:var(--muted); }
.hero-cta{ display:flex; gap:12px; margin-top:40px; flex-wrap:wrap; }

/* öne çıkan paket */
.feature{
  margin-top:56px; padding-top:40px; border-top:1px solid var(--ink);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:64px; align-items:center;
}
.feature h3{ margin-top:16px; font-weight:700; font-size:34px; line-height:1.08; }
.feature p{ margin-top:16px; max-width:440px; font-size:17px; line-height:1.6; color:var(--muted); }
.feature .tags{ margin-top:24px; }
.feature .link-underline{ margin-top:28px; }

/* altı paket ızgarası */
.pkg6{ margin-top:8px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.pkg6 > article{ padding:36px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.pkg6 > article:nth-child(3n+1){ padding-left:0; }
.pkg6 > article:nth-child(3n){ padding-right:0; border-right:0; }
.pkg6 > article:nth-last-child(-n+3){ border-bottom:0; }
.pkg6 .meta{ margin-top:20px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; color:var(--muted); }
.pkg6 h4{ margin-top:10px; font-weight:700; font-size:22px; letter-spacing:-0.02em; }
.pkg6 p{ margin-top:10px; font-size:15.5px; line-height:1.6; color:var(--muted); }

/* hizmetler (ana sayfa) */
.svc-split{ margin-top:56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:64px; align-items:start; }
.svc-row{
  padding:28px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:56px minmax(0,300px) minmax(0,1fr); gap:24px; align-items:start;
}
.svc-row .n{ font-family:var(--mono); font-size:12px; color:var(--teal); }
.svc-row h3{ font-weight:700; font-size:26px; letter-spacing:-0.02em; }
.svc-row p{ font-size:16px; line-height:1.6; color:var(--muted); }
.svc-side > div{ padding:24px 0; border-bottom:1px solid var(--line); }
.svc-side h3{ font-weight:700; font-size:20px; letter-spacing:-0.02em; }
.svc-side p{ margin-top:10px; font-size:15.5px; line-height:1.6; color:var(--muted); }

/* nasıl çalışırız */
.method{
  margin-top:120px; padding-block:96px;
  background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.method .split{ grid-template-columns:minmax(0,1fr) minmax(0,460px); }
.method h2{ margin-top:24px; font-weight:800; font-size:52px; line-height:1; }
.dbo3{ margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.dbo3 > div{ padding:36px 40px 0; border-right:1px solid var(--line); }
.dbo3 > div:first-child{ padding-left:0; }
.dbo3 > div:last-child{ padding-right:0; border-right:0; }
.dbo-title{ margin-top:22px; display:flex; align-items:baseline; gap:14px; }
.dbo-title b{ font-family:var(--head); font-weight:800; font-size:40px; letter-spacing:-0.03em; line-height:1; }
.dbo-title span{ font-family:var(--head); font-weight:700; font-size:26px; letter-spacing:-0.02em; }
.dbo-list{ margin-top:20px; display:flex; flex-direction:column; gap:12px; font-size:15.5px; line-height:1.5; color:var(--muted); }
.dbo-list div{ padding-top:12px; border-top:1px solid var(--fill); }

/* referans tablosu */
.reftable{ margin-top:48px; }
.reftable-head, .reftable-row{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,1fr) 90px; gap:24px;
}
.reftable-head{
  padding-bottom:12px; border-bottom:1px solid var(--ink);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}
.reftable-row{ padding:22px 0; border-bottom:1px solid var(--line); align-items:center; }
.reftable-row .c1{ font-size:16px; font-weight:600; }
.reftable-row .c2{ font-size:16px; color:var(--muted); }
.reftable-row .c3{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; color:var(--muted); }
.reftable-row .c4{ font-family:var(--mono); font-size:12px; text-align:right; color:var(--ink); }
.ta-r{ text-align:right; }

/* =========================================================
   İLETİŞİM BANDI + FOOTER
   ========================================================= */
.contact{ margin-top:120px; padding-block:96px; border-top:1px solid var(--line); background:var(--white); }
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:80px; align-items:start; }
.contact h2{ max-width:640px; font-weight:800; font-size:52px; line-height:1.02; }
.contact p{ margin-top:24px; max-width:560px; font-size:18px; line-height:1.6; color:var(--muted); }
.contact .btn{ margin-top:36px; }
.contact-facts{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.contact-facts > div{ padding:18px 0; border-bottom:1px solid var(--line-soft); }
.contact-facts > div:last-child{ border-bottom:0; }
.contact-facts dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.contact-facts dd{ margin:8px 0 0; font-size:15.5px; color:var(--ink); }
.contact-facts dd.mono{ font-family:var(--mono); font-size:14px; }
.contact-facts a{ color:var(--ink); }
.contact-facts a:hover{ color:var(--teal); }

/* CTA bandı (alt sayfalar) */
.cta-band{ margin-top:96px; padding-block:80px; background:var(--white); border-top:1px solid var(--line); }
.cta-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:80px; align-items:center; }
.cta-grid h2{ max-width:620px; font-weight:800; font-size:44px; line-height:1.04; }
.cta-grid p{ margin-top:20px; max-width:520px; font-size:17px; line-height:1.6; color:var(--muted); }
.cta-grid .btn{ justify-self:start; }

.site-footer{ padding-block:80px 40px; background:var(--footer-bg); color:var(--footer-text); }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,180px)); gap:48px; }
.footer-about{ margin-top:20px; max-width:300px; font-size:15.5px; line-height:1.6; color:var(--footer-muted); }
.footer-col h4{
  font-family:var(--mono); font-weight:500; font-size:10.5px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--footer-dim);
}
.footer-col ul{ margin-top:16px; display:flex; flex-direction:column; gap:10px; font-size:15px; }
.footer-col a{ color:var(--footer-text); }
.footer-col a:hover{ color:var(--teal-bright); }
.footer-col a.hi{ color:var(--teal-bright); }
.footer-col .mono{ font-size:13px; color:var(--footer-muted); }
.footer-base{
  margin-top:64px; padding-top:24px; border-top:1px solid var(--footer-line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.10em; color:var(--footer-dim);
}

/* =========================================================
   PAKETLER SAYFASI
   ========================================================= */
.page-head{ padding-top:72px; }
.page-head .split{ margin-top:40px; }
.page-head h1{ font-weight:800; font-size:58px; line-height:1.02; }

.filterbar{
  margin-top:48px; padding-block:16px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.filterbar .set{ display:flex; gap:8px; flex-wrap:wrap; }
.fchip{
  padding:8px 14px; border:1px solid var(--line); border-radius:4px; background:none;
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--muted); cursor:pointer;
  transition:.18s ease;
}
.fchip:hover{ border-color:var(--ink); color:var(--ink); }
.fchip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.filterbar .sort{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--muted); }

.pkgrow{
  padding:44px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:88px minmax(0,1fr) minmax(0,440px); gap:40px; align-items:start;
}
.pkgrow:last-of-type{ border-bottom-color:var(--ink); }
.pkgrow.is-hidden{ display:none; }
.pkgrow > .no{ font-family:var(--mono); font-size:12px; letter-spacing:0.12em; color:var(--muted); }
.pkgrow .kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; color:var(--teal); }
.pkgrow h2{ margin-top:12px; font-weight:700; font-size:32px; }
.pkgrow p{ margin-top:12px; max-width:520px; font-size:16.5px; line-height:1.6; color:var(--muted); }
.pkgrow .tags{ margin-top:20px; }
.pkgrow .link-underline{ margin-top:24px; }

.rulesheet{ display:grid; padding:10px 14px; font-family:var(--mono); font-size:10.5px; font-variant-numeric:tabular-nums; border-bottom:1px solid var(--line-faint); }
.rulesheet:last-child{ border-bottom:0; }
.rulesheet--head{
  padding:8px 14px; background:var(--table-head); border-bottom:1px solid var(--line-soft);
  font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
}
.tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; }
.tri > div{ border:1px solid var(--line-soft); border-radius:4px; padding:10px; }
.tri .kpi-lbl{ font-size:9px; letter-spacing:0.14em; }
.tri .v{ margin-top:6px; font-family:var(--mono); font-size:17px; font-variant-numeric:tabular-nums; }
.tri .v.on{ color:var(--teal); }

.steps{ padding:16px 14px; display:flex; flex-direction:column; gap:10px; }
.steps div{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10.5px; }
.dot{ width:8px; height:8px; background:var(--teal); flex:none; }
.dot--off{ background:none; border:1.5px solid var(--line); }

.tiles6{ padding:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tiles6 > i{ display:block; height:44px; background:var(--band); border:1px solid var(--line-soft); }
.tiles6 > i.on{ background:var(--teal); border-color:var(--teal); }

/* =========================================================
   PAKET DETAY
   ========================================================= */
.detail-grid{ margin-top:40px; display:grid; grid-template-columns:minmax(0,600px) minmax(0,1fr); gap:80px; align-items:start; }
.detail-grid h1{ margin-top:20px; font-weight:800; font-size:58px; line-height:1.02; }
.detail-grid > div > p{ margin-top:24px; max-width:520px; font-size:18px; line-height:1.6; color:var(--muted); }
.detail-cta{ display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; }
.spec{ border-top:1px solid var(--ink); }
.spec > div{ padding:18px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; align-items:baseline; }
.spec > div:last-child{ border-bottom:0; }
.spec dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.spec dd{ margin:0; font-family:var(--mono); font-size:13px; }
.spec dd.txt{ font-family:var(--sans); font-size:14.5px; }

.bigscreen{ margin-top:64px; }
.bigscreen .body{ display:grid; grid-template-columns:240px minmax(0,1fr); }
.bigscreen .side{ border-right:1px solid var(--line-soft); padding:18px; }
.bigscreen .side .grp{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.bigscreen .side .opt{
  padding:9px 10px; border:1px solid var(--line-soft); border-radius:4px;
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
}
.bigscreen .side .opt.on{ border-color:var(--teal); color:var(--teal); }
.bigscreen .side .opt.solid{ background:var(--teal); border-color:var(--teal); color:var(--white); }
.bigscreen .side .sep{ margin-top:24px; padding-top:14px; border-top:1px solid var(--line-soft); }
.bigtable-head, .bigtable-row{ display:grid; grid-template-columns:1fr 1fr 120px 120px 100px; padding:12px 18px; }
.bigtable-head{
  padding:10px 18px; background:var(--table-head); border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
}
.bigtable-row{ border-bottom:1px solid var(--line-faint); font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums; }
.bigtable-row:nth-child(odd){ background:var(--row-alt); }
.bigtable-row:last-child{ border-bottom:0; }
.ok{ color:var(--teal); }
.wait{ color:var(--muted); }

.probsol{ margin-top:96px; display:grid; grid-template-columns:repeat(2,1fr); gap:64px; }
.probsol > div{ border-top:1px solid var(--ink); padding-top:24px; }
.probsol > div.sol{ border-top-color:var(--teal); }
.probsol h2{ margin-top:20px; font-weight:700; font-size:30px; line-height:1.1; }
.probsol .items{ margin-top:20px; display:flex; flex-direction:column; gap:14px; font-size:16px; line-height:1.6; color:var(--muted); }
.probsol .items div{ padding-top:14px; border-top:1px solid var(--fill); }

.scope4{ margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.scope4 > div{ padding:32px; border-right:1px solid var(--line); }
.scope4 > div:first-child{ padding:32px 32px 32px 0; }
.scope4 > div:last-child{ padding:32px 0 32px 32px; border-right:0; }
.scope4 .n{ font-family:var(--mono); font-size:11px; color:var(--teal); }
.scope4 h3{ margin-top:14px; font-weight:700; font-size:19px; letter-spacing:-0.02em; }
.scope4 p{ margin-top:10px; font-size:15px; line-height:1.6; color:var(--muted); }

.techgrid{ margin-top:96px; display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:64px; align-items:start; }
.techgrid h2{ margin-top:20px; font-weight:700; font-size:30px; line-height:1.1; }
.techlist{ border-top:1px solid var(--ink); }
.techlist > div{ padding:20px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:200px minmax(0,1fr); gap:32px; }
.techlist > div:last-child{ border-bottom:0; }
.techlist dt{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.techlist dd{ margin:0; font-size:15.5px; line-height:1.6; color:var(--ink); }

.related3{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.related3 > div{ padding:28px 32px; border-right:1px solid var(--line); }
.related3 > div:first-child{ padding:28px 32px 28px 0; }
.related3 > div:last-child{ padding:28px 0 28px 32px; border-right:0; }
.related3 .kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; color:var(--muted); }
.related3 h3{ margin-top:10px; font-weight:700; font-size:21px; letter-spacing:-0.02em; }
.related3 a{ margin-top:14px; font-size:14.5px; }

/* =========================================================
   HİZMETLER SAYFASI
   ========================================================= */
.svc-index{
  margin-top:56px; padding-block:16px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
}
.svc-index a{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--ink); }
.svc-index a:hover{ color:var(--teal); }

.svc-block{
  padding:64px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,540px) minmax(0,1fr); gap:80px; align-items:start;
}
.svc-block:last-of-type{ border-bottom-color:var(--ink); }
.svc-block .kick{ display:flex; align-items:center; gap:12px; }
.svc-block h2{ margin-top:20px; font-weight:700; font-size:40px; line-height:1.05; }
.svc-block > div > p{ margin-top:20px; max-width:480px; font-size:17px; line-height:1.6; color:var(--muted); }
.svc-block .tags{ margin-top:28px; }
.svc-block .link-underline{ margin-top:28px; }

.scoperows{ margin-top:20px; }
.scoperows > div{ padding:16px 0; border-top:1px solid var(--fill); display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; }
.scoperows > div:last-child{ border-bottom:1px solid var(--fill); }
.scoperows b{ font-size:15.5px; font-weight:600; }
.scoperows span{ font-size:15.5px; line-height:1.55; color:var(--muted); }

.outcards{ margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.outcards > div{ padding:16px; background:var(--white); border:1px solid var(--line); border-radius:4px; }
.outcards .kpi-lbl{ font-size:9.5px; }
.outcards .v{ margin-top:8px; font-size:15px; line-height:1.5; }
.outcards .v.mono{ font-family:var(--mono); }

.progress{ margin-top:20px; display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.progress i{ display:block; height:6px; background:var(--teal); }
.progress i.off{ background:var(--line); }

.cards2{ margin-top:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.cards2 > div{ padding:20px; background:var(--white); border:1px solid var(--line); border-radius:4px; }
.cards2 .ph{ font-family:var(--mono); font-size:10.5px; color:var(--teal); }
.cards2 .ph.off{ color:var(--muted); }
.cards2 h3{ margin-top:10px; font-weight:700; font-size:19px; letter-spacing:-0.02em; }
.cards2 h3:first-child{ margin-top:0; }
.cards2 p{ margin-top:8px; font-size:15px; line-height:1.55; color:var(--muted); }

.notebox{
  margin-top:24px; padding:18px 20px; border:1px solid var(--teal);
  border-radius:4px; background:var(--teal-wash);
}
.notebox .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal-dark); }
.notebox p{ margin-top:8px; font-size:15.5px; line-height:1.6; color:var(--ink); }

.pkglist{ margin-top:20px; border-top:1px solid var(--fill); }
.pkglist a{
  padding:14px 0; border-bottom:1px solid var(--fill);
  display:grid; grid-template-columns:44px minmax(0,1fr) 120px; gap:20px; align-items:center;
  color:var(--ink);
}
.pkglist a:hover{ color:var(--teal); }
.pkglist .n{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.pkglist .t{ font-size:16px; font-weight:600; }
.pkglist .m{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; color:var(--muted); text-align:right; }

.which3{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.which3 > div{ padding:32px; border-right:1px solid var(--line); }
.which3 > div:first-child{ padding:32px 32px 32px 0; }
.which3 > div:last-child{ padding:32px 0 32px 32px; border-right:0; }
.which3 p{ font-size:17px; line-height:1.55; font-weight:600; }
.which3 .route{ margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); }

/* =========================================================
   HAKKIMIZDA
   ========================================================= */
.about-split{ margin-top:96px; display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:80px; align-items:start; }
.about-split h2{ margin-top:20px; font-weight:700; font-size:34px; line-height:1.08; }
.about-body{ display:flex; flex-direction:column; gap:20px; max-width:720px; }
.about-body p:first-child{ font-size:18px; line-height:1.65; color:var(--ink); }
.about-body p{ font-size:17px; line-height:1.65; color:var(--muted); }

.principles{ margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
.principles > div{ padding:36px 40px 36px 0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.principles > div:nth-child(even){ padding:36px 0 36px 40px; border-right:0; }
.principles > div:nth-last-child(-n+2){ border-bottom:0; }
.principles .n{ font-family:var(--mono); font-size:11px; color:var(--teal); }
.principles h3{ margin-top:14px; font-weight:700; font-size:24px; letter-spacing:-0.02em; }
.principles p{ margin-top:12px; font-size:16px; line-height:1.6; color:var(--muted); }

.deflist{ border-top:1px solid var(--ink); }
.deflist > div{ padding:22px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:180px minmax(0,1fr); gap:32px; align-items:baseline; }
.deflist > div:last-child{ border-bottom:0; }
.deflist dt{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); }
.deflist dd{ margin:0; font-size:16.5px; line-height:1.6; }
.deflist--sm > div{ padding:18px 0; grid-template-columns:200px minmax(0,1fr); }
.deflist--sm dt{ font-size:10.5px; letter-spacing:0.16em; color:var(--muted); }
.deflist--sm dd{ font-size:15.5px; }
.deflist--sm dd.mono{ font-family:var(--mono); font-size:14px; }

/* =========================================================
   REFERANSLAR — BOŞ DURUM
   ========================================================= */
.empty{
  margin-top:64px; padding:80px 64px; border:1px dashed var(--line);
  border-radius:4px; background:var(--white);
}
.empty > div{ max-width:560px; }
.empty h2{ margin-top:24px; font-weight:700; font-size:30px; line-height:1.1; }
.empty p{ margin-top:16px; font-size:17px; line-height:1.6; color:var(--muted); }
.empty .row{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }

.skel{ margin-top:56px; }
.skel-top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.skel-head{
  margin-top:20px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,1fr) 90px; gap:24px;
  padding-bottom:12px; border-bottom:1px solid var(--ink);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}
.skel-row{
  padding:22px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,1fr) 90px; gap:24px; align-items:center;
}
.skel-row i{ display:block; height:12px; background:var(--fill-2); border-radius:2px; }
.skel-row i.dark{ background:var(--fill); }
.skel-row i.end{ width:46px; justify-self:end; }

/* =========================================================
   DUYARLI DAVRANIŞ  (mobil artboard 390 esas alındı)
   ========================================================= */
@media (max-width:1280px){
  :root{ --gutter:64px; }
  .hero-grid{ gap:56px; }
  .split, .method .split{ gap:56px; }
}

@media (max-width:1080px){
  :root{ --gutter:40px; }
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .hero h1{ font-size:54px; }
  .split, .method .split, .cta-grid, .contact-grid,
  .detail-grid, .techgrid, .about-split, .svc-split{ grid-template-columns:1fr; gap:40px; align-items:start; }
  .feature{ grid-template-columns:1fr; gap:40px; }
  .pkg6{ grid-template-columns:repeat(2,1fr); }
  .pkg6 > article{ padding:32px 28px; }
  .pkg6 > article:nth-child(3n+1){ padding-left:28px; }
  .pkg6 > article:nth-child(3n){ padding-right:28px; border-right:1px solid var(--line); }
  .pkg6 > article:nth-child(2n+1){ padding-left:0; }
  .pkg6 > article:nth-child(2n){ padding-right:0; border-right:0; }
  .pkg6 > article:nth-last-child(-n+3){ border-bottom:1px solid var(--line); }
  .pkg6 > article:nth-last-child(-n+2){ border-bottom:0; }
  .scope4, .stats4{ grid-template-columns:repeat(2,1fr); }
  .scope4 > div, .stats4 > div{ padding:28px !important; border-bottom:1px solid var(--line); }
  .scope4 > div:nth-child(2n), .stats4 > div:nth-child(2n){ border-right:0; padding-right:0 !important; }
  .scope4 > div:nth-child(2n+1), .stats4 > div:nth-child(2n+1){ padding-left:0 !important; }
  .bigscreen .body{ grid-template-columns:1fr; }
  .bigscreen .side{ border-right:0; border-bottom:1px solid var(--line-soft); }
  .kpis--4{ grid-template-columns:repeat(2,1fr); }
  .kpis--4 > div:nth-child(2n){ border-right:0; }
  .kpis--4 > div:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
  .svc-index{ grid-template-columns:repeat(3,1fr); gap:16px 24px; }
  .svc-block{ grid-template-columns:1fr; gap:40px; padding:48px 0; }
  .pkgrow{ grid-template-columns:56px minmax(0,1fr); gap:24px; }
  .pkgrow > .screen, .pkgrow > .placeholder{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .method{ margin-top:88px; padding-block:64px; }
  .dbo3, .stats3, .which3, .related3, .principles{ grid-template-columns:1fr; }
  .dbo3 > div, .which3 > div, .related3 > div, .principles > div{
    padding:28px 0 !important; border-right:0 !important; border-bottom:1px solid var(--line);
  }
  .dbo3 > div:last-child, .which3 > div:last-child,
  .related3 > div:last-child, .principles > div:last-child{ border-bottom:0; }
  .stats3 > div{
    padding:20px 0 !important; border-right:0; border-bottom:1px solid var(--line);
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  }
  .stats3 > div:last-child{ border-bottom:0; }
  .stats3 .stat-lbl{ margin-top:0; }
  .stat-num{ font-size:32px; }
  .stat-num--sm{ font-size:22px; }
  .probsol{ grid-template-columns:1fr; gap:40px; }
  .cards2, .outcards{ grid-template-columns:1fr; }
  /* mobil artboard: numara + başlık aynı satırda, metin altta tam genişlik */
  .svc-row{ grid-template-columns:auto minmax(0,1fr); gap:8px 12px; padding:20px 0; align-items:baseline; }
  .svc-row h3{ font-size:22px; }
  .svc-row p{ grid-column:1 / -1; }
  .svc-row:last-child{ border-bottom:0; }
  .svc-split{ gap:28px; }
  .svc-side{ padding-top:16px !important; }
  .scoperows > div, .techlist > div, .deflist > div, .deflist--sm > div{ grid-template-columns:1fr; gap:8px; }
  .footer-grid{ grid-template-columns:repeat(2,1fr); gap:36px; }
  .reftable-head, .reftable-row, .skel-head, .skel-row{ grid-template-columns:minmax(0,1fr) 80px; gap:12px; }
  .reftable-head span:nth-child(2), .reftable-head span:nth-child(3),
  .skel-head span:nth-child(2), .skel-head span:nth-child(3){ display:none; }
  .reftable-row .c2, .reftable-row .c3{ display:none; }
  .skel-row i:nth-child(2), .skel-row i:nth-child(3){ display:none; }
  .bigtable-head, .bigtable-row{ grid-template-columns:minmax(0,1fr) 92px 84px; }
  .bigtable .c-co, .bigtable .c-cp, .bigtable .c-borc{ display:none; }
  .bigtable .c-pair{ display:block; }
}

@media (max-width:760px){
  :root{ --gutter:20px; }
  .site-nav{ height:60px; }
  .nav-links{
    position:fixed; inset:60px 0 auto 0; z-index:59;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 20px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    max-height:calc(100vh - 60px); overflow-y:auto;
  }
  .nav-links.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav-links a{ padding:14px 0; font-size:17px; border-bottom:1px solid var(--line-soft); }
  .nav-links a.is-active{ border-bottom:1px solid var(--line-soft); }
  .nav-cta{ margin-top:14px; text-align:center; padding:14px 20px; }
  .nav-toggle{ display:flex; }
  .brand-name{ font-size:17px; }
  .brand svg{ width:40px; height:12px; }

  .hero{ padding-top:44px; }
  .hero h1{ margin-top:18px; font-size:38px; line-height:1.04; }
  .hero p{ margin-top:20px; font-size:16px; }
  .hero-cta{ flex-direction:column; gap:10px; margin-top:28px; }
  .hero-cta .btn{ text-align:center; font-size:16px; padding:15px 20px; }
  .stats3{ margin-top:32px; }
  .techstrip{ margin-top:32px; padding-block:14px; }
  .techstrip div{ white-space:normal; }

  .sec{ padding-top:72px; }
  .page-head{ padding-top:44px; }
  .page-head h1, .detail-grid h1{ font-size:36px; }
  .h1{ font-size:36px; }
  .h2, .method h2, .contact h2{ font-size:30px; line-height:1.06; }
  .h2-xl{ font-size:34px; }
  .h3, .feature h3, .probsol h2, .techgrid h2, .about-split h2{ font-size:26px; }
  .svc-block h2{ font-size:30px; }
  .cta-grid h2{ font-size:30px; }
  .lede-lg, .contact p{ font-size:16px; }

  .feature{ margin-top:32px; padding-top:24px; }
  .pkg6{ grid-template-columns:1fr; }
  .pkg6 > article{ padding:24px 0 !important; border-right:0 !important; border-bottom:1px solid var(--line); }
  .pkg6 > article:last-child{ border-bottom:0; }
  .svc-index{ grid-template-columns:repeat(2,1fr); }
  .filterbar{ gap:12px; }
  .filterbar .sort{ display:none; }
  .pkgrow{ grid-template-columns:1fr; gap:20px; padding:32px 0; }
  .pkgrow h2{ font-size:26px; }
  .empty{ padding:36px 24px; }
  .contact{ margin-top:72px; padding-block:56px; }
  .cta-band{ margin-top:72px; padding-block:56px; }
  .method .dbo3{ margin-top:32px; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .site-footer{ padding-block:56px 32px; }
  .footer-base{ margin-top:40px; }
  .detail-grid, .bigscreen{ margin-top:32px; }

  /* ürün ekranı tablosu — mobil artboard düzeni: Çift · Fark · Durum */
  .dtable-head, .dtable-row{ grid-template-columns:minmax(0,1fr) 64px 66px !important; padding-inline:14px; }
  .dtable .c-co, .dtable .c-cp{ display:none; }
  .dtable .c-pair{ display:block; }
  .dtable-row.hide-sm{ display:none; }
  .screen-chips{ padding:12px 14px; }
  .kpis > div{ padding:12px; }
  .kpi-val{ font-size:18px; }
  .screen-bar{ padding-inline:14px; }
  .probsol, .techgrid, .about-split{ margin-top:64px; }
  .scope4 > div, .stats4 > div{ padding:24px 0 !important; }
  .scope4, .stats4{ grid-template-columns:1fr; }
  .scope4 > div:nth-child(2n), .stats4 > div:nth-child(2n){ padding-left:0 !important; }
  .stats4 > div:last-child, .scope4 > div:last-child{ border-bottom:0; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   İLETİŞİM FORMU
   (artboard'da ayrı iletişim sayfası yok; mevcut bileşen
    diliyle kurulmuştur — alanlar ana sayfadaki iletişim
    bandının bilgileriyle aynıdır.)
   ========================================================= */
.form-grid{ margin-top:40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:80px; align-items:start; }
.form{ border-top:1px solid var(--ink); }
.field{ padding:20px 0; border-bottom:1px solid var(--line); }
.field label{
  display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}
.field input, .field textarea, .field select{
  width:100%; margin-top:10px; padding:0; border:0; background:none;
  font-family:var(--sans); font-size:17px; color:var(--ink); line-height:1.5;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; }
.field:focus-within{ border-bottom-color:var(--teal); }
.field input::placeholder, .field textarea::placeholder{ color:#A9A399; }
.field.is-error{ border-bottom-color:#B4472E; }
.form-actions{ margin-top:32px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.form-note{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--muted); }
.form-note.err{ color:#B4472E; }

@media (max-width:1080px){ .form-grid{ grid-template-columns:1fr; gap:40px; } }

/* =========================================================
   SAT PORTALI mockup'ı
   (gerçek ekranın yapısı, sitenin çizim diline uyarlandı)
   ========================================================= */
.sat-body{ padding:12px; }
.sat-user{
  position:relative; padding:14px 16px; border-radius:4px;
  background:var(--teal); color:var(--white);
}
.sat-user .k{
  font-family:var(--mono); font-size:8.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(255,255,255,0.72);
}
.sat-user .n{ margin-top:5px; font-family:var(--head); font-weight:700; font-size:15px; letter-spacing:-0.02em; }
.sat-user .o{ margin-top:6px; font-family:var(--mono); font-size:9.5px; color:rgba(255,255,255,0.72); }
.sat-user .av{
  position:absolute; top:50%; right:16px; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.22);
}
.sat-list{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.sat-row{
  display:grid; grid-template-columns:3px 20px minmax(0,1fr) auto; gap:10px; align-items:center;
  padding:8px 10px; background:var(--white); border:1px solid var(--line-soft); border-radius:4px;
}
.sat-row .stripe{ align-self:stretch; border-radius:2px; background:var(--fill); }
.sat-row .stripe.on{ background:var(--teal); }
.sat-row .stripe.ink{ background:var(--ink); }
.sat-row .ico{ height:20px; border-radius:3px; background:var(--band); }
.sat-row .ico.on{ background:var(--teal-wash); }
.sat-row .t{ font-size:11px; font-weight:600; color:var(--ink); }
.sat-row .c{ font-family:var(--mono); font-size:9.5px; color:var(--muted); }

/* ana sayfadaki mini kart varyantı */
.mini--rows{ gap:5px; justify-content:center; }
.mini--rows i{ height:9px; border-radius:2px; background:var(--fill); width:100%; }
.mini--rows i.on{ background:var(--teal); }