/* ==========================================================================
   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)}

/* Açıklamalı görünüm (varsayılan): liste düzeni, ürünler yerine kategorinin kısa açıklaması */
.mega__ac-metin{font-size:14px;line-height:1.6;color:#5A6780;max-width:34ch}
/* Kolonun tamamı hover alanı: başlık turuncu, alt çizgi soldan turuncu çizilir */
.mega--aciklama .mega__col{position:relative;cursor:pointer}
.mega--aciklama .mega__col > a{position:relative}
.mega--aciklama .mega__col > a::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.mega--aciklama .mega__col > a::before{content:'';position:absolute;inset:0 0 -200px 0}   /* tıklama alanı açıklamayı da kapsar */
.mega--aciklama .mega__col:hover > a{color:var(--orange)}
.mega--aciklama .mega__col:hover > a::after{transform:scaleX(1)}

/* Görselli görünüm (Ayarlar → Ürünler menüsü görünümü = Görselli) */
.mega--gorsel .mega__col > a.mega__kart{
  display:flex;flex-direction:column;gap:4px;padding:0;margin:0;border:0;
  font-size:inherit;color:var(--navy-900);
}
.mega__kart-gorsel{display:block;overflow:hidden;aspect-ratio:16/10;margin-bottom:10px;border-radius:var(--r-sm);background:var(--paper)}
.mega__kart-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mega__kart-ad{font-family:var(--f-display);font-weight:700;font-size:clamp(14.5px,1vw,16.5px);letter-spacing:-.01em;line-height:1.3;transition:color .25s var(--ease)}
.mega__kart small{font-size:12.5px;color:#8A94A8}
.mega--gorsel .mega__col > a.mega__kart:hover{color:var(--orange)}
.mega__kart:hover .mega__kart-gorsel img{transform:scale(1.06)}
.mega--gorsel .mega__grid{align-items:start}

/* 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}
/* Kategori hücreleriyle orantılı: kısa kart, başlık kategori başlığı boyunda, küçük ok butonu */
.mega__promo{align-self:start;gap:6px;padding:12px 18px 13px}
.mega__promo b{font-size:clamp(15px,1.05vw,17px)}
.mega__promo span{font-size:13px;line-height:1.5}
.mega .mega__promo .circle-cta{gap:10px;margin-top:2px}
/* Kutunun tamamı katalog linki; üstteki kategori sütununun uzatılmış tıklama alanı (::before) buraya taşmasın */
.mega--aciklama .mega__col{overflow:hidden}
.mega__promo{position:relative;z-index:1;cursor:pointer}
.mega__promo .circle-cta::after{content:'';position:absolute;inset:0}
.mega .mega__promo .circle-cta__btn{width:32px}
.mega .mega__promo .circle-cta__arrows,
.mega .mega__promo .circle-cta__arrows svg{width:15px;height:15px}
.mega .mega__promo .circle-cta__label{font-size:14px}

/* 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:10px;
  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:#fff}
.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:var(--cats-boy,380vh);background:var(--bg);color:var(--fg)}   /* --cats-boy: site.js kategori paylarından hesaplar */
.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}
/* Aynı kanvastaki iki sahne arasında kısa sönme (site.js cekirdekSec) */
.cats__canvas.is-active.is-gecis{opacity:0;transition-duration:.28s}
/* 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;transition-delay:0s;transition-duration:0s}   /* girişte anında: sahne belirirken borular perdesiz görünmesin */
/* 3B'den çıkarken perde, kanvas sönene kadar (.75s) kalsın; yoksa soldaki borular ve
   gradyan geçişte bozuk görünüyordu. Girişte gecikme yok (yukarıdaki kural). */
.cats__scrim:not(.is-active){transition-delay:.7s}

.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 */

.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 :is(img,video){display:block;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}

/* Solda başlık + metin + butonlar · sağda belgeler (başlık, logolar, link) */
.cta-band .cta-actions{margin-top:30px}
@media (min-width:861px){ /* iki sütun: sağ taraf daha geniş, soldan başlar */
  .cta-band__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,6vw,110px)}
}
.bant-belge{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.bant-belge__baslik{font-size:clamp(20px,1.7vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#fff;max-width:none}
.cta-band .bant-belge__metin{margin-top:-14px;max-width:none;font-size:15px;line-height:1.7;color:#BAC4D8}
.bant-belge__logolar{display:flex;align-items:center;margin-top:14px}
.bant-belge__logolar img{
  height:clamp(44px,3.6vw,56px);width:auto;max-width:110px;object-fit:contain;box-sizing:content-box;padding-inline:clamp(22px,2.4vw,34px);
  filter:brightness(0) invert(1);opacity:.8;
}
.bant-belge__logolar img:first-child{padding-inline-start:0}
.bant-belge__logolar img + img{border-inline-start:1px solid rgba(255,255,255,.16)}
.bant-belge__baslik em{font-style:normal;color:var(--orange)}
.bant-belge__metin a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.85);text-underline-offset:4px;text-decoration-thickness:1px;transition:color .3s var(--ease)}
.bant-belge__metin a:hover{color:var(--orange-soft)}
@media (max-width:860px){
  .bant-belge__logolar img{height:38px}
}

/* ==========================================================================
   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.1fr 1.7fr 1fr;gap:clamp(24px,4vw,56px)}
.footer__top--haritasiz{grid-template-columns:1.4fr 1fr}
.footer__tanitim{font-size:14px;color:#BAC4D8;max-width:320px;line-height:1.7}

/* Harita: açık renk — hafif gri tonlu, üzerine gelince gerçek renklerine döner. 200px sabit yükseklik. */
.harita{
  display:block;
  position:relative;overflow:hidden;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.12);background:#E9EBF0;
  height:200px;
}
.harita iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  pointer-events:none;  /* harita sabit; tiklama baglantiya gidiyor */
  filter:grayscale(.85) brightness(1.04) contrast(.95);
  transition:filter .6s var(--ease);
}
.harita::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:#1A3272;mix-blend-mode:color;opacity:0;   /* lacivert katman kapalı (açık harita) */
  transition:opacity .6s var(--ease);
}
.harita:hover iframe{filter:none}
.harita:hover::after{opacity:0}
/* Turuncu konum isareti — Google'in isaretinin tam ustune (harita merkezi)
   oturuyor; ucu merkezde, altinda yavasca buyuyup sonen halka. */
.harita__pin{
  position:absolute;left:50%;top:50%;z-index:3;width:30px;height:40px;
  transform:translate(-50%,-100%);pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(0,8,32,.55));
}
.harita__pin svg{width:100%;height:100%;display:block}
.harita__pin path{fill:var(--orange);stroke:#FFF;stroke-width:1.6}
.harita__pin circle{fill:#FFF}
.harita__pin::before{
  content:'';position:absolute;left:50%;bottom:-6px;width:14px;height:14px;
  margin-left:-7px;border-radius:50%;background:rgba(236,101,3,.55);
  animation:pinHalka 2.4s var(--ease) infinite;z-index:-1;
}
@keyframes pinHalka{
  0%{transform:scale(.4);opacity:.9}
  100%{transform:scale(3.2);opacity:0}
}
.footer__yasal{display:flex;flex-wrap:wrap;gap:8px}
.footer__yasal a{color:#6E7C99}
.footer__yasal a:hover{color:var(--orange)}
.footer__imza a{color:#BAC4D8;font-weight:600;transition:color .25s var(--ease)}
.footer__imza a:hover{color:var(--orange)}
/* Sağ alttaki sabit WhatsApp butonu (.wa-sabit) son satırın üstüne binmesin */
.footer__bottom{padding-inline-end:clamp(0px,6vw,84px)}
@media (max-width:640px){.footer__bottom{padding-inline-end:0;padding-bottom:78px}}
.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:clamp(64px,5vw,74px);width:auto;margin-bottom:22px}
.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{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}
  .footer__harita{grid-column:1 / -1;order:3}
  .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}
}


/* ==========================================================================
   HERO — ikincil butonlar (Online Katalog · Belgelerimiz)
   Ana yuvarlak butonun yaninda, ince bir ayracla ayrilan iki "cam" hap.
   Ana CTA'nin dilini tekrar ediyor: ince kenar, hover'da turuncu dolgu —
   ama daha kucuk ve sakin, ana butonla yarismiyor.
   Bu blok .circle-cta tanimlarindan SONRA olmak zorunda (margin ezmesi).
   ========================================================================== */
.hero__aksiyon{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:18px clamp(22px,2.4vw,36px);
  margin-top:38px;
}
.hero__aksiyon .circle-cta{margin-top:0}
.hero__ikincil{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* Ayrac yalnizca ana buton varken (panelden kaldirilirsa bosta kalmasin) */
.circle-cta + .hero__ikincil{
  padding-inline-start:clamp(22px,2.4vw,36px);
  border-inline-start:1px solid rgba(255,255,255,.18);
}
.hero-pill{
  display:inline-flex;align-items:center;gap:10px;
  height:50px;padding:0 20px 0 6px;border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#F5F3EF;font-family:var(--f-display);font-weight:600;
  font-size:clamp(13.5px,1vw,15px);letter-spacing:.01em;white-space:nowrap;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
[dir="rtl"] .hero-pill{padding:0 6px 0 20px}
/* Ikon dairesi her zaman turuncu: renk hemen fark ediliyor ama agirlik
   ana yuvarlak butonda kaliyor (butonun kendisi yari saydam). */
.hero-pill__ikon{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(236,101,3,.45);
  transition:background .35s var(--ease),box-shadow .45s var(--ease);
}
.hero-pill__ikon svg{
  width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--ease);
}
.hero-pill[href]:hover{border-color:var(--orange);background:rgba(255,255,255,.12);transform:translateY(-2px)}
.hero-pill[href]:hover .hero-pill__ikon{background:var(--orange-soft);box-shadow:0 0 0 5px rgba(236,101,3,.18)}
.hero-pill:not([href]){cursor:default}
.hero-pill:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

@media (max-width:860px){
  /* Mobilde iki hap (katalog + belgeler) ustte yan yana, ana buton (urun gruplari) altta */
  .hero__aksiyon{gap:18px;margin-top:30px}
  .hero__ikincil{order:-1}
  .hero__ikincil,
  .circle-cta + .hero__ikincil{
    width:100%;padding-inline-start:0;border-inline-start:0;
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
  }
  .hero-pill{height:46px;padding-inline-end:14px;font-size:13.5px;min-width:0}
  .hero-pill__ikon{width:34px;height:34px}
  .hero-pill__ikon svg{width:16px;height:16px}
  .hero-pill__metin{overflow:hidden;text-overflow:ellipsis}
}

/* ==========================================================================
   İÇ SAYFA — SAYFA HERO (kurumsal vb.)
   Ana sayfa hero'sunun kısa hali: aynı lacivert çerçeve, altta 60px yuvarlak
   köşe, ızgara motifi; video yerine sayfanın görseli, üstünde kırıntı + başlık.
   ========================================================================== */
.sayfa-hero{position:relative;background:var(--paper);display:flex;flex-direction:column}
.sayfa-hero__cerceve{
  position:relative;overflow:hidden;min-height:clamp(460px,68vh,640px);
  display:flex;align-items:flex-end;
  border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--navy-800);
}
.sayfa-hero__gorsel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.sayfa-hero .hero__scrim{z-index:2}
.sayfa-hero .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%)}
.sayfa-hero__icerik{
  position:relative;z-index:5;width:100%;
  max-width:calc(var(--container) + 2 * var(--frame-pad));margin:0 auto;
  padding:calc(var(--header-h) + 40px) calc(var(--gutter) + var(--frame-pad)) clamp(44px,8vh,80px);
}
.kirinti{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:#93A0BA;margin-bottom:18px}
.kirinti a{color:#C3CCDF;transition:color .3s var(--ease)}
.kirinti a:hover{color:var(--orange)}
.kirinti span:last-child{color:var(--orange)}
.sayfa-hero__baslik{font-size:clamp(32px,7vw,104px);font-weight:800;line-height:.98;color:#F5F3EF}
.sayfa-hero__ozet{max-width:620px;margin-top:22px;font-size:clamp(15px,1.3vw,18px);line-height:1.65;color:#DCE2EE}
/* Bölümlere atlama — cam haplar, hero'daki ikincil butonların dili */
.sayfa-hero__alt{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,5vh,44px)}
.sayfa-hero__alt a{
  display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 8px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#F5F3EF;font-family:var(--f-display);font-weight:600;font-size:14px;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.sayfa-hero__alt a i{
  font-style:normal;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--orange);color:#12142B;font-size:11.5px;letter-spacing:.02em;
}
.sayfa-hero__alt a:hover{border-color:var(--orange);background:rgba(255,255,255,.12);transform:translateY(-2px)}

/* ==========================================================================
   KURUMSAL — ana sayfayla aynı dil (lacivert/turuncu, Archivo, çizgi motifi),
   farklı kurgu: sinematik koyu hero (eğik kesimli görsel, dönen mühür,
   rakamlar), yıl kartlı zaman hattı, panoramik üretim görseli, mühürlü
   sertifika bölümü.
   Hareket: .reveal (ortak) + site.js "Kurumsal" bloğu (GSAP, yalnızca bu sayfa).
   ========================================================================== */
.ks-no{
  display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(15px,1.2vw,17px);
  letter-spacing:.14em;color:var(--orange);margin-bottom:18px;
}
.ks-no::after{ /* numaranın yanındaki kısa hat */
  content:'';display:inline-block;vertical-align:middle;width:42px;height:2px;margin-inline-start:14px;
  background:var(--orange);border-radius:2px;
}

/* ---------- Hero: koyu, sinematik ---------- */
.kh{
  position:relative;overflow:hidden;isolation:isolate;color:var(--fg);
  background:radial-gradient(110% 90% at 0% 0%,#0B2466 0%,var(--navy-900) 48%,#000A2A 100%);
  min-height:min(100svh,1040px);display:flex;flex-direction:column;
  padding:calc(var(--header-h) + clamp(24px,6vh,80px)) var(--gutter) clamp(22px,4vh,44px);
}
.kh .grid-lines{
  z-index:-1;opacity:.4;
  /* üstte (menü bölgesi) tamamen soluk, aşağı doğru belirir; yanlara doğru da söner */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.15) 0,rgba(0,0,0,.15) calc(var(--header-h) * .8),#000 calc(var(--header-h) * 2.4)),radial-gradient(90% 80% at 20% 40%,#000 20%,transparent 80%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg,rgba(0,0,0,.15) 0,rgba(0,0,0,.15) calc(var(--header-h) * .8),#000 calc(var(--header-h) * 2.4)),radial-gradient(90% 80% at 20% 40%,#000 20%,transparent 80%);
          mask-composite:intersect;
}
/* Menü perdesi: görselin üst kısmı menünün arkasında buzlu cam gibi bulanık +
   lacivert tonlu; aşağı doğru yumuşakça kaybolur, menü her zaman okunur */
.kh::before{
  content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--header-h) * 1.25);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,12,48,.35) 0%,rgba(0,12,48,0) 100%);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);
}
.kh__ic,.kh__bolumler{z-index:1}

/* Görsel: sağ yarı, sol kenarı eğik; kesim çizgisi ince turuncu hat.
   Menünün altına kadar uzanır ama header bölgesinde silik (≈%22) kalır,
   aşağı indikçe tam görünür olur — menü her zaman okunur. */
.kh__medya{
  position:absolute;top:0;right:0;bottom:0;width:50%;z-index:-1;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) calc(var(--header-h) * .55),#000 calc(var(--header-h) * 1.9));
          mask-image:linear-gradient(180deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) calc(var(--header-h) * .55),#000 calc(var(--header-h) * 1.9));
  clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);background:var(--orange);
}
.kh__medya img,.kh__medya::after{
  position:absolute;inset:0;width:100%;height:100%;
  clip-path:polygon(calc(22% + 3px) 0,100% 0,100% 100%,4px 100%);
}
.kh__medya img{object-fit:cover;transform:scale(1.12);will-change:transform}   /* paralaks payı */
.kh__medya::after{
  content:'';
  background:
    linear-gradient(90deg,rgba(0,16,63,.78) 0%,rgba(0,16,63,.25) 38%,rgba(0,16,63,0) 60%),
    linear-gradient(0deg,rgba(0,10,42,.92) 0%,rgba(0,10,42,0) 42%);
}
.kh__iz{ /* silik dev yıl — metnin arkasında, alt kenara taşar */
  position:absolute;left:calc(var(--gutter) - .06em);bottom:-.2em;z-index:-1;pointer-events:none;
  font-family:var(--f-display);font-weight:800;line-height:.8;letter-spacing:-.05em;
  font-size:clamp(170px,27vw,470px);color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.07);
}
.kh__ic{
  position:relative;flex:1;width:100%;max-width:calc(var(--container) + 2 * var(--frame-pad));margin:0 auto;
  padding-inline:var(--frame-pad);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,90px);align-items:center;
}
.kh__sol{min-width:0}
.kh__etiket{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:clamp(18px,3vh,28px);
  padding:9px 18px 9px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#E3E8F2;
}
.kh__etiket i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.kh__etiket i::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--orange);
  animation:khNabiz 2.4s var(--ease) infinite;
}
@keyframes khNabiz{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.9);opacity:0}}
.kh__baslik{
  font-size:clamp(44px,7.4vw,150px);font-weight:800;line-height:.88;letter-spacing:-.05em;color:#fff;
  overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;
}
.kh__baslik > span{display:inline-block}
.kh__baslik i{font-style:normal;color:var(--orange)}
.kh__ozet{
  margin-top:clamp(20px,3.2vh,32px);max-width:540px;
  font-size:clamp(17px,1.45vw,21px);line-height:1.6;color:#C3CCDF;
}
.kh__rakamlar{
  list-style:none;display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,48px);
  margin-top:clamp(30px,5.5vh,56px);
}
.kh__rakamlar li{padding-inline-start:18px;border-inline-start:2px solid rgba(236,101,3,.75)}
.kh__rakamlar b{
  display:block;font-family:var(--f-display);font-weight:800;line-height:1;letter-spacing:-.035em;
  font-size:clamp(30px,2.9vw,46px);color:#fff;white-space:nowrap;
}
.kh__rakamlar span{display:block;margin-top:9px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#93A0BA}

/* Dönen mühür — görselin eğik kenarına oturur */
.kh__muhur{
  position:relative;align-self:end;width:clamp(150px,12.5vw,206px);aspect-ratio:1;
  margin-bottom:clamp(10px,4vh,50px);border-radius:50%;
  background:rgba(0,16,63,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.6);
}
.kh__muhur svg{width:100%;height:100%;overflow:visible}
.kh__muhur-dis{fill:none;stroke:rgba(236,101,3,.8);stroke-width:1.5}
.kh__muhur-ic{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2 5}
.kh__muhur-don{transform-origin:100px 100px;animation:muhurDon 34s linear infinite}
.kh__muhur-yazi{fill:#E3E8F2;font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.2em}
.kh__muhur b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(30px,2.6vw,44px);color:var(--orange);
}

/* Bölüm kartları — hero'nun altında cam şerit */
.kh__bolumler{
  position:relative;width:100%;max-width:calc(var(--container) + 2 * var(--frame-pad));margin:clamp(34px,6vh,72px) auto 0;
  padding-inline:var(--frame-pad);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
}
.kh__bolumler::before{ /* kartların arasındaki ince çizgiler için zemin */
  content:'';position:absolute;inset:0 var(--frame-pad);z-index:-1;border-radius:var(--r-sm);background:rgba(255,255,255,.14);
}
.kh__bolumler a{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;
  padding:clamp(18px,2.2vh,26px) clamp(20px,1.8vw,30px);
  background:rgba(0,16,63,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-family:var(--f-display);font-weight:600;font-size:clamp(16px,1.3vw,19px);color:#fff;
  transition:color .45s var(--ease);
}
.kh__bolumler a:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.kh__bolumler a:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.kh__bolumler a::before{ /* hover'da alttan dolan turuncu */
  content:'';position:absolute;inset:0;z-index:-1;background:var(--orange);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.kh__bolumler i{font-style:normal;font-size:12.5px;letter-spacing:.12em;color:var(--orange);transition:color .45s var(--ease)}
.kh__bolumler span{flex:1}
.kh__bolumler small{display:block;margin-top:5px;font-family:var(--f-body);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#93A0BA;transition:color .45s var(--ease)}
.kh__bolumler svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.kh__bolumler a:hover{color:var(--navy-900)}
.kh__bolumler a:hover::before{transform:scaleY(1)}
.kh__bolumler a:hover :is(i,small){color:var(--navy-900)}
.kh__bolumler a:hover svg{opacity:1;transform:translateY(4px)}

/* #bölüm bağlantılarıyla gelindiğinde sabit header başlığı örtmesin */
.kh ~ .sec[id]{scroll-margin-top:calc(var(--header-h) - 40px)}
#belgeler{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ---------- Tarihçe: başlık + metin, yıl kartlı zaman hattı ---------- */
.kz__desen{ /* sağ üstte boru kesiti gibi eş merkezli halkalar */
  position:absolute;top:0;right:0;width:min(62vw,900px);aspect-ratio:1;pointer-events:none;
  background:repeating-radial-gradient(circle at 100% 0,transparent 0 44px,rgba(0,16,63,.065) 44px 45.5px);
  -webkit-mask-image:radial-gradient(circle at 100% 0,#000 10%,transparent 68%);
          mask-image:radial-gradient(circle at 100% 0,#000 10%,transparent 68%);
}
.kz__ust{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,6vw,110px);align-items:start}
.kz__baslik{
  font-size:clamp(46px,6.2vw,96px);font-weight:800;line-height:.95;letter-spacing:-.045em;color:var(--navy-900);
}
.kz__vurgu{ /* başlığın altında hafif, iri cümle */
  position:relative;margin-top:clamp(20px,3vh,30px);max-width:430px;
  font-family:var(--f-display);font-weight:500;letter-spacing:-.025em;line-height:1.3;
  font-size:clamp(21px,1.9vw,28px);color:var(--navy-900);
}
.kz__vurgu em{font-style:normal;color:var(--orange)}
.kz__bas .circle-cta{margin-top:32px}
.kz__bas{position:sticky;top:calc(var(--header-h) + 32px)}   /* başlık metin boyunca yanında kalır */
.kz__metin{max-width:680px;padding-top:clamp(8px,1.5vh,18px)}
.kz__metin p{color:var(--fg-2);font-size:16px;line-height:1.85;margin-bottom:20px}
.kz__metin p:last-child{margin-bottom:0}
.kz__metin p:first-child{
  margin-bottom:clamp(24px,3.2vh,34px);
  font-size:clamp(19px,1.55vw,23px);line-height:1.55;color:var(--navy-900);
}

/* Zaman hattı: ray (kaydırdıkça dolar) + kartlar */
.zh{position:relative;margin-top:clamp(70px,12vh,130px);--zh:1;--zh-bosluk:46px}
.zh__ray{
  position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px;background:rgba(0,16,63,.1);
}
.zh__ray span{
  position:absolute;left:0;top:0;bottom:0;width:calc(var(--zh) * 100%);border-radius:inherit;
  background:linear-gradient(90deg,rgba(236,101,3,.35),var(--orange));
}
.zh__ray span::after{ /* ilerleyen uçtaki parıltı */
  content:'';position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 6px rgba(236,101,3,.18),0 0 26px 4px rgba(236,101,3,.55);
}
.zh__liste{list-style:none;display:grid;grid-template-columns:repeat(var(--adet,3),minmax(0,1fr));gap:clamp(16px,2vw,30px)}
.zh__kart{
  position:relative;display:flex;flex-direction:column;margin-top:var(--zh-bosluk);
  min-height:clamp(250px,24vw,320px);padding:clamp(24px,2.3vw,38px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm) var(--r-sm) var(--r-md) var(--r-sm);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease);
}
.zh__kart::before{ /* raydan karta inen bağlantı çizgisi */
  content:'';position:absolute;left:clamp(32px,3vw,46px);top:calc(-1 * var(--zh-bosluk));width:2px;height:var(--zh-bosluk);
  background:rgba(0,16,63,.14);transition:background .6s var(--ease);
}
.zh__nokta{
  position:absolute;left:calc(clamp(32px,3vw,46px) - 8px);top:calc(-1 * var(--zh-bosluk) - 8px);
  width:18px;height:18px;border-radius:50%;background:var(--paper-2);border:2px solid rgba(0,16,63,.25);
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.zh__sira{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.18em;color:var(--fg-3)}
.zh__yil{ /* önce kontur, aktif olunca soldan turuncuyla dolar */
  display:block;margin:clamp(22px,3vh,34px) 0 clamp(4px,1vh,10px);padding-bottom:.14em;   /* dolgu g/ç kuyruklarını da kaplasın */
  font-family:var(--f-display);font-weight:800;line-height:.95;letter-spacing:-.045em;
  font-size:clamp(48px,5.2vw,92px);white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(0,16,63,.4);
  background:linear-gradient(90deg,var(--orange),var(--orange-soft)) no-repeat 0 0 / 0% 100%;
  -webkit-background-clip:text;background-clip:text;
  transition:background-size 1.1s var(--ease),-webkit-text-stroke-color .8s var(--ease);
}
.zh__metin{margin-top:auto;color:var(--fg-2);font-size:15.5px;line-height:1.7;max-width:360px}
.zh__kart:hover{transform:translateY(-6px);border-color:rgba(236,101,3,.4);box-shadow:0 34px 60px -34px rgba(0,16,63,.4)}

/* Aktif kart (JS yoksa ya da hareket azaltılmışsa hepsi aktif görünür) */
.zh:not(.is-canli) .zh__kart::before,.zh__kart.is-aktif::before{background:var(--orange)}
.zh:not(.is-canli) .zh__nokta,.zh__kart.is-aktif .zh__nokta{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 7px rgba(236,101,3,.16)}
.zh:not(.is-canli) .zh__yil,.zh__kart.is-aktif .zh__yil{background-size:100% 100%;-webkit-text-stroke-color:transparent}

/* Son kart ("Bugün") — lacivert, halkalı */
.zh__kart--son{background:var(--navy-900) padding-box;border-color:var(--navy-900);isolation:isolate}
.zh__kart--son::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:repeating-radial-gradient(circle at 100% 100%,transparent 0 22px,rgba(255,255,255,.06) 22px 23px);
  -webkit-mask-image:radial-gradient(circle at 100% 100%,#000 10%,transparent 70%);mask-image:radial-gradient(circle at 100% 100%,#000 10%,transparent 70%);
}

.zh__kart--son .zh__sira{color:#93A0BA}
.zh__kart--son .zh__yil{-webkit-text-stroke-color:rgba(255,255,255,.5)}
.zh__kart--son .zh__metin{position:relative;z-index:1;color:#DCE2EE}
.zh__kart--son:hover{border-color:var(--navy-900);box-shadow:0 34px 60px -30px rgba(0,16,63,.7)}
.zh__kart--son .zh__nokta{width:22px;height:22px;left:calc(clamp(32px,3vw,46px) - 10px);top:calc(-1 * var(--zh-bosluk) - 10px)}

/* ---------- Üretim: panorama + rakam kartları (koyu) ---------- */
.kp{background:linear-gradient(180deg,var(--navy-900) 0%,#000B2C 100%)}
.kp .grid-lines{opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 55%);mask-image:linear-gradient(180deg,#000 0%,transparent 55%)}
.kp__ust{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:end}
.kp__vurgu{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.3;
  font-size:clamp(20px,1.9vw,27px);color:var(--orange-soft);max-width:560px;justify-self:end;
}
.kp__panorama{
  position:relative;overflow:hidden;margin-top:clamp(40px,7vh,70px);
  border-radius:var(--r-md);aspect-ratio:21/9;background:var(--navy-800);
}
.kp__panorama img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.kp__panorama::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,16,63,0) 35%,rgba(0,16,63,.85) 100%);
}
.kp__rakamlar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin:clamp(14px,2vw,26px);border-radius:var(--r-sm);overflow:hidden;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.kp__rakamlar li{padding:clamp(16px,1.8vw,24px);background:rgba(0,16,63,.55)}
.kp__rakamlar b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.2vw,34px);letter-spacing:-.03em;line-height:1.05;color:#F5F3EF}
.kp__rakamlar span{display:block;margin-top:8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#A8B3CA}
.kp__alt{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(36px,5vw,90px);margin-top:clamp(50px,8vh,90px);align-items:start}
.kp__metin{columns:2;column-gap:clamp(26px,3vw,44px)}
.kp__metin p{color:var(--fg-2);font-size:15.5px;line-height:1.8;margin-bottom:16px;break-inside:avoid}
.kp__galeri{display:grid;gap:16px}
.kp__galeri figure{position:relative;overflow:hidden;border-radius:var(--r-sm);aspect-ratio:16/10;margin:0}
.kp__galeri img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.kp__galeri figure:hover img{transform:scale(1.06)}
.kp__galeri figcaption{
  position:absolute;left:12px;bottom:12px;padding:7px 13px;border-radius:999px;
  background:rgba(0,16,63,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#F5F3EF;
}

/* ---------- Sertifikalar: mühür + vurgu + metin ---------- */
.km__ic{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,120px);align-items:start}
.km__muhur{display:block;width:clamp(86px,8vw,118px);margin-bottom:30px}
.km__muhur svg{width:100%;height:auto;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.km__halka{stroke-dasharray:3 7;transform-origin:60px 60px;animation:muhurDon 40s linear infinite}
@keyframes muhurDon{to{transform:rotate(360deg)}}
.km__muhur path{stroke-width:3.5;stroke-dasharray:70;stroke-dashoffset:var(--onay,0)}
.km__vurgu{
  margin-top:24px;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.3;
  font-size:clamp(21px,2vw,29px);color:var(--orange);max-width:480px;
}
.km__sol .circle-cta{margin-top:34px}
/* Belgelendirme kuruluşu logoları (Sertifikalarımız → Resimler) */
.km__logolar{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:30px}
.km__logolar li{display:grid;place-items:center;padding-inline:clamp(18px,2vw,28px)}
.km__logolar li:first-child{padding-inline-start:0}
.km__logolar li + li{border-inline-start:1px solid var(--line)}
.km__logolar img{height:clamp(42px,3.5vw,54px);width:auto;max-width:96px;object-fit:contain}
.km__metin{padding-top:clamp(0px,10vh,120px)}
.km__metin p{color:var(--fg-2);font-size:16px;line-height:1.85;margin-bottom:18px}
.km__metin p:first-child{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--navy-900)}

/* ---------- Belge duvarı (Sertifikalar bölümünün altı) ----------
   Yönetim sistemi (ISO) kartları lacivert, ürün (TSE) kartları beyaz.
   Gerçek belgenin küçük görüntüsü kartın üst kenarına "sıkıştırılmış kâğıt"
   gibi oturur; üzerine gelince aşağı kayar. Kart tıklanınca .bv açılır. */
.kb{margin-top:clamp(70px,11vh,120px)}
.kb__grup + .kb__grup{margin-top:clamp(56px,8vh,96px)}
.kb__grup-bas{
  display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(22px,3vh,32px);
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.kb__grup-bas h3{font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--navy-900)}
.kb__adet{margin-inline-start:auto;font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.14em;color:var(--orange)}
.kb__liste{list-style:none;display:grid;grid-template-columns:repeat(var(--adet,3),minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}

.kb__kart{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  --kapak-w:clamp(92px,7.4vw,112px);
  padding:clamp(22px,2vw,32px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm) var(--r-sm) var(--r-md) var(--r-sm);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease);
}
.kb__ac{ /* tüm kartı kaplayan görünmez buton */
  position:absolute;inset:0;z-index:3;border:0;background:none;cursor:pointer;border-radius:inherit;
}
.kb__ac:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.kb__kapak{
  position:absolute;z-index:-1;top:clamp(20px,2vw,28px);right:clamp(20px,2vw,28px);width:var(--kapak-w);aspect-ratio:.707;
  border-radius:3px;overflow:hidden;background:#fff;
  box-shadow:0 14px 30px -14px rgba(0,16,63,.4),0 0 0 1px rgba(0,16,63,.08);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.kb__kapak img{width:100%;height:100%;object-fit:cover;object-position:top}
.kb__on{
  /* standart ön eki kartın sol üstünde, yazıldığı gibi: "ISO", "TS EN IEC"; alt boşluk = kapak yüksekliği */
  display:block;max-width:calc(100% - var(--kapak-w) - 20px);
  margin-bottom:calc(var(--kapak-w) * 1.414 - 6px);
  font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em;line-height:1.1;color:var(--fg-3);
}
.kb__no{
  display:block;margin-top:4px;
  font-family:var(--f-display);font-weight:800;line-height:.95;letter-spacing:-.04em;
  font-size:clamp(28px,2.3vw,38px);color:var(--navy-900);overflow-wrap:anywhere;
}
.kb__no small{font-size:.36em;font-weight:600;letter-spacing:-.01em;color:var(--orange);margin-inline-start:.08em}
.kb__konu{display:block;margin:12px 0 18px;font-size:15px;font-weight:500;line-height:1.45;color:var(--fg-2)}
.kb__kunye{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;margin-top:auto;   /* numaralar aynı hizada, künye altta */
  padding-top:16px;border-top:1px solid var(--line)}
.kb__kunye dt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.kb__kunye dd{margin:4px 0 0;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--navy-900);overflow-wrap:break-word}
.kb__alt{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;margin-top:18px}   /* iki buton her ekranda yan yana */
.kb__incele{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:600;font-size:12.5px;color:var(--orange);white-space:nowrap}
.kb__incele svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.kb__dogrula{
  position:relative;z-index:4;flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 10px 6px 8px;border-radius:999px;
  background:rgba(0,16,63,.06);color:#3A4256;font-size:11.5px;font-weight:600;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.kb__dogrula svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kb__dogrula:hover{background:#2B3244;color:#fff}
.kb__kart:hover{transform:translateY(-6px);border-color:rgba(236,101,3,.45);box-shadow:0 34px 60px -34px rgba(0,16,63,.45)}
.kb__kart:hover .kb__kapak{transform:translateY(-4px);box-shadow:0 22px 40px -16px rgba(0,16,63,.45),0 0 0 1px rgba(0,16,63,.08)}
.kb__kart:hover .kb__incele svg{transform:translateX(4px)}

/* Yönetim sistemi kartları — lacivert, iri numara */
.kb__grup--yonetim .kb__kart{background:var(--navy-900);border-color:var(--navy-900)}
.kb__grup--yonetim .kb__kart::after{ /* sağ alt köşede boru kesiti halkaları (metnin uzağında) */
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;border-radius:inherit;
  background:repeating-radial-gradient(circle at 100% 100%,transparent 0 24px,rgba(255,255,255,.05) 24px 25px);
  -webkit-mask-image:radial-gradient(circle at 100% 100%,#000 5%,transparent 42%);mask-image:radial-gradient(circle at 100% 100%,#000 5%,transparent 42%);
}
.kb__grup--yonetim .kb__on{color:#93A0BA}
.kb__grup--yonetim .kb__no{font-size:clamp(48px,4.5vw,76px);color:#fff}
.kb__grup--yonetim .kb__konu{color:#DCE2EE}
.kb__grup--yonetim .kb__kunye{border-color:rgba(255,255,255,.14)}
.kb__grup--yonetim .kb__kunye dt{color:#93A0BA}
.kb__grup--yonetim .kb__kunye dd{color:#fff}
.kb__grup--yonetim .kb__kart:hover{border-color:var(--orange);box-shadow:0 34px 60px -30px rgba(0,16,63,.75)}
.kb__grup--yonetim .kb__kapak{box-shadow:0 16px 34px -14px rgba(0,0,0,.65)}
.kb__grup--yonetim .kb__kart:hover .kb__kapak{box-shadow:0 24px 44px -16px rgba(0,0,0,.7)}

/* Dosya listesi (Test Raporları) — not + iki sütun PDF kartı */
.kr__not{margin:-8px 0 20px;max-width:720px;font-size:15px;line-height:1.7;color:var(--fg-2)}
.kb__raporlar{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kb__raporlar a{
  display:flex;align-items:center;gap:16px;height:100%;padding:16px 18px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm) var(--r-sm) var(--r-md) var(--r-sm);   /* belge kartlarıyla aynı köşe */
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
.kb__rapor-ikon{
  flex:none;display:grid;place-items:center;width:46px;height:54px;border-radius:6px 14px 6px 6px;
  background:rgba(236,101,3,.1);font-family:var(--f-display);font-weight:800;font-size:11.5px;letter-spacing:.08em;color:var(--orange);
}
.kb__rapor-ad{flex:1;min-width:0}
.kb__rapor-ad b{display:block;font-family:var(--f-display);font-weight:600;font-size:14.5px;line-height:1.4;color:var(--navy-900)}
.kb__rapor-ad small{display:block;margin-top:4px;font-size:12px;color:var(--fg-3)}
.kb__rapor-indir{
  flex:none;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  background:var(--navy-900);color:#fff;font-size:12.5px;font-weight:600;transition:background .3s var(--ease),color .3s var(--ease);
}
.kb__rapor-indir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kb__raporlar a:hover{border-color:rgba(236,101,3,.45);box-shadow:0 20px 40px -28px rgba(0,16,63,.45);transform:translateY(-3px)}
.kb__raporlar a:hover .kb__rapor-indir{background:var(--orange);color:#12142B}

/* ---------- Belge görüntüleyici ---------- */
.bv{
  border:0;padding:0;margin:auto;width:min(1240px,94vw);height:min(92vh,960px);max-width:none;max-height:none;
  background:transparent;overflow:visible;color:#F5F3EF;
}
.bv [hidden]{display:none!important}   /* tek sayfa / doğrulama linki yok */
.bv::backdrop{background:rgba(0,8,32,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bv[open]{animation:bvAc .5s var(--ease)}
@keyframes bvAc{from{opacity:0;transform:translateY(24px) scale(.98)}}
.bv__ic{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;height:100%;
  border-radius:var(--r-sm);overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.8);
}
.bv__sahne{
  position:relative;overflow:hidden;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;
  padding:clamp(16px,3vw,44px) clamp(56px,6vw,90px);
  background:radial-gradient(circle at 50% 35%,#1C2C66 0%,#06123D 55%,#000A2A 100%);
}
.bv__kagit{margin:0;height:100%;width:100%;min-height:0;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center}
.bv__kagit img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;background:#fff;box-shadow:0 30px 70px -20px rgba(0,0,0,.75);transition:opacity .25s var(--ease)}
.bv__ok{
  position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:48px;height:48px;margin-top:-24px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.bv__ok:hover{background:var(--orange);border-color:var(--orange)}
.bv__ok--geri{left:16px}
.bv__ok--ileri{right:16px}
.bv__ok svg,.bv__kapat svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bv__sayac{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;
  background:rgba(0,10,42,.7);font-size:12px;letter-spacing:.12em;color:#C3CCDF;
}
.bv__panel{position:relative;display:flex;flex-direction:column;overflow:auto;padding:clamp(28px,3vw,40px);background:var(--navy-900)}
.bv__kapat{
  position:absolute;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:none;color:#fff;cursor:pointer;transition:background .3s var(--ease),transform .4s var(--ease);
}
.bv__kapat:hover{background:rgba(255,255,255,.1);transform:rotate(90deg)}
.bv__on{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);padding-inline-end:52px}
.bv__baslik{margin-top:12px;font-size:clamp(28px,2.4vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#fff}
.bv__konu{margin-top:12px;font-size:16px;line-height:1.5;color:#C3CCDF}
.bv__kunye{margin-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.bv__kunye div{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.bv__kunye dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#93A0BA}
.bv__kunye dd{margin:5px 0 0;font-size:15px;font-weight:600;color:#fff;overflow-wrap:anywhere}
.bv__eylem{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:28px}
.bv__pdf{justify-content:center}
.bv__dogrula{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:10px;
  border:1px solid rgba(74,222,128,.45);color:#4ADE80;font-size:14px;font-weight:600;transition:background .3s var(--ease);
}
.bv__dogrula svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bv__dogrula:hover{background:rgba(74,222,128,.12)}
.bv__kucukler{display:flex;gap:10px;margin-top:20px}
.bv__kucukler button{
  width:58px;aspect-ratio:.707;padding:0;border-radius:4px;overflow:hidden;cursor:pointer;background:#fff;
  border:2px solid transparent;opacity:.55;transition:opacity .3s var(--ease),border-color .3s var(--ease);
}
.bv__kucukler button img{width:100%;height:100%;object-fit:cover;object-position:top}
.bv__kucukler button[aria-current="true"],.bv__kucukler button:hover{opacity:1;border-color:var(--orange)}

@media (max-width:1440px){   /* 4 kart dar kalınca 2 sütun: butonlar yan yana sığsın */
  .kb__grup--urun .kb__liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1180px){
  .kb__raporlar{grid-template-columns:1fr}
}
@media (max-width:860px){
  .kb__grup--yonetim .kb__liste{grid-template-columns:1fr}
  .bv{width:100vw;height:100dvh;max-height:none}
  .bv__ic{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;border-radius:0}
  .bv__sahne{padding:16px 12px 48px}
  .bv__ok{width:40px;height:40px;margin-top:-20px}
  .bv__ok--geri{left:8px}
  .bv__ok--ileri{right:8px}
  .bv__panel{max-height:46dvh;padding:22px 20px}
  .bv__kunye{margin-top:16px}
  .bv__kunye div{padding:9px 0}
  .bv__eylem{padding-top:18px;flex-direction:row;flex-wrap:wrap}
  .bv__eylem > *{flex:1 1 200px}
}
@media (max-width:600px){
  .kb__raporlar a{flex-wrap:wrap;gap:12px 14px}
  .kb__rapor-ad{flex-basis:calc(100% - 60px)}
  .kb__rapor-indir{margin-inline-start:60px}
  .kb__grup--urun .kb__liste{grid-template-columns:1fr}
}

@media (max-width:1080px){
  .kp__rakamlar{grid-template-columns:repeat(2,1fr)}
  .kh__medya{width:56%}
  .zh__yil{font-size:clamp(42px,5.6vw,64px)}
}
@media (max-width:560px){
  .kh__muhur{display:none}
  /* üç rakam tek satırda, eşit sütun */
  .kh__rakamlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .kh__rakamlar li{padding-inline-start:10px}
  .kh__rakamlar b{font-size:clamp(17px,5.3vw,24px);letter-spacing:-.04em}
  .kh__rakamlar span{margin-top:6px;font-size:9.5px;letter-spacing:.06em;line-height:1.35}
}
@media (max-width:860px){
  .kh__ic,.kz__ust,.kp__ust,.kp__alt,.km__ic{grid-template-columns:1fr}
  .kh{min-height:0}
  .kh__medya{width:100%;clip-path:none;background:none;opacity:.42;-webkit-mask-image:none;mask-image:none}
  .kh__medya img,.kh__medya::after{clip-path:none}
  .kh__medya::after{background:linear-gradient(180deg,rgba(0,16,63,.55) 0%,rgba(0,16,63,.8) 60%,#000A2A 100%)}
  .kh__muhur{position:absolute;right:var(--frame-pad);top:0;width:112px;margin:0}
  .kh__muhur-yazi{font-size:13.5px}
  .kh__bolumler{grid-template-columns:1fr}
  .kh__bolumler a:first-child{border-radius:var(--r-sm) var(--r-sm) 0 0}
  .kh__bolumler a:last-child{border-radius:0 0 var(--r-sm) var(--r-sm)}
  .kz__metin,.kp__metin{columns:1}
  .kz__bas{position:static}
  .kp__vurgu{justify-self:start}
  /* zaman hattı dikey: ray solda, kartlar alt alta */
  .zh{--zh-bosluk:0px;padding-inline-start:46px}
  .zh__ray{left:9px;right:auto;top:8px;bottom:8px;width:4px;height:auto}
  .zh__ray span{width:auto;right:0;height:calc(var(--zh) * 100%)}
  .zh__ray span::after{right:50%;top:auto;bottom:-7px;margin:0 -7px 0 0}
  .zh__ray span{background:linear-gradient(180deg,rgba(236,101,3,.35),var(--orange))}
  .zh__liste{grid-template-columns:1fr;gap:18px}
  .zh__kart{min-height:0}
  .zh__kart::before{left:-26px;top:36px;width:26px;height:2px}
  .zh__nokta,.zh__kart--son .zh__nokta{left:-45px;top:28px}
  .zh__kart--son .zh__nokta{left:-47px;top:26px}
  .kp__panorama{aspect-ratio:auto;overflow:visible;background:none}
  .kp__panorama img{position:relative;inset:auto;height:auto;aspect-ratio:4/3;border-radius:var(--r-sm)}
  .kp__panorama::after{display:none}
  .kp__rakamlar{position:relative;margin:14px 0 0;background:rgba(255,255,255,.1)}
  .km__metin{padding-top:0}
}

/* ==========================================================================
   ÜRÜN SAYFALARI — ürün grupları, grup, ürün detay, arama (tema/urun-ortak.php)
   Kısa sayfa hero'su + açık zeminde editoryal satırlar; kutu yerine çizgiler.
   ========================================================================== */
.sayfa-hero--kisa .sayfa-hero__cerceve{min-height:clamp(380px,52vh,520px)}
.sayfa-hero--kisa .sayfa-hero__baslik{font-size:clamp(30px,5.8vw,84px);max-width:1100px}
.sayfa-hero--kisa .sayfa-hero__cerceve:not(:has(.sayfa-hero__gorsel)){
  background:radial-gradient(110% 90% at 0% 0%,#0B2466 0%,var(--navy-900) 55%,#000A2A 100%);
}
.sayfa-hero__gorsel + .hero__scrim{background:linear-gradient(90deg,rgba(0,16,63,.9) 0%,rgba(0,16,63,.6) 50%,rgba(0,16,63,.35) 100%),linear-gradient(0deg,rgba(0,10,42,.7),transparent 50%)}
.sayfa-hero__etiket{
  display:inline-block;margin-bottom:16px;padding:7px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#E3E8F2;
}

/* ---------- Ürün grupları: görsel + içerik, satırlar sırayla yer değiştirir ---------- */
.ug-satir{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:center}
.ug-satir + .ug-satir{margin-top:clamp(70px,11vh,130px)}
.ug-satir:nth-child(even) .ug-gorsel{order:2}
.ug-gorsel{display:block;overflow:hidden;border-radius:var(--r-md) var(--r-sm) var(--r-md) var(--r-sm);aspect-ratio:4/3;background:#fff;box-shadow:0 40px 70px -45px rgba(0,16,63,.45)}
.ug-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ug-gorsel:hover img{transform:scale(1.05)}
.ug-baslik{font-size:clamp(28px,3vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--navy-900)}
.ug-baslik a{transition:color .3s var(--ease)}
.ug-baslik a:hover{color:var(--orange)}
.ug-metin{margin-top:16px;max-width:560px;font-size:16px;line-height:1.75;color:var(--fg-2)}
.ug-urunler{list-style:none;margin-top:24px;border-top:1px solid var(--line);max-width:560px}
.ug-urunler li{border-bottom:1px solid var(--line)}
.ug-urunler a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 2px;font-size:15px;font-weight:500;color:var(--navy-900);transition:color .3s var(--ease),padding .3s var(--ease)}
.ug-urunler a::after{content:'\2192';color:var(--fg-3);transition:transform .3s var(--ease),color .3s var(--ease)}
.ug-urunler a:hover{color:var(--orange);padding-inline-start:8px}
.ug-urunler a:hover::after{color:var(--orange);transform:translateX(4px)}
.ug .circle-cta{margin-top:30px}

/* ---------- Grup sayfası: solda gruplar, sağda ürünler ---------- */
.sec:has(> .uk-duzen),.sec:has(> .wrap > .ud){overflow:visible}   /* overflow:hidden yapışkan kenarı bozuyor */
.uk-duzen{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:start}
.uk-yan{position:sticky;top:calc(var(--header-h) + 24px)}
.uk-yan__baslik{display:block;margin-bottom:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.uk-yan ul{list-style:none;border-top:1px solid var(--line)}
.uk-yan li{border-bottom:1px solid var(--line)}
.uk-yan a{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px 14px 16px;
  font-size:14.5px;font-weight:500;line-height:1.35;color:var(--fg-2);transition:color .3s var(--ease)
}
.uk-yan a::before{content:'';position:absolute;left:0;top:50%;width:3px;height:0;margin-top:0;background:var(--orange);border-radius:3px;transition:height .3s var(--ease),margin .3s var(--ease)}
.uk-yan a small{font-size:12px;color:var(--fg-3)}
.uk-yan a:hover{color:var(--navy-900)}
.uk-yan a.is-aktif{color:var(--navy-900);font-weight:700}
.uk-yan a.is-aktif::before,.uk-yan a:hover::before{height:22px;margin-top:-11px}

/* Ürün satırları (kutu değil, çizgili liste) */
.ur-liste{list-style:none;border-top:1px solid var(--line)}
.ur-liste li{border-bottom:1px solid var(--line)}
.ur-satir{display:grid;grid-template-columns:56px minmax(0,1fr) 44px;align-items:center;gap:clamp(12px,2vw,24px);padding:clamp(18px,2.4vh,24px) 4px}
.ur-satir__no{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--fg-3);transition:color .3s var(--ease)}
.ur-satir__ad{font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.015em;line-height:1.3;color:var(--navy-900);transition:color .3s var(--ease),transform .4s var(--ease)}
.ur-satir__ad small{display:block;margin-top:4px;font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:0;color:var(--fg-3)}
.ur-satir__ok{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);transition:background .35s var(--ease),border-color .35s var(--ease)}
.ur-satir__ok svg{width:18px;height:18px;fill:none;stroke:var(--navy-900);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--ease)}
.ur-satir:hover .ur-satir__no{color:var(--orange)}
.ur-satir:hover .ur-satir__ad{color:var(--orange);transform:translateX(6px)}
.ur-satir:hover .ur-satir__ok{background:var(--orange);border-color:var(--orange)}
.ur-satir:hover .ur-satir__ok svg{stroke:#fff}
.ur-bos{padding:30px 0;font-size:16px;color:var(--fg-2)}
.ur-bos a{display:inline-block;margin-inline-start:8px;color:var(--orange);font-weight:600}
.ur-sonuc{margin-bottom:20px;font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.02em;color:var(--navy-900)}
.ur-sonuc small{margin-inline-start:10px;font-family:var(--f-body);font-size:14px;font-weight:500;color:var(--fg-3)}

/* Sayfa sonu çağrı şeridi */
.ur-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px clamp(30px,5vw,80px);
  margin-top:clamp(60px,10vh,110px);padding-top:clamp(30px,5vh,44px);border-top:1px solid var(--line);
}
.ur-cta__baslik{font-size:clamp(22px,2.2vw,32px);font-weight:800;letter-spacing:-.025em;color:var(--navy-900)}
.ur-cta__metin{margin-top:10px;max-width:560px;font-size:15.5px;line-height:1.7;color:var(--fg-2)}

/* ---------- Ürün detay ---------- */
.ud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,100px);align-items:start}
.ud-gorsel{margin:0;position:sticky;top:calc(var(--header-h) + 24px);overflow:hidden;aspect-ratio:1;border-radius:var(--r-md) var(--r-sm) var(--r-md) var(--r-sm);background:#fff;box-shadow:0 40px 70px -45px rgba(0,16,63,.45)}
.ud-gorsel img{width:100%;height:100%;object-fit:cover}
.ud-grup{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);font-weight:600}
.ud-baslik{margin-top:12px;font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1.08;color:var(--navy-900)}
.ud-metin{margin-top:20px}
.ud-metin p{font-size:16px;line-height:1.8;color:var(--fg-2);margin-bottom:14px}
.ud-tablo{margin-top:26px;border-top:1px solid var(--line)}
.ud-tablo div{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:16px;padding:13px 2px;border-bottom:1px solid var(--line)}
.ud-tablo dt{font-size:13px;color:var(--fg-3)}
.ud-tablo dd{margin:0;font-size:14.5px;font-weight:600;color:var(--navy-900)}
.ud .cta-actions{margin-top:30px}
.ud-not{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--fg-3);max-width:520px}
.ud-diger{margin-top:clamp(70px,11vh,120px)}
.ud-diger__baslik{margin-bottom:20px;font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.025em;color:var(--navy-900)}

/* ---------- Arama formu (hero içinde) ---------- */
.ur-ara{display:flex;max-width:620px;margin-top:26px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px}
.ur-ara input{flex:1;min-width:0;border:0;background:none;padding:0 20px;font:inherit;font-size:16px;color:#fff;outline:none}
.ur-ara input::placeholder{color:#93A0BA}
.ur-ara button{border:0;border-radius:999px;padding:13px 24px;background:var(--orange);color:#fff;font-family:var(--f-display);font-weight:700;font-size:14px;cursor:pointer;transition:background .3s var(--ease)}
.ur-ara button:hover{background:var(--orange-soft)}
.ur-ara button i{font-style:normal}
.ur-ara:focus-within{border-color:var(--orange)}

@media (max-width:980px){
  .ug-satir,.ud,.uk-duzen{grid-template-columns:1fr}
  .ug-satir:nth-child(even) .ug-gorsel{order:0}
  .uk-yan,.ud-gorsel{position:static}
  .ud-gorsel{aspect-ratio:4/3}
  .uk-yan{order:2}
}
@media (max-width:600px){
  .ur-satir{grid-template-columns:34px minmax(0,1fr) 38px}
  .ur-satir__ok{width:38px;height:38px}
}

/* ==========================================================================
   İLETİŞİM / TEKLİF İSTE (tema/sayfa-form.php) — açık zemin:
   solda lacivert bilgi paneli (halka motifi, adımlar, ikonlu satırlar), sağda form
   ========================================================================== */
.fs__ic{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,100px);align-items:start}
.fs__yan{
  position:relative;isolation:isolate;overflow:hidden;padding:clamp(30px,3.4vw,52px);
  border-radius:var(--r-md) var(--r-sm) var(--r-md) var(--r-sm);
  background:var(--surface);color:var(--navy-900);border:1px solid var(--line);
  box-shadow:0 40px 70px -50px rgba(0,16,63,.35);
}
.fs__yan::before{ /* sol altta boru kesiti halkaları */
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 0 100%,transparent 0 26px,rgba(0,16,63,.05) 26px 27px);
  -webkit-mask-image:radial-gradient(circle at 0 100%,#000 10%,transparent 60%);mask-image:radial-gradient(circle at 0 100%,#000 10%,transparent 60%);
}
.fs__yan-etiket{display:block;margin-bottom:26px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.fs__metin{margin-bottom:28px}
.fs__metin p{font-size:15.5px;line-height:1.75;color:var(--fg-2);margin-bottom:12px}
.fs__metin p:first-child{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--navy-900)}
.fs__adim{list-style:none;margin-bottom:clamp(30px,5vh,44px);counter-reset:a}
.fs__adim li{position:relative;display:flex;gap:18px;padding-bottom:26px}
.fs__adim li:not(:last-child)::after{content:'';position:absolute;left:17px;top:40px;bottom:6px;width:1px;background:var(--line)}
.fs__adim-no{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(236,101,3,.7);background:var(--surface);font-family:var(--f-display);font-weight:700;font-size:12.5px;color:var(--orange)}
.fs__adim b{display:block;margin-top:7px;font-family:var(--f-display);font-weight:700;font-size:16.5px;color:var(--navy-900)}
.fs__adim p{margin-top:5px;font-size:14px;line-height:1.6;color:var(--fg-2)}
.fs__bilgi{display:grid;gap:20px}
.fs__bilgi > div{display:flex;gap:16px;align-items:flex-start}
.fs__bilgi > div:not(:has(dt)){margin-top:-12px}
.fs__bilgi > div:not(:has(dt)) .fs__ikon{visibility:hidden;height:0}
.fs__ikon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(236,101,3,.08);border:1px solid rgba(236,101,3,.18)}
.fs__ikon svg{width:19px;height:19px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fs__bilgi dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:2px 0 5px}
.fs__bilgi dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--navy-900);font-weight:500}
.fs__bilgi a{transition:color .3s var(--ease)}
.fs__bilgi a:hover{color:var(--orange)}
.fs__katalog{margin-top:32px}
/* İletişim: bilgi kartları üstte, form altta tam genişlik */
.fs__kartlar{ /* tek kart: bilgiler ince çizgilerle ayrılır, sağ altta halka motifi */
  position:relative;isolation:isolate;overflow:hidden;list-style:none;padding:clamp(10px,1.2vw,16px) clamp(24px,2.4vw,36px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md) var(--r-sm) var(--r-md) var(--r-sm);
  box-shadow:0 40px 70px -50px rgba(0,16,63,.35);
}
.fs__kartlar::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:repeating-radial-gradient(circle at 100% 100%,transparent 0 24px,rgba(0,16,63,.055) 24px 25px);
  -webkit-mask-image:radial-gradient(circle at 100% 100%,#000 8%,transparent 55%);mask-image:radial-gradient(circle at 100% 100%,#000 8%,transparent 55%);
}
.fs__kart{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start;padding:clamp(18px,2.2vh,26px) 0}
.fs__kart + .fs__kart{border-top:1px solid var(--line)}
.fs__kart .fs__ikon{grid-row:span 2;width:48px;height:48px}
.fs__kart .fs__ikon svg{width:21px;height:21px}
.fs__kart-et{align-self:end;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.fs__kart-dg{margin-top:5px;font-size:clamp(15.5px,1.2vw,17px);line-height:1.55;font-weight:600;color:var(--navy-900)}
.fs__kart-dg a{transition:color .3s var(--ease)}
.fs__kart-dg a:hover{color:var(--orange)}

.fs__form{padding-top:clamp(0px,1vh,10px)}
.fs__form-baslik{font-size:clamp(26px,2.6vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--navy-900)}
.fs__form-metin{margin-top:10px;font-size:15.5px;line-height:1.7;color:var(--fg-2);max-width:620px}
#prForm{margin-top:28px}
.fs__alanlar{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.fa{grid-column:1 / -1;display:flex;flex-direction:column;gap:8px}
.fa--yarim{grid-column:auto}
.fa__etiket{font-size:13px;font-weight:600;color:var(--navy-900)}
.fa__etiket i,.fa__onay i{font-style:normal;color:var(--orange)}
.fa input:not([type=checkbox]):not([type=radio]):not([type=file]),.fa select,.fa textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font:inherit;font-size:15px;color:var(--navy-900);transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.fa textarea{resize:vertical;min-height:130px}
.fa input::placeholder,.fa textarea::placeholder{color:#A3ACBD}
.fa input:focus,.fa select:focus,.fa textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(236,101,3,.12)}
.fa__not{font-size:12px;color:var(--fg-3)}
.fa__onay{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--fg-2);cursor:pointer}
.fa__onay input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--orange)}
.fa__onay a{color:var(--navy-900);text-decoration:underline;text-underline-offset:3px}
.fa__secenek{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:14.5px;color:var(--fg-2)}
.fa__secenek input{accent-color:var(--orange);margin-inline-end:6px}
.fa__dosya{position:relative;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border:1px dashed rgba(0,16,63,.25);border-radius:10px;background:var(--surface);cursor:pointer;transition:border-color .3s var(--ease)}
.fa__dosya:hover{border-color:var(--orange)}
.fa__dosya input{position:absolute;width:1px;height:1px;opacity:0}
.fa__dosya-ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--fg-2)}
.fa__dosya-btn{flex:none;padding:9px 16px;border-radius:8px;background:var(--navy-900);color:#fff;font-size:13px;font-weight:600}
.fa__ara{font-size:18px;font-weight:700;color:var(--navy-900);margin-top:8px}
.fs__sonuc{margin-top:22px;padding:14px 18px;border-radius:10px;font-size:14.5px;line-height:1.5}
.fs__sonuc.is-ok{background:rgba(22,163,74,.1);color:#166534}
.fs__sonuc.is-hata{background:rgba(220,38,38,.08);color:#991B1B}
.fs__gonder{margin-top:26px;border:0;cursor:pointer;font-family:inherit}
.fs__gonder.is-yukleniyor{opacity:.6;pointer-events:none}
.grecaptcha-badge{visibility:hidden!important}   /* reCAPTCHA rozeti gizli — formda .fs__recaptcha notu var */
.fs__recaptcha{margin-top:14px;font-size:12px;line-height:1.5;color:var(--fg-3)}
.fs__recaptcha a{color:var(--fg-2);text-decoration:underline;text-underline-offset:2px}
@media (max-width:980px){
  .fs__ic{grid-template-columns:1fr}
  .fs__form{order:-1}
}
@media (max-width:600px){
  .fs__alanlar{grid-template-columns:1fr}
}

/* ==========================================================================
   GENEL SAYFA (tema/sayfa-genel.php) + 404
   ========================================================================== */
.sg__ana{max-width:980px}
.uk-duzen .sg__ana{max-width:none}
.sg__ana > * + *{margin-top:clamp(36px,6vh,60px)}
.sg__metin{max-width:780px;font-size:16.5px;line-height:1.85;color:var(--fg-2)}
.sg__metin > *:first-child{margin-top:0}
.sg__metin p,.sg__metin ul,.sg__metin ol{margin:0 0 18px}
.sg__metin h2,.sg__metin h3,.sg__metin h4{margin:34px 0 14px;color:var(--navy-900);letter-spacing:-.02em;line-height:1.2}
.sg__metin h2{font-size:clamp(24px,2.2vw,32px)}
.sg__metin h3{font-size:clamp(20px,1.7vw,24px)}
.sg__metin ul,.sg__metin ol{padding-inline-start:22px}
.sg__metin li{margin-bottom:8px}
.sg__metin li::marker{color:var(--orange)}
.sg__metin a{color:var(--navy-900);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.sg__metin strong,.sg__metin b{color:var(--navy-900)}
.sg__metin img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.sg__metin table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:18px}
.sg__metin th,.sg__metin td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:start}
.sg__metin th{color:var(--navy-900)}
.sg__metin blockquote{margin:0 0 18px;padding-inline-start:20px;border-inline-start:3px solid var(--orange);color:var(--navy-900);font-size:18px}
.sg__gorsel{margin:0;overflow:hidden;border-radius:var(--r-md) var(--r-sm) var(--r-md) var(--r-sm);box-shadow:0 40px 70px -50px rgba(0,16,63,.45)}
.sg__gorsel img{width:100%;height:auto;display:block}
/* Alt sayfa kartları */
.sg__kartlar{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(16px,1.8vw,26px)}
.sg__kart{
  display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm) var(--r-sm) var(--r-md) var(--r-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.sg__kart-gorsel{display:block;aspect-ratio:4/3;overflow:hidden}
.sg__kart-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.sg__kart-ic{position:relative;flex:1;display:flex;flex-direction:column;gap:8px;padding:22px 24px 26px}
.sg__kart-ic b{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--navy-900);padding-inline-end:44px}
.sg__kart-ic small{font-size:14.5px;line-height:1.6;color:var(--fg-2)}
.sg__kart-ic i{position:absolute;top:20px;inset-inline-end:20px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);transition:background .35s var(--ease),border-color .35s var(--ease)}
.sg__kart-ic i svg{width:16px;height:16px;fill:none;stroke:var(--navy-900);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sg__kart:hover{transform:translateY(-5px);border-color:rgba(236,101,3,.4);box-shadow:0 34px 60px -40px rgba(0,16,63,.45)}
.sg__kart:hover .sg__kart-gorsel img{transform:scale(1.05)}
.sg__kart:hover .sg__kart-ic i{background:var(--orange);border-color:var(--orange)}
.sg__kart:hover .sg__kart-ic i svg{stroke:#fff}
/* Galeri + video */
.sg__galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.sg__galeri figure,.sg__videolar figure{margin:0}
.sg__galeri a{display:block;overflow:hidden;border-radius:var(--r-sm);aspect-ratio:4/3}
.sg__galeri img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sg__galeri a:hover img{transform:scale(1.05)}
.sg__galeri figcaption,.sg__videolar figcaption{margin-top:8px;font-size:13px;color:var(--fg-3)}
.sg__videolar{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.sg__video{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-sm);background:#000}
.sg__video iframe,.sg__video video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Açılır içerik */
.sg__sss{border-top:1px solid var(--line);max-width:880px}
.sg__sss details{border-bottom:1px solid var(--line)}
.sg__sss summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 2px;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:17.5px;color:var(--navy-900)}
.sg__sss summary::-webkit-details-marker{display:none}
.sg__sss summary i{flex:none;position:relative;width:14px;height:14px}
.sg__sss summary i::before,.sg__sss summary i::after{content:'';position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--orange);transition:transform .3s var(--ease)}
.sg__sss summary i::after{transform:rotate(90deg)}
.sg__sss details[open] summary i::after{transform:rotate(0)}
.sg__sss .sg__metin{padding:0 2px 22px;font-size:15.5px}
/* 404 */
.e404{position:relative}
.e404__ic{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:start}
.e404__sol{position:relative}
.e404__iz{ /* arkada silik dev 404 */
  position:absolute;top:-.25em;left:-.04em;z-index:0;pointer-events:none;
  font-family:var(--f-display);font-weight:800;line-height:.8;letter-spacing:-.06em;font-size:clamp(140px,18vw,300px);
  color:transparent;-webkit-text-stroke:1.5px rgba(0,16,63,.07);
}
.e404__baslik{position:relative;font-size:clamp(26px,2.6vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--navy-900);max-width:460px}
.ur-ara--acik{position:relative;margin-top:26px;background:var(--surface);border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
.ur-ara--acik input{color:var(--navy-900)}
.ur-ara--acik input::placeholder{color:var(--fg-3)}
.e404__alt-baslik{margin-top:clamp(30px,4.5vh,44px)}
.e404__linkler{margin-top:0}
@media (max-width:980px){.e404__ic{grid-template-columns:1fr}}
.e404__eylem{margin-top:28px}
.e404__ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.e404__ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ==========================================================================
   ARAPÇA — sayfa düzeni aynalanmıyor (müşteri kararı): header, sütunların,
   kartların ve görsellerin yeri Türkçeyle aynı. Buna karşılık her METİN
   SÜTUNU kendi içinde sağdan sola: çizgi, başlık, paragraf ve buton etiketi
   sütunun sağ kenarına yaslanıyor, cümleler sağdan sola okunuyor.
   Kart ızgaraları (uygulama, kalite, mega menü) sırasını korusun diye
   yalnızca kartların içi sağdan sola yapıldı, ızgaranın kendisi değil.
   ========================================================================== */

/* Karışık metinde (Arapça + HDPE, 7.000 m², adres) her blok yönünü kendi
   içeriğinden alsın: Arapça cümlenin noktası doğru uçta, Latin satır bozulmadan. */
html[lang="ar"] :where(h1,h2,h3,h4,p,li,figcaption,small,b,em,span,a,button,label){
  unicode-bidi:plaintext;
}

/* Metin sütunları */
html[lang="ar"] :is(
  .hero__content, #catText, .cat-card,
  .split > div:not(.split__media), .cta-band__inner > div:first-child,
  .footer__top > div, .mega__col, .mega__promo, .menu__main > div:first-child, .menu__actions,
  .area__text, .safety__card, .facts > div, .prod-strip figcaption,
  .sayfa-hero__icerik, .kh__sol, .kh__bolumler span, .kz__ust > div, .kz__metin, .zh__kart,
  .kp__ust > div, .kp__vurgu, .kp__metin, .km__sol, .km__metin,
  .kb__grup-bas, .kb__kart, .kr__not, .kb__rapor-ad, .bv__panel,
  .ug-icerik, .uk-yan, .ur-satir__ad, .ud-bilgi, .ur-cta > div:first-child,
  .fs__yan, .fs__form, .sg__ana, .sg__kart-ic
){direction:rtl;text-align:right}

/* Hero: sütun daraltıldı ki sağa yaslanan slogan sayfanın ortasında kalmasın */
html[lang="ar"] .hero__content{max-width:min(720px, calc(100% - 2 * (var(--gutter) + var(--frame-pad))))}

/* Kart ızgaralarının dışında duran bölüm başlıkları (uygulama, kalite, mobil ürünler) */
html[lang="ar"] :is(#uygulama, #kalite) .wrap > :is(.rule, h2),
html[lang="ar"] .cats-mobile > :is(.rule, .cats-mobile__baslik){
  direction:rtl;text-align:right;margin-left:auto;
}

/* İleri okları Arapçada sola baksın (yalnızca metin sütunlarının içinde) */
html[lang="ar"] :is(.split, .mega__promo, .menu__actions) .circle-cta--right .circle-cta__arrows,
html[lang="ar"] .cat-link i,
html[lang="ar"] .cta-actions .btn--ghost i{display:inline-block;transform:scaleX(-1)}
html[lang="ar"] .cta-actions .btn--ghost:hover i{transform:scaleX(-1) translateX(4px)}

/* Mobilde Arapça hap buton yazıları daha uzun; "..." ile kesilmesin, iki satıra insin */
@media (max-width:860px){
  html[lang="ar"] .hero-pill{height:auto;min-height:46px;padding-block:5px}
  html[lang="ar"] .hero-pill__metin{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
}

/* Arapça — kurumsal */
html[lang="ar"] :is(.kz__ust, .km__sol) .circle-cta--right .circle-cta__arrows{transform:scaleX(-1)}
/* Arapça — belge kartları: kapak kâğıdı sol üste geçer ki sağa yaslanan metinle çakışmasın */
html[lang="ar"] .kb__kapak{right:auto;left:clamp(20px,2vw,28px)}
html[lang="ar"] .kb__no{direction:ltr;unicode-bidi:isolate}
html[lang="ar"] .kb__incele svg{transform:scaleX(-1)}
html[lang="ar"] .bv__kapat{right:auto;left:16px}
html[lang="ar"] :is(.kb__kunye, .bv__kunye) dd{direction:ltr;unicode-bidi:isolate;text-align:right}
/* Arapça — ürün sayfaları: ileri okları sola baksın */
html[lang="ar"] .ur-satir__ok svg{transform:scaleX(-1)}
html[lang="ar"] .ug-urunler a::after{content:'90'}
html[lang="ar"] .ug-urunler a:hover::after{transform:translateX(-4px)}
html[lang="ar"] .ur-satir:hover .ur-satir__ad{transform:translateX(-6px)}

html[lang="ar"] .fs__gonder i{display:inline-block;transform:scaleX(-1)}
html[lang="ar"] .fs__adim li:not(:last-child)::after{left:auto;right:17px}

/* Ürün detay sayfası yok: grup sayfasındaki ürün satırları tıklanmaz */
.ur-satir--duz{grid-template-columns:56px minmax(0,1fr)}
.ur-satir--duz:hover .ur-satir__no{color:var(--fg-3)}
.ur-satir--duz:hover .ur-satir__ad{color:var(--navy-900);transform:none}

/* ==========================================================================
   ÜRÜN GRUBU SAYFASI (urun-kategori.php) — detay sayfası yok, her şey burada
   Giriş (kapak + tanıtım + dizin) → kategori içeriği → ürün blokları
   (ölçü tablosu solda, teknik özellik kartı sağda) → çağrı → diğer gruplar
   ========================================================================== */
.uy-sayfa{overflow:visible}
/* Hero: solda metin + butonlar, sağda kapak görseli (tam, yuvarlak köşeli) */
.uyh .sayfa-hero__cerceve{align-items:stretch}
.uyh__ic{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:end}
.uyh__ic--tek{grid-template-columns:minmax(0,1fr)}
.uyh .sayfa-hero__baslik{font-size:clamp(30px,4.6vw,72px)}
.uyh .sayfa-hero__ozet{max-width:560px}
.uyh__btn{margin-top:clamp(24px,4vh,34px)}
.sayfa-hero .btn--ghost{color:#F5F3EF;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.sayfa-hero .btn--ghost:hover{border-color:var(--orange);color:#fff}
.uyh__gorsel{
  position:relative;margin:0;align-self:end;aspect-ratio:5/4;
  border-radius:var(--r-md) var(--r-sm) var(--r-md) var(--r-sm);overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
}
.uyh__gorsel img{width:100%;height:100%;object-fit:cover}

.uy__ozellik-baslik{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);font-weight:600}

/* Bu gruptaki ürünler — numaralı kartlar */
.uy-sekme__baslik{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);font-weight:600}
.uy-sekme__ust{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.uy-sekme .uy-karusel__ok{width:44px;height:44px}
.uy-sekme ol{
  list-style:none;margin:4px -8px -14px;display:flex;gap:14px;padding:8px 8px 22px;scroll-padding-inline:8px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.uy-sekme ol::-webkit-scrollbar{display:none}
/* 4 kart satıra sığar; fazlası yana kayar (azsa kartlar satırı doldurur) */
.uy-sekme li{flex:1 0 max(240px,calc((100% - 42px) / 4));scroll-snap-align:start;display:flex}
.uy-sekme li > a{flex:1}
/* hepsi sığıyorsa oklar ve çizgi gizli */
.is-sigiyor .uy-karusel__oklar,.is-sigiyor > .uy-karusel__ilerleme{display:none}
.uy-sekme a{
  position:relative;display:flex;flex-direction:column;gap:14px;height:100%;
  padding:20px 22px 22px;border-radius:var(--r-sm);background:#fff;
  box-shadow:0 0 0 1px var(--line);overflow:hidden;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.uy-sekme a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.uy-sekme__no{font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.2px var(--orange)}
.uy-sekme__ad{font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.35;letter-spacing:-.01em;color:var(--navy-900);padding-inline-end:28px}
.uy-sekme__ok{position:absolute;right:20px;bottom:20px;font-size:16px;color:var(--fg-3);transition:color .3s var(--ease),transform .35s var(--ease)}
.uy-sekme a:hover{box-shadow:0 0 0 1px rgba(236,101,3,.45),0 12px 22px -14px rgba(0,16,63,.4);transform:translateY(-3px)}
.uy-sekme a:hover::after{transform:scaleX(1)}
.uy-sekme a:hover .uy-sekme__no{color:var(--orange)}
.uy-sekme a:hover .uy-sekme__ok{color:var(--orange);transform:translateY(3px)}
.uy-sayfa .wrap > .uy:first-child{margin-top:0;padding-top:0;border-top:0}
.uy-sayfa{padding-top:clamp(56px,8vh,96px)}
@media (max-width:640px){
  .uy-sekme li{flex-basis:80%}
  .uy-sekme__no{font-size:24px}
  .uy-sekme__ad{font-size:15px}
}

/* Ürün bloğu */
.uy{scroll-margin-top:calc(var(--header-h) + 24px);margin-top:clamp(70px,11vh,120px);padding-top:clamp(34px,5vh,50px);border-top:1px solid var(--line)}
.uy__bas{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:start}
.uy__no{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,3.4vw,54px);line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.4px var(--orange)}
.uy__ad{font-size:clamp(24px,2.5vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--navy-900)}
.uy__ozet{margin-top:10px;max-width:760px;font-size:16px;line-height:1.7;color:var(--fg-2)}
.uy__govde{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:clamp(24px,3.4vw,52px);align-items:start;margin-top:clamp(26px,4vh,40px)}
.uy__govde--tek{grid-template-columns:minmax(0,1fr)}
.uy__gorsel{margin:0 0 24px;overflow:hidden;border-radius:var(--r-sm);background:#fff;aspect-ratio:16/9}
.uy__gorsel img{width:100%;height:100%;object-fit:cover}

/* Panel içeriği: tablolar, listeler, paragraflar */
.uy-metin{font-size:15.5px;line-height:1.75;color:var(--fg-2)}
.uy-metin + .uy-metin{margin-top:26px}
.uy-metin > * + *{margin-top:14px}
.uy-metin h2,.uy-metin h3,.uy-metin h4{font-size:clamp(18px,1.4vw,21px);font-weight:700;letter-spacing:-.015em;color:var(--navy-900);margin-top:26px}
.uy-metin strong{color:var(--navy-900)}
.uy-metin a{color:var(--orange);font-weight:600}
/* Madde listeleri (ör. Ek Parçalar): numaralı küçük kartlar */
.uy-metin ul{list-style:none;counter-reset:parca;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}
.uy-metin ul li{
  counter-increment:parca;position:relative;display:flex;align-items:center;gap:14px;min-height:64px;
  padding:12px 18px 12px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line);
  color:var(--navy-900);font-weight:600;font-size:14.5px;line-height:1.35;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.uy-metin ul li::before{
  content:counter(parca,decimal-leading-zero);flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:rgba(236,101,3,.09);color:var(--orange);font-family:var(--f-display);font-weight:700;font-size:12.5px;letter-spacing:.04em;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.uy-metin ul li:hover{box-shadow:0 0 0 1px rgba(236,101,3,.5),0 14px 26px -18px rgba(0,16,63,.45);transform:translateY(-2px)}
.uy-metin ul li:hover::before{background:var(--orange);color:#fff}
.uy-metin ol{padding-inline-start:20px}
.uy-metin--kategori{margin-top:clamp(60px,9vh,100px);max-width:980px}
.uy-kaydir{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm);background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 60px -48px rgba(0,16,63,.45)}
.uy-metin table{width:100%!important;height:auto!important;border-collapse:collapse!important;border:0!important;font-size:14.5px;line-height:1.4;min-width:460px}
.uy-metin table :is(th,td){padding:18px 26px!important;border:0!important;border-bottom:1px solid var(--line)!important;text-align:start;vertical-align:middle;width:auto!important;height:auto!important}
.uy-metin table thead :is(th,td),.uy-metin table tr:first-child th{background:var(--navy-900)!important;color:#fff;font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.04em;white-space:nowrap}
.uy-metin table tbody tr:nth-child(even) td{background:rgba(0,16,63,.028)}
.uy-metin table tbody tr:last-child td{border-bottom:0!important}
.uy-metin table td:first-child{font-family:var(--f-display);font-weight:700;color:var(--navy-900)}
.uy-metin table tbody tr{transition:background .2s var(--ease)}
.uy-metin table tbody tr:hover td{background:rgba(236,101,3,.07)}

/* Teknik özellik kartı */
.uy__ozellik{position:sticky;top:calc(var(--header-h) + 24px);padding:clamp(28px,2.6vw,40px);border-radius:var(--r-sm);background:var(--navy-900);color:#fff;box-shadow:0 40px 70px -46px rgba(0,16,63,.6)}
.uy__ozellik .uy__ozellik-baslik{color:var(--orange-soft)}
.uy__ozellik dl{margin-top:20px}
.uy__ozellik dl > div{display:grid;grid-template-columns:minmax(110px,44%) minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.uy__ozellik dl > div:last-child{border-bottom:0;padding-bottom:0}
.uy__ozellik dt{font-size:13px;line-height:1.45;color:#9FAAC2}
.uy__ozellik dd{margin:0;font-size:14.5px;font-weight:600;line-height:1.45;color:#fff}
.uy__govde--tek .uy__ozellik{position:static;max-width:640px}
/* Yalnız teknik özelliği olan ürün (tablo/görsel yok): kart tam genişlik, özellikler iki sütun */
.uy__govde--ozellik .uy__ozellik{max-width:none}
.uy__govde--ozellik .uy__ozellik dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px)}
.uy__govde--ozellik .uy__ozellik dl > div:last-child{padding-bottom:16px}
@media (max-width:860px){ .uy__govde--ozellik .uy__ozellik dl{grid-template-columns:minmax(0,1fr)} }
.uy__ozellik dl > .uy__renk-satir{grid-template-columns:1fr;gap:10px}
.uy__renkler{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.uy__renkler li{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:12px;line-height:1}
.uy__renk-nokta{width:20px;height:20px;border-radius:50%;background:var(--renk);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.uy__renkler b{font-family:var(--f-display);font-weight:700;letter-spacing:.04em}
.uy__renkler small{font-size:12px;color:#B8C1D6}

.uy-bos{margin-top:clamp(50px,8vh,80px);max-width:680px;font-size:18px;line-height:1.6;color:var(--navy-900);font-weight:500}


@media (max-width:980px){
  .uyh__ic,.uy__govde{grid-template-columns:minmax(0,1fr)}
  .uyh__gorsel{max-width:560px}
  .uy__ozellik{position:static}
}
@media (max-width:560px){
  .uy-metin table{font-size:13.5px;min-width:0}
  .uy-metin table :is(th,td){padding:14px 12px!important}
  .uy-metin table thead :is(th,td),.uy-metin table tr:first-child th{white-space:normal;font-size:11.5px;letter-spacing:.02em}
  .uy__ozellik dl > div{grid-template-columns:1fr;gap:3px}
}

/* Arapça: metin sütunları sağdan sola (düzen aynalanmaz) */
html[lang="ar"] .uy-metin ul li{padding:12px 12px 12px 18px}
html[lang="ar"] :is(.uy-sekme__ad, .uy__bas > div, .uy-metin, .uy__ozellik, .uy-bos, .uy-karusel__alt){direction:rtl;text-align:right}
html[lang="ar"] :is(.uy__ozellik dd, .uy-metin td){unicode-bidi:plaintext;text-align:right}


/* Diğer ürün grupları — karusel (kaydırmalı, mıknatıslı durur; oklar + ilerleme çizgisi) */
.uy-karusel{margin-top:clamp(80px,12vh,130px)}
.uy-karusel__ust{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.uy-karusel__baslik{font-size:clamp(26px,2.6vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--navy-900)}
.uy-karusel__oklar{display:flex;gap:10px}
.uy-karusel__ok{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:#fff;border:0;box-shadow:0 0 0 1px var(--line);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease);
}
.uy-karusel__ok svg{width:18px;height:18px;fill:none;stroke:var(--navy-900);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s var(--ease)}
.uy-karusel__ok[data-yon="-1"] svg{transform:scaleX(-1)}
.uy-karusel__ok:hover:not(:disabled){background:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.uy-karusel__ok:hover:not(:disabled) svg{stroke:#fff}
.uy-karusel__ok:disabled{opacity:.35;cursor:default}
.uy-karusel__ok:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.uy-karusel__ray{
  list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,24vw,330px);gap:18px;
  margin:18px -8px -40px;padding:8px 8px 48px;scroll-padding-inline:8px;overflow-x:auto;overscroll-behavior-x:contain; /* iç pay: gölgeler kırpılmasın */
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.uy-karusel__ray::-webkit-scrollbar{display:none}
.uy-karusel__kart{scroll-snap-align:start}
.uy-karusel__kart a{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;isolation:isolate;
  border-radius:var(--r-md) var(--r-sm) var(--r-md) var(--r-sm);background:var(--navy-900);
  box-shadow:0 34px 60px -44px rgba(0,16,63,.6);
}
.uy-karusel__kart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--ease)}
.uy-karusel__kart a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,16,63,0) 35%,rgba(0,16,63,.55) 62%,rgba(0,10,42,.94) 100%);transition:opacity .5s var(--ease)}
.uy-karusel__kart a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.uy-karusel__alt{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:clamp(20px,1.8vw,26px)}
.uy-karusel__alt small{font-family:var(--f-display);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-soft)}
.uy-karusel__alt b{font-family:var(--f-display);font-weight:700;font-size:clamp(18px,1.45vw,22px);line-height:1.2;letter-spacing:-.015em;color:#fff}
.uy-karusel__git{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-size:13.5px;font-weight:600;color:#DCE2EE;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .35s var(--ease),margin .45s var(--ease);
}
.uy-karusel__git i{font-style:normal;color:var(--orange-soft);transition:transform .35s var(--ease)}
.uy-karusel__kart a:hover img,.uy-karusel__kart a:focus-visible img{transform:scale(1.07)}
.uy-karusel__kart a:hover::after,.uy-karusel__kart a:focus-visible::after{transform:scaleX(1)}
.uy-karusel__kart a:hover .uy-karusel__git,.uy-karusel__kart a:focus-visible .uy-karusel__git{max-height:30px;opacity:1;margin-top:8px}
.uy-karusel__kart a:hover .uy-karusel__git i{transform:translateX(4px)}
.uy-karusel__kart a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.uy-karusel__ilerleme{position:relative;height:2px;margin-top:22px;border-radius:2px;background:var(--line);overflow:hidden}
.uy-karusel__ilerleme span{position:absolute;inset:0 auto 0 0;width:var(--oran,20%);transform:translateX(var(--konum,0%));border-radius:2px;background:var(--orange);transition:transform .25s linear}
@media (hover:none){ .uy-karusel__git{max-height:30px;opacity:1;margin-top:8px} }
@media (max-width:640px){
  .uy-karusel__ray{grid-auto-columns:76%;gap:12px}
  .uy-karusel__ok{width:44px;height:44px}
}

/* WhatsApp — site genelinde sağ altta sabit (tema/footer.php).
   Masaüstünde üzerine gelince solda etiket + numara açılır; menüler (z 70-80) üstünü örter. */
.wa-sabit{
  position:fixed;z-index:60;
  right:calc(clamp(16px,2vw,28px) + env(safe-area-inset-right,0px));
  bottom:calc(clamp(16px,2.6vh,28px) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:10px;
}
.wa-sabit__ikon{
  position:relative;flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:#25D366;box-shadow:0 18px 36px -14px rgba(7,94,84,.65),0 0 0 0 rgba(37,211,102,.5);
  transition:transform .4s var(--ease),background .3s var(--ease);
}
.wa-sabit__ikon::after{ /* yumuşak nabız halkası */
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:waNabiz 2.8s var(--ease) infinite;
}
.wa-sabit__ikon svg{width:30px;height:30px;fill:#fff}
.wa-sabit__etiket{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;
  padding:10px 16px;border-radius:14px;background:#fff;color:var(--navy-900);
  box-shadow:0 18px 40px -18px rgba(0,16,63,.45);
  opacity:0;transform:translateX(10px);pointer-events:none;white-space:nowrap;
  transition:opacity .3s var(--ease),transform .35s var(--ease);
}
.wa-sabit__etiket b{font-size:14px;font-weight:700}
.wa-sabit__etiket small{margin-top:3px;font-size:12px;font-weight:500;color:#128C4A}
.wa-sabit:hover .wa-sabit__ikon,.wa-sabit:focus-visible .wa-sabit__ikon{background:#1EBE5B;transform:scale(1.06)}
.wa-sabit:hover .wa-sabit__etiket,.wa-sabit:focus-visible .wa-sabit__etiket{opacity:1;transform:none}
.wa-sabit:focus-visible{outline:none}
.wa-sabit:focus-visible .wa-sabit__ikon{outline:3px solid rgba(37,211,102,.5);outline-offset:3px}
.is-menu-open .wa-sabit{opacity:0;visibility:hidden}
@keyframes waNabiz{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){ .wa-sabit__ikon::after{animation:none;opacity:0} }
@media (hover:none),(max-width:640px){
  .wa-sabit__etiket{display:none}
  .wa-sabit__ikon{width:54px;height:54px}
  .wa-sabit__ikon svg{width:27px;height:27px}
}

/* Genel sayfa: uzun metinlerde sağda yapışkan "Bu sayfada" listesi (tema/sayfa-genel.php, 3+ h2) */
.sec:has(> .sg-duzen){overflow:visible}
.sg-duzen{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:clamp(40px,6vw,110px);align-items:start}
.sg-duzen .sg__ana{max-width:none}
.sg-duzen .sg__metin{max-width:820px}
.sg-duzen .sg__metin h2{scroll-margin-top:calc(var(--header-h) + 24px)}
.sg-yan{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:22px}
.sg-yan__baslik{display:block;margin-bottom:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);font-weight:600}
.sg-yan__nav ol{list-style:none;counter-reset:bolum;border-inline-start:1px solid var(--line)}
.sg-yan__nav li{counter-increment:bolum}
.sg-yan__nav a{
  position:relative;display:block;padding:9px 0 9px 18px;margin-inline-start:-1px;
  border-inline-start:2px solid transparent;font-size:14px;line-height:1.4;color:var(--fg-2);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.sg-yan__nav a:hover{color:var(--navy-900)}
.sg-yan__nav a.is-aktif{color:var(--navy-900);font-weight:600;border-inline-start-color:var(--orange)}
.sg-yan__kutu{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:var(--r-sm);background:#fff;box-shadow:0 0 0 1px var(--line)}
.sg-yan__kutu b{font-size:13px;color:var(--fg-3);font-weight:600;margin-bottom:2px}
.sg-yan__kutu a{font-size:14.5px;font-weight:600;color:var(--navy-900);transition:color .25s var(--ease);word-break:break-word}
.sg-yan__kutu a:hover{color:var(--orange)}
@media (max-width:980px){
  .sg-duzen{grid-template-columns:minmax(0,1fr)}
  .sg-yan{display:none}
}
html[lang="ar"] .sg-yan{direction:rtl;text-align:right}
html[lang="ar"] .sg-yan__nav a{padding:9px 18px 9px 0}

/* Ürün sayfaları, mobil: Teklif İste + Online Katalog yan yana, eşit genişlikte sığsın
   (kategori hero'su .uyh__btn ve sayfa sonu çağrı şeridi .ur-cta) */
@media (max-width:640px){
  :is(.uyh__btn,.ur-cta .cta-actions){display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;width:100%}
  :is(.uyh__btn,.ur-cta .cta-actions) .btn{justify-content:center;gap:8px;padding:14px 10px;font-size:13.5px;white-space:nowrap;min-width:0}
  .ur-cta > div:first-child{width:100%}
}

/* Ürün grupları: sağ üstte kaydırma ipucu (fare simgesi + tekerlek + "Kaydır") */
.cats__kaydir{
  position:absolute;z-index:5;top:calc(var(--header-h) + 22px);right:clamp(48px,4.6vw,76px);
  display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.72);box-shadow:0 0 0 1px var(--line),0 10px 26px -18px rgba(0,16,63,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--f-display);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-900);
  transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .3s var(--ease);
}
.cats__kaydir:hover{box-shadow:0 0 0 1px var(--orange),0 12px 28px -16px rgba(0,16,63,.5)}
.cats__kaydir:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.cats__kaydir.is-gizli{opacity:0;transform:translateY(-8px);pointer-events:none}
.cats__kaydir-fare{position:relative;width:16px;height:24px;border:1.6px solid var(--navy-900);border-radius:9px}
.cats__kaydir-fare i{position:absolute;left:50%;top:4px;width:2px;height:5px;margin-left:-1px;border-radius:2px;background:var(--orange);animation:catTeker 1.6s var(--ease) infinite}
.cats__kaydir-ok svg{display:block;width:11px;height:11px;fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:catOk 1.6s var(--ease) infinite}
@keyframes catTeker{0%{transform:translateY(0);opacity:1}70%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes catOk{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(2px);opacity:1}}
@media (prefers-reduced-motion:reduce){.cats__kaydir-fare i,.cats__kaydir-ok svg{animation:none}}
html[lang="ar"] .cats__kaydir{letter-spacing:0}