/* ══════════════════════════════════════════════════════════════════════
   BAŞLIK FONTU — KENDİMİZ BARINDIRIYORUZ

   🔴 2026-09-06'ya kadar bu font `fonts.googleapis.com`'dan çekiliyordu ve
      HİÇ YÜKLENMİYORDU. Sebep kendi güvenlik başlığımızdı:
        _headers → Content-Security-Policy: ... font-src 'self'
      CSP dış kaynağı engelliyor, tarayıcı sessizce Georgia'ya düşüyordu.
      Ölçüldü: canlı sayfada document.fonts BOŞTU.

   # YAPMA: CSP'yi gevşetip Google Fonts'a dönme.
   # NEDEN: _headers'ın kendi yorumu "dışarıdan hiçbir kaynak yüklenmiyor"
   #   diyor; bağlantı bu ilkeyi zaten çiğniyordu. Ayrıca ziyaretçinin IP'si
   #   Google'a gidiyordu. Dört dosya toplam 47 KB — bedeli yok.

   ⚠ latin-ext ŞART: ğ ş İ orada. Yalnız latin alınırsa Türkçe başlıkta
     satır ortasında font değişir.
   ══════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fontlar/instrument-serif-regular-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fontlar/instrument-serif-regular-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url("/fontlar/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url("/fontlar/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --serif:"Instrument Serif","Iowan Old Style",Georgia,"Times New Roman",serif;
  --zemin:#FFFFFF; --kart:#F3F5F8; --cizgi:#E1E6ED;
  --metin:#0E1720; --metin2:#4E5A69;
  --vurgu:#1B5FBF; --vurguZemin:#E8F0FB; --vurguMetin:#12447F;
  /* Koyu zemin üstündeki bağlantı. `.alt-yasal` HER TEMADA koyudur; açık
     temanın --vurgu'su orada 2.98 kontrast veriyordu (WCAG AA 4.5 · axe
     ölçtü 2026-09-12). Türevi ayrı bir istisna olarak değil rengin YANINDA
     tutuyoruz — jeton değişince istisna sessizce yanlışa döner. */
  --vurguKoyuZemin:#7CB2FF;
  --koyu:#0B1620;
  --uyariZemin:#FDF3E2; --uyariMetin:#7A4E00; --uyariCizgi:#EBCF97;
  --altZemin:#0B1620; --altBaglanti:#E8EEF5; --altSolgun:#A9B8C8;
  --altBaslik:#8FA1B4; --altYasal:#B6C4D2; --altVurgu:#7CB2FF;
  --golge:0 1px 2px rgba(14,23,32,.05), 0 10px 30px rgba(14,23,32,.08);
  --golgeBuyuk:0 2px 6px rgba(14,23,32,.10), 0 34px 70px -22px rgba(14,23,32,.42);
}
@media (prefers-color-scheme: dark){
  :root{
    --zemin:#0B1620; --kart:#16212C; --cizgi:#233242;
    --metin:#EEF3F8; --metin2:#A8B6C6;
    --vurgu:#7CB2FF; --vurguZemin:#14273D; --vurguMetin:#B7D4FF;
    --vurguKoyuZemin:#7CB2FF;   /* koyu temada zaten aynı */
    --uyariZemin:#2C2312; --uyariMetin:#F2C871; --uyariCizgi:#5A4820;
    --altZemin:#060D14;
    --golge:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.4);
    --golgeBuyuk:0 2px 6px rgba(0,0,0,.4), 0 34px 70px -22px rgba(0,0,0,.65);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--zemin); color:var(--metin);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
/* YAPMA: height:auto'yu unutma — <img height="..."> özniteliği CSS onu geçersiz
   kılmazsa aynen uygulanır ve sayfa dikey perdeye döner (T44-k1, ölçüldü). */
img{max-width:100%; height:auto; display:block}
a{color:var(--vurgu)}
/* Çizmediğimiz yüzeyler de tasarıma ait: seçim, odak halkası, kaydırma çubuğu.
   Tarayıcı varsayılanları hiçbir tasarım sisteminin parçası değildir. */
::selection{background:color-mix(in srgb, var(--vurgu) 26%, transparent); color:var(--metin)}
:focus-visible{outline:2px solid var(--vurgu); outline-offset:3px; border-radius:6px}
html{scrollbar-color:color-mix(in srgb, var(--metin2) 45%, transparent) transparent}
.kap{max-width:1140px; margin:0 auto; padding:0 24px}

/* ---------- görünürlük animasyonu ---------- */
.gel{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.gel.ac{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .gel{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* ---------- üst bar ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent}
header.kaydi{background:color-mix(in srgb, var(--zemin) 90%, transparent);
  backdrop-filter:saturate(180%) blur(14px); border-bottom-color:var(--cizgi)}
.ust{display:flex; align-items:center; justify-content:space-between; height:66px}
.marka{display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:-.02em; font-size:18.5px;
  color:#fff; text-decoration:none; transition:color .3s}
header.kaydi .marka{color:var(--metin)}
.logo{width:30px;height:30px;flex:none}
nav a{margin-left:24px; font-size:14.5px; color:rgba(255,255,255,.86); text-decoration:none; font-weight:550; transition:color .3s}
header.kaydi nav a{color:var(--metin2)}
header.kaydi nav a:hover{color:var(--metin)}

/* ══════════════════════════════════════════════════════════════════════
   ÜST BAR — DAR EKRANDA İKİ SATIR

   🔴 2026-09-07: canlıda ölçüldü (390px) — dört bağlantı 66px'lik tek satıra
      sığmıyordu, sarıyor ve başlıktan TAŞIYORDU:
        Hikayemiz  y=-14  (ekranın üstünde, hiç görünmüyor)
        İletişim   alt=81 (başlık 67px)
      Telefondan gelen ziyaretçi "Hikayemiz"e üst menüden ULAŞAMIYORDU.
      Ürün sayfalarında beş bağlantı var, orada daha da kötüydü.

   Çözüm: 700px altında başlık iki satır olur — üstte marka + dil, altta
   bağlantılar tam genişlikte tek sıra. Yükseklik sabit değil, içerik kadar.

   # YAPMA: `.ust`'a sabit yükseklik verip nav'ı içeride sarmaya bırakma.
   # NEDEN: sarma sessizdir — konsol hatası vermez, yatay taşma yaratmaz,
   #   masaüstünde kusursuz görünür. Yalnız KUTU ÖLÇÜLÜNCE fark edilir.
   #   Ölçüt: her <a>'nın y >= 0 ve alt kenarı <= başlık yüksekliği.

   ⚠ `.ustsag{display:contents}` şart: nav ile dil `.ustsag` içinde sarılı;
     iç içe flex dış satırı bölemez. `display:contents` sarmalayıcıyı
     kaldırır, üçü de `.ust`'un doğrudan çocuğu olur.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  /* ⚠ KISAYOL KULLANMA: `padding:9px 0 8px` .kap'ın yan boşluğunu (24px)
     sıfırlıyordu; bağlantılar ekranın kenarına yapışıp kırpılıyordu. */
  .ust{height:auto; flex-wrap:wrap; row-gap:7px; padding-top:9px; padding-bottom:8px}
  .ust > .ustsag{display:contents}   /* ⚠ özgüllük şart: .ustsag{display:flex} BU BLOKTAN SONRA tanımlı */
  .marka{order:1}
  .marka span{font-size:16px}
  .dil{order:2; margin-left:auto}
  /* ⚠ SARMAYA İZİN VAR ÇÜNKÜ BAŞLIK YÜKSEKLİĞİ SERBEST (`height:auto`).
     Ölçüldü 2026-09-12: NutriCitadel sayfasına iki bölüm daha eklenince
     bağlantı sayısı 4 → 6 oldu ve 414px'e kadar SON İKİSİ EKRAN DIŞINA
     çıktı — telefondan tıklanamıyordu, ekran görüntüsünde de görünmüyordu
     (T98'in aynısı). Tek satıra zorlamak yerine satır kırılır; başlık
     büyür, hiçbir bağlantı kaybolmaz.
     # YAPMA: bunu `.ust`'a sabit yükseklik vererek çözme — sarma o zaman
     # SESSİZ olur, yalnız kutu ölçülünce fark edilir. */
  nav{order:3; flex:1 0 100%; display:flex; flex-wrap:wrap;
      justify-content:space-between; gap:7px 4px;
      padding-top:7px; border-top:1px solid rgba(255,255,255,.16)}
  header.kaydi nav{border-top-color:var(--cizgi)}
  nav a{margin-left:0; font-size:13px; white-space:nowrap}
}
@media(max-width:380px){ nav a{font-size:12px} }

/* Çapa hedefi sabit başlığın ALTINDA dursun — yoksa "Hikayemiz"e tıklayınca
   bölüm başlığı barın arkasında kalıyor. */
section[id], div[id]{scroll-margin-top:86px}
@media(max-width:700px){ section[id], div[id]{scroll-margin-top:118px} }

/* ---------- dil seçici ---------- */
/* İki dil için segment kontrol; açılır menü değil. Tek tıkla karşı dile
   geçilir ve HANGİ dilde olunduğu aynı anda görünür. */
.ustsag{display:flex; align-items:center; gap:20px}
.dil{display:inline-flex; padding:3px; border-radius:999px; gap:2px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
header.kaydi .dil{background:var(--kart); border-color:var(--cizgi)}
.dil a{
  display:block; padding:5px 12px; border-radius:999px; text-decoration:none;
  font-size:12.5px; font-weight:660; letter-spacing:.045em;
  color:rgba(255,255,255,.72); transition:background .2s, color .2s;
}
header.kaydi .dil a{color:var(--metin2)}
.dil a:hover{color:#fff}
header.kaydi .dil a:hover{color:var(--metin)}
.dil a[aria-current="true"]{background:#fff; color:var(--koyu)}
header.kaydi .dil a[aria-current="true"]{background:var(--vurgu); color:#fff}
@media(max-width:700px){
  .ustsag{gap:10px}
  .dil a{padding:4px 9px; font-size:11.5px}
}

/* Karanlık temada --vurgu AÇIK maviye döner; beyaz yazı okunmaz (ölçüldü 2.2).
   YAPMA: bu bloğu yukarı taşıma — aynı özgüllükte, SONRA gelen kural kazanır;
   ezmesi gereken kuralın ARDINDA olmalı (aynı hatayı buton renginde yaptım). */
@media (prefers-color-scheme: dark){
  header.kaydi .dil a[aria-current="true"]{background:var(--vurgu); color:#07121D}
}

/* ---------- HERO: tam genişlik fotoğraf ---------- */
.hero{position:relative; min-height:min(94vh,860px); display:flex; align-items:center;
  padding:120px 0 84px; overflow:hidden; background:var(--koyu)}
.hero-foto{position:absolute; inset:0; z-index:0}
.hero-foto img{width:100%; height:100%; object-fit:cover; opacity:.42}
.hero::after{  /* çok ince film grenli doku — düz gradyanın "dijital" hissini kırar */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter>\
<rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.hero-foto::after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(11,22,32,.95) 4%, rgba(11,22,32,.72) 46%, rgba(11,22,32,.35) 100%),
             radial-gradient(760px 420px at 78% 52%, rgba(27,95,191,.34), transparent 70%)}
.hero-ic{position:relative; z-index:1; display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:center; width:100%}
.rozet{display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px; font-size:12.5px;
  font-weight:650; letter-spacing:.02em; background:rgba(255,255,255,.12); color:#fff; margin-bottom:22px;
  border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px)}
.rozet i{width:7px;height:7px;border-radius:50%;background:#5EE8A5;display:block}
.hero h1{font-size:clamp(40px,6.4vw,76px); line-height:1.02; letter-spacing:-.038em;
  margin:0 0 22px; font-weight:790; color:#fff; text-wrap:balance}
.hero h1 span{color:#7CB2FF}
.hero p.giris{font-size:clamp(17px,2vw,20px); color:rgba(255,255,255,.8); margin:0 0 32px; max-width:33em}
.dugmeler{display:flex; gap:13px; flex-wrap:wrap}
.dugme{display:inline-block; padding:13px 24px; border-radius:12px; font-weight:660; font-size:15px;
  text-decoration:none; background:#fff; color:var(--koyu); border:1px solid transparent; transition:transform .18s, box-shadow .18s}
.dugme:hover{transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(0,0,0,.5)}
.dugme.ikincil{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28)}
.rozetler{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.magaza-rozet{display:inline-flex; flex-direction:column; line-height:1.25; padding:9px 18px;
  border-radius:11px; border:1px dashed rgba(255,255,255,.34); color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.06)}
.magaza-rozet b{font-size:14.5px; font-weight:660; color:#fff}
.magaza-rozet span{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.8}
/* ---------- hero sözü: telefon yerine tipografi ---------- */
/* Kullanıcı kararı: "her yerde uygulama resimleri var, başa daha çarpıcı bir
   şey koyalım." Telefon çerçevesi aşağıdaki bölümlerde zaten dört kez var. */
.soz{
  position:relative; margin-left:auto; max-width:430px;
  padding:44px 42px 40px; border-radius:26px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.75);
}
.soz::before{
  content:""; position:absolute; left:42px; top:-1px; width:56px; height:2px;
  background:linear-gradient(90deg,#7CB2FF,transparent);
}
.soz .bir{
  margin:0; color:#fff;
  font-family:"Instrument Serif","Iowan Old Style",Georgia,"Times New Roman",serif;
  font-size:clamp(31px,3.5vw,45px); line-height:1.14; letter-spacing:-.012em;
  font-weight:400;
}
.soz .bir em{font-style:italic; color:#9CC6FF}
.soz .ayrac{display:block; width:44px; height:1px; margin:26px 0 24px;
  background:rgba(255,255,255,.28)}
.soz .iki{
  margin:0; font-size:clamp(15.5px,1.5vw,17.5px); line-height:1.62;
  color:rgba(255,255,255,.76); letter-spacing:.002em;
}
.soz .iki b{color:#fff; font-weight:640}
@media(max-width:900px){ .soz{margin:0 auto; padding:34px 28px 32px} }

.cerceve{position:relative; width:298px; margin-left:auto; padding:11px; border-radius:42px;
  background:linear-gradient(160deg,#38434F,#0A1017); box-shadow:var(--golgeBuyuk), inset 0 0 0 1px rgba(255,255,255,.12)}
.cerceve::after{content:""; position:absolute; top:19px; left:50%; transform:translateX(-50%);
  width:88px; height:20px; border-radius:11px; background:#0A1017; z-index:2}
.telefon{border-radius:32px; width:100%; background:#fff}
@media(max-width:900px){
  .hero{padding:104px 0 64px; min-height:0}
  .hero-ic{grid-template-columns:1fr; gap:40px}
  .cerceve{margin:0 auto; width:262px}
}

/* ---------- sayı bandı ---------- */
.band{background:var(--koyu); color:#fff; border-top:1px solid rgba(255,255,255,.07)}
.band .kap{display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  padding-top:52px; padding-bottom:52px}
/* DÖRT uygulama + ortak sıfır = BEŞ öğe. Yalnız ana sayfada.
   # YAPMA: yukarıdaki `.band .kap` kuralını 5'e çevirme.
   # NEDEN: bandı CortexFarma'nın TR+EN sayfaları da kullanıyor ve onlar
   #        4 öğeli — genel kuralı değiştirmek orada BOŞ bir sütun bırakır.
   #        Eklemeli seçici, başka kolonun sayfasına dokunmadan çözer. */
.band-5 .kap{grid-template-columns:repeat(5,1fr)}
.band-5 .kap > div{padding:2px 22px}
@media(max-width:980px){.band-5 .kap{grid-template-columns:repeat(3,1fr); gap:28px 0}
  .band-5 .kap > div:nth-child(3n+1){border-left:0; padding-left:0}}
@media(max-width:700px){.band-5 .kap{grid-template-columns:repeat(2,1fr)}
  .band-5 .kap > div:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.11); padding-left:18px}
  .band-5 .kap > div:nth-child(odd){border-left:0; padding-left:0}}
.band .kap > div{padding:2px 30px; border-left:1px solid rgba(255,255,255,.11)}
.band .kap > div:first-child{border-left:0; padding-left:0}
.band b{display:block; font-size:clamp(26px,3.2vw,38px); letter-spacing:-.04em;
  font-weight:640; line-height:1.05; font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}
.band span{display:block; font-size:12.5px; margin-top:9px; line-height:1.45;
  color:rgba(255,255,255,.52); letter-spacing:.015em}
@media(max-width:700px){
  .band .kap{grid-template-columns:repeat(2,1fr); gap:30px 0; padding-top:40px; padding-bottom:40px}
  .band .kap > div{padding:0 18px}
  .band .kap > div:nth-child(odd){border-left:0; padding-left:0}
}

/* ---------- bölüm ---------- */
section{padding:112px 0; position:relative}
@media(max-width:700px){ section{padding:72px 0} }
section.sade{background:var(--kart)}
section + section:not(.sade){border-top:1px solid var(--cizgi)}
/* 🔴 .etiket (KİCKER) KALDIRILDI — 2026-09-06.
   Başlığın üstündeki küçük büyük-harfli etiket, sayfanın her bölümünde
   aynı ritmi tekrar ediyordu ve başlığın kendi ağırlığını çalıyordu.
   Kural kalır ki HTML'de unutulan bir tane sayfayı bozmasın. */
.etiket{display:none}

h2{font-family:var(--serif); font-size:clamp(32px,4.6vw,54px); letter-spacing:-.022em;
  margin:0 0 18px; font-weight:400; line-height:1.08; text-wrap:balance}
h2 em{font-style:italic; color:var(--vurgu)}
.altyazi{color:var(--metin2); max-width:38em; margin:0 0 40px; font-size:18.5px; line-height:1.62}
h3{font-size:18px; margin:0 0 8px; font-weight:690; letter-spacing:-.012em}

/* ---------- ikili: metin + kolaj ---------- */
.ikili{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.ikili.ters .yazi{order:2}
.ikili p{color:var(--metin2); font-size:17.5px; margin:0 0 18px}
.ikili p strong{color:var(--metin); font-weight:650}
.alinti{
  position:relative; margin:34px 0 0; padding:0 0 0 2px;
  font-family:var(--serif); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(21px,2.3vw,27px); line-height:1.32; color:var(--metin);
}
.alinti::before{
  content:""; display:block; width:38px; height:1px; margin:0 0 20px;
  background:var(--vurgu);
}
.kolaj{position:relative; min-height:430px; perspective:1200px}
.kolaj::before{  /* arkada yumuşak renk lekesi — kareler havada dursun */
  content:""; position:absolute; left:-6%; top:6%; width:76%; height:76%; z-index:0; border-radius:36px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--vurgu) 26%, transparent), transparent 72%);
  filter:blur(26px);
}
.kolaj img{border-radius:20px; position:relative; z-index:1}
.kolaj .buyuk{width:80%; aspect-ratio:3/2; object-fit:cover;
  box-shadow:var(--golgeBuyuk); transform:rotate(-1.6deg); transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.kolaj .kucuk{position:absolute; right:0; bottom:-30px; width:48%; aspect-ratio:1/1; object-fit:cover;
  border:6px solid var(--zemin); box-shadow:var(--golgeBuyuk); z-index:2;
  transform:rotate(2.4deg); transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.kolaj:hover .buyuk{transform:rotate(-2.4deg) translateY(-4px)}
.kolaj:hover .kucuk{transform:rotate(3.4deg) translateY(-6px)}
.kolaj .pul{  /* üstte yüzen küçük bilgi kartı */
  position:absolute; left:-14px; bottom:64px; z-index:3; background:var(--zemin);
  border:1px solid var(--cizgi); border-radius:15px; padding:13px 17px; box-shadow:var(--golgeBuyuk);
  transform:rotate(-2deg)}
.kolaj .pul b{display:block; font-size:21px; font-weight:770; letter-spacing:-.03em; line-height:1.15}
.kolaj .pul span{display:block; font-size:12px; color:var(--metin2); margin-top:2px}
@media(max-width:880px){ .kolaj .pul{left:0; bottom:44px} }
.tekfoto img{border-radius:20px; box-shadow:var(--golge); aspect-ratio:3/2; object-fit:cover; width:100%}
@media(max-width:880px){
  .ikili{grid-template-columns:1fr; gap:40px}
  .ikili.ters .yazi{order:0}
  .kolaj{min-height:0; margin-bottom:34px}
}

/* ---------- ilkeler ---------- */
/* ---------- iki uygulama: TEK yüzey, iki kimlik ---------- */
/* Referans: flexibits.com — iki ürün ayrı kutulara bölünmez, aynı panelin
   iki yarısıdır; renk ortadan akar. Bizde ikondan iyisi var: gerçek ekran. */
.uygpanel{
  /* DÖRT uygulama → 2×2, 860 altında teke düşer.
     ⚠ 2026-09-17'ye kadar repeat(3,1fr) idi (üç uygulama) ve 3. karta
       `grid-column:1/-1` veren bir istisna vardı. Dördüncü kart eklenince o
       düzen YETİM kart üretiyordu (3 + 1) ve istisna yanlış karta uyuyordu.
     # YAPMA: dört sütun yapma. NEDEN: kartın içindeki telefon ekranı 232 px;
       dört dar sütun onu okunmaz yapar — eski yorumun kendi gerekçesi buydu
       ve üçte bile 1100 px altında ikiye düşmek gerekiyordu. */
  display:grid; grid-template-columns:repeat(2,1fr); margin-top:40px;
  border:1px solid var(--cizgi); border-radius:24px; overflow:hidden;
  box-shadow:var(--golgeBuyuk); background:var(--zemin);
}
.uygyari{
  --ton:var(--vurgu); --tonZemin:var(--vurguZemin); --tonMetin:var(--vurguMetin);
  /* Tonun ÜSTÜNE gelen yazı rengi. Koyu temada ton parlıyor; beyaz yazı
     orada 2,0-2,3:1 kalıyordu (ölçüldü). Koyu tema bunu #07121D yapar. */
  --tonUstu:#fff;
  position:relative; padding:44px 40px 40px;
  display:flex; flex-direction:column; align-items:flex-start;
  background:
    radial-gradient(120% 78% at 50% 0%, color-mix(in srgb, var(--ton) 11%, transparent) 0%, transparent 62%),
    var(--zemin);
}
/* 2×2 ızgarada komşu seçici yanlış yere çizgi atar: 3. kart yeni satırın
   BAŞIDIR ama komşusu 2. karttır. Sol çizgi yalnız sağ sütuna, üst çizgi
   ikinci satıra. */
.uygyari:nth-child(2n){border-left:1px solid var(--cizgi)}
.uygyari:nth-child(n+3){border-top:1px solid var(--cizgi)}
.uygyari::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--ton);
}
.uygyari.abd{--ton:#0E7C6B; --tonZemin:#E2F3F0; --tonMetin:#0A5B4E}
.uygyari.besin{--ton:#A05A14; --tonZemin:#FBEEDF; --tonMetin:#8A4E12}
/* Kararında — uygulamanın kendi marka rengi (src/theme/tokens.ts #C0453C).
   Ölçüldü 2026-09-17 (WCAG AA, eşik 4.5:1):
     ton #C0453C / zemin #FAF8F4      = 4.76:1
     beyaz / ton (düğme yazısı)       = 5.05:1
     tonMetin #8E2E27 / tonZemin      = 7.53:1 */
.uygyari.kararinda{--ton:#C0453C; --tonZemin:#FFF3F2; --tonMetin:#8E2E27}
@media (prefers-color-scheme: dark){
  /* 🔴 --ton koyu temada da tanimlanmali. Yalniz --tonZemin/--tonMetin
     tanimlaniyordu; --ton acik tema degerinde kaliyor ve KOYU zeminde
     metin olarak kullaniliyordu. Olculdu 2026-09-06 (WCAG AA, esik 4.5:1):
       teal    #0E7C6B / #0B2128 = 3.26:1  -> #4CC9AF = 8.94:1
       kehribar#B4671C / #1E1F20 = 3.85:1  -> #E89A45 = 7.95:1
       mavi    (--vurgu zaten koyu temada #7CB2FF'e donuyordu) */
  .uygyari{--ton:var(--vurgu); --tonUstu:#07121D}
  .uygyari.abd{--ton:#4CC9AF; --tonZemin:#10302B; --tonMetin:#7FD6C4}
  .uygyari.besin{--ton:#E89A45; --tonZemin:#33240F; --tonMetin:#F0BC79}
  /* kiremit #C0453C / #0B1620 = 3.27:1 → PARLATILDI #E07A6E = 5.64:1
     tonMetin #F0A79C / tonZemin #2E1F1D = 8.06:1
     tonUstu #2A1210 / ton #E07A6E = 6.02:1 (koyu temada --tonUstu #07121D
     tonun üstünde kalıyor; kiremitte kendi koyusu daha okunur) */
  .uygyari.kararinda{--ton:#E07A6E; --tonZemin:#2E1F1D; --tonMetin:#F0A79C;
    --tonUstu:#2A1210}
}
/* ⚠ Burada 761-1100 px için «üç sütunu ikiye düşür» kuralı vardı; taban
   düzen 2026-09-17'de zaten 2 sütun olduğu için kaldırıldı. Kaldırılan
   satırdaki `nth-child(3){grid-column:1/-1}` dört kartta 3. kartı tam
   genişliğe yayıp 4. kartı tek başına bırakıyordu. */
.uygyari .pazar{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tonMetin); background:var(--tonZemin);
  padding:6px 12px; border-radius:999px;
}
.uygyari h3{margin:18px 0 4px; font-size:30px; letter-spacing:-.025em; line-height:1.1}
.uygyari .slogan{margin:0 0 4px; font-size:17px; font-weight:650; color:var(--ton)}
.uygyari .kime{margin:0 0 24px; font-size:14px; color:var(--metin2)}
/* Telefon çerçevesi: sitenin başka yerinde kullanılan `.mini` diliyle aynı.
   YAPMA: ekran görüntüsünü çerçevesiz, ham PNG olarak koyma.
   NEDEN: 9:20 oranlı ekranın alt yarısı boş beyazdır; çerçevesiz hâli
          "soluk dikdörtgen" gibi durur. Kırpma + koyu çerçeve ikisi de şart. */
.uygyari .ekran{
  align-self:center; width:min(232px, 68%); margin:4px 0 30px;
  padding:8px; border-radius:30px;
  background:linear-gradient(160deg,#38434F,#0A1017);
  box-shadow:0 2px 5px rgba(14,23,32,.14), 0 18px 40px -16px rgba(14,23,32,.46),
             inset 0 0 0 1px rgba(255,255,255,.1);
}
.uygyari .ekran img{
  display:block; width:100%; border-radius:23px; background:#fff;
  aspect-ratio:9/13; object-fit:cover; object-position:top center;
}
.uygyari .olcu{
  display:flex; gap:26px; width:100%; margin:0 0 22px;
  padding:16px 0 0; border-top:1px solid var(--cizgi);
}
.uygyari .olcu div{display:flex; flex-direction:column; gap:2px}
.uygyari .olcu b{font-size:19px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.uygyari .olcu span{font-size:12.5px; color:var(--metin2); line-height:1.35}
.uygyari .satirlar{margin:0 0 26px; padding:0; list-style:none; width:100%}
.uygyari .satirlar li{
  position:relative; padding-left:22px; margin-bottom:9px;
  font-size:14.6px; line-height:1.6; color:var(--metin2);
}
.uygyari .satirlar li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--ton); opacity:.55;
}
.uygyari .satirlar strong{color:var(--metin); font-weight:650}
.uygyari .kapanis{margin-top:auto; width:100%; display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.uygyari .git{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ton); color:var(--tonUstu); text-decoration:none;
  padding:12px 22px; border-radius:999px; font-weight:650; font-size:14.5px;
  transition:filter .18s, transform .18s;
}
.uygyari .git:hover{filter:brightness(1.08); transform:translateY(-1px)}
.uygyari .git svg{width:15px; height:15px}
.uygyari .bekliyor{font-size:12.8px; color:var(--metin2)}
/* ❌ DENENDİ: bu bloğu `.uygyari.abd` tanımının hemen ardına koymak.
      OLMADI  : aynı özgüllükte olduğu için SONRA gelen temel `.git{color:#fff}`
                eziyordu. Ölçüldü: karanlık temada yazı hâlâ beyazdı (kontrast 2.17).
   ✅ ÇÖZÜM  : geçersiz kılma, ezdiği kuraldan SONRA gelmeli.

   ⚠ 2026-09-06'da BU BLOK KALDIRILDI ve yerini `--tonUstu` aldı.
     Eski hâli `.uygyari.abd .git{color:#FFFFFF}` diye bir İSTİSNA taşıyordu;
     gerekçesi "ABD tarafında --ton koyu teal KALIR, beyaz yazı orada doğru"
     idi. O varsayım, koyu temada --ton'lar erişilebilirlik için PARLATILINCA
     çöktü (teal #0E7C6B → #4CC9AF) ve beyaz yazı 2,04:1'e düştü.
     Ders: rengin üstüne gelen yazıyı ayrı bir istisnayla değil, rengin
     KENDİSİYLE BİRLİKTE taşınan bir değişkenle (--tonUstu) belirle;
     yoksa ton değişince istisna sessizce yanlışa döner. */
@media (max-width:860px){
  .uygpanel{grid-template-columns:1fr}
  .uygyari{padding:34px 26px 30px}
  .uygyari:nth-child(2n){border-left:0}
  .uygyari + .uygyari{border-top:1px solid var(--cizgi)}
}

.izgara{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr)); gap:20px}
.kutu{background:var(--zemin); border:1px solid var(--cizgi); border-radius:16px; padding:24px; transition:transform .2s, box-shadow .2s}
.kutu:hover{transform:translateY(-4px); box-shadow:var(--golge)}
section.sade .kutu{background:var(--zemin)}
.kutu p{margin:0; color:var(--metin2); font-size:14.8px; line-height:1.62}
.ikon{width:38px;height:38px;border-radius:10px;background:var(--vurguZemin);color:var(--vurguMetin);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.ikon svg{width:20px;height:20px}

/* ---------- tam genişlik foto bandı ---------- */
.serit-foto{position:relative; min-height:420px; display:flex; align-items:center; overflow:hidden; background:var(--koyu)}
.serit-foto > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34}
.serit-foto::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,22,32,.94), rgba(11,22,32,.55))}
.serit-foto .kap{position:relative; z-index:1; padding-top:74px; padding-bottom:74px}
.serit-foto h2{color:#fff; max-width:16em}
.serit-foto p{color:rgba(255,255,255,.82); max-width:40em; font-size:17.5px; margin:0}
.serit-foto .etiket{color:#7CB2FF}

/* ---------- ekran şeridi ---------- */
.serit{display:flex; gap:22px; overflow-x:auto; padding:6px 24px 24px; scroll-snap-type:x mandatory;
  margin:0 -24px; -webkit-overflow-scrolling:touch}
.serit figure{margin:0; flex:none; width:224px; scroll-snap-align:center}
.mini{padding:8px; border-radius:30px; background:linear-gradient(160deg,#38434F,#0A1017);
  box-shadow:0 2px 5px rgba(14,23,32,.14), 0 18px 40px -16px rgba(14,23,32,.46), inset 0 0 0 1px rgba(255,255,255,.1)}
.mini img{border-radius:23px; width:100%; background:#fff}
.serit figcaption{margin-top:13px; font-size:13.5px; color:var(--metin2); text-align:center; line-height:1.45}

/* ---------- durum / iletişim ---------- */
.durum{background:var(--uyariZemin); border:1px solid var(--uyariCizgi); border-radius:16px; padding:24px 26px}
.durum h3{color:var(--uyariMetin)}
.durum p{margin:0; color:var(--uyariMetin); font-size:15px; max-width:44em}
.eposta{display:inline-block; font-size:17.5px; font-weight:660; padding:14px 22px; border-radius:13px;
  background:var(--zemin); border:1px solid var(--cizgi); color:var(--metin); text-decoration:none; word-break:break-all;
  transition:transform .18s, box-shadow .18s}
.eposta:hover{transform:translateY(-2px); box-shadow:var(--golge)}

/* ══════════════════════════════════════════════════════════════════════
   ALT BİLGİ — KOYU BANT

   Sayfa açık zeminde biter, alt bilgi koyu bir bantla kapanır. Sebebi
   süs değil: alt bilgide dört bağlantı sütunu + üç blok ince yazı var;
   açık zeminde bunlar sayfanın devamı gibi okunuyor ve site "yarım"
   görünüyordu (kullanıcı 2026-09-07'de fark etti, referans: Linear,
   Raycast, Nutria — Playwright ile açılıp GÖRÜLDÜ).

   # YAPMA: buradaki renkleri --metin / --metin2 gibi tema jetonlarıyla yazma.
   # NEDEN: o jetonlar temaya göre ters döner; koyu bant her iki temada da
   #   koyudur. Açık temada --metin (#0E1720) koyu zeminde 1,2:1 kalıyordu.
   #   Bant kendi jetonlarını taşır: --altZemin / --altBaglanti / --altSolgun.
   ══════════════════════════════════════════════════════════════════════ */
footer{background:var(--altZemin); color:var(--altSolgun); font-size:14px;
  padding:clamp(54px,6vw,78px) 0 32px}
.yasal{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:14px; padding:18px 22px; margin-bottom:30px; max-width:56em;
  color:var(--altYasal); line-height:1.65}
.yasal strong{color:#fff}
.altbag{display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.altbag a{color:var(--altBaglanti)}


/* ══════════════════════════════════════════════════════════════════════
   KAYNAK DÖNDÜRÜCÜ — üç uygulama, üç resmî kaynak

   Çatının tek cümlesi bu: "kaynağı taşıyoruz, yerine geçmiyoruz."
   Üç kaynağı yan yana dizmek yerine SIRAYLA göstermek, üçünün AYNI ŞEY
   olduğunu anlatır — liste "üç ayrı ürünümüz var" der, döngü "tek bir
   ilkemiz var" der.

   # YAPMA: bunu otomatik oynayan bir karusel yapıp kontrol bırakma.
   # NEDEN: otomatik hareket okumayı keser. Fareyle üstüne gelince ve
   #   klavye odağı içindeyken DURUR; sekmelerle elle gezilir; hareket
   #   azaltma tercihinde hiç oynamaz ve üçü birden görünür.
   ══════════════════════════════════════════════════════════════════════ */
.kaynaklar{position:relative; background:var(--koyu); color:#fff; overflow:hidden;
  padding:clamp(84px,10vw,132px) 0}
.kaynaklar-foto{position:absolute; inset:0; z-index:0}
.kaynaklar-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 5s cubic-bezier(.22,.61,.36,1)}
.kaynaklar-foto img.etkin{opacity:.34; transform:scale(1)}
.kaynaklar::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(11,22,32,.96) 8%, rgba(11,22,32,.78) 52%, rgba(11,22,32,.5) 100%)}
.kaynaklar .kap{position:relative; z-index:2}

.kaynak-ust{display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:clamp(28px,4vw,44px)}
.kaynak-ust h2{color:#fff; margin:0; max-width:15em}
.kaynak-sayac{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  font-size:13px; letter-spacing:.14em; color:rgba(255,255,255,.42)}

/* Sahne: üç kart üst üste; yüksekliği en uzun olan belirler (grid ile),
   böylece geçişte sayfa zıplamaz. */
.kaynak-sahne{display:grid}
.kaynak-kart{grid-area:1/1; max-width:44em;
  opacity:0; transform:translateY(14px); filter:blur(6px); pointer-events:none;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1), filter .62s}
.kaynak-kart.etkin{opacity:1; transform:none; filter:none; pointer-events:auto}
.kaynak-kurum{display:block; font-size:13.5px; font-weight:640; letter-spacing:.02em;
  color:#8FBEFF; margin-bottom:14px}
.kaynak-kart h3{font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,40px);
  line-height:1.14; letter-spacing:-.02em; color:#fff; margin:0 0 18px}
.kaynak-kart p{margin:0; font-size:17px; line-height:1.68; color:rgba(255,255,255,.76)}
.kaynak-kart p strong{color:#fff; font-weight:620}
.kaynak-uyg{display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  font-size:14px; font-weight:620; color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:3px; transition:border-color .2s}
.kaynak-uyg:hover{border-bottom-color:#fff}

/* Sekmeler: ilerleme çubuğu AYNI ZAMANDA düğme. Ayrı nokta dizisi koymuyoruz. */
.kaynak-sekmeler{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,3vw,40px);
  margin-top:clamp(34px,5vw,52px)}
.kaynak-sekme{appearance:none; background:none; border:0; padding:14px 0 0; cursor:pointer;
  text-align:left; color:rgba(255,255,255,.5); font:inherit; font-size:13px; font-weight:600;
  letter-spacing:.01em; border-top:1px solid rgba(255,255,255,.18);
  position:relative; transition:color .3s}
.kaynak-sekme:hover{color:rgba(255,255,255,.8)}
.kaynak-sekme[aria-selected="true"]{color:#fff}

/* Resmî kaynağı OLMAYAN dördüncü uygulamanın istisnası. Karusele panel olarak
   girmez (bkz. index.html'deki YAPMA notu), bölümün altında yazıyla durur.
   ⚠ Bağlantı rengi #fff: bu bölümün zemini --koyu (#0B1620) ve 2026-09-12'de
     ana sayfada bağlantı kontrastı 2,98:1 ölçülmüştü (AA eşiği 4,5). */
.kaynak-istisna{
  margin:clamp(30px,4vw,44px) 0 0; padding-top:clamp(24px,3vw,32px);
  border-top:1px solid rgba(255,255,255,.16);
  max-width:46em; font-size:15.6px; line-height:1.7;
  color:rgba(255,255,255,.74);
}
.kaynak-istisna strong{color:#fff; font-weight:620}
.kaynak-istisna a{color:#fff; font-weight:620; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px;
  white-space:nowrap; transition:border-color .2s}
.kaynak-istisna a:hover{border-bottom-color:#fff}

/* Alt bilgi listesinde METİN BLOĞU İÇİNE gömülü bağlantı (ör. «Kararında:
   resmî kaynak yok — nedeni burada») rengiyle ayırt edilemiyor.
   Ölçüldü 2026-09-17, axe-core `link-in-text-block`: çevresindeki yazıyla
   kontrast 1,73:1, eşik 3:1. Tek başına satır olan normal alt bilgi
   bağlantıları bu kurala girmez; yalnız <span> içindekiler altı çizili. */
.alt-sutun li span a{text-decoration:underline; text-underline-offset:2px}
/* ⚠ width DEĞİL transform. width animasyonu her karede düzen hesaplatır;
   scaleX yalnız birleştirme katmanında çalışır. */
.kaynak-sekme::before{content:""; position:absolute; top:-1px; left:0; height:1px; width:100%;
  background:#7CB2FF; transform:scaleX(0); transform-origin:left center}
.kaynak-sekme[aria-selected="true"]::before{transform:scaleX(1); transition:transform var(--sure,7s) linear}
.kaynak-sekme.duraklat::before{transition:none}

@media(max-width:700px){
  .kaynak-sekmeler{grid-template-columns:1fr; gap:0; max-width:none}
  .kaynak-sekme{padding:13px 0}
  .kaynak-sekme + .kaynak-sekme{border-top:1px solid rgba(255,255,255,.12)}
}
@media (prefers-reduced-motion: reduce){
  /* Hareket istenmiyorsa döngü yok: üçü de görünür, alt alta. */
  .kaynak-sahne{display:block}
  .kaynak-kart{opacity:1; transform:none; filter:none; pointer-events:auto}
  .kaynak-kart + .kaynak-kart{margin-top:44px; padding-top:44px; border-top:1px solid rgba(255,255,255,.14)}
  .kaynak-sekmeler{display:none}
  .kaynaklar-foto img:first-child{opacity:.34; transform:none}
  .kaynaklar-foto img{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   ALT BİLGİ — sütunlu bağlantı ızgarası

   Referansa BAKILARAK yapıldı (Linear, Raycast; 2026-09-07 Playwright ile
   açılıp görüldü). Kalıp: küçük marka + gruplanmış sütunlar + altta soluk
   yasal satır. Önceki hâlimiz tek bir bağlantı şeridiydi ve siteyi
   "yarım" gösteriyordu — kullanıcı bunu fark etti.
   ══════════════════════════════════════════════════════════════════════ */
.alt-izgara{display:grid; grid-template-columns:1.5fr repeat(4,1fr);
  gap:clamp(26px,3vw,48px); padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.10)}
.alt-marka{display:flex; flex-direction:column; gap:12px}
.alt-marka .ad{display:flex; align-items:center; gap:9px; font-weight:750;
  letter-spacing:-.02em; font-size:17px; color:#fff}
.alt-marka .ad svg{width:26px; height:26px; color:var(--altVurgu)}
.alt-marka p{margin:0; font-size:13.5px; line-height:1.6; color:var(--altSolgun); max-width:26em}
/* YAPMA: alt bilgi başlığını yalnız h4'e bağlama.
   NEDEN: ölçüldü 2026-09-12 (axe-core, eş oturum bildirdi). Başlık
   SEVİYESİ sayfanın içeriğine göre değişir — NutriCitadel sayfasında
   alt bilgiden önceki son başlık h2 olduğu için h4 SEVİYE ATLIYOR
   (WCAG heading-order). Seviyeyi düzeltmek isteyen sayfa, seçici
   etikete bağlı olduğu için stilini KAYBEDİYORDU: erişilebilirlik
   düzeltmesinin bedeli görsel bozulma oluyordu. İkisi birden olmasın
   diye seçici seviyeden bağımsız. */
.alt-sutun h3,
.alt-sutun h4{margin:0 0 12px; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:700; color:var(--altBaslik)}
.alt-sutun ul{list-style:none; margin:0; padding:0}
.alt-sutun li{margin-bottom:9px}
.alt-sutun a{color:var(--altBaglanti); text-decoration:none; font-size:14px;
  transition:color .16s}
.alt-sutun a:hover{color:var(--altVurgu); text-decoration:underline}
.alt-sutun span{color:var(--altSolgun); font-size:14px}

/* İnce yazı: alt alta üç kart değil, YAN YANA üç sütun. Aynı metin, üçte bir
   yükseklik — yasal metin kısalmadan sayfanın sonunu boğmuyor. */
.alt-yasal{display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,2.6vw,42px); padding:30px 0;
  border-bottom:1px solid rgba(255,255,255,.10)}
.alt-yasal h5{margin:0 0 9px; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:700; color:var(--altBaslik)}
.alt-yasal p{margin:0; font-size:12.6px; line-height:1.68; color:var(--altSolgun)}
.alt-yasal strong{color:var(--altYasal); font-weight:650}
/* Ölçüldü: #7CB2FF koyu dipnot zemininde 8.5 (AA 4.5, AAA 7.0). */
.alt-yasal a{color:var(--vurguKoyuZemin)}

.alt-son{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
  justify-content:space-between; padding-top:22px;
  font-size:13px; color:var(--altSolgun)}
.alt-son .imza{font-style:italic; color:var(--altBaslik)}

@media(max-width:980px){
  .alt-izgara{grid-template-columns:1fr 1fr; gap:30px}
  .alt-marka{grid-column:1/-1}
  .alt-yasal{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .alt-izgara{grid-template-columns:1fr}
  .alt-yasal{grid-template-columns:1fr; gap:24px}
  .alt-son{justify-content:flex-start}
}

/* ── Fotoğraf şeridi: "Yapmadıklarıyla tarif edilen…" başlığının üstünde ──
   YAPMA: sabit yükseklik ver.
   NEDEN: bugün başlıkta tam bu yüzden kırpılma yaşandı (mobil menü, T-site).
          Oran sabit, yükseklik içerikten gelir. */
.foserit{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin:0 0 26px;
}
.foserit figure{margin:0; border-radius:14px; overflow:hidden; line-height:0;
  box-shadow:0 6px 18px rgba(16,32,28,.10)}
.foserit img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:1/1;
  display:block; transition:transform .5s ease;
}
.foserit figure:hover img{transform:scale(1.04)}
@media(max-width:820px){ .foserit{grid-template-columns:repeat(2,1fr); gap:10px} }
@media(prefers-reduced-motion:reduce){ .foserit img{transition:none} }

/* ── Atlama bağlantısı ───────────────────────────────────────────────────
   Ölçüldü 2026-09-08: sekiz içerik sayfasının HİÇBİRİNDE <main> yoktu ve
   atlama bağlantısı da yoktu. Klavye/ekran okuyucu kullanıcısı içeriğe
   ulaşmak için her sayfada 7 sekmeye basıyordu (logo, 4 menü, TR, EN).
   Odaklanınca görünür, aksi hâlde ekran dışında. */
.atla{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--marka, #1B5FBF); color:#fff; padding:12px 20px;
  border-radius:0 0 10px 0; font-weight:640; text-decoration:none;
}
.atla:focus{left:0}

/* Ana sayfadaki ürün bloğunda kompakt fiyat satırı.
   # YAPMA: buraya "henüz mağazada değil" ibaresini koymadan fiyat yazma.
   # NEDEN: fiyatı gören ziyaretçi satın alma yolu arar; bulamayınca hata
   sanır. Ürün sayfasında da aynı sıra uygulanıyor (KURALLAR F1-F5). */
.urun-fiyat{margin:14px 0 0; font-size:16px; line-height:1.65; color:var(--metin2)}
.urun-fiyat b{color:var(--metin); font-weight:650}
.urun-fiyat a{color:var(--marka); text-decoration:none; font-weight:600; white-space:nowrap}
.urun-fiyat a:hover{text-decoration:underline}
.urun-fiyat span{display:block; margin-top:4px; font-size:14.5px; opacity:.85}

/* ══════════════════════════════════════════════════════════════════════
   TELEFON AKIŞI — ana sayfa TR + EN (2026-10-20, kullanıcı onayı)
   Ölçüldü (390×844): sayfa 25,4 ekrandı; dört kart alt alta 3.625 px
   (4,3 ekran), iki satırlık başlık 89 px (%11), altbilgi 2.468 px.
   Referans: flexibits.com 4,1 · readdle.com 6,7 ekran (aynı genişlikte
   açılıp ölçüldü): tek satır başlık + menü, yana kayan ürün şeridi.
   Kapsam SINIFLA sınırlı (.menulu · .uygpanel · .alt-izgara.alt-iki-sutun): ürün
   sayfaları bu sınıfları taşımadığı için hiç etkilenmez.
   ⚠ Yeni sınıf adı koymadan önce `grep` ile ara: ilk sürüm `.ikili` adını
     kullandı, o ad sitede ZATEN iki sütunlu bölüm sınıfıydı (align-items:center)
     ve masaüstü altbilgi ortaya hizalandı — piksel karşılaştırması yakaladı.
   ⚠ Masaüstü (≥701 px) bayt bayt aynı kalmalı — piksel karşılaştırmasıyla
     doğrulandı. Bu bloğa ≥701 px kuralı ekleme.
   ══════════════════════════════════════════════════════════════════════ */
.menu-dugme{display:none}
.uygnokta{display:none}
@media(max-width:700px){
  /* Tek satır başlık; bağlantılar menüde.
     # YAPMA: bağlantıları gizleyip menü koymadan bırakma.
     # NEDEN: T98 — telefondan ulaşılamayan bağlantı ekran görüntüsünde YOK
     #   gibi görünür. sayfa-denetle.py menüyü açıp her bağlantıyı ölçer. */
  .ust.menulu{position:relative; flex-wrap:nowrap; height:56px; padding-top:0; padding-bottom:0; row-gap:0}
  .ust.menulu .dil{margin-left:auto}
  .ust.menulu .menu-dugme{display:inline-flex; order:3; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:6px; margin-right:-10px; padding:0; border:0; background:none;
    color:#fff; border-radius:12px; cursor:pointer}
  header.kaydi .ust.menulu .menu-dugme{color:var(--metin)}
  .menu-dugme svg{width:24px; height:24px}
  .menu-dugme path{transition:transform .22s, opacity .18s; transform-origin:12px 12px}
  header.menu-acik .menu-dugme .c1{transform:translateY(5px) rotate(45deg)}
  header.menu-acik .menu-dugme .c2{opacity:0}
  header.menu-acik .menu-dugme .c3{transform:translateY(-5px) rotate(-45deg)}
  .ust.menulu nav{position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column;
    gap:0; padding:6px 24px 18px; border-top:1px solid var(--cizgi);
    background:var(--zemin); box-shadow:0 18px 30px -18px rgba(14,23,32,.35)}
  .ust.menulu nav.acik{display:flex}
  .ust.menulu nav a, header.kaydi .ust.menulu nav a{color:var(--metin); font-size:17px; font-weight:600;
    padding:14px 0; border-bottom:1px solid var(--cizgi)}
  .ust.menulu nav a:last-child{border-bottom:0}
  /* Çapa hedefi tek satırlık başlığın altında dursun (iki satırda 118 idi). */
  html:has(.ust.menulu) section[id], html:has(.ust.menulu) div[id]{scroll-margin-top:68px}

  /* Dört kart alt alta değil, yana kayan şerit; sonraki kart kenardan görünür. */
  .uygpanel{display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    margin:32px -24px 0; padding:4px 24px 10px; scroll-padding:0 24px;
    border:0; border-radius:0; box-shadow:none; background:transparent; scrollbar-width:none}
  .uygpanel::-webkit-scrollbar{display:none}
  .uygyari, .uygyari:nth-child(2n), .uygyari:nth-child(n+3), .uygyari + .uygyari{
    flex:0 0 84%; scroll-snap-align:start; padding:28px 22px 24px;
    border:1px solid var(--cizgi); border-radius:22px; overflow:hidden; box-shadow:var(--golge)}
  .uygnokta{display:flex; justify-content:center; gap:7px; margin-top:16px}
  .uygnokta i{width:7px; height:7px; border-radius:99px; background:var(--cizgi); transition:width .25s, background .25s}
  .uygnokta i.etkin{width:22px; background:var(--vurgu)}
}
@media(max-width:700px) and (prefers-reduced-motion: reduce){
  .menu-dugme path, .uygnokta i{transition:none}
}
@media(max-width:560px){
  /* Altbilgi bağlantıları iki sütun; uzun adlı Gizlilik + İletişim tam genişlik.
     Yasal açıklamalar (.alt-yasal) BİLEREK açık kalır — kullanıcı kararı 2026-10-20. */
  .alt-izgara.alt-iki-sutun{grid-template-columns:1fr 1fr; gap:26px 18px}
  .alt-izgara.alt-iki-sutun > .alt-marka,
  .alt-izgara.alt-iki-sutun > .alt-sutun:nth-child(4),
  .alt-izgara.alt-iki-sutun > .alt-sutun:nth-child(5){grid-column:1/-1}
}