/* ============================================================
   Modureva Education — Açılış sayfası stili
   ------------------------------------------------------------
   Bu dosya UYGULAMANIN tasarım dilini (uygulama/statik/stil.css,
   "Sabah Işığı" token seti) sürdürür: aynı renk isimleri, aynı
   boşluk/ölçek adları, aynı radius mantığı. Yeni bir tasarım dili
   İCAT EDİLMEZ; sayfa uygulamanın devamı gibi okunur.

   FARKLAR ve GEREKÇELERİ:
   1) Fontlar: uygulamanın taban.html'i Google Fonts CDN'ini kullanır.
      Bu sayfa DIŞ KAYNAK KULLANMAZ — uygulamanın kendi self-host
      font dosyalarını (/statik/fontlar/*.woff2) kullanır. Bu dosyalar
      aynı alan adından, uygulamanın statik yolundan gelir; üçüncü
      taraf yoktur. Uygulama kapalıyken font düşer, sayfa okunur kalır
      (font-display: swap + tam yedek yığını).
   2) --sonuk: uygulamadaki #8B8375 değeri krem zeminde ~3.55:1
      kontrast verir; bu sayfada gövde metninde kullanıldığı için
      WCAG AA (4.5:1) altında kalmasın diye #6F6659'a (~5.3:1)
      koyulaştırıldı. Aynı token adı korunur.
   3) Bağlantı rengi: --safak (#E08A5F) metin olarak ~2.6:1 verir;
      metin bağlantıları için ayrı bir koyu ton (--baglanti, ~5.7:1)
      tanımlandı. --safak yalnız düz zemin/kenar/vurgu olarak kullanılır.
   ============================================================ */

/* ---- Self-host fontlar (uygulamanın /statik/fontlar dizini) ---- */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/statik/fontlar/source-serif-4-latin-normal-400-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/statik/fontlar/source-serif-4-latin-ext-normal-400-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/statik/fontlar/inter-latin-normal-400-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/statik/fontlar/inter-latin-ext-normal-400-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Newsreader + Karla — tasarim devrinin istedigi iki aile ----
   Yalnizca /kvkk.html bunlari cagirir (kendi :root'unda --font-baslik /
   --font-govde'yi yerel olarak ezer). Bu dosyayi paylasan diger statik
   sayfalar (index, evren tanitimlari) Source Serif 4 + Inter ile devam
   eder — asagidaki genel token'lar DEGISMEDI. Bir @font-face bildirimi
   tek basina indirme dogurmaz; font yalnizca gercekten kullanildiginda
   cekilir, yani bu ekleme diger sayfalara bir bayt maliyet bindirmez.
   Dosyalar uygulamanin kendi statik kokunden gelir, ucuncu taraf yoktur
   (ME-K1). Bekci: testler/test_dis_kaynak_bekci.py */
@font-face {
  font-family: 'Newsreader';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/statik/fontlar/newsreader-latin-normal-300-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/statik/fontlar/newsreader-latin-ext-normal-300-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/statik/fontlar/karla-latin-normal-300-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/statik/fontlar/karla-latin-ext-normal-300-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================ TOKENLAR ============================ */
:root {
  --zemin:   #FBF7F0;
  --yuzey:   #FFFFFF;
  --yuzey2:  #F4EDE1;
  --metin:   #2A2621;
  --sonuk:   #6F6659;
  --kenar:   #E5DDCF;
  --safak:   #E08A5F;
  --gol:     #4A7571;
  --aksam:   #7A6C99;
  --baglanti:#9A4E22;

  --golge-kart: 0 1px 2px rgba(42, 38, 33, 0.04), 0 4px 16px rgba(42, 38, 33, 0.05);

  --fs-1: 13px;
  --fs-2: 15px;
  --fs-3: 17px;
  --fs-4: 22px;
  --fs-5: 28px;
  --fs-6: 40px;
  --fs-7: 56px;

  --font-baslik: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-govde:  "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --radius-kucuk: 6px;
  --radius-orta:  10px;
  --radius-buyuk: 16px;

  --sp-2xs: 2px;  --sp-xs: 4px;  --sp-sm: 8px;   --sp-md: 16px;
  --sp-lg: 24px;  --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px;

  --sure-kisa: 200ms;
  --ease: ease-in-out;
  --odak-halka: 0 0 0 3px rgba(224, 138, 95, 0.45);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin:   #1A1E2B;
    --yuzey:   #242A3A;
    --yuzey2:  #2C3346;
    --metin:   #EDE7DA;
    --sonuk:   #ADA8C4;
    --kenar:   #3A4258;
    --safak:   #F0A06B;
    --gol:     #86BDB7;
    --aksam:   #B3A6D0;
    --baglanti:#F0A06B;
    --golge-kart: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 20px rgba(0, 0, 0, 0.3);
    --odak-halka: 0 0 0 3px rgba(240, 160, 107, 0.5);
  }
}

/* ============================== TEMEL ============================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sabit üst şerit yüzünden #çapa hedefleri başlığın altında kalmasın. */
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: var(--fs-3);
  line-height: 1.65;
  /* Mobilde yatay taşmaya karşı son savunma hattı. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  overflow-wrap: break-word;
}
p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }

a { color: var(--baglanti); }
a:hover { color: var(--metin); }

:focus-visible {
  outline: none;
  box-shadow: var(--odak-halka);
  border-radius: var(--radius-kucuk);
}

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--metin); color: var(--zemin);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-kucuk); text-decoration: none;
}
.atla:focus { left: var(--sp-md); top: var(--sp-md); }

.kapsayici {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}
.kapsayici-dar { max-width: 760px; }

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

/* ============================= BUTONLAR ============================= */
.btn {
  font-family: var(--font-govde);
  font-weight: 600;
  font-size: var(--fs-2);
  min-height: 44px;
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-orta);
  border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--sure-kisa) var(--ease), background var(--sure-kisa) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Not: birincil butonda KOYU metin kullanılır. Beyaz metin --safak
   zemininde ~2.6:1 kalır; koyu metinle ~5.7:1 elde edilir. */
.btn-birincil { background: var(--safak); color: #2A2621; }
.btn-birincil:hover { background: #D67C4E; color: #2A2621; }

.btn-ikincil { background: var(--yuzey); color: var(--metin); border-color: var(--kenar); }
.btn-ikincil:hover { background: var(--yuzey2); color: var(--metin); }

.btn-sade { background: transparent; color: var(--metin); border-color: transparent; }
.btn-sade:hover { background: var(--yuzey2); color: var(--metin); }

.btn-buyuk { font-size: var(--fs-3); padding: var(--sp-md) var(--sp-xl); }

@media (prefers-color-scheme: dark) {
  .btn-birincil, .btn-birincil:hover { color: #1A1E2B; }
  .btn-birincil:hover { background: #E8935C; }
}

/* ========================= ÜST ŞERİT / NAV ========================= */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: var(--zemin);
  border-bottom: 1px solid var(--kenar);
}
.ust-ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md);
  padding-top: var(--sp-md); padding-bottom: var(--sp-md);
  flex-wrap: wrap;
}

.marka {
  display: inline-flex; align-items: baseline; gap: var(--sp-sm);
  font-family: var(--font-baslik);
  font-size: var(--fs-4);
  color: var(--metin);
  text-decoration: none;
  white-space: nowrap;
}
.marka-ad  { font-weight: 600; letter-spacing: -0.01em; }
.marka-alt {
  font-family: var(--font-govde);
  font-size: var(--fs-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sonuk);
}

.ust-nav { display: flex; align-items: center; gap: var(--sp-xl); flex-wrap: wrap; }
.nav-linkler { display: flex; gap: var(--sp-lg); flex-wrap: wrap; }
.nav-linkler a {
  color: var(--metin); text-decoration: none;
  font-size: var(--fs-2); font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav-linkler a:hover { color: var(--baglanti); }
.nav-eylemler { display: flex; gap: var(--sp-sm); align-items: center; flex-wrap: wrap; }

/* Menü düğmesi YOK: JavaScript kapalıyken de tam gezinme kalsın diye
   bağlantılar dar ekranda gizlenmez, alt satıra sarar.
   BUNUN BEDELİ ÖLÇÜLDÜ: 375px'te şerit dört satıra çıkıyor (~200px) ve
   `sticky` kalırsa ekranın dörtte birini kalıcı yiyor. Çözüm bağlantıyı
   gizlemek değil, dar ekranda şeridi AKIŞA sokmak: gezinme tam kalır,
   yalnız sayfayla birlikte yukarı kayar. */
@media (max-width: 860px) {
  .ust { position: static; }
  .ust-ic { justify-content: center; row-gap: var(--sp-xs); padding-bottom: var(--sp-sm); }
  .ust-nav { width: 100%; justify-content: center; gap: var(--sp-sm); }
  .nav-linkler { justify-content: center; gap: var(--sp-md); }
  /* Şerit artık sabit değil; çapa hedefinin altına pay bırakmaya gerek yok. */
  html { scroll-padding-top: var(--sp-md); }
}

/* ================================ HERO ================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-3xl) 0 var(--sp-2xl);
  background: linear-gradient(180deg, var(--yuzey2) 0%, var(--zemin) 78%);
  border-bottom: 1px solid var(--kenar);
}
.hero-ic { position: relative; z-index: 1; max-width: 760px; }

/* Soyut geometrik desen — marka görseli değil, yalnız zemin dokusu. */
.hero-desen {
  position: absolute;
  top: 50%; right: -140px;
  width: 480px; height: 480px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--safak);
  stroke-width: 1;
  opacity: 0.28;
  pointer-events: none;
}
@media (max-width: 1024px) { .hero-desen { right: -240px; opacity: 0.18; } }
@media (max-width: 700px)  { .hero-desen { display: none; } }

.goz-ustu {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-size: var(--fs-1); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sonuk);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 999px;
  padding: var(--sp-xs) var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--safak); flex-shrink: 0; }

.hero h1 {
  font-size: var(--fs-7);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-lg);
  max-width: 16ch;
}
.hero-metin { font-size: var(--fs-4); color: var(--sonuk); max-width: 58ch; }

.hero-eylemler {
  display: flex; flex-wrap: wrap; gap: var(--sp-md);
  margin-top: var(--sp-xl);
}
.hero-not {
  margin-top: var(--sp-md);
  font-size: var(--fs-2);
  color: var(--sonuk);
  max-width: 52ch;
}

.sayilar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2xl);
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--kenar);
}
.sayi dt {
  font-size: var(--fs-1); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sonuk); font-weight: 600;
}
.sayi dd {
  margin: 0;
  font-family: var(--font-baslik);
  font-size: var(--fs-6);
  font-weight: 600;
  line-height: 1.1;
}

@media (max-width: 700px) {
  .hero { padding: var(--sp-2xl) 0; }
  .hero h1 { font-size: var(--fs-6); max-width: none; }
  .hero-metin { font-size: var(--fs-3); }
  .sayilar { gap: var(--sp-xl); }
  .sayi dd { font-size: var(--fs-5); }
  .hero-eylemler .btn { flex: 1 1 100%; }
}

/* ============================== BÖLÜMLER ============================== */
.bolum { padding: var(--sp-3xl) 0; }
.bolum-alt { background: var(--yuzey2); border-block: 1px solid var(--kenar); }

.bolum-etiket {
  font-size: var(--fs-1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sonuk);
  margin-bottom: var(--sp-sm);
}
.bolum h2 {
  font-size: var(--fs-6);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-md);
  max-width: 22ch;
}
.bolum-giris { color: var(--sonuk); max-width: 62ch; margin-bottom: var(--sp-2xl); }
.bolum-eylem { margin-top: var(--sp-xl); }

@media (max-width: 700px) {
  .bolum { padding: var(--sp-2xl) 0; }
  .bolum h2 { font-size: var(--fs-5); max-width: none; }
}

/* ============================== ADIMLAR ============================== */
.adimlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-lg);
  counter-reset: adim;
}
.adim {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--radius-buyuk);
  box-shadow: var(--golge-kart);
  padding: var(--sp-lg);
  min-width: 0;
}
.adim-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--yuzey2);
  border: 1px solid var(--kenar);
  font-family: var(--font-baslik);
  font-size: var(--fs-2); font-weight: 600;
  color: var(--sonuk);
  margin-bottom: var(--sp-md);
}
.adim h3 { font-size: var(--fs-4); margin-bottom: var(--sp-sm); }
.adim p  { font-size: var(--fs-2); color: var(--sonuk); }

.vurgu-kutu {
  margin-top: var(--sp-xl);
  padding: var(--sp-lg);
  border-left: 3px solid var(--safak);
  background: var(--yuzey);
  border-radius: 0 var(--radius-orta) var(--radius-orta) 0;
  font-size: var(--fs-3);
  max-width: 68ch;
}

/* =============================== KARTLAR =============================== */
.kartlar { display: grid; gap: var(--sp-lg); }
.kartlar-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--radius-buyuk);
  box-shadow: var(--golge-kart);
  padding: var(--sp-lg);
  min-width: 0;
}
.kart h3 { font-size: var(--fs-4); margin: var(--sp-sm) 0; }
.kart h4 { font-size: var(--fs-4); margin-bottom: var(--sp-sm); }
.kart p  { font-size: var(--fs-2); color: var(--sonuk); }
.kart-genis { max-width: 720px; }

.rozet {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px var(--sp-sm);
  border-radius: var(--radius-kucuk);
  border: 1px solid var(--kenar);
}
/* Anlam yalnız renge dayanmaz: rozet metni durumu ayrıca yazar. */
.rozet-acik   { background: rgba(74, 117, 113, 0.14); color: var(--gol);   border-color: var(--gol); }
.rozet-kapali { background: var(--yuzey2);            color: var(--sonuk); }

/* ================================ RAF ================================ */
.raf { margin-bottom: var(--sp-2xl); }
.raf-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-md); flex-wrap: wrap;
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--kenar);
}
.raf-ust h3 { font-size: var(--fs-5); }
.raf-meta { font-size: var(--fs-2); color: var(--sonuk); }
.raf-giris { color: var(--sonuk); font-size: var(--fs-2); margin-bottom: var(--sp-lg); max-width: 62ch; }

.bolum-listesi {
  list-style: decimal inside;
  margin: var(--sp-md) 0 var(--sp-lg);
  font-size: var(--fs-2);
  color: var(--metin);
}
.bolum-listesi li { padding: var(--sp-2xs) 0; }

.ders-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-sm);
}
.ders-listesi a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md);
  min-height: 52px;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--radius-orta);
  color: var(--metin);
  text-decoration: none;
  font-size: var(--fs-2);
  font-weight: 500;
  transition: border-color var(--sure-kisa) var(--ease), background var(--sure-kisa) var(--ease);
}
.ders-listesi a:hover { border-color: var(--safak); background: var(--yuzey2); }
.ders-sayi {
  color: var(--sonuk);
  font-size: var(--fs-1);
  white-space: nowrap;
  font-weight: 600;
}

/* ================================ İKİLİ ================================ */
.ikili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-2xl);
}
.ikili-sutun { min-width: 0; }
.ikili-baslik {
  font-size: var(--fs-4);
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-lg);
  border-bottom: 2px solid var(--safak);
}
/* "Hazırlıkta olan" sütunu görsel olarak da geri planda durmalı: iki
   sütun aynı vurguyla çizilirse okuyucu ikisini de "var" diye okur.
   Modifier HTML'de verilir — kardeş seçici (.olcut-gelecek ~ .ikili-baslik)
   listeyi başlığın ALTINDA aradığı için çalışmıyordu (ölçüldü). */
.ikili-baslik-sonuk { border-bottom-color: var(--kenar); color: var(--sonuk); }

.olcut-listesi { display: grid; gap: var(--sp-md); }
.olcut-listesi li {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--radius-orta);
  padding: var(--sp-md);
  font-size: var(--fs-2);
  color: var(--sonuk);
}
.olcut-listesi strong { display: block; color: var(--metin); margin-bottom: var(--sp-2xs); }
.olcut-gelecek li { border-style: dashed; background: transparent; }

/* ================================= SSS ================================= */
.sss-liste { display: grid; gap: var(--sp-sm); }
.sss-liste details {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--radius-orta);
}
.sss-liste summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-md);
  min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  font-weight: 600;
  font-size: var(--fs-3);
}
.sss-liste summary::-webkit-details-marker { display: none; }
.sss-liste summary::after {
  content: "+";
  font-family: var(--font-baslik);
  font-size: var(--fs-4);
  line-height: 1;
  color: var(--sonuk);
  flex-shrink: 0;
}
.sss-liste details[open] summary::after { content: "\2212"; }
.sss-liste details[open] summary { border-bottom: 1px solid var(--kenar); }
.sss-liste details p {
  padding: var(--sp-md);
  color: var(--sonuk);
  font-size: var(--fs-2);
  max-width: 68ch;
}

/* =============================== KAPANIŞ =============================== */
.kapanis {
  padding: var(--sp-3xl) 0;
  background: var(--yuzey2);
  border-top: 1px solid var(--kenar);
}
.kapanis-ic { text-align: center; }
.kapanis h2 { font-size: var(--fs-6); margin-bottom: var(--sp-md); letter-spacing: -0.015em; }
.kapanis p  { color: var(--sonuk); max-width: 52ch; margin: 0 auto; }
.kapanis .hero-eylemler { justify-content: center; }

@media (max-width: 700px) {
  .kapanis h2 { font-size: var(--fs-5); }
}

/* ============================== ALT BİLGİ ============================== */
.alt {
  border-top: 1px solid var(--kenar);
  padding: var(--sp-2xl) 0 var(--sp-xl);
  background: var(--zemin);
}
.alt-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}
@media (max-width: 760px) { .alt-grid { grid-template-columns: 1fr; gap: var(--sp-lg); } }

.marka-alt-bilgi { margin-bottom: var(--sp-sm); }
.alt-metin { color: var(--sonuk); font-size: var(--fs-2); max-width: 46ch; }
.alt-baslik {
  font-size: var(--fs-1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--sonuk); margin-bottom: var(--sp-md);
}
.alt-linkler a {
  display: inline-flex; align-items: center;
  min-height: 40px;
  color: var(--sonuk);
  text-decoration: none;
  font-size: var(--fs-2);
  overflow-wrap: anywhere;
}
.alt-linkler a:hover { color: var(--baglanti); text-decoration: underline; }

.alt-son {
  border-top: 1px solid var(--kenar);
  padding-top: var(--sp-lg);
  color: var(--sonuk);
  font-size: var(--fs-1);
}

/* ====================== DAR EKRAN KAPSAYICI PAYI ====================== */
@media (max-width: 1024px) { .kapsayici { padding: 0 var(--sp-lg); } }
@media (max-width: 700px)  { .kapsayici { padding: 0 var(--sp-md); } }