/* ==================================================================
   KİPERİN AR-GE MERKEZİ — TASARIM SİSTEMİ v2
   ==================================================================

   Bu dosya mevcut sitenin CSS'inin devamı DEĞİL. Sıfırdan yazıldı.

   Önceki turlarda yapılan iş, orijinal HTML'i dönüştürmekti: sınıf
   eklemek, görsel değiştirmek, punto büyütmek. Sayfanın iskeleti
   (bölüm sırası, her bölümün kurgusu, içeriğin yerleşimi) aynı kaldığı
   için sonuç hep "aynı site" gibi göründü.

   v2'de iskelet değişiyor:
     - Hero tam ekran, fotoğraf zeminli, metin fotoğrafın üstünde.
       (Eskisi: solda metin, sağda koyu panel.)
     - Bölümler kabın dışına taşıyor (full-bleed); görsel ve metin
       sayfanın kenarına kadar gidiyor.
     - Hizmetler kart değil, numaralı editöryel liste.
     - Sayılar kendi başına tam genişlikte bir bant.
     - Asimetrik bölmeler; her bölüm aynı kalıpta değil.
   ================================================================== */

/* ------------------------------------------------------------------ *
   0. YAZI TİPİ — POPPINS, KENDİ SUNUCUMUZDAN

   Google Fonts'tan indirildi, kendi alan adımızdan sunuluyor.
   Böylece sayfa açıldığında ziyaretçinin IP adresi Google'a
   iletilmiyor (KVKK md. 9 — yurt dışına aktarım).

   Yollar bu CSS dosyasına göreceli: dosyaların "fonts" klasörü
   her zaman site-v2.css'in yanında durmalı.

   Bu blok elle düzenlenmez; _araclar/v2-font-indir.js üretir.
 * ------------------------------------------------------------------ */

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-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;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-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;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-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;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-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;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-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;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-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;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-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;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-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;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-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;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-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;
}

/* ---------------------------------------------------------------- *
   1. TOKENLAR
 * ---------------------------------------------------------------- */

:root{
  /* Marka renkleri korunuyor — kimlik değişmiyor, kurgu değişiyor. */
  --lacivert:#0E2438;
  --lacivert-2:#122C45;
  --murekkep:#132132;
  --murekkep-soft:#55677A;
  --kagit:#FFFFFF;
  --kagit-2:#F5F8FA;
  --cizgi:#E2E9EF;
  --mavi:#0092D6;
  --mavi-koyu:#046FA3;
  --altin:#E8A93A;
  --altin-acik:#F3CD3B;
  /* Açık zeminde okunabilir altın (ölçüldü: 5.20:1). */
  --altin-koyu:#8A5F0C;

  --kenar:20px;
  --golge:0 30px 60px -32px rgba(14,36,56,.45);
  --golge-derin:0 48px 90px -40px rgba(14,36,56,.6);

  /* Akıcı tipografi ölçeği */
  /* Taban 2.5rem: Poppins'te en uzun başlık kelimesi
     ("Formülasyondan") 390px ekranda kutusuna ancak bu
     puntoda sığıyor. Ölçüldü, tahmin edilmedi. */
  --dev:clamp(2.5rem,7vw,6rem);
  --buyuk:clamp(2.4rem,4.6vw,4rem);
  --orta:clamp(1.8rem,3vw,2.75rem);
  --kucuk:clamp(1.15rem,1.6vw,1.4rem);
  /* Liste satırı başlığı — bölüm başlığından belirgin küçük. */
  --liste-baslik:clamp(1.4rem,1.9vw,1.85rem);

  --kap:1240px;
  --oluk:clamp(20px,5vw,64px);

  /* Yazı tipleri.
     Poppins geometrik bir sans; harfleri Inter'e göre daha geniş ve
     x-yüksekliği daha büyük. Bu yüzden aşağıda iki şey ayarlandı:
     satır uzunluğu kısaltıldı (aynı karakter sayısı daha çok yer
     kaplıyor) ve başlıklarda harf aralığı biraz daha sıkıldı —
     geometrik harfler büyük puntoda birbirinden kopuk duruyor. */
  --yazi:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--yazi);
  color:var(--murekkep);
  background:var(--kagit);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
/* Yalnızca yüksekliği belirtilen görsellerde genişlik otomatik kalsın;
   aksi hâlde HTML'deki width özniteliği devreye girip görseli esnetiyor. */
.marka img,.alt-marka img{width:auto;height:auto;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1.1em;}

/* Numaralı sütunlar satırdan satıra hizalı kalsın diye sabit genişlikli
   rakam. Poppins'in varsayılan rakamları orantılı genişlikte. */
.liste-no,.madde-no,.hero-sayilar span,.yayin-yil,
.yasal-bolum h2::before,.yasal-icindekiler a::before{
  font-variant-numeric:tabular-nums;
}

h1,h2,h3,h4{
  font-family:var(--yazi);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.035em;
  margin:0 0 .45em;
  color:var(--lacivert);
}

:focus-visible{outline:2px solid var(--mavi);outline-offset:3px;}
::selection{background:var(--altin-acik);color:var(--lacivert);}

/* ---------------------------------------------------------------- *
   2. DÜZEN
   Tek bir ızgara: her şey bu ızgaranın sütunlarına oturuyor.
   "tam" sınıfı kenardan kenara taşar — full-bleed bölümler bununla.
 * ---------------------------------------------------------------- */

.kap{
  width:min(100% - var(--oluk)*2, var(--kap));
  margin-inline:auto;
}

.bolum{padding:clamp(72px,10vw,150px) 0;}
.bolum--sik{padding:clamp(48px,6vw,90px) 0;}

/* ---------------------------------------------------------------- *
   3. ÜST ETİKET
 * ---------------------------------------------------------------- */

.etiket{
  font-family:var(--yazi);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mavi-koyu);
  display:flex;align-items:center;gap:12px;
  margin-bottom:22px;
}
.etiket::before{
  content:"";width:34px;height:2px;background:var(--altin);flex:none;
}
/* Fotoğraf zeminli bölgelerde etiket açık renk olmalı.
   Hero'da --mavi-koyu (#046FA3) fotoğrafın aydınlık kısmında
   okunmuyordu. */
.koyu .etiket,
.hero .etiket,
.ic-hero .etiket,
.bant .etiket{color:var(--altin-acik);}
.koyu .etiket::before,
.hero .etiket::before,
.ic-hero .etiket::before,
.bant .etiket::before{background:var(--altin-acik);}

/* ---------------------------------------------------------------- *
   4. BUTONLAR
 * ---------------------------------------------------------------- */

.dugme{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--yazi);
  font-size:.92rem;font-weight:600;
  padding:16px 30px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), background .2s, border-color .2s, color .2s;
}
.dugme svg{width:17px;height:17px;stroke:currentColor;flex:none;transition:transform .2s ease;}
.dugme:hover svg{transform:translateX(4px);}

.dugme--altin{background:var(--altin);color:var(--lacivert);}
.dugme--altin:hover{background:var(--altin-acik);transform:translateY(-2px);}

.dugme--hayalet{background:transparent;color:#fff;border-color:rgba(255,255,255,.34);}
.dugme--hayalet:hover{border-color:var(--altin-acik);color:var(--altin-acik);}

.dugme--koyu{background:var(--lacivert);color:#fff;}
.dugme--koyu:hover{background:var(--lacivert-2);transform:translateY(-2px);}

.dugme--cizgi{background:transparent;color:var(--lacivert);border-color:var(--cizgi);}
.dugme--cizgi:hover{border-color:var(--altin);}

/* ---------------------------------------------------------------- *
   5. ÜST BAR
   Şeffaf başlar, kaydırınca beyazlaşır. Hero fotoğrafının üstünde
   durduğu için başlangıçta zemin istemiyoruz.
 * ---------------------------------------------------------------- */

.ust{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.ust-ic{
  display:flex;align-items:center;gap:32px;
  height:82px;
}
.ust.yapisik{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--cizgi);
}

.marka{flex:none;display:flex;align-items:center;}
.marka img{height:42px;width:auto;}
/* Hero üzerindeyken logo beyaza dönsün diye parlaklık filtresi. */
.ust:not(.yapisik) .marka img{filter:brightness(0) invert(1);}

.gezinti{display:flex;align-items:center;gap:6px;margin-left:auto;}
.gezinti a{
  font-size:.92rem;font-weight:500;
  padding:10px 15px;border-radius:10px;
  color:#fff;
  transition:background .2s, color .2s;
}
.ust.yapisik .gezinti a{color:var(--murekkep-soft);}
.gezinti a:hover{background:rgba(255,255,255,.14);color:#fff;}
.ust.yapisik .gezinti a:hover{background:var(--kagit-2);color:var(--lacivert);}
.gezinti a.acik{color:#fff;font-weight:600;}
.ust.yapisik .gezinti a.acik{color:var(--lacivert);}

.ust .dugme{padding:12px 24px;font-size:.86rem;}
.ust:not(.yapisik) .dugme--koyu{background:#fff;color:var(--lacivert);}

.menu-dugmesi{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;margin-left:auto;
}
.menu-dugmesi span{display:block;height:2px;background:#fff;margin:5px 0;transition:background .2s;}
.ust.yapisik .menu-dugmesi span{background:var(--lacivert);}

/* ---------------------------------------------------------------- *
   6. HERO — tam ekran, fotoğraf zeminli
   Eski hero: solda metin, sağda koyu panel, sabit yükseklik.
 * ---------------------------------------------------------------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding-bottom:clamp(56px,8vw,110px);
  padding-top:140px;
  overflow:hidden;
  isolation:isolate;
}
.hero-foto{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  /*
     Odak %28'den %62'ye indirildi.
     Fotoğrafın üst kısmında laboratuvarın duvarındaki "Kiper'in Ar-Ge
     Merkezi" tabelası var; %28'de tabela tam üst menüdeki logonun
     arkasına denk geliyor ve iki Kiperin logosu yan yana görünüyordu.
     %62'de tabela görüntü alanının tamamen dışında kalıyor, kadrajda
     çalışan ekip kalıyor.
  */
  object-position:center 62%;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    /* Üst bant perdesi: menü ve logonun arkasını sakinleştirir.
       İlk 170px koyu, 330px'te tamamen şeffaf. */
    linear-gradient(to bottom, rgba(14,36,56,.93) 0px, rgba(14,36,56,.62) 170px, rgba(14,36,56,0) 330px),
    linear-gradient(to top, rgba(14,36,56,.97) 0%, rgba(14,36,56,.84) 46%, rgba(14,36,56,.66) 100%),
    radial-gradient(900px 500px at 78% 12%, rgba(0,146,214,.26), transparent 62%);
}

.hero h1{
  color:#fff;
  font-size:var(--dev);
  max-width:15ch;
  margin-bottom:.28em;
}
.hero h1 em{color:var(--altin-acik);font-style:italic;font-weight:500;}
.hero-alt{
  color:#C4D6E4;
  font-size:var(--kucuk);
  max-width:56ch;
  margin-bottom:38px;
}
.hero-dugmeler{display:flex;gap:14px;flex-wrap:wrap;}

/* Hero'nun altındaki sayı şeridi — panelin yerini alıyor. */
.hero-sayilar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:clamp(44px,6vw,80px);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--kenar);
  overflow:hidden;
}
.hero-sayilar div{
  background:rgba(14,36,56,.55);
  backdrop-filter:blur(6px);
  padding:26px 24px;
}
.hero-sayilar b{
  display:block;
  font-family:var(--yazi);
  font-size:clamp(2rem,3.2vw,2.9rem);
  color:#fff;line-height:1;letter-spacing:-.03em;
  margin-bottom:8px;
}
.hero-sayilar span{
  font-family:var(--yazi);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--altin-acik);
}

/* ---------------------------------------------------------------- *
   7. ASİMETRİK BÖLME — görsel kenardan taşar
 * ---------------------------------------------------------------- */

.bolme{
  display:grid;
  /* minmax(0,…): "1fr" varsayılanı minmax(auto,1fr) demek ve uzun,
     bölünemeyen içerik kanalı taşırabiliyor. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(32px,6vw,90px);
}
.bolme--tersi{direction:rtl;}
.bolme--tersi > *{direction:ltr;}

/* Görsel sayfanın kenarına kadar taşıyor. */
.bolme-gorsel{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--kenar);
  overflow:hidden;
  box-shadow:var(--golge);
}
.bolme-gorsel img{width:100%;height:100%;object-fit:cover;}

.bolme h2{font-size:var(--buyuk);}
.bolme p{color:var(--murekkep-soft);font-size:1.06rem;}

/* İstatistik üçlüsü */
.olcum{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:26px;margin-top:40px;padding-top:34px;
  border-top:1px solid var(--cizgi);
}
.olcum b{
  display:block;font-family:var(--yazi);
  font-size:clamp(2rem,3vw,2.8rem);line-height:1;
  color:var(--lacivert);letter-spacing:-.03em;margin-bottom:8px;
}
.olcum span{font-size:.86rem;color:var(--murekkep-soft);}
.olcum > div{position:relative;padding-top:16px;}
.olcum > div::before{
  content:"";position:absolute;top:0;left:0;
  width:26px;height:2px;background:var(--altin);
}

/* ---------------------------------------------------------------- *
   8. NUMARALI EDİTÖRYEL LİSTE — hizmetler
   Kart ızgarası yerine: geniş satırlar, dev numara, üzerine
   gelince açılan görsel. Kartlardan tamamen farklı bir ritim.
 * ---------------------------------------------------------------- */

.liste{border-top:1px solid rgba(255,255,255,.14);}

.liste-satir{
  display:grid;
  /* Fotoğraf sütunu daraldı: kaynak görseller DİKEY (1122x1402, oran
     0.80). Geniş şeride koyunca %77'si kırpılıyordu. Artık 4:5 oranında
     duruyor — kırpma yok. */
  grid-template-columns:auto minmax(0,1fr) 205px;
  gap:clamp(16px,2.2vw,34px);
  /* DİKKAT: Burası önce align-items:center idi. Satır yüksekliğini
     sağdaki fotoğraf belirlediği için (≈413px) numara dikeyde ortaya
     kayıyor ve etiketlediği başlığın 40 piksel ALTINDA kalıyordu —
     ikisi arasındaki bağ kopuyordu. Artık üstten hizalı. */
  /* Hücreler esneyebilsin; hizalama tek tek veriliyor. */
  align-items:stretch;
  padding:clamp(22px,2.4vw,34px) 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  position:relative;
  transition:background .3s ease;
}
.liste-satir:hover{background:rgba(255,255,255,.04);}

.liste-no{
  font-family:var(--yazi);
  font-weight:600;
  color:var(--altin-acik);
  letter-spacing:.02em;
  /* Punto ve satır yüksekliği h3 ile BİREBİR aynı: böylece iki metin
     kutusu aynı yükseklikte başlıyor ve numara başlığın ilk satırıyla
     kendiliğinden hizalanıyor — piksel ayarı gerekmiyor. */
  /* Başlıkla birebir aynı punto ve satır yüksekliği — hizalama
     kendiliğinden oluyor. Başlık küçüldüğü için numara da küçüldü. */
  font-size:var(--liste-baslik);
  line-height:1.15;
  opacity:.85;
  min-width:2.2ch;
  align-self:start;
}
.liste-metin{align-self:start;}
/* Liste başlığı için AYRI bir ölçek.
   Önce bölüm başlığı ölçeği (--orta, 40.8px) kullanılıyordu; 16px'lik
   açıklamanın yanında 2,5 kat fark yaratıyor ve açıklama kayboluyordu.
   Şimdi başlık küçüldü, açıklama büyüdü: fark 1,7 kata indi. */
.liste-metin h3{
  color:#fff;
  font-size:var(--liste-baslik);
  line-height:1.15;
  margin-bottom:.35em;
}
/* max-width:46ch idi: 923px'lik sütunda metin yalnızca 483px
   kullanıyor, sağda 440px boşluk kalıyordu. Sınır genişletildi. */
.liste-metin p{color:#B6CBDC;margin:0 0 20px;font-size:1.02rem;line-height:1.65;max-width:56ch;}

/* Yetkinlik maddeleri — metin bloğunu fotoğrafın yüksekliğine yaklaştırıp
   satırdaki boşluğu kapatıyor, aynı zamanda içeriği zenginleştiriyor. */
.liste-maddeler{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 32px;
}
.liste-maddeler li{
  position:relative;padding-left:16px;
  font-size:.94rem;color:#A8BFD2;line-height:1.5;
}
.liste-maddeler li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--altin);
}

/* Fotoğraf satırın yüksekliğini BELİRLİYORDU: 344px fotoğrafın yanında
   109px metin kalıyor, aradaki 235px bomboş duruyordu — göz nereye
   bakacağını bilemiyordu. Oranı alçaltmak yetmedi (156px kaldı).
   Çözüm: fotoğraf artık yükseklik belirlemiyor, satırın yüksekliğine
   UYUYOR. Mutlak konumlandırma sayesinde kendi en-boy oranı satırı
   uzatmıyor; satır yüksekliğini metin ve alt sınır belirliyor. */
.liste-gorsel{
  position:relative;
  /* Dikey fotoğraf (4:5, kırpma yok) metinden kaçınılmaz olarak uzun.
     Üstten hizalı bırakınca fark tamamen ALTA yığılıyor ve boşluk
     gibi duruyordu; ortalayınca üste ve alta eşit bölünüyor,
     "nefes payı" olarak okunuyor. */
  align-self:center;
  aspect-ratio:4/5;
  border-radius:16px;overflow:hidden;
  /* Koyu zeminde .55 fazla silik kalıyordu; özellikle karanlık
     fotoğraflar tamamen kayboluyordu. */
  opacity:.8;
  transform:scale(.97);
  transition:opacity .4s ease, transform .4s ease;
}
.liste-satir:hover .liste-gorsel{opacity:1;transform:scale(1);}
.liste-gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------------------------------------------------------------- *
   9. KOYU BÖLÜM
 * ---------------------------------------------------------------- */

.koyu{
  background:var(--lacivert);
  color:#C4D6E4;
  position:relative;
  overflow:hidden;
}
.koyu::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(800px 460px at 86% -6%, rgba(0,146,214,.22), transparent 64%),
    radial-gradient(620px 380px at 2% 106%, rgba(232,169,58,.14), transparent 68%);
}
.koyu > *{position:relative;z-index:1;}
.koyu h2,.koyu h3{color:#fff;}
.koyu p{color:#A9C0D4;}

.bolum-basi{max-width:820px;margin-bottom:clamp(44px,5vw,72px);}
.bolum-basi h2{font-size:var(--buyuk);}
.bolum-basi p{font-size:var(--kucuk);color:var(--murekkep-soft);}
.koyu .bolum-basi p{color:#A9C0D4;}

/* ---------------------------------------------------------------- *
   10. YAYIN LİSTESİ — editöryel, tablo değil
 * ---------------------------------------------------------------- */

.yayin{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(16px,3vw,44px);
  align-items:baseline;
  padding:30px 0;
  border-bottom:1px solid var(--cizgi);
  transition:padding-left .25s ease;
}
.yayin:hover{padding-left:12px;}
.yayin:first-of-type{border-top:1px solid var(--cizgi);}
.yayin-yil{
  font-family:var(--yazi);
  font-size:.86rem;font-weight:600;color:var(--altin-koyu);
  letter-spacing:.06em;
}
.yayin h3{
  font-size:1.22rem;margin:0 0 .28em;
  font-family:var(--yazi);
  font-weight:600;letter-spacing:-.01em;line-height:1.35;
}
.yayin p{margin:0;font-size:.94rem;color:var(--murekkep-soft);}
.yayin-rozet{
  font-family:var(--yazi);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;
  background:#E8F3EC;color:#177347;white-space:nowrap;
}

/* ---------------------------------------------------------------- *
   11. TAM GENİŞLİK SAYI BANDI
 * ---------------------------------------------------------------- */

.bant{
  position:relative;
  padding:clamp(80px,9vw,140px) 0;
  overflow:hidden;
  isolation:isolate;
}
.bant-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.bant::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg, rgba(14,36,56,.95) 30%, rgba(14,36,56,.72) 100%);
}
.bant-izgara{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,4vw,56px);
}
.bant-izgara b{
  display:block;font-family:var(--yazi);
  font-size:clamp(2.6rem,5vw,4.4rem);
  color:#fff;line-height:1;letter-spacing:-.04em;margin-bottom:12px;
}
.bant-izgara span{
  font-family:var(--yazi);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--altin-acik);
}

/* ---------------------------------------------------------------- *
   12. HABER KARTLARI
 * ---------------------------------------------------------------- */

.haber-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.haber{
  border-radius:var(--kenar);overflow:hidden;
  background:var(--kagit);border:1px solid var(--cizgi);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
  display:flex;flex-direction:column;
}
.haber:hover{transform:translateY(-8px);box-shadow:var(--golge);}
/* Kaynak görseller dikey (0.80). 16/10'da %50, 1:1'de %20
   kırpılıyordu; 4:5'te hiç kırpılmıyor. */
.haber-foto{aspect-ratio:4/5;overflow:hidden;}
.haber-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.haber:hover .haber-foto img{transform:scale(1.06);}
.haber-govde{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;}
.haber-tarih{
  font-family:var(--yazi);font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mavi-koyu);
  margin-bottom:12px;
}
.haber h3{font-size:1.16rem;line-height:1.3;margin-bottom:.5em;}
.haber p{font-size:.94rem;color:var(--murekkep-soft);flex:1;}

/* ---------------------------------------------------------------- *
   13. İLETİŞİM
 * ---------------------------------------------------------------- */

.iletisim-bolme{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);}
.iletisim-kart{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--kenar);
  padding:clamp(28px,3vw,42px);
}
.iletisim-satir{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.iletisim-satir:last-child{border-bottom:0;}
.iletisim-satir b{
  font-family:var(--yazi);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--altin-acik);
  flex:none;width:76px;padding-top:3px;
}
/* "info@kiperincollagenturkiye.com" bölünemeyen uzun bir dize; dar
   ekranda ızgara kanalını şişirip sayfayı 23px yatay kaydırıyordu. */
.iletisim-satir span{color:#DCE8F2;font-size:.98rem;overflow-wrap:anywhere;min-width:0;}

/* ---------------------------------------------------------------- *
   14. FOOTER
 * ---------------------------------------------------------------- */

.alt{background:#0A1B2B;color:#8FA8BE;padding:clamp(60px,7vw,100px) 0 34px;}
.alt-izgara{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);
}
/* width:auto ŞART. HTML'de width="304" height="150" öznitelikleri var;
   CSS yalnızca height'ı ezerse genişlik 304px'te kalıyor ve logo
   304x46 olarak, yani 3,3 kat yatay esnetilmiş çiziliyordu. */
.alt-marka img{height:58px;width:auto;margin-bottom:22px;}
.alt-marka p{font-size:.88rem;max-width:30ch;}
.alt h4{
  font-family:var(--yazi);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--altin-acik);
  margin-bottom:18px;
}
.alt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.alt ul a{display:block;padding:6px 0;font-size:.92rem;color:#8FA8BE;transition:color .2s;}
.alt ul a:hover{color:var(--altin-acik);}
.alt-son{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;font-size:.84rem;color:#7691A8;
}

/* ---------------------------------------------------------------- *
   15. BELİRME
 * ---------------------------------------------------------------- */

.bel{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);}
.bel.gor{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .bel{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------------------------------------------------------------- *
   16. DAR EKRAN
 * ---------------------------------------------------------------- */

@media (max-width:1000px){
  .bolme,.iletisim-bolme{grid-template-columns:minmax(0,1fr);}
  .bolme--tersi{direction:ltr;}
  .bolme-gorsel{aspect-ratio:16/10;}
  .liste-satir{grid-template-columns:auto 1fr;}
  .liste-gorsel{display:none;}
  .liste-maddeler{grid-template-columns:1fr;}
  .haber-izgara{grid-template-columns:1fr;}
  .bant-izgara{grid-template-columns:repeat(2,1fr);}
  .alt-izgara{grid-template-columns:1fr 1fr;}
}

@media (max-width:760px){
  .gezinti{
    position:fixed;top:82px;left:12px;right:12px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border:1px solid var(--cizgi);border-radius:16px;
    padding:12px;box-shadow:var(--golge);
    display:none;
  }
  .gezinti.acik{display:flex;}
  .gezinti a{color:var(--murekkep-soft);padding:13px 14px;}
  .menu-dugmesi{display:block;}
  .ust .dugme{display:none;}
  .hero-sayilar{grid-template-columns:repeat(2,1fr);}
  .olcum{grid-template-columns:1fr;gap:18px;}
  .bant-izgara{grid-template-columns:1fr;gap:30px;}
  .alt-izgara{grid-template-columns:1fr;}
  .yayin{grid-template-columns:1fr;gap:10px;}
  .yayin-rozet{justify-self:start;}
}

/* ---------------------------------------------------------------- *
   17. İÇ SAYFA BANNER
   Anasayfadaki hero'nun kısa kardeşi: aynı dil, daha az yükseklik.
 * ---------------------------------------------------------------- */

.ic-hero{
  position:relative;
  min-height:min(62vh,560px);
  display:flex;align-items:flex-end;
  padding:150px 0 clamp(44px,5vw,72px);
  overflow:hidden;isolation:isolate;
}
/*
   Odak %28'den %68'e indirildi. Laboratuvar fotoğraflarının üst
   kısmında duvardaki "Kiper'in" tabelası var; %28'de tabela üst
   menüdeki logonun hemen arkasına denk geliyor ve iki Kiperin logosu
   çakışıyordu. Altı iç sayfada da ölçüldü.
*/
.ic-hero-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 68%;}
.ic-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    /* Üst bant perdesi: menünün ve logonun arkasını sakinleştirir. */
    linear-gradient(to bottom, rgba(14,36,56,.95) 0px, rgba(14,36,56,.72) 150px, rgba(14,36,56,.2) 300px),
    linear-gradient(to top, rgba(14,36,56,.96) 0%, rgba(14,36,56,.82) 46%, rgba(14,36,56,.55) 100%),
    radial-gradient(800px 460px at 82% 6%, rgba(0,146,214,.28), transparent 64%);
}
.ic-hero h1{color:#fff;font-size:var(--buyuk);max-width:16ch;margin-bottom:.3em;}
.ic-hero p{color:#C4D6E4;font-size:var(--kucuk);max-width:50ch;margin:0;}

.kirinti{
  font-family:var(--yazi);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8FA8BE;margin-bottom:18px;display:flex;gap:10px;align-items:center;
}
.kirinti a:hover{color:var(--altin-acik);}

/* ---------------------------------------------------------------- *
   18. İÇERİK BLOKLARI
 * ---------------------------------------------------------------- */

/* Madde ızgarası — değerler, yetkinlikler */
.madde-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.madde{
  background:var(--kagit-2);
  border:1px solid var(--cizgi);
  border-radius:var(--kenar);
  padding:30px 28px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s;
}
.madde:hover{transform:translateY(-5px);box-shadow:var(--golge);border-color:transparent;}
.madde h3{font-size:1.15rem;margin-bottom:.4em;}
.madde p{font-size:.95rem;color:var(--murekkep-soft);margin:0;}
.koyu .madde{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.koyu .madde p{color:#A9C0D4;}

.madde-no{
  font-family:var(--yazi);font-size:.8rem;font-weight:600;
  color:var(--altin-koyu);letter-spacing:.1em;display:block;margin-bottom:14px;
}
.koyu .madde-no{color:var(--altin-acik);}

/* İki sütunlu metin bölmesi */
.ikili{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,64px);}
.ikili h3{font-size:1.5rem;}
.ikili p{color:var(--murekkep-soft);}
.koyu .ikili p{color:#A9C0D4;}

/* Ekip / kurul kartı */
.kisi-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.kisi{
  background:var(--kagit);border:1px solid var(--cizgi);
  border-radius:var(--kenar);padding:30px 24px;text-align:center;
}
.kisi-bas{
  width:62px;height:62px;border-radius:50%;
  background:var(--lacivert);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--yazi);font-size:1.2rem;
  margin:0 auto 16px;
}
.kisi h3{font-size:1.02rem;margin-bottom:.25em;}
.kisi .rol{font-size:.86rem;color:var(--mavi-koyu);font-weight:600;display:block;margin-bottom:6px;}
.kisi .alan{font-size:.84rem;color:var(--murekkep-soft);}

/* Uyarı kutusu */
.uyari{
  display:flex;gap:14px;align-items:flex-start;
  background:#FBF6E8;border:1px solid #EBD9AE;
  border-radius:14px;padding:18px 22px;margin-top:32px;
  font-size:.92rem;color:#6B5310;
}

/* Organizasyon şeması */
.sema{margin-top:20px;}
.sema-kat{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;position:relative;}
.sema-kat + .sema-kat{margin-top:52px;}
.sema-kat + .sema-kat::before{
  content:"";position:absolute;top:-52px;left:50%;width:2px;height:24px;
  background:var(--cizgi);transform:translateX(-50%);
}
.sema-kat + .sema-kat::after{
  content:"";position:absolute;top:-28px;left:12%;right:12%;height:2px;background:var(--cizgi);
}
.sema-kat:first-child + .sema-kat .sema-kutu::before,
.sema-kat + .sema-kat .sema-kutu::before{
  content:"";position:absolute;top:-28px;left:50%;width:2px;height:28px;
  background:var(--cizgi);transform:translateX(-50%);
}
.sema-kutu{
  position:relative;background:var(--kagit);border:1px solid var(--cizgi);
  border-radius:14px;padding:18px 22px;min-width:210px;text-align:center;
  transition:border-color .2s, transform .2s;
}
.sema-kutu:hover{border-color:var(--altin);transform:translateY(-3px);}
.sema-kutu b{display:block;font-size:.98rem;color:var(--lacivert);margin-bottom:5px;}
.sema-kutu span{
  font-family:var(--yazi);font-size:.7rem;
  letter-spacing:.08em;color:var(--murekkep-soft);
}
.sema-kutu--ust{background:var(--lacivert);border-color:var(--lacivert);min-width:280px;}
.sema-kutu--ust b{color:#fff;}
.sema-kutu--ust span{color:var(--altin-acik);}
.sema-kat:first-child + .sema-kat::after{left:12%;right:12%;}

/* İletişim formu */
.form-kap{
  background:var(--kagit);border:1px solid var(--cizgi);
  border-radius:var(--kenar);padding:clamp(28px,3vw,44px);
}
.form-satir{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-alan{margin-bottom:18px;}
.form-alan label{
  display:block;font-size:.86rem;font-weight:600;
  color:var(--lacivert);margin-bottom:7px;
}
.form-alan input,.form-alan select,.form-alan textarea{
  width:100%;padding:14px 16px;font:inherit;font-size:.95rem;
  border:1px solid var(--cizgi);border-radius:12px;
  background:var(--kagit-2);color:var(--murekkep);
  transition:border-color .2s, background .2s;
}
.form-alan input:focus,.form-alan select:focus,.form-alan textarea:focus{
  border-color:var(--mavi);background:#fff;outline:none;
}
.form-alan textarea{min-height:140px;resize:vertical;}

@media (max-width:1000px){
  .madde-izgara{grid-template-columns:repeat(2,1fr);}
  .kisi-izgara{grid-template-columns:repeat(2,1fr);}
  .ikili{grid-template-columns:1fr;}
  .sema-kat{flex-direction:column;align-items:stretch;}
  .sema-kat + .sema-kat::after{display:none;}
  .sema-kat + .sema-kat .sema-kutu::before{display:none;}
  .sema-kat + .sema-kat{margin-top:26px;}
}
@media (max-width:640px){
  .madde-izgara,.kisi-izgara,.form-satir{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------- *
   19. EYLEM ÇAĞRISI BANDI
   Ortalanmış metin + altında buton düzeni, koyu zeminde geniş bir
   boşluğun ortasında havada asılı duruyordu. İki sütunlu bant hem
   daha derli toplu hem sayfayı gereksiz uzatmıyor.
 * ---------------------------------------------------------------- */

.cta-bant{border-top:1px solid rgba(255,255,255,.1);}
.cta-ic{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.cta-ic h2{font-size:clamp(1.7rem,2.6vw,2.4rem);margin-bottom:.3em;}
.cta-ic p{margin:0;max-width:48ch;font-size:1rem;}
.cta-ic .dugme{white-space:nowrap;}

@media (max-width:820px){
  .cta-ic{grid-template-columns:minmax(0,1fr);}
}

/* ---------------------------------------------------------------- *
   20. YASAL METİN DÜZENİ  (KVKK, Gizlilik Politikası)
 * ---------------------------------------------------------------- */

/*
   Uzun hukuki metin, sitenin geri kalanından farklı bir okuma düzeni
   istiyor: dar bir sütun, belirgin bölüm numaraları ve masaüstünde
   yanda duran bir içindekiler listesi. Ölçü 68 karakterle sınırlı;
   bu genişlik, satır sonunda gözün bir alt satırı bulmasını
   kolaylaştırdığı için uzun metinde okumayı hızlandırıyor.
*/

.yasal{padding:clamp(56px,7vw,104px) 0 clamp(72px,9vw,130px);}

.yasal-kap{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:clamp(32px,5vw,80px);
  align-items:start;
}

/* İçindekiler — sayfa kaydıkça yanda kalır. */
.yasal-icindekiler{
  position:sticky;
  top:100px;
  border-left:2px solid var(--cizgi);
  padding-left:20px;
}
.yasal-icindekiler h2{
  font-family:var(--yazi);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--murekkep-soft);
  margin:0 0 16px;
}
.yasal-icindekiler ol{list-style:none;margin:0;padding:0;counter-reset:ix;}
.yasal-icindekiler li{counter-increment:ix;margin-bottom:9px;}
.yasal-icindekiler a{
  display:flex;
  gap:10px;
  font-size:.875rem;
  line-height:1.45;
  color:var(--murekkep-soft);
  text-decoration:none;
  transition:color .18s ease;
}
.yasal-icindekiler a::before{
  content:counter(ix,decimal-leading-zero);
  font-family:var(--yazi);
  font-size:.72rem;
  color:var(--altin-koyu);
  padding-top:.18em;
}
.yasal-icindekiler a:hover,
.yasal-icindekiler a:focus-visible{color:var(--mavi-koyu);}

/* Metin sütunu */
.yasal-metin{max-width:62ch;counter-reset:bolum;}

.yasal-ozet{
  background:var(--kagit-2);
  border:1px solid var(--cizgi);
  border-radius:14px;
  padding:clamp(20px,3vw,30px);
  margin-bottom:clamp(36px,4.5vw,56px);
}
.yasal-ozet p{margin:0;font-size:1.02rem;color:var(--murekkep);}
.yasal-ozet p + p{margin-top:.7em;}

.yasal-bolum{counter-increment:bolum;padding-top:clamp(30px,4vw,46px);}
.yasal-bolum + .yasal-bolum{border-top:1px solid var(--cizgi);}

.yasal-bolum h2{
  display:flex;
  gap:14px;
  align-items:baseline;
  font-size:clamp(1.3rem,2vw,1.62rem);
  line-height:1.25;
  margin:0 0 .65em;
}
.yasal-bolum h2::before{
  content:counter(bolum,decimal-leading-zero);
  flex:none;
  font-family:var(--yazi);
  font-size:.82rem;
  font-weight:500;
  color:var(--altin-koyu);
  padding-top:.32em;
}

.yasal-bolum h3{
  font-family:var(--yazi);
  font-size:1rem;
  font-weight:600;
  color:var(--murekkep);
  margin:1.7em 0 .5em;
}

.yasal-bolum p,
.yasal-bolum li{font-size:1rem;line-height:1.75;color:var(--murekkep-soft);}
.yasal-bolum p{margin:0 0 1em;}
.yasal-bolum strong{color:var(--murekkep);font-weight:600;}

.yasal-bolum ul,
.yasal-bolum ol{margin:0 0 1.2em;padding-left:1.35em;}
.yasal-bolum li{margin-bottom:.5em;padding-left:.2em;}
.yasal-bolum li::marker{color:var(--altin-koyu);}

/* Tanım listesi — "veri kategorisi → ne için" gibi eşlemeler. */
.yasal-tablo{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.4em;
  font-size:.96rem;
}
.yasal-tablo th,
.yasal-tablo td{
  text-align:left;
  vertical-align:top;
  padding:12px 16px 12px 0;
  border-bottom:1px solid var(--cizgi);
  line-height:1.6;
}
.yasal-tablo th{
  width:34%;
  font-family:var(--yazi);
  font-size:.86rem;
  font-weight:600;
  color:var(--murekkep);
}
.yasal-tablo td{color:var(--murekkep-soft);}

/* Başvuru kutusu — sayfanın eylem noktası. */
.yasal-kutu{
  border:1px solid var(--cizgi);
  border-left:3px solid var(--altin);
  border-radius:0 14px 14px 0;
  background:var(--kagit-2);
  padding:clamp(18px,2.6vw,26px);
  margin:0 0 1.2em;
}
.yasal-kutu p:last-child{margin-bottom:0;}

/* Yer tutucu — içerik sahibi tarafından doldurulacak alanlar. */
.doldurulacak{
  background:#FFF4D6;
  border-bottom:1px dashed var(--altin-koyu);
  color:var(--altin-koyu);
  font-family:var(--yazi);
  font-size:.86em;
  padding:1px 5px;
  border-radius:3px;
}

.yasal-tarih{
  font-family:var(--yazi);
  font-size:.8rem;
  color:var(--murekkep-soft);
  margin-top:clamp(36px,4vw,54px);
  padding-top:22px;
  border-top:1px solid var(--cizgi);
}

@media (max-width:900px){
  .yasal-kap{grid-template-columns:minmax(0,1fr);}
  .yasal-icindekiler{
    position:static;
    border-left:0;
    border-top:1px solid var(--cizgi);
    border-bottom:1px solid var(--cizgi);
    padding:20px 0;
  }
  .yasal-icindekiler ol{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:4px 22px;
  }
  .yasal-tablo th{width:auto;}
  .yasal-tablo,
  .yasal-tablo tbody,
  .yasal-tablo tr,
  .yasal-tablo th,
  .yasal-tablo td{display:block;}
  .yasal-tablo tr{padding:12px 0;border-bottom:1px solid var(--cizgi);}
  .yasal-tablo th,
  .yasal-tablo td{border:0;padding:0;}
  .yasal-tablo th{margin-bottom:4px;}
}

/* Alt bilgideki yasal bağlantılar — eskiden düz metindi. */
.alt-yasal{display:flex;flex-wrap:wrap;gap:8px 18px;}
.alt-yasal a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s ease,color .18s ease;}
.alt-yasal a:hover,
.alt-yasal a:focus-visible{color:#fff;border-bottom-color:var(--altin);}

/*
   Yasal metin içindeki bağlantılar.
   Ölçümde fark edildi: metnin içinde geçen bağlantılar çevresindeki
   yazıdan hiç ayrılmıyordu. Rengin tek başına ayırt edici olmaması
   WCAG 1.4.1'e de aykırı, bu yüzden altı çizili.
*/
/*
   Özgüllük bilerek yüksek: Elementor'ın frontend.min.css'indeki
   ".elementor a{text-decoration:none}" kuralı bizimkiyle aynı
   özgüllükte (0,1,1) ve canlıda SONRA yüklendiği için altı çizgiyi
   siliyordu. [href] niteliği özgüllüğü (0,2,1) yapıp bunu kesiyor.
   Canlıda ölçülerek bulundu; yerel deneyde CSS sırası ters olduğu
   için görünmemişti.
*/
.yasal-metin a[href]{
  color:var(--mavi-koyu);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .18s ease;
}
.yasal-metin a[href]:hover,
.yasal-metin a[href]:focus-visible{color:var(--murekkep);text-decoration-thickness:2px;}
/* İçindekiler listesi kendi biçimini korur. */
.yasal-icindekiler a[href]{text-decoration:none;}

/* ---------------------------------------------------------------- *
   21. ELEMENTOR SARMALAYICILARININ ETKİSİZLEŞTİRİLMESİ

   Sayfalar bölüm bölüm ayrı HTML widget'larına konuyor ki her bölüm
   Elementor panelinden tek tek düzenlenebilsin. Ama Elementor'ın kendi
   CSS'i bu düzeni iki yerden bozuyor (canlıdan indirilen dosyalarla
   ölçüldü, _araclar/v2-elementor-deney.js):

     .elementor .e-flexbox-base{display:flex;flex-direction:row}
         -> widget'lar alt alta değil YAN YANA diziliyordu.
            Ölçüm: 9 widget, genişlikler 0-385px, sayfa 1981px
            (621px yatay taşma).

     .e-con{--container-max-width:1140px} + padding:10px
         -> tam genişlik bölümler 1140px'e sıkışıyor, kenarlarda
            beyaz şerit kalıyordu.

   Seçici özgüllüğü bilerek yüksek tutuldu: body.elementor-page .elementor
   .e-con (0,3,1), Elementor'ın .elementor .e-flexbox-base (0,2,0)
   kuralını dosya yükleme sırasından bağımsız olarak yener.

   Bu blok yalnızca bu dosyayla birlikte yüklenir, o da yalnızca
   mu-plugin'in kapsamındaki dokuz sayfada. Sitedeki başka hiçbir
   Elementor sayfası etkilenmez.
 * ---------------------------------------------------------------- */

body.elementor-page .elementor .e-con{
  display:block;
  width:100%;
  max-width:none;
  --container-max-width:none;
  --width:100%;
  padding:0;
  margin:0;
  gap:0;
}

body.elementor-page .elementor .elementor-widget{
  width:100%;
  margin:0;
  padding:0;
  --kit-widget-spacing:0;
  --widgets-spacing:0;
}

/* Elementor bazı sürümlerde widget içeriğini ayrı bir kapsayıcıya sarıyor. */
body.elementor-page .elementor .elementor-widget-container{margin:0;padding:0;}


/* ---------------------------------------------------------------- *
   22. GÖRSEL BOYUTLARININ ELEMENTOR'A KARŞI KORUNMASI

   Elementor'ın frontend.min.css'i şu kuralı basıyor:

       .elementor img { height:auto; max-width:100% }

   Özgüllüğü (0,1,1). Bizim görsel kurallarımızın çoğu ya aynı
   özgüllükte (".marka img") ya da daha düşük (".hero-foto", tek sınıf
   = 0,1,0). Elementor'ın dosyası canlıda SONRA yüklendiği için
   height değerlerimizi eziyordu. Canlıda ölçülen sonuçlar:

       üst menü logosu   85x42  ->  304x150
       alt bilgi logosu 118x58  ->  304x150
       iç hero fotoğrafı 1360x570 -> 1360x1699

   Yani "height:auto" görselleri HTML'deki width/height özniteliklerine
   ya da doğal boyutlarına döndürüyordu.

   body.elementor-page öneki özgüllüğü (0,2,1)'e çıkarıp kuralı kesiyor.
   Bu blok yalnızca site-v2.css ile yüklenir, o da yalnızca mu-plugin'in
   kapsamındaki dokuz sayfada.
 * ---------------------------------------------------------------- */

body.elementor-page .marka img{height:42px;width:auto;}
body.elementor-page .alt-marka img{height:58px;width:auto;}

body.elementor-page .hero-foto,
body.elementor-page .ic-hero-foto,
body.elementor-page .bant-foto{width:100%;height:100%;object-fit:cover;}

body.elementor-page .bolme-gorsel img,
body.elementor-page .liste-gorsel img,
body.elementor-page .haber-foto img{width:100%;height:100%;object-fit:cover;}