/* DYNABLA — site stili.  brand.py'den üretilir; elle düzenlemeyin.
   Dark mode YOK: sistem açık zemin için kalibre edildi. */

/* ============================================================ FONTLAR ==== */
@font-face{font-family:Montserrat;src:url(fontlar/Montserrat-600.woff2)format("woff2"),url(fontlar/Montserrat-600.ttf)format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(fontlar/Montserrat-700.woff2)format("woff2"),url(fontlar/Montserrat-700.ttf)format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fontlar/Inter-400.woff2)format("woff2"),url(fontlar/Inter-400.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fontlar/Inter-500.woff2)format("woff2"),url(fontlar/Inter-500.ttf)format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fontlar/Inter-600.woff2)format("woff2"),url(fontlar/Inter-600.ttf)format("truetype");font-weight:600;font-style:normal;font-display:swap}

/* ========================================================= DEĞİŞKENLER === */
:root{
  --navy-900: #06325C;
  --navy-800: #0A3F6E;
  --navy-700: #0F4A80;
  --navy-600: #17518A;
  --navy-500: #1D6AAE;
  --navy-400: #3F82B4;
  --navy-300: #6BA0C9;
  --navy-200: #96BCDA;
  --navy-100: #BCD5E9;
  --navy-050: #DCE9F4;
  --heat-900: #7A2A38;
  --heat-800: #8E2F44;
  --heat-700: #A1313E;
  --heat-600: #C93435;
  --heat-500: #D94A28;
  --heat-400: #E4632C;
  --heat-300: #EE7A3C;
  --heat-200: #F7941E;
  --heat-100: #FBC57E;
  --heat-050: #FDECD8;
  --bridge: #4A3352;
  --bridge-l: #6B5578;
  --ink: #0D1720;
  --slate-700: #33414F;
  --slate-500: #64737F;
  --slate-400: #8E9BA6;
  --slate-300: #C2CBD3;
  --slate-200: #DDE3E9;
  --slate-100: #EDF1F4;
  --paper: #F7F9FB;
  --white: #FFFFFF;
  --ok: #157F52;
  --warn: #A8760B;
  --serious: #C04A10;
  --critical: #A62A28;
  --brand: #17518A;
  --accent: #D94A28;
  --text: #0D1720;
  --text-2: #33414F;
  --muted: #64737F;
  --line: #C2CBD3;
  --line-2: #DDE3E9;
  --bg: #F7F9FB;
  --surface: #FFFFFF;
  --subtle: #DCE9F4;
  --dark: #06325C;

  --font-display: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-text: 'Inter', 'Segoe UI', Arial, sans-serif;

  --sp: 8px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 40px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --seri-1: #1D6AAE;
  --seri-2: #E4632C;
  --seri-3: #0E9E90;
  --seri-4: #BE7F06;
  --seri-5: #8046AE;
  --seri-6: #4E8C33;
}

/* ============================================================== TEMEL ==== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-text);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.2;
  letter-spacing:-.02em;color:var(--navy-800);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);letter-spacing:-.03em}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem)}
h4{font-size:1.05rem;font-weight:600}
p{margin:0 0 1.1em;max-width:72ch}
ul,ol{max-width:72ch}
hr{border:0;border-top:1px solid var(--line-2);margin:3rem 0}
::selection{background:var(--navy-100);color:var(--navy-900)}

.kap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.dar{max-width:760px}
.atla{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 var(--r-md) 0}
.atla:focus{left:0}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* etiket üstü */
.etiket{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .7rem;display:block;font-family:var(--font-text)}
.etiket--acik{color:#F7941E}
.cizgi{width:56px;height:4px;background:var(--accent);border:0;margin:0 0 1.6rem;border-radius:2px}

/* ============================================================= BUTON ===== */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-text);
  font-weight:600;font-size:1rem;padding:.9em 1.6em;border-radius:var(--r-md);
  border:2px solid transparent;cursor:pointer;transition:background .2s var(--ease),
  border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--ana{background:var(--accent);color:#fff}
.btn--ana:hover{background:#C93435;color:#fff}
.btn--cizgi{border-color:var(--line);color:var(--navy-800);background:transparent}
.btn--cizgi:hover{border-color:var(--accent);color:var(--accent)}
.btn--acik{border-color:rgba(255,255,255,.35);color:#fff}
.btn--acik:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.btn .ok{transition:transform .2s var(--ease)}
.btn:hover .ok{transform:translateX(3px)}

/* ============================================================= BAŞLIK ==== */
.ust{position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
/* Buzlu cam ARKA KATMANDA duruyor, .ust'un kendisinde değil.
   `backdrop-filter` (filter ve transform gibi) uygulandığı öğeyi
   içindeki `position:fixed` öğeler için "containing block" yapar.
   Doğrudan .ust üzerindeyken mobil menü ekranın tamamına değil,
   başlığın 72 px'lik şeridine hapsoluyor ve kullanılamaz hâle
   geliyordu. Sözde öğeye taşıyınca menü yine ekrana göre konumlanıyor,
   görünüm değişmiyor. */
.ust::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}
.ust--kaydi{border-bottom-color:var(--line-2);box-shadow:0 1px 12px rgba(6,50,92,.05)}
/* Siralama `order` ile: dil secici DOM'da hamburger dugmesinden once
   (klavye sirasi dogru olsun diye) ama genis ekranda menuden SONRA
   gorunmeli. Tek oge, iki farkli yer -- `order` tam bu is icin. */
.ust__ic{display:flex;align-items:center;gap:1.5rem;height:76px;transition:height .25s var(--ease)}
.ust__logo{order:1}
.nav{order:2}
.dil{order:3}
.mnu-btn{order:4}
.ust--kaydi .ust__ic{height:62px}
.ust__logo{flex:0 0 auto}
.ust__logo img{height:34px;width:auto;transition:height .25s var(--ease)}
.ust--kaydi .ust__logo img{height:29px}

/* Logo, imleç üzerine gelince üç katına çıkar. Büyütme `transform` ile
   yapılır: yerleşimi hiç etkilemez, menü kaymaz, başlık yüksekliği
   değişmez. Sol kenardan büyür ki sayfanın dışına taşmasın.
   Yalnız fareli ve geniş ekranlarda: dar ekranda 3x logo menü
   düğmesinin üstüne binerdi. */
@media (hover:hover) and (min-width:900px){
  .ust__logo{position:relative;z-index:3}
  .ust__logo img{transform-origin:left center;
    /* Buyuyen gorsel menunun ustune tasiyor. pointer-events:none olmazsa
       isaret aygiti menu yerine logoyu yakalar; tetikleyici zaten
       bagin kendi 159x34 kutusu, gorsele gerek yok. */
    pointer-events:none;
    transition:height .25s var(--ease),
               transform .3s cubic-bezier(.2,.7,.3,1),
               filter .3s var(--ease)}
  .ust__logo:hover img,.ust__logo:focus-visible img{transform:scale(2);
    filter:drop-shadow(0 10px 26px rgba(6,50,92,.3))}
}
@media (prefers-reduced-motion:reduce){
  .ust__logo:hover img,.ust__logo:focus-visible img{
    transform:none;filter:none}
}
.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav a{color:var(--navy-800);font-weight:500;font-size:.95rem;padding:.55em .85em;
  border-radius:var(--r-sm);position:relative}
.nav a:hover{color:var(--accent);background:var(--navy-050)}
.nav a[aria-current]{color:var(--accent)}
.nav a[aria-current]::after{content:"";position:absolute;left:.85em;right:.85em;bottom:.15em;
  height:2px;background:var(--accent);border-radius:1px}
/* dil secici
   Alti dil yan yana kod olarak dizilince baslik serisi tasiyordu (olcum
   icin base.html'deki nota bakin). Artik tek dugme + acilir liste.
   `details/summary` oldugu icin acma/kapama, klavye ve ekran okuyucu
   destegi tarayicidan geliyor; site.js sadece disari tiklama ve Esc
   ekliyor.

   Yon bagimli yerlerde mantiksal ozellik (inline-start/end) kullaniliyor:
   Arapca sayfalarda <html dir="rtl"> oldugunda ayrica kural yazmadan
   kendiliginden aynalaniyor. */
.dil{position:relative;margin-inline-start:.5rem;padding-inline-start:.9rem;
  border-inline-start:1px solid var(--line-2)}
.dil__dugme{display:flex;align-items:center;gap:.34rem;cursor:pointer;
  padding:.42em .5em;border-radius:var(--r-sm);white-space:nowrap;
  color:var(--muted);font-size:.82rem;font-weight:600;text-transform:uppercase;
  -webkit-user-select:none;user-select:none;list-style:none}
/* Tarayicinin varsayilan ucgen imini kaldir (ikisi birden gerekiyor) */
.dil__dugme::-webkit-details-marker{display:none}
.dil__dugme::marker{content:""}
.dil__dugme:hover{color:var(--navy-800);background:var(--navy-050)}
.dil[open]>.dil__dugme{color:var(--navy-800);background:var(--navy-050)}
.dil__kure{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round}
.dil__ok{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s var(--ease)}
.dil[open] .dil__ok{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.dil__ok{transition:none}}

.dil__liste{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;
  min-width:178px;margin:0;padding:.35rem;list-style:none;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);
  box-shadow:0 12px 30px rgba(6,50,92,.16)}
.dil__liste a{display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;padding:.55em .7em;border-radius:var(--r-sm);
  color:var(--navy-800);font-size:.93rem;font-weight:500;white-space:nowrap}
.dil__liste a:hover,.dil__liste a:focus-visible{background:var(--navy-050);color:var(--accent)}
.dil__liste a.etkin{color:var(--accent);font-weight:600}
.dil__kisa{font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.dil__liste a.etkin .dil__kisa,.dil__liste a:hover .dil__kisa{color:inherit}

/* açılır panel
   Konum .mega'ya değil .nav'a göre: üç panel de menünün SAĞ kenarına
   hizalanıyor. Böylece hepsi aynı yerde açılıyor (öğeden öğeye zıplamıyor)
   ve geniş panel ekranın dışına taşamıyor — .mega'ya göre hizalıyken
   Ürünler paneli sağdan taşıyordu. */
.nav{position:relative}
.mega{position:static}
.mega__panel{position:absolute;top:calc(100% + 12px);right:0;
  width:min(94vw,calc(var(--mega-sutun,3) * 210px));
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 18px 50px rgba(6,50,92,.13);padding:.7rem .7rem .2rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
/* Tetikleyiciyle panel arasındaki boşluk imleçle geçilirken panel
   kapanıyordu; görünmez bir köprü boşluğu kapatıyor. */
.mega__panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mega:hover .mega__panel,.mega:focus-within .mega__panel{opacity:1;visibility:visible;transform:none}

/* Sütunlar EŞİT dolsun: satır sayısı şablondan geliyor, öğeler sütun sütun
   akıyor. Satır satır aksaydı son sütunda tek başına kalan öğeler olurdu. */
.mega__grid{display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(var(--mega-satir,3),auto);
  grid-auto-columns:1fr;gap:1px}
.mega__panel a{display:block;padding:.62em .7em;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:500;color:var(--navy-800);line-height:1.35}
.mega__panel a:hover{background:var(--navy-050);color:var(--accent)}
.mega__tum{margin-top:.45rem;border-top:1px solid var(--line-2);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  font-size:.85rem!important;font-weight:600!important;color:var(--accent)!important;
  display:flex!important;align-items:center;gap:.4em}
.mega__tum .ok{transition:transform .2s var(--ease)}
.mega__tum:hover .ok{transform:translateX(3px)}

/* mobil */
.mnu-btn{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.mnu-btn span{display:block;width:24px;height:2px;background:var(--navy-800);margin:5px 0;
  transition:transform .25s var(--ease),opacity .2s}
.mnu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.mnu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:980px){
  .mnu-btn{display:block}
  .nav{position:fixed;inset:76px 0 0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:1.5rem var(--gut) 3rem;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s var(--ease);margin:0}
  .nav[data-acik=true]{transform:none}
  .nav a{padding:1em 0;border-bottom:1px solid var(--line-2);font-size:1.1rem;border-radius:0}
  .nav a[aria-current]::after{display:none}
  .nav{position:fixed}
  .mega__panel{position:static;opacity:1;visibility:visible;transform:none;
    width:auto;box-shadow:none;border:0;border-radius:0;padding:0 0 .5rem 1rem;
    border-left:2px solid var(--navy-100)}
  .mega__panel::before{display:none}
  /* Dar ekranda tek sütun: 24 ürün yan yana sığmaz. */
  .mega__grid{grid-auto-flow:row;grid-template-rows:none;gap:0}
  .mega__panel a{padding:.6em 0;border:0;font-size:1rem}
  .mega__tum{margin-top:.2rem;border-top:0;padding-top:.6em!important}
  /* Dil secici artik panelin icinde degil, basligin sag ustunde --
     hamburger dugmesinin hemen solunda. `margin-inline-start:auto`
     ikisini birden saga itiyor (menu `position:fixed` oldugu icin
     akista yok). Ayirici cizgi dar ekranda gereksiz, kaldiriliyor. */
  .dil{border-inline-start:0;padding-inline-start:0;margin:0;
    margin-inline-start:auto}
  .dil__dugme{padding:.45em .35em;gap:.28rem}
  .mnu-btn{margin-left:.1rem}
}

/* ============================================================== HERO ===== */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;
  min-height:min(92vh,860px);display:flex;align-items:center;
  padding:6rem 0 5rem}
/* Metin şeridi: vitrin artık üstte, kendi bölümünde. */
.hero--alt{min-height:0;padding:clamp(3.2rem,6vw,5.4rem) 0}
.hero--alt h1{font-size:clamp(2rem,4vw,3.2rem)}
.hero__tuval{position:absolute;inset:0;width:100%;height:100%;opacity:.62}
/* Okunurluk perdesi. Eskiden solda TAM opak başlıyordu; metnin durduğu
   yarıda akım çizgilerinden hiçbir şey görünmüyordu. Artık solda da
   yarı saydam — çizgiler başlığın arkasından da geçiyor. Metin
   kontrastını perde yerine başlığın kendi gölgesi koruyor. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,#06325Cb8 0%,#06325Ca3 42%,
    #06325C4d 74%,transparent 100%)}
.hero__ic{position:relative;z-index:2;max-width:780px}
.hero h1{color:#fff;margin-bottom:1.1rem;
  text-shadow:0 2px 20px rgba(3,26,48,.55)}
.hero__alt{font-size:clamp(1.05rem,2vw,1.3rem);color:#96BCDA;max-width:56ch;
  line-height:1.55;margin-bottom:2.2rem;text-shadow:0 1px 14px rgba(3,26,48,.6)}
.hero .etiket{text-shadow:0 1px 12px rgba(3,26,48,.6)}
.hero__btn{display:flex;gap:1rem;flex-wrap:wrap}
.hero__serit{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent);z-index:3}
.hero__asagi{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);z-index:3;
  color:#6BA0C9;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hero__asagi i{display:block;width:1px;height:34px;background:linear-gradient(to bottom,#6BA0C9,transparent);
  animation:kay 2.2s var(--ease) infinite}
@keyframes kay{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================ BÖLÜMLER == */
.blm{padding:clamp(4rem,9vw,7.5rem) 0;position:relative;isolation:isolate}
.blm--acik{background:var(--subtle)}
.blm--koyu{background:var(--dark);color:#fff}
.blm--koyu h2,.blm--koyu h3{color:#fff}
.blm--koyu p{color:#96BCDA}
.blm__bas{max-width:720px;margin-bottom:3.2rem}
.blm__bas p{font-size:1.1rem;color:var(--text-2)}
.blm--koyu .blm__bas p{color:#96BCDA}

/* kanıt şeridi */
.kanit{background:#fff;border-block:1px solid var(--line-2);
  position:relative;isolation:isolate}
.kanit__ic{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.kanit__hc{padding:2.6rem 1.5rem;border-right:1px solid var(--line-2)}
.kanit__hc:last-child{border-right:0}
.kanit__sy{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,2.9rem);
  color:var(--navy-800);letter-spacing:-.03em;line-height:1;margin-bottom:.45rem}
.kanit__ad{font-size:.88rem;color:var(--muted);line-height:1.45}
@media (max-width:760px){.kanit__ic{grid-template-columns:1fr 1fr}
  .kanit__hc{border-bottom:1px solid var(--line-2)}
  .kanit__hc:nth-child(2n){border-right:0}}

/* kart ızgarası */
.izgara{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.kart{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:1.9rem;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.kart:hover{transform:translateY(-3px);border-color:var(--navy-200);
  box-shadow:0 14px 34px rgba(6,50,92,.09)}
.kart__no{font-family:var(--font-display);font-weight:700;font-size:.8rem;color:var(--accent);
  letter-spacing:.08em;margin-bottom:.9rem}
.kart h3{margin-bottom:.6rem;font-size:1.22rem}
.kart p{font-size:.96rem;color:var(--text-2);margin-bottom:1.2rem;flex:1}
.kart__link{font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:.4em;
  margin-top:auto}
.kart__link .ok{transition:transform .2s var(--ease)}
.kart:hover .kart__link .ok{transform:translateX(4px)}
.kart--sade{padding:1.4rem 1.6rem}
.kart--sade h3{font-size:1.05rem;margin:0}

/* ============================================================== YÖNTEM == */
.yontem{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.yontem{grid-template-columns:1fr}}
.adimlar{position:relative;padding-left:3.4rem}
.adimlar::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;
  background:var(--line)}
.adimlar__ilerle{position:absolute;left:15px;top:8px;width:2px;background:var(--accent);
  height:0;transition:height .1s linear}
.adim{position:relative;padding-bottom:2.3rem}
.adim:last-child{padding-bottom:0}
.adim__no{position:absolute;left:-3.4rem;top:0;width:32px;height:32px;border-radius:50%;
  background:#fff;border:2px solid var(--line);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--muted);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.adim[data-etkin=true] .adim__no{border-color:var(--accent);color:#fff;background:var(--accent)}
.adim h3{font-size:1.15rem;margin-bottom:.35rem}
.adim p{font-size:.97rem;color:var(--text-2);margin:0}
.mesh-kutu{position:sticky;top:120px;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:1.5rem;overflow:hidden}
.mesh-kutu svg{width:100%;height:auto;display:block}
.mesh-kutu figcaption{font-size:.82rem;color:var(--muted);margin-top:1rem;line-height:1.5}

/* ============================================================== ALINTI == */
.alinti{border-left:5px solid var(--accent);padding-left:clamp(1.4rem,3vw,2.6rem)}
.alinti blockquote{margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.28;letter-spacing:-.02em;color:#fff}
.alinti cite{display:block;margin-top:1.3rem;font-style:normal;font-size:1rem;
  color:#96BCDA;font-family:var(--font-text)}

/* ============================================================== SEKMELER = */
.sekme-bar{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:2rem}
.sekme{font-family:var(--font-text);font-size:.9rem;font-weight:500;padding:.6em 1.15em;
  border:1px solid var(--line);background:#fff;border-radius:999px;cursor:pointer;
  color:var(--text-2);transition:all .2s var(--ease)}
.sekme:hover{border-color:var(--navy-300);color:var(--navy-800)}
.sekme[aria-selected=true]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.urun-lst{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.urun{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:1rem 1.2rem;font-weight:500;font-size:.98rem;color:var(--navy-800);
  display:flex;align-items:center;gap:.85rem;transition:all .2s var(--ease)}
.urun:hover{border-color:var(--navy-200);transform:translateY(-2px)}
.urun[hidden]{display:none}
/* Menüden çapayla gelinen kart: yapışkan başlığın altında kalmasın ve
   hangisine gelindiği görünsün. */
.urun{scroll-margin-top:100px;align-items:flex-start}
.urun__ic{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.urun__ad{font-weight:500}
/* Karttaki not bağları: ürünü seçen kişi doğrudan o ürünün yöntem notuna
   gidebilsin. Küçük ve ikincil; kartın kendisi hâlâ ürün adını okutuyor. */
.urun__not{display:flex;flex-wrap:wrap;gap:.2rem .5rem}
.urun__not a{font-size:.78rem;line-height:1.35;color:var(--muted);
  border-bottom:1px solid transparent}
.urun__not a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Sektör sayfasındaki ilgili notlar */
.not-bag{list-style:none;padding:0;margin:0;display:grid;gap:.15rem;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.not-bag a{display:flex;align-items:baseline;gap:.5em;padding:.75em .9em;
  border-radius:var(--r-sm);font-weight:500;color:var(--navy-800);
  font-size:.97rem;line-height:1.4}
.not-bag a:hover{background:#fff;color:var(--accent)}
.not-bag .ok{margin-left:auto;transition:transform .2s var(--ease);flex:0 0 auto}
.not-bag a:hover .ok{transform:translateX(3px)}
.not-bag__tum{display:inline-flex;align-items:center;gap:.4em;margin-top:1.4rem;
  font-weight:600;font-size:.92rem;color:var(--accent)}
.not-bag__tum .ok{transition:transform .2s var(--ease)}
.not-bag__tum:hover .ok{transform:translateX(3px)}
.urun:target{border-color:var(--accent);
  box-shadow:0 0 0 3px #D94A2826}
@media (prefers-reduced-motion:no-preference){
  .urun:target{animation:urun-vurgu 1.8s var(--ease)}
  @keyframes urun-vurgu{
    0%,42%{box-shadow:0 0 0 6px #D94A283d}
    100%{box-shadow:0 0 0 3px #D94A2826}}}

/* ================================================================ İKON == */
/* 22 ikon ikonlar.py icinde tanimli; sayfa basinda gizli bir <svg> sprite
   olarak basiliyor, ek istek yok. Renk currentColor. */
.ikon{width:1.8em;height:1.8em;flex:0 0 auto;display:inline-block;
  vertical-align:middle;color:var(--accent)}
.ikon--lg{width:3.2rem;height:3.2rem}
.ikon--xl{width:4.6rem;height:4.6rem}
.kart--sade .ikon{margin-bottom:1rem;transition:transform .25s var(--ease)}
.kart--sade:hover .ikon{transform:translateY(-2px)}
.kart__ikon{margin-bottom:1.2rem}
.sbas__ikon{display:block;margin-bottom:1.2rem;color:var(--accent)}
.urun .ikon{color:var(--navy-500)}
.urun:hover .ikon{color:var(--accent)}
.blm--koyu .ikon,.hero .ikon{color:#F7941E}

/* ================================================================ CTA ==== */
.cta{background:var(--dark);color:#fff;border-radius:var(--r-lg);
  padding:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:1fr auto;
  gap:2rem;align-items:center;position:relative;overflow:hidden;
  isolation:isolate}
.cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent)}
.cta h2{color:#fff;margin-bottom:.5rem}
.cta p{color:#96BCDA;margin:0;font-size:1.05rem}
@media (max-width:760px){.cta{grid-template-columns:1fr}}

/* ============================================================== İÇERİK == */
.yazi{font-size:1.05rem}
.yazi h2{margin-top:2.6rem}
.yazi h3{margin-top:2rem}
.yazi ul,.yazi ol{padding-left:1.3em;margin:0 0 1.2em}
.yazi li{margin-bottom:.45em}
.yazi li::marker{color:var(--accent)}
.yazi img{border-radius:var(--r-md);border:1px solid var(--line-2);margin:1.8rem 0}
.yazi figure{margin:1.8rem 0}
.yazi figcaption{font-size:.87rem;color:var(--muted);margin-top:.6rem}
.yazi table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.95rem}
.yazi th{background:var(--navy-600);color:#fff;text-align:left;padding:.7em .9em;font-weight:600}
.yazi td{padding:.65em .9em;border-bottom:1px solid var(--line-2)}
.yazi tr:nth-child(even) td{background:var(--slate-100)}
.yazi blockquote{border-left:4px solid var(--accent);margin:1.8rem 0;padding:.3rem 0 .3rem 1.4rem;
  color:var(--text-2);font-size:1.08rem}
.yazi code{background:var(--slate-100);padding:.15em .4em;border-radius:3px;font-size:.9em}
.yazi pre{background:var(--navy-900);color:#e6eef6;padding:1.2rem;border-radius:var(--r-md);
  overflow-x:auto;font-size:.88rem}
.yazi pre code{background:none;padding:0;color:inherit}

/* sayfa başlığı */
.sbas{background:var(--subtle);border-bottom:1px solid var(--line-2);
  position:relative;isolation:isolate;
  padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(2.2rem,4vw,3.2rem)}
.sbas h1{margin-bottom:.6rem}
.sbas p{font-size:1.12rem;color:var(--text-2);max-width:62ch;margin:0}
.kirinti{font-size:.86rem;color:var(--muted);margin-bottom:1.1rem;display:flex;gap:.5rem;align-items:center}
.kirinti a{color:var(--muted)}
.kirinti a:hover{color:var(--accent)}

/* not listesi */
.not-lst{display:grid;gap:0}
.not-sat{display:grid;grid-template-columns:62px 1fr;gap:1.6rem;padding:1.9rem 0;
  border-bottom:1px solid var(--line-2);align-items:start;transition:background .2s var(--ease)}
.not-sat:hover{background:var(--surface)}
/* Tarih yerine sıra numarası: notlar güncelliğe değil konuya göre okunuyor,
   tarih görmek eski notu değersiz gösteriyordu. Numara hizmet kartlarındaki
   üslupla aynı. */
.not-sat__no{font-family:var(--font-display);font-weight:700;font-size:.82rem;
  color:var(--accent);letter-spacing:.08em;padding-top:.45rem}
.not-sat h3{margin-bottom:.4rem;font-size:1.25rem}
.not-sat p{margin:0;color:var(--text-2);font-size:.98rem}
@media (max-width:640px){.not-sat{grid-template-columns:1fr;gap:.5rem}}

/* ============================================================== ALTBİLGİ = */
.alt{background:var(--dark);color:#96BCDA;padding:4rem 0 2rem;margin-top:0;
  position:relative;isolation:isolate}
.alt__ic{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
@media (max-width:900px){.alt__ic{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.alt__ic{grid-template-columns:1fr}}
.alt img{height:32px;width:auto;margin-bottom:1.2rem}
.alt h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:1rem;font-family:var(--font-text);font-weight:600}
.alt a{color:#96BCDA;display:block;padding:.3em 0;font-size:.95rem}
.alt a:hover{color:#F7941E}
.alt p{font-size:.93rem;line-height:1.6;max-width:34ch}
.alt__son{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.11);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;color:#6BA0C9}

/* ============================================================== FORM ==== */
/* İletişim sayfası: solda form, sağda "ilk görüşmede ne konuşuruz".
   Bu ızgara bir dönem `style` NITELIGINDE yazılıydı ve aynı etikette iki
   `class` niteliği vardı — HTML ayrıştırıcısı ikincisini yok sayıyor, yani
   `.ilt-kap` öğeye hiç ulaşmıyordu. Sonuç: dar ekranda tek sütuna hiç
   inmiyordu, sağdaki sütun ekranın dışında kalıyordu ve görmek için sayfayı
   yana kaydırmak gerekiyordu.
   Ders: DUZEN kurallarini `style` niteligine yazmayin. Satır içi stil,
   medya sorgusuyla ezilemiyor. */
.ilt-kap{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,6vw,4.5rem);align-items:start}
@media (max-width:860px){
  .ilt-kap{grid-template-columns:1fr;gap:2.5rem}
  /* Tek sütunda yan bilgi formdan SONRA gelsin; ziyaretçi önce formu
     görsün, açıklamayı okumak isteyen aşağı insin. */
  .ilt-kap > aside{order:2}
}

/* `min-width:0` ve `width:100%` SART. Izgara ogelerinin varsayilan
   `min-width` degeri `auto`, yani icerigi kadar genis olmak zorundalar.
   Uzun secenekli bir <select> -- Ingilizce'de "Electronics Cooling and
   Thermal Management" gibi -- bu yuzden kabi disari itiyordu: iletisim
   sayfasi telefonda 13 px tasiyordu ve TR'de gorunmuyordu, cunku Turkce
   secenekler daha kisa. */
.form{display:grid;gap:1.1rem;max-width:620px;min-width:0}
.alan{display:grid;gap:.4rem;min-width:0}
.alan label{font-size:.9rem;font-weight:600;color:var(--navy-800)}
.alan input,.alan textarea,.alan select{font-family:var(--font-text);font-size:1rem;
  width:100%;min-width:0;max-width:100%;
  padding:.8em .95em;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;color:var(--text);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.alan input:focus,.alan textarea:focus,.alan select:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px #BCD5E9}
.alan textarea{min-height:150px;resize:vertical}
.onay{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--text-2)}
.onay input{margin-top:.2rem;width:18px;height:18px;flex:0 0 auto;accent-color:var(--accent)}
.form__not{font-size:.86rem;color:var(--muted)}

/* ========================================================== VİTRİN ====== */
/* Sahne orani GORSELIN kendi orani (1376x768 = 1.792). Eskiden 11/6.6
   (1.667) idi ve object-fit:cover genisligin %7'sini kesiyordu; ustune pan
   yakinlasmasi binince kayip buyuyordu. Oran esitlenince yanlardan kirpma
   sifira iniyor, geriye yalniz pan'in kirptigi kaliyor. */
.vitrin__sahne{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:#06325C;aspect-ratio:1376/768;
  box-shadow:0 26px 70px rgba(0,0,0,.34)}
.vit{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden}
.vit[data-etkin=true]{opacity:1;visibility:visible}
.vit__kat{position:absolute;inset:0}
.vit__kat img,.vit__kat video{width:100%;height:100%;object-fit:cover;display:block}

/* --k, CFD katmaninin acilma orani. KAYITSIZ bir ozel ozellik ara degerlere
   girmez; bu yuzden @property ile yuzde olarak kaydediyoruz. Boylece --k'nin
   kendisi gecise girer, clip-path ve cizgi konumu onu takip eder. */
@property --k{syntax:"<percentage>";inherits:true;initial-value:100%}
.vit{--k:100%;transition:opacity .3s var(--ease),visibility .3s,
  --k 1.15s cubic-bezier(.65,.02,.25,1)}
.vit[data-etkin=true]{transition:opacity .5s var(--ease) .24s,visibility 0s,
  --k 1.15s cubic-bezier(.65,.02,.25,1)}
.vit--elle{transition:opacity .3s var(--ease),visibility .3s}

/* CFD katmani gercek gorselin uzerini soldan saga kapatir */
.vit__kat--cfd{clip-path:inset(0 0 0 var(--k))}
.vit__cizgi{position:absolute;top:0;bottom:0;left:var(--k);width:2px;
  background:#F7941E;box-shadow:0 0 14px rgba(249,161,24,.6);
  z-index:4;pointer-events:none}
.vit__cizgi::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);border-radius:50%;background:#F7941E;
  box-shadow:0 2px 12px rgba(0,0,0,.35)}

.vit__rozet{position:absolute;top:14px;z-index:5;font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;padding:.45em .8em;border-radius:4px;
  backdrop-filter:blur(6px)}
.vit__rozet--sol{left:14px;background:rgba(255,255,255,.14);color:#fff}
.vit__rozet--sag{right:14px;background:rgba(249,161,24,.92);color:#06325C}

/* gercek gorsel yoksa gosterilen alan */
.vit__bos{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.7rem;text-align:center;
  padding:2rem 2rem 3.6rem;padding-right:calc(2rem + 100% - var(--k));
  background:
    repeating-linear-gradient(135deg,#0A3F6E 0 14px,#06325C 14px 28px)}
.vit__bos-ad{font-family:var(--font-display);font-weight:700;color:#fff;
  font-size:clamp(1.1rem,2.4vw,1.6rem)}
.vit__bos-not{color:#96BCDA;font-size:.92rem;max-width:42ch;line-height:1.5}
.vit__bos code{word-break:break-all}
.vit__bos code{font-size:.78rem;color:#F7941E;background:rgba(0,0,0,.35);
  padding:.35em .7em;border-radius:4px}

.vit__alt-yazi{position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:2.6rem 1.5rem 1.2rem;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.3rem 1rem;
  background:linear-gradient(to top,rgba(6,50,92,.92),rgba(6,50,92,.55) 55%,transparent)}
.vit__alt-yazi strong{font-family:var(--font-display);font-size:1.12rem;color:#fff}
.vit__alt-yazi a{color:#F7941E;font-weight:600;font-size:.9rem;white-space:nowrap}

.vitrin__seritler{display:grid;gap:.55rem;margin-top:1.1rem}
.vitrin__bar{display:grid;grid-template-columns:repeat(var(--vit-sutun,8),1fr);
  gap:.55rem}
.vitrin__sek{display:block;position:relative;padding:0;cursor:pointer;
  border-radius:var(--r-sm);overflow:hidden;background:#0A3F6E;
  border:1px solid rgba(255,255,255,.14);
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.vitrin__sek-gor{display:block;aspect-ratio:11/6.6;overflow:hidden}
.vitrin__sek-gor img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.78;filter:saturate(.8);transition:opacity .25s,filter .25s}
.vitrin__sek-ad{display:block;font-family:var(--font-text);font-weight:600;
  font-size:.7rem;line-height:1.25;letter-spacing:.01em;
  color:#96BCDA;padding:.5rem .55rem .55rem;text-align:left;
  transition:color .25s}
.vitrin__sek:hover{border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.vitrin__sek:hover .vitrin__sek-gor img{opacity:1;filter:none}
.vitrin__sek:hover .vitrin__sek-ad{color:#fff}
.vitrin__sek[aria-selected=true]{border-color:#D94A28}
.vitrin__sek[aria-selected=true] .vitrin__sek-gor img{opacity:1;filter:none}
.vitrin__sek[aria-selected=true] .vitrin__sek-ad{color:#fff}
.vitrin__sek[aria-selected=true]::after{content:"";position:absolute;
  left:0;right:0;bottom:0;height:3px;background:#D94A28}
/* Dar ekran: satir bolumu HTML'de sabit oldugu icin sarma yapilamaz —
   sarilirsa yine "son satirda tek gorsel" durumu olusur. Satirlar oldugu
   gibi kalir, serit yana kaydirilir. */
@media (max-width:1080px){
  /* Sag kenardaki solma, seridin devam ettigini gosteren tek isaret.
     Olmadan son gorunen kucuk resim rastgele kesilmis gibi duruyor ve
     kaydirilabildigi anlasilmiyor -- 9 sektorun ancak 4'u sigiyor. */
  .vitrin__seritler{overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:.35rem;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .vitrin__bar{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:minmax(118px,1fr)}
  .vitrin__sek{scroll-snap-align:start}}
@media (max-width:720px){.vitrin__bar{
  grid-auto-columns:minmax(84px,1fr);gap:.4rem}
  .vitrin__sek-ad{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;padding:0}
  .vitrin__sek[aria-selected=true]::after{height:2px}}

@media (max-width:640px){
  /* NOT: sahne oranini burada ayarlamak ise yaramaz — her iki vitrin de
     .vitrin-ust ve o kural aspect-ratio'yu ezip yukseklik veriyor.
     Telefon orani icin asagidaki (max-width:720px) bloguna bakin. */
  .vit__alt-yazi{padding:2.2rem 1rem 1rem}
  .vit__rozet{font-size:.6rem;top:10px}
}
@media (prefers-reduced-motion:reduce){
  .vit{transition:none}
}

/* ------------------------------------------------- VİTRİN HAREKETİ ----
   Görseller duruyorken sahne fotoğraf gibi donuk kalıyordu. Her sektöre
   ayrı bir yavaş hareket verildi: yaklaşma, uzaklaşma, kayma, çapraz,
   hafif dönme. İki katman AYNI dönüşümü alır — yoksa sol ve sağ yarı
   birbirinden kayar ve karşılaştırma bozulur.

   Kurallar:
   * en küçük ölçek 1.03 — kenar hiçbir anda açıkta kalmasın.
     1.4% kayma icin gereken en az olcek 1.028, 0.5° dönme icin ~1.02;
     1.03 ikisini de karsiliyor. Doner kareler yine de 1.06'dan basliyor.
   * en BUYUK olcek 1.11. Eskiden 1.19 idi ve tek basina her iki yonden
     %16 kirpiyordu — kirpma sikayetinin en buyuk kalemi buydu.
   * dönme en fazla 0.5°, kayma en fazla %1.4
   * doğrusal hız; 7–9 sn'de tamamlanır, slayt 5 sn durur, yani
     ziyaretçi yayın üçte ikisini görür — fark edilir ama yormaz
   * fare üstündeyken ve çizgi sürüklenirken durur
   * site.yaml içindeki `vitrin_hareket: false` ile tamamen kapanır        */
.vit__kat img,.vit__kat video{transform-origin:50% 50%;backface-visibility:hidden}
.vitrin-ust--hareket .vit[data-etkin=true] .vit__kat img,
.vitrin-ust--hareket .vit[data-etkin=true] .vit__kat video{
  animation:var(--vh-ad,vh-yak) var(--vh-sure,11s) linear both;
  will-change:transform}
.vitrin:hover .vit__kat img,.vitrin:hover .vit__kat video,
.vit--elle .vit__kat img,.vit--elle .vit__kat video{animation-play-state:paused}

.vit[data-hareket="0"]{--vh-ad:vh-yak;--vh-sure:8s}
.vit[data-hareket="1"]{--vh-ad:vh-sag;--vh-sure:7s}
.vit[data-hareket="2"]{--vh-ad:vh-capraz;--vh-sure:8s}
.vit[data-hareket="3"]{--vh-ad:vh-uzak;--vh-sure:9s}
.vit[data-hareket="4"]{--vh-ad:vh-sol;--vh-sure:7s}
.vit[data-hareket="5"]{--vh-ad:vh-don;--vh-sure:8s}
.vit[data-hareket="6"]{--vh-ad:vh-capraz2;--vh-sure:8s}
.vit[data-hareket="7"]{--vh-ad:vh-don2;--vh-sure:9s}

@keyframes vh-yak{from{transform:scale(1.03)}to{transform:scale(1.11)}}
@keyframes vh-uzak{from{transform:scale(1.10)}to{transform:scale(1.03)}}
@keyframes vh-sag{from{transform:scale(1.06) translateX(-1.4%)}
                  to{transform:scale(1.06) translateX(1.4%)}}
@keyframes vh-sol{from{transform:scale(1.06) translateX(1.4%)}
                  to{transform:scale(1.06) translateX(-1.4%)}}
@keyframes vh-capraz{from{transform:scale(1.05) translate(-1.2%,-1.1%)}
                     to{transform:scale(1.11) translate(1.2%,1.1%)}}
@keyframes vh-capraz2{from{transform:scale(1.10) translate(1.2%,-1.1%)}
                      to{transform:scale(1.04) translate(-1.2%,1.1%)}}
@keyframes vh-don{from{transform:scale(1.06) rotate(-.5deg)}
                  to{transform:scale(1.11) rotate(.5deg)}}
@keyframes vh-don2{from{transform:scale(1.09) rotate(.45deg) translateX(.7%)}
                   to{transform:scale(1.06) rotate(-.45deg) translateX(-.7%)}}

/* Hareket azaltma tercihi: kural hareket tanimlarindan SONRA gelmeli,
   ozgulukler esit — once yazilirsa hicbir ise yaramiyor. */
@media (prefers-reduced-motion:reduce){
  .vitrin-ust--hareket .vit[data-etkin=true] .vit__kat img,
  .vitrin-ust--hareket .vit[data-etkin=true] .vit__kat video{
    animation:none;transform:none}
}

/* ÜST VİTRİN — kenardan kenara sahne, altında şerit */
.vitrin-ust{background:var(--dark);padding-bottom:clamp(1rem,2vw,1.6rem)}
/* Sahne kenardan kenara, yani GENISLIGI ekran belirliyor. Yukseklik sabit
   birakilirsa kutu orani ekranla degisir ve genis ekranda 3:1'e kadar acilir;
   gorseller 1.792:1 oldugu icin yuksekligin yarisina yakini kesiliyordu.
   Yukseklik artik genislige BAGLI: vw/1.9. Gorunum yuksekligi tavan (72vh),
   yoksa uzun ekranlarda sahne ekrani yutar; alt/ust sinirlar da duruyor.
   Tam kirpmasizlik icin vw/1.792 gerekirdi ama o, 1440x900'de 803 px yuksek
   bir kahraman demek — kenardan kenara gorunumle bagdasmiyor. Kalan kirpmayi
   sifirlamak isterseniz urunler sayfasindaki .vitrin-ust--oran yaklasimi
   (oran birebir, genislik sinirli, ortalanmis) hazir duruyor. */
.vitrin-ust .vitrin__sahne{border-radius:0;aspect-ratio:auto;
  height:clamp(300px,min(calc(100vw / 1.9),72vh),760px)}
.vitrin-ust .vit__alt-yazi{padding:3.4rem 0 1.1rem}
.vitrin-ust .vit__alt-ic{display:flex;align-items:baseline;gap:1rem;
  flex-wrap:wrap}
.vitrin-ust .vit__alt-yazi strong{font-size:clamp(1.05rem,2vw,1.45rem)}
.vitrin-ust .vit__rozet{top:18px}
.vitrin-ust .vit__rozet--sol{left:var(--gut)}
.vitrin-ust .vit__rozet--sag{right:var(--gut)}
.vitrin-ust .vitrin__seritler{gap:.5rem;margin-top:.9rem}
.vitrin-ust .vitrin__bar{gap:.5rem}
.vit__alt-not{color:#96BCDA;font-size:.9rem}

/* Oranli sahne — kirpma olmasin diye.
   Kenardan kenara sahne genis ekranda 3:1'e kadar aciliyordu; gorseller
   1376x768 (1.792:1) oldugu icin object-fit:cover yuksekligin %40'indan
   fazlasini kesiyordu. Urun fotografinda bu kabul edilemez: urunun kendisi
   kadrajin disina cikiyor. Sahne artik gorselin kendi oranini koruyor;
   genislik 78vh * oran ile sinirli, boylece yukseklik de ekrani asmiyor. */
.vitrin-ust--oran .vitrin__sahne{height:auto;aspect-ratio:var(--vit-oran,1.792);
  width:min(100%,calc(78vh * var(--vit-oran,1.792)));max-width:1680px;
  margin-inline:auto;border-radius:var(--r-lg)}
.vitrin-ust--oran .vit__rozet--sol{left:18px}
.vitrin-ust--oran .vit__rozet--sag{right:18px}
.vitrin-ust--oran .vit__alt-yazi{padding:3rem 1.6rem 1.1rem}
.vitrin-ust--oran .vit__alt-ic{padding:0}
/* Oranli sahnede hareket daha yumusak. Kadraj gorselin tamamini
   gosteriyor; buyuk olcek yeniden kirpma demek olurdu. En kucuk olcek
   1.03, oteleme en cok %0.8, donme en cok 0.3 derece — kenar hicbir
   anda acikta kalmiyor ((s-1)/2 = %1.5 pay, harcanan en cok %1.0). */
.vitrin-ust--oran .vit[data-hareket="0"]{--vh-ad:vhy-yak}
.vitrin-ust--oran .vit[data-hareket="1"]{--vh-ad:vhy-sag}
.vitrin-ust--oran .vit[data-hareket="2"]{--vh-ad:vhy-capraz}
.vitrin-ust--oran .vit[data-hareket="3"]{--vh-ad:vhy-uzak}
.vitrin-ust--oran .vit[data-hareket="4"]{--vh-ad:vhy-sol}
.vitrin-ust--oran .vit[data-hareket="5"]{--vh-ad:vhy-don}
.vitrin-ust--oran .vit[data-hareket="6"]{--vh-ad:vhy-capraz2}
.vitrin-ust--oran .vit[data-hareket="7"]{--vh-ad:vhy-don2}
@keyframes vhy-yak{from{transform:scale(1.03)}to{transform:scale(1.09)}}
@keyframes vhy-uzak{from{transform:scale(1.08)}to{transform:scale(1.03)}}
@keyframes vhy-sag{from{transform:scale(1.05) translateX(-.8%)}
                   to{transform:scale(1.05) translateX(.8%)}}
@keyframes vhy-sol{from{transform:scale(1.05) translateX(.8%)}
                   to{transform:scale(1.05) translateX(-.8%)}}
@keyframes vhy-capraz{from{transform:scale(1.04) translate(-.7%,-.6%)}
                      to{transform:scale(1.09) translate(.7%,.6%)}}
@keyframes vhy-capraz2{from{transform:scale(1.08) translate(.7%,-.6%)}
                       to{transform:scale(1.04) translate(-.7%,.6%)}}
@keyframes vhy-don{from{transform:scale(1.05) rotate(-.3deg)}
                   to{transform:scale(1.09) rotate(.3deg)}}
@keyframes vhy-don2{from{transform:scale(1.08) rotate(.28deg) translateX(.4%)}
                    to{transform:scale(1.05) rotate(-.28deg) translateX(-.4%)}}
@media (max-width:720px){
  .vitrin-ust--oran .vitrin__sahne{width:100%;border-radius:0}
  .vitrin-ust--oran .vit__alt-yazi{padding:2.4rem 1rem .9rem}
}
@media (max-width:1080px){
  .vitrin-ust .vitrin__bar{grid-template-columns:none}
}
@media (max-width:720px){
  /* Telefonda 44vh sahneyi KARE'ye yaklastiriyordu (390x844'te oran 1.08) ve
     genisligin %40'i kesiliyordu. Yukseklik burada da genislige bagli. */
  .vitrin-ust .vitrin__sahne{height:clamp(200px,calc(100vw / 1.55),360px)}
  .vitrin-ust .vit__alt-yazi{padding:2.6rem 0 .8rem}
  .vitrin-ust .vit__bos-not{font-size:.84rem}
}

/* ========================================================== ZEMİN DOKU ==
   Düz zeminler yerine CFD'nin kendi yapıları: ağ kesitleri ve akış
   alanları. Hepsi `desenler.py` içinde üretilip ayrı .svg olarak servis
   edilir. Doku, bölümün kendi arka planının üstünde ama içeriğin altında
   duran bir ::before katmanındadır.

   SÜREKLİLİK. Desenler 480 px'de bir tekrar eder ama TAM DİKİŞSİZDİR:
   ağ bir simit üzerinde kurulduğu için karo ekinde ne düz çizgi vardır
   ne kesik hücre. Bölümün içinde hiçbir yerde kesiklik görünmez.

   Bir ara karo kenarına, bölüm sınırında konform arayüz oluşsun diye
   düz bir düğüm satırı konmuştu ve desen `background-repeat: round` ile
   bölüm yüksekliğine yuvarlanıyordu. Sınırda işe yarıyordu ama o satır
   karo her tekrar ettiğinde çiziliyor, yani bölümün İÇİNDE 240 px'de bir
   yatay kesik olarak görünüyordu; üstelik yuvarlama hücreleri %10-30
   geriyordu. İkisi de kaldırıldı.

   Bölüm sınırındaki süreklilik artık fazla sağlanıyor: site.js her
   dokulu bölüme sayfanın tepesine göre hesaplanmış bir kaydırma veriyor
   (--doku-faz). Bütün bölümler böylece TEK bir sonsuz ağ ızgarasının
   pencereleri oluyor — sıra ritmi sınırda kaymıyor.

   Parallaks yalnız yatay (ağ bölümlerinde): dikey kayma fazı bozardı.
   Ağ olmayan desenlerde (akım, vektör) dikey kayma da açık.          */
@property --fx{syntax:"<number>";inherits:true;initial-value:0}
@property --fy{syntax:"<number>";inherits:true;initial-value:0}

.blm::before,.sbas::before,.kanit::before,.alt::before,.cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--doku);
  background-size:480px 480px;
  background-repeat:repeat;
  background-position:calc(var(--fx,0) * var(--doku-kay,9px))
                      calc(var(--doku-faz,0px) +
                           var(--fy,0) * var(--doku-kay-y,0px));
  transition:background-position .55s cubic-bezier(.2,.7,.3,1)}

/* ağ desenleri */
.blm{--doku:url("/varliklar/desen/tetra.9b251bbd.svg")}
.blm--acik{--doku:url("/varliklar/desen/hexa.c8c54dd5.svg")}
/* .sbas iç sayfaların başlık şeridi; .blm--pol ise ana sayfada poligonal
   ağın da görünmesi için (sektörler + ürünler bölümü). */
.sbas,.blm--pol,.kanit{--doku:url("/varliklar/desen/poligon.d6b90a6a.svg")}

/* akış desenleri — ağ değil, dikey kayma da var */
.blm--koyu{--doku:url("/varliklar/desen/akim.bcbbb424.svg");--doku-kay:13px;--doku-kay-y:13px}
.cta{--doku:url("/varliklar/desen/vektor.2cc48a7b.svg");--doku-kay:11px;--doku-kay-y:11px}
.alt{--doku:url("/varliklar/desen/vektor.2cc48a7b.svg");--doku-kay:7px;--doku-kay-y:7px}

@media (prefers-reduced-motion:reduce){
  .blm::before,.sbas::before,.kanit::before,.alt::before,
  .cta::after{background-position:0 var(--doku-faz,0px);transition:none}
}

/* ============================================================== BELİRME = */
[data-bel]{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-bel][data-gor=true]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-bel]{opacity:1!important;transform:none!important;transition:none!important}
  .hero__asagi i{animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ========================================================= SAĞDAN SOLA == */
/* Arapça. base.html <html dir="rtl"> basıyor (site.yaml → rtl_diller).

   Tarayıcı kendiliğinden aynalayan şeyler: flex/grid satır yönü, metin
   hizası, liste imleri ve `*-inline-*` mantıksal özellikler. AynalanMAyan
   şeyler: `left/right`, `margin-left`, `border-left` gibi FİZİKSEL
   özellikler — aşağıdaki blok yalnızca onları düzeltiyor.

   Blok bilerek `[dir=rtl]` ile sınırlı ve dosyanın sonunda: mevcut
   kuralların hiçbirine dokunulmuyor, diğer beş dil bu bloğu hiç
   görmüyor. */

/* başlık: logo sağa, menü ve dil seçici sola */
[dir=rtl] .nav{margin-left:0;margin-right:auto}
[dir=rtl] .mnu-btn{margin-left:0;margin-right:auto}
[dir=rtl] .mega__panel{right:auto;left:0}
[dir=rtl] .atla{left:auto;right:-9999px}
[dir=rtl] .atla:focus{right:0}
@media (max-width:980px){
  /* Mobilde dil seçici `margin-inline-start:auto` ile zaten sola
     gidiyor; hamburger onun solunda kalsın. */
  [dir=rtl] .mnu-btn{margin-right:0;margin-left:.1rem}
  [dir=rtl] .nav{margin-right:0}
  [dir=rtl] .mega__panel{padding:0 1rem .5rem 0;
    border-left:0;border-right:2px solid var(--navy-100)}
}

/* turuncu vurgu şeritleri sayfanın sağ kenarına */
[dir=rtl] .hero__serit{left:auto;right:0}
[dir=rtl] .cta::before{left:auto;right:0}

/* kanıt şeridi: ayırıcı çizgi hücrenin iç kenarında kalsın */
[dir=rtl] .kanit__hc{border-right:0;border-left:1px solid var(--line-2)}
[dir=rtl] .kanit__hc:last-child{border-left:0}
@media (max-width:760px){
  [dir=rtl] .kanit__hc:nth-child(2n){border-left:0}
  [dir=rtl] .kanit__hc:nth-child(2n+1){border-left:1px solid var(--line-2)}
}

/* yöntem adımları: dikey çizgi ve numaralar sağa */
[dir=rtl] .adimlar{padding-left:0;padding-right:3.4rem}
[dir=rtl] .adimlar::before,[dir=rtl] .adimlar__ilerle{left:auto;right:15px}
[dir=rtl] .adim__no{left:auto;right:-3.4rem}

/* alıntı ve gövde metni */
[dir=rtl] .alinti{border-left:0;border-right:5px solid var(--accent);
  padding-left:0;padding-right:clamp(1.4rem,3vw,2.6rem)}
[dir=rtl] .yazi ul,[dir=rtl] .yazi ol{padding-left:0;padding-right:1.3em}
[dir=rtl] .yazi th{text-align:right}
[dir=rtl] .yazi blockquote{border-left:0;border-right:4px solid var(--accent);
  padding:.3rem 1.4rem .3rem 0}

/* "devamını oku" oku ters yöne baksın; hover'daki kayma da ters olsun
   (transform toplanmıyor, scaleX ile birlikte yazmak gerekiyor) */
[dir=rtl] .ok{transform:scaleX(-1)}
[dir=rtl] .btn:hover .ok,
[dir=rtl] .mega__tum:hover .ok,
[dir=rtl] .not-bag a:hover .ok,
[dir=rtl] .not-bag__tum:hover .ok{transform:scaleX(-1) translateX(3px)}
[dir=rtl] .kart:hover .kart__link .ok{transform:scaleX(-1) translateX(4px)}
[dir=rtl] .not-bag .ok{margin-left:0;margin-right:auto}

/* vitrin karşılaştırma kutusu BİLEREK olduğu gibi bırakıldı: sürgü
   konumu `--k` yüzdesiyle sol kenardan ölçülüyor ve görseller
   aynalanamaz. Yalnızca sekme başlıklarının hizası düzeltiliyor. */
[dir=rtl] .vitrin__sek-ad{text-align:right}

/* ============================================================== YAZDIR == */
@media print{
  .ust,.alt,.hero__tuval,.mnu-btn,.cta{display:none!important}
  body{font-size:11pt;background:#fff}
  .hero{min-height:0;background:#fff;color:#000;padding:1rem 0}
  .hero h1{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}