/* 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)}
/* --- teknik notun gorsel ozeti (infografik) ------------------------------
   Kendi icinde kapali: hicbir mevcut kurali degistirmiyor, yalniz `.infog`
   ve kapsayicisi uzerinde calisiyor. Gorselin kendi zemini koyu lacivert
   oldugu icin cerceve yerine yumusak bir golge veriliyor; acik zeminde
   kart gibi duruyor.                                                      */
.infog-blm{padding-top:clamp(2rem,4vw,3rem);padding-bottom:0}
.infog{margin:0}
.infog img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(16,32,56,.08),0 12px 32px -12px rgba(16,32,56,.28);
}
@media (max-width:640px){
  .infog img{border-radius:var(--r-sm)}
}

/* --- buyutec: figuru saran dugme + rozet ------------------------------
   Dugme site.js tarafindan ekleniyor (JS yoksa sade gorsel kaliyor), bu
   yuzden buradaki kurallar yalnizca o zaman devreye giriyor.            */
.infog__ac{
  display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;position:relative;border-radius:var(--r-md);
}
.infog__ac:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.infog__rozet{
  position:absolute;inset-block-end:.75rem;inset-inline-end:.75rem;
  width:2.25rem;height:2.25rem;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(10,20,36,.72);color:#fff;
  backdrop-filter:blur(2px);
  opacity:0;transition:opacity .18s ease;
  pointer-events:none;
}
.infog__rozet svg{width:1.1rem;height:1.1rem}
.infog__ac:hover .infog__rozet,
.infog__ac:focus-visible .infog__rozet{opacity:1}
/* Dokunmatikte hover yok: rozet hep gorunsun, yoksa buyutulebildigi
   hic belli olmuyor.                                                    */
@media (hover:none){ .infog__rozet{opacity:1} }
@media (prefers-reduced-motion:reduce){ .infog__rozet{transition:none} }

/* --- buyutec: tam ekran katmani --------------------------------------
   <dialog> kullaniliyor; odak tuzagi, Esc ve arkaplan tarayicidan.      */
.buyutec{
  border:0;padding:0;background:none;
  max-width:100vw;max-height:100vh;width:100%;height:100%;
  display:none;place-items:center;
  overflow:auto;
}
.buyutec[open]{display:grid}
.buyutec::backdrop{background:rgba(8,16,30,.94)}
.buyutec__gorsel{
  max-width:min(100%, 96vw);max-height:92vh;width:auto;height:auto;
  display:block;margin:auto;border-radius:var(--r-sm);
  cursor:zoom-out;
}
.buyutec__kapat{
  position:fixed;inset-block-start:.9rem;inset-inline-end:1rem;
  width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.buyutec__kapat:hover{background:rgba(255,255,255,.2)}
.buyutec__kapat:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* DAR EKRAN: 16:9 gorseli genislige sigdirmak buyutmuyor -- 390 px'lik
   telefonda 375x211 cikiyordu, satir ici halinden (350x197) farksiz.
   Burada YUKSEKLIGE sigdiriyoruz: gorsel ekrandan genis oluyor, kullanici
   yana kaydirarak okuyor. 800 px'lik ekranda 1251 px genislige cikiyor,
   yani yaziyi ~3 kat buyutuyor -- buyutecin islevi bu.
   `justify-items:start`: ortalanan bir icerik kapsayicidan genisse sol
   kenari kirpilip erisilemez hale geliyor; baslangica yaslayinca
   kaydirarak tamamina ulasiliyor.                                       */
@media (max-width:860px) and (orientation:portrait){
  .buyutec[open]{place-items:center start}
  .buyutec__gorsel{
    max-width:none;width:auto;height:88vh;max-height:88vh;margin:0;
    border-radius:0;cursor:default;
  }
}
.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}

/* Yatay parallaks TEK yerde tanımlanıyor ve iki katman da aynı değeri
   kullanıyor. Ayrı ayrı yazılsaydı fare hareketinde ince katman taban
   hücrelerin üstünden kayardı. */
.blm,.sbas,.kanit,.alt,.cta{
  --doku-x:calc(var(--fx,0) * var(--doku-kay,9px))}

.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:var(--doku-x)
                      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.47e7db1f.svg")}
.blm--acik{--doku:url("/varliklar/desen/hexa.6d57f2d1.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.da52c840.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}

/* ------------------------------------------------- YEREL SIKLAŞMA -- */
/* Ağın bazı yerlerinde hücreler 3 kat inceliyor — ağ üreticisinin o
   bölgeyi refine etmesi gibi. Üç tasarım kararı, üçü de ayrı bir
   sorunu çözüyor:

   1. AYRI KATMAN (::after). Taban desene hiç dokunulmuyor, yani mevcut
      dikişsizlik ve faz sürekliliği hiç risk almıyor. Maske `::before`'a
      konamazdı: maske bütün elemana uygulanır, taban ağı da keserdi.
      `.blm::after` ve `.sbas::after` bugüne kadar boştu.

   2. UZUN KARO (960x1440 = 2x3 taban karo). Sıklaşma taban karonun
      içine gömülseydi 480 px'de bir tekrarlar, düzenli bir yama kafesi
      görünürdü. İki boyut da 480'in tam katı olduğu için taban ağla
      kayıt birebir korunuyor: ince hücreler taban hücrelerin İÇİNE
      oturuyor.

   3. MASKE. "Yazıya denk gelmeyen yer" yerleşime bağlı, karoya değil.
      Katman yalnız içerik sütununun DIŞINDAKİ payda görünüyor; metne
      yaklaşırken 80 px boyunca yumuşakça sıfırlanıyor. Böylece hiçbir
      ekran genişliğinde metnin arkasına düşmüyor.

   Katmanın KENDİ fazı var (--doku-faz-ince) ve bu şart. Taban fazı
   480'e göre hesaplanıyor; ince katman onu kullansaydı kendi 1440'lık
   periyodu içinde 480'in katları kadar kayar, yani bölüm sınırında
   sıklaşma bölgesi ortadan ikiye bölünürdü. 1440 % 480 == 0 olduğu için
   iki faz her zaman 480'in katı kadar farklı: hem süreklilik hem kayıt
   korunuyor.

   .kanit BİLEREK DIŞARIDA: dört sütunlu grid metni sayfanın bütün
   genişliğine yayıyor, maskenin açtığı pay kartların altına denk
   gelirdi. .blm--koyu, .cta ve .alt ağ değil akış deseni kullanıyor,
   sıklaştırılacak hücreleri yok.

   1500 px EŞİĞİ ÖLÇÜMLE SEÇİLDİ, yuvarlak sayı diye değil. Maskenin
   açtığı şeritte sıklaşmanın gerçekten görünüp görünmediği genişlik
   genişlik ölçüldü (görünür alanın yüzdesi, sol / sağ):

       1440 px   %1.2 / %0.0     sağ yan hiç yok
       1460 px   %1.7 / %0.2     sağ yan hiç yok
       1480 px   %2.1 / %0.6     yetersiz
       1500 px   %2.5 / %1.1     iki yan da açılıyor  <-- eşik
       1600 px   %3.7 / %1.2
       1920 px   %4.8 / %3.3

   Altındaki genişliklerde katman çizilir ama neredeyse hiçbir şey
   göstermezdi; üstelik sol yan görünüp sağ yan görünmeyeceği için
   SİMETRİSİZ dururdu — hiç görünmemekten kötü. Odakları karo kenarına
   çekmek de denendi: sol yanı %3.7'ye çıkarıyor ama sağ yanı %0'da
   bırakıyor, yani tam da o simetrisizliği üretiyor. Eşik yükseltmek
   daha dürüst çözüm. Altında taban ağın 3B görünümü zaten duruyor. */
@media (min-width:1500px){
  @supports (mask-image:linear-gradient(90deg,#000,transparent)) or
            (-webkit-mask-image:linear-gradient(90deg,#000,transparent)){
    .blm::after,.sbas::after{
      content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
      background-image:var(--ince,none);
      background-size:960px 1440px;
      background-repeat:repeat;
      background-position:var(--doku-x) var(--doku-faz-ince,0px);
      transition:background-position .55s cubic-bezier(.2,.7,.3,1);
      --ince-yari:calc(var(--wrap) / 2);
      --ince-maske:linear-gradient(90deg,
        #000 0,
        #000 calc(50% - var(--ince-yari) - 80px),
        transparent calc(50% - var(--ince-yari)),
        transparent calc(50% + var(--ince-yari)),
        #000 calc(50% + var(--ince-yari) + 80px),
        #000 100%);
      -webkit-mask-image:var(--ince-maske);mask-image:var(--ince-maske)}

    .blm{--ince:url("/varliklar/desen/tetra_ince.76399c28.svg")}
    .blm--acik{--ince:url("/varliklar/desen/hexa_ince.0ad2e952.svg")}
    /* Her bölüm KENDİ ağının ince katmanını alıyor; karıştırılırsa ince
       çizgiler taban hücrelerin üstünden geçer. .blm--pol ve .blm--koyu
       de `.blm` olduğu için devraldıkları değer burada eziliyor —
       sırası önemli, bu kurallar .blm'den SONRA gelmeli. */
    .sbas,.blm--pol{--ince:url("/varliklar/desen/poligon_ince.f7635d1c.svg")}
    /* .blm--koyu akış deseni (akım çizgileri) kullanıyor, ağ değil —
       sıklaştırılacak hücresi yok. */
    .blm--koyu{--ince:none}
  }
}

@media (prefers-reduced-motion:reduce){
  .blm::before,.sbas::before,.kanit::before,.alt::before,
  .cta::after{background-position:0 var(--doku-faz,0px);transition:none}
  .blm::after,.sbas::after{background-position:0 var(--doku-faz-ince,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}
  /* zemin dokusu ve yerel sıklaşma katmanı kağıda basılmasın */
  .blm::before,.blm::after,.sbas::before,.sbas::after,
  .kanit::before{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}
}