/* ==========================================================================
   AMPERIUM — Ölçüm aleti tasarım sistemi
   Tek görsel dünyaya bilinçli bağlılık: koyu grafit.
   Ürünler siyah kasalı; marka kırmızısı en çok koyu zeminde çalışıyor.
   ========================================================================== */

:root{
  /* yüzeyler */
  --ground:#0C0E11;      /* soğuk grafit — cihaz gövdesi */
  --surface:#14171C;
  --surface-2:#1C2027;
  --plate:#EDEEF0;       /* açık ürün platosu — akünün LCD ekranı */
  --plate-2:#DCDEE2;

  /* çizgiler */
  --line:#282D36;
  --line-2:#3A414C;

  /* mürekkep */
  --ink:#EDEFF2;
  --ink-2:#A2AAB5;
  --ink-3:#6E7681;

  /* aksan */
  --red:#EA2027;         /* logodan örneklendi */
  --red-lit:#FF5A5F;     /* koyu zeminde küçük metin için */
  --red-deep:#B5161C;

  /* durum */
  --ok:#39C07C;
  --warn:#E3A33C;
  --ser2:#3D8DC4;        /* grafik ikinci seri */

  /* tipografi */
  --d:'Archivo','Helvetica Neue',Arial,sans-serif;
  --b:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --m:'IBM Plex Mono','SF Mono',ui-monospace,monospace;

  --pad:clamp(20px,5vw,64px);
  --max:1280px;
  --nav-h:78px;
}

*{box-sizing:border-box}
/* display:flex/grid tanımlayan sınıflar tarayıcının [hidden] kuralını ezdiği için gerekli */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--b);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3,h4,h5{font-family:var(--d);font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
button{font:inherit}
:focus-visible{outline:2px solid var(--red-lit);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;padding:10px 16px;font-family:var(--m);font-size:13px}
.skip:focus{left:8px;top:8px}

/* ölçek graduasyonu — panel metre çentikleri */
.ticks{height:9px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 9px);border-bottom:1px solid var(--line)}
.ticks.tall{
  height:14px;
  background:
    repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 45px),
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 9px);
  background-size:100% 14px,100% 7px;
  background-position:0 0,0 bottom;
  background-repeat:no-repeat,repeat-x;
}

/* bölüm iskeleti */
.eyebrow{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red);flex:none}
.sec{padding-block:clamp(52px,8vw,104px)}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;max-width:62ch}
.sec-head h2{font-size:clamp(27px,3.6vw,44px)}
.sec-head p{color:var(--ink-2);font-size:clamp(15px,1.4vw,17px)}
.sec-head--row{max-width:none;flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.sec-head--row > div{display:flex;flex-direction:column;gap:14px;max-width:54ch}

/* ==========================================================================
   ÜST BİLGİ + NAVİGASYON
   ========================================================================== */
.util{border-bottom:1px solid var(--line);background:#0A0C0F}
.util-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:7px var(--pad);max-width:var(--max);margin-inline:auto;
  font-family:var(--m);font-size:11.5px;color:var(--ink-3);letter-spacing:.03em}
.util a:hover{color:var(--ink)}
.util-r{display:flex;gap:18px}
@media(max-width:720px){.util-in{justify-content:center}.util-l{display:none}}

.nav{position:sticky;top:0;z-index:60;background:rgba(12,14,17,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:clamp(12px,2vw,30px);padding:14px var(--pad);max-width:var(--max);margin-inline:auto}
.logo{display:block;width:126px;flex:none}
.logo img{width:100%;height:auto}

/* flex öğesi <nav>, .nav-links değil — auto margin buraya gelmeli */
.nav-in > nav{margin-left:auto}
.nav-links{display:flex;gap:clamp(10px,1.5vw,22px);align-items:center}
.nav-links > li{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink-2);letter-spacing:.01em;white-space:nowrap;padding:8px 0;background:none;border:0;cursor:pointer;font-family:var(--b)}
.nav-link:hover{color:var(--ink)}
.nav-link[aria-current="page"],.nav-link.on{color:var(--ink)}
.nav-link[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--red)}
.nav-link .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.nav-link[aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(-2px)}

.drop{position:absolute;top:100%;left:-18px;min-width:290px;background:var(--surface);border:1px solid var(--line-2);border-radius:2px;
  padding:8px;box-shadow:0 22px 50px rgba(0,0,0,.6);z-index:5}
.drop a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:2px}
.drop a:hover{background:var(--surface-2)}
.drop a b{font-size:13.5px;font-weight:600;color:var(--ink)}
.drop a span{font-family:var(--m);font-size:11px;color:var(--ink-3)}
.drop hr{border:0;border-top:1px solid var(--line);margin:6px 8px}

.nav-cta{font-family:var(--m);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  background:var(--red);color:#fff;padding:11px 16px;border-radius:2px;white-space:nowrap;flex:none}
.nav-cta:hover{background:var(--red-deep)}

/* hamburger */
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-2);border-radius:2px;background:none;
  cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:12px;width:18px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .2s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobil panel */
.mnav{position:fixed;inset:0;top:0;z-index:70;background:var(--ground);overflow-y:auto;
  display:flex;flex-direction:column;padding-bottom:40px}
.mnav-top{display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ground)}
.mnav-body{padding:8px var(--pad) 0}
.mnav-body > li{border-bottom:1px solid var(--line)}
.mnav-body > li > a,.macc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;
  padding:18px 0;font-family:var(--d);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink);
  background:none;border:0;cursor:pointer;text-align:left}
.macc-btn .caret{width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .22s;flex:none;margin-right:4px}
.macc-btn[aria-expanded="true"] .caret{transform:rotate(-135deg)}
.macc-panel{padding-bottom:14px;display:flex;flex-direction:column;gap:1px}
.macc-panel a{display:flex;flex-direction:column;gap:1px;padding:11px 0 11px 16px;border-left:2px solid var(--line)}
.macc-panel a:hover,.macc-panel a:focus-visible{border-left-color:var(--red)}
.macc-panel a b{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.macc-panel a span{font-family:var(--m);font-size:11px;color:var(--ink-3)}
.mnav-foot{margin-top:auto;padding:26px var(--pad) 0;display:flex;flex-direction:column;gap:12px}
.mnav-foot .contact{font-family:var(--m);font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
body.locked{overflow:hidden}

@media(max-width:1080px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
}
@media(min-width:1081px){
  .mnav{display:none!important}
}

/* ==========================================================================
   DÜĞMELER
   ========================================================================== */
.btn{font-family:var(--m);font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  padding:14px 22px;border-radius:2px;border:1px solid var(--line-2);color:var(--ink);cursor:pointer;background:none;
  display:inline-flex;align-items:center;gap:9px;text-align:center}
.btn:hover{border-color:var(--ink-3);background:var(--surface-2)}
.btn-p{background:var(--red);border-color:var(--red);color:#fff}
.btn-p:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.badge{font-family:var(--m);font-size:11px;letter-spacing:.06em;border:1px solid var(--line-2);color:var(--ink-2);padding:6px 10px;border-radius:2px}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 78% 40%,rgba(234,32,39,.10),transparent 70%)}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(44px,6vw,88px)}
.hero h1{font-size:clamp(36px,6.2vw,80px);line-height:.96;margin:18px 0 20px}
.hero h1 em{font-style:italic;color:var(--red);font-weight:900}
.hero-sub{color:var(--ink-2);font-size:clamp(15px,1.5vw,18.5px);max-width:46ch}
.hero-art{position:relative}
.plate{background:linear-gradient(160deg,var(--plate),var(--plate-2));border-radius:3px;padding:clamp(16px,3vw,26px)}
.plate img{width:100%;height:auto;mix-blend-mode:multiply}
.readout{position:absolute;right:-10px;bottom:22px;background:var(--surface);border:1px solid var(--line-2);border-radius:2px;
  padding:12px 16px;display:flex;gap:clamp(12px,2vw,20px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.readout div{display:flex;flex-direction:column;gap:2px}
.readout b{font-family:var(--m);font-size:clamp(15px,2vw,19px);font-weight:600;letter-spacing:-.01em}
.readout span{font-family:var(--m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.readout .g{color:var(--ok)}
@media(max-width:860px){.hero-in{grid-template-columns:1fr}.readout{right:auto;left:8px;bottom:-14px}}

/* sayfa başlığı (iç sayfalar) */
.phero{position:relative;min-height:280px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line);overflow:hidden}
.phero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.4) brightness(.42)}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ground) 4%,rgba(12,14,17,.32) 72%)}
.phero .wrap{position:relative;z-index:2;padding-block:clamp(34px,5vw,52px)}
.phero h1{font-size:clamp(30px,4.6vw,54px);margin:14px 0 12px}
.phero p{color:var(--ink-2);max-width:54ch;font-size:16px}
.phero.plain{min-height:0;border-bottom:0}
.phero.plain .phero-bg,.phero.plain::after{display:none}

/* spec şeridi */
.rail{border-block:1px solid var(--line);background:var(--surface)}
.rail-in{display:grid;grid-template-columns:repeat(6,1fr);max-width:var(--max);margin-inline:auto}
/* iç hücreler dar padding alır; ilk ve son hücre sayfa payına hizalanır */
.rail-c{padding:20px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.rail-c:first-child{padding-left:var(--pad)}
.rail-c:last-child{padding-right:var(--pad);border-right:0}
.rail-c b{font-family:var(--m);font-size:clamp(14px,1.35vw,18px);font-weight:600;letter-spacing:-.01em}
.rail-c span{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:900px){
  .rail-in{grid-template-columns:repeat(3,1fr)}
  .rail-c,.rail-c:first-child,.rail-c:last-child{padding-inline:var(--pad);border-bottom:1px solid var(--line)}
  .rail-c:nth-child(3n),.rail-c:last-child{border-right:0}
}
@media(max-width:520px){
  .rail-in{grid-template-columns:repeat(2,1fr)}
  .rail-c:nth-child(3n){border-right:1px solid var(--line)}
  .rail-c:nth-child(2n){border-right:0}
}

/* ==========================================================================
   UYGULAMA KARTLARI
   ========================================================================== */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.app{background:var(--ground);display:block;position:relative;overflow:hidden}
.app-img{height:158px;background-size:cover;background-position:center;filter:grayscale(.55) contrast(1.05) brightness(.72);transition:filter .35s,transform .5s}
.app:hover .app-img,.app:focus-visible .app-img{filter:grayscale(0) contrast(1) brightness(.9);transform:scale(1.03)}
.app-b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:7px}
.app-b h3{font-size:19px}
.app-b p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.app-b .go{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.app:hover .go,.app:focus-visible .go{color:var(--red-lit)}
@media(max-width:900px){.apps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.apps{grid-template-columns:1fr}}

/* ==========================================================================
   ÜRÜN KARTLARI + KATALOG
   ========================================================================== */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prods.cols-3{grid-template-columns:repeat(3,1fr)}
.prod{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;border-radius:2px;overflow:hidden}
.prod:hover,.prod:focus-visible{border-color:var(--line-2)}
/* aspect-ratio'nun içerik tarafından ezilmemesi için min-height:0 + object-fit şart */
.prod-img{background:linear-gradient(160deg,var(--plate),var(--plate-2));padding:16px;position:relative;aspect-ratio:4/3;min-height:0;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.stock{position:absolute;top:10px;left:10px;font-family:var(--m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px;display:flex;align-items:center;gap:5px;background:rgba(12,14,17,.86);color:var(--ink-2)}
.stock i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block;flex:none}
.stock.out i{background:var(--warn)}
.prod-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.prod-b h3{font-size:16.5px;line-height:1.2}
.pspec{display:flex;flex-wrap:wrap;gap:4px}
.pspec span{font-family:var(--m);font-size:10.5px;color:var(--ink-2);border:1px solid var(--line);padding:2.5px 6px;border-radius:2px}
.price{margin-top:auto;display:flex;align-items:baseline;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.price b{font-family:var(--m);font-size:19px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price small{font-family:var(--m);font-size:10.5px;color:var(--ink-3);letter-spacing:.06em}
@media(max-width:1000px){.prods,.prods.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.prods,.prods.cols-3{grid-template-columns:1fr}}

.filters{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:28px}
.filter{font-family:var(--m);font-size:12px;letter-spacing:.05em;color:var(--ink-3);padding:9px 14px;border:1px solid var(--line);
  border-radius:2px;background:none;cursor:pointer}
.filter:hover{color:var(--ink);border-color:var(--line-2)}
.filter[aria-pressed="true"]{color:var(--ink);border-color:var(--red);background:rgba(234,32,39,.08)}
.filter .n{color:var(--ink-3);margin-left:6px}

/* ==========================================================================
   GRAFİK
   ========================================================================== */
.chart-wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,54px);align-items:start}
.chart-wrap.even{grid-template-columns:1fr 1fr}
/* grid öğelerinin varsayılan min-width:auto değeri, içerideki geniş SVG ve tabloların
   kolonu şişirmesine yol açıyor; sıfırlanınca .chart-scroll / .tbl-scroll kendi içinde kayar */
.chart-wrap > *,.pdp > *,.ct > *,.sysgrid > *,.ami-in > *,.calc-grid > *{min-width:0}
@media(max-width:860px){.chart-wrap,.chart-wrap.even{grid-template-columns:1fr}}
.chart-card{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:22px 24px 18px;position:relative}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.legend div{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:11.5px;color:var(--ink-2)}
.legend i{width:14px;height:3px;border-radius:2px;display:block;flex:none}
.chart-scroll{overflow-x:auto}
.chart-scroll svg{display:block;min-width:560px;width:100%;height:auto}
.axis-t{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;text-align:center}
.tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;background:#07080A;border:1px solid var(--line-2);
  border-radius:2px;padding:9px 12px;z-index:5;font-family:var(--m);font-size:11.5px;white-space:nowrap;box-shadow:0 10px 26px rgba(0,0,0,.6)}
.tip b{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:5px}
.tip p{display:flex;align-items:center;gap:7px;color:var(--ink-2)}
.tip p i{width:9px;height:3px;border-radius:2px;flex:none}
.tip p em{font-style:normal;color:var(--ink);margin-left:auto;padding-left:14px}

/* ==========================================================================
   TABLOLAR
   ========================================================================== */
.tbl-scroll{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
.cmp caption{text-align:left;font-family:var(--m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);padding-bottom:12px}
.cmp th,.cmp td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.cmp thead th{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;border-bottom-color:var(--line-2)}
.cmp thead th.hi{color:var(--red-lit)}
.cmp tbody th{font-weight:500;color:var(--ink-2);font-size:13.5px}
.cmp td{font-family:var(--m);font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cmp td.hi{color:var(--ink);background:rgba(234,32,39,.06);box-shadow:inset 2px 0 0 var(--red)}

.spec-tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:12px}
.spec-tbl th{text-align:left;font-weight:400;color:var(--ink-2);padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.spec-tbl td{text-align:right;font-family:var(--m);font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}

.note{font-family:var(--m);font-size:11.5px;color:var(--ink-3);border-left:2px solid var(--warn);padding-left:12px;line-height:1.6}
.note b{color:var(--ink)}

/* ==========================================================================
   ŞERİT / KARŞILAŞTIRMA LİSTESİ
   ========================================================================== */
.chk{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2);align-items:flex-start}
.chk i{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;margin-top:7px}
.chk.dim i{background:var(--ink-3)}
.chk.warn i{background:var(--warn)}
.chk b{color:var(--ink);font-weight:600}

/* senaryo kartları */
.scn{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.scn-c{background:var(--ground);padding:22px;display:flex;flex-direction:column;gap:12px}
.scn-c .idx{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;color:var(--ink-3)}
.scn-c h4{font-size:17px}
.scn-c p{font-size:13px;color:var(--ink-2);line-height:1.55;flex:1}
.scn-kv{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.scn-kv div{display:flex;justify-content:space-between;gap:10px;font-family:var(--m);font-size:12px}
.scn-kv span{color:var(--ink-3)}
.scn-kv b{font-weight:500;color:var(--red-lit)}
/* dar kolona yerleşen senaryo listesi: masaüstünde tek sütun,
   daraldıkça normal .scn kırılımlarını (2 → 1) izler */
.scn--1{grid-template-columns:1fr}
@media(max-width:900px){.scn{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.scn,.scn--1{grid-template-columns:1fr}}

/* güven / süreç */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tr{background:var(--ground);padding:24px 22px;display:flex;flex-direction:column;gap:8px}
.tr .k{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red-lit)}
.tr h4{font-size:16px}
.tr p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
/* kolon sayısı satır içi stille değil sınıfla verilir — aksi hâlde medya sorgusu ezilir */
.trust--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.trust,.trust--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.trust,.trust--3{grid-template-columns:1fr}}

/* SSS */
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;width:100%;padding:19px 0;background:none;border:0;
  cursor:pointer;text-align:left;font-family:var(--b);font-size:16px;font-weight:600;color:var(--ink);line-height:1.4}
.faq-q:hover{color:var(--red-lit)}
.faq-q .pm{position:relative;width:13px;height:13px;flex:none;margin-top:5px}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--ink-3);transition:transform .22s}
.faq-q .pm::before{top:6px;left:0;width:13px;height:1.5px}
.faq-q .pm::after{left:6px;top:0;width:1.5px;height:13px}
.faq-q[aria-expanded="true"] .pm::after{transform:scaleY(0)}
.faq-a{padding:0 0 22px;max-width:74ch;color:var(--ink-2);font-size:14.5px;display:flex;flex-direction:column;gap:10px}
.faq-a ul{display:flex;flex-direction:column;gap:6px}
.faq-a li{padding-left:16px;position:relative}
.faq-a li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--line-2)}

/* ==========================================================================
   ÜRÜN DETAY
   ========================================================================== */
.crumb{font-family:var(--m);font-size:11px;color:var(--ink-3);letter-spacing:.05em;padding-top:22px}
.crumb a:hover{color:var(--ink)}
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,56px);padding-block:clamp(28px,4vw,52px);align-items:start}
@media(max-width:860px){.pdp{grid-template-columns:1fr}}
.pdp-gal{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--nav-h) + 16px)}
@media(max-width:860px){.pdp-gal{position:static}}
.pdp-main{background:linear-gradient(160deg,var(--plate),var(--plate-2));border-radius:2px;padding:clamp(18px,3vw,30px);aspect-ratio:4/3;min-height:0;overflow:hidden}
.pdp-main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.thumb{background:linear-gradient(160deg,var(--plate),var(--plate-2));border-radius:2px;padding:8px;aspect-ratio:1;min-height:0;overflow:hidden;
  border:1px solid transparent;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.thumb[aria-current="true"]{border-color:var(--red)}
.pdp h1{font-size:clamp(25px,3.2vw,38px);margin:12px 0 14px}
.pdp-lede{color:var(--ink-2);font-size:15.5px;max-width:46ch}
.vars{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.var{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid var(--line);background:var(--surface);
  border-radius:2px;padding:12px 14px;cursor:pointer;text-align:left;width:100%;font-family:var(--b);color:var(--ink);font-size:14px}
.var:hover{border-color:var(--line-2)}
.var[aria-checked="true"]{border-color:var(--red);background:rgba(234,32,39,.07)}
.var .vp{font-family:var(--m);font-size:14.5px;font-variant-numeric:tabular-nums}
.var .vn{display:flex;align-items:center;gap:9px}
.var .dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--line-2);flex:none}
.var[aria-checked="true"] .dot{border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 2px var(--surface)}
.var .soon{font-family:var(--m);font-size:11px;color:var(--warn)}
.buy{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.big-price{font-family:var(--m);font-size:clamp(26px,3.4vw,32px);font-weight:600;letter-spacing:-.025em;margin-right:auto;font-variant-numeric:tabular-nums}
.big-price small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:400}

/* ==========================================================================
   HESAPLAYICI
   ========================================================================== */
.calc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.calc-grid{grid-template-columns:1fr}}
.calc{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px}
.calc h3{font-size:17px;display:flex;align-items:center;gap:10px}
.calc h3 .n{font-family:var(--m);font-size:11px;color:var(--red-lit);font-weight:500;letter-spacing:.08em}
.calc .fx{font-family:var(--m);font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.fields{grid-template-columns:1fr}}
label{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px}
input,select,textarea{width:100%;background:var(--ground);border:1px solid var(--line-2);border-radius:2px;color:var(--ink);
  font-family:var(--m);font-size:14px;padding:10px 11px;font-variant-numeric:tabular-nums}
textarea{font-family:var(--b);min-height:104px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink-3);outline:none}
.out{display:flex;align-items:baseline;gap:10px;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.out b{font-family:var(--m);font-size:clamp(22px,2.6vw,30px);font-weight:600;color:var(--red-lit);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.out span{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ==========================================================================
   AMİ BANDI / PAKETLER
   ========================================================================== */
.ami{border-block:1px solid var(--line);background:linear-gradient(105deg,rgba(234,32,39,.12),transparent 58%),var(--surface)}
.ami-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(46px,6vw,80px)}
/* satır içi stil medya sorgusunu ezdiği için CTA varyantı sınıf olarak tanımlı */
.ami-in--cta{grid-template-columns:1fr auto;align-items:center}
@media(max-width:860px){.ami-in,.ami-in--cta{grid-template-columns:1fr}}
.ami h2{font-size:clamp(25px,3.4vw,40px);margin:16px 0 16px}
.ami p{color:var(--ink-2);font-size:16px;max-width:48ch}
.ami-art{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--plate)}
.ami-art img{width:100%;height:auto}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.pack{background:var(--ground);padding:18px 16px;display:flex;flex-direction:column;gap:5px}
.pack b{font-family:var(--m);font-size:22px;font-weight:600;letter-spacing:-.02em}
.pack span{font-family:var(--m);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.pack em{font-style:normal;font-size:13px;color:var(--red-lit);font-family:var(--m)}
.gal3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gal3 img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border:1px solid var(--line);border-radius:2px}
@media(max-width:560px){.gal3{grid-template-columns:1fr}}

/* ==========================================================================
   İLETİŞİM
   ========================================================================== */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:start}
@media(max-width:820px){.ct{grid-template-columns:1fr}}
.ct-list{display:flex;flex-direction:column;border-top:1px solid var(--line);margin:0}
.ct-row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
@media(max-width:520px){.ct-row{grid-template-columns:1fr;gap:4px}}
.ct-row dt{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.ct-row dd{margin:0;font-size:15px;color:var(--ink)}
.ct-row dd small{display:block;color:var(--ink-3);font-size:13px;margin-top:3px}
.form{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:26px;display:flex;flex-direction:column;gap:14px}
.map{border:1px solid var(--line);border-radius:2px;height:190px;position:relative;overflow:hidden;
  background:linear-gradient(0deg,var(--line) 1px,transparent 1px) 0 0/100% 26px,
             linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/26px 100%,var(--surface)}
.map .pin{position:absolute;left:38%;top:52%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:5px}
.map .pin i{width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(234,32,39,.22);display:block}
.map .pin span{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* ==========================================================================
   TASARIM SİSTEMİ SAYFASI
   ========================================================================== */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sw{border:1px solid var(--line);border-radius:2px;overflow:hidden}
.sw .chip{height:76px}
.sw .meta{padding:10px 12px;display:flex;flex-direction:column;gap:2px;background:var(--surface)}
.sw .meta b{font-family:var(--m);font-size:12px;font-weight:500}
.sw .meta span{font-family:var(--m);font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.type-row{border-bottom:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:baseline}
.type-row .lab{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sysgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);align-items:start}
@media(max-width:860px){.sysgrid{grid-template-columns:1fr}.type-row{grid-template-columns:1fr;gap:8px}}

/* ==========================================================================
   ALT BİLGİ
   ========================================================================== */
.foot{border-top:1px solid var(--line);background:#08090C}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-block:52px}
@media(max-width:860px){.foot-in{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.foot-in{grid-template-columns:1fr}}
.foot h5{font-family:var(--m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:0 0 14px}
.foot li{margin-bottom:8px}
.foot a{font-size:13.5px;color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot .about{font-size:13.5px;color:var(--ink-3);line-height:1.6;margin-top:16px;max-width:38ch}
.foot .logo{width:150px}
.foot-bar{border-top:1px solid var(--line);padding-block:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--m);font-size:11px;color:var(--ink-3);letter-spacing:.03em}

/* whatsapp yüzen düğme */
.wa{position:fixed;right:18px;bottom:18px;z-index:55;width:54px;height:54px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.wa svg{width:28px;height:28px;fill:#08090C}
.wa:hover{transform:translateY(-2px)}
@media(max-width:520px){.wa{width:48px;height:48px;right:14px;bottom:14px}.wa svg{width:25px;height:25px}}