/* ==========================================================================
   DT. EMRAH ÖZDEMİR — MONOKROM İSVİÇRE DERGİ MİMARİSİ (css/monografi.css)
   Palet: Yalnız Siyah (#0A0A0A), Beyaz (#FAFAFA) ve Gri Tonları
   Mevzuat: 12.11.2025 / RG 33075 Uyumlu · Sıfır Kutu-İçi-Kutu
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. YAZI TİPLERİ — SİSTEM YIĞINI 
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. TASARIM BELİRTEÇLERİ (SİYAH / BEYAZ / GRİ MONOKROM)
   -------------------------------------------------------------------------- */
:root {
  /* Monokrom Renk Paleti (Sıfır Bej, Sıfır Altın, Sıfır Mavi) */
  --siyah: #0A0A0A;
  --antrasit: #141414;
  --beyaz: #FAFAFA;
  --gri-acik: #F0F0F0;
  --gri-orta: #737373;
  --gri-metin-acik: #404040;
  --gri-metin-koyu: #B8B8B8;
  --cizgi-acik: rgba(10, 10, 10, 0.18);
  --cizgi-koyu: rgba(250, 250, 250, 0.16);

  /* Tipografi Yığınları */
  --font-baslik: Georgia, "Times New Roman", serif;
  --font-govde: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Düzen ve Hareket */
  --kapsayici-maks: 1600px;
  --kenar-bosluk: 1.5rem;
  --izgara-bosluk: 1.5rem;
  --bolum-dikey-bosluk: 8rem;
  --header-yukseklik: 88px;
  --egri-sinematik: cubic-bezier(0.16, 1, 0.3, 1);
  --egri-perde: cubic-bezier(0.85, 0, 0.15, 1);
}

@media (min-width: 768px) {
  :root {
    --kenar-bosluk: 2.5rem;
    --bolum-dikey-bosluk: 12rem;
  }
}

/* --------------------------------------------------------------------------
   3. TEMEL SIFIRLAMA VE BELGE İSKELETİ (390px & 1440px Taşma Koruması)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: auto;
  overflow-x: clip;
  background-color: var(--siyah);
  color: var(--siyah);
  -webkit-text-size-adjust: 100%;
}

html.kaydirma-hazir {
  scroll-behavior: smooth;
}

/* #yasam veya başka bir #hash ile doğrudan açılışta üstteki index metinlerinin anlık parlamasını önle */
html.hash-yasam,
html.hash-yasam body {
  background-color: #0A0A0A !important;
  scroll-behavior: auto !important;
}

html.hash-yasam #ana-icerik > :not(#yasam) {
  display: none !important;
}

html.hash-acilis #ana-icerik > section {
  opacity: 0 !important;
}

html.hash-yasam #yasam,
html.hash-yasam #yasam .izle-belir,
#yasam .kolaj-kart.izle-belir {
  opacity: 1 !important;
}

body {
  font-family: var(--font-govde);
  font-weight: 400;
  line-height: 1.65;
  background-color: var(--siyah);
  color: var(--siyah);
  overflow-x: clip;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-acik {
  overflow: hidden;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease-out, color 0.3s ease-out;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Klavye Erişilebilirliği (WCAG AA Odak Çerçevesi) */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* İçeriğe Atla Bağlantısı */
.icerige-atla {
  position: fixed;
  top: -100%;
  left: var(--kenar-bosluk);
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background-color: var(--siyah);
  color: var(--beyaz);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: top 0.25s ease-out;
}

.icerige-atla:focus {
  top: 1rem;
}

/* --------------------------------------------------------------------------
   4. TİPOGRAFİ ÖLÇEĞİ VE YARDIMCI SINIFLAR
   -------------------------------------------------------------------------- */
.vitrin-baslik {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(3.25rem, 11vw, 11.5rem);
  line-height: 0.84;
  letter-spacing: -0.04em;
  overflow-wrap: normal;
  word-break: normal;
}

.vitrin-baslik .nokta-italik {
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 400;
}

.sahne-baslik {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(2.65rem, 8.5vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin-bottom: clamp(3rem, 6vw, 6rem);
  overflow-wrap: normal;
  word-break: normal;
}

.sahne-baslik em,
.vitrin-baslik em {
  font-style: italic;
  font-weight: 400;
  color: inherit;
}

.panel-derleyici {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 2.15rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  max-width: 34ch;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 2.5rem;
}

.panel-metin {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.panel-metin p {
  font-family: var(--font-govde);
  font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.65;
  color: var(--gri-metin-acik);
  max-width: 54ch;
}

.dergi-bolum--koyu .panel-metin p {
  color: var(--gri-metin-koyu);
}

.mono-xs {
  font-family: var(--font-mono);
  font-size: 0.625rem; /* 10px */
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.mono-sm {
  font-family: var(--font-mono);
  font-size: 0.6875rem; /* 11px */
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Dış Bağlantılar: Mavi Yok, Monokrom Alt Çizgi + Ok Hareketi */
.dis-baglanti {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.dis-baglanti .ok-ikon {
  display: inline-block;
  transition: transform 0.3s ease-out;
}

.dis-baglanti:hover .ok-ikon,
.dis-baglanti:focus-visible .ok-ikon {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   5. YAPIŞKAN BAŞLIK (STICKY HEADER) VE +96px ÜST GÖLGE / BLUR TÜLÜ
   -------------------------------------------------------------------------- */
.ust-serit {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  padding: 1.5rem var(--kenar-bosluk);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  border-bottom: none;
  background: transparent;
  transition: opacity 500ms ease-out, color 500ms ease-out;
}

/* Açık ve Koyu Bölüm Renk Geçişleri */
.ust-serit--acik {
  color: var(--siyah);
}

.ust-serit--koyu {
  color: var(--beyaz);
}

/* Kaydırma Anında Nefes Alma (320ms Idle Timer ile kontrol edilir) */
.ust-serit.kaydiriliyor {
  opacity: 0.4;
}

/* Başlık Üst Şeridi İçin 6 Duraklı Alfa Maskeli Gölge Tülü (Sabit 112px Yükseklik) */
h2[id],
h3[id],
article[id] {
  scroll-margin-top: 5.5rem;
}

.ust-golge-tul {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 112px;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0.85) 70%,
    rgba(0, 0, 0, 0.5) 85%,
    rgba(0, 0, 0, 0.15) 95%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0.85) 70%,
    rgba(0, 0, 0, 0.5) 85%,
    rgba(0, 0, 0, 0.15) 95%,
    rgba(0, 0, 0, 0) 100%
  );
  transition: opacity 500ms ease-out, background 500ms ease-out;
}

.ust-serit--acik .ust-golge-tul {
  background: linear-gradient(
    to bottom,
    rgba(250, 250, 250, 0.96) 0%,
    rgba(250, 250, 250, 0.90) 68%,
    rgba(250, 250, 250, 0) 100%
  );
  opacity: 0.95;
}

.ust-serit--acik.kaydiriliyor .ust-golge-tul {
  opacity: 0.95;
}

.ust-serit--koyu .ust-golge-tul {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.88) 0%,
    rgba(10, 10, 10, 0.78) 65%,
    rgba(10, 10, 10, 0) 100%
  );
}

.ust-serit.iletisim-gorunur .ana-menu {
  opacity: 0.22;
  transition: opacity 400ms ease-out;
}

.ust-serit.iletisim-gorunur .ana-menu:hover,
.ust-serit.iletisim-gorunur .ana-menu:focus-within {
  opacity: 1;
}

.ust-serit.kaydiriliyor .ust-golge-tul {
  opacity: 0;
}

/* Sol Üst Kimlik */
.kimlik {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kimlik-ad {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.kimlik-unvan {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* Sağ Üst Blok: Dil Şeridi + Dikey Dergi İndeksi */
.ust-sag {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .ust-sag {
    gap: 2.5rem;
  }
}

.dil-seridi {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dil-seridi a {
  opacity: 0.55;
  padding: 0.1rem 0.15rem;
}

.dil-seridi a[aria-current="page"],
.dil-seridi a.aktif {
  opacity: 1;
  font-weight: 500;
}

.dil-seridi a:hover {
  opacity: 1;
}

.dil-ayirici {
  opacity: 0.35;
  user-select: none;
}

/* Masaüstü Dikey Dergi İndeksi (1024px+) */
.ana-menu {
  display: none;
}

@media (min-width: 1024px) {
  .ana-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
  }
}

.ana-menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.3s ease-out;
}

.ana-menu-link:hover,
.ana-menu-link.aktif {
  opacity: 1;
}

.menu-cizgi {
  display: inline-block;
  height: 1px;
  width: 0;
  opacity: 0;
  background-color: currentColor;
  transition: width 0.3s ease-out, opacity 0.3s ease-out;
}

.ana-menu-link.aktif .menu-cizgi {
  width: 1rem; /* 16px */
  opacity: 1;
}

/* Mobil Menü Tetikleyici (< 1024px) */
.mobil-menu-buton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.1rem 0;
}

@media (min-width: 1024px) {
  .mobil-menu-buton {
    display: none;
  }
}

/* Tam Ekran Siyah Mobil Menü Perdesi (< 1024px) */
.mobil-menu-perde {
  position: fixed;
  inset: 0;
  z-index: 600;
  background-color: var(--siyah);
  color: var(--beyaz);
  padding: 1.5rem var(--kenar-bosluk) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 650ms var(--egri-perde), visibility 650ms;
}

.mobil-menu-perde.acik {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.mobil-menu-ust {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cizgi-koyu);
}

.mobil-menu-liste {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-block: auto;
  padding-block: 2rem;
}

.mobil-menu-liste a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 8vw, 3.25rem);
  line-height: 1.05;
  color: var(--beyaz);
}

.mobil-menu-liste a .mobil-no {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--gri-orta);
}

.mobil-menu-alt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cizgi-koyu);
}

/* --------------------------------------------------------------------------
   6. 12 SÜTUNLU İSVİÇRE DERGİ IZGARASI VE BÖLÜM İSKELETİ
   -------------------------------------------------------------------------- */
.kapsayici {
  max-width: var(--kapsayici-maks);
  margin-inline: auto;
  padding-inline: var(--kenar-bosluk);
  width: 100%;
}

.dergi-bolum {
  position: relative;
  padding-block: var(--bolum-dikey-bosluk);
  background-color: var(--beyaz);
  color: var(--siyah);
  border-bottom: none;
}

.dergi-bolum--koyu {
  background-color: var(--siyah);
  color: var(--beyaz);
}

.dergi-bolum--ust-cizgi {
  border-top: 1px solid var(--cizgi-acik);
}

.izgara-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--izgara-bosluk);
  row-gap: 4rem;
}

@media (min-width: 768px) {
  .izgara-12 {
    row-gap: 6rem;
  }
}

/* Sütun Genişlikleri (Mobil: 12 Sütun Tam Genişlik, 768px+: Asimetrik) */
.sutun-12 {
  grid-column: span 12 / span 12;
}

.sutun-4,
.sutun-5,
.sutun-6,
.sutun-7,
.sutun-8 {
  grid-column: span 12 / span 12;
}

@media (min-width: 768px) {
  .sutun-4 { grid-column: span 4 / span 4; }
  .sutun-5 { grid-column: span 5 / span 5; }
  .sutun-6 { grid-column: span 6 / span 6; }
  .sutun-7 { grid-column: span 7 / span 7; }
  .sutun-8 { grid-column: span 8 / span 8; }

  .basla-3 { grid-column-start: 3; }
  .basla-7 { grid-column-start: 7; }
  .basla-8 { grid-column-start: 8; }
  .basla-9 { grid-column-start: 9; }

  /* Dikey Kaydırma (Staggering) */
  .kaydir-12 { margin-top: 3rem; }
  .kaydir-20 { margin-top: 5rem; }
  .kaydir-24 { margin-top: 6rem; }
  .kaydir-32 { margin-top: 8rem; }
}

/* --------------------------------------------------------------------------
   7. NUMARA-FOLYO SİSTEMİ VE MİKRO-EĞİMLER (-rotate)
   -------------------------------------------------------------------------- */
.bolum-indeks-satir {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
  color: var(--gri-orta);
}

.bolum-indeks-no {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.bolum-indeks-no strong {
  font-weight: 500;
  color: inherit;
}

.bolum-indeks-no .taksim {
  font-weight: 300;
  opacity: 0.6;
}

.bolum-indeks-cizgi {
  height: 1px;
  flex: 1;
  background-color: var(--cizgi-acik);
}

.dergi-bolum--koyu .bolum-indeks-cizgi {
  background-color: var(--cizgi-koyu);
}

/* Bölüm Sağ Alt Köşe Tekil Sayfa Folyosu (p. 01 / 06) */
.bolum-alt-folyo {
  pointer-events: none;
  user-select: none;
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
}

@media (min-width: 768px) {
  .bolum-alt-folyo {
    bottom: 2rem;
    right: 2.5rem;
  }
}

.bolum-alt-folyo .folyo-p {
  font-style: italic;
  font-weight: 300;
  opacity: 0.7;
  text-transform: none;
}

.bolum-alt-folyo .folyo-aktif {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.bolum-alt-folyo .folyo-ayirici {
  font-weight: 300;
  opacity: 0.5;
}

.bolum-alt-folyo .folyo-toplam {
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* Masaüstü Mikro-Eğimler (768px+ ve LTR) */
@media (min-width: 768px) {
  .bolum-indeks-no {
    transform: rotate(-8deg);
    transform-origin: bottom left;
  }

  .egim-6 {
    display: inline-block;
    transform: rotate(-6deg);
    transform-origin: bottom left;
  }

  .egim-3 {
    display: inline-block;
    transform: rotate(-3deg);
    transform-origin: top left;
  }

  .egim-2 {
    display: inline-block;
    transform: rotate(-2deg);
    transform-origin: top left;
  }
}

/* --------------------------------------------------------------------------
   8. GÖRSEL SİSTEMİ, ORANLAR VE MONOKROM FİLTRE DİSİPLİNİ
   -------------------------------------------------------------------------- */
.panel-gorsel {
  position: relative;
  margin: 0;
}

.gorsel-cerceve {
  position: relative;
  overflow: hidden;
  background-color: var(--gri-acik);
  width: 100%;
}

.dergi-bolum--koyu .gorsel-cerceve {
  background-color: var(--antrasit);
}

.gorsel-cerceve img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.06);
  transition: transform 700ms var(--egri-sinematik), filter 700ms var(--egri-sinematik);
}

.panel-gorsel:hover .gorsel-cerceve img {
  transform: scale(1.02);
  filter: grayscale(20%) contrast(1.04);
}

/* Editoryal En-Boy Oranları */
.oran-21-9 { aspect-ratio: 21 / 9; }
.oran-16-10 { aspect-ratio: 16 / 10; }
.oran-4-5 { aspect-ratio: 4 / 5; }
.oran-3-2 { aspect-ratio: 3 / 2; }
.oran-1-1 { aspect-ratio: 1 / 1; }

@media (max-width: 767px) {
  .oran-21-9 {
    aspect-ratio: 16 / 10;
  }
}

.gorsel-altyazi {
  margin-top: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
}

/* Yapışkan Dikey Portre (02 / Koruyucu Hekimlik) */
@media (min-width: 768px) {
  .yapiskan-gorsel {
    position: sticky;
    top: 6rem;
  }
}

/* --------------------------------------------------------------------------
   9. BÖLÜM 00 / HERO (#acilis) VE 4 SÜTUNLU EDİTORYAL EŞİK
   -------------------------------------------------------------------------- */
.hero-bolum {
  position: relative;
  background-color: var(--siyah);
  color: var(--beyaz);
  padding: 0;
}

.hero-sahne {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 7rem var(--kenar-bosluk) 4.25rem;
  overflow: hidden;
}

.hero-arkaplan {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-arkaplan img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.08) brightness(0.55);
}

.hero-arkaplan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.35) 55%,
    rgba(10, 10, 10, 0.55) 100%
  );
}

.hero-icerik {
  position: relative;
  z-index: 2;
  max-width: var(--kapsayici-maks);
  margin-inline: auto;
  width: 100%;
}

.hero-alt-bar {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 250, 250, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .hero-alt-bar {
    flex-direction: row;
    align-items: flex-end;
  }
}

.hero-monografi-etiket {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-metin-koyu);
}

.hero-alinti {
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.4;
  color: var(--beyaz);
  max-width: 32ch;
}

/* Sağ Kenar Dikey İndeks Notu */
.hero-yan-indeks {
  display: none;
}

@media (min-width: 1024px) {
  .hero-yan-indeks {
    display: block;
    position: absolute;
    right: 2.5rem;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: right center;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gri-metin-koyu);
    user-select: none;
  }
}

/* Hero Altı 4 Sütunlu Editoryal Eşik (Hover'da Terslenen Arşiv Kapısı) */
.hero-esik {
  position: relative;
  z-index: 2;
  background-color: var(--siyah);
  border-top: 1px solid var(--cizgi-koyu);
  border-bottom: 1px solid var(--cizgi-koyu);
}

.hero-esik-izgara {
  max-width: var(--kapsayici-maks);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .hero-esik-izgara {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hero-esik-sutun {
  padding: 2rem var(--kenar-bosluk);
  border-bottom: 1px solid var(--cizgi-koyu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--beyaz);
  background-color: var(--siyah);
  transition: background-color 0.35s ease-out, color 0.35s ease-out;
}

#klinik-rehberler-ve-merak .hero-esik-sutun {
  background-color: var(--beyaz);
  color: var(--siyah);
  border-bottom: 1px solid var(--cizgi-acik);
}

#klinik-rehberler-ve-merak .hero-esik-sutun:hover,
#klinik-rehberler-ve-merak .hero-esik-sutun:focus-visible {
  background-color: #f6f4ef;
  color: var(--siyah);
}

@media (min-width: 768px) {
  .hero-esik-sutun {
    border-bottom: none;
    border-right: 1px solid var(--cizgi-koyu);
  }
  .hero-esik-sutun:last-child {
    border-right: none;
  }
  #klinik-rehberler-ve-merak .hero-esik-izgara {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--cizgi-acik);
  }
  #klinik-rehberler-ve-merak .hero-esik-sutun {
    border-bottom: 1px solid var(--cizgi-acik);
    border-right: 1px solid var(--cizgi-acik);
  }
  #klinik-rehberler-ve-merak .hero-esik-sutun:nth-child(3n) {
    border-right: none;
  }
}

.hero-esik-sutun:hover,
.hero-esik-sutun:focus-visible {
  background-color: var(--beyaz);
  color: var(--siyah);
}

.hero-esik-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}

.hero-esik-baslik {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  line-height: 1.2;
  transition: transform 0.35s ease-out;
}

.hero-esik-sutun:hover .hero-esik-baslik,
.hero-esik-sutun:focus-visible .hero-esik-baslik {
  transform: translateX(8px);
}

.hero-esik-ozet {
  font-size: 0.875rem;
  line-height: 1.55;
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   10. KUTUSUZ ALINTILAR, KISA NOTLAR, TABLOLAR VE SSS SATIRLARI
   -------------------------------------------------------------------------- */
/* Sütun Alıntısı (Sıfır Arka Plan, Yalnız Sol 1px Saç Teli Çizgi) */
.sutun-alinti {
  margin-block: 2.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--cizgi-acik);
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.4;
  color: var(--siyah);
  max-width: 36ch;
}

/* Koyu Bölümde Dev İtalik Alıntı */
.dev-italik-alinti {
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.25;
  color: var(--beyaz);
  margin-bottom: 3rem;
  max-width: 32ch;
}

/* Kutusuz Kısa Notlar Listesi (Üst ve Alt 1px Saç Teli Çizgi) */
.kisa-notlar-liste {
  margin-top: 3rem;
  border-top: 1px solid var(--cizgi-acik);
}

.dergi-bolum--koyu .kisa-notlar-liste {
  border-top-color: var(--cizgi-koyu);
}

.kisa-notlar-liste li {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--cizgi-acik);
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
}

.dergi-bolum--koyu .kisa-notlar-liste li {
  border-bottom-color: var(--cizgi-koyu);
}

.kisa-notlar-no {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
}

.kisa-notlar-metin {
  font-family: var(--font-govde);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: inherit;
  transition: transform 0.35s ease-out;
}

.kisa-notlar-liste li:hover .kisa-notlar-metin {
  transform: translateX(8px);
}

/* 02 / Koruyucu Hekimlik 4 Maddelik Editoryal Tablo */
.mikroskop-tablo {
  margin-top: 3.5rem;
  border-top: 1px solid var(--cizgi-koyu);
}

.editoryal-satir {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--cizgi-koyu);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: baseline;
  transition: background-color 0.3s ease-out, color 0.3s ease-out, padding-inline 0.3s ease-out;
}

.editoryal-satir:hover {
  background-color: var(--beyaz);
  color: var(--siyah);
  padding-inline: 1rem;
}

.editoryal-satir-no {
  grid-column: span 12 / span 12;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--gri-orta);
}

.editoryal-satir-icerik {
  grid-column: span 12 / span 12;
}

@media (min-width: 768px) {
  .editoryal-satir-no {
    grid-column: span 2 / span 2;
  }
  .editoryal-satir-icerik {
    grid-column: span 10 / span 10;
  }
}

.editoryal-satir-baslik {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.25;
  margin-bottom: 0.4rem;
  transition: transform 0.3s ease-out;
}

.editoryal-satir:hover .editoryal-satir-baslik {
  transform: translateX(8px);
}

.editoryal-satir-aciklama {
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.78;
}

/* 03 / Estetik Anlayışı: Kutusuz Tam Genişlik SSS Fihristi */
.sutun-sss {
  margin-top: 6rem;
  border-top: 1px solid var(--cizgi-acik);
}

.sss-baslik-ust {
  padding-block: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
  border-bottom: 1px solid var(--cizgi-acik);
}

.sss-satir {
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--cizgi-acik);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: baseline;
}

@media (min-width: 768px) {
  .sss-satir {
    grid-template-columns: 3rem 5fr 7fr;
    gap: 2rem;
  }
}

.sss-no {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--gri-orta);
}

.sss-soru {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.28;
  transition: transform 0.35s ease-out;
}

.sss-satir:hover .sss-soru {
  transform: translateX(8px);
}

.sss-cevap {
  font-family: var(--font-govde);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gri-metin-acik);
  max-width: 60ch;
}

/* EMRAH_ONAYI Kapanış Sergi Alıntısı (#kapanis) */
.kapanis-sergi {
  margin-top: 6rem;
  padding-top: 6rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--cizgi-acik);
  text-align: center;
}

.kapanis-sergi blockquote {
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.85rem, 4.5vw, 4rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 26ch;
  margin-inline: auto;
  color: var(--siyah);
}

.kapanis-sergi cite {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
}

/* --------------------------------------------------------------------------
   11. 05 / KLİNİK DIŞI YAŞAM (İSVİÇRE TİPOGRAFİK DİZİN SATIRLARI)
   -------------------------------------------------------------------------- */
.yasam-dizin {
  border-top: 1px solid var(--cizgi-koyu);
}

.yasam-satir {
  position: relative;
  padding-block: 3rem;
  border-bottom: 1px solid var(--cizgi-koyu);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: baseline;
  transition: background-color 0.4s ease-out, color 0.4s ease-out, padding-inline 0.4s ease-out;
}

.yasam-satir:hover {
  background-color: var(--beyaz);
  color: var(--siyah);
  padding-inline: 1.5rem;
}

.yasam-satir-sol {
  grid-column: span 12 / span 12;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.yasam-satir-orta {
  grid-column: span 12 / span 12;
}

.yasam-satir-sag {
  grid-column: span 12 / span 12;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .yasam-satir-sol {
    grid-column: span 2 / span 2;
  }
  .yasam-satir-orta {
    grid-column: span 5 / span 5;
  }
  .yasam-satir-sag {
    grid-column: span 5 / span 5;
  }
}

.yasam-baslik {
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.15rem, 4.5vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  transition: transform 0.4s ease-out;
}

.yasam-satir:hover .yasam-baslik {
  transform: translateX(8px);
}

.yasam-aciklama {
  font-size: 0.95rem;
  line-height: 1.65;
  opacity: 0.78;
}

.yasam-arsiv-damga {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
}

@media (min-width: 768px) {
  .yasam-arsiv-damga {
    align-self: flex-end;
  }
}

/* --------------------------------------------------------------------------
   12. 06 / KÜNYE VE BİYOGRAFİ (KUTUSUZ MONOGRAFİ TABLOSU)
   -------------------------------------------------------------------------- */
.biyografi- buyuk,
.biyografi-buyuk {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(1.65rem, 2.8vw, 2.65rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--siyah);
  margin-bottom: 3rem;
}

.kunye-tablo {
  border-top: 1px solid var(--cizgi-acik);
}

.kunye-satir {
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--cizgi-acik);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  align-items: baseline;
}

@media (min-width: 640px) {
  .kunye-satir {
    grid-template-columns: 11rem 1fr;
    gap: 1.5rem;
  }
}

.kunye-etiket {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
}

.kunye-deger {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--siyah);
}

/* --------------------------------------------------------------------------
   13. ALT BİLGİ (FOOTER — TAM EKRAN SİYAH DEV İMZA)
   -------------------------------------------------------------------------- */
.alt-bilgi {
  min-height: 75vh;
  background-color: var(--siyah);
  color: var(--beyaz);
  padding: 8rem var(--kenar-bosluk) calc(2.75rem + env(safe-area-inset-bottom, 0px));
  margin-bottom: -1px;
  box-shadow: 0 120px 0 120px var(--siyah);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5rem;
}

.alt-bilgi-ust {
  max-width: var(--kapsayici-maks);
  margin-inline: auto;
  width: 100%;
}

.alt-sutun-baslik {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
  margin-bottom: 1.25rem;
}

.alt-liste {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.9375rem;
  color: var(--gri-metin-koyu);
}

.alt-liste a:hover {
  font-style: italic;
  color: var(--beyaz);
}

.alt-dev-imza-kapsayici {
  max-width: var(--kapsayici-maks);
  margin-inline: auto;
  width: 100%;
  overflow: visible;
  container-type: inline-size;
  position: relative;
  padding-block: 1.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.alt-dev-imza {
  font-family: "Cormorant Garamond", "Baskerville", "Didot", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: min(8.6vw, 9.5rem);
  font-size: min(9.4cqw, 9.5rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.22em;
  transform: rotate(-2.1deg) skewX(-4deg);
  transform-origin: left center;
  background: linear-gradient(112deg, #FAFAFA 0%, #D6D6D6 45%, #DFB882 80%, #FAFAFA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
  transition: transform 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              filter 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1));
}

.alt-dev-imza .imza-unvan {
  font-family: var(--font-baslik, Georgia, serif);
  font-style: italic;
  font-size: 0.46em;
  letter-spacing: 0.04em;
  opacity: 0.78;
  transform: translateY(-0.32em);
  display: inline-block;
}

.alt-dev-imza .imza-isim {
  font-family: "Snell Roundhand", "Apple Chancery", "Cormorant Garamond", "Baskerville", "Palatino", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.alt-dev-imza .imza-isim em {
  font-style: italic;
  font-weight: 400;
  margin-left: 0.04em;
  letter-spacing: -0.03em;
}

.alt-imza-paraf {
  width: min(74%, 680px);
  height: auto;
  margin-top: -0.35rem;
  margin-left: 1.5rem;
  overflow: visible;
  transform: rotate(-1.6deg);
  transform-origin: left center;
  pointer-events: none;
}

.alt-imza-paraf .paraf-ana {
  stroke: rgba(223, 184, 130, 0.62);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 980;
  stroke-dashoffset: 0;
  transition: stroke 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              stroke-width 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1));
}

.alt-imza-paraf .paraf-ikincil {
  stroke: rgba(250, 250, 250, 0.24);
  stroke-width: 1.1;
  stroke-linecap: round;
  transition: stroke 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1));
}

.alt-imza-paraf .paraf-nokta {
  fill: #DFB882;
  opacity: 0.75;
}

.alt-dev-imza-kapsayici:hover .alt-dev-imza {
  transform: rotate(-1.2deg) skewX(-2deg) translateX(4px);
}

.alt-dev-imza-kapsayici:hover .alt-imza-paraf .paraf-ana {
  stroke: #DFB882;
  stroke-width: 2.5;
}

.alt-dev-imza-kapsayici:hover .alt-imza-paraf .paraf-ikincil {
  stroke: rgba(223, 184, 130, 0.45);
}

.alt-dev-imza:lang(en) { font-size: min(6.6vw, 9rem); font-size: min(7.6cqw, 9rem); }
.alt-dev-imza:lang(de) { font-size: min(6.2vw, 9rem); font-size: min(7.2cqw, 9rem); }
.alt-dev-imza:lang(ar) {
  font-family: var(--font-baslik, Georgia, serif);
  font-style: normal;
  font-size: min(8.2vw, 9.5rem);
  font-size: min(9.8cqw, 9.5rem);
  transform: rotate(1.4deg);
  transform-origin: right center;
}
[dir="rtl"] .alt-dev-imza-kapsayici,
html[lang="ar"] .alt-dev-imza-kapsayici {
  align-items: flex-end;
}
[dir="rtl"] .alt-imza-paraf,
html[lang="ar"] .alt-imza-paraf {
  transform: scaleX(-1) rotate(-1.4deg);
  transform-origin: center center;
  margin-left: 0;
  margin-right: 1.5rem;
}

.alt-bilgi-taban {
  max-width: var(--kapsayici-maks);
  margin-inline: auto;
  width: 100%;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cizgi-koyu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gri-orta);
}

@media (min-width: 768px) {
  .alt-bilgi-taban {
    flex-direction: row;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   14. KAYDIRMA BELİRME (REVEAL) ANİMASYONLARI (.js Aktif İken)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .izle-belir {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 900ms var(--egri-sinematik), transform 900ms var(--egri-sinematik);
    will-change: opacity, transform;
  }

  .js .izle-belir.gorundu {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   15. ARAPÇA VE RTL (SAĞDAN SOLA) TAM UYUM KURALLARI
   -------------------------------------------------------------------------- */
[dir="rtl"],
html[lang="ar"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] *,
html[lang="ar"] * {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

[dir="rtl"] .ana-menu {
  align-items: flex-start;
}

[dir="rtl"] .sutun-alinti {
  padding-left: 0;
  padding-right: 1.5rem;
  border-left: none;
  border-right: 1px solid var(--cizgi-acik);
}

[dir="rtl"] .bolum-alt-folyo {
  right: auto;
  left: 1.5rem;
}

@media (min-width: 768px) {
  [dir="rtl"] .bolum-alt-folyo {
    right: auto;
    left: 2.5rem;
  }

  /* RTL'de mikro-eğimler devre dışı bırakılır */
  [dir="rtl"] .bolum-indeks-no,
  [dir="rtl"] .egim-6,
  [dir="rtl"] .egim-3,
  [dir="rtl"] .egim-2 {
    transform: none;
  }
}

[dir="rtl"] .hero-esik-sutun:hover .hero-esik-baslik,
[dir="rtl"] .editoryal-satir:hover .editoryal-satir-baslik,
[dir="rtl"] .sss-satir:hover .sss-soru,
[dir="rtl"] .yasam-satir:hover .yasam-baslik,
[dir="rtl"] .kisa-notlar-liste li:hover .kisa-notlar-metin {
  transform: translateX(-8px);
}


/* Ek Tipografi ve Bölüm Kuralları */
.hero-metin-ek {
  margin-top: 2rem;
  max-width: 62ch;
  color: var(--gri-metin-koyu);
}

.hero-slogan {
  font-family: var(--font-baslik);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--beyaz);
  margin-bottom: 0.75rem;
}

.hero-slogan em {
  font-style: italic;
}

.hero-alt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero-giris {
  font-family: var(--font-govde);
  font-size: 0.9375rem;
  line-height: 1.7;
}

[dir="rtl"] .hero-alt {
  letter-spacing: 0;
  text-transform: none;
}

blockquote .atif {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
}

[dir="rtl"] blockquote .atif {
  letter-spacing: 0;
  text-transform: none;
}

.kapanis-ust {
  margin-bottom: 1.5rem;
  color: var(--gri-orta);
}

/* İkincil Sayfa Kuralları (.ikincil) */
.ikincil {
  background-color: var(--beyaz);
  color: var(--siyah);
  min-height: 70vh;
  /* üst boşluk, başlığın +96px gölge tülünün (6rem) altına iner */
  padding-block: calc(var(--header-yukseklik) + 7rem) 7rem;
  padding-inline: max(var(--kenar-bosluk), calc((100% - var(--kapsayici-maks)) / 2));
}

.ikincil h1 {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(2.5rem, 7.5vw, 6.75rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  hyphens: auto;
  margin-bottom: 2rem;
}

.ikincil .acilis {
  padding-bottom: 3.5rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid var(--cizgi-acik);
}

.ikincil .bolum-indeks-etiket,
.ikincil .bolum-indeks-folyo {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.ikincil .acilis-giris {
  font-family: var(--font-baslik);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--gri-metin-acik);
  max-width: 46rem;
}

.ikincil .acilis-aksiyon {
  margin-top: 2.25rem;
}

.ikincil .dugme {
  display: inline-block;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ikincil .dugme:hover,
.ikincil .dugme:focus-visible {
  font-style: italic;
  opacity: 0.7;
}

.ikincil .acilis-giris a,
.ikincil .yasal-metin a,
.ikincil .kunye-liste dd a:not(.evdis-rozet) {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Yasal metin (aydınlatma / privacy) — dar okuma sütunu */
.ikincil .yasal-metin {
  max-width: 46rem;
}

.ikincil .yasal-bolum {
  padding-block: 2.5rem;
  border-top: 1px solid var(--cizgi-acik);
}

.ikincil .yasal-bolum h2 {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.ikincil .yasal-bolum p,
.ikincil .yasal-liste li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gri-metin-acik);
}

.ikincil .yasal-bolum p + p,
.ikincil .yasal-bolum .kunye-liste + p {
  margin-top: 1rem;
}

.ikincil .yasal-bolum strong {
  font-weight: 500;
  color: var(--siyah);
}

.ikincil .yasal-liste {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}

.ikincil .yasal-liste li {
  position: relative;
  padding-inline-start: 1.5rem;
}

.ikincil .yasal-liste li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--gri-orta);
}

.ikincil code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--cizgi-acik);
}

/* Künye listesi (dl) — mevcut .kunye-satir ızgarasını kullanır */
.ikincil .kunye-liste {
  border-top: 1px solid var(--cizgi-acik);
  margin-block: 1.5rem;
}

.ikincil .kunye-liste dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
}

.ikincil .kunye-liste dd {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--siyah);
  overflow-wrap: anywhere;
}

/* Hakkında / about — portre + künye */
.ikincil .kunye-bolumu {
  padding-block: 1rem 5rem;
}

.ikincil .kunye-karti {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .ikincil .kunye-karti {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 5rem;
    align-items: start;
  }
}

.ikincil .kunye-portre {
  margin: 0;
  max-width: 30rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--gri-acik);
}

.ikincil .kunye-portre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.06);
}

.ikincil .kunye-ust-etiket {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
  margin-bottom: 1rem;
}

.ikincil .kunye-baslik {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.ikincil .kunye-aciklama {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--gri-metin-acik);
  max-width: 54ch;
  margin-bottom: 2rem;
}

.ikincil .evdis-rozet {
  display: inline-block;
  margin-inline-start: 0.75rem;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Derleme bölümlerine geçiş kartları */
.ikincil .sutun-gecis-bolumu {
  padding-top: 1rem;
}

.ikincil .sutun-gecis-izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--cizgi-acik);
}

@media (min-width: 768px) {
  .ikincil .sutun-gecis-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4rem;
  }
}

.ikincil .sutun-gecis-kart {
  display: block;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--cizgi-acik);
}

.ikincil .sutun-gecis-no {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta);
  margin-bottom: 0.75rem;
}

.ikincil .sutun-gecis-baslik {
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.ikincil .sutun-gecis-kart p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--gri-metin-acik);
  max-width: 40ch;
}

.ikincil .sutun-gecis-kart:hover .sutun-gecis-baslik,
.ikincil .sutun-gecis-kart:focus-visible .sutun-gecis-baslik {
  font-style: italic;
}

/* Arapça: negatif harf aralığı bağlantılı harfleri bozar */
[dir="rtl"] .ikincil h1,
[dir="rtl"] .ikincil h2,
[dir="rtl"] .ikincil .kunye-baslik {
  letter-spacing: 0;
}

[dir="rtl"] .ikincil h1 {
  line-height: 1.25;
}

[dir="rtl"] .ikincil .bolum-indeks-etiket,
[dir="rtl"] .ikincil .bolum-indeks-folyo,
[dir="rtl"] .ikincil .kunye-liste dt,
[dir="rtl"] .ikincil .kunye-ust-etiket,
[dir="rtl"] .ikincil .sutun-gecis-no,
[dir="rtl"] .ikincil .evdis-rozet,
[dir="rtl"] .ikincil .dugme {
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   HERO GÖRSEL SLAYTI, KEN BURNS, SİYAH-GRİ ÖRTÜ VE İLERLEME BARI (css/monografi.css)
   ========================================================================== */

.hero-slayt-kapsayici {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--siyah, #0A0A0A);
  pointer-events: none;
  user-select: none;
}

/* Her bir picture.hero-arkaplan.hero-slayt katmanı */
.hero-arkaplan.hero-slayt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: opacity 1600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

/* Eski tekil ::after örtüsünü devre dışı bırakıp ortak .hero-ortu katmanını kullanıyoruz */
.hero-arkaplan.hero-slayt::after {
  display: none;
}

.hero-arkaplan.hero-slayt.aktif {
  opacity: 1;
  z-index: 2;
}

.hero-arkaplan.hero-slayt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(100%) contrast(1.08) brightness(0.58);
  transform: scale(1);
  transform-origin: center center;
}

/* Ken Burns: Yalnızca hareket kısıtlaması olmayan cihazlarda aktif */
@media (prefers-reduced-motion: no-preference) {
  .hero-arkaplan.hero-slayt img {
    transition: transform 7600ms linear;
    will-change: transform;
  }

  .hero-arkaplan.hero-slayt.aktif img,
  .hero-arkaplan.hero-slayt.onceki-slayt img {
    transform: scale(1.055);
  }
}

/* Siyah-Gri Çift Katmanlı Monokrom Örtü (WCAG AA/AAA Kontrast Garantisi) */
.hero-ortu {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(
      120% 90% at 50% 42%,
      rgba(20, 20, 20, 0.18) 0%,
      rgba(10, 10, 10, 0.64) 100%
    ),
    linear-gradient(
      to top,
      rgba(10, 10, 10, 0.94) 0%,
      rgba(20, 20, 20, 0.42) 52%,
      rgba(10, 10, 10, 0.68) 100%
    );
}

/* Sol Alt Grup: Monografi Etiketi + Slayt İlerleme HUD'u */
.hero-sol-alt-grup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 100%;
}

.hero-slayt-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem; /* 10px */
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beyaz, #FAFAFA);
}

@media (min-width: 768px) {
  .hero-slayt-hud {
    gap: 1rem;
  }
}

/* 01 / 04 Sayacı */
.hero-slayt-numara {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero-slayt-aktif-no {
  font-weight: 500;
  color: var(--beyaz, #FAFAFA);
}

.hero-slayt-taksim {
  margin-inline: 0.2rem;
  opacity: 0.45;
  font-weight: 300;
}

.hero-slayt-toplam-no {
  color: var(--gri-metin-koyu, #B8B8B8);
  font-weight: 400;
}

/* İnce Mimari İlerleme Çizgisi (390px'de 72px, 1440px'de 136px) */
.hero-ilerleme-iz {
  position: relative;
  width: 4.5rem; /* 72px — 390px ekranda taşmayı önler */
  height: 1px;
  background-color: rgba(250, 250, 250, 0.22);
  overflow: hidden;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .hero-ilerleme-iz {
    width: 8.5rem; /* 136px */
  }
}

.hero-ilerleme-dolgu {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--beyaz, #FAFAFA);
  transform-origin: left center;
  transform: scaleX(var(--slayt-ilerleme, 0));
  will-change: transform;
}

/* Aktif Görsel Mekan Etiketi */
.hero-slayt-mekan-etiket {
  color: var(--gri-metin-koyu, #B8B8B8);
  white-space: nowrap;
  transition: opacity 300ms ease-out;
}

@media (max-width: 420px) {
  /* 390px genişlikte tek satırda sıkışmayı önlemek için mekan etiketi gizlenir,
     yalnız 01/04 + çizgi + duraklat düğmesi kalır */
  .hero-slayt-mekan-etiket {
    display: none;
  }
}

/* Erişilebilir Duraklat / Başlat Düğmesi */
.hero-slayt-kontrol {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(250, 250, 250, 0.24);
  background-color: rgba(10, 10, 10, 0.45);
  color: var(--beyaz, #FAFAFA);
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 250ms ease-out, color 250ms ease-out, border-color 250ms ease-out;
}

.hero-slayt-kontrol:hover,
.hero-slayt-kontrol:focus-visible {
  background-color: var(--beyaz, #FAFAFA);
  color: var(--siyah, #0A0A0A);
  border-color: var(--beyaz, #FAFAFA);
}

.hero-slayt-kontrol:focus-visible {
  outline: 2px solid var(--beyaz, #FAFAFA);
  outline-offset: 3px;
}

.hero-kontrol-ikon {
  font-size: 0.5625rem;
  line-height: 1;
}

/* Azaltılmış Hareket (prefers-reduced-motion: reduce) Kuralları */
@media (prefers-reduced-motion: reduce) {
  .hero-arkaplan.hero-slayt {
    transition: none !important;
  }

  .hero-arkaplan.hero-slayt img {
    transition: none !important;
    transform: none !important;
  }

  .hero-ilerleme-dolgu {
    transform: scaleX(1) !important;
  }

  .hero-slayt-kontrol {
    display: none !important;
  }
}

/* Arapça / RTL (Sağdan Sola) Uyum Kuralları */
[dir="rtl"] .hero-sol-alt-grup,
html[lang="ar"] .hero-sol-alt-grup {
  align-items: flex-start;
}

[dir="rtl"] .hero-ilerleme-dolgu,
html[lang="ar"] .hero-ilerleme-dolgu {
  transform-origin: right center;
}

[dir="rtl"] .hero-slayt-hud,
[dir="rtl"] .hero-slayt-kontrol,
html[lang="ar"] .hero-slayt-hud,
html[lang="ar"] .hero-slayt-kontrol {
  letter-spacing: 0 !important;
  text-transform: none !important;
}


/* ==========================================================================
   05 / YAŞAM — SERBEST KOLAJ (#yasam içinde), GRİ YER TUTUCU VE PARALAKS (css/monografi.css)
   ========================================================================== */

/* Ek Oran Sınıfı (3:4 Dikey) */
.oran-3-4 {
  aspect-ratio: 3 / 4;
}

/* --------------------------------------------------------------------------
   MOBİL VE 390px VARSAYILAN DÜZEN:
   Mobilde (< 640px) 1 Sütunlu Ferah Izgara, 640px+ 2 Sütun, Eğim Yok (0deg)
   -------------------------------------------------------------------------- */
.lifestyle-kolaj-sahne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 1.25rem;
  align-items: start;
}

@media (min-width: 640px) {
  .lifestyle-kolaj-sahne {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.125rem;
    row-gap: 1.75rem;
  }
}

.kolaj-kart {
  --kolaj-egim: 0deg;
  --paralaks-y: 0px;
  position: relative;
  margin: 0;
  z-index: 1;
  transform: none;
}

/* Görsel Çerçevesi ve İnce Siyah/Gri Kenarlık (Üst Üste Binmede Kontrast Sağlar) */
.kolaj-gorsel-kutu {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--gri-acik, #F0F0F0);
  border: 1px solid rgba(10, 10, 10, 0.14);
  box-shadow: 0 18px 40px -24px rgba(10, 10, 10, 0.22);
  transition: border-color 400ms ease-out, box-shadow 400ms ease-out;
}

/* 390px Mobilde Düzenli Görünüm İçin Tüm Kutular 4:5 Dikey Oranda Hizalanır */
@media (max-width: 767px) {
  .kolaj-gorsel-kutu {
    aspect-ratio: 4 / 5 !important;
    box-shadow: none;
  }
}

.kolaj-gorsel-kutu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.06);
  transition: transform 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              filter 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity 400ms ease-out;
}

/* --------------------------------------------------------------------------
   GRİ YER TUTUCU KATMANI (data-yer-tutucu="aktif" İken)
   -------------------------------------------------------------------------- */
.kolaj-kart[data-yer-tutucu="aktif"] .kolaj-gorsel-kutu img {
  opacity: 0;
  pointer-events: none;
}

.kolaj-yer-tutucu-katman {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #EBEBEB;
  background-image:
    linear-gradient(
      135deg,
      rgba(10, 10, 10, 0.03) 25%,
      transparent 25%,
      transparent 50%,
      rgba(10, 10, 10, 0.03) 50%,
      rgba(10, 10, 10, 0.03) 75%,
      transparent 75%,
      transparent
    );
  background-size: 24px 24px;
  color: var(--gri-metin-acik, #404040);
  font-family: var(--font-mono, monospace);
  transition: opacity 400ms ease-out, background-color 400ms ease-out;
}

@media (min-width: 768px) {
  .kolaj-yer-tutucu-katman {
    padding: 1.15rem;
  }
}

/* Gerçek fotoğraf yüklendiğinde (data-yer-tutucu="yuklendi") yer tutucu gizlenir */
.kolaj-kart[data-yer-tutucu="yuklendi"] .kolaj-yer-tutucu-katman {
  opacity: 0;
  pointer-events: none;
}

/* Kontak Baskı Köşe Kadraj Çentikleri */
.kolaj-yer-tutucu-katman::before,
.kolaj-yer-tutucu-katman::after {
  content: "";
  position: absolute;
  inset: 0.45rem;
  pointer-events: none;
  border: 1px dashed rgba(10, 10, 10, 0.12);
}

.yer-tutucu-ust,
.yer-tutucu-alt {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.5625rem; /* 9px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gri-orta, #737373);
}

@media (max-width: 480px) {
  .yer-tutucu-ust span:last-child {
    display: none;
  }
}

.yer-tutucu-merkez {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
  margin-block: auto;
}

.yer-tutucu-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(10, 10, 10, 0.22);
  font-size: 0.875rem;
  line-height: 1;
  color: var(--siyah, #0A0A0A);
}

.yer-tutucu-etiket {
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--siyah, #0A0A0A);
  padding-inline: 0.25rem;
}

/* --------------------------------------------------------------------------
   ALT BAŞLIK (FIGCAPTION) ALANI
   -------------------------------------------------------------------------- */
.kolaj-altyazi {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  background-color: rgba(250, 250, 250, 0.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.kolaj-altyazi-ust {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.5625rem; /* 9px mobil */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gri-orta, #737373);
  margin-bottom: 0.3rem;
}

@media (min-width: 768px) {
  .kolaj-altyazi-ust {
    font-size: 0.625rem; /* 10px masaüstü */
  }
}

/* --------------------------------------------------------------------------
   CANLI MERAK KARTLARI — DOĞRUDAN KART SAYFASI & GÜNLÜK TAG SÜZGECİ
   Varsayılan: Saf Monokrom (Siyah / Beyaz / Gümüş Gri)
   Üzerine Gelince (:hover / :focus-within): 700ms Sinematik Renklenme (Profil Resmi Gibi)
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rehber-konum-notu {
  margin-top: 1.5rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gri-orta, #737373);
}

#yasam.dergi-bolum {
  padding-top: clamp(4.5rem, 6.5vw, 5.75rem);
}

#yasam .bolum-indeks {
  margin-bottom: 1.5rem;
}

.kolaj-tag-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(250, 250, 250, 0.12);
}

.kolaj-tag-seridi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

@media (max-width: 767px) {
  .kolaj-tag-ust {
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.65rem;
  }

  .kolaj-tag-seridi {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, #000 86%, transparent 100%);
  }

  [dir="rtl"] .kolaj-tag-seridi,
  html[lang="ar"] .kolaj-tag-seridi {
    -webkit-mask-image: linear-gradient(to left, #000 86%, transparent 100%);
    mask-image: linear-gradient(to left, #000 86%, transparent 100%);
  }

  .kolaj-tag-seridi::-webkit-scrollbar {
    display: none;
  }

  .kolaj-tag-dugme {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

.kolaj-tag-dugme {
  appearance: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 250, 250, 0.16);
  background: rgba(22, 22, 22, 0.9);
  color: #BDBDBD;
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.kolaj-tag-dugme:hover,
.kolaj-tag-dugme:focus-visible {
  border-color: #FAFAFA;
  color: #FAFAFA;
  transform: translateY(-1px);
}

.kolaj-tag-dugme[aria-pressed="true"] {
  background: #FAFAFA;
  border-color: #FAFAFA;
  color: #0A0A0A;
  font-weight: 600;
}

.kolaj-tag-sayac {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #8C8C8C;
}

/* VARSAYILAN DURUM: SAF MONOKROM (SİYAH / BEYAZ / GÜMÜŞ GRİ) */
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-1,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-2,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-3 {
  aspect-ratio: auto;
  --mk-zemin: #0E0E0E;
  --mk-kart: #151515;
  --mk-sahne: #1C1C1C;
  --mk-yazi: #F5F5F5;
  --mk-soluk: #A6A6A6;
  --mk-cizgi: rgba(250, 250, 250, 0.14);
  --mk-vurgu: #E5E5E5;
  --k-renk: #D4D4D4;
  --k-ikincil: #8A8A8A;
  --k-dolgu: rgba(250, 250, 250, 0.06);
  --k-iz: rgba(250, 250, 250, 0.22);
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: 0 18px 42px -18px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              background-color 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1));
}

.lifestyle-kolaj-sahne .kolaj-kart.merak-kart[hidden] {
  display: none !important;
}

/* Kart içi bileşenlerin monokrom -> renkli yumuşak geçişi (700ms) */
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-sahne,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-konu,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-rehber a,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-soru a,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-cizim .c-ana,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-cizim .c-ikincil,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-cizim .c-dolgu,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-cizim .c-iz {
  transition: background 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              background-color 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              color 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              stroke 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
              fill 700ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ÜZERİNE GELİNCE (:hover / :focus-within / .mobil-odakta): SEÇKİN EDİTORYAL RENKLERE AÇILIM */
/* Palet 1: Sıcak Şampanya Altını & Mineral Adaçayı */
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-1:hover,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-1:focus-within,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-1.mobil-odakta {
  --mk-kart: #181613;
  --mk-sahne: #211D18;
  --k-renk: #DFB882;
  --k-ikincil: #7CC4B0;
  --k-dolgu: rgba(223, 184, 130, 0.16);
  --k-iz: rgba(223, 184, 130, 0.34);
  border-color: #DFB882;
}

/* Palet 2: Cerrahi Zümrüt-Yeşim & Sıcak Kehribar */
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-2:hover,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-2:focus-within,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-2.mobil-odakta {
  --mk-kart: #131917;
  --mk-sahne: #18221F;
  --k-renk: #68C2A8;
  --k-ikincil: #DFB882;
  --k-dolgu: rgba(104, 194, 168, 0.16);
  --k-iz: rgba(104, 194, 168, 0.34);
  border-color: #68C2A8;
}

/* Palet 3: Optik Safir Buz Mavisi & Gül Kuvars */
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-3:hover,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-3:focus-within,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mk-renk-3.mobil-odakta {
  --mk-kart: #13171C;
  --mk-sahne: #181F28;
  --k-renk: #7EB2E8;
  --k-ikincil: #E29B88;
  --k-dolgu: rgba(126, 178, 232, 0.16);
  --k-iz: rgba(126, 178, 232, 0.34);
  border-color: #7EB2E8;
}

.lifestyle-kolaj-sahne .kolaj-kart.merak-kart:hover svg.mk-cizim .c-ana,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart:focus-within svg.mk-cizim .c-ana,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mobil-odakta svg.mk-cizim .c-ana {
  stroke-width: 2.5;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px var(--k-dolgu));
}

/* Mine Kırınımı (Enamel Refraction — v1028o): Kart içi SVG optik katman geçişi + #iletisim fihrist nefes alanı */
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart svg.mk-cizim .c-ana,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart svg.mk-cizim .c-ikincil {
  transition: stroke 700ms cubic-bezier(0.22, 1, 0.36, 1),
              stroke-width 700ms cubic-bezier(0.22, 1, 0.36, 1),
              stroke-dashoffset 700ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 700ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 700ms ease;
}

.lifestyle-kolaj-sahne .kolaj-kart.merak-kart:hover,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart:focus-within,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart.mobil-odakta {
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.85),
              inset 0 1px 0 0 var(--k-iz);
}

@media (min-width: 1024px) {
  .ust-serit.iletisim-gorunur .ana-menu {
    opacity: 0.22;
    transition: opacity 350ms ease;
  }
  .ust-serit.iletisim-gorunur .ana-menu:hover,
  .ust-serit.iletisim-gorunur .ana-menu:focus-within {
    opacity: 1;
  }
}

.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-etiketler li {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(250, 250, 250, 0.14);
  color: #B5B5B5;
  cursor: pointer;
  transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease;
}

.lifestyle-kolaj-sahne .kolaj-kart.merak-kart:hover .mk-etiketler li,
.lifestyle-kolaj-sahne .kolaj-kart.merak-kart:focus-within .mk-etiketler li {
  border-color: var(--k-iz);
  color: #E5E5E5;
}

.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-etiketler li:hover {
  border-color: var(--k-renk);
  color: #FAFAFA;
  background: var(--k-dolgu);
}

.lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-sahne {
  position: relative;
  overflow: hidden;
  padding: 6px 10px;
  animation: mkSahneSalinim 5.6s ease-in-out infinite;
}

.lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+2) .mk-sahne { animation-delay: -1.1s; }
.lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+3) .mk-sahne { animation-delay: -2.3s; }
.lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+4) .mk-sahne { animation-delay: -0.7s; }
.lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+5) .mk-sahne { animation-delay: -1.9s; }
.lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n) .mk-sahne { animation-delay: -3.1s; }

@keyframes mkSahneSalinim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.lifestyle-kolaj-alt {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(250, 250, 250, 0.14);
  font-size: 0.875rem;
  color: #A6A6A6;
}

.lifestyle-kolaj-alt a {
  color: #FAFAFA;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: opacity 200ms ease;
}

.lifestyle-kolaj-alt a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   MASAÜSTÜ (768px+ ve 1080px+) SERBEST KOLAJ:
   12 Sütun, Eğimler, Kaydırma Paralaksı ve Üzerine Gelince Düzleşme
   Her gün yeni kart eklendiğinde (:nth-child) otomatik eğim ve yerleşim alır.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .lifestyle-kolaj-sahne {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 1.75rem;
    padding-block: 1rem 2.5rem;
  }

  /* .izle-belir.gorundu ile çakışmaması için birleşik transform */
  .kolaj-kart,
  .js .kolaj-kart.izle-belir.gorundu {
    transform: translate3d(0, var(--paralaks-y, 0px), 0) rotate(var(--kolaj-egim, 0deg));
    transition: transform 600ms var(--egri-sinematik, cubic-bezier(0.16, 1, 0.3, 1)),
                border-color 250ms ease,
                box-shadow 350ms ease,
                z-index 0s;
    will-change: transform;
  }

  /* Tablet (768px–1079px): 2 sütunlu otomatik kolaj */
  .lifestyle-kolaj-sahne .kolaj-kart { grid-column: span 6; }
  .lifestyle-kolaj-sahne .kolaj-kart:nth-child(odd) { --kolaj-egim: -1.8deg; z-index: 2; }
  .lifestyle-kolaj-sahne .kolaj-kart:nth-child(even) { margin-top: 1.75rem; --kolaj-egim: 1.7deg; z-index: 3; }

  /* Üzerine Gelindiğinde (Hover / Focus-Within): Kart En Üste Çıkar ve Düzleşir */
  .kolaj-kart:hover,
  .kolaj-kart:focus-within,
  .js .kolaj-kart.izle-belir.gorundu:hover,
  .js .kolaj-kart.izle-belir.gorundu:focus-within {
    z-index: 10;
    transform: translate3d(0, var(--paralaks-y, 0px), 0) rotate(0deg) scale(1.025);
  }

  .lifestyle-kolaj-sahne .kolaj-kart.merak-kart:hover,
  .lifestyle-kolaj-sahne .kolaj-kart.merak-kart:focus-within {
    border-color: var(--k-renk);
    box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.82), 0 0 0 1px var(--k-renk);
  }
}

@media (min-width: 1080px) {
  /* Geniş Ekran (1080px+): 3 sütunlu (4'er birim) otomatik dergi kolajı */
  .lifestyle-kolaj-sahne .kolaj-kart {
    grid-column: span 4;
  }

  .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+1) { margin-top: 0; --kolaj-egim: -1.6deg; z-index: 2; }
  .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+2) { margin-top: 1.15rem; --kolaj-egim: 1.4deg; z-index: 3; }
  .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+3) { margin-top: 0.35rem; --kolaj-egim: -1.7deg; z-index: 4; }
  .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+4) { margin-top: 0.35rem; --kolaj-egim: 1.5deg; z-index: 3; }
  .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+5) { margin-top: 1.15rem; --kolaj-egim: -1.3deg; z-index: 2; }
  .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n)   { margin-top: 0.25rem; --kolaj-egim: 1.5deg; z-index: 4; }

  .lifestyle-kolaj-sahne.filtre-aktif .kolaj-kart {
    margin-top: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   AZALTILMIŞ HAREKET (prefers-reduced-motion: reduce): Paralaks Kapalı
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kolaj-kart,
  .js .kolaj-kart.izle-belir.gorundu {
    --paralaks-y: 0px !important;
    transition: none !important;
  }
  .lifestyle-kolaj-sahne .kolaj-kart.merak-kart .mk-sahne {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   ARAPÇA / RTL (SAĞDAN SOLA) UYUM KURALLARI
   -------------------------------------------------------------------------- */
[dir="rtl"] .lifestyle-kolaj-sahne *,
html[lang="ar"] .lifestyle-kolaj-sahne * {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (min-width: 768px) {
  [dir="rtl"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+1), html[lang="ar"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+1) { --kolaj-egim: 2.2deg; }
  [dir="rtl"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+2), html[lang="ar"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+2) { --kolaj-egim: -1.9deg; }
  [dir="rtl"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+3), html[lang="ar"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+3) { --kolaj-egim: 2.4deg; }
  [dir="rtl"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+4), html[lang="ar"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+4) { --kolaj-egim: -2.1deg; }
  [dir="rtl"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+5), html[lang="ar"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n+5) { --kolaj-egim: 1.7deg; }
  [dir="rtl"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n),   html[lang="ar"] .lifestyle-kolaj-sahne .kolaj-kart:nth-child(6n)   { --kolaj-egim: -2.0deg; }
}

.ust-donus {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ust-donus a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
}



.rehber-kart-kapak {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 160px;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 0.85rem;
  display: block;
  border: 1px solid rgba(201, 169, 110, 0.22);
}


/* ==========================================================================
   ATLAS P0 ACİL ONARIM YAMASI — 1031
   Dayanak:
   - ATLAS-WEB-EMRAH-MOBIL-BOSLUK-ACIL-ONARIM-1031
   - REV2-EMRAH-MOBIL-BOSLUK-412PX-TESHIS-1031-YANIT
   - GROK-1031-EMRAH-MOBIL-BOSLUK-KOKNEDEN-DENETIM
   Kapsam:
   1) #hub-spoke-ic-link-agi siyah üstüne siyah (2124px) görünmez blok onarımı
      (SEO uyumlu, görünür, kompakt flex-wrap rehber fihristi)
   2) Mobil (@media max-width: 767px) footer.alt-bilgi üst boşluk daraltması
   3) Mobil (@media max-width: 767px) .hero-sahne üst boşluk onarımı
      (TR, EN, DE, AR × 412x915 & 390x844 -> firstVisibleText.top - header.bottom <= 48px)
   ========================================================================== */

/* --- 1. KÖK NEDEN 1: #hub-spoke-ic-link-agi Görünür Kompakt Rehber Fihristi --- */
#hub-spoke-ic-link-agi {
  background-color: var(--siyah, #0a0a0a);
  color: var(--beyaz, #fafafa);
  padding: 0.65rem var(--kenar-bosluk, 1.5rem);
  border-top: 1px solid var(--cizgi-koyu, rgba(250, 250, 250, 0.12));
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

#hub-spoke-ic-link-agi h2,
#hub-spoke-ic-link-agi summary {
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri-orta, #8c8c8c);
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

#hub-spoke-ic-link-agi details[open] summary {
  margin-bottom: 0.85rem;
}

#hub-spoke-ic-link-agi ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

#hub-spoke-ic-link-agi li {
  margin: 0;
  padding: 0;
}

#hub-spoke-ic-link-agi a {
  display: inline-block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(250, 250, 250, 0.72);
  text-decoration: none;
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(250, 250, 250, 0.14);
  border-radius: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}

#hub-spoke-ic-link-agi a:hover,
#hub-spoke-ic-link-agi a:focus-visible {
  color: var(--beyaz, #fafafa);
  border-color: rgba(250, 250, 250, 0.45);
  outline: none;
}

/* --- 2. KÖK NEDEN 1 & 2 MOBİL ONARIMI (@media max-width: 767px) --- */
@media (max-width: 767px) {
  .hero-sahne {
    min-height: auto;
    justify-content: flex-start;
    padding: 7.5rem var(--kenar-bosluk, 1.25rem) 2.75rem;
  }

  #hub-spoke-ic-link-agi {
    padding: 0.55rem var(--kenar-bosluk, 1.25rem);
  }

  footer.alt-bilgi {
    padding-top: 2.25rem;
    gap: 2.5rem;
  }
}

@media (max-width: 380px) {
  .hero-sahne {
    padding-top: 8.75rem;
  }
}

/* GUNUN_KARTI_VITRIN_CSS_1031_START */
/* GUNUN_KARTI_VITRIN_CSS_1031 */
.gunun-karti-vitrin {
  margin: 2.5rem auto;
  padding: 1.75rem 1.5rem;
  max-width: 72rem;
  border: 1px solid rgba(140, 140, 140, 0.28);
  border-radius: 6px;
  background-color: rgba(18, 18, 20, 0.04);
  box-sizing: border-box;
}
.gunun-karti-vitrin-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.82;
}
.gunun-karti-vitrin-baslik {
  margin: 0 0 0.65rem 0;
  font-size: 1.35rem;
  line-height: 1.35;
}
.gunun-karti-vitrin-hukum {
  margin: 0 0 1.15rem 0;
  font-size: 0.98rem;
  line-height: 1.6;
  opacity: 0.92;
}
.gunun-karti-vitrin-aksiyonlar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.gunun-karti-vitrin-link,
.gunun-karti-arsiv-link {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}
.mk-filtre-cubugu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem 0;
  align-items: center;
}
.mk-filtre-girdi,
.mk-filtre-secim {
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(140, 140, 140, 0.38);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 0.92rem;
}
/* GUNUN_KARTI_VITRIN_CSS_1031_END */