/* ==========================================================================
   Tesisat Dergisi | Modern ana sayfa stilleri
   Sürüm 5. Bu blok /lib/modern/modern5.css olarak ayrılabilir. 10 site aynı dosyayı
   kullanır; siteye özel fark yalnızca <html data-dergi="..."> değişkenleridir.
   ========================================================================== */

/* 1. Tasarım değişkenleri ------------------------------------------------ */
:root {
  --murekkep: #1C2A38;          /* metin, menü bandı, manşet paneli, alt bilgi */
  --murekkep-acik: #2A3B4D;
  --kagit: #EEF1F4;             /* sayfa zemini (galvaniz gri) */
  --beyaz: #FFFFFF;
  --cizgi: #D3DAE1;
  --boru: #C3CCD5;              /* bölüm başlıklarındaki boru hattı */
  --soluk: #5B6B7B;             /* ikincil metin (beyazda 5.5:1) */
  --soluk-koyu: #B8C2CC;        /* koyu zeminde ikincil metin (8:1) */

  /* Siteye özel marka rengi (aşağıdaki [data-dergi] bloklarında değişir) */
  --marka: #F47936;
  --marka-yazi: var(--murekkep);
  --marka-koyu: #B84A12;        /* beyaz yazılı düğmeler, bağlantı vurgusu */
  --marka-koyu-hover: #983C0E;

  /* İçerik türü etiketleri: tesisat boru işaretleme renkleri (RAL) */
  --etiket-haber: var(--marka);   --etiket-haber-yazi: var(--marka-yazi);
  --etiket-teknik: #2271B3;       --etiket-teknik-yazi: #FFFFFF;   /* RAL 5015 */
  --etiket-gorus: #237F52;        --etiket-gorus-yazi: #FFFFFF;    /* RAL 6032 */
  --etiket-ticari: #F9A800;       --etiket-ticari-yazi: #1C2A38;   /* RAL 1003 */

  --yazi-baslik: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --yazi-metin: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;

  --sayfa-max: 1920px;          /* tam genişlik; üst sınırı buradan değiştirin */
  /* Sağ kolon (masaüstü): 1280 px ve üstünde tam 400 px; 1024-1279 px arasında
     ekranla orantılı olarak 340 px'e kadar daralır ki içerik alanı sıkışmasın.
     400 px'lik kreatifler dar ekranda oranı korunarak küçülür. */
  --sag-kolon: clamp(340px, 31.25vw, 400px);
  /* Yatay bantlar (alan 9, 16, 17, 24) en fazla bu genişlikte; top banner'dan
     biraz dar kalsın diye. Top banner 970x90'a zorlandığı için 900 px
     (DENEME, 15.09.2026). Top banner doğal boyuna (728x90) dönerse 700px. */
  --yatay-banner-max: 900px;

  /* DENEMELER (15.09.2026): kreatif, kendi oranından farklı bir kutuya nasıl
     sığsın? Değerler:
       fill    -> kutuyu tam doldurur, görsel ENİNE/BOYUNA ESNER (yazılar bozulur)
       cover   -> kutuyu doldurur, taşan kenarları KIRPAR (görsel bozulmaz)
       contain -> görselin tamamı görünür, kenarda BOŞ BANT kalır               */
  --top-banner-sigdirma: fill;      /* 728x90 kreatif 970x90'a zorlanır */
  --sag-banner-sigdirma: fill;      /* sağ banner'lar 400x200 kutuya uzatılır (cover: ortası kırpılır, contain: boşluk kalır) */
  --kenar: clamp(16px, 2.2vw, 40px);
  --aralik: clamp(16px, 1.7vw, 28px);
  --nav-h: 48px;
  --vitrin-radius: 12px;
}

/* ===========================================================================
   SİTE TEMALARI
   index.asp <html lang="tr" data-dergi="<%=dergininAdi2%>"> yazar.
   Anahtar değerler _fonksiyonlar.asp'deki dergininAdi2 ile birebir aynıdır:
   tesisat, dogalgaz, yanginguvenlik, enerjidunyasi, yalitim, suvecevre,
   cativecephe, yesilbina, boatbuilderturkey, tersane

   --marka ............. etiket zemini, menü vurgusu, koyu zeminde odak halkası
   --marka-yazi ........ --marka üzerindeki yazı (en az 4.5:1)
   --marka-koyu ........ beyaz yazılı düğmeler ve bağlantı vurgusu (beyazla 4.5:1)
   --marka-koyu-hover .. düğmenin üzerine gelince

   Renkler index.asp'deki logobg değerlerinden alındı. Ölçülen kontrast oranları
   yorumda yazıyor; kurumsal kimlik kılavuzunuzda başka değer varsa doğrudan
   buradan değiştirin, başka hiçbir yere dokunmanız gerekmez.
   =========================================================================== */

[data-dergi="tesisat"] {              /* logobg #f47936 */
  --marka: #F47936;
  --marka-yazi: #1C2A38;              /* 6.9:1 */
  --marka-koyu: #B84A12;              /* beyazla 6.1:1 */
  --marka-koyu-hover: #983C0E;
}

[data-dergi="dogalgaz"] {             /* logobg #004890 - Enerji & Doğalgaz */
  --marka: #004890;
  --marka-yazi: #FFFFFF;              /* 9.0:1 */
  --marka-koyu: #004890;              /* beyazla 9.0:1 */
  --marka-koyu-hover: #003468;
}

[data-dergi="enerjidunyasi"] {        /* logobg #7fc66a - Enerji ve Çevre Dünyası */
  --marka: #7FC66A;
  --marka-yazi: #1C2A38;              /* 7.1:1 */
  --marka-koyu: #3C7F2A;              /* beyazla 4.9:1 */
  --marka-koyu-hover: #2F661F;
}

[data-dergi="yanginguvenlik"] {       /* logobg #ee1b28 - Yangın ve Güvenlik */
  /* Kurumsal #EE1B28 beyaz yazıyla 4.35:1'de kalıyordu; bir tık koyultuldu. */
  --marka: #E01423;
  --marka-yazi: #FFFFFF;              /* 4.9:1 */
  --marka-koyu: #C2101C;              /* beyazla 6.2:1 */
  --marka-koyu-hover: #A50D17;
}

[data-dergi="yalitim"] {              /* logobg #ffcc01 - Yalıtım */
  --marka: #FFCC01;
  --marka-yazi: #1C2A38;              /* 9.7:1 */
  --marka-koyu: #8A6A00;              /* beyazla 5.1:1 (sarı üzerine beyaz olmaz) */
  --marka-koyu-hover: #6E5400;
}

[data-dergi="suvecevre"] {            /* logobg #1f3e7f - Su ve Çevre Teknolojileri */
  --marka: #1F3E7F;
  --marka-yazi: #FFFFFF;              /* 10.2:1 */
  --marka-koyu: #1F3E7F;              /* beyazla 10.2:1 */
  --marka-koyu-hover: #162D5C;
}

[data-dergi="cativecephe"] {          /* logobg #ffffff - Çatı ve Cephe Sistemleri */
  /* !!! DOLDURULACAK: logobg beyaz olduğu için marka rengi olarak kullanılamaz.
     Aşağıdaki nötr çelik grisi geçici bir değerdir; kurumsal rengi yazın. */
  --marka: #546E7A;
  --marka-yazi: #FFFFFF;              /* 5.4:1 */
  --marka-koyu: #455A64;              /* beyazla 7.4:1 */
  --marka-koyu-hover: #37474F;
}

[data-dergi="yesilbina"] {            /* logobg #5a9829 - YeşilBina */
  --marka: #5A9829;
  --marka-yazi: #16250D;              /* 4.6:1 (bu yeşilde beyaz yazı 3.5:1'de kalıyor) */
  --marka-koyu: #3F6B1C;              /* beyazla 6.3:1 */
  --marka-koyu-hover: #325617;
}

[data-dergi="boatbuilderturkey"] {    /* logobg #7195cf - Boat Builder Türkiye */
  --marka: #7195CF;
  --marka-yazi: #1C2A38;              /* 4.8:1 */
  --marka-koyu: #2E5591;              /* beyazla 7.4:1 */
  --marka-koyu-hover: #22406E;
}

[data-dergi="tersane"] {              /* logobg #e3001b - Tersane */
  --marka: #E3001B;
  --marka-yazi: #FFFFFF;              /* 4.9:1 */
  --marka-koyu: #B80016;              /* beyazla 7.0:1 */
  --marka-koyu-hover: #930012;
}

/* 2. Temel ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sabit-h, var(--nav-h)) + 12px);
}
body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font: 400 1rem/1.5 var(--yazi-metin);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, figure, ul, ol, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
html.cekmece-acik { overflow: hidden; }
:focus-visible { outline: 3px solid var(--odak, var(--marka-koyu)); outline-offset: 2px; }
.kat-nav, .manset, .alt, .cerez, .cekmece__ust { --odak: var(--marka); }   /* koyu zeminde açık turuncu */

.gizli {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla {
  position: absolute; left: 12px; top: -120px; z-index: 100;
  padding: 10px 16px; background: var(--murekkep); color: #fff; font-weight: 600;
}
.atla:focus { top: 12px; }

.ikon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ikon--dolu { fill: currentColor; stroke: none; }

/* Görsel kutusu: resim gelmezse teknik resim tarama deseni görünür */
.gorsel {
  position: relative;
  overflow: hidden;
  background-color: #DCE2E8;
  background-image: repeating-linear-gradient(135deg, rgba(28, 42, 56, .10) 0 1px, transparent 1px 9px);
}
.gorsel img { width: 100%; height: 100%; object-fit: cover; }
.gorsel--yok img { opacity: 0; }

/* 3. Boru etiketi: bölüm başlıkları ve kategori etiketleri ------------------ */
.etiket {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 26px;
  padding: 3px 17px 3px 9px;
  color: var(--e-yazi, #fff);
  font: 600 1rem/1.1 var(--yazi-baslik);
  letter-spacing: .01em;
  text-transform: lowercase;       /* veritabanındaki BÜYÜK HARF adlar cümle düzenine iner */
  white-space: nowrap;
}
.etiket::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--e-zemin, var(--murekkep));
  clip-path: polygon(0 0, calc(100% - var(--e-uc, 9px)) 0, 100% 50%, calc(100% - var(--e-uc, 9px)) 100%, 0 100%);
}
.etiket > span { display: inline-block; }
.etiket > span::first-letter { text-transform: uppercase; }
.etiket--kucuk {
  --e-uc: 7px;
  min-height: 22px;
  padding: 2px 13px 2px 7px;
  font-size: .875rem;
}
a.etiket:hover::before { filter: brightness(.92); }

[data-grup="haber"]  { --e-zemin: var(--etiket-haber);  --e-yazi: var(--etiket-haber-yazi); }
[data-grup="teknik"] { --e-zemin: var(--etiket-teknik); --e-yazi: var(--etiket-teknik-yazi); }
[data-grup="gorus"]  { --e-zemin: var(--etiket-gorus);  --e-yazi: var(--etiket-gorus-yazi); }
[data-grup="ticari"] { --e-zemin: var(--etiket-ticari); --e-yazi: var(--etiket-ticari-yazi); }

.boru { display: flex; align-items: center; margin-bottom: 12px; }
.boru__hat { flex: 1; min-width: 16px; height: 3px; background: var(--boru); }
.boru__tumu {
  flex: none;
  margin-left: 10px;
  padding: 8px 0;
  font: 600 .875rem/1 var(--yazi-metin);
}
.boru__tumu:hover { color: var(--marka-koyu); text-decoration: underline; text-underline-offset: 3px; }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  font: 500 .8125rem/1.3 var(--yazi-metin);
  color: var(--soluk);
}
.meta__oge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  border: 2px solid transparent;
  border-radius: 2px;
  font: 600 1rem/1.1 var(--yazi-baslik);
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
}
.dugme--dolu { background: var(--marka-koyu); color: #fff; }
.dugme--dolu:hover { background: var(--marka-koyu-hover); }
.dugme--cizgi { background: transparent; border-color: var(--murekkep); color: var(--murekkep); }
.dugme--cizgi:hover { background: var(--murekkep); color: #fff; }

/* 4. Reklam alanları -------------------------------------------------------- */
/* Kreatif sığıyorsa gerçek boyutunda, sığmıyorsa oranı korunarak küçülür;
   width/height öznitelikleri yer ayırdığı için sayfa kayması olmaz. */
.reklam { width: fit-content; max-width: 100%; margin-inline: auto; }
.reklam__link { display: block; }
.reklam__link--mobil { display: none; }   /* yalnızca telefonda görünür (bkz. künye) */
.reklam__link + .reklam__link { margin-top: 10px; }
[data-dondur] .reklam__link + .reklam__link { margin-top: 0; }
.reklam__link.gorsel--yok {
  background-color: #DCE2E8;
  background-image: repeating-linear-gradient(135deg, rgba(28, 42, 56, .10) 0 1px, transparent 1px 9px);
}
.reklam__link.gorsel--yok img { opacity: 0; }
.reklam__link img { outline: 1px solid rgba(28, 42, 56, .10); outline-offset: -1px; }

.reklam-yigini { container: yigin / inline-size; }
.reklam-yigini__liste {
  display: grid;
  grid-template-columns: minmax(0, 400px);
  justify-content: center;
  gap: var(--aralik);   /* sağ kolondaki ayrı banner'lar arasındaki boşlukla aynı (eski: 10px) */
}
.reklam-yigini__liste .reklam__link + .reklam__link { margin-top: 0; }
/* Tablette sağ kolon tam satır olduğunda 2x2 ızgara (2 x 400 + en fazla ~20 aralık) */
@container yigin (min-width: 820px) {
  .reklam-yigini__liste { grid-template-columns: repeat(2, minmax(0, 400px)); }
}
/* Sağ kolonun görsel banner'ları kolon genişliğini doldurur; dar masaüstünde
   400x200 oranı korunarak küçülür. */
@media (min-width: 1024px) {
  .kolon--sag > .reklam-yigini,
  .kolon--sag > .reklam:has(> .reklam__link:not(.reklam__link--yazi) > img, > .reklam__video) { width: 100%; }
  .kolon--sag .reklam__link:not(.reklam__link--yazi) > img,
  .kolon--sag > .reklam > .reklam__video { width: 100%; height: auto; }
}
/* SAĞ BANNER 2:1 DENEMESİ (15.09.2026)
   Sağ kolondaki TÜM görsel banner'lar (340x125, 340x250, 200x400 ...) kendi
   oranlarından bağımsız olarak 400x200 kutuya uzatılır (fill: kırpma yok).
   Tip 5 (yazı) ve tip 3 (script) reklamlar bu kurala girmez.
   Sığdırma biçimi :root'taki --sag-banner-sigdirma değişkenindedir.
   Geri almak için bu bloğu silin, .reklam-yigini__liste aralığını 10px yapın
   (ortak.asp'deki ölçü notuna da bakın). */
.kolon--sag .reklam__link:not(.reklam__link--yazi) > img,
.kolon--sag > .reklam > .reklam__video {
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: var(--sag-banner-sigdirma, fill);
  object-position: center;
}
/* Dönen (data-dondur) değil, alt alta birden fazla kreatif basılırsa aralık yine aynı */
.kolon--sag .reklam:not([data-dondur]) > .reklam__link + .reklam__link { margin-top: var(--aralik); }

/* 5. Üst bant, künye, kategori menüsü --------------------------------------- */
.ust-bant { display: none; background: var(--kagit); border-bottom: 1px solid var(--cizgi); font-size: .875rem; }
.ust-bant__ic {
  display: flex; align-items: center; gap: 20px;
  max-width: var(--sayfa-max); min-height: 38px;
  margin: 0 auto; padding: 0 var(--kenar);
}
.ust-bant__tarih { display: none; color: var(--soluk); }
@media (min-width: 1280px) { .ust-bant__tarih { display: block; } }
.ust-bant__linkler a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ust-bant__nav { margin-left: auto; }
.ust-bant__linkler { display: flex; gap: 20px; }
/* Kurumsal bağlantılar kalın; yazı ailesi yandaki "Abone ol" düğmesiyle aynı
   (Barlow Semi Condensed 700 zaten yükleniyor, ek yazı tipi indirilmez) */
.ust-bant__linkler a { font: 700 .9375rem/1.2 var(--yazi-baslik); letter-spacing: .01em; }
.ust-bant__sosyal { display: inline-flex; padding: 6px; color: var(--murekkep); }
.ust-bant__sosyal:hover { color: var(--marka-koyu); }

.acilir { position: relative; }
.acilir__dugme {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 3px 10px;
  border: 0; border-radius: 2px;
  background: var(--murekkep); color: #fff;
  font: 600 .9375rem/1 var(--yazi-baslik);
  cursor: pointer;
}
.acilir__dugme[aria-expanded="true"] .ikon { transform: rotate(180deg); }
.acilir__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 230px; padding: 6px 0;
  background: var(--beyaz); border: 1px solid var(--cizgi);
  box-shadow: 0 10px 24px rgba(28, 42, 56, .16);
}
.acilir__menu a { display: block; padding: 9px 16px; font-weight: 500; }
.acilir__menu a:hover { background: var(--kagit); }

.kunye { background: var(--beyaz); }
.kunye__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
  max-width: var(--sayfa-max);
  margin: 0 auto;
  padding: 12px var(--kenar);
}
.kunye__logo { line-height: 0; }
.kunye__logo a { position: relative; display: block; }
.kunye__logo img { width: 280px; }
.kunye__logo-metin {
  display: none;
  font: 700 1.75rem/1 var(--yazi-baslik);
  color: var(--murekkep);
  white-space: nowrap;
}
.kunye__logo.gorsel--yok img { display: none; }

/* Yayıncı logosu (B2B Medya, 130x90): top banner'ın sağında; dar ekranda gizli.
   Eşik, top banner'ın genişliğine bağlıdır:
     970x90 (şu an, deneme): 280 + 24 + 970 + 24 + 130 = 1428 px içerik
                             -> ~1500 px ekran; altında banner küçülürdü.
     728x90 (doğal boy)    : 280 + 24 + 728 + 24 + 130 = 1186 px içerik
                             -> 1280 px ekran yeterli.
   Eşik, masaüstü bloğunun arkasındaki "Geniş ekran" medya koşulundadır. */
.kunye__yayinci { display: none; line-height: 0; }
.kunye__yayinci img { width: 130px; height: 90px; }
.kunye__yayinci.gorsel--yok { display: none !important; }
/* Görünür olduğu düzen, masaüstü bloğunun (1024+) ARKASINDA tanımlıdır:
   aynı seçici olduğundan sonra gelen kural geçerli olur. */

/* Telefon: logo en üstte tam genişlik, altında 728x90 tam genişlik */
@media (max-width: 639.98px) {
  .kunye__ic { justify-items: stretch; gap: 10px; padding: 12px var(--kenar) 14px; }
  .kunye__logo img { width: 100%; }
  .kunye__reklam { width: 100%; }
  .kunye__reklam .reklam__link img { width: 100%; }
  .kunye__reklam .reklam__link + .reklam__link { margin-top: 8px; }
  /* Telefonda 970x90 kreatif 33 px'e iner. Aynı alana 320x100 gibi bir mobil
     kreatif de basılırsa aşağıdaki iki sınıf hangisinin görüneceğini seçer. */
  .kunye__reklam .reklam__link--masaustu { display: none; }
  .kunye__reklam .reklam__link--mobil { display: block; }
}
.kunye__logo.gorsel--yok .kunye__logo-metin { display: block; padding: 8px 0; line-height: 1; }
.kat-nav-nobetci { height: 1px; margin-bottom: -1px; }
/* Telefon ve tablette yalnızca kategori menüsü sabitlenir: üst bant, logo ve
   728x90 birlikte ekranın üçte birini kaplardı. 1024 px'ten itibaren .sabit
   bloğunun tamamı sabitlenir (aşağıdaki masaüstü bölümüne bakın). */
.sabit { position: relative; z-index: 45; }
.sabit--yapisik { box-shadow: 0 6px 18px rgba(28, 42, 56, .14); }
.kat-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--murekkep); color: #fff;
}
.kat-nav__ic {
  position: relative;
  display: flex; align-items: stretch;
  max-width: var(--sayfa-max); height: var(--nav-h);
  margin: 0 auto; padding: 0 calc(var(--kenar) - 12px);
}
.kat-nav__dugme {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 44px; padding: 0 12px;
  border: 0; background: transparent; color: #fff;
  font: 600 1rem/1 var(--yazi-baslik);
  cursor: pointer;
}
.kat-nav__dugme:hover { background: var(--murekkep-acik); }
.kat-nav__dugme .ikon { width: 22px; height: 22px; }
.kat-nav__ara-yazi { display: none; }
.kat-nav__serit {
  position: relative;
  flex: 1; min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.kat-nav__serit::-webkit-scrollbar { display: none; }
.kat-nav__serit.sol-var { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
.kat-nav__serit.sag-var { -webkit-mask-image: linear-gradient(to left, transparent, #000 40px); mask-image: linear-gradient(to left, transparent, #000 40px); }
.kat-nav__serit.sol-var.sag-var {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.kat-nav__liste { display: flex; height: 100%; }
.kat-nav__liste a {
  position: relative;
  display: flex; align-items: center;
  height: 100%;
  padding: 0 11px;
  font: 600 1rem/1 var(--yazi-baslik);
  letter-spacing: .01em;
  text-transform: lowercase;
  white-space: nowrap;
}
.kat-nav__liste a > span { display: inline-block; }
.kat-nav__liste a > span::first-letter { text-transform: uppercase; }
.kat-nav__liste a::after {
  content: "";
  position: absolute; left: 11px; right: 11px; bottom: 0;
  height: 3px; background: var(--marka);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .15s ease-out;
}
.kat-nav__liste a:hover::after,
.kat-nav__liste a[aria-current="page"]::after { transform: scaleY(1); }
.kat-nav__liste a:focus-visible { outline-offset: -3px; }
.kat-nav__kaydir {
  display: none;
  flex: none; align-items: center; justify-content: center;
  width: 32px; border: 0; background: transparent; color: #fff; cursor: pointer;
}
.kat-nav__kaydir:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .kat-nav__kaydir.gorunur { display: inline-flex; }
}

/* Arama paneli */
.arama {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--beyaz); color: var(--murekkep);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: 0 14px 28px rgba(28, 42, 56, .14);
}
.arama__form { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; padding: 16px var(--kenar) 20px; }
.arama__kapsam { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; }
.arama__kapsam label { position: relative; cursor: pointer; }
.arama__kapsam input { position: absolute; opacity: 0; }
.arama__kapsam span {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--cizgi); border-radius: 2px;
  font: 600 .9375rem/1 var(--yazi-baslik);
}
.arama__kapsam input:checked + span { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.arama__kapsam input:focus-visible + span { outline: 3px solid var(--marka-koyu); outline-offset: 2px; }
.arama__satir { display: flex; gap: 8px; }
.arama__satir input {
  flex: 1; min-width: 0; height: 48px;
  padding: 0 14px;
  border: 2px solid var(--murekkep); border-radius: 2px;
  font-size: 1.125rem;
}

/* Mobil çekmece menü (dialog) */
.cekmece {
  width: min(88vw, 380px); max-width: none;
  height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--beyaz); color: var(--murekkep);
}
.cekmece::backdrop { background: rgba(28, 42, 56, .55); }
.cekmece[open] { animation: cekmece-gir .22s ease-out; }
@keyframes cekmece-gir { from { transform: translateX(-100%); } }
.cekmece__ic { display: flex; flex-direction: column; min-height: 100%; }
.cekmece__ust {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 8px 0 20px;
  background: var(--murekkep); color: #fff;
  font: 700 1.25rem/1 var(--yazi-baslik);
}
.cekmece__kapat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: transparent; color: #fff; cursor: pointer;
}
.cekmece__bolum { padding: 18px 20px; border-bottom: 1px solid var(--cizgi); }
.cekmece__bolum h2 { margin-bottom: 8px; font: 600 .875rem/1.2 var(--yazi-metin); color: var(--soluk); }
.cekmece__kategoriler { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.cekmece__kategoriler a, .cekmece__linkler a {
  display: block; padding: 10px 0;
  font: 600 1.0625rem/1.2 var(--yazi-baslik);
}
.cekmece__kategoriler a { text-transform: lowercase; }
.cekmece__kategoriler a > span { display: inline-block; }
.cekmece__kategoriler a > span::first-letter { text-transform: uppercase; }
.cekmece__eylemler { display: grid; gap: 8px; }

/* 6. Sayfa ızgarası --------------------------------------------------------- */
.sayfa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--aralik);
  max-width: var(--sayfa-max);
  margin: 0 auto;
  padding: var(--aralik) var(--kenar) calc(var(--aralik) * 2);
}

/* Mobil + tablet: kolonlar çözülür, parçalar tek akışta sıralanır */
.vitrin { grid-column: 1 / -1; }
.kolon--ana > * { --sira: 10; }
.kolon--sag > .reklam-yigini { --sira: 30; }
.kolon--sag > .reklam { --sira: 50; }
.kolon--sag > .dikey { --sira: 55; }
.kolon--sag > .kat-blok { --sira: 60; }

@media (max-width: 1023.98px) {
  .kolon { display: contents; }
  .kolon > * { order: var(--sira, 90); min-width: 0; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .sayfa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kolon--ana > *, .reklam-yigini { grid-column: 1 / -1; }
  .kolon > .reklam { align-self: center; }
  .kolon > .kat-blok:nth-last-child(1 of .kat-blok):nth-child(odd of .kat-blok) { grid-column: 1 / -1; }
}

/* Masaüstü (1024+): içerik alanı | sağda reklamlar ve kategori haberleri (--sag-kolon) */
@media (min-width: 1024px) {
  .ust-bant { display: block; }
  .kunye__ic {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 24px;
    padding: 16px var(--kenar);
  }
  .kunye__logo img { width: 280px; }
  /* 728x90 sağ kenara yaslanır; logoyla aynı 90 px bantta durur */
  /* 970x90 banner: logoyla aynı 90 px bantta, kalan alanda ortalı.
     Yer daralınca oranı korunarak küçülür; logo 280 px'te kalır. */
  .kunye__reklam { justify-self: center; margin-inline: 0; }
  .kunye__reklam .reklam__link--mobil { display: none; }
  .kat-nav__dugme--menu { display: none; }
  .kat-nav__ara-yazi { display: inline; }

  .sayfa { grid-template-columns: minmax(0, 1fr) var(--sag-kolon); }
  .kolon { display: flex; flex-direction: column; gap: var(--aralik); min-width: 0; }
  .kolon--ana { gap: 20px; }

  /* Üst bant + künye + kategori menüsü birlikte sabitlenir */
  .sabit { position: sticky; top: 0; }
  .kat-nav { position: static; }
}

/* Geniş ekran: künyede logo | top banner (ortada) | B2B Medya logosu.
   970x90 top banner için 1500px; top banner doğal boyuna (728x90) dönerse 1280px. */
@media (min-width: 1500px) {
  .kunye__ic { grid-template-columns: auto minmax(0, 1fr) auto; }
  .kunye__yayinci { display: block; justify-self: end; }
  .kunye__yayinci:hover img, .kunye__yayinci:focus-visible img { opacity: .85; }
}

/* 7. Vitrin: e-dergi | manşet | dikey ürün slaytı ----------------------------- */
/* Üç düzen, vitrinin kendi genişliğine göre seçilir:
   1180 px ve üstü : e-dergi | manşet | ürün slaytı (--sag-kolon, sağ kolonla aynı hizada)
   900–1179 px     : manşet | ürün slaytı; e-dergi manşetin altında
   900 px altı     : alt alta; ürünler yatay kaydırılır */
.vitrin { container: vitrin / inline-size; }
.vitrin__ic { display: grid; gap: var(--aralik); }

.edergi__ic { display: grid; gap: 14px; }
.edergi__kapak {
  display: block;
  aspect-ratio: 177 / 246;
  box-shadow: 4px 4px 0 var(--kagit), 5px 5px 0 var(--boru);
}
.edergi__kapak img { transform: scale(1.1); }   /* yatay fbThumb görselindeki kapağı ortalar */
.edergi__bilgi { display: grid; gap: 10px; align-content: start; min-width: 0; }
.edergi__baslik { font: 700 1.3125rem/1.15 var(--yazi-baslik); }
.edergi__aciklama { display: none; color: var(--soluk); font-size: .9375rem; line-height: 1.45; }
.edergi__eylemler { display: grid; gap: 8px; }

/* E-dergi yatay kart (820 px altı) */
@container vitrin (min-width: 320px) and (max-width: 819.98px) {
  .edergi__ic { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 18px; }
}
@container vitrin (min-width: 480px) and (max-width: 819.98px) {
  .edergi__ic { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
  .edergi__baslik { font-size: 1.625rem; }
  .edergi__aciklama { display: block; max-width: 46ch; }
  .edergi__eylemler { display: flex; flex-wrap: wrap; }
}

/* 820 px ve üstü: e-dergi solda, manşetle birebir aynı hizada. Satır
   yüksekliğini manşet belirler; e-dergi boyut sınırlamalı (size) kap olduğu
   için bu yüksekliğe kilitlenir. Sütun genişliği, 16:9 manşetle kapağın aynı
   boyda olacağı orana göre hesaplanır. */
@container vitrin (min-width: 820px) {
  .vitrin__ic { grid-template-columns: clamp(170px, calc(28.8% - 60px), 380px) minmax(0, 1fr); }
  .vitrin .manset { grid-column: 2; grid-row: 1; }
  .vitrin .edergi { grid-column: 1; grid-row: 1; container-type: size; }
  .edergi__ic {
    --edergi-alt: 112px;          /* başlık + iki düğme */
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    padding: 14px;
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: var(--vitrin-radius);
  }
  .edergi__kapak {
    flex: none;
    width: auto;
    height: min(calc((100cqw - 35px) * 246 / 177), calc(100cqh - 30px - 12px - var(--edergi-alt)));
  }
  .edergi__bilgi { width: 100%; gap: 8px; }
  .edergi__baslik { font-size: 1.125rem; text-align: center; }
  .edergi__eylemler { gap: 6px; }
  .edergi__eylemler .dugme { min-height: 38px; padding: 6px 8px; font-size: .9375rem; }
}

/* Dikey slayt (ADVERTORIAL): sağ kolonda, banner listesinin altında.
   Liste her zaman dikeydir; kutu yüksekliği --dikey-yukseklik ile sınırlıdır
   ve içerik sığmıyorsa birkaç saniyede bir bir kayıt yukarı kayar. */
.dikey {
  --dikey-yukseklik: 320px;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 14px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--vitrin-radius);
}
.dikey .boru { margin-bottom: 6px; }
/* Liste parmakla ve fare tekerleğiyle kaydırılabilir; sona (ya da başa)
   gelince kaydırma sayfaya geçer. (17.09.2026'ya kadar overflow: hidden +
   overscroll-behavior: contain idi: dokunmatik ekranda parmak kutunun
   üstündeyken ne liste ne sayfa kayıyordu.) */
.dikey__pencere {
  position: relative;
  max-height: var(--dikey-yukseklik);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
}
.dikey__pencere::-webkit-scrollbar { display: none; }
.dikey--sonda .dikey__pencere, .dikey--tamami .dikey__pencere { -webkit-mask-image: none; mask-image: none; }
.dikey__liste { display: flex; flex-direction: column; }
.dikey__oge { padding: 12px 0; border-top: 1px solid var(--cizgi); }
.dikey__oge:first-child { padding-top: 2px; border-top: 0; }
.dikey__kart {
  position: relative;
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 12px; align-items: start;
}
.dikey__gorsel { aspect-ratio: 4 / 3; }
.dikey__govde { display: grid; gap: 6px; min-width: 0; }
.dikey__baslik {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font: 600 1rem/1.2 var(--yazi-baslik);
  overflow-wrap: break-word;
}
.dikey__baslik a::after { content: ""; position: absolute; inset: 0; }
.dikey__baslik a:focus-visible { outline: none; }
.dikey__baslik a:focus-visible::after { outline: 3px solid var(--marka-koyu); outline-offset: 2px; }
.dikey__kart:hover .dikey__baslik a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dikey__kontrol {
  display: flex; justify-content: flex-end; gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--cizgi);
}
.dikey__dugme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--cizgi); border-radius: 999px;
  background: var(--beyaz); color: var(--murekkep);
  cursor: pointer;
}
.dikey__dugme:hover { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.dikey__dugme .ikon { width: 16px; height: 16px; }
.dikey__durdur .ikon--oynat { display: none; }
.dikey[data-kullanici="durdurdu"] .dikey__durdur .ikon--duraklat { display: none; }
.dikey[data-kullanici="durdurdu"] .dikey__durdur .ikon--oynat { display: block; }
/* Telefonda kırpma yok: tüm kayıtlar alt alta görünür, otomatik geçiş kapalı */
@media (max-width: 639.98px) {
  .dikey { --dikey-yukseklik: none; }
}

/* 8. Manşet ---------------------------------------------------------------- */
/* Tam görsel, alttan koyulaşan geçiş, hap şeklinde kategori rozeti, görselin
   üstünde başlık ve ortalı noktalar. Renkler aşağıdaki değişkenlerden değişir. */
.manset {
  --manset-rozet: #E74C3C;
  --manset-nokta: #FFD700;
  --odak: var(--manset-nokta);
  container: manset / inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--vitrin-radius);
  background: var(--murekkep);
  color: #fff;
}
.manset__serit {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.manset__serit::-webkit-scrollbar { display: none; }
.manset__slayt {
  position: relative;
  flex: 0 0 100%;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.manset__gorsel, .manset__panel { grid-area: 1 / 1; }
.manset__gorsel { z-index: -1; }   /* görsel ve geçiş başlığın arkasında kalır; bağlantı tüm slaytı kaplar */
.manset__gorsel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 16, 22, .9) 0%, rgba(12, 16, 22, .66) 26%, rgba(12, 16, 22, .2) 56%, rgba(12, 16, 22, 0) 74%);
}
.manset__panel {
  align-self: end;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(12px, 3cqi, 48px);
  padding: 0 clamp(16px, 3.2cqi, 52px) clamp(46px, 7.2cqi, 92px);
}
.manset__rozet {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center;
  min-height: clamp(24px, 3.3cqi, 36px);
  padding: 0 clamp(12px, 1.9cqi, 20px);
  border-radius: 999px;
  background: var(--manset-rozet);
  color: #fff;
  font: 500 clamp(.75rem, 1.45cqi, 1rem)/1 var(--yazi-metin);
  letter-spacing: .04em;
}
.manset__rozet:hover { filter: brightness(1.1); }
.manset__baslik {
  font: 700 clamp(1.25rem, 3.7cqi, 2.75rem)/1.1 var(--yazi-baslik);
  letter-spacing: -.005em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  overflow-wrap: break-word;
}
.manset__baslik a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.manset__baslik a:focus-visible { outline: none; }
.manset__baslik a:focus-visible::after { outline: 3px solid var(--manset-nokta); outline-offset: -3px; border-radius: var(--vitrin-radius); }
.manset__slayt:hover .manset__baslik a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.manset__kontrol {
  position: absolute; left: 0; right: 0; z-index: 3;
  bottom: clamp(8px, 2.4cqi, 34px);
  display: flex; justify-content: center; align-items: center;
  pointer-events: none;
}
.manset__noktalar { display: flex; align-items: center; pointer-events: auto; }
.manset__nokta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 28px;
  padding: 0 2px;
  border: 0; background: none;
  cursor: pointer;
}
.manset__nokta::before {
  content: "";
  width: clamp(9px, 1.35cqi, 14px); height: clamp(9px, 1.35cqi, 14px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  transition: width .25s ease, background-color .25s ease;
}
.manset__nokta:hover::before { background: rgba(255, 255, 255, .9); }
.manset__nokta.etkin::before { width: clamp(28px, 3.6cqi, 40px); background: var(--manset-nokta); }
.manset__durdur {
  position: absolute; right: clamp(10px, 2.4cqi, 28px); top: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 0; border-radius: 999px;
  background: rgba(12, 16, 22, .45); color: #fff;
  transform: translateY(-50%);
  pointer-events: auto;
  cursor: pointer;
}
.manset__durdur:hover { background: rgba(12, 16, 22, .75); }
.manset__durdur .ikon { width: 16px; height: 16px; }
.manset__durdur .ikon--oynat { display: none; }
.manset[data-kullanici="durdurdu"] .manset__durdur .ikon--duraklat { display: none; }
.manset[data-kullanici="durdurdu"] .manset__durdur .ikon--oynat { display: block; }

.manset__ok {
  position: absolute; z-index: 3; top: 50%;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 999px;
  background: rgba(12, 16, 22, .45); color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
}
.manset__ok:hover { background: rgba(12, 16, 22, .75); }
.manset__ok--geri { left: clamp(8px, 2cqi, 22px); }
.manset__ok--ileri { right: clamp(8px, 2cqi, 22px); }
@media (hover: hover) and (pointer: fine) {
  .manset:hover .manset__ok, .manset:focus-within .manset__ok { display: inline-flex; }
}
/* Telefon: başlığa yer açmak için daha yüksek oran */
@container manset (max-width: 479.98px) {
  .manset__slayt { aspect-ratio: 4 / 3; }
}

/* 9. Son eklenenler akışı ve kart ------------------------------------------- */
.akis { container: akis / inline-size; }
.akis__oge { min-width: 0; }
.kart { position: relative; background: var(--beyaz); }
.kart__govde { display: flex; flex-direction: column; min-width: 0; }
.kart__kategori { line-height: 0; }
.kart__kategori .etiket { position: relative; z-index: 2; }
.kart__baslik { font: 600 1.0625rem/1.2 var(--yazi-baslik); overflow-wrap: break-word; }
.kart__baslik a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kart__baslik a:focus-visible { outline: none; }
.kart__baslik a:focus-visible::after { outline: 3px solid var(--odak, var(--marka-koyu)); outline-offset: -3px; }
.kart:hover .kart__baslik a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.akis__oge--reklam, .akis__oge--genis { display: grid; place-items: center; }
/* Izgarada ilk reklam hücresi, yanındaki haber kartıyla aynı genişlik ve
   yükseklikte; kreatif kutuyu tamamen doldurur. Hücre satır yüksekliğini
   etkilemez (boyut sınırlaması), yüksekliği kartlardan alır. */
@container akis (min-width: 560px) {
  .akis__oge--reklam { display: block; container-type: size; }
  .akis__oge--reklam .reklam { width: 100%; height: 100%; margin: 0; }
  .akis__oge--reklam .reklam__link { height: 100%; }
  .akis__oge--reklam .reklam__link img {
    width: 100%; height: 100%;
    object-fit: cover;
    outline: 0;
    border: 1px solid var(--cizgi);
  }
}

/* Dar kap (mobil): yatay liste kartı */
@container akis (max-width: 559.98px) {
  .akis__izgara { background: var(--beyaz); border: 1px solid var(--cizgi); }
  .akis__oge { border-bottom: 1px solid var(--cizgi); }
  .akis__oge:last-child { border-bottom: 0; }
  .akis__oge--reklam, .akis__oge--genis { padding: 16px 12px; }
  .kart {
    display: grid;
    grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .kart__gorsel { align-self: start; aspect-ratio: 4 / 3; }
  .kart__govde { gap: 6px; }
}

/* Geniş kap: 2 ya da en fazla 3 sütun. Tam satır bannerların bıraktığı boşlukları
   "dense" yerleşim sonraki kartlarla doldurur. */
@container akis (min-width: 560px) {
  .akis__izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 20px; }
  .akis__oge--genis { grid-column: 1 / -1; padding: 4px 0; }
  .kart { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--cizgi); }
  .kart__gorsel { aspect-ratio: 16 / 9; }
  .kart__govde { flex: 1; gap: 8px; padding: 12px 14px 14px; }
  .kart__baslik { font-size: 1.1875rem; }
  .kart .meta { margin-top: auto; padding-top: 2px; }
}
@container akis (min-width: 760px) {
  .akis__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Son satırda eksik kalan haber: masaüstünde betik bunu sağ kolona taşır
   (bkz. .akis-devam). Tablette sağ kolon akışın altında olduğundan tek
   kalan kart iki sütunu kaplayan yatay karta dönüşür. */
.akis__oge { container: oge / inline-size; }
@media (max-width: 1023.98px) {
  @container akis (min-width: 560px) and (max-width: 759.98px) {
    .akis__oge:nth-last-child(1 of :not(.akis__oge--genis):not([hidden])):nth-child(odd of :not(.akis__oge--genis):not([hidden])) { grid-column: 1 / -1; }
  }
  @container akis (min-width: 760px) {
    .akis__oge:nth-last-child(1 of :not(.akis__oge--genis):not([hidden])):nth-child(3n+1 of :not(.akis__oge--genis):not([hidden])) { grid-column: 1 / -1; }
    .akis__oge:nth-last-child(1 of :not(.akis__oge--genis):not([hidden])):nth-child(3n+2 of :not(.akis__oge--genis):not([hidden])) { grid-column: span 2; }
  }
}
@container akis (min-width: 560px) {
  @container oge (min-width: 490px) {
    .kart { flex-direction: row; }
    .kart__gorsel { flex: 0 0 min(42%, 420px); }
    .kart__govde { justify-content: center; gap: 10px; padding: 20px 24px; }
    .kart__baslik { font-size: 1.5rem; line-height: 1.15; }
    .kart .meta { margin-top: 0; }
  }
}
/* 10. Sağ kolon kategori blokları ------------------------------------------- */
.kat-blok { container: katblok / inline-size; }
.mini { position: relative; display: grid; gap: 8px; }
.mini__gorsel { aspect-ratio: 16 / 9; }
.mini__baslik { font: 600 1.0625rem/1.2 var(--yazi-baslik); overflow-wrap: break-word; }
.mini__baslik a::after { content: ""; position: absolute; inset: 0; }
.mini__baslik a:focus-visible { outline: none; }
.mini__baslik a:focus-visible::after { outline: 3px solid var(--odak, var(--marka-koyu)); outline-offset: 2px; }
.mini:hover .mini__baslik a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

@container katblok (min-width: 300px) {
  .mini {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 12px; row-gap: 6px;
  }
  .mini__gorsel { grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
  .mini .meta { align-self: start; }
}

/* Akışın altındaki kategori sırası: kart sütunlarıyla aynı ızgara */
.akis__daha { display: grid; justify-content: center; padding-top: 18px; }
.akis__daha .dugme { min-width: min(320px, 100%); }
.akis__daha [hidden] { display: none; }

/* Akıştan sağ kolona geçen haberler: kategori haberleriyle aynı yatay biçim */
.kolon--sag > .akis-devam { --sira: 70; }
.akis-devam__liste { display: grid; gap: 18px; }
.akis-devam .kart {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  background: none;
}
.akis-devam .kart__gorsel { aspect-ratio: 4 / 3; }
.akis-devam .kart__govde { gap: 6px; }
.akis-devam .kart__baslik { font-size: 1.0625rem; }

/* 11. Alt bilgi ------------------------------------------------------------- */
.alt { background: var(--murekkep); color: var(--soluk-koyu); }
.alt__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  max-width: var(--sayfa-max);
  margin: 0 auto;
  padding: 40px var(--kenar) 32px;
}
.alt h2 { margin-bottom: 12px; font: 600 1.125rem/1.2 var(--yazi-baslik); color: #fff; }
.alt h3 { margin: 18px 0 8px; font: 600 1rem/1.2 var(--yazi-baslik); color: #fff; }
.alt__marka { margin-bottom: 10px; font: 700 1.625rem/1 var(--yazi-baslik); color: #fff; }
.alt__hakkinda p:last-child { max-width: 48ch; line-height: 1.55; }
.alt a { color: #fff; }
.alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.alt__liste li + li { margin-top: 8px; }
.alt__yayinlar ul { columns: 2; column-gap: 24px; }
.alt__yayinlar li { break-inside: avoid; padding-bottom: 8px; }
.alt__sosyal { display: flex; gap: 8px; margin-top: 16px; }
.alt__sosyal a { display: inline-flex; padding: 8px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 2px; }
.bulten-form { display: flex; gap: 8px; margin: 12px 0 14px; }
.bulten-form input {
  flex: 1; min-width: 0; height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .32); border-radius: 2px;
  background: rgba(255, 255, 255, .06); color: #fff;
}
.bulten-form input::placeholder { color: #93A3B3; }
.alt__taban { border-top: 1px solid rgba(255, 255, 255, .12); }
.alt__taban-ic {
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  max-width: var(--sayfa-max);
  margin: 0 auto;
  padding: 16px var(--kenar) 20px;
  font-size: .8125rem;
}
/* Sayfa oluşturma süresi: sağ uçta, dikkat çekmeyecek kadar soluk */
.alt__sure {
  margin-inline-start: auto;
  font-size: .75rem; font-variant-numeric: tabular-nums;
  opacity: .45;
}
@media (min-width: 640px) { .alt__ic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .alt__ic { grid-template-columns: 1.2fr .8fr 1fr 1.6fr; } }

/* 12. Çerez bildirimi ------------------------------------------------------- */
.cerez {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  max-width: 760px; margin: 0 auto;
  padding: 14px 16px;
  background: var(--murekkep); color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  font-size: .9375rem;
}
.cerez p { flex: 1 1 320px; }
.cerez a { text-decoration: underline; text-underline-offset: 3px; }

/* 13. Hareket tercihi -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===========================================================================
   14. ASP ENTEGRASYONU İÇİN EKLER
   Prototipte olmayan, banner-getir.asp'nin ürettiği biçimler.
   =========================================================================== */

/* Künye reklamı (alan 1): ASP tarafı <figure class="reklam"> öğesini
   <div class="kunye__reklam"> içine basar; sarmalayıcı saydam kalmalı. */
.kunye__reklam > .reklam { margin-inline: auto; }
@media (max-width: 639.98px) {
  .kunye__reklam > .reklam { width: 100%; }
}
/* TOP BANNER 970x90 DENEMESİ (15.09.2026)
   Kreatif kendi ölçüsünden bağımsız olarak 970x90 kutuya zorlanır (tablet ve
   masaüstü). Sığdırma biçimi :root'taki --top-banner-sigdirma değişkenindedir
   (fill: esnetir, cover: kırpar, contain: boş bant bırakır). Yer daraldığında
   kutu 970:90 oranını koruyarak küçülür. Telefonda kreatif doğal oranında kalır;
   970:90 kutu 390 px ekranda 33 px yüksekliğe inip okunmaz hale gelirdi.
   GERİ ALMAK İÇİN bu bloğun yerine şunu koyun (kreatif doğal boyunda kalır):
     @media (min-width: 640px) {
       .kunye__reklam .reklam__link img { width: auto; max-width: 100%; height: auto; max-height: 90px; }
     }                                                                           */
@media (min-width: 640px) {
  .kunye__reklam .reklam__link img {
    width: 970px; max-width: 100%;
    height: auto;
    aspect-ratio: 970 / 90;
    object-fit: var(--top-banner-sigdirma, fill);
  }
}

/* Manşet içindeki reklam slaytları (banner alanı 25 ve manset_reklam=1 kayıtlar).
   .manset__gorsel z-index:-1 taşıdığı için tıklanabilir slaytlar onu kullanmaz. */
.manset__slayt--reklam { background: var(--murekkep); }
/* .manset__slayt ızgarasının tek gözünü kaplarlar (.manset__gorsel ile aynı yol) */
.manset__tam, .manset__reklam { grid-area: 1 / 1; width: 100%; height: 100%; margin: 0; }
.manset__tam { display: block; }
.manset__reklam .reklam__link { height: 100%; }
.manset__reklam .reklam__link img {
  width: 100%; height: 100%;
  object-fit: contain;   /* reklam kreatifi kırpılmaz */
  outline: 0;
}

/* tip=5: yazı bağlantısı biçimindeki reklam (eski 200x40 kutucuk) */
.reklam__link--yazi {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--cizgi);
  background: var(--beyaz);
  color: var(--murekkep);
  font-family: var(--yazi-baslik);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center;
}
.reklam__link--yazi:hover { border-color: var(--marka-koyu); color: var(--marka-koyu); }

/* tip=3: reklam sunucusundan gelen HTML / script bloğu */
.reklam__kod { max-width: 100%; margin-inline: auto; }
.reklam__kod img, .reklam__kod iframe, .reklam__kod ins { max-width: 100%; }

/* tip=4: video reklam (eski _bannerGetirSagVideo.asp) */
.reklam__video { display: block; width: 100%; height: auto; background: #000; }

/* Hiç banner yokken basılan "bu alana reklam verin" görseli */
.reklam--bos .reklam__link img { opacity: .95; }

/* Yatay bantlar (alan 9 manşet altı, 16/17/24 haber listesi arası) içerik
   genişliğini kaplar ama --yatay-banner-max (700 px) ile sınırlıdır; böylece
   728 px'lik top banner'dan biraz dar kalır ve ortalanır.
   Kreatifler 574x70 hazırlandığı için büyütülür: keskinlik adına 1148x140
   (2x) yüklemeniz önerilir. */
.kolon--ana > .reklam[data-alan="9"],
.akis__oge--genis > .reklam {
  width: 100%;
  max-width: var(--yatay-banner-max);
  margin-inline: auto;
}
.kolon--ana > .reklam[data-alan="9"] .reklam__link,
.akis__oge--genis > .reklam .reklam__link { width: 100%; }
.kolon--ana > .reklam[data-alan="9"] .reklam__link img,
.akis__oge--genis > .reklam .reklam__link img {
  width: 100%;
  height: auto;
  max-height: none;
}
.akis__oge--genis { align-self: stretch; }
.akis__oge--genis > .reklam__kod,
.akis__oge--genis > .reklam .reklam__kod { max-width: 100% !important; width: 100%; }

/* E-dergisi olmayan sitelerde (YeşilBina, BBT, Tersane) vitrinin sol gözü boş
   kalmasın diye ADVERTORIAL slaytı oraya alınır (index.asp).
   Kutu, e-dergi kartıyla aynı yolu izleyerek manşetin yüksekliğine kilitlenir. */
.dikey--vitrin .dikey__pencere { max-height: none; }
@container vitrin (min-width: 820px) {
  /* Satır yüksekliğini manşet belirlesin diye kutu, e-dergi kartıyla aynı yolu
     izler: boyut sınırlaması (container-type: size) sayesinde kendi içeriği
     satırı uzatmaz, manşetin yüksekliğine kilitlenir. */
  .vitrin .dikey--vitrin { grid-column: 1; grid-row: 1; container-type: size; }
  .dikey--vitrin .dikey__pencere { flex: 1; min-height: 0; }
  /* Dar sütunda kart sıkışmasın: küçük küçük resim, 3 satırlık başlık */
  .dikey--vitrin .dikey__kart { grid-template-columns: 72px minmax(0, 1fr); column-gap: 10px; }
  .dikey--vitrin .dikey__oge { padding: 10px 0; }
  .dikey--vitrin .dikey__baslik { font-size: .875rem; }
  .dikey--vitrin .dikey .meta, .dikey--vitrin .meta { font-size: .75rem; }
}

/* ===========================================================================
   15. İÇ SAYFALAR
   haber-detay / kategori-sayfasi / hakkimizda / reklam-ver / yazi-gonder /
   edergi-arsivi / iletisim sayfalarının ortak bileşenleri.
   =========================================================================== */

/* --- Makale gövdesi ------------------------------------------------------- */
.makale { display: grid; gap: 18px; min-width: 0; }
.makale .boru { margin-top: 6px; }
.makale .boru:first-child { margin-top: 0; }
.makale__baslik {
  font: 700 clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem)/1.15 var(--yazi-baslik);
  overflow-wrap: break-word;
}
.makale__meta { flex-wrap: wrap; gap: 8px 18px; }
.makale__meta a { text-decoration: underline; text-underline-offset: 3px; }
.makale__meta a:hover { color: var(--marka-koyu); }
.makale__gorsel { aspect-ratio: 16 / 9; margin: 0; border-radius: var(--vitrin-radius); }
/* HABER DETAYI, masaüstü (18.09.2026): ana görsel ve altındaki her şey
   (spot, metin, ekli dosyalar, paylaş, dipnot) sütunun %90'ı genişliğinde
   ve ortalı; hepsi aynı sol ve sağ çizgide durur. İçerikteki görseller bu
   sütundan taşamadığı için büyük görseller ana görselle aynı genişliğe gelir.
   Başlık ve tarih satırı tam genişlikte kalır.
   Tam genişliğe dönmek için bu bloğu silin. */
@media (min-width: 1024px) {
  .makale--detay > :is(.makale__gorsel, .makale__spot, .makale__icerik, .ekler, .paylas, .dipnot) {
    width: 90%;
    margin-inline: auto;
  }
}
.makale__spot {
  font: 500 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.5 var(--yazi-metin);
  color: var(--murekkep);
  padding-left: 14px;
  border-left: 4px solid var(--marka);
}

/* Yönetim panelinden gelen HTML: yazı düzeni burada verilir */
.makale__icerik { font-size: 1.0625rem; line-height: 1.65; overflow-wrap: break-word; }
.makale__icerik > * + * { margin-top: 1em; }
.makale__icerik h2, .makale__icerik h3, .makale__icerik h4 {
  font-family: var(--yazi-baslik); font-weight: 700; line-height: 1.2;
  margin-top: 1.6em;
}
.makale__icerik h2 { font-size: 1.5rem; }
.makale__icerik h3 { font-size: 1.25rem; }
.makale__icerik h4 { font-size: 1.0625rem; }
.makale__icerik a { color: var(--marka-koyu); text-decoration: underline; text-underline-offset: 3px; }
.makale__icerik a:hover { color: var(--marka-koyu-hover); }
.makale__icerik img { height: auto; border-radius: 4px; }
/* Editörün sağa/sola yasladığı görseller (yanından yazı akan küçük portreler)
   olduğu gibi kalır; diğerleri ortalanır. Küçük görseller büyütülmez,
   büyütmek bulanıklaştırır. */
.makale__icerik img:not([style*="float" i]):not([align]) { margin-inline: auto; }
.makale__icerik ul, .makale__icerik ol { padding-left: 1.4em; list-style: revert; }
.makale__icerik li + li { margin-top: .4em; }
.makale__icerik blockquote {
  padding: 2px 0 2px 16px; border-left: 4px solid var(--boru);
  color: var(--soluk); font-style: italic;
}
.makale__icerik table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.makale__icerik th, .makale__icerik td { padding: 8px 10px; border: 1px solid var(--cizgi); text-align: left; }
.makale__icerik th { background: var(--kagit); font-weight: 600; }
/* Geniş tablolar sayfayı yatay kaydırmasın */
.makale__icerik { overflow-x: auto; }
.makale__icerik iframe, .makale__icerik video { max-width: 100%; }

/* --- Ekli dosyalar -------------------------------------------------------- */
.ekler__liste { display: flex; flex-wrap: wrap; gap: 10px; }
.ekler__gorsel { display: block; width: 120px; aspect-ratio: 4 / 3; border-radius: 4px; }
.ekler__dosya {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 4px;
  font-weight: 500; overflow-wrap: anywhere;
}
.ekler__dosya:hover { border-color: var(--marka-koyu); color: var(--marka-koyu); }

/* --- Dipnot --------------------------------------------------------------- */
.dipnot {
  padding: 16px 18px;
  background: var(--kagit); border-left: 4px solid var(--boru);
  font-size: .9375rem; line-height: 1.6;
}
.dipnot__baslik { font: 700 1rem/1.2 var(--yazi-baslik); margin-bottom: 8px; text-transform: uppercase; }

/* --- Liste sayfası -------------------------------------------------------- */
.liste__ust { color: var(--soluk); font-size: .9375rem; }
.liste__bos { padding: 28px 0; color: var(--soluk); font-size: 1.0625rem; }

.sayfalama { margin-top: 22px; }
.sayfalama__liste { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sayfalama__baglanti {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; padding: 0 12px;
  background: var(--beyaz); border: 1px solid var(--cizgi);
  font: 600 .9375rem/1 var(--yazi-baslik); color: var(--murekkep);
}
a.sayfalama__baglanti:hover { border-color: var(--marka-koyu); color: var(--marka-koyu); }
.sayfalama__baglanti--etkin {
  background: var(--marka-koyu); border-color: var(--marka-koyu); color: #fff;
}

/* --- Formlar -------------------------------------------------------------- */
.form { display: grid; gap: 14px; max-width: 560px; }
.form--satir { grid-template-columns: minmax(0, 1fr) auto; align-items: end; max-width: 520px; }
.form__satir { display: grid; gap: 6px; }
.form__etiket { font: 600 .9375rem/1.3 var(--yazi-baslik); }
.form__girdi {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--beyaz); border: 1px solid var(--cizgi);
  font: 400 1rem/1.3 var(--yazi-metin); color: var(--murekkep);
}
.form__girdi:focus-visible { outline: 3px solid var(--marka-koyu); outline-offset: 1px; border-color: var(--marka-koyu); }
.form__eylemler { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form__not { color: var(--soluk); font-size: .875rem; }
.form__sonuc:not(:empty) {
  padding: 12px 14px; background: var(--kagit); border-left: 4px solid var(--marka);
  font-size: .9375rem;
}

/* --- Dosya bağlantıları (tanıtım dosyası) --------------------------------- */
.dosyalar { display: flex; flex-wrap: wrap; gap: 10px; }
.dosyalar__oge {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  background: var(--beyaz); border: 1px solid var(--cizgi);
  font: 600 .9375rem/1.2 var(--yazi-baslik);
}
.dosyalar__oge:hover { border-color: var(--marka-koyu); color: var(--marka-koyu); }

.eylem-satiri { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.eylem-satiri .dugme { gap: 8px; }

/* --- E-dergi arşivi ------------------------------------------------------- */
.yillar__liste { display: flex; flex-wrap: wrap; gap: 6px; }
.yillar__oge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px;
  background: var(--beyaz); border: 1px solid var(--cizgi);
  font: 600 .9375rem/1 var(--yazi-baslik); color: var(--murekkep);
}
a.yillar__oge:hover { border-color: var(--marka-koyu); color: var(--marka-koyu); }
.yillar__oge--etkin { background: var(--marka); border-color: var(--marka); color: var(--marka-yazi); }

.kapaklar {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.kapaklar__baglanti { display: grid; gap: 4px; text-align: center; }
.kapaklar__gorsel {
  display: block; aspect-ratio: 222 / 306;
  box-shadow: 3px 3px 0 var(--kagit), 4px 4px 0 var(--boru);
}
.kapaklar__baglanti:hover .kapaklar__gorsel { box-shadow: 3px 3px 0 var(--kagit), 4px 4px 0 var(--marka); }
.kapaklar__ay { font: 700 .9375rem/1.2 var(--yazi-baslik); margin-top: 6px; }
.kapaklar__sayi { color: var(--soluk); font-size: .8125rem; }

/* --- Harita --------------------------------------------------------------- */
.harita { position: relative; width: 100%; max-width: 640px; aspect-ratio: 10 / 7; }
.harita iframe { width: 100%; height: 100%; border: 1px solid var(--cizgi); }

/* ===========================================================================
   16. ARAMA, LİSTE GÖRÜNÜMÜ, PAYLAŞ
   =========================================================================== */

/* --- Liste üst çubuğu: sonuç sayısı + görünüm düğmeleri ------------------- */
.liste__arac {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.liste__arac .liste__ust { margin: 0; }

.gorunum {
  display: inline-flex;
  border: 1px solid var(--cizgi);
  background: var(--beyaz);
}
.gorunum__dugme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 40px;
  border: 0; background: transparent; color: var(--soluk);
  cursor: pointer;
}
.gorunum__dugme + .gorunum__dugme { border-left: 1px solid var(--cizgi); }
.gorunum__dugme .ikon { width: 20px; height: 20px; }
.gorunum__dugme:hover { color: var(--murekkep); background: var(--kagit); }
.gorunum__dugme[aria-pressed="true"] { background: var(--murekkep); color: #fff; }
.gorunum__dugme:focus-visible { outline: 3px solid var(--marka-koyu); outline-offset: 1px; }
/* Dar kapta akış zaten tek sütunlu liste; düğmeler anlamsız */
@container akis (max-width: 559.98px) {
  .gorunum { display: none; }
}

/* --- Kart özeti: yalnızca liste görünümünde görünür ----------------------- */
.kart__ozet { display: none; }

/* --- Liste görünümü -------------------------------------------------------
   Izgara tek sütuna iner; her kart tam genişlik olduğu için 490 px'lik öğe
   kabında zaten yatay karta dönüşür (bölüm 9). Burada yalnızca ölçüler
   listeye göre sıkılaştırılır ve özet açılır. */
@container akis (min-width: 560px) {
  .akis__izgara.akis__izgara--liste { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .akis__izgara--liste .kart { flex-direction: row; }
  /* Yükseklik satırdan gelir (stretch); en-boy oranı verilmez, yoksa iki ölçü
     birbirine bağlanır ve ilk yerleşimde kart geçici olarak çok uzar. */
  .akis__izgara--liste .kart__gorsel { flex: 0 0 min(30%, 260px); aspect-ratio: auto; align-self: stretch; min-height: 150px; }
  .akis__izgara--liste .kart__govde { justify-content: center; gap: 8px; padding: 14px 20px; }
  .akis__izgara--liste .kart__baslik { font-size: 1.25rem; line-height: 1.2; }
  .akis__izgara--liste .kart .meta { margin-top: 2px; padding-top: 0; }
  .akis__izgara--liste .kart__ozet {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--soluk);
    font-size: .9375rem;
    line-height: 1.45;
  }
}
@container akis (min-width: 760px) {
  .akis__izgara--liste .kart__ozet { -webkit-line-clamp: 3; }
}

/* --- Arama sayfası -------------------------------------------------------- */
.arama-kutu { max-width: 640px; margin: 4px 0 18px; }
.google-arama {
  margin-top: 22px; padding: 16px 18px;
  background: var(--beyaz); border: 1px solid var(--cizgi);
}
.google-arama__not { margin-bottom: 8px; color: var(--soluk); font-size: .9375rem; }
.liste__bos a { color: var(--marka-koyu); text-decoration: underline; text-underline-offset: 3px; }

/* E-dergi sayfa sonuçları: kapak ızgarasının A4 oranlı hali */
.kapaklar--sayfa .kapaklar__gorsel { aspect-ratio: 210 / 297; }

/* --- Paylaş (ShareThis) --------------------------------------------------- */
.paylas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}
.paylas__baslik { font: 700 .9375rem/1 var(--yazi-baslik); text-transform: uppercase; letter-spacing: .02em; }
/* ShareThis kendi düğmelerini yükleyene kadar satır yüksekliği korunur (sayfa kaymasın) */
.paylas .sharethis-inline-share-buttons { min-height: 40px; flex: 1 1 auto; }

/* ===========================================================================
   17. GÖRSEL ÜZERİNE GELİNCE BÜYÜME + GÖRSEL GALERİSİ
   =========================================================================== */

/* --- Haber görselleri: hafif büyüme ---------------------------------------
   Kutular (.gorsel) overflow: hidden olduğu için görsel taşmaz, kutu içinde
   yakınlaşır. Yalnızca haber ve ekli dosya görsellerine uygulanır; manşet ve
   reklam kreatifleri bilerek hariç tutuldu (e-dergi kapağının kendi efekti
   bölüm 19'dadır).
   Dokunmatik ekranda :hover dokunduktan sonra takılı kaldığı için efekt
   yalnızca fareli cihazlarda çalışır; klavyeyle gezen, başlık bağlantısına
   odaklandığında aynı geri bildirimi alır. */
.kart__gorsel img,
.mini__gorsel img,
.dikey__gorsel img,
.ekler__gorsel img {
  transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .kart:hover .kart__gorsel img,
  .mini:hover .mini__gorsel img,
  .dikey__kart:hover .dikey__gorsel img,
  .ekler__gorsel:hover img { transform: scale(1.06); }
}
.kart:has(a:focus-visible) .kart__gorsel img,
.mini:has(a:focus-visible) .mini__gorsel img,
.dikey__kart:has(a:focus-visible) .dikey__gorsel img,
.ekler__gorsel:focus-visible img { transform: scale(1.06); }

/* Ekli görsellerin tıklanınca büyüyeceği belli olsun */
.ekler__gorsel { cursor: zoom-in; }

/* --- Görsel galerisi (script.js, bölüm 14) ------------------------- */
html.galeri-acik { overflow: hidden; }
.galeri {
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: #fff;
}
.galeri::backdrop { background: rgba(10, 14, 20, .92); }
.galeri[open] { animation: galeri-gir .18s ease-out; }
@keyframes galeri-gir { from { opacity: 0; } }

.galeri__ic {
  position: relative;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: 60px 72px 24px;
}
.galeri__sahne {
  display: grid; justify-items: center; gap: 12px;
  min-height: 0; max-width: 100%; max-height: 100%;
  margin: 0;
}
.galeri__gorsel {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  object-fit: contain;
  background: #151A21;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  transition: opacity .2s ease;
}
.galeri--yukleniyor .galeri__gorsel { opacity: .35; }
.galeri__alt {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  max-width: 80ch;
  color: #D5DCE3; font-size: .9375rem; line-height: 1.4; text-align: center;
}
.galeri__sayac { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

.galeri__dugme {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  cursor: pointer;
}
.galeri__dugme:hover { background: rgba(255, 255, 255, .26); }
.galeri__dugme:focus-visible { outline: 3px solid var(--marka); outline-offset: 2px; }
.galeri__dugme .ikon { width: 24px; height: 24px; }
.galeri__kapat { top: 12px; right: 12px; }
.galeri__ok { top: 50%; transform: translateY(-50%); }
.galeri__ok--geri { left: 12px; }
.galeri__ok--ileri { right: 12px; }

/* Telefon: oklar görselin üstüne binmesin, alt köşelere iner */
@media (max-width: 639.98px) {
  .galeri__ic { padding: 60px 8px 76px; }
  .galeri__gorsel { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
  .galeri__ok { top: auto; bottom: 14px; transform: none; }
  .galeri__ok--geri { left: 16px; }
  .galeri__ok--ileri { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .kart__gorsel img, .mini__gorsel img, .dikey__gorsel img, .ekler__gorsel img {
    transition: none;
    transform: none !important;
  }
  .galeri[open] { animation: none; }
}

/* ===========================================================================
   18. ANA SAYFA "SON EKLENENLER" 4 SÜTUN DENEMESİ (15.09.2026)
   Yalnızca ana sayfadaki ızgarada (.akis__izgara--dort) ve yalnızca
   masaüstünde. Kartlar çok daralmasın (~210 px altı) diye akış alanı 900 px
   ve üstündeyken 4 sütun olur (yaklaşık 1440 px ve üstü ekranlar); daha dar
   masaüstünde 3 sütun kalır. Kategori ve arama sayfaları etkilenmez.
   Tablet düzeni (son satırı yayma kuralları 3 sütuna göre yazılı) korunur.
   =========================================================================== */
@media (min-width: 1024px) {
  @container akis (min-width: 900px) {
    .akis__izgara--dort { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .akis__izgara--dort .kart__govde { gap: 6px; padding: 10px 12px 12px; }
    .akis__izgara--dort .kart__baslik { font-size: 1.0625rem; line-height: 1.2; }
  }
}

/* ===========================================================================
   19. E-DERGİ KAPAĞI ÜZERİNE GELİNCE (ana sayfa e-dergi bloğu)
   Basılı dergi hissi: kapak sırtından (sol kenar) hafifçe açılır gibi öne
   döner, cilt çizgisinde gölge belirir, alttaki sayfa yığını derinleşir ve
   kuşe kağıt parlaması gibi bir ışık kapağın üzerinden soldan sağa geçer.
   Kapak, "E-Dergiyi oku" düğmesi ile aynı yere gittiği için o düğmenin
   üzerine gelince de çalışır. Klavyeyle odaklanınca aynı efekt görünür.
   Yalnızca fareli cihazlarda; hareket azaltma tercihinde yalnızca gölge değişir.
   Geri almak için bu bölümü silin.
   =========================================================================== */
.edergi__kapak {
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s cubic-bezier(.2, .7, .2, 1);
}
/* Cilt çizgisi (sol kenar gölgesi) */
.edergi__kapak::before,
.edergi__kapak::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.edergi__kapak::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, .08) 3%, rgba(255, 255, 255, .18) 4.5%, transparent 9%);
  opacity: 0;
  transition: opacity .5s;
}
/* Işık parlaması: bant başta kapağın solunda, üzerine gelince sağına kayar */
.edergi__kapak::after {
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .5) 47%, rgba(255, 255, 255, .15) 52%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  background-position: 130% 0;
}

@media (hover: hover) and (pointer: fine) {
  .edergi__ic:has(.edergi__kapak:hover, .edergi__eylemler .dugme--dolu:hover) .edergi__kapak {
    transform: perspective(1100px) rotateY(-11deg) translateY(-3px);
    box-shadow: 4px 4px 0 var(--kagit), 5px 5px 0 var(--boru),
                8px 8px 0 var(--kagit), 9px 9px 0 var(--marka),
                14px 20px 28px -14px rgba(28, 42, 56, .45);
  }
  .edergi__ic:has(.edergi__kapak:hover, .edergi__eylemler .dugme--dolu:hover) .edergi__kapak::before { opacity: 1; }
  .edergi__ic:has(.edergi__kapak:hover, .edergi__eylemler .dugme--dolu:hover) .edergi__kapak::after {
    background-position: -30% 0;
    transition: background-position 1s cubic-bezier(.3, .6, .3, 1) .08s;
  }
}
.edergi__ic:has(.edergi__kapak:focus-visible, .edergi__eylemler .dugme--dolu:focus-visible) .edergi__kapak {
  transform: perspective(1100px) rotateY(-11deg) translateY(-3px);
  box-shadow: 4px 4px 0 var(--kagit), 5px 5px 0 var(--boru),
              8px 8px 0 var(--kagit), 9px 9px 0 var(--marka),
              14px 20px 28px -14px rgba(28, 42, 56, .45);
}
.edergi__ic:has(.edergi__kapak:focus-visible, .edergi__eylemler .dugme--dolu:focus-visible) .edergi__kapak::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .edergi__kapak { transition: box-shadow .2s; transform: none !important; }
  .edergi__kapak::before { transition: none; }
  .edergi__kapak::after { display: none; }
}

/* ===========================================================================
   20. MENÜ BAŞLIKLARI + BELGE LİSTESİ (yakıt fiyatları sayfaları)
   =========================================================================== */

/* Kategori menüsündeki adlar artık sunucuda "Her Kelimenin İlk Harfi Büyük"
   biçiminde üretiliyor (ortak.asp -> KategoriEtiketiMenu), bu yüzden
   CSS'in cümle düzenine indirme kuralı bu iki listede kapatılır. Bölüm
   başlıklarındaki (.etiket) cümle düzeni olduğu gibi kalır. */
.kat-nav__liste a { text-transform: none; }
.cekmece__kategoriler a { text-transform: none; }
/* Başlığı yazıldığı gibi basan etiket (sabit sayfa başlıkları) */
.etiket--duz { text-transform: none; }
/* Kategori adları sunucuda cümle düzenine getiriliyor (KategoriEtiketi):
   kısaltmalar büyük kalsın ve ad bir bağlantının içindeyken de doğru
   görünsün diye CSS dönüşümü kapatılır. */
.etiket .etiket__ad { text-transform: none; }

/* Belge listesi: yakıt fiyatları ve doğalgaz birim fiyatları sayfaları.
   Dosya adları uzun olduğu için bunlar yan yana düğmeler değil, genişliğe göre
   sütun sayısı değişen bir ızgaradır. */
.liste__giris { color: var(--soluk); font-size: .9375rem; margin: 0 0 4px; }
.dosyalar--liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 10px;
}
.dosyalar--liste .dosyalar__oge { width: 100%; justify-content: flex-start; }
.dosyalar__ad { flex: 1 1 auto; min-width: 0; }
/* Dosya türü rozeti: metni uzantının kendisidir (PDF, XLSX, XLS ...) */
.dosyalar__tur {
  flex: none;
  padding: 2px 6px;
  border: 1px solid currentColor;
  color: var(--soluk);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.dosyalar__tur[data-tur="pdf"]   { color: #C0392B; }
.dosyalar__tur[data-tur="tablo"] { color: #1E7B45; }
.dosyalar__tur[data-tur="yazi"]  { color: #1F4E9C; }
.dosyalar__tur[data-tur="arsiv"] { color: #7A5B12; }
/* Dosya simgesi rozetle aynı renkte olsun diye biraz büyük ve markasız */
.ikon--dosya { width: 1.35em; height: 1.35em; }
.dosyalar__oge:has(.dosyalar__tur[data-tur="pdf"]) .ikon--dosya   { color: #C0392B; }
.dosyalar__oge:has(.dosyalar__tur[data-tur="tablo"]) .ikon--dosya { color: #1E7B45; }
.dosyalar__oge:has(.dosyalar__tur[data-tur="yazi"]) .ikon--dosya  { color: #1F4E9C; }
.indirme__ad:has(.dosyalar__tur[data-tur="pdf"]) .ikon--dosya   { color: #C0392B; }
.indirme__ad:has(.dosyalar__tur[data-tur="tablo"]) .ikon--dosya { color: #1E7B45; }
.indirme__ad:has(.dosyalar__tur[data-tur="yazi"]) .ikon--dosya  { color: #1F4E9C; }

/* İndirme ara sayfası (belge-indir.asp) */
.indirme {
  display: grid; gap: 14px;
  padding: 18px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
}
.indirme__ad {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font: 600 1.125rem/1.3 var(--yazi-baslik);
}
.indirme__bilgi { color: var(--soluk); font-size: .9375rem; }
.dosyalar__sayac { flex: none; color: var(--soluk); font-size: .75rem; font-weight: 400; }

/* ===========================================================================
   21. ÇEREZ VE GİZLİLİK POLİTİKASI SAYFASI
   =========================================================================== */
/* Uzun hukuki metnin iki bölümüne hızlı geçiş */
.icindekiler {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin: 0 0 4px;
}
.icindekiler a {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--cizgi); background: var(--beyaz);
  font: 600 .9375rem/1.2 var(--yazi-baslik);
}
.icindekiler a:hover { border-color: var(--marka-koyu); color: var(--marka-koyu); }
/* Çapaya gidince başlık yapışkan menünün altında kalmasın */
.makale .boru[id] { scroll-margin-top: 90px; }