/* ==========================================================================
   PINARREX — Ana sayfa stil katmani
   Marka: lacivert #00103F · turuncu #EC6503 (logo ve katalogdan orneklendi)

   Renkler semantik token olarak tanimli. Bir bolumu acik zemine cevirmek icin
   section'a .sec--light eklemek yeterli; icindeki her sey kendini ayarlar.
   ========================================================================== */

:root{
  /* Marka ------------------------------------------------------------- */
  --navy-900:#00103F;
  --navy-850:#04174E;
  --navy-800:#0A2160;
  --orange:#EC6503;
  --orange-soft:#FF8A2B;
  --paper:#F4F2ED;
  --paper-2:#FAF9F6;

  /* Semantik (koyu zemin varsayilan) ---------------------------------- */
  --bg:var(--navy-900);
  --fg:#F5F3EF;
  --fg-2:#C3CCDF;
  --fg-3:#6E7C99;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.075);
  --surface:var(--navy-850);

  /* Olcu ------------------------------------------------------------- */
  --container:1560px;
  --gutter:clamp(18px,4.2vw,56px);
  --frame-pad:clamp(20px,3vw,54px);   /* video cercevesinin ic boslugu */
  --header-h:clamp(92px,8.6vw,122px);

  --r-sm:14px;
  --r-md:32px;
  --r-lg:60px;

  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;

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

/* Acik zemin bolumleri ------------------------------------------------- */
.sec--light{
  --bg:var(--paper);
  --fg:var(--navy-900);
  --fg-2:#4E5A72;
  --fg-3:#8A94A8;
  --line:rgba(0,16,63,.14);
  --line-soft:rgba(0,16,63,.055);
  --surface:#FFFFFF;
}
.sec--light-2{ --bg:var(--paper-2) }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding tam header yuksekligi kadardi; menuden bir bolume atlayinca
   baslik header'in dibine yapisiyordu. Ustune nefes payi eklendi. */
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + clamp(18px,3vh,40px));
}
body{
  background:var(--navy-900);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* --------------------------------------------------------------------------
   Ortak yardimcilar
   -------------------------------------------------------------------------- */
/* Icerik genisligi: yan bosluk header'inkiyle ayni olacak sekilde
   (gutter + frame-pad). Ekran genisleyince ortalaniyor. */
.wrap{
  width:100%;max-width:calc(var(--container) + 2 * var(--frame-pad));
  margin:0 auto;padding-inline:var(--frame-pad);
  position:relative;z-index:2;
}

.sec{position:relative;overflow:hidden;background:var(--bg);color:var(--fg);padding:clamp(76px,11vh,148px) var(--gutter)}

/* Bolumler arasi gecis keskin: gradyanli yumusatma amator duruyordu,
   zemin degisimi net bir cizgiyle yapiliyor. */

/* Izgara motifi — yalnizca hero'da tam, asagida yuvarlak maske icinde silik */
.grid-lines{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:clamp(52px,6vw,92px) clamp(52px,6vw,92px);
}
.orb{
  position:absolute;z-index:0;pointer-events:none;
  width:min(76vw,760px);aspect-ratio:1;border-radius:50%;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:clamp(44px,5vw,72px) clamp(44px,5vw,72px);
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 68%);
          mask-image:radial-gradient(circle,#000 30%,transparent 68%);
  opacity:.9;
}

/* Bolum basliklarinin ustundeki kucuk etiketler kaldirildi; yerine
   sessiz bir isaret cizgisi var. Etiket metinleri her temada tekrarlanan
   kalip gibi duruyordu. */
.rule{display:block;width:42px;height:2px;background:var(--orange);border-radius:2px}

/* --------------------------------------------------------------------------
   Izgara zemini + imlec mercegi (yalnizca Uretim bolumu)
   Izgara bolumun TAMAMINA yayiliyor (hero'daki .grid-lines ile ayni siliklik).
   Imlec uzerindeyken o bolgedeki cizgiler disa itilerek buyuyor: tek ve
   surekli bir kafes, sadece mercegin altinda bombeleniyor.
   Canvas her cihazda duruyor (zemin izgarasi icin); mercek yalnizca gercek
   imlecli cihazlarda devreye giriyor.
   -------------------------------------------------------------------------- */
.mercek{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;
}

h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.02}
.h-xl{font-size:clamp(34px,4.6vw,62px)}
.h-lg{font-size:clamp(28px,3.6vw,48px)}

.lead{color:var(--fg-2);font-size:clamp(15px,1.25vw,17px);line-height:1.7}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:fixed;inset:0 0 auto 0;z-index:80;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  /* Logo ve menu, videonun yuvarlak kosesine binmesin diye cercevenin
     ic boslugu kadar iceride duruyor; slogan da ayni eksende basliyor. */
  padding:0 calc(var(--gutter) + var(--frame-pad));
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
/* Logoyu ve menuyu birbirine baglayan teknik eksen cizgisi.
   Sayfa kaydirilinca header kendi kenarligini aldigi icin kayboluyor. */
.header::after{
  content:'';position:absolute;z-index:-1;
  left:calc(var(--gutter) + var(--frame-pad));
  right:calc(var(--gutter) + var(--frame-pad));
  bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.12) 55%,rgba(255,255,255,.28));
  transition:opacity .35s var(--ease);
}
.header.is-stuck::after,
.is-menu-open .header::after{opacity:0}
.header.is-on-light::after{
  background:linear-gradient(90deg,rgba(0,16,63,.28),rgba(0,16,63,.10) 55%,rgba(0,16,63,.22));
}
/* Koyu bolumlerdeki fotograflar yuksek kontrastli (sari makine, mavi kangal);
   .84 opaklik + 10px bulanikligi asip logonun arkasinda leke gibi goruluyordu.
   Cam etkisi korunuyor, sizma kapaniyor. */
.header.is-stuck{
  background:rgba(0,16,63,.93);
  backdrop-filter:blur(16px) saturate(130%);
  border-bottom-color:rgba(255,255,255,.10);
}
.header__logo{position:relative;display:block;line-height:0}
.header__logo img{height:clamp(50px,5.2vw,76px);width:auto;transition:opacity .35s var(--ease)}
.header__logo img + img{position:absolute;left:0;top:0;opacity:0}
.header.is-on-light .header__logo img{opacity:0}
.header.is-on-light .header__logo img + img{opacity:1}

/* Acik zemin uzerindeki header */
.header.is-on-light .nav-inline a{color:#3C4863}
.header.is-on-light .nav-inline a:hover{color:var(--navy-900)}
.header.is-on-light .header__divider{background:rgba(0,16,63,.16)}
.header.is-on-light .lang{color:#7C879C}
.header.is-on-light .lang b{color:var(--navy-900)}
.header.is-on-light .burger i{background:var(--navy-900)}
.header.is-on-light .burger i:nth-child(2){background:var(--orange)}
.header.is-on-light.is-stuck{
  background:rgba(244,242,237,.86);
  border-bottom-color:rgba(0,16,63,.12);
}
/* Burada once "menu aciksa header koyu zemin uzerindedir" varsayimiyla logo,
   burger ve menu yazilari ACIK varyanta zorlanıyordu. Ama header'i koyuya ceviren
   bir kural yok: acik bolumdeyken zemin `.is-on-light.is-stuck` ile krem kaliyor,
   uzerine beyaz logo binince logo kayboluyordu. Zorlama kaldirildi — header acik
   zeminde kendi koyu varyantinda (koyu logo, koyu burger) kaliyor. */

.header__right{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}

.nav-inline{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav-inline a{
  font-size:clamp(15px,1.06vw,17px);font-weight:500;letter-spacing:.01em;
  color:#D3DAE9;position:relative;padding:8px 0;transition:color .25s var(--ease);
}
.nav-inline a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--orange);
  transition:width .3s var(--ease);
}
.nav-inline a:hover{color:#fff}
.nav-inline a:hover::after{width:100%}

.header__divider{width:1px;height:26px;background:rgba(255,255,255,.14)}

.lang{display:flex;align-items:center;gap:6px;font-size:14px;letter-spacing:.06em;color:#8792A8}
.lang b{color:#F5F3EF;font-weight:600}

/* Hamburger — yalnizca cizgiler */
.burger{
  width:40px;height:22px;position:relative;flex:none;
  display:flex;align-items:center;margin-left:4px;
}
.burger i{
  position:absolute;right:0;height:2px;background:#F5F3EF;border-radius:2px;
  transition:transform .45s var(--ease),width .35s var(--ease),opacity .25s var(--ease),background .3s var(--ease);
}
.burger i:nth-child(1){top:2px;width:40px}
.burger i:nth-child(2){top:10px;width:27px;background:var(--orange)}
.burger i:nth-child(3){top:18px;width:40px}
.burger:hover i:nth-child(2){width:40px}
/* Menu acikken header sadeleşsin: logo + kapatma isareti kalsin */
.is-menu-open .nav-inline,
.is-menu-open .header__divider,
.is-menu-open .lang{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}

.is-menu-open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.is-menu-open .burger i:nth-child(2){opacity:0;transform:translateX(12px)}
.is-menu-open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ==========================================================================
   URUNLER MEGA MENUSU
   ========================================================================== */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item .chev{
  display:inline-block;width:7px;height:7px;margin-left:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .3s var(--ease);opacity:.65;
}
.nav-item.is-open .chev{transform:translateY(1px) rotate(-135deg);opacity:1}
.nav-item.is-open > a{color:#fff}
.header.is-on-light .nav-item.is-open > a{color:var(--navy-900)}

.mega{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:79;
  background:#FFFFFF;
  border-top:1px solid rgba(0,16,63,.10);
  box-shadow:0 34px 90px rgba(0,8,32,.28);
  opacity:0;visibility:hidden;transform:translate3d(0,-12px,0);
  transition:opacity .28s var(--ease),transform .34s var(--ease),visibility .34s;
}
.mega.is-open{opacity:1;visibility:visible;transform:translate3d(0,0,0)}

.mega__inner{padding-block:clamp(30px,4vh,50px) clamp(30px,4vh,50px)}
.mega__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,2.8vh,38px) clamp(26px,3vw,56px);
}
.mega__col > a{
  display:block;
  font-family:var(--f-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(16px,1.15vw,19px);color:var(--navy-900);
  padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid rgba(0,16,63,.14);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.mega__col > a:hover{color:var(--orange);border-bottom-color:rgba(236,101,3,.55)}
.mega__col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.mega__col li a{
  font-size:14px;color:#5A6780;display:inline-block;
  transition:color .2s var(--ease),transform .28s var(--ease);
}
.mega__col li a:hover{color:var(--navy-900);transform:translateX(5px)}

/* 8. hucre: katalog karti */
.mega__promo{
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:clamp(18px,1.6vw,26px);
  border:1px solid rgba(0,16,63,.13);border-radius:var(--r-sm);
  background:var(--paper);
}
.mega__promo b{
  font-family:var(--f-display);font-weight:700;font-size:clamp(16px,1.15vw,19px);
  letter-spacing:-.015em;color:var(--navy-900);
}
.mega__promo span{font-size:13.5px;color:#5A6780;line-height:1.55}

/* Beyaz panelde yuvarlak ok butonu koyu varyanta geciyor */
.mega .circle-cta__btn{border-color:rgba(0,16,63,.28)}
.mega .circle-cta__arrows svg{stroke:var(--navy-900)}
.mega .circle-cta__label{color:var(--navy-900)}
.mega .circle-cta:hover .circle-cta__btn{border-color:var(--orange)}
.mega .circle-cta:hover .circle-cta__arrows svg{stroke:#12142B}

/* Acik zeminli bolumlerde de ayni koyu varyant gerekiyor; temel hâli beyaz
   kenarlik + beyaz ok oldugu icin acik zeminde goze gorunmuyordu. */
.sec--light .circle-cta__btn{border-color:rgba(0,16,63,.26)}
.sec--light .circle-cta__arrows svg{stroke:var(--navy-900)}
.sec--light .circle-cta__label{color:var(--navy-900)}
.sec--light .circle-cta__label small{color:var(--fg-3)}
.sec--light .circle-cta:hover .circle-cta__btn{border-color:var(--orange)}
.sec--light .circle-cta:hover .circle-cta__arrows svg{stroke:#12142B}

@media (max-width:1180px){
  .mega__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ==========================================================================
   TAM EKRAN MENU
   ========================================================================== */
.menu{
  position:fixed;inset:0;z-index:70;
  background:var(--navy-850);
  display:grid;grid-template-columns:1.12fr .88fr;
  visibility:hidden;
  transform:translate3d(0,-100%,0);
  transition:transform .55s var(--ease),visibility .55s;
  will-change:transform;
}
.is-menu-open .menu{visibility:visible;transform:translate3d(0,0,0)}
.is-menu-open .mega{opacity:0;visibility:hidden}

.menu__main{
  padding:calc(var(--header-h) + clamp(28px,5vh,56px))
          calc(var(--gutter) + var(--frame-pad))
          clamp(28px,5vh,56px);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,5vh,52px);
  position:relative;overflow-y:auto;
}
.menu__col-title{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8792A8;
  margin-bottom:18px;
}
/* Menu tipografisi hem genisligi hem YUKSEKLIGI gozetiyor: min(vw,vh) ile
   alcak laptop ekranlarinda kendiliginden kuculuyor. Daha once yalnizca vw
   vardi ve 900px yuksekligin altinda menu kolonunda scrollbar cikiyordu. */
.menu__list{list-style:none;display:flex;flex-direction:column;gap:clamp(4px,1.4vh,16px)}
.menu__list > li > a,
.menu__ac{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(19px,min(5.6vw,3.6vh),50px);line-height:1.1;
  color:#A9B6CE;display:inline-flex;align-items:center;gap:14px;
  transition:color .3s var(--ease),transform .4s var(--ease);
}
/* Hover yalnizca gercek imleci olan cihazlarda; dokunmatikte tap sonrasi
   takili kaliyor. "Ürünler" katlama butonunda kaydirma YOK: tiklandiktan sonra
   imlec uzerinde kaldigi icin madde digerlerinden 12px kaymis goruluyordu. */
@media (hover:hover){
  .menu__list > li > a:hover{color:#fff;transform:translateX(12px)}
}
.menu__ac:hover{color:#fff}

/* "Ürünler" katlanir baslik — gorunusu diger maddelerle ayni, ogesi buton */
.menu__ac{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--f-display);text-align:left;
}
.menu__ac .chev{
  width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-25%);
  transition:transform .35s var(--ease);
}
.menu__ac[aria-expanded="true"]{color:#fff}
.menu__ac[aria-expanded="true"] .chev{transform:rotate(-135deg) translateY(-25%)}

/* Menu acilis girisi JS tarafinda `element.animate()` ile yapiliyor
   (bkz. site.js, setMenu). Onceden burada `.menu__giris` sinifi vardi ama
   sinif yontemi sayfa yenilendikten sonraki ILK acilista calismiyordu:
   baslangic ve bitis durumu ayni karede yazilinca tarayici gecisi atliyordu.
   Web Animations API cascade'den ve kare siralamasindan bagimsiz. */

.menu__alt{list-style:none}
.menu__alt a{
  color:#A9B6CE;display:inline-flex;align-items:center;gap:14px;
  transition:color .3s var(--ease),transform .4s var(--ease);
}
@media (hover:hover){
  .menu__alt a:hover{color:#fff;transform:translateX(12px)}
}
/* Sira numarasi yalnizca ustune gelince beliriyor */
.menu__alt a span{
  font-family:var(--f-body);font-size:12px;font-weight:500;color:var(--orange);
  opacity:0;transition:opacity .3s var(--ease);
}
.menu__alt a:hover span{opacity:1}

/* --- MASAUSTU (>1080px): ana menu header'da; burada sadece urun gruplari,
       eskisi gibi acik ve buyuk tipografiyle. --- */
@media (min-width:1081px){
  .menu__ana,
  .menu__ac,
  .menu__baslik--mobil{display:none}
  .menu__alt a{
    font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
    font-size:clamp(22px,min(3.5vw,4.1vh),54px);line-height:1.08;
  }
  .menu__alt li + li{margin-top:clamp(4px,1.3vh,22px)}
  /* 720p masaustunde 7 grup + eylemler ekrana sigmiyordu */
  .menu__main{
    gap:clamp(14px,3.6vh,52px);
    padding-top:calc(var(--header-h) + clamp(10px,2.4vh,56px));
    padding-bottom:clamp(14px,3vh,56px);
  }
}

/* --- MOBIL (<=1080px): yatay menu gizli, ust menunun tek erisimi burasi.
       Urun gruplari "Ürünler" altinda katlanmis duruyor. --- */
@media (max-width:1080px){
  .menu__baslik--masaustu{display:none}
  /* Ana menu + acilmis urun gruplari birlikte daha uzun; dikey bosluklar
     kisaliyor ki menu kolonunda scrollbar cikmasin. */
  .menu__main{
    gap:clamp(10px,2.4vh,38px);
    /* Menu icerigi header'in tamamini degil logoyu gecmesi yeterli; 640px
       yuksekliginde tam header payi ekranin %15'ini yiyordu. */
    padding-top:calc(var(--header-h) * .82 + clamp(6px,1.4vh,28px));
    padding-bottom:clamp(10px,2vh,38px);
  }
  .menu__list{gap:clamp(0px,.7vh,12px)}
  .menu__alt{
    overflow:hidden;opacity:0;
    max-height:0;transition:max-height .45s var(--ease),opacity .35s var(--ease);
  }
  .menu__alt.is-open{opacity:1}
  .menu__alt li{margin-top:clamp(3px,.85vh,12px)}
  .menu__alt li:first-child{margin-top:clamp(5px,1.1vh,16px)}
  .menu__alt a{
    font-family:var(--f-body);font-weight:500;letter-spacing:0;
    font-size:clamp(13px,min(4vw,1.9vh),19px);line-height:1.3;
    color:#8E9CB6;padding-left:22px;position:relative;display:inline-block;
  }
  @media (hover:hover){ .menu__alt a:hover{transform:translateX(6px)} }
  .menu__alt a::before{
    content:'';position:absolute;left:0;top:.62em;
    width:10px;height:1px;background:currentColor;opacity:.5;
  }
  .menu__alt a span{display:none}
}

.menu__visual{position:relative;overflow:hidden;background:var(--navy-900)}
.menu__visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s var(--ease);
}
.menu__visual img.is-active{opacity:1}
.menu__visual::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(4,23,78,1) 0%,
      rgba(4,23,78,.94) 12%,
      rgba(4,23,78,.74) 28%,
      rgba(4,23,78,.44) 48%,
      rgba(4,23,78,.18) 68%,
      rgba(4,23,78,.04) 86%,
      rgba(4,23,78,0) 100%),
    linear-gradient(180deg,rgba(4,23,78,.34) 0%,rgba(4,23,78,0) 26%,rgba(4,23,78,0) 74%,rgba(4,23,78,.34) 100%);
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* Video ust ve yanlardan tam kenara oturuyor; logo ve menu dogrudan
   slaytin uzerinde duruyor. Yuvarlak kose yalnizca altta — ust kosede
   header ile cakisma olmuyor. */
.hero{
  position:relative;
  height:100svh;min-height:600px;
  padding:0;
  display:flex;flex-direction:column;
  /* alttaki yuvarlak kose, bir sonraki acik bolumun rengini gosteriyor */
  background:var(--paper);
}
.hero__frame{
  position:relative;flex:1;overflow:hidden;
  /* sakin maske: ustte hafif, altta biraz daha yuvarlak */
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--navy-800);
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);
}
.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,16,63,.72) 0%,rgba(0,16,63,.26) 16%,rgba(0,16,63,.12) 30%,rgba(0,16,63,.58) 68%,rgba(0,16,63,.93) 100%),
    linear-gradient(90deg,rgba(0,16,63,.86) 0%,rgba(0,16,63,.40) 40%,rgba(0,16,63,0) 74%);
}
.hero__frame .grid-lines{
  z-index:3;
  -webkit-mask-image:radial-gradient(ellipse 76% 60% at 50% 45%,#000 16%,transparent 74%);
          mask-image:radial-gradient(ellipse 76% 60% at 50% 45%,#000 16%,transparent 74%);
}

.hero__content{
  position:absolute;z-index:5;
  left:calc(var(--gutter) + var(--frame-pad));right:calc(var(--gutter) + var(--frame-pad));
  bottom:clamp(56px,10vh,104px);
  max-width:980px;
}
.hero__slogan{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(40px,7vw,94px);line-height:.98;letter-spacing:-.035em;
  margin-bottom:22px;
}
.hero__slogan span{display:inline-block}
.hero__slogan em{font-style:normal;display:inline-block;color:var(--orange)}

/* Slogana yavas bir gradyan gecisi. Beyaz kendi tonlari icinde, turuncu
   kendi tonlari icinde dolasiyor; ikisi farkli surede oldugu icin zamanla
   birbirinden ayriliyor ve dongu belli olmuyor.
   Gradyan iki tam periyot iceriyor (0-50-100), background-size 200% ve
   position 0->100 arasi tam bir periyot kaydiriyor: eksiz donuyor. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__slogan span,
  .hero__slogan em{
    background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:sloganAkis 9s linear infinite;
    /* background-clip:text yaziyi ARKA PLAN KUTUSUNA kirpiyor. line-height .98
       oldugu icin kutu taban cizgisinde bitiyor ve g / ğ / y / ç harflerinin
       inen uclari kesiliyordu. Kutuyu asagi uzatip ayni kadar negatif margin
       ile yerlesimi sabit tutuyoruz. */
    padding-bottom:.16em;
    margin-bottom:-.16em;
  }
  /* Parlama bandi DAR ve keskin kenarli. Onceden 25'er adimlik yumusak bir
     dalgaydi: butun yazi ayni anda hafifce ton degistiriyordu, goz bunu
     "hareket" olarak okumuyordu. Simdi ince bir isik seridi yazinin uzerinden
     geciyor (metal parlamasi), hareket net goruluyor.
     Dongu eksiz kalsin diye desen 200% genisligin icinde TAM IKI KEZ
     tekrarliyor: 0 / 50 / 100 ayni renk, tepe noktalari 25 ve 75'te. */
  .hero__slogan span{
    background-image:linear-gradient(104deg,
      #CBD7EE 0%,  #CBD7EE 17%, #FFFFFF 25%, #CBD7EE 33%,
      #CBD7EE 50%, #CBD7EE 67%, #FFFFFF 75%, #CBD7EE 83%,
      #CBD7EE 100%);
    animation-duration:7s;
  }
  .hero__slogan em{
    background-image:linear-gradient(104deg,
      #EC6503 0%,  #EC6503 17%, #FFC38C 25%, #EC6503 33%,
      #EC6503 50%, #EC6503 67%, #FFC38C 75%, #EC6503 83%,
      #EC6503 100%);
    animation-duration:9.5s;
  }
}
@keyframes sloganAkis{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}
.hero__lead{max-width:560px;font-size:clamp(15px,1.3vw,17.5px);line-height:1.66;color:#DCE2EE}

/* Yuvarlak yon butonu --------------------------------------------------- */
.circle-cta{display:inline-flex;align-items:center;gap:18px;margin-top:38px}
.circle-cta__btn{
  position:relative;flex:none;
  width:clamp(62px,6vw,80px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.34);
  display:grid;place-items:center;overflow:hidden;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.circle-cta__btn::before{ /* iceri dogru buyuyen turuncu dolgu */
  content:'';position:absolute;inset:0;border-radius:50%;
  background:var(--orange);
  transform:scale(0);transition:transform .5s var(--ease);
}
.circle-cta__ring{ /* kenarda donen kesik halka */
  position:absolute;inset:-1px;border-radius:50%;
  border:1px dashed rgba(236,101,3,.55);
  opacity:0;transition:opacity .4s var(--ease);
  animation:ringSpin 9s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.circle-cta__arrows{position:relative;z-index:2;width:22px;height:22px;overflow:hidden}
.circle-cta__arrows svg{
  position:absolute;left:0;top:0;width:22px;height:22px;
  fill:none;stroke:#F5F3EF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease),stroke .4s var(--ease);
}
.circle-cta__arrows svg:nth-child(2){transform:translateY(-120%)}
.circle-cta:hover .circle-cta__btn{border-color:var(--orange)}
.circle-cta:hover .circle-cta__btn::before{transform:scale(1)}
.circle-cta:hover .circle-cta__ring{opacity:1}
.circle-cta:hover .circle-cta__arrows svg:nth-child(1){transform:translateY(120%)}
.circle-cta:hover .circle-cta__arrows svg:nth-child(2){transform:translateY(0)}
.circle-cta:hover .circle-cta__arrows svg{stroke:#12142B}
.circle-cta__label{
  font-family:var(--f-display);font-weight:600;font-size:clamp(14px,1.15vw,16px);
  letter-spacing:.01em;color:#F5F3EF;
}
.circle-cta__label small{
  display:block;font-family:var(--f-body);font-weight:400;font-size:12.5px;
  color:#93A0BA;margin-top:3px;letter-spacing:0;
}

/* Genel buton ------------------------------------------------------------ */
/* Kucuk ve yatay ok varyanti (menu icindeki katalog baglantisi) */
.menu__actions{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,56px) clamp(28px,4vw,72px)}
.circle-cta--sm{margin-top:0}
.circle-cta--sm .circle-cta__btn{width:clamp(50px,3.6vw,62px)}
.circle-cta--sm .circle-cta__arrows,
.circle-cta--sm .circle-cta__arrows svg{width:19px;height:19px}
.circle-cta--sm .circle-cta__label{font-size:clamp(15px,1.3vw,18px)}

/* Mobil menude yer kazanmak icin "Tüm ürünler" cikariliyor (alt menude yedi
   grubun hepsi zaten var); "Online katalog" ayni ok ikonuyla tek satir.
   DIKKAT: bu blok .circle-cta tanimlarindan SONRA olmak zorunda — daha yukarida
   yazildiginda .circle-cta{display:inline-flex} display:none'i eziyor. */
@media (max-width:1080px){
  .circle-cta--urunler{display:none}
  .menu__actions .circle-cta--katalog{gap:12px}
  .menu__actions .circle-cta--katalog .circle-cta__btn{width:38px}
  .menu__actions .circle-cta--katalog .circle-cta__arrows,
  .menu__actions .circle-cta--katalog .circle-cta__arrows svg{width:15px;height:15px}
  .menu__actions .circle-cta--katalog .circle-cta__label{font-size:15px;font-weight:600}
  .menu__actions .circle-cta--katalog .circle-cta__label small{display:none}
}

/* Kisa telefon ekranlari (640-700px): ana menu + acilmis 7 grup + iki eylem
   butonu birlikte sigmiyordu. Butonlar kompaktlasiyor, alt aciklamalari
   dusuyor. Normal boydaki telefonlar bundan etkilenmiyor. */
@media (max-width:1080px) and (max-height:700px){
  .menu__actions{gap:13px 24px}
  .circle-cta--sm .circle-cta__btn{width:42px}
  .circle-cta--sm .circle-cta__arrows,
  .circle-cta--sm .circle-cta__arrows svg{width:16px;height:16px}
  .circle-cta--sm .circle-cta__label small{display:none}
  .menu__col-title{margin-bottom:7px;font-size:10px}
  .menu__list > li > a,
  .menu__ac{font-size:clamp(17px,min(5.2vw,3.1vh),50px)}
  .menu__alt li{margin-top:3px}
  .menu__alt li:first-child{margin-top:5px}
}

.circle-cta--right .circle-cta__arrows svg:nth-child(2){transform:translateX(-120%)}
.circle-cta--right:hover .circle-cta__arrows svg:nth-child(1){transform:translateX(120%)}
.circle-cta--right:hover .circle-cta__arrows svg:nth-child(2){transform:translateX(0)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:2px;
  font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn i{font-style:normal;transition:transform .3s var(--ease)}
.btn:hover i{transform:translateX(4px)}
.btn--primary{background:var(--orange);color:#12142B}
.btn--primary:hover{background:var(--orange-soft)}
.btn--ghost{border:1px solid var(--line);color:var(--fg)}
.btn--ghost:hover{border-color:var(--fg);background:rgba(127,127,127,.08)}

/* ==========================================================================
   URUN GRUPLARI — scroll ile sabitlenen bolum
   ========================================================================== */
.cats{position:relative;height:380vh;background:var(--bg);color:var(--fg)}
.cats__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;
  background:var(--bg);
}
.cats__bg{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(85% 70% at 76% 46%,rgba(18,69,155,.10) 0%,rgba(18,69,155,0) 62%);
}

/* Tam ekrana yayilan 3B sahne — yalnizca kendi kategorisinde gorunur */
.cats__canvas{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  opacity:0;transition:opacity .75s var(--ease);
}
.cats__canvas.is-active{opacity:1}
/* soldaki metnin okunurlugu icin yumusak perde */
.cats__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .75s var(--ease);
  background:linear-gradient(90deg,
    var(--bg) 0%,
    var(--bg) 20%,
    rgba(244,242,237,.94) 32%,
    rgba(244,242,237,.62) 44%,
    rgba(244,242,237,.22) 56%,
    rgba(244,242,237,0) 68%);
}
.cats__scrim.is-active{opacity:1}

.cats__inner{
  position:relative;z-index:3;width:100%;
  max-width:calc(var(--container) + 2 * (var(--gutter) + var(--frame-pad)));
  margin:0 auto;
  display:grid;grid-template-columns:minmax(300px,1fr) minmax(320px,1fr);
  align-items:center;gap:clamp(28px,5vw,80px);
  padding:0 calc(var(--gutter) + var(--frame-pad));
}

.cats__label{
  position:absolute;top:clamp(92px,12vh,128px);left:50%;transform:translateX(-50%);
  width:100%;max-width:calc(var(--container) + 2 * (var(--gutter) + var(--frame-pad)));
  padding:0 calc(var(--gutter) + var(--frame-pad));z-index:4;
}

/* Scroll ile parca parca acilan metin */
.beat{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.beat.on{opacity:1;transform:none}

.cat-count{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}
.cat-count b{font-family:var(--f-display);font-size:clamp(34px,2.9vw,44px);font-weight:700;color:var(--orange);line-height:1;letter-spacing:-.03em}
.cat-count span{font-size:14px;color:var(--fg-3);letter-spacing:.06em}
.cat-title{font-size:clamp(32px,4.5vw,64px);line-height:1.02;margin-bottom:22px}
.cat-desc{font-size:clamp(16px,1.35vw,19.5px);line-height:1.62;color:var(--fg-2);max-width:32em;margin-bottom:32px}
.cat-specs{display:flex;gap:clamp(18px,2.6vw,38px);flex-wrap:wrap;margin-bottom:30px}
.cat-specs div{font-size:11.5px;color:var(--fg-3);letter-spacing:.06em;text-transform:uppercase}
.cat-specs b{
  display:block;font-family:var(--f-display);font-size:clamp(19px,1.6vw,23px);font-weight:600;
  letter-spacing:-.02em;color:var(--fg);text-transform:none;margin-bottom:4px;
}
.cat-link{
  display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  color:var(--orange);border-bottom:1px solid rgba(236,101,3,.34);padding-bottom:5px;
}
.cat-link:hover{border-bottom-color:var(--orange)}

.cat-stage{
  position:relative;aspect-ratio:4/3;width:100%;
  border-radius:var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm);
  overflow:hidden;background:var(--navy-800);
  box-shadow:0 24px 60px rgba(0,16,63,.18);
  opacity:1;transition:opacity .6s var(--ease);
}
.cat-stage.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.cat-stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .6s var(--ease),transform 1.2s var(--ease);
}
.cat-stage img.is-active{opacity:1;transform:scale(1)}
.cat-stage::after{
  content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;
  border:1px solid rgba(255,255,255,.14);pointer-events:none;
}

/* "Gercek zamanli 3B" rozeti — tam ekran sahne aktifken sag altta */
.stage-tag{
  position:absolute;z-index:4;right:clamp(18px,3vw,44px);bottom:clamp(20px,4vh,40px);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);
  border:1px solid var(--line);padding:8px 14px;border-radius:99px;
  background:rgba(255,255,255,.62);
  opacity:0;transition:opacity .5s var(--ease);
}
.stage-tag.is-active{opacity:1}

.cats__dots{
  position:absolute;z-index:4;right:clamp(14px,2.2vw,30px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.cats__dots i{
  width:5px;height:5px;border-radius:50%;background:var(--line);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.cats__dots i.is-active{background:var(--orange);transform:scale(1.9)}
.cats__dots .rail{width:1px;height:18px;background:var(--line-soft)}

.cats__progress{position:absolute;left:0;bottom:0;height:2px;background:var(--orange);width:0;z-index:5}

/* Mobil kart listesi (masaustunde gizli) */
.cats-mobile{display:none;background:var(--bg);color:var(--fg)}
.cats-mobile__baslik{
  font-size:clamp(26px,7vw,34px);line-height:1.06;
  margin:20px 0 clamp(22px,3.4vh,34px);
}
/* Yatay karusel — CSS scroll-snap, kutuphane yok.
   Kartlar %88 genislikte: bir sonrakinin kenari gorundugu icin kaydirilabilir
   oldugu kendiliginden anlasiliyor. */
.cats-mobile__sirit{
  display:flex;gap:16px;
  overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  /* kartlarin golgesi/kenarligi kirpilmasin */
  padding-bottom:4px;
}
.cats-mobile__sirit::-webkit-scrollbar{display:none}
.cats-mobile__sirit .cat-card{
  flex:0 0 88%;margin-bottom:0;
  scroll-snap-align:start;
  /* `mandatory` tek basina hizli savurmayi durdurmuyor: momentum 2-3 karti
     birden gecip en yakin noktaya yapisiyordu. `always` her kartta durmaya
     zorluyor, yani bir hamle = bir kart. */
  scroll-snap-stop:always;
}
/* Son kartin da sola oturabilmesi icin kuyrukta bosluk; yoksa %12 eksik
   kaliyor ve son kart hicbir zaman tam hizalanmiyor. */
.cats-mobile__sirit::after{content:'';flex:0 0 12%}
.cats-mobile__noktalar{
  display:flex;gap:8px;align-items:center;
  margin-top:clamp(20px,3vh,30px);
}
.cats-mobile__noktalar button{
  width:8px;height:8px;padding:0;border-radius:50%;
  background:var(--fg-3);opacity:.45;
  transition:width .35s var(--ease),background .35s var(--ease),opacity .35s var(--ease);
}
.cats-mobile__noktalar button.is-active{
  width:26px;border-radius:4px;background:var(--orange);opacity:1;
}
.cat-card{margin-bottom:clamp(44px,7vh,64px)}
.cat-card__media{
  position:relative;aspect-ratio:3/2;overflow:hidden;margin-bottom:22px;
  border-radius:var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm);
  border:1px solid var(--line);
}
.cat-card__media img{width:100%;height:100%;object-fit:cover}
.cat-card .cat-title{font-size:clamp(26px,7vw,34px)}
.cat-card .cat-desc{margin-bottom:18px}

/* ==========================================================================
   UYGULAMA ALANLARI
   ========================================================================== */
.areas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px);
  margin-top:clamp(36px,6vh,60px);
}
.area{position:relative;display:block}
.area__media{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--r-md) var(--r-md) var(--r-sm) var(--r-sm);
  background:var(--navy-800);
}
.area__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.1s var(--ease);
}
.area:hover .area__media img{transform:scale(1.09)}
.area__media::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(0,0,0,.10);
  background:linear-gradient(180deg,rgba(0,16,63,.02) 38%,rgba(0,16,63,.88) 100%);
}
.area__text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2vw,28px)}
.area__text b{
  display:block;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px,1.8vw,26px);line-height:1.1;margin-bottom:8px;color:#F5F3EF;
}
.area__text span{font-size:13.5px;color:#C3CCDF;line-height:1.55;display:block}
.area__no{
  position:absolute;top:clamp(16px,1.8vw,24px);left:clamp(18px,2vw,28px);z-index:2;
  font-family:var(--f-display);font-size:14px;font-weight:600;letter-spacing:.1em;
  color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,16,63,.55);
}

/* ==========================================================================
   URETIM
   ========================================================================== */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
}
.split__media{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r-md) var(--r-md) var(--r-lg) var(--r-lg);
  background:var(--navy-800);
}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(0,0,0,.12);
}
/* Aynalanmis split: metin solda, gorsel sagda. Uretim bolumu gorsel-solda
   oldugu icin Kariyer bolumu ayni duzende tekrar etmesin diye. */
.split--ters .split__media{
  border-radius:var(--r-lg) var(--r-lg) var(--r-md) var(--r-md);
}
.split h2{margin:20px 0 22px}
.split p{color:var(--fg-2);font-size:16px;line-height:1.75;max-width:530px;margin-bottom:16px}

.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);margin-top:36px;border:1px solid var(--line);
}
.facts div{background:var(--bg);padding:22px 18px}
.facts b{display:block;font-family:var(--f-display);font-size:26px;font-weight:700;letter-spacing:-.03em;margin-bottom:5px}
.facts span{font-size:11.5px;color:var(--fg-3);letter-spacing:.05em;text-transform:uppercase}

.prod-strip{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(42px,7vh,76px);
}
.prod-strip .ph{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-md) var(--r-sm) var(--r-md) var(--r-sm);
  border:1px solid var(--line);background:var(--navy-800);
}
.prod-strip img{width:100%;height:100%;object-fit:cover}
.prod-strip figcaption{
  margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
}

/* ==========================================================================
   NEDEN HALOJEN FREE
   ========================================================================== */
.safety__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(22px,3vw,44px);margin-top:clamp(36px,6vh,58px);
}
.safety__card{padding-top:24px;border-top:1px solid var(--line)}
.safety__card i{
  font-style:normal;display:block;font-size:11px;letter-spacing:.18em;
  color:var(--orange);margin-bottom:16px;
}
.safety__card b{
  display:block;font-family:var(--f-display);font-size:21px;font-weight:700;
  letter-spacing:-.02em;margin-bottom:11px;
}
.safety__card p{font-size:14.5px;line-height:1.7;color:var(--fg-2)}

.certs{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(34px,5vh,52px)}
.certs span{
  border:1px solid var(--line);padding:11px 19px;border-radius:99px;
  font-size:12.5px;letter-spacing:.06em;color:var(--fg-2);
}

/* ==========================================================================
   KATALOG CTA
   ========================================================================== */
.cta-band{background:linear-gradient(120deg,var(--navy-800) 0%,var(--navy-900) 58%);overflow:hidden}
.cta-band__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:34px;
}
.cta-band p{color:#BAC4D8;margin-top:16px;max-width:470px;font-size:15.5px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:#000C2E;padding:clamp(56px,8vh,90px) var(--gutter) 30px;border-top:1px solid rgba(255,255,255,.08)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,56px)}
.footer__top h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6E7C99;margin-bottom:18px}
.footer__top ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer__top a,.footer__top li{font-size:14px;color:#BAC4D8;line-height:1.6}
.footer__top a:hover{color:var(--orange)}
.footer__logo img{height:56px;margin-bottom:20px}
.footer__bottom{
  margin-top:clamp(34px,6vh,58px);padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-size:12.5px;color:#6E7C99;
}

.reveal{opacity:0;transform:translateY(22px)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .nav-inline,.header__divider,.mega{display:none}
  .menu{grid-template-columns:1fr}
  .menu__visual{display:none}
}
@media (max-width:860px){
  /* Yan bosluk 38px'ti (390px ekranin ~%20'si iki yandan). Tokenlar
     kisaltildi; header, hero, bolumler ve urun kartlari ayni ikiliyi
     kullandigi icin hepsi birden daraliyor ve ayni eksende hizaliyor. */
  :root{
    --gutter:9px;
    --frame-pad:11px;
  }
  .hero__content{bottom:clamp(48px,8vh,80px)}
  .cats{height:auto}
  .cats__pin{display:none}
  .cats__canvas,.cats__scrim,.stage-tag{display:none}
  .beat{opacity:1;transform:none}
  /* Alt dolgu 0 iken son kartin margin-bottom'u (59px) bolumun disina sizip
     arkadaki body laciverdini bant hâlinde gosteriyordu. Son kartin margin'i
     sifirlandi, bosluk bolumun kendi dolgusuna verildi. */
  .cats-mobile{display:block;padding:clamp(60px,9vh,96px) calc(var(--gutter) + var(--frame-pad))}
  .cat-card:last-child{margin-bottom:0}
  .areas{grid-template-columns:1fr;gap:26px}
  .area__media{aspect-ratio:4/3}
  .split{grid-template-columns:1fr}
  .split__media{aspect-ratio:4/3;order:-1}
  .prod-strip{grid-template-columns:1fr;gap:26px}
  .footer__top{grid-template-columns:1fr 1fr}
  .orb{width:120vw}
}
@media (max-width:520px){
  .footer__top{grid-template-columns:1fr}
  /* Mobilde footer tek sutuna dusunce alt baglantilar alt alta uzuyordu;
     kisa olanlar (Ürünler, Kurumsal) iki sutuna aliniyor. Iletisim bloku
     haric — adres ve e-posta satirlari bolununce okunmuyor. */
  .footer__top ul:not(.footer__iletisim){
    display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;
  }
  .circle-cta{gap:14px}
}

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