/* ==========================================================================
   EUROTEK GROUP — savunma sanayi kurumsal sitesi
   Tasarım sistemi: "teknik künye" — siyah gövde, altın hat, mono veri
   ========================================================================== */

:root{
  /* Renk — logodan türetildi (altın gradyan + lacivert halka) */
  --ink:        #06080B;
  --ink-2:      #0B1015;
  --panel:      #10161D;
  --panel-2:    #151D26;
  --line:       #1D2732;
  --line-soft:  #161E27;

  --gold:       #C79A4B;
  --gold-hi:    #EBCB8E;
  --gold-deep:  #8A6526;
  --navy:       #1A2A8F;
  --navy-hi:    #2C46D8;

  --paper:      #DCE2E9;
  --paper-dim:  #8E9AA7;
  --paper-mute: #5D6874;

  /* Tipografi */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:    "Barlow", "Segoe UI", system-ui, sans-serif;
  --data:    "JetBrains Mono", ui-monospace, "Consolas", monospace;

  --shell: 1360px;
  --gut: clamp(20px, 4vw, 56px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px }

::selection{ background:var(--gold); color:#0A0A0A }

/* ---------- Tipografi ölçeği ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  font-stretch:118%;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:1.02;
  margin:0;
  color:#F2F5F8;
}
h1{ font-size:clamp(2.6rem, 6.4vw, 5.4rem) }
h2{ font-size:clamp(1.9rem, 3.6vw, 3.1rem) }
h3{ font-size:clamp(1.15rem, 1.7vw, 1.5rem); font-stretch:112% }
p{ margin:0 0 1em }

.eyebrow{
  font-family:var(--data);
  font-size:.685rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:.75rem;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold); flex:none;
}
.eyebrow.center{ justify-content:center }

.lede{ font-size:clamp(1.02rem,1.25vw,1.16rem); color:var(--paper-dim); max-width:62ch }

/* ---------- Kabuk ---------- */
.shell{ width:min(100% - var(--gut)*2, var(--shell)); margin-inline:auto }
.section{ padding-block:clamp(72px, 9vw, 136px); position:relative }
.section--tight{ padding-block:clamp(52px, 6vw, 88px) }

/* Marka motifi: eğik altın tarama (katalog kapağındaki çizgiler) */
.rake{ position:relative; isolation:isolate }
.rake::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(114deg,
    transparent 0 46px,
    rgba(199,154,75,.10) 46px 47px,
    transparent 47px 96px);
  mask-image:linear-gradient(100deg, transparent 42%, #000 78%);
}

.hair{ height:1px; background:var(--line); border:0; margin:0 }

/* ==========================================================================
   ÜST BAR
   ========================================================================== */
.topbar{
  border-bottom:1px solid var(--line-soft);
  background:var(--ink-2);
  font-family:var(--data);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-mute);
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:38px }
.topbar a:hover{ color:var(--gold-hi) }
.topbar__meta{ display:flex; gap:1.6rem; align-items:center }
@media (max-width:860px){ .topbar__meta span:first-child{ display:none } }

/* cam (glass) başlık */
.header{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(24,32,42,.52), rgba(10,14,19,.38));
  backdrop-filter:blur(20px) saturate(1.7);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 12px 34px -22px rgba(0,0,0,.9);
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.header.is-stuck{
  background:linear-gradient(180deg, rgba(18,25,34,.74), rgba(7,10,14,.66));
  border-bottom-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 16px 40px -20px rgba(0,0,0,.95);
}
/* backdrop-filter desteklenmiyorsa okunurluk için katı zemin */
@supports not (backdrop-filter: blur(1px)){
  .header{ background:rgba(8,11,15,.94) }
  .header.is-stuck{ background:rgba(6,8,11,.98) }
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; height:96px }
.brand{ display:flex; align-items:center; gap:.85rem; flex:none }
.brand img{ height:66px; width:auto }
@media (max-width:520px){ .brand img{ height:52px } }
.brand__txt{ display:none }

.nav__links{ display:flex; align-items:center; gap:2.1rem; margin-left:auto }
.nav__links a{
  font-family:var(--data); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim);
  padding-block:.6rem; position:relative; transition:color .22s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .3s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current]{ color:#fff }
.nav__links a:hover::after, .nav__links a[aria-current]::after{ right:0 }

.lang{ display:flex; gap:.15rem; font-family:var(--data); font-size:.7rem; letter-spacing:.1em }
.lang button{ padding:.3rem .5rem; color:var(--paper-mute); border-radius:2px; transition:color .2s }
.lang button[aria-pressed="true"]{ color:var(--gold-hi) }
.lang button:hover{ color:#fff }
.lang__sep{ color:var(--line); align-self:center }

.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center }
.burger span{ display:block; width:22px; height:1.5px; background:var(--paper); position:relative; transition:.3s var(--ease) }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--paper); transition:.3s var(--ease) }
.burger span::before{ top:-7px } .burger span::after{ top:7px }
.burger[aria-expanded="true"] span{ background:transparent }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg) }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg) }


/* ---------- Ürünler alt menüsü ---------- */
.nav__item{ position:relative; display:flex; align-items:center; gap:.35rem }
.nav__toggle{
  display:grid; place-items:center; width:20px; height:20px; color:var(--paper-mute);
  transition:color .22s var(--ease), transform .3s var(--ease);
}
.nav__item:hover .nav__toggle,
.nav__item:focus-within .nav__toggle{ color:var(--gold-hi); transform:rotate(180deg) }

.nav__sub{
  position:absolute; top:100%; left:-1.4rem; margin-top:.9rem;
  display:grid; grid-template-columns:auto auto; gap:0 2.6rem;
  padding:1.5rem 1.9rem 1.6rem;
  background:linear-gradient(180deg, rgba(20,27,36,.92), rgba(8,11,16,.94));
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 60px -26px rgba(0,0,0,.95);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index:5;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub,
.nav__item.is-open .nav__sub{ opacity:1; visibility:visible; transform:none }
/* fare boşluğa düşmesin diye görünmez köprü */
.nav__sub::before{ content:""; position:absolute; left:0; right:0; top:-.9rem; height:.9rem }

.nav__col{ display:flex; flex-direction:column; gap:.1rem; min-width:max-content }
.nav__col-h{
  font-family:var(--data); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); padding-bottom:.7rem; margin-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.nav__sub a{
  font-family:var(--body); font-size:.9rem; letter-spacing:0; text-transform:none;
  color:var(--paper-dim); padding:.44rem 0; white-space:nowrap;
}
.nav__sub a::after{ display:none }
.nav__sub a:hover{ color:var(--gold-hi) }

@media (max-width:1000px){
  .burger{ display:flex }
  .nav__links{
    position:fixed; inset:96px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:#090D12; backdrop-filter:blur(22px) saturate(1.6);
    -webkit-backdrop-filter:blur(22px) saturate(1.6);
    border-bottom:1px solid rgba(255,255,255,.10);
    padding:.5rem var(--gut) 1.6rem; margin:0;
    /* alt menü açılınca liste ekranı aşabilir: kendi içinde kaysın */
    max-height:calc(100dvh - 96px); overflow-y:auto; overscroll-behavior:contain;
    clip-path:inset(0 0 100% 0); transition:clip-path .38s var(--ease);
  }
  .nav__links.is-open{ clip-path:inset(0 0 0 0) }
  .nav__links a{ padding:1rem 0; border-bottom:1px solid var(--line-soft); font-size:.85rem }

  /* mobilde alt menü akordiyon */
  .nav__item{ flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--line-soft) }
  .nav__item > a{ flex:1; border-bottom:0 }
  .nav__toggle{ width:44px; height:44px; color:var(--paper-dim) }
  .nav__sub{
    position:static; opacity:1; visibility:visible; transform:none; margin:0;
    flex:1 0 100%; width:100%;            /* kendi satırına insin */
    grid-template-columns:1fr; gap:1.3rem; padding:0 0 1.1rem .2rem;
    background:none; border:0; box-shadow:none; backdrop-filter:none;
    -webkit-backdrop-filter:none;
    display:none;
  }
  .nav__col{ min-width:0 }               /* uzun başlıklar sarsın */
  .nav__sub a{ white-space:normal }
  .nav__item.is-open .nav__sub{ display:grid }
  .nav__item.is-open .nav__toggle{ transform:rotate(180deg); color:var(--gold-hi) }
  .nav__sub a{ padding:.5rem 0; font-size:.92rem; border-bottom:0 }
}

/* ==========================================================================
   DÜĞMELER
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--data); font-size:.73rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  padding:1.02rem 1.7rem; border:1px solid var(--line);
  color:var(--paper); position:relative; overflow:hidden;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:linear-gradient(100deg,var(--gold-deep),var(--gold));
  transform:translateY(101%); transition:transform .38s var(--ease); z-index:-1;
}
.btn:hover{ color:#0A0A0A; border-color:var(--gold) }
.btn:hover::before{ transform:translateY(0) }
.btn span{ position:relative }
.btn--gold{ background:linear-gradient(100deg,var(--gold-deep),var(--gold)); border-color:transparent; color:#0A0A0A }
.btn--gold::before{ background:#F2F5F8 }
.btn--ghost{ border-color:rgba(220,226,233,.25) }
.btn__arrow{ transition:transform .3s var(--ease) }
.btn:hover .btn__arrow{ transform:translateX(4px) }

/* ==========================================================================
   HERO — dönen silah vitrini (stage)
   ========================================================================== */
.stage{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink);
  --tint:#2A2F3A;                     /* slayta göre değişir */
  padding-block:clamp(34px,4vw,58px) 0;
  transition:--tint 1s var(--ease);
}
/* podyum fotoğrafı — silah bunun üstünde durur */
.stage__photo{
  position:absolute; inset:0; z-index:-3; display:block; pointer-events:none;
}
.stage__photo video,
.stage__photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  display:block;
}
/* slayda göre renk tonu + kenar karartma */
.stage__wash{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(52% 46% at 50% 46%, color-mix(in srgb, var(--tint) 62%, transparent) 0%, transparent 72%),
    linear-gradient(90deg, var(--ink) 2%, rgba(6,8,11,.72) 22%, transparent 42%, transparent 62%, rgba(6,8,11,.80) 82%, var(--ink) 99%),
    linear-gradient(180deg, rgba(6,8,11,.86) 0%, transparent 26%, transparent 62%, rgba(6,8,11,.94) 96%);
  transition:background 1s var(--ease), opacity .45s var(--ease);
}
.stage__rake{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.4;
  background:repeating-linear-gradient(114deg, transparent 0 60px, rgba(199,154,75,.10) 60px 61px, transparent 61px 122px);
  mask-image:radial-gradient(70% 60% at 50% 45%, transparent 30%, #000 85%);
}
.stage__grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.34fr) 300px;
  gap:clamp(18px,2.4vw,40px); align-items:center;
  min-height:clamp(480px,60vh,640px);
}

/* -- sol metin -- */
.stage__eyebrow{
  font-family:var(--data); font-size:.66rem; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1.3rem;
}
.stage__head{
  font-size:clamp(2.1rem,3.5vw,3.25rem); line-height:1.02; margin:0;
  text-transform:none; font-stretch:112%; letter-spacing:-.015em;
}
.stage__head em{ font-style:normal; color:transparent;
  background:linear-gradient(100deg,var(--gold-hi),var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text }
.stage__text{ color:#A9B4C0; margin:1.25rem 0 2rem; max-width:38ch; font-size:1.02rem }

.pill{
  display:inline-flex; align-items:center; gap:1rem;
  background:#F2F5F8; color:#0A0D11; padding:.55rem .58rem .55rem 1.5rem;
  border-radius:999px; font-family:var(--data); font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.pill__dot{
  width:34px; height:34px; border-radius:50%; background:#0A0D11; color:#F2F5F8;
  display:grid; place-items:center; transition:background .3s var(--ease), color .3s var(--ease);
}
.pill:hover{ background:linear-gradient(100deg,var(--gold-hi),var(--gold)); transform:translateY(-2px) }
.pill:hover .pill__dot{ background:#0A0D11; color:var(--gold-hi) }

/* -- orta: silah sahnesi -- */
.stage__shot{ position:relative; height:100%; min-height:clamp(320px,42vw,540px) }
.stage__frames{ position:absolute; inset:0 }
.stage__frames figure{
  position:absolute; inset:0; margin:0;
  display:flex; align-items:flex-end;
  padding-bottom:13.5%;                /* podyumun biraz üstünde dursun */
  transform:translateX(-7.5%);         /* podyum merkezine hizala */
  opacity:0; visibility:hidden; pointer-events:none;
}
/* podyum üzerindeki temas gölgesi */
.stage__frames figure::after{
  content:""; position:absolute; left:50%; bottom:8.4%; translate:-50% 0;
  width:62%; height:26px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 46%, transparent 72%);
  filter:blur(5px); opacity:0; transition:opacity .7s var(--ease) .2s;
}
.stage__frames figure.is-live::after{ opacity:1 }
.stage__frames figure img{
  /* her silah aynı kutuda, aynı taban çizgisinde: tabanca da tüfek de
     aynı yüksekliği paylaşır, kendi oranını korur */
  width:100%; height:clamp(150px, 26vh, 270px);
  object-fit:contain; object-position:center bottom;
  /* dik duran sistemler için daha uzun kutu — taban çizgisi aynı kalır */
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.72));
  transform:translateX(46px) scale(.94); opacity:0;
  transition:transform 1.05s var(--ease), opacity .75s var(--ease), filter .8s var(--ease);
}
.stage__frames figure.is-live{ opacity:1; visibility:visible }
.stage__frames figure img.is-tall{ height:clamp(240px, 46vh, 460px) }
.stage__frames figure.is-live img{ transform:none; opacity:1; animation:hover-float 7s ease-in-out 1.1s infinite }
.stage__frames figure.is-out img{ transform:translateX(-40px) scale(.96); opacity:0; animation:none }

@keyframes hover-float{ 0%,100%{ translate:0 0 } 50%{ translate:0 -9px } }

/* oklar sol sütunda, butonun altında */
.stage__nav{ display:flex; gap:.55rem; margin-top:2.4rem }
.arrow{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  color:var(--paper-dim); display:grid; place-items:center;
  transition:.28s var(--ease); background:rgba(10,13,17,.45); backdrop-filter:blur(4px);
}
.arrow:hover{ border-color:var(--gold); color:var(--gold-hi); background:rgba(199,154,75,.12) }

/* -- sağ künye paneli -- */
.panel{ border-left:1px solid var(--line); padding-left:clamp(18px,1.8vw,28px); align-self:stretch;
  display:flex; flex-direction:column; justify-content:center }
.panel__k{
  font-family:var(--data); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-mute); margin:0 0 .55rem;
}
.panel__k--sp{ margin-top:1.7rem }
.panel__name{
  font-size:1.32rem; text-transform:none; font-stretch:110%; letter-spacing:-.01em;
  margin:0 0 1.5rem; min-height:1.3em;
}
.panel__pair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem }
.panel__pair dl{ margin:0 }
.panel__pair dt{ font-family:var(--data); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-mute) }
.panel__pair dd{ margin:.4rem 0 0; font-family:var(--display); font-stretch:110%; font-weight:600; font-size:1.02rem; color:#EDF1F5 }
.panel__chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.panel__chips span{
  font-family:var(--data); font-size:.6rem; letter-spacing:.09em;
  border:1px solid var(--line); border-radius:999px; padding:.4rem .72rem; color:var(--paper-dim);
}
.panel__link{
  margin-top:1.9rem; font-family:var(--data); font-size:.7rem; font-weight:600;
  letter-spacing:.1em; color:var(--gold-hi); display:inline-flex; gap:.5rem; align-items:center;
  border-bottom:1px solid rgba(199,154,75,.35); padding-bottom:.35rem; align-self:flex-start;
  transition:gap .25s var(--ease), border-color .25s;
}
.panel__link:hover{ gap:.9rem; border-color:var(--gold) }

.panel__thumbs{ display:flex; gap:.45rem; margin-top:1.9rem; flex-wrap:wrap }
.panel__thumbs button{
  width:56px; height:44px; border:1px solid var(--line); background:rgba(255,255,255,.02);
  display:grid; place-items:center; padding:4px; position:relative; overflow:hidden;
  transition:border-color .28s var(--ease), background .28s var(--ease);
}
.panel__thumbs img{ max-width:100%; max-height:100%; object-fit:contain; opacity:.5; transition:opacity .28s }
.panel__thumbs button:hover img{ opacity:.9 }
.panel__thumbs button[aria-selected="true"]{ border-color:var(--gold) }
.panel__thumbs button[aria-selected="true"] img{ opacity:1 }
.panel__thumbs button[aria-selected="true"]::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold));
  transform-origin:left; animation:tick var(--dwell,6s) linear forwards;
}
@keyframes tick{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* -- alt sayı şeridi -- */
.stage__stats{
  display:flex; gap:clamp(28px,5vw,72px); flex-wrap:wrap; justify-content:center;
  border-top:1px solid var(--line-soft); margin-top:clamp(24px,3vw,40px);
  padding-block:clamp(20px,2.4vw,30px);
}
.stage__stats div{ display:flex; align-items:baseline; gap:.7rem }
.stage__stats b{
  font-family:var(--display); font-stretch:114%; font-weight:700;
  font-size:clamp(1.35rem,2.1vw,1.8rem); color:#F2F5F8; letter-spacing:-.01em;
}
.stage__stats span{ font-family:var(--data); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-mute) }

/* -- kayan şerit -- */
.ticker{ border-top:1px solid var(--line); background:var(--ink-2); overflow:hidden; padding-block:.85rem }
.ticker__row{ display:flex; gap:2.6rem; width:max-content; animation:slide 42s linear infinite }
.ticker__row span{
  font-family:var(--data); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-mute);
  display:flex; align-items:center; gap:2.6rem; white-space:nowrap;
}
.ticker__row span::after{ content:""; width:5px; height:5px; background:var(--gold-deep); transform:rotate(45deg) }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* metin giriş animasyonu */
.stage__copy > *{ opacity:0; transform:translate3d(-34px,0,0) }
.stage__copy.is-live > *{ animation:copy-in .8s var(--ease) forwards }
.stage__copy.is-live > *:nth-child(1){ animation-delay:.05s }
.stage__copy.is-live > *:nth-child(2){ animation-delay:.14s }
.stage__copy.is-live > *:nth-child(3){ animation-delay:.23s }
.stage__copy.is-live > *:nth-child(4){ animation-delay:.32s }
.stage__copy.is-live > *:nth-child(5){ animation-delay:.40s }
@keyframes copy-in{ to{ opacity:1; transform:none } }

/* sağ künye paneli sağdan */
.panel > *{ opacity:0; transform:translate3d(30px,0,0); animation:panel-in .8s var(--ease) forwards }
.panel > *:nth-child(1){ animation-delay:.10s }
.panel > *:nth-child(2){ animation-delay:.16s }
.panel > *:nth-child(3){ animation-delay:.22s }
.panel > *:nth-child(4){ animation-delay:.28s }
.panel > *:nth-child(5){ animation-delay:.34s }
.panel > *:nth-child(6){ animation-delay:.40s }
.panel > *:nth-child(7){ animation-delay:.46s }
@keyframes panel-in{ to{ opacity:1; transform:none } }

/* alt sayı şeridi aşağıdan */
.stage__stats div{ opacity:0; transform:translate3d(0,16px,0); animation:stat-in .7s var(--ease) forwards }
.stage__stats div:nth-child(2){ animation-delay:.09s }
.stage__stats div:nth-child(3){ animation-delay:.18s }
@keyframes stat-in{ to{ opacity:1; transform:none } }

@media (max-width:1180px){
  .stage__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  .panel{ grid-column:1/-1; border-left:0; border-top:1px solid var(--line); padding:1.6rem 0 0 }
  .panel__pair{ max-width:420px }
}
@media (max-width:760px){
  /* Telefonda da masaüstündeki sahne korunur: video üst blokta durur,
     silah podyumun üzerine oturur, alt kısım metin için karartılır. */
  .stage{ padding-top:0 }
  .stage__grid{ grid-template-columns:1fr; min-height:0; gap:0 }
  .stage__stats{ justify-content:flex-start }

  .stage__photo{
    inset:0 0 auto 0; height:var(--shotH);
    -webkit-mask-image:linear-gradient(#000 86%, transparent 100%);
            mask-image:linear-gradient(#000 86%, transparent 100%);
  }
  .stage__wash{ inset:0 0 auto 0; height:var(--shotH) }
  .stage__rake{ inset:0 0 auto 0; height:var(--shotH) }

  .stage__shot{ order:-1; min-height:var(--shotH); margin-inline:calc(var(--gut) * -1) }
  /* podyum yüzeyi karenin %68'inde: silah tam oraya otursun */
  .stage__frames{ inset:0 6% 32% }        /* kenarlara değmesin */
  .stage__frames figure{
    transform:none; padding-bottom:0;
    display:flex; align-items:flex-end; justify-content:center;
  }
  .stage__frames figure img{ height:clamp(120px, 20vh, 200px) }
  .stage__frames figure img.is-tall{ height:clamp(150px, 26vh, 260px) }
  .stage__frames figure::after{ display:block; bottom:-4%; width:54%; height:18px }

  .stage__copy{ padding-top:.6rem }
  .stage__nav{ margin-top:1.8rem }
}
@media (max-width:760px) and (orientation:portrait){ .stage{ --shotH:52vh } }
@media (max-width:760px) and (orientation:landscape){ .stage{ --shotH:78vh } }
@media (prefers-reduced-motion:reduce){
  .stage__frames figure.is-live img{ animation:none }
  .panel__thumbs button[aria-selected="true"]::after{ animation:none; transform:scaleX(1) }
}

/* ==========================================================================
   İÇ SAYFA HERO
   ========================================================================== */
.hero{ position:relative; min-height:min(92vh, 860px); display:flex; align-items:flex-end; overflow:hidden }
.hero__bg{ position:absolute; inset:0; z-index:0 }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:60% 40%; filter:grayscale(.32) contrast(1.08) brightness(.62) }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(6,8,11,.72) 34%, rgba(6,8,11,.30) 68%, rgba(6,8,11,.7) 100%),
    linear-gradient(100deg, rgba(6,8,11,.92) 12%, transparent 62%);
}
.hero__rake{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(114deg, transparent 0 54px, rgba(199,154,75,.16) 54px 55px, transparent 55px 112px);
  mask-image:linear-gradient(100deg, transparent 46%, #000 100%);
}
.hero__in{ position:relative; z-index:2; padding-block:clamp(56px,7vw,104px) }
.hero h1{ max-width:16ch }
.hero h1 em{ font-style:normal; color:transparent; background:linear-gradient(100deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep)); -webkit-background-clip:text; background-clip:text }
.hero__sub{ margin-top:1.5rem; max-width:54ch; color:#B7C1CC; font-size:clamp(1rem,1.2vw,1.14rem) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem }

/* Hero altı üç sütun künye */
.hero__plate{
  border-top:1px solid var(--line); margin-top:clamp(40px,5vw,68px);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.hero__plate div{ padding:1.5rem 1.6rem 0 0 }
.hero__plate dt{ font-family:var(--data); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }
.hero__plate dd{ margin:.5rem 0 0; font-family:var(--display); font-stretch:118%; font-weight:700; font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1 }
.hero__plate small{ display:block; margin-top:.35rem; color:var(--paper-mute); font-size:.82rem }
@media (max-width:720px){ .hero__plate{ grid-template-columns:1fr 1fr } .hero__plate div:last-child{ display:none } }

/* ==========================================================================
   BÖLÜM BAŞLIĞI
   ========================================================================== */
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2.5rem; margin-bottom:clamp(32px,4vw,56px) }
.head p{ margin:1rem 0 0 }
@media (max-width:800px){ .head{ flex-direction:column; align-items:flex-start; gap:1.4rem } }

/* ==========================================================================
   İMZA: KALİBRE CETVELİ
   ========================================================================== */
.ruler{ background:var(--ink-2); border-block:1px solid var(--line) }
.ruler__scale{ position:relative; margin-top:2.2rem; overflow-x:auto; overflow-y:hidden; padding-bottom:1.2rem; scrollbar-width:thin }
.ruler__scale::-webkit-scrollbar{ height:5px }
.ruler__scale::-webkit-scrollbar-thumb{ background:var(--line) }
.ruler__track{ display:flex; align-items:flex-end; gap:clamp(14px,2.2vw,30px); min-width:max-content; padding:0 2px }
.cal{
  flex:none; text-align:center; position:relative;
  background:none; padding:0 0 .1rem; cursor:pointer;
  transition:transform .28s var(--ease);
}
.cal svg{ display:block; margin:0 auto; overflow:visible }
.cal__body{ fill:#26313D; stroke:#3A4756; stroke-width:1; transition:fill .25s var(--ease), stroke .25s var(--ease) }
.cal__tip{ fill:#4C5A6B; transition:fill .25s var(--ease) }
.cal:hover, .cal[aria-pressed="true"]{ transform:translateY(-5px) }
.cal:hover .cal__body, .cal[aria-pressed="true"] .cal__body{ fill:#6E5628; stroke:var(--gold) }
.cal:hover .cal__tip, .cal[aria-pressed="true"] .cal__tip{ fill:var(--gold-hi) }
.cal__label{
  margin-top:.7rem; font-family:var(--data); font-size:.63rem; letter-spacing:.06em;
  color:var(--paper-mute); white-space:nowrap; transition:color .25s var(--ease);
}
.cal:hover .cal__label, .cal[aria-pressed="true"] .cal__label{ color:var(--gold-hi) }
.cal__n{ display:block; font-size:.6rem; color:var(--line); margin-top:.15rem }
.cal:hover .cal__n{ color:var(--paper-mute) }
.ruler__base{ height:1px; background:linear-gradient(90deg,var(--line),var(--gold-deep),var(--line)); margin-top:-1.2rem }
.ruler__note{ font-family:var(--data); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-mute); margin-top:1.6rem }

/* ==========================================================================
   KATEGORİ IZGARASI
   ========================================================================== */
/* 6 kart — 3x2: boşluk kalmaz */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line) }
@media (max-width:980px){ .cats{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .cats{ grid-template-columns:1fr } }
.cat{
  background:var(--ink); padding:clamp(26px,2.6vw,38px); position:relative;
  display:flex; flex-direction:column; min-height:270px; overflow:hidden;
  transition:background .35s var(--ease);
}
.cat::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi)); transition:width .45s var(--ease);
}
.cat:hover{ background:var(--panel) }
.cat:hover::after{ width:100% }
.cat__no{ font-family:var(--data); font-size:.66rem; letter-spacing:.2em; color:var(--gold-deep) }
.cat h3{ margin:1.4rem 0 .7rem }
.cat p{ color:var(--paper-dim); font-size:.94rem; margin:0 }
.cat__foot{ margin-top:auto; padding-top:1.6rem; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--data); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-mute) }
.cat:hover .cat__foot{ color:var(--gold-hi) }
/* hayalet ürün görseli kartın ortasında */
.cat__img{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:78%; max-height:56%; object-fit:contain;
  opacity:.16; filter:grayscale(1) contrast(1.2); pointer-events:none;
  transition:opacity .45s var(--ease), scale .55s var(--ease);
}
.cat:hover .cat__img{ opacity:.34; scale:1.06 }

/* ==========================================================================
   ÜRÜN KARTLARI
   ========================================================================== */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:1px; background:var(--line) }
.card{
  background:var(--ink-2); display:flex; flex-direction:column; position:relative;
  transition:background .35s var(--ease);
}
.card:hover{ background:var(--panel) }
.card__fig{
  position:relative; aspect-ratio:16/11; display:grid; place-items:center;
  padding:1.6rem 1.6rem .4rem; overflow:hidden;
}
.card__fig img{
  max-height:100%; width:auto; object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.65));
  transition:transform .5s var(--ease);
}
.card:hover .card__fig img{ transform:scale(1.055) }
.card__tag{
  position:absolute; top:1rem; left:1rem; font-family:var(--data); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep);
  border:1px solid var(--line); padding:.28rem .5rem;
}
.card__body{ padding:1.2rem 1.6rem 1.7rem; border-top:1px solid var(--line-soft); margin-top:auto }
.card__body h3{ font-size:1.2rem }
.card__cal{ font-family:var(--data); font-size:.72rem; letter-spacing:.1em; color:var(--paper-dim); margin-top:.5rem }
.card__go{ margin-top:1rem; font-family:var(--data); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-mute); display:flex; align-items:center; gap:.5rem; transition:color .25s, gap .25s }
.card:hover .card__go{ color:var(--gold-hi); gap:.9rem }

/* ==========================================================================
   KATALOG (filtre)
   ========================================================================== */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:2rem }
.chip{
  font-family:var(--data); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  padding:.62rem 1rem; border:1px solid var(--line); color:var(--paper-dim);
  transition:.25s var(--ease);
}
.chip:hover{ border-color:var(--paper-mute); color:#fff }
.chip[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#0A0A0A }
.search{
  margin-left:auto; display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--line); padding:.5rem .9rem; min-width:230px;
}
.search input{
  background:none; border:0; color:var(--paper); font-family:var(--data);
  font-size:.75rem; letter-spacing:.08em; width:100%; outline:none;
}
.search input::placeholder{ color:var(--paper-mute); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem }
.search svg{ flex:none; color:var(--paper-mute) }
@media (max-width:700px){ .search{ margin-left:0; width:100% } }

.count{ font-family:var(--data); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-mute); margin-bottom:1.2rem }
.empty{ padding:5rem 1rem; text-align:center; color:var(--paper-mute); font-family:var(--data); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase }

/* ==========================================================================
   ÜRÜN DETAY
   ========================================================================== */
.crumbs{ font-family:var(--data); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-mute); padding-block:1.6rem }
.crumbs a:hover{ color:var(--gold-hi) }
.crumbs span{ color:var(--line); margin-inline:.55rem }

.detail{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,64px); align-items:stretch }
@media (max-width:940px){ .detail{ grid-template-columns:1fr } }
.detail__fig{
  background:radial-gradient(120% 100% at 50% 38%, #171F28 0%, var(--ink-2) 62%);
  border:1px solid var(--line); padding:clamp(24px,4vw,56px);
  display:grid; place-items:center; min-height:340px; height:100%;
  position:relative; overflow:hidden;      /* künye sütunu kadar uzasın: altta boşluk kalmaz */
}
.detail__fig::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(114deg, transparent 0 44px, rgba(199,154,75,.07) 44px 45px, transparent 45px 92px);
}
.detail__fig img{ max-height:min(64vh,560px); width:auto; filter:drop-shadow(0 30px 44px rgba(0,0,0,.7)); position:relative }
.detail h1{ font-size:clamp(2.1rem,4.2vw,3.4rem) }
.detail__desc{ color:var(--paper-dim); margin-top:1.3rem; max-width:56ch }

.specs{ width:100%; border-collapse:collapse; margin-top:2.2rem; font-family:var(--data); font-size:.8rem }
.specs caption{
  text-align:left; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); padding-bottom:.9rem;
}
.specs tr{ border-bottom:1px solid var(--line-soft) }
.specs tr:first-child{ border-top:1px solid var(--line) }
.specs th{ text-align:left; font-weight:400; color:var(--paper-mute); padding:.78rem 1rem .78rem 0; width:47%; letter-spacing:.03em }
.specs td{ text-align:right; color:#EDF1F5; padding:.78rem 0; font-weight:500 }

.feats{ list-style:none; padding:0; margin:2.2rem 0 0; display:grid; gap:.55rem }
.feats li{ display:flex; gap:.8rem; align-items:baseline; color:var(--paper-dim); font-size:.95rem }
.feats li::before{ content:""; width:6px; height:6px; flex:none; background:var(--gold); transform:rotate(45deg); translate:0 -2px }

.variants{ margin-top:2.2rem; border-top:1px solid var(--line) }
.variants div{ display:flex; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line-soft) }
.variants b{ font-family:var(--data); font-size:.76rem; letter-spacing:.08em; color:var(--gold-hi); flex:none; min-width:120px }
.variants p{ margin:0; color:var(--paper-dim); font-size:.92rem }

/* ==========================================================================
   KABİLİYET / METİN BLOKLARI
   ========================================================================== */
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(32px,4.5vw,72px); align-items:center }
.split__fig{ position:relative }
.split__fig img{ width:100%; filter:grayscale(.4) contrast(1.06) brightness(.86) }
.split__fig::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, transparent 45%, rgba(6,8,11,.55));
  pointer-events:none;
}
.split__fig--frame{ border:1px solid var(--line); padding:10px }

.caps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); margin-top:clamp(32px,4vw,56px) }
.cap{ background:var(--ink); padding:clamp(24px,2.4vw,34px) }
.cap h3{ font-size:1.08rem; margin-bottom:.7rem }
.cap p{ color:var(--paper-dim); font-size:.93rem; margin:0 }
.cap__i{ color:var(--gold); margin-bottom:1.3rem; display:block }

/* Sayaç şeridi */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line) }
.stat{ background:var(--ink-2); padding:clamp(26px,3vw,42px) }
.stat b{ display:block; font-family:var(--display); font-stretch:118%; font-weight:700;
  font-size:clamp(2.2rem,4vw,3.4rem); line-height:1; color:#F2F5F8 }
.stat b i{ font-style:normal; color:var(--gold) }
.stat span{ display:block; margin-top:.8rem; font-family:var(--data); font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--paper-mute) }

/* ==========================================================================
   CTA ŞERİDİ
   ========================================================================== */
.cta{ position:relative; overflow:hidden; background:var(--ink-2); border-block:1px solid var(--line) }
.cta__in{ display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap }
.cta h2{ max-width:18ch }
.cta__rake{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(114deg, transparent 0 40px, rgba(199,154,75,.09) 40px 41px, transparent 41px 84px);
  mask-image:linear-gradient(100deg, transparent 40%, #000 95%);
}

/* ==========================================================================
   FORM
   ========================================================================== */
.form{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr }
.field{ display:flex; flex-direction:column; gap:.5rem }
.field--full{ grid-column:1/-1 }
.field label{ font-family:var(--data); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-mute) }
.field input,.field select,.field textarea{
  background:var(--ink-2); border:1px solid var(--line); color:var(--paper);
  padding:.85rem 1rem; font-family:var(--body); font-size:.96rem; outline:none;
  transition:border-color .25s var(--ease);
}
.field textarea{ min-height:140px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold) }
.form__note{ grid-column:1/-1; font-size:.82rem; color:var(--paper-mute) }
@media (max-width:640px){ .form{ grid-template-columns:1fr } }

/* İletişim kartları */
.contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line) }
.contact div{ background:var(--ink-2); padding:clamp(24px,2.6vw,34px) }
.contact dt{ font-family:var(--data); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem }
.contact dd{ margin:0; font-size:1rem; line-height:1.55 }
.contact a:hover{ color:var(--gold-hi) }

.map{ border:1px solid var(--line); filter:grayscale(1) invert(.92) contrast(.86); width:100%; height:380px }

/* ==========================================================================
   ALT BİLGİ
   ========================================================================== */
.footer{ background:var(--ink-2); border-top:1px solid var(--line); padding-block:clamp(48px,5vw,72px) 0 }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(28px,3vw,48px) }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr } }
.footer img{ height:78px; width:auto; margin-bottom:1.3rem }
.footer h4{ font-size:.72rem; font-family:var(--data); font-weight:600; letter-spacing:.2em; color:var(--gold); margin-bottom:1.2rem; font-stretch:100% }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem }
.footer a{ color:var(--paper-dim); font-size:.92rem; transition:color .22s }
.footer a:hover{ color:var(--gold-hi) }
.footer p{ color:var(--paper-mute); font-size:.9rem }
.footer__bar{
  margin-top:clamp(40px,4vw,60px); border-top:1px solid var(--line); padding-block:1.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--data); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-mute);
}

/* Uyarı satırı kendi hizasında */
.footer__legal{
  margin:clamp(36px,4vw,56px) 0 0; padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-family:var(--data); font-size:.65rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-mute); max-width:78ch;
}

/* Sayt tasarımı kredisi */
.credit{
  display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;
  letter-spacing:.1em; text-transform:none;
}
/* kuş işareti maske olarak: metin rengini alır, kutu yok */
.credit__badge{
  flex:none; width:26px; height:17px; align-self:center;
  background-color:currentColor;
  -webkit-mask:url(../marka/tezweb-mark.png) center / contain no-repeat;
          mask:url(../marka/tezweb-mark.png) center / contain no-repeat;
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.credit__badge:hover{ background-color:var(--gold-hi); transform:translateY(-2px) }
.credit__by{ white-space:nowrap }
.credit strong{ color:var(--paper-dim); font-weight:600; letter-spacing:.06em }
.credit__sep{ width:1px; height:12px; background:var(--line); flex:none }
.credit a{ color:inherit; transition:color .22s var(--ease) }
.credit a:hover{ color:var(--gold-hi) }

.footer__bar{ align-items:center }
@media (max-width:700px){
  .footer__bar{ gap:1.1rem }
  .credit{ gap:.55rem }
  .credit__sep{ display:none }
}



/* ==========================================================================
   HAVA SAVUNMA / KARŞI-İHA
   ========================================================================== */
.radar{ background:var(--ink-2); border-block:1px solid var(--line) }
.radar__wide{ margin:0; border:1px solid var(--line); overflow:hidden; background:var(--ink) }
.radar__wide img{ width:100%; height:auto; display:block }
.radar__wide figcaption{
  font-family:var(--data); font-size:.66rem; letter-spacing:.12em; color:var(--paper-mute);
  padding:.95rem 1.2rem; border-top:1px solid var(--line);
}
.radar__list{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.radar__list li{
  font-family:var(--data); font-size:.66rem; letter-spacing:.1em;
  border:1px solid var(--line); border-radius:999px; padding:.48rem .9rem; color:var(--paper-dim);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.radar__list li:hover{ border-color:var(--gold); color:var(--gold-hi) }

.radar__spec{ margin:1.8rem 0 0; border-top:1px solid var(--line) }
.radar__spec > div{ padding:1.15rem 0; border-bottom:1px solid var(--line-soft) }
.radar__spec dt{
  font-family:var(--data); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.5rem;
}
.radar__spec dd{ margin:0; color:var(--paper-dim); font-size:.95rem }

/* dar ekranda şema okunabilir kalsın: kendi içinde yatay kaysın */
@media (max-width:760px){
  .radar__wide{ overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin }
  .radar__wide img{ min-width:720px }
  .radar__wide figcaption{ position:sticky; left:0; min-width:0 }
  .radar__wide::-webkit-scrollbar{ height:5px }
  .radar__wide::-webkit-scrollbar-thumb{ background:var(--line) }
}


/* ==========================================================================
   KATALOGLAR
   ========================================================================== */
.books{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line) }
@media (max-width:860px){ .books{ grid-template-columns:1fr } }

.book{ background:var(--ink-2); display:flex; flex-direction:column }
.book__cover{
  position:relative; display:block; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 30%, #171F28 0%, var(--ink) 70%);
  border-bottom:1px solid var(--line);
}
.book__cover img{
  width:100%; height:100%; display:block;
  aspect-ratio:16/10; object-fit:cover; object-position:center;
  transition:transform .6s var(--ease), filter .45s var(--ease);
  filter:brightness(.92);
}
.book__cover{ aspect-ratio:16/10 }
.book__cover:hover img{ transform:scale(1.035); filter:brightness(1) }
.book__open{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  font-family:var(--data); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:#0A0D11; background:linear-gradient(100deg,var(--gold-hi),var(--gold));
  padding:.78rem 1.3rem; opacity:0; transition:opacity .35s var(--ease), translate .35s var(--ease);
  translate:-50% -42%; white-space:nowrap;
}
.book__cover:hover .book__open, .book__cover:focus-visible .book__open{ opacity:1; translate:-50% -50% }

.book__body{ padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; flex:1 }
.book__no{ font-family:var(--data); font-size:.66rem; letter-spacing:.2em; color:var(--gold-deep) }
.book h2{ font-size:clamp(1.3rem,2vw,1.75rem); margin:1rem 0 .8rem }
.book__body > p{ color:var(--paper-dim); font-size:.96rem; margin:0 }

.book__meta{
  display:flex; gap:clamp(20px,3vw,42px); flex-wrap:wrap;
  margin:1.8rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line-soft);
}
.book__meta div{ margin:0 }
.book__meta dt{ font-family:var(--data); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-mute) }
.book__meta dd{ margin:.45rem 0 0; font-family:var(--display); font-stretch:112%; font-weight:600; font-size:1.05rem; color:#EDF1F5 }

.book__cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:auto; padding-top:1.9rem }

/* ==========================================================================
   GİRİŞ ANİMASYONU
   ========================================================================== */
[data-rise],[data-rv]{
  opacity:0;
  transform:translate3d(var(--rv-x,0), var(--rv-y,22px), 0);
  transition:opacity .78s var(--ease), transform .78s var(--ease);
  will-change:opacity, transform;
}
[data-rise].is-in,[data-rv].is-in{ opacity:1; transform:none }

/* hero başlığı: satırlar maskeden yukarı çıkar */
.stage__head .ln{ display:block; overflow:hidden; padding-bottom:.06em }
.stage__head .ln i{
  display:block; font-style:inherit;
  transform:translateY(112%);
  animation:line-up .95s var(--ease) forwards;
}
@keyframes line-up{ to{ transform:none } }

@media (prefers-reduced-motion:reduce){
  [data-rise],[data-rv]{ opacity:1; transform:none; transition:none }
  .stage__head .ln i{ transform:none; animation:none }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}