/* ==========================================================================
   AuroraSky — akış (motion) katmanı

   Sayfanın "akıcı" hissetmesini sağlayan üç şey:
     1. .reveal        — kaydırdıkça bölümlerin belirmesi
     2. aurora şerit   — hero arkasında yavaşça kayan renk
     3. mikro geçişler — kart ve düğmelerde yumuşak tepki

   ESİNLENME NOTU (bkz. brain/ic/esinlenme.md): hareketin işi dikkat
   çekmek değil, okuma sırasını göstermek. Her şey aynı anda oynarsa
   hiçbiri bir şey söylemez — bu yüzden geciktirme (stagger) var ve
   süreler kısa (0,5-0,7 sn).

   KISIT: prefers-reduced-motion açıkken bu dosyadaki TÜM hareket iptal.
   İçerik her koşulda görünür — .reveal'in başlangıcı opacity:0 olduğu
   için, JS çalışmazsa index.html'deki <noscript> bloğu onu 1'e çeker.
   ========================================================================== */

/* ==========================================================================
   HAREKET SÖZLÜĞÜ — tek yerde tanımlı eğri ve süre kümesi

   ESİNLENME (brain/ic/esinlenme.md, 6 Eki 2026): Özkan Lemon Squeezy'nin
   geçiş rahatlığını istedi. Oradan ALINAN KARAR şu: sitenin hareketi
   serbest değil, SAYILI bir sözlüktür — birkaç eğri, birkaç süre, her
   öğe aynı kümeden seçer. Göze "akıcı" gelen şey hareketin miktarı
   değil, farklı öğelerin aynı fizik yasasına uyması.
   Kopyalanan şey YOK: ne renkleri, ne mesafeleri, ne de bileşenleri.

   Süre kademesi — bir etkileşim hangi kademede olduğuna göre süre alır:
     fast  (150ms) dokunma tepkisi: düğme, bağlantı, odak
     std   (240ms) yüzey tepkisi: kart kalkması, gölge, kenarlık
     slow  (340ms) içerik girişi: bölüm belirmesi, akordeon açılması
     cine  (560ms) tek seferlik sahne: açılış sonrası hero oturması

   ⚠ Bu değerler gelişigüzel değil: 150 ms altındaki tepki "anında"
   hissedilir ve geçiş fark edilmez; 400 ms üstü içerik girişi beklemeye
   dönüşür. Kademe atlamak (düğmeye 340 ms vermek) sitenin ağır
   hissettirmesinin birinci sebebidir.

   KISIT: prefers-reduced-motion açıkken bu dosyadaki TÜM hareket iptal.
   ========================================================================== */

:root {
  /* Çoğu durum değişimi. İvmelenip yavaşlar — nötr, dikkat çekmez. */
  --ease-std:  cubic-bezier(.4, 0, .2, 1);
  /* Giriş hareketleri. Hızlı başlar, uzun yavaşlar — "yerine oturdu"
     hissini veren eğri budur; bölüm belirmelerinde kullanılıyor. */
  --ease-emp:  cubic-bezier(.2, 0, 0, 1);
  /* Geri dönüşü olmayan çıkışlar (sönme). */
  --ease-exit: cubic-bezier(.4, 0, 1, 1);

  --d-fast: 150ms;
  --d-std:  240ms;
  --d-slow: 340ms;
  --d-cine: 560ms;
}

/* ------------------------------------------------------- beliren bölümler */

.reveal {
  opacity: 0;
  /* 12px: fark edilir ama sayfayı zıplatmaz. Eskiden 14px + .5s idi;
     mesafe büyüdükçe göz hareketi "animasyon" olarak okuyor, kısa
     mesafe + uzun eğri ise içeriğin yerine oturması gibi okunuyor. */
  transform: translateY(12px);
  transition:
    opacity var(--d-slow) var(--ease-emp),
    transform var(--d-slow) var(--ease-emp);
  /* ⚠ BURADA `will-change: opacity, transform` VARDI — KALDIRILDI.
     Yorumu "yalnızca bekleyen öğede" diyordu ama sayfa açılırken BÜTÜN
     .reveal öğeleri bekliyor: ~60 öğe, hepsi ayrı GPU katmanı. Kaydırma
     sırasındaki takılmanın birinci sebebi buydu. opacity/transform
     geçişleri zaten compositor'da çalışır; tarayıcı geçiş başladığı anda
     katmanı kendisi yükseltir, önceden rezerve etmek net zarar. */
}

.reveal.is-gorundu {
  opacity: 1;
  transform: none;
}

/* Sıralı geciktirme: aynı grubun öğeleri peş peşe belirir, hep birlikte
   değil. 60 ms — göz sırayı fark eder ama son kart beklemeye geçmez.
   Altı kademe var: dört kart + başlık + lead aynı grupta olabiliyor. */
.reveal--d1 { transition-delay: .06s; }
.reveal--d2 { transition-delay: .12s; }
.reveal--d3 { transition-delay: .18s; }
.reveal--d4 { transition-delay: .24s; }
.reveal--d5 { transition-delay: .30s; }
.reveal--d6 { transition-delay: .36s; }

/* ------------------------------------------------------------ aurora şerit */

/* Hero'nun arkasında çok yavaş kayan yeşil ışık. Kara delik açılışının
   devamı gibi dursun diye logonun tonlarından. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  left: -20%;
  width: 90%;
  height: 170%;
  background:
    radial-gradient(45% 50% at 50% 50%, rgba(53, 201, 142, .17) 0%, transparent 70%),
    radial-gradient(40% 45% at 65% 40%, rgba(11, 58, 107, .10) 0%, transparent 70%);
  /* ⚠ `filter: blur(14px)` KALDIRILDI. Animasyonlu bir öğeye blur vermek,
     her karede büyük bir yüzeyin yeniden boyanması demek — kaydırma
     takılmasının ikinci sebebi. Radyal gradient kenarları zaten
     sönümlendiği için gözle fark edilen bir yumuşaklık kaybı yok. */
  animation: aurora-kay 22s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -25%;
  bottom: -50%;
  width: 80%;
  height: 160%;
  background: radial-gradient(45% 50% at 50% 50%, rgba(31, 157, 107, .13) 0%, transparent 72%);
  animation: aurora-kay 28s ease-in-out infinite alternate-reverse;
  will-change: transform;
  pointer-events: none;
}

@keyframes aurora-kay {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 4%, 0) scale(1.14); }
}

/* --------------------------------------------------------- mikro geçişler */

/* Kartlar: üzerine gelindiğinde hafifçe kalkar. 1-2 px yeter; daha fazlası
   sayfayı oyuncak gibi gösterir.

   Hepsi aynı kademede (std): bir yüzey tepkisi başka bir yüzey
   tepkisinden farklı hızda olursa sayfa tutarsız hissettirir. */
.step,
.card,
.module,
.pricecard,
.faq__item,
.faq,
.neden__kart,
.durust__blok,
.stat,
.flow__step {
  transition:
    transform var(--d-std) var(--ease-std),
    box-shadow var(--d-std) var(--ease-std),
    border-color var(--d-std) var(--ease-std),
    background-color var(--d-std) var(--ease-std);
}

.step:hover,
.card:hover,
.module:hover,
.pricecard:hover,
.neden__kart:hover {
  transform: translateY(-3px);
}

/* Düğme: dokunma kademesi. Renk ve kalkma aynı sürede olmalı, yoksa
   düğme "iki kere" tepki vermiş gibi görünür. */
.btn {
  transition:
    transform var(--d-fast) var(--ease-std),
    box-shadow var(--d-fast) var(--ease-std),
    background-color var(--d-fast) var(--ease-std),
    color var(--d-fast) var(--ease-std),
    border-color var(--d-fast) var(--ease-std);
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Bağlantılar ve menü: yalnız renk, aynı dokunma kademesi. Menüde
   kalkma hareketi YOK — satırlar birbirine yakın, zıplama okunur. */
.nav a,
.topbar a,
.footer a,
.faq summary,
.serit__oge {
  transition: color var(--d-fast) var(--ease-std);
}

/* Header'ın yapışması: gölge ve kenarlık yüzey kademesinde gelir.
   `backdrop-filter` YOK — sayfa boyunca duran bir öğeye bulanıklık
   vermek her karede boyama demek (bkz. akıcılık nöbetçisi). */
.header {
  transition:
    box-shadow var(--d-std) var(--ease-std),
    border-color var(--d-std) var(--ease-std);
}

/* SSS akordeonu: açılan paragraf belirerek gelir. Yüksekliği
   ANİMASYONLAMIYORUZ (layout) — yalnız içerik opacity + translate.
   Kapanış animasyonsuz: <details> içeriği anında kaldırıyor ve çıkış
   animasyonu zaten görülmüyor. */
.faq[open] > p,
.faq[open] > div {
  animation: akordeon-ac var(--d-slow) var(--ease-emp) both;
}

@keyframes akordeon-ac {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------- açılış sonrası hero girişi

   ⚠ GÖRÜNÜRLÜK RİSKİ YOK — opacity'ye hiç dokunmuyor, `animation` da
   kullanmıyor. 3 Eki 2026'da hero `opacity: 0` + `animation … backwards`
   ile başlatılmış ve mobilde sayfanın ilk ekranı BOMBOŞ kalmıştı.
   Burada iki şey birlikte o riski kapatıyor:

     1. Yalnız `translateY` — animasyon/geçiş hiç uygulanmazsa öğe tam
        görünür, sadece 10px aşağıda durur. Okunabilirlik etkilenmez.
     2. `animation` DEĞİL `transition` — `backwards`/`both` dolgu kipi
        hiç devreye girmiyor, yani "başlangıç karesi ekranda kaldı"
        sınıfı hata burada yapısal olarak imkânsız.

   Tetikleyici `html.intro-gecti`: açılış katmanı kalkmadan hareket
   başlamaz, yoksa giriş örtünün arkasında harcanır. Sınıfı intro.js
   her yolda koyuyor (süre sonu, atlama, hareket azaltma, emniyet
   freni) — gelmezse öğeler 10px kaymış ama okunur kalır. */
.hero__text > *,
.hero__visual {
  transform: translateY(10px);
  transition: transform var(--d-cine) var(--ease-emp);
}

html.intro-gecti .hero__text > *,
html.intro-gecti .hero__visual {
  transform: none;
}

/* Sıralı giriş: başlık önce, kart en son. Gecikme GEÇİŞTE, animasyonda
   değil — bekleme süresince öğe başlangıç konumunda durur ve zıplama
   olmaz (animation-delay ile olurdu). */
.hero__text > :nth-child(2) { transition-delay: .05s; }
.hero__text > :nth-child(3) { transition-delay: .10s; }
.hero__text > :nth-child(4) { transition-delay: .15s; }
.hero__text > :nth-child(5) { transition-delay: .20s; }
.hero__visual               { transition-delay: .12s; }

/* Odak halkası: klavyeyle gezen için her yerde aynı ve görünür.
   Hareketle ilgisi yok ama buraya ait — geçiş eklediğimiz her öğenin
   klavyede de karşılığı olmalı. */
.btn:focus-visible,
.nav a:focus-visible,
.footer a:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------- okuma çizgisi */

/* Sayfanın ne kadarının okunduğunu gösteren ince şerit. Header'ın altına
   yapışır; scroll olayı yerine CSS'in kendi animation-timeline'ı ile
   çalışır, desteklenmeyen tarayıcıda hiç görünmez (zararsız).

   ⚠ TAKILMA (3 Eki 2026, Özkan: "üstteki yeşil yüklenme yeri bazen
   takılma yaşatıyor"). İki sebep vardı, ikisi de düzeltildi:

   1. Çizgi `document.body`'ye intro HENÜZ EKRANDAYKEN ekleniyordu. O
      sırada `html.intro-acik { overflow: hidden }` yüzünden kök öğenin
      kaydırılacak alanı YOK, yani `scroll(root block)` timeline'ı sıfır
      uzunlukta bağlanıyor. Intro kalkıp overflow serbest kalınca timeline
      yeniden ölçülüyor ve çizgi bir anda yerine ZIPLIYOR. Çözüm: çizgiyi
      intro bittikten sonra ekle (akis.js, `intro-gecti` beklenir).
   2. `will-change` yoktu → çizgi kendi compositor katmanında değildi,
      scaleX her karede ana iş parçacığında boyanıyordu. Burada
      `will-change` MEŞRU: tek bir öğe, ömrü boyunca sürekli animasyonlu.
      (`.reveal`'de meşru değildi — orada 60 öğe birden bekliyordu.) */
.ilerleme {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--c-accent-deep), var(--c-accent));
  z-index: 60;
  pointer-events: none;
  will-change: transform;
  contain: strict;
}

@supports (animation-timeline: scroll()) {
  .ilerleme {
    animation: ilerleme-doldur linear;
    animation-timeline: scroll(root block);
    /* Aralığı açıkça yaz: varsayılan bırakılınca tarayıcı sürümüne göre
       farklı yorumlanıp sonda ya erken doluyor ya hiç dolmuyordu. */
    animation-range: 0% 100%;
  }
}

@keyframes ilerleme-doldur {
  to { transform: scaleX(1); }
}

/* ------------------------------------------------- açılış sonrası hero */

/* ⚠ BURADA BİR KEZ `opacity: 0` İLE BAŞLAYAN HERO ANİMASYONU VARDI VE
   MOBİLDE HERO'YU TAMAMEN BOŞ BIRAKTI (3 Eki 2026, Özkan telefonda gördü).

   Mekanizma: `animation: hero-otur … backwards` + gecikme. `backwards`
   dolgu kipi, animasyon başlamadan/bitmeden önce BAŞLANGIÇ karesini
   uygular — o kare `opacity: 0` idi. Masaüstünde animasyon tamamlanıp
   öğe normale dönüyordu; mobilde dönmedi ve sayfanın ilk ekranı bomboş
   kaldı. Ölçülen: hero yüksekliği 1640px, içindeki her öğe opacity 0.

   DERS: sayfanın İLK EKRANI asla `opacity: 0` ile başlamaz. Aşağıdaki
   bölümlerde `.reveal` kullanılabilir, çünkü orada geri getirecek bir
   güvence var (JS gözlemcisi + 6 sn emniyet zamanlayıcısı + <noscript>).
   Hero'da öyle bir güvence yoktu.

   Açılışın devamlılığı artık kara deliğin kendi hareketiyle sağlanıyor;
   hero, katman kalkar kalkmaz olduğu gibi duruyor.
   Nöbetçi: src/site/hareket.site.test.ts */

/* ------------------------------------------------- hareket azaltma talebi */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero::before,
  .hero::after {
    animation: none;
  }

  /* Hero girişi ve akordeon: hareket yok, içerik olduğu gibi durur.
     İkisi de yalnız süs — iptal edilince hiçbir şey kaybolmuyor. */
  .hero__text > *,
  .hero__visual,
  .faq[open] > p,
  .faq[open] > div {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }

  .step:hover,
  .card:hover,
  .module:hover,
  .pricecard:hover,
  .neden__kart:hover,
  .btn:hover,
  .btn:active {
    transform: none;
  }

  .ilerleme { display: none; }

  html { scroll-behavior: auto; }
}


/* ==========================================================================
   RENK GEÇİŞLERİ — marka paleti: siyah · lacivert · yeşil · beyaz

   Amaç: sayfa kaydırıldıkça zemin aydınlıktan derinliğe geçsin, ziyaretçi
   nerede olduğunu renkten de okusun. Göz yormaması için üç kural:

   1. Geçiş KADEMELİ — iki koyu bölüm arasına açık bir bölüm girer, ekran
      hiç tek blok koyu kalmaz.
   2. Koyu zeminde gövde metni beyaz DEĞİL, hafif kırılmış beyaz (#eaf3ef);
      saf beyaz koyu zeminde parlayıp okumayı yorar.
   3. Yeşil yalnızca VURGU — başlık, çizgi, rozet. Geniş alan yeşile
      boyanmaz; marka rengi bol kullanılınca ucuzlar.
   ========================================================================== */

.section--koyu {
  position: relative;
  isolation: isolate;
  /* Lacivert → siyah: iki marka rengi arasında yumuşak derinlik.
     Üst kenardaki ince yeşil ışık ARTIK BURADA (eskiden ::before'daydı):
     ::before perde olarak kullanıldığı için background'a taşındı. */
  background:
    linear-gradient(90deg,
      transparent, rgba(53, 201, 142, .75) 50%, transparent) top / 100% 1px no-repeat,
    linear-gradient(170deg, #0b3a6b 0%, #082742 44%, #05121f 100%);
  color: var(--c-on-dark);
  overflow: hidden;
}

/* ------------------------------------------------- renk perdesi (scroll)

   Özkan, 3 Eki 2026: "Sitedeki farklı renk yerleri ben kaydırdığımda
   animasyonlu olarak gelsin, kalıcı olarak orada duruyor olmasın."

   Koyu bölümün zemini artık kaydırma konumuna bağlı: bölüm ekrana
   girerken renk açılır, ekrandan çıkarken geri çekilir. Üstüne konan
   AÇIK bir perdenin opaklığıyla yapılıyor.

   Üç tasarım kararı:

   1. ⚠ FAIL-SAFE YÖN. Perde `opacity: 0` ile başlar, yani animasyon hiç
      çalışmazsa (eski tarayıcı, hareket azaltma, scroll-timeline yok)
      bölüm DOĞRUDAN KOYU görünür — metin her koşulda okunur. Tersini
      yazmak (zemin açık, animasyon koyulaştırıyor) desteklenmeyen
      tarayıcıda beyaz zeminde beyaz metin bırakırdı. Aynı kural:
      bir öğe animasyonu hiç çalışmasa bile doğru görünmeli.

   2. TEK animasyon, `cover` aralığı. Giriş ve çıkış için iki ayrı
      animasyon yazmak işe YARAMAZ: ikisi de `opacity` yazdığı için
      sonraki olanı `both` dolgusuyla diğerini tamamen ezer. Keyframe'in
      kendi içinde hem açılış hem kapanış var.

   3. Perde %25'te tamamen açılır: bölüm metni okunur hale gelmeden
      zemin tam koyu olsun. `.reveal` de aynı anda çalıştığı için metin
      zaten o sırada beliriyor — ikisi üst üste oturuyor. */
.section--koyu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-bg);
  opacity: 0;
  pointer-events: none;
}

/* ⚠ `animation-timeline: view()` PSEUDO-ELEMENT'TE ÇALIŞMAZ — ve sessizce
   başarısız olur. Ölçüldü (3 Eki 2026, Chrome 154): animasyon bağlanıyor,
   `getAnimations()` onu `ViewTimeline` ile listeliyor, ama `progress`
   kaydırmadan BAĞIMSIZ olarak sabit 0.5'te duruyor — yani perde hiç
   hareket etmiyor. Hata yok, konsol temiz, `@supports (animation-timeline:
   view())` da TRUE dönüyor. Destek sorgusu özelliğin TANINDIĞINI söyler,
   bu bağlamda İŞLEDİĞİNİ söylemez — ölçüm aracının kendi hakkında doğru,
   konusu hakkında yanlış olmasının CSS'teki hali.

   Sebep: anonim `view()`, timeline'ın öznesi olarak animasyonun kendi
   öğesini alır; burada o öğe `::before`. Bir pseudo-element'in görüş
   penceresi hesaplanamıyor.

   Çözüm: timeline ADLANDIRILIR ve GERÇEK bölümde tanımlanır; `::before`
   bir alt öğe olarak o ismi görür. Ölçülen ilerleme bu haliyle 0.000 →
   1.000 arasında doğrusal akıyor (opacity 1 → 0 → 0.92). */
@supports (animation-timeline: --koyugorus) {
  .section--koyu {
    view-timeline-name: --koyugorus;
    view-timeline-axis: block;
  }

  .section--koyu::before {
    animation: koyu-perde linear both;
    animation-timeline: --koyugorus;
    animation-range: cover 0% cover 100%;
  }
}

@keyframes koyu-perde {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  78%  { opacity: 0; }
  100% { opacity: .92; }
}

/* Çok yavaş kayan yeşil aura — kara delik açılışının sayfa içindeki yankısı.
   `filter: blur(26px)` KALDIRILDI: sonsuz animasyonlu bir öğeye blur
   vermek, sayfanın ömrü boyunca her karede büyük bir yüzeyi yeniden
   boyamak demek. Gradient'in kendi kenarı zaten sönümlü. */
.section--koyu::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -15%;
  width: 70%;
  height: 160%;
  background: radial-gradient(45% 50% at 50% 50%,
    rgba(53, 201, 142, .16) 0%, transparent 70%);
  animation: aurora-kay 26s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

.section--koyu h2 { color: #ffffff; }

.section--koyu .section__lead,
.section--koyu > .wrap > p {
  color: #cfe3f5;
}

/* Koyu zeminde kartlar: cam etkisi. Beyaz kart koymak zemini keser,
   yarı saydam kart derinliği korur. */
.section--koyu .neden__kart,
.section--koyu .durust__blok {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(207, 227, 245, .18);
  box-shadow: none;
  backdrop-filter: blur(2px);
}

.section--koyu .neden__kart h3,
.section--koyu .durust__blok h3 { color: #ffffff; }

.section--koyu .neden__kart p,
.section--koyu .durust__blok li { color: #c3d8ec; }

.section--koyu .neden__engel { color: #8fb3d4; }

.section--koyu .neden__cevap {
  border-top-color: rgba(207, 227, 245, .2);
  color: #eaf3ef !important;
}

.section--koyu .neden__cevap strong,
.section--koyu .durust__blok:first-child li::marker { color: #4fd9a4; }

.section--koyu .durust__blok:first-child {
  background: rgba(53, 201, 142, .10);
  border-color: rgba(53, 201, 142, .42);
}

.section--koyu .neden__dip,
.section--koyu .durust__kapanis {
  color: #a9c6e0;
  border-top-color: rgba(207, 227, 245, .16);
}

.section--koyu strong { color: #ffffff; }

/* Koyu bölümden sonra gelen açık bölümün tepesine yumuşak bir gölge:
   iki zemin arasındaki sınır keskin bir kesikle bitmesin. */
.section--gecis {
  background:
    linear-gradient(180deg, rgba(5, 18, 31, .07) 0%, transparent 120px),
    var(--c-bg);
}

@media (prefers-reduced-motion: reduce) {
  .section--koyu::after { animation: none; }
  /* Renk perdesi de durur: zemin sabit koyu kalır (fail-safe yön). */
  .section--koyu::before { animation: none; opacity: 0; }
}


/* Güvenlik bölümü koyu zemine alınınca kendi açık-zemin kuralları kaldı:
   madde listesi koyu metinle okunmaz oldu, yan kart ve sertifikasyon
   kutusu beyaz kaldı (3 Eki 2026, ekran görüntüsünde görüldü).
   Koyu bölümdeki HER yüzeyin karşılığı burada tanımlanır. */
.section--koyu li,
.section--koyu p,
.section--koyu dd,
.section--koyu span { color: #cfe3f5; }

.section--koyu .seclist li,
.section--koyu ul li { color: #dce9f6; }

/* Beyaz kalan kutular cam yüzeye çevriliyor. */
.section--koyu .secbox,
.section--koyu .card,
.section--koyu .panel,
.section--koyu .note,
.section--koyu aside,
.section--koyu .infocard {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(207, 227, 245, .2) !important;
  box-shadow: none !important;
  color: #dce9f6 !important;
}

.section--koyu .secbox h3,
.section--koyu .card h3,
.section--koyu aside h3,
.section--koyu aside strong { color: #ffffff !important; }

.section--koyu a { color: #7fe3bb; }
.section--koyu a:hover { color: #a9f0d3; }

/* Onay işaretli madde listesi: işaret yeşil, metin açık. */
.section--koyu li::marker { color: #4fd9a4; }


/* Kalan iki kusur (ölçüldü, 3 Eki 2026):
   1. Yan karttaki alt başlıklar (Altyapı/Şirket/İletişim) koyu zeminde
      koyu kalmıştı — hiç görünmüyordu.
   2. "Sertifikasyon durumu" kutusu beyaz zeminini korumuştu; sınıf adını
      varsaymak yerine koyu bölümdeki TÜM açık zeminleri hedefliyoruz. */
.section--koyu h3,
.section--koyu h4,
.section--koyu dt,
.section--koyu .secbox strong:first-child { color: #ffffff !important; }

/* Koyu bölümde beyaz/açık zemin bırakma: ne sınıfla gelirse gelsin. */
.section--koyu div[class],
.section--koyu section[class] {
  background-color: transparent;
}

.section--koyu .secbox,
.section--koyu [class*="box"],
.section--koyu [class*="kutu"],
.section--koyu [class*="not"] {
  background: rgba(255, 255, 255, .06) !important;
  color: #dce9f6 !important;
}

/* Vurgu şeridi olan bilgi kutusu: yeşil kenar korunur, zemin camlaşır. */
.section--koyu [class*="box"] strong,
.section--koyu [class*="kutu"] strong { color: #7fe3bb !important; }