/* ═══════════════════════════════════════════════════════════
   KOVANSAN METAL A.Ş. — Design System
   Light Corporate Premium · v3
   ═══════════════════════════════════════════════════════════ */

:root{
  --blue:#0F6DBB; --blue-d:#0A4E88; --blue-dd:#072F52; --blue-l:#3E92D8;
  --tint:#EDF5FC; --tint-2:#DCEBF8;
  --brass:#B4894E; --brass-l:#D9B274;
  --paper:#FFFFFF; --paper-2:#F5F8FB; --paper-3:#ECF1F6; --line:#E1E8EF;
  --ink:#0D1A26; --ink-2:#48586A; --ink-3:#7C8B9B;
  --ok:#1E9E5A; --err:#D9534F;

  --disp:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --max:1280px; --gut:clamp(20px,4vw,56px);
  --r:16px; --r-s:10px;
  --sh1:0 1px 2px rgba(13,26,38,.05),0 6px 16px rgba(13,26,38,.05);
  --sh2:0 4px 10px rgba(13,26,38,.05),0 18px 44px rgba(13,26,38,.10);
  --sh3:0 20px 60px rgba(15,109,187,.20);
  --ez:cubic-bezier(.22,1,.36,1);
  --hdr:74px;
}
@media(min-width:1024px){:root{--hdr:86px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid var(--blue-l);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4,h5{font-family:var(--disp);font-weight:700;line-height:1.14;letter-spacing:-.022em;margin:0;color:var(--ink)}
h2{font-size:clamp(1.95rem,3.9vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.015em}
p{margin:0 0 1.05em}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.section{padding:clamp(60px,7.5vw,112px) 0;position:relative}
.section.sm{padding:clamp(44px,5vw,74px) 0}
.tint{background:var(--paper-2)}
.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0}

.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;
  font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue);background:var(--tint);padding:7px 15px;border-radius:999px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.lead{font-size:clamp(1rem,1.25vw,1.12rem);color:var(--ink-2);line-height:1.82;max-width:64ch}
.sec-head{display:grid;gap:22px;margin-bottom:clamp(34px,4.5vw,60px)}
@media(min-width:940px){.sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}}
.sec-head .lead{margin:0}
.sec-head.center{text-align:center;grid-template-columns:1fr;justify-items:center;max-width:760px;margin-inline:auto}
.sec-head.center .lead{margin-inline:auto}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;
  font-family:var(--disp);font-size:14.5px;font-weight:600;transition:all .38s var(--ez);
  white-space:nowrap;border:1.5px solid transparent}
.btn svg{width:16px;height:16px;flex-shrink:0;transition:transform .38s var(--ez)}
.btn:hover svg{transform:translateX(4px)}
.btn-p{background:var(--blue);color:#fff;box-shadow:0 6px 20px rgba(15,109,187,.28)}
.btn-p:hover{background:var(--blue-d);box-shadow:0 12px 32px rgba(15,109,187,.38);transform:translateY(-2px)}
.btn-o{border-color:var(--line);color:var(--ink);background:var(--paper)}
.btn-o:hover{border-color:var(--blue);color:var(--blue);background:var(--tint)}
.btn-w{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.42);backdrop-filter:blur(8px)}
.btn-w:hover{background:#fff;color:var(--blue-d);border-color:#fff;transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:13.5px}

/* ── Topbar ── */
.topbar{background:var(--blue-dd);color:rgba(255,255,255,.72);font-size:13px;display:none}
@media(min-width:1024px){.topbar{display:block}}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:42px;gap:20px}
.topbar .g{display:flex;gap:26px;align-items:center}
.topbar a{transition:color .3s;display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:#fff}
.topbar svg{width:14px;height:14px;opacity:.7}
.tb-badge{color:var(--brass-l);font-weight:600;display:inline-flex;align-items:center;gap:7px}

/* ── Header ── */
header{position:sticky;top:0;z-index:900;background:var(--paper);box-shadow:0 1px 0 var(--line);transition:box-shadow .4s}
header.stuck{box-shadow:0 2px 24px rgba(13,26,38,.09)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);gap:20px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:38px;width:auto}
@media(min-width:1024px){.brand img{height:44px}}
.brand-fb{display:none;align-items:center;gap:11px}
.brand-fb .bm{width:38px;height:38px;flex-shrink:0}
.brand-fb b{font-family:var(--disp);font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1;display:block}
.brand-fb small{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;font-weight:500}

/* menu ve li'ler header yüksekliğini kaplar; böylece <a> ile açılan
   panel arasında fareyi düşüren ölü bölge kalmaz. */
.menu{display:none;list-style:none;margin:0;padding:0;gap:2px;align-self:stretch}
@media(min-width:1024px){.menu{display:flex}}
/* JS ölürse çekmece (mobil menü) açılamaz. O durumda menüyü satır içi
   göster ve hamburgeri gizle — site her ekranda gezilebilir kalsın. */
html:not(.js) .menu{display:flex;flex-wrap:wrap;align-self:center;gap:0 4px}
html:not(.js) .burger{display:none}
html:not(.js) .menu>li>a{padding:8px 10px;font-size:14px}
.menu>li{position:relative;display:flex;align-items:center}
.menu>li>a{position:relative;display:flex;align-items:center;gap:6px;padding:11px 15px;
  font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--ink-2);
  transition:color .3s var(--ez)}
/* Alttan açılan ince gösterge */
.menu>li>a::after{content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;
  border-radius:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ez)}
.menu>li>a:hover,.menu>li>a[aria-current="page"]{color:var(--blue)}
.menu>li:hover>a::after,.menu>li>a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.menu>li>a svg{width:11px;height:11px;opacity:.55;transition:transform .34s var(--ez)}
.menu>li:hover>a svg,.menu>li:focus-within>a svg{transform:rotate(180deg);opacity:1}

/* ── Açılır panel ortak davranışı ── */
.drop,.mega{opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px);transition:opacity .34s var(--ez),transform .34s var(--ez),visibility .34s}
.menu>li:hover>.drop,.menu>li:focus-within>.drop,
.menu>li:hover>.mega,.menu>li:focus-within>.mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}

/* ── Zengin açılır liste (Kurumsal) ── */
.drop{position:absolute;top:100%;left:0;min-width:340px;padding:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh2);
  z-index:60}
.drop::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.drop-item{display:flex;gap:13px;align-items:flex-start;padding:11px 12px;border-radius:11px;
  transition:background .28s var(--ez)}
.drop-item:hover{background:var(--tint)}
.drop-item .di-ic{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:var(--tint);color:var(--blue);transition:all .28s var(--ez)}
.drop-item:hover .di-ic{background:var(--blue);color:#fff;transform:scale(1.06)}
.drop-item .di-ic svg{width:17px;height:17px}
.drop-item b{display:block;font-family:var(--disp);font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.drop-item small{display:block;font-size:12.2px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.drop-item[aria-current="page"] b{color:var(--blue)}

/* ── Mega menü (Ürünler) ── */
.menu>li.has-mega{position:static}   /* panel header'a hizalanır */
.mega{position:absolute;top:100%;left:0;right:0;z-index:60;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 26px 60px rgba(13,26,38,.16);
  max-height:calc(100vh - var(--hdr) - 60px);overflow-y:auto}
.mega-in{display:grid;gap:0;padding-block:26px}
@media(min-width:1180px){.mega-in{grid-template-columns:minmax(0,1fr) 288px;gap:36px}}
.mega-lbl{margin:0 0 14px;font-family:var(--disp);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:10px}
.mega-lbl::after{content:"";height:1px;flex:1;background:var(--line)}

/* 8 hücre = 7 kalibre + "Tüm ürünler" → 4×2 tam oturur, boşluk kalmaz */
.mega-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:1180px){.mega-grid{grid-template-columns:repeat(4,1fr)}}
.mega-card{display:flex;flex-direction:column;padding:8px;border-radius:13px;
  border:1px solid transparent;transition:all .3s var(--ez)}
.mega-card:hover{background:var(--paper-2);border-color:var(--line);
  transform:translateY(-3px);box-shadow:var(--sh1)}
.mega-card .mc-img{width:100%;height:80px;border-radius:9px;overflow:hidden;
  background:var(--paper-3);display:block}
.mega-card .mc-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ez)}
.mega-card:hover .mc-img img{transform:scale(1.08)}
.mega-card .mc-tx{display:block;padding:10px 4px 2px}
.mega-card b{display:block;font-family:var(--disp);font-size:13.6px;font-weight:600;
  color:var(--ink);line-height:1.25}
.mega-card small{display:block;font-family:var(--disp);font-size:10.5px;font-weight:600;
  letter-spacing:.07em;color:var(--blue);margin-top:3px}

/* 8. hücre: tüm ürünler */
.mega-card.mega-all{background:var(--tint);border-color:var(--tint-2)}
.mega-card.mega-all:hover{background:var(--blue);border-color:var(--blue)}
.mega-all .mc-img{display:grid;place-items:center;background:rgba(255,255,255,.7);color:var(--blue)}
.mega-all:hover .mc-img{background:rgba(255,255,255,.16);color:#fff}
.mega-all .mc-img svg{width:26px;height:26px}
.mega-all b{color:var(--blue-d)}
.mega-all small{color:var(--ink-3)}
.mega-all:hover b,.mega-all:hover small{color:#fff}

.mega-side{display:flex;flex-direction:column;gap:6px;
  padding-left:0;border-left:0}
@media(min-width:1180px){.mega-side{padding-left:34px;border-left:1px solid var(--line)}}
.ms-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;
  font-family:var(--disp);font-size:13.8px;font-weight:600;color:var(--ink-2);
  transition:all .28s var(--ez)}
.ms-link .ic{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
  background:var(--tint);color:var(--blue);transition:all .28s}
.ms-link .ic svg{width:15px;height:15px}
.ms-link svg.ar{width:13px;height:13px;margin-left:auto;opacity:0;transform:translateX(-4px);
  transition:all .3s var(--ez)}
.ms-link:hover{background:var(--tint);color:var(--blue)}
.ms-link:hover .ic{background:var(--blue);color:#fff}
.ms-link:hover svg.ar{opacity:1;transform:none}

.ms-cta{margin-top:auto;padding:18px;border-radius:14px;color:#fff;
  background:linear-gradient(150deg,var(--blue-dd),var(--blue-d) 75%,var(--blue))}
.ms-cta b{display:block;font-family:var(--disp);font-size:14.5px;font-weight:700;margin-bottom:6px}
.ms-cta p{margin:0 0 14px;font-size:12.4px;line-height:1.55;color:rgba(255,255,255,.75)}
.ms-cta .btn{width:100%;padding:10px 16px;font-size:13px}

/* Header küçülmesi + ilerleme çizgisi */
header.stuck .nav{height:70px}
header.stuck .brand img{height:38px}
.nav,.brand img{transition:height .35s var(--ez)}
.hdr-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:left;background:linear-gradient(90deg,var(--blue),var(--blue-l),var(--brass));
  z-index:70;pointer-events:none}

.nav-r{display:flex;align-items:center;gap:12px}

/* Gece / gündüz düğmesi — erişilebilirlik paneliyle aynı durumu paylaşır */
.theme-btn{width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;position:relative;overflow:hidden;
  background:var(--paper-2);border:1.5px solid var(--line);color:var(--ink-2);
  transition:all .34s var(--ez)}
.theme-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--tint)}
.theme-btn svg{width:19px;height:19px;display:block}
.theme-btn .tb-sun,.theme-btn .tb-moon{
  position:absolute;display:grid;place-items:center;inset:0;
  transition:transform .45s var(--ez),opacity .3s}
.theme-btn .tb-sun{transform:translateY(120%) rotate(45deg);opacity:0}
.theme-btn .tb-moon{transform:none;opacity:1}
html[data-theme="dark"] .theme-btn .tb-sun{transform:none;opacity:1}
html[data-theme="dark"] .theme-btn .tb-moon{transform:translateY(-120%) rotate(-45deg);opacity:0}
html[data-theme="dark"] .theme-btn{background:var(--paper-3);border-color:var(--line)}
.lang{display:none;align-items:center;background:var(--paper-2);border-radius:999px;padding:3px}
@media(min-width:1024px){.lang{display:flex}}
.lang a{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;font-family:var(--disp);color:var(--ink-3);transition:all .3s}
.lang a.on{background:var(--blue);color:#fff}
.nav .btn{display:none}
@media(min-width:1180px){.nav .btn{display:inline-flex}}

.burger{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;position:relative;z-index:1002}
@media(min-width:1024px){.burger{display:none}}
.burger i{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:background .3s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:21px;height:2px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ez)}
.burger i::before{top:-6.5px}.burger i::after{top:6.5px}
body.mo .burger i{background:transparent}
body.mo .burger i::before{transform:translateY(6.5px) rotate(45deg)}
body.mo .burger i::after{transform:translateY(-6.5px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:1001;background:var(--paper);padding:96px var(--gut) 40px;
  overflow-y:auto;transform:translateX(100%);transition:transform .55s var(--ez)}
body.mo .drawer{transform:none}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer>ul>li{border-bottom:1px solid var(--line)}
.drawer>ul>li>a{display:block;padding:16px 0;font-family:var(--disp);font-size:19px;font-weight:700}
.drawer>ul>li>a[aria-current="page"]{color:var(--blue)}
.drawer ul ul{padding:0 0 14px 4px}
.drawer ul ul a{display:block;padding:7px 0;color:var(--ink-3);font-size:14.5px}
.drawer ul ul a::before{content:"— ";color:var(--blue)}
/* Mobil çekmecede dil seçimi — üst çubuk ve .lang 1024px altında gizli,
   dil buradan değiştirilir. */
.dr-lang{display:flex;gap:8px;margin-top:26px}
.dr-lang a{flex:1;min-height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;border:1.5px solid var(--line);background:var(--paper);
  font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:.06em;
  color:var(--ink-2);transition:all .3s var(--ez)}
.dr-lang a:hover{border-color:var(--blue);color:var(--blue)}
.dr-lang a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.dr-f{margin-top:14px;display:flex;flex-direction:column;gap:10px}

/* ═══ HOME SLIDER ═══ */
.hero{position:relative;background:var(--blue-dd);overflow:hidden}
.slides{position:relative;height:clamp(480px,78vh,740px)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s var(--ez),visibility 1.1s}
.slide.on{opacity:1;visibility:visible}
/* JS yoksa slider dönmez: ilk slayt sabit durur, diğerleri layout'tan çıkar.
   Böylece üst üste binmiş üç slayt ya da bomboş bir hero alanı oluşmaz. */
html:not(.js) .slide:first-child{opacity:1;visibility:visible;position:relative}
html:not(.js) .slide:not(:first-child){display:none}
html:not(.js) .slides{height:auto;min-height:clamp(480px,78vh,740px)}
.slide-img{position:absolute;inset:0;overflow:hidden}
.slide-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 8s linear}
.slide.on .slide-img img{transform:scale(1)}
/* Soldan scrim + hafif genel koyulaştırma — açık zeminli ürün
   fotoğraflarında da beyaz patlaması olmaz, metin her koşulda okunur. */
.slide-img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(94deg,rgba(6,38,66,.95) 0%,rgba(7,47,82,.84) 34%,rgba(7,47,82,.44) 62%,rgba(7,47,82,.20) 100%),
    linear-gradient(180deg,rgba(7,47,82,.22),rgba(7,47,82,.10) 40%,rgba(7,47,82,.34))}
@media(max-width:820px){.slide-img::after{background:linear-gradient(180deg,rgba(7,47,82,.74),rgba(6,38,66,.94))}}
.slide-body{position:relative;height:100%;display:flex;align-items:center;z-index:2}
.slide-body .wrap{width:100%}
.sc{max-width:660px;color:#fff}
.sc .tag{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(10px);
  font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brass-l);margin-bottom:20px}
.sc h1,.sc h2{font-size:clamp(2.05rem,5.2vw,3.85rem);color:#fff;line-height:1.09;
  letter-spacing:-.028em;margin:0 0 18px;font-weight:800}
.sc h1 em,.sc h2 em{font-style:normal;color:var(--brass-l)}
.sc p{font-size:clamp(.98rem,1.35vw,1.14rem);color:rgba(255,255,255,.86);line-height:1.78;max-width:53ch;margin:0 0 30px}
.sc .cta{display:flex;flex-wrap:wrap;gap:12px}
html.js .slide:not(.on) .sc>*{opacity:0;transform:translateY(26px)}
.slide.on .sc>*{opacity:1;transform:none;transition:opacity .85s var(--ez),transform .85s var(--ez)}
.slide.on .sc>*:nth-child(1){transition-delay:.22s}
.slide.on .sc>*:nth-child(2){transition-delay:.34s}
.slide.on .sc>*:nth-child(3){transition-delay:.46s}
.slide.on .sc>*:nth-child(4){transition-delay:.58s}

/* Slayt metni, ikon göstergelerin üstünde kalır
   (şerit payı + ikon boşluğu + ikon yüksekliği + nefes payı) */
.slide-body{padding-bottom:calc(var(--fstrip-ov) + 26px + 46px + 22px)}
/* ── Yan oklar ── */
.s-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:7;
  width:54px;height:54px;border-radius:50%;display:none;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);
  color:#fff;backdrop-filter:blur(10px);transition:all .35s var(--ez)}
@media(min-width:900px){.s-arrow{display:grid}}
.s-arrow:hover{background:#fff;color:var(--blue-d);border-color:#fff;
  transform:translateY(-50%) scale(1.08);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.s-arrow svg{width:18px;height:18px}
.s-prev{left:24px}
.s-next{right:24px}

/* ── Ortada mini ikon göstergeler ──
   Özellik şeridi hero'nun altını --fstrip-ov kadar örttüğü için
   ikonlar o payın üstünde konumlanır; aksi hâlde kırpılırlar. */
.s-icons{position:absolute;left:0;right:0;bottom:calc(var(--fstrip-ov) + 26px);z-index:8;
  display:flex;justify-content:center;gap:12px;padding-inline:20px}
.s-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.78);backdrop-filter:blur(10px);
  transition:background .34s var(--ez),color .34s,border-color .34s,transform .34s var(--ez)}
.s-ico:hover{background:rgba(255,255,255,.22);color:#fff;transform:translateY(-3px)}
.s-ico svg{width:21px;height:21px}
.s-ico.on{background:var(--brass-l);border-color:var(--brass-l);color:var(--blue-dd);
  box-shadow:0 8px 26px rgba(217,178,116,.42)}
@media(max-width:640px){
  .s-icons{bottom:24px;gap:10px}
  .s-ico{width:42px;height:42px;border-radius:12px}
  .s-ico svg{width:19px;height:19px}
}

/* ═══ PAGE HERO (inner pages) ═══ */
.phero{position:relative;background:var(--blue-dd);overflow:hidden;padding:clamp(52px,6vw,86px) 0 clamp(44px,5vw,70px)}
.phero-bg{position:absolute;inset:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.phero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,47,82,.95) 0%,rgba(7,47,82,.80) 52%,rgba(10,78,136,.62) 100%)}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;font-size:clamp(1.85rem,4.4vw,3.15rem);font-weight:800;letter-spacing:-.028em;margin:0}
.phero p{color:rgba(255,255,255,.78);max-width:58ch;margin:14px 0 0;font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.75}
.phero .tag{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-l);margin-bottom:16px}

/* Breadcrumb */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;padding:0;list-style:none;
  font-size:13px;color:rgba(255,255,255,.6)}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb a{color:rgba(255,255,255,.78);transition:color .3s}
.crumb a:hover{color:#fff}
.crumb li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35)}
.crumb [aria-current]{color:var(--brass-l);font-weight:500}

/* ═══ Feature strip ═══ */
/* Şeridin hero'yu örtme payı — slider ikonları da bu değere göre hizalanır */
:root{--fstrip-ov:58px}
@media(max-width:820px){:root{--fstrip-ov:30px}}
.fstrip{position:relative;z-index:20;margin-top:calc(var(--fstrip-ov) * -1)}
.fs-grid{display:grid;gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh2)}
@media(min-width:600px){.fs-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.fs-grid{grid-template-columns:repeat(4,1fr)}}
.fs{background:var(--paper);padding:26px 24px;display:flex;gap:15px;align-items:flex-start;transition:background .4s}
.fs:hover{background:var(--tint)}
.fs .ic{width:42px;height:42px;border-radius:11px;background:var(--tint);color:var(--blue);
  display:grid;place-items:center;flex-shrink:0;transition:all .4s var(--ez)}
.fs:hover .ic{background:var(--blue);color:#fff;transform:scale(1.06)}
.fs .ic svg{width:21px;height:21px}
.fs b{display:block;font-family:var(--disp);font-size:15px;font-weight:700;margin-bottom:3px}
.fs span{font-size:13px;color:var(--ink-3);line-height:1.55;display:block}

/* ═══ Sayfa geçişleri (View Transitions API) ═══
   Destekleyen tarayıcılarda sayfalar arası yumuşak geçiş;
   desteklemeyende hiçbir şey değişmez. */
@view-transition{navigation:auto}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .34s cubic-bezier(0,0,.2,1) both}
/* Header ve sağ alt düğmeler geçişte sabit kalsın */
header{view-transition-name:site-header}
.totop,.wa,.a11y-fab{view-transition-name:none}

/* ═══ Reveal ═══
   KURAL: İçerik ASLA varsayılan olarak gizlenmez.
   Gizleme yalnızca <html class="js"> varken devreye girer; bu sınıfı da
   app.js sağ salim başlarsa bekçi script'i yerinde bırakır. app.js
   yüklenmez, 404 verir, eski sürüm kalır ya da hata atarsa sınıf silinir
   ve sayfa animasyonsuz ama EKSİKSİZ görünür.
   Bu döngüde defalarca "sayfa boş" hatasının kökü buydu. */
/* DİKKAT — özgüllük tuzağı:
   "html.js [data-rv]" (0,2,1), "[data-rv].in" (0,2,0) kuralını EZER; yani
   .in eklense bile öğe gizli kalır. Bu yüzden gizleme kuralı doğrudan
   ":not(.in)" ile yazılıyor — iki kural artık hiç yarışmıyor. */
[data-rv]{transition:opacity .85s var(--ez),transform .85s var(--ez)}
html.js [data-rv]:not(.in){opacity:0;transform:translateY(28px)}

/* ═══ Kelime kelime başlık açılımı ═══ */
.split .w{display:inline-block;vertical-align:top;
  padding-bottom:.14em;margin-bottom:-.14em}   /* g, ğ, y kuyrukları kırpılmasın */
html.js .split .w{overflow:hidden}             /* kırpma yalnız animasyon varken */
.split .w>i{display:inline-block;font-style:inherit;font-weight:inherit;color:inherit;
  transition:transform .78s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0) * 42ms)}
html.js .split:not(.in) .w>i{transform:translateY(108%)}

/* ═══ Görsel maskeli açılım ═══ */
/* Maskeli açılım KALDIRILDI. clip-path ile kırpma, açılım sınıfı bir
   sebeple gelmediğinde görseli tamamen yok ediyordu ve bu projede
   defalarca "görsel gelmiyor" olarak geri döndü. Süslemeye değmez;
   görsel her koşulda görünür. Attribute HTML'de zararsız olarak kalıyor. */

@media(prefers-reduced-motion:reduce){
  .split .w>i{transform:none!important;transition:none!important}
  [data-mask]{clip-path:none!important;transition:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
body.a11y-motion .split .w>i{transform:none!important;transition:none!important}
body.a11y-motion [data-mask]{clip-path:none!important}
[data-d="1"]{transition-delay:.09s}[data-d="2"]{transition-delay:.18s}
[data-d="3"]{transition-delay:.27s}[data-d="4"]{transition-delay:.36s}
[data-d="5"]{transition-delay:.45s}[data-d="6"]{transition-delay:.54s}

/* ═══ About block ═══ */
.ab{display:grid;gap:clamp(36px,5vw,64px);align-items:center}
@media(min-width:960px){.ab{grid-template-columns:1.02fr 1fr}}
.ab.rev .ab-media{order:2}
@media(max-width:959px){.ab.rev .ab-media{order:0}}
.ab-media{position:relative}
.ab-media .m1{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh2);aspect-ratio:4/3;background:var(--paper-3)}
.ab-media .m1 img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ez)}
.ab-media:hover .m1 img{transform:scale(1.05)}
.ab-media .m2{position:absolute;right:-14px;bottom:-26px;width:46%;border-radius:var(--r-s);overflow:hidden;
  border:5px solid var(--paper);box-shadow:var(--sh2);aspect-ratio:4/3;background:var(--paper-3);display:none}
@media(min-width:560px){.ab-media .m2{display:block}}
.ab-media .m2 img{width:100%;height:100%;object-fit:cover}
.ab-badge{position:absolute;left:-16px;top:26px;background:var(--blue);color:#fff;border-radius:14px;
  padding:16px 20px;box-shadow:var(--sh3);text-align:center}
.ab-badge b{display:block;font-family:var(--disp);font-size:28px;font-weight:800;line-height:1}
.ab-badge span{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;opacity:.85;margin-top:5px;font-weight:600}
.ab-body p{color:var(--ink-2);line-height:1.85}
.ab-body p strong{color:var(--ink);font-weight:600}
.ab-list{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:13px}
.ab-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.6px;color:var(--ink-2)}
.ab-list .ck{width:21px;height:21px;border-radius:50%;background:var(--tint);color:var(--blue);
  display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.ab-list .ck svg{width:11px;height:11px}
.ab-list strong{color:var(--ink);font-weight:600}

/* ═══ Prose (text pages) ═══ */
.prose{max-width:76ch}
.prose p{color:var(--ink-2);line-height:1.88;font-size:16.5px}
.prose p strong{color:var(--ink);font-weight:600}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin:38px 0 16px}
.prose h3{margin:30px 0 12px}
.prose ul{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:12px}
.prose ul li{display:flex;gap:13px;align-items:flex-start;color:var(--ink-2);font-size:15.6px;line-height:1.7}
.prose ul li::before{content:"";width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:3px;
  background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.7 8.4 9.5 3.6' stroke='%230F6DBB' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.prose code{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:.88em;
  background:var(--paper-3);padding:2px 7px;border-radius:5px;color:var(--blue-d)}
/* Yasal sayfa tabloları */
.ltable{width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:13.6px;min-width:640px}
.ltable th{text-align:left;font-family:var(--disp);font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue);
  background:var(--tint);padding:12px 14px;border-bottom:2px solid var(--tint-2);white-space:nowrap}
.ltable td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);
  vertical-align:top;line-height:1.6}
.ltable tr:last-child td{border-bottom:0}
.ltable tbody tr:nth-child(even){background:var(--paper-2)}
.ltable code{white-space:nowrap}

.callout{background:var(--tint);border-left:4px solid var(--blue);border-radius:0 var(--r-s) var(--r-s) 0;
  padding:22px 26px;margin:28px 0}
.callout p:last-child{margin:0}
.callout p{color:var(--blue-dd);font-size:15.5px}

/* ═══ Product cards ═══ */
.p-grid{display:grid;gap:22px}
@media(min-width:560px){.p-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.p-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1160px){.p-grid{grid-template-columns:repeat(4,1fr)}}
.p-grid.c3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:all .45s var(--ez)}
.pc:hover{transform:translateY(-6px);box-shadow:var(--sh2);border-color:var(--tint-2)}
.pc-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);display:block}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ez)}
.pc:hover .pc-img img{transform:scale(1.08)}
.pc-img .cal{position:absolute;left:13px;top:13px;z-index:2;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--blue-d)}
.pc-b{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.pc-b h3{margin-bottom:7px;font-size:1.2rem}
.pc-b p{font-size:13.6px;color:var(--ink-3);line-height:1.65;margin:0 0 16px;flex:1}
.pc-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--blue);transition:gap .35s var(--ez)}
.pc:hover .pc-go{gap:13px}
.pc-go svg{width:14px;height:14px}

/* ── Showcase: 1 büyük sol kolon + 3×2 sağ grid ── */
.p-show{display:grid;gap:22px}
@media(min-width:1080px){
  .p-show{grid-template-columns:minmax(0,.94fr) minmax(0,2.06fr);align-items:stretch}
}
.p-show-sub{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:480px){.p-show-sub{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.p-show-sub{grid-template-columns:repeat(3,1fr)}}

.pc.feat{position:relative}
.pc.feat .pc-img{aspect-ratio:4/3}
@media(min-width:1080px){
  .pc.feat{height:100%}
  .pc.feat .pc-img{aspect-ratio:auto;flex:1 1 auto;min-height:340px}
}
.pc.feat .pc-b{padding:26px 26px 28px}
.pc.feat .pc-b h3{font-size:clamp(1.4rem,1.9vw,1.75rem)}
.pc.feat .pc-b p{font-size:14.6px;line-height:1.72;margin-bottom:18px}
.feat-badge{position:absolute;right:13px;top:13px;z-index:3;padding:6px 14px;border-radius:999px;
  background:var(--blue);color:#fff;font-family:var(--disp);font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;box-shadow:0 4px 14px rgba(15,109,187,.35)}
.feat-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px;padding:0;list-style:none}
.feat-chips li{padding:6px 12px;border-radius:999px;background:var(--tint);color:var(--blue-d);
  font-family:var(--disp);font-size:11.5px;font-weight:600;white-space:nowrap}
.pc.feat .btn{align-self:flex-start}

/* ═══ Process ═══ */
.pr-grid{display:grid;gap:20px}
@media(min-width:600px){.pr-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.pr-grid{grid-template-columns:repeat(3,1fr)}}
.pr{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 24px 26px;position:relative;overflow:hidden;transition:all .45s var(--ez)}
.pr:hover{transform:translateY(-5px);box-shadow:var(--sh2);border-color:var(--tint-2)}
.pr .n{font-family:var(--disp);font-size:52px;font-weight:800;line-height:.9;color:var(--tint-2);
  position:absolute;right:18px;top:14px;transition:color .45s}
.pr:hover .n{color:var(--tint)}
.pr .ic{width:46px;height:46px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center;
  margin-bottom:18px;box-shadow:0 6px 18px rgba(15,109,187,.26);transition:transform .45s var(--ez)}
.pr:hover .ic{transform:scale(1.08) rotate(-5deg)}
.pr .ic svg{width:22px;height:22px}
.pr h3{margin-bottom:8px;position:relative;font-size:1.1rem}
.pr p{margin:0;font-size:13.8px;color:var(--ink-3);line-height:1.7}

/* ═══ Gallery ═══
   9 görsel → geniş ekranda tam 3×3. Tüm hücreler eşit oranda,
   grid içinde boşluk oluşmaz. */
.g-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.g-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.gi{position:relative;border-radius:var(--r-s);overflow:hidden;aspect-ratio:4/3;background:var(--paper-3);
  cursor:zoom-in;box-shadow:var(--sh1);margin:0;transition:box-shadow .4s var(--ez),transform .4s var(--ez)}
.gi:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ez)}
.gi:hover img{transform:scale(1.07)}
.gi .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(7,47,82,.86) 100%);
  display:flex;align-items:flex-end;padding:16px;opacity:0;transition:opacity .45s var(--ez);margin:0}
.gi:hover .ov{opacity:1}
.gi .ov b{color:#fff;font-family:var(--disp);font-size:13.5px;font-weight:600;line-height:1.4;
  transform:translateY(8px);transition:transform .45s var(--ez)}
.gi:hover .ov b{transform:none}
.gi .zi{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--blue-d);
  opacity:0;transform:scale(.7);transition:all .4s var(--ez)}
.gi:hover .zi{opacity:1;transform:none}
.gi .zi svg{width:14px;height:14px}

/* Gallery filter */
.gfilter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.gfilter button{padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);
  font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--ink-2);transition:all .3s}
.gfilter button:hover{border-color:var(--blue);color:var(--blue)}
.gfilter button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.gfilter button em{font-style:normal;font-size:11.5px;font-weight:700;margin-left:7px;
  padding:2px 7px;border-radius:999px;background:var(--paper-3);color:var(--ink-3);transition:all .3s}
.gfilter button.on em{background:rgba(255,255,255,.22);color:#fff}
.gi[hidden]{display:none}

/* ═══ Certificates ═══ */
.c-grid{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.c-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.c-grid{grid-template-columns:repeat(4,1fr)}}
.crt{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:all .45s var(--ez);cursor:zoom-in}
.crt:hover{transform:translateY(-5px);box-shadow:var(--sh2);border-color:var(--tint-2)}
.crt-img{aspect-ratio:3/4;overflow:hidden;background:var(--paper-3);position:relative}
.crt-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ez)}
.crt:hover .crt-img img{transform:scale(1.04)}
.crt-b{padding:15px 16px 17px;border-top:1px solid var(--line)}
.crt-b small{display:block;font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);margin-bottom:5px}
.crt-b b{display:block;font-family:var(--disp);font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}

/* ═══ Stats band ═══ */
/* ═══ 3D Kovan Anatomisi ═══ */
.ana{background:linear-gradient(170deg,var(--blue-dd) 0%,#0A2740 55%,#08243C 100%);
  position:relative;overflow:hidden}
.ana::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(70% 60% at 30% 30%,rgba(76,158,226,.16),transparent 60%),
             radial-gradient(50% 50% at 80% 75%,rgba(217,178,116,.12),transparent 62%)}
.ana .wrap{position:relative}
.ana .eyebrow{background:rgba(255,255,255,.13);color:var(--brass-l);
  border:1px solid rgba(255,255,255,.2)}
.ana .eyebrow::before{background:var(--brass-l)}
.ana h2{color:#fff}
.ana .lead{color:rgba(255,255,255,.78)}
.ana .lead strong{color:#fff}

.ana-grid{display:grid;gap:clamp(24px,3vw,44px);align-items:center}
@media(min-width:940px){.ana-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}}

.ana-stage{position:relative;aspect-ratio:1/1;max-height:520px;border-radius:20px;
  background:radial-gradient(60% 60% at 50% 45%,rgba(255,255,255,.05),transparent 70%);
  border:1px solid rgba(255,255,255,.10);cursor:grab;touch-action:pan-y;
  display:grid;place-items:center;overflow:hidden}
.ana-stage.grabbing{cursor:grabbing}
.ana-stage:focus-visible{outline:3px solid var(--brass-l);outline-offset:3px}
.ana-stage canvas{width:100%;height:100%;display:block}
.ana-drag{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);color:rgba(255,255,255,.8);
  font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;pointer-events:none;transition:opacity .4s}
.ana-drag svg{width:14px;height:14px}
.ana-stage.grabbing .ana-drag{opacity:0}
/* WebGL yoksa fotoğrafa düş */
.ana-fallback{display:none;width:70%;height:auto;border-radius:14px}
.ana.no-webgl .ana-stage canvas,.ana.no-webgl .ana-drag{display:none}
.ana.no-webgl .ana-fallback{display:block}
/* Teşkis satırı — yalnızca 3D başarısız olduğunda görünür */
.ana-diag{position:absolute;left:12px;right:12px;bottom:12px;margin:0;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5;
  color:rgba(255,255,255,.7);background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:7px 10px;
  word-break:break-word}

.ana-hots{display:grid;gap:8px;margin-bottom:20px}
@media(min-width:520px){.ana-hots{grid-template-columns:1fr 1fr}}
.ana-hot{text-align:left;padding:12px 15px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#fff;transition:all .3s var(--ez)}
.ana-hot:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26);transform:translateY(-2px)}
.ana-hot b{display:block;font-family:var(--disp);font-size:14px;font-weight:600;line-height:1.3}
.ana-hot small{display:block;font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.05em;color:var(--brass-l);margin-top:3px}
.ana-hot[aria-pressed="true"]{background:var(--brass-l);border-color:var(--brass-l);color:var(--blue-dd)}
.ana-hot[aria-pressed="true"] small{color:rgba(7,47,82,.72)}

.ana-infos{position:relative;min-height:118px}
.ana-info{padding:18px 20px;border-radius:14px;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);
  animation:anaIn .38s var(--ez)}
.ana-info b{display:block;font-family:var(--disp);font-size:15px;font-weight:700;color:#fff;margin-bottom:7px}
.ana-info p{margin:0;font-size:13.6px;line-height:1.72;color:rgba(255,255,255,.74)}
.ana-info[hidden]{display:none}
.ana-infos:has(.ana-info:not([hidden]):not(.ana-default)) .ana-default{display:none}
@keyframes anaIn{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.ana-info{animation:none}}
body.a11y-motion .ana-info{animation:none}

/* ═══ Teklif Sihirbazı ═══ */
.wiz{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,36px);box-shadow:var(--sh1)}
.wiz .wz-step{border:0;margin:0;padding:0;min-width:0}
.wiz legend{font-family:var(--disp);font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:700;
  color:var(--ink);padding:0;margin-bottom:6px}
.wz-help{font-size:13px;color:var(--ink-3);margin:0 0 18px}

/* Adım göstergesi */
.wz-steps{display:flex;list-style:none;margin:0 0 14px;padding:0;gap:6px;counter-reset:s}
.wz-steps li{flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  font-family:var(--disp);font-size:12.5px;font-weight:600;color:var(--ink-3);
  transition:color .3s}
.wz-steps li b{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--paper-3);color:var(--ink-3);font-size:12px;font-weight:700;transition:all .32s var(--ez)}
.wz-steps li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.wz-steps li span{display:none}}
.wz-steps li.on{color:var(--blue)}
.wz-steps li.on b{background:var(--blue);color:#fff;box-shadow:0 0 0 4px var(--tint)}
.wz-steps li.done{color:var(--ink-2);cursor:pointer}
.wz-steps li.done b{background:var(--ok);color:#fff}
.wz-steps li.done b::after{content:"✓";font-size:13px}
.wz-steps li.done b{font-size:0}

.wz-bar{height:3px;border-radius:3px;background:var(--paper-3);overflow:hidden;margin-bottom:26px}
.wz-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-l));
  transform:scaleX(.25);transform-origin:left;transition:transform .5s var(--ez)}

/* Ürün seçim çipleri */
.wz-chips{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.wz-chip{position:relative;display:block;cursor:pointer}
.wz-chip input{position:absolute;opacity:0;width:0;height:0}
.wz-chip span{display:block;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--paper-2);font-family:var(--disp);font-size:14px;font-weight:600;
  color:var(--ink-2);text-align:center;transition:all .28s var(--ez)}
.wz-chip:hover span{border-color:var(--blue-l);color:var(--blue)}
.wz-chip input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 6px 18px rgba(15,109,187,.26)}
.wz-chip input:focus-visible + span{outline:3px solid var(--blue-l);outline-offset:2px}

/* Özet */
.wz-summary{margin:22px 0 18px;padding:18px 20px;border-radius:12px;
  background:var(--tint);border:1px solid var(--tint-2)}
.wz-summary b{display:block;font-family:var(--disp);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.wz-summary dl{margin:0;display:grid;gap:8px}
.wz-summary div{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
  padding-bottom:8px;border-bottom:1px dashed var(--tint-2)}
.wz-summary div:last-child{border-bottom:0;padding-bottom:0}
.wz-summary dt{margin:0;font-size:13px;color:var(--ink-3);flex-shrink:0}
.wz-summary dd{margin:0;font-family:var(--disp);font-size:13.5px;font-weight:600;
  color:var(--blue-dd);text-align:right}

.wz-nav{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.wz-nav .btn{flex:1;min-width:140px}
.fld input.bad,.fld select.bad,.fld textarea.bad{
  border-color:var(--err)!important;box-shadow:0 0 0 4px rgba(217,83,79,.14)!important}

/* JS yoksa tüm adımlar görünür, gezinme düğmeleri gizli */
.wiz:not(.js) .wz-steps,.wiz:not(.js) .wz-bar,
.wiz:not(.js) #wzPrev,.wiz:not(.js) #wzNext{display:none}
.wiz:not(.js) .wz-step{margin-bottom:34px}
.wiz.js .wz-step[hidden]{display:none}
.wiz.js .wz-step:not([hidden]){animation:wzIn .4s var(--ez)}
@keyframes wzIn{from{opacity:0;transform:translateX(14px)}}
@media(prefers-reduced-motion:reduce){.wiz.js .wz-step:not([hidden]){animation:none}}
body.a11y-motion .wiz.js .wz-step:not([hidden]){animation:none}

/* ═══ Kalibre Karşılaştırıcı ═══ */
.cmp{background:var(--paper)}
.cmp-box{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);
  overflow:hidden;box-shadow:var(--sh1)}
.cmp-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:18px clamp(16px,2vw,24px);border-bottom:1px solid var(--line);background:var(--paper)}
.cmp-chips{display:flex;flex-wrap:wrap;gap:8px}
.cmp-chip{padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);
  font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:all .28s var(--ez)}
.cmp-chip:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.cmp-chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 4px 14px rgba(15,109,187,.28)}
.cmp-chip:disabled{opacity:.4;cursor:not-allowed}
.cmp-unit{display:flex;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:3px;flex-shrink:0}
.cmp-unit button{padding:6px 15px;border-radius:999px;font-family:var(--disp);font-size:12.5px;
  font-weight:700;color:var(--ink-3);transition:all .28s}
.cmp-unit button[aria-pressed="true"]{background:var(--blue);color:#fff}
.cmp-hint{margin:0;padding:0 clamp(16px,2vw,24px);font-size:12.5px;color:var(--brass);min-height:1.2em}

.cmp-stage{padding:clamp(14px,2vw,26px);display:flex;justify-content:center;overflow-x:auto}
.cmp-stage svg{width:100%;max-width:760px;height:auto;min-width:340px}
.cmp-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}
.cmp-tick{fill:var(--ink-3);font-family:var(--disp);font-size:10px;text-anchor:end}
.cmp-case{animation:cmpIn .55s var(--ez) both;animation-delay:var(--d,0ms)}
@keyframes cmpIn{from{opacity:0;transform:translateY(14px)}}
.cmp-body{fill:url(#cmpBrass);stroke:var(--brass);stroke-width:1;
  fill:#D6B173;stroke:#9C7A42;stroke-width:1;stroke-linejoin:round}
html[data-theme="dark"] .cmp-body{fill:#C7A263;stroke:#E0BE7E}
.cmp-primer{fill:#A9793F;opacity:.85}
.cmp-dim{stroke:var(--blue);stroke-width:1;stroke-dasharray:3 3}
.cmp-dimtxt{fill:var(--blue);font-family:var(--disp);font-size:10.5px;font-weight:700;text-anchor:middle}
.cmp-name{fill:var(--ink);font-family:var(--disp);font-size:12.5px;font-weight:700;text-anchor:middle}

.cmp-table-wrap{overflow-x:auto;border-top:1px solid var(--line);background:var(--paper)}
.cmp-table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
.cmp-table th,.cmp-table td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left}
.cmp-table tr:first-child th{background:var(--tint);color:var(--blue);
  font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.04em}
.cmp-table th[scope="row"]{color:var(--ink-3);font-weight:500;font-size:13.5px;white-space:nowrap}
.cmp-table td{font-family:var(--disp);font-weight:600;color:var(--ink);white-space:nowrap}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:0}
.cmp-note{margin:0;padding:14px clamp(16px,2vw,24px) 18px;font-size:12.2px;color:var(--ink-3);
  line-height:1.6;border-top:1px solid var(--line)}
@media(max-width:520px){
  .cmp-bar{flex-direction:column;align-items:stretch}
  .cmp-unit{align-self:flex-start}
}
@media(prefers-reduced-motion:reduce){.cmp-case{animation:none}}
body.a11y-motion .cmp-case{animation:none}

/* ═══ Rakamlar bölümü ═══
   Açık zemin, ortalanmış tipografik başlık + iki satır açıklama + CTA,
   altında dolu renkli kartlar: etiket üstte, rakam altta. */
.stats{background:var(--paper-2)}
.stats-head{max-width:820px;margin:0 auto clamp(38px,4.6vw,60px);text-align:center}
.stats-head h2{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.08;
  letter-spacing:-.03em;color:var(--blue);margin-bottom:20px}
.stats-head .lead{margin:0 auto;max-width:62ch;color:var(--ink-2)}
.stats-head .g{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

.stats-grid{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.stats-grid{grid-template-columns:repeat(4,1fr)}}

.stat-card{
  position:relative;overflow:hidden;border-radius:20px;color:#fff;
  padding:clamp(18px,1.9vw,24px) clamp(16px,1.8vw,22px);
  min-height:clamp(126px,12vw,166px);
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(155deg,var(--blue) 0%,var(--blue-d) 70%,var(--blue-dd) 100%);
  box-shadow:0 8px 24px rgba(15,109,187,.20);
  transition:transform .45s var(--ez),box-shadow .45s var(--ez);
}
.stat-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,109,187,.30)}
.stat-card small{
  display:block;font-family:var(--disp);
  font-size:clamp(10.5px,.78vw,12px);font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(255,255,255,.82);line-height:1.4;
}
.stat-card .n{
  display:flex;align-items:baseline;justify-content:center;gap:1px;
  font-family:var(--disp);font-weight:800;line-height:.92;letter-spacing:-.035em;
  font-size:clamp(2.5rem,5vw,3.7rem);margin-top:auto;
}
.stat-card .n i{font-style:normal;font-size:.5em;font-weight:700;
  color:var(--brass-l);align-self:flex-start;margin-top:.18em}
.stat-card .n u{text-decoration:none;font-size:.5em;font-weight:700;
  color:var(--brass-l);align-self:flex-start;margin-top:.18em}
@media(max-width:480px){
  .stat-card{border-radius:16px;min-height:112px}
  .stat-card small{letter-spacing:.14em}
}

/* ═══ Product detail ═══ */
.pd{display:grid;gap:clamp(30px,4vw,52px);align-items:start}
@media(min-width:960px){.pd{grid-template-columns:1.25fr .75fr}}
.pd-main{border-radius:var(--r);overflow:hidden;background:var(--paper-3);aspect-ratio:4/3;
  box-shadow:var(--sh2);cursor:zoom-in;position:relative}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin-top:12px}
.pd-thumb{border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-3);
  border:2px solid transparent;transition:all .3s;padding:0}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb.on{border-color:var(--blue)}
.pd-thumb:hover{border-color:var(--blue-l)}

.pd-side{position:sticky;top:calc(var(--hdr) + 20px);display:grid;gap:18px}
@media(max-width:959px){.pd-side{position:static}}
.spec{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec h3{padding:18px 22px;margin:0;font-size:1.05rem;border-bottom:1px solid var(--line);background:var(--paper-2)}
.spec dl{margin:0;padding:6px 22px 16px}
.spec div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.spec div:last-child{border-bottom:0}
.spec dt{color:var(--ink-3);font-size:13.6px;margin:0}
.spec dd{margin:0;font-family:var(--disp);font-weight:600;font-size:14px;color:var(--ink);text-align:right}
.spec-note{font-size:11.8px;color:var(--ink-3);line-height:1.6;padding:0 22px 18px;margin:0}
.pd-cta{background:var(--tint);border:1px solid var(--tint-2);border-radius:var(--r);padding:24px 22px}
.pd-cta h4{font-size:1.05rem;margin-bottom:8px}
.pd-cta p{font-size:13.8px;color:var(--ink-2);margin-bottom:16px}
.pd-cta .g{display:grid;gap:9px}

/* ═══ Contact ═══ */
.ct{display:grid;gap:26px}
@media(min-width:980px){.ct{grid-template-columns:.85fr 1.15fr}}
.ct-info{background:linear-gradient(155deg,var(--blue-dd),var(--blue-d));color:#fff;
  border-radius:var(--r);padding:clamp(28px,3.4vw,40px);position:relative;overflow:hidden}
.ct-info::after{content:"";position:absolute;right:-70px;bottom:-70px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.055)}
.ct-info h3{color:#fff;font-size:1.5rem;margin-bottom:10px}
.ct-info>p{color:rgba(255,255,255,.76);font-size:14.5px;margin-bottom:26px;position:relative}
.ci{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.13);position:relative}
.ci:last-of-type{border-bottom:0}
.ci .ic{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.11);
  display:grid;place-items:center;flex-shrink:0;color:var(--brass-l)}
.ci .ic svg{width:17px;height:17px}
.ci small{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:4px;font-weight:600}
.ci a,.ci span{color:#fff;font-size:14.6px;line-height:1.55;transition:color .3s}
.ci a:hover{color:var(--brass-l)}

/* ═══ Tam genişlik harita + üzerine yazı ═══ */
.mapsec{position:relative;overflow:hidden;background:var(--paper-3);
  min-height:clamp(430px,58vh,610px);display:flex;align-items:center}
@media(max-width:820px){.mapsec{align-items:flex-end;min-height:clamp(460px,72vh,600px)}}
.mapsec-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:saturate(.72) contrast(1.04)}
/* Scrim: metnin arkasını koyultur, haritayı sağda açık bırakır.
   pointer-events:none → harita etkileşimi engellenmez. */
.mapsec-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(6,38,66,.97) 0%,
      rgba(7,47,82,.93) 24%,
      rgba(7,47,82,.72) 40%,
      rgba(7,47,82,.30) 55%,
      rgba(7,47,82,.04) 70%,
      transparent 82%),
    linear-gradient(180deg,rgba(7,47,82,.28) 0%,transparent 26%,transparent 74%,rgba(7,47,82,.34) 100%);
}
@media(max-width:820px){
  .mapsec-scrim{background:linear-gradient(180deg,
      rgba(7,47,82,.15) 0%,rgba(7,47,82,.45) 34%,rgba(7,47,82,.88) 62%,rgba(6,38,66,.97) 100%)}
}
.mapsec-body{position:relative;z-index:2;width:100%;pointer-events:none;
  padding-block:clamp(44px,5.4vw,72px)}
.mapsec-card{max-width:480px;color:#fff;pointer-events:auto;
  text-shadow:0 1px 14px rgba(4,26,45,.45)}
.mapsec-card h2{color:#fff;margin-bottom:16px}
.mapsec-card>p{color:rgba(255,255,255,.86);font-size:15.6px;line-height:1.75;margin-bottom:22px}
.mapsec-card .g{display:flex;flex-wrap:wrap;gap:12px}

/* Navigasyon uygulaması kısayolları */
.mapsec-apps{display:grid;gap:9px;margin:0 0 18px}
.mapsec-apps a{display:flex;align-items:center;gap:13px;padding:11px 15px;border-radius:12px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(8px);transition:all .34s var(--ez)}
.mapsec-apps a:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.34);transform:translateX(4px)}
.mapsec-apps .ic{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:var(--brass-l);transition:all .34s var(--ez)}
.mapsec-apps a:hover .ic{background:var(--brass-l);color:var(--blue-dd)}
.mapsec-apps .ic svg{width:16px;height:16px}
.mapsec-apps b{display:block;font-family:var(--disp);font-size:14px;font-weight:600;color:#fff;line-height:1.3}
.mapsec-apps small{display:block;font-size:11.5px;color:rgba(255,255,255,.6);margin-top:1px}

/* Koordinat + kopyala */
.mapsec-coord{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 15px;border-radius:12px;margin-bottom:10px;
  background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.mapsec-coord small{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:600;margin-bottom:3px}
.mapsec-coord b{font-family:var(--mono,ui-monospace,'SFMono-Regular',Menlo,monospace);
  font-size:14.5px;font-weight:600;color:#fff;letter-spacing:.02em}
.cpbtn{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  padding:9px 15px;border-radius:999px;color:#fff;font-family:var(--disp);font-size:12.8px;font-weight:600;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);transition:all .32s var(--ez)}
.cpbtn:hover{background:#fff;color:var(--blue-dd);border-color:#fff}
.cpbtn .cp-ic{display:grid;place-items:center}
.cpbtn .cp-ic svg{width:14px;height:14px;display:block}
.cpbtn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.mapsec-hint{font-size:12.6px;color:rgba(255,255,255,.6);line-height:1.6;margin:0 0 22px}

/* Koyu zeminde eyebrow varyantı */
.eyebrow.on-dark{background:rgba(255,255,255,.14);color:var(--brass-l);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.eyebrow.on-dark::before{background:var(--brass-l)}
.ct-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,3.4vw,40px);box-shadow:var(--sh1)}
.f2{display:grid;gap:0 20px}
@media(min-width:600px){.f2{grid-template-columns:1fr 1fr}}
.fld{margin-bottom:19px}
.fld label{display:block;font-family:var(--disp);font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.fld label i{color:var(--err);font-style:normal}
.fld input,.fld textarea,.fld select{width:100%;padding:12px 15px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--paper-2);font-family:var(--body);font-size:14.5px;color:var(--ink);transition:all .3s;outline:none}
.fld select{appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237C8B9B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.fld textarea{resize:vertical;min-height:112px}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--blue);background:var(--paper);box-shadow:0 0 0 4px var(--tint)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-3);opacity:.75}
.cons{display:flex;gap:11px;align-items:flex-start;font-size:12.8px;color:var(--ink-3);line-height:1.6;margin:2px 0 22px}
.cons input{width:17px;height:17px;accent-color:var(--blue);margin-top:2px;flex-shrink:0}
.fmsg{margin:15px 0 0;font-size:13.5px;font-weight:500;min-height:20px}

/* ═══ Footer (CTA entegre) ═══ */
footer{background:var(--blue-dd);color:rgba(255,255,255,.62);padding:0}

/* Footer üstü CTA şeridi — footer ile aynı zemin, ayrımı yalnızca
   koyu birleşim çizgisi ve içeri düşen gölge sağlar. */
.f-cta{position:relative;background:var(--blue-dd)}
.f-cta-in{position:relative;z-index:1;padding:clamp(34px,4.4vw,54px) 0;display:grid;gap:24px;align-items:center}
@media(min-width:880px){.f-cta-in{grid-template-columns:1.45fr auto}}
.f-cta h2{color:#fff;font-size:clamp(1.45rem,2.7vw,2.1rem);margin-bottom:10px}
.f-cta p{color:rgba(255,255,255,.8);margin:0;max-width:58ch;font-size:15.3px;line-height:1.7}
.f-cta .g{display:flex;flex-wrap:wrap;gap:12px}

/* Birleşim: bir tık koyu çizgi + içeri düşen gölge */
.f-body{position:relative;padding:clamp(48px,5.6vw,72px) 0 0;
  border-top:2px solid #041F37;
  box-shadow:inset 0 12px 26px -12px rgba(1,12,22,.9)}
.f-grid{display:grid;gap:38px;padding-bottom:40px}
@media(min-width:820px){.f-grid{grid-template-columns:1.45fr 1fr 1fr 1.2fr}}
.f-brand img{height:44px;margin-bottom:18px}
.f-brand p{font-size:13.6px;line-height:1.8;max-width:36ch}
.f-social{display:flex;gap:9px;margin-top:20px}
.f-social a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:rgba(255,255,255,.72);transition:all .35s var(--ez)}
.f-social a:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.f-social svg{width:16px;height:16px}

.f-col h5{font-family:var(--disp);font-size:14.5px;font-weight:700;color:#fff;margin:0 0 18px;
  display:flex;align-items:center;gap:9px}
.f-col h5::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.12)}
.f-col ul{list-style:none;margin:0;padding:0}
.f-col li{margin-bottom:3px}
.f-col a{font-size:13.8px;display:flex;align-items:flex-start;gap:10px;
  padding:6px 9px 6px 7px;margin-left:-7px;border-radius:8px;transition:all .32s var(--ez)}
.f-col a .fi{width:26px;height:26px;flex-shrink:0;border-radius:7px;
  background:rgba(255,255,255,.07);color:var(--blue-l);
  display:grid;place-items:center;transition:all .32s var(--ez)}
.f-col a .fi svg{width:14px;height:14px;display:block}
.f-col a:hover{color:#fff;background:rgba(255,255,255,.05)}
.f-col a:hover .fi{background:var(--blue);color:#fff;transform:scale(1.08)}

.f-bot{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;flex-wrap:wrap;
  gap:10px 22px;justify-content:space-between;align-items:center;font-size:12.6px}
.f-bot a:hover{color:#fff}
.f-legal{opacity:.8}
.f-credit{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.5)}
.f-credit a{display:inline-flex;align-items:center;gap:6px;color:var(--brass-l);font-weight:600;
  font-family:var(--disp);letter-spacing:.01em;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(217,178,116,.28);transition:all .34s var(--ez)}
.f-credit a svg{width:11px;height:11px;opacity:.7;transition:transform .34s var(--ez)}
.f-credit a:hover{background:var(--brass-l);border-color:var(--brass-l);color:var(--blue-dd)}
.f-credit a:hover svg{transform:translate(2px,-2px);opacity:1}

/* ═══ Lightbox ═══ */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(6,18,30,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:56px 20px;opacity:0;visibility:hidden;transition:all .4s var(--ez)}
.lb.on{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:82vh;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.55);
  transform:scale(.94);transition:transform .45s var(--ez)}
.lb.on img{transform:none}
.lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.88);
  font-family:var(--disp);font-size:14px;font-weight:600;padding-inline:20px}
.lb-x{position:absolute;top:20px;right:22px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;transition:all .3s}
.lb-x:hover{background:#fff;color:var(--blue-dd);transform:rotate(90deg)}
.lb-x svg{width:18px;height:18px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;transition:all .3s}
.lb-nav:hover{background:#fff;color:var(--blue-dd)}
.lb-nav svg{width:17px;height:17px}
.lb-p{left:18px}.lb-n{right:18px}

/* ═══ Floating ═══ */
/* Sağ alt düğme yığını — üçü de tek değişkene bağlı, birlikte hareket eder.
   Alttan üste: yukarı çık · WhatsApp · erişilebilirlik  */
:root{--fab-b:20px; --fab-gap:56px}
.totop{position:fixed;right:20px;bottom:var(--fab-b);z-index:9500;width:46px;height:46px;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:var(--sh3);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .42s var(--ez),visibility .42s,transform .42s var(--ez),bottom .4s var(--ez)}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--blue-d);transform:translateY(-3px)}
.totop svg{width:16px;height:16px}
.wa{position:fixed;right:20px;bottom:calc(var(--fab-b) + var(--fab-gap));z-index:9500;
  width:46px;height:46px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.4);
  transition:transform .35s var(--ez),bottom .4s var(--ez)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:22px;height:22px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
  .sc>*{opacity:1;transform:none}
  .slide-img img{transform:none}
}