/* “Ne oldu” sayfasının bileşenleri — anlatı, şerit, basamaklar, simgeler.

   Yalnızca bu sayfaya yükleniyor (fk/base.html içindeki `ek_stil` bloğu).
   Diğer sayfalar bu dosyanın bir baytını bile indirmiyor: siteye kriz
   içinde, eski bir telefondan, zayıf bağlantıyla girileceğini varsayıyoruz.

   HAREKET POLİTİKASI — üç kademe, hepsi aynı son görüntüde biter:

     1. Hiç destek yok / kullanıcı hareketi kapatmış → her şey son
        hâliyle, animasyonsuz görünür. Sayfa eksiksizdir.
     2. `prefers-reduced-motion: no-preference` → açılışta kahraman
        bölümü belirir, çubuklar dolar, "şu an burası" imi nabız atar.
     3. Tarayıcı `animation-timeline: view()` destekliyorsa → uzun
        şeritteki kartlar ekrana girerken belirir. JavaScript yok;
        kaydırma gözlemcisi tarayıcının kendi işi.

   Kritik nokta: veri taşıyan hiçbir şey animasyonun çalışmasına bağlı
   değil. Oran çubukları ve zaman şeridinin rayları `animation-fill-mode`
   kullanmaz; animasyon hiç ilerlemese de son hâllerinde dururlar.
   Yalnızca açılıştaki kahraman belirmesi (`.belir`) sahneye 0,3 saniyeye
   kadar gecikmeli girer — o da metin değil, metnin girişi. */

/* ——————————————————————————————————————— simgeler */

.simge { display: block; flex: 0 0 auto; }

.simge-kutu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: 0 0 46px;
  border-radius: 13px;
  background: var(--menekse-zar);
  border: 1px solid rgba(var(--menekse-rgb), .30);
  color: var(--menekse);
}
.simge-kutu--buyuk {
  width: 68px; height: 68px; flex-basis: 68px;
  border-radius: 19px;
}
.simge-kutu--siena {
  background: var(--siena-zar);
  border-color: rgba(var(--siena-rgb), .34);
  color: var(--siena);
}
.simge-kutu--uyari {
  background: var(--uyari-zar);
  border-color: rgba(var(--uyari-rgb), .34);
  color: var(--uyari);
}
.simge-kutu--olumlu {
  background: rgba(var(--olumlu-rgb), .13);
  border-color: rgba(var(--olumlu-rgb), .34);
  color: var(--olumlu);
}
.simge-kutu--sessiz {
  background: rgba(var(--sis-rgb), .10);
  border-color: var(--cizgi-koyu);
  color: var(--yardimci);
}

/* Durum çipinin yeşili — `cip--olumlu` yalnızca burada kullanılıyor. */
.cip--olumlu {
  background: rgba(var(--olumlu-rgb), .13);
  border-color: rgba(var(--olumlu-rgb), .40);
  color: var(--olumlu);
}

/* ——————————————————————————————————————— kahramanın altındaki saat şeridi

   "Krizin kaçıncı günündeyiz" sorusu sayfanın en üstünde cevaplanıyor.
   Çubuk, azami SÜRENİN ne kadarının geçtiğini gösterir; tasfiyenin ne
   kadarının bittiğini değil. Yanına da bu yazılı — çubuk tek başına
   "işin %3'ü bitti" diye okunabilir ve bu yanlış olur. */

.saat-serit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 26px;
  align-items: center;
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(168deg, var(--kart-ust), var(--kart-alt));
  border: 1px solid var(--kart-kenar);
  box-shadow: var(--kabartma-sig);
  margin-bottom: clamp(26px, 3.4vw, 42px);
}
.saat-serit__blok { min-width: 0; }
.saat-serit__ad {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kunye);
  margin-bottom: 7px;
}
.saat-serit__deger {
  font-family: var(--baslik);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--murekkep);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.saat-serit__birim {
  font-family: var(--govde);
  font-size: 14px;
  font-weight: 400;
  color: var(--yardimci);
  letter-spacing: 0;
}
.saat-serit__alt { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--kunye); }
.saat-serit__genis { grid-column: 1 / -1; }

.olcu {
  position: relative;
  height: 12px;
  border-radius: var(--r-hap);
  background: rgba(var(--dip-rgb), .62);
  border: 1px solid var(--kart-cizgi);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .34);
  overflow: hidden;
}
.olcu__dolu {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--oran, 0%);
  min-width: 6px;
  border-radius: var(--r-hap);
  background: linear-gradient(90deg, var(--menekse), var(--siena));
  transform-origin: left center;
}
/* Önceki azami tarihin (3 ay) nereye düştüğünü gösteren ince kesik. */
.olcu__im {
  position: absolute;
  top: -4px; bottom: -4px;
  left: var(--yer, 50%);
  width: 2px;
  background: var(--uyari);
  opacity: .75;
}
.olcu-kunye {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--kunye);
}

/* ——————————————————————————————————————— tek kolonlu kahraman

   Sağdaki belge kartı kaldırıldıktan sonra metin sütunu 620px'te
   kalınca sağda geniş bir boşluk oluyordu. Başlık serbest bırakıldı,
   paragraf okunur satır uzunluğunda tutuldu (uzun satır yorucu okunur),
   alttaki iki bağlantı yan yana alındı. */

.kahraman--tek .kahraman__sol { max-width: 100%; }
.kahraman--tek .dev-baslik { max-width: 20ch; }
.kahraman--tek .giris { max-width: 66ch; }
.kahraman--tek .bolum-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
}

/* ——————————————————————————————————————— sayfa içi kısayollar */

/* Şerit üst menünün altına yapışıyor: sayfa uzun, ve bir bölüme geçen
   insanın başka bir bölüme gitmek için en yukarı dönmesi gerekmesin.

   Dar ekranda satırlara bölünüp ekranın yarısını yemesin diye tek satırda
   tutuluyor ve yatay kayıyor — üst menüdeki çözümün aynısı. Kaydırma
   çubuğu gizli; parmakla kaydırılıyor, farede shift+tekerlek. */
.ic-menu {
  position: sticky;
  top: calc(var(--ustbar-h) + env(safe-area-inset-top, 0px) + 8px);
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  /* Düğmeler şeridin ortasında. `safe`, taşma hâlinde ilk düğmenin
     erişilemez kalmasını önler; anlamayan tarayıcı düz `center`da kalır. */
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 8px;
  padding: 8px;
  border-radius: var(--r-hap);
  background: rgba(var(--zemin-rgb), .93);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--kart-kenar);
  box-shadow: var(--kabartma-sig);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.ic-menu::-webkit-scrollbar { display: none; }
.ic-menu__oge { flex: 0 0 auto; }

/* Bağlantı bir bölüme atlarken başlık iki barın altında kalmasın. */
.bolum[id],
.kart[id] { scroll-margin-top: calc(var(--ustbar-h) + 82px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.ic-menu__oge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: var(--r-hap);
  border: 1px solid var(--kart-kenar);
  background: linear-gradient(168deg, rgba(var(--kart-ust-rgb), .72), rgba(var(--kart-alt-rgb), .58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  color: var(--ikincil);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform .14s ease, border-color .14s ease, color .14s ease,
              background .14s ease, box-shadow .14s ease;
}
.ic-menu__oge:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: rgba(var(--menekse-rgb), .45);
  background: linear-gradient(168deg, rgba(var(--kenar-rgb), .85), rgba(var(--ara-rgb), .7));
  color: var(--murekkep);
}
.ic-menu__oge:active { transform: translateY(0); }
/* Klavyeyle gezenin nerede olduğu görünsün. */
.ic-menu__oge:focus-visible {
  outline: 2px solid var(--menekse);
  outline-offset: 2px;
}
.ic-menu__oge .simge { color: var(--menekse); transition: color .14s ease; }

/* ——— hangi bölümdeyiz: yanan düğme ———

   İki yol var ve ikisi de aynı görünümü veriyor:

   1. BETİKLİ (olağan hâl) — `static/js/serit.js` kaydırırken okuma
      çizgisini geçen son bölümün düğmesine `--aktif` sınıfını takıyor.
      Işık serbest kaydırmada da bölümden bölüme geçiyor.

   2. BETİKSİZ — `:target` + `:has()`: düğmeye basınca adresin sonuna
      #bölüm geliyor, o bölüm `:target` oluyor ve karşılık gelen düğme
      işaretleniyor. Kaydırmayı izlemez, yalnızca BASILAN düğmeyi
      gösterir; betik yoksa da şerit anlamlı kalsın diye duruyor.

   Görünüm iki yerde yazılı olmak zorunda: `:has()` desteklemeyen eski
   bir tarayıcıda kuralın tamamı düşer ve onunla birlikte sınıfın
   görünümü de düşerdi. İkisi ayrı dursun ki biri diğerini düşürmesin.
   Değiştiren, ikisini birlikte değiştirmeli.

   Bölüm eklenirse aşağıya bir satır daha gerekiyor; unutulursa
   `test_her_kisayolun_isik_kurali_var` testi düşer. */
.ic-menu__oge--aktif {
  color: var(--murekkep);
  border-color: rgba(var(--menekse-rgb), .72);
  background: linear-gradient(168deg, rgba(var(--mor-rgb), .42), rgba(var(--mor-derin-rgb), .28));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px rgba(var(--menekse-rgb), .22),
    0 8px 22px -8px rgba(var(--mor-rgb), .75);
}
.ic-menu__oge--aktif .simge { color: var(--murekkep); }
/* Yanan düğme yerinde dursun: üzerine gelince zıplaması, okuma imlecini
   takip eden gözü yoruyor. */
.ic-menu__oge--aktif:hover { transform: none; }

@supports selector(:has(*)) {
  body:has(#ne-oldu:target)    .ic-menu__oge[href="#ne-oldu"],
  body:has(#gun-gun:target)    .ic-menu__oge[href="#gun-gun"],
  body:has(#surec:target)      .ic-menu__oge[href="#surec"],
  body:has(#kim:target)        .ic-menu__oge[href="#kim"],
  body:has(#bilinmeyen:target) .ic-menu__oge[href="#bilinmeyen"] {
    color: var(--murekkep);
    border-color: rgba(var(--menekse-rgb), .72);
    background: linear-gradient(168deg, rgba(var(--mor-rgb), .42), rgba(var(--mor-derin-rgb), .28));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      0 0 0 1px rgba(var(--menekse-rgb), .22),
      0 8px 22px -8px rgba(var(--mor-rgb), .75);
  }
  body:has(#ne-oldu:target)    .ic-menu__oge[href="#ne-oldu"] .simge,
  body:has(#gun-gun:target)    .ic-menu__oge[href="#gun-gun"] .simge,
  body:has(#surec:target)      .ic-menu__oge[href="#surec"] .simge,
  body:has(#kim:target)        .ic-menu__oge[href="#kim"] .simge,
  body:has(#bilinmeyen:target) .ic-menu__oge[href="#bilinmeyen"] .simge {
    color: var(--murekkep);
  }
}

/* ——————————————————————————————————————— perdeler: olay üç hamlede oldu */

.perdeler { display: flex; flex-direction: column; gap: 16px; }

.perde {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(168deg, var(--kart-ust), var(--kart-alt));
  border: 1px solid var(--kart-kenar);
  box-shadow: var(--kabartma);
  position: relative;
  overflow: hidden;
}
/* Sıra önemli: `.perde > *` ile `.perde__no` aynı özgüllükte. Konumlama
   kuralı sonra gelmeli, yoksa dev numara akışa girip düzeni bozuyor. */
.perde > * { position: relative; }

/* Perde numarası: kartın sağ üstünde, dev ve soluk. Sıralamayı okumadan
   hissettiriyor; DOM'da ilk çocuk olduğu için metnin altında kalıyor. */
.perde__no {
  position: absolute;
  top: -18px; right: 6px;
  font-family: var(--baslik);
  font-size: 132px;
  font-weight: 700;
  line-height: 1;
  color: rgba(var(--menekse-rgb), .055);
  pointer-events: none;
  user-select: none;
}
.perde__zaman {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--siena);
  margin-bottom: 8px;
}
.perde__ad {
  font-family: var(--baslik);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.22;
  color: var(--murekkep);
  margin: 0 0 10px;
}
.perde__ozet {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ikincil);
  margin: 0 0 16px;
  max-width: 68ch;
}
.perde__belgeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* 13:30 kesimi — bu sitenin en çok sorulan detayı, kendi rozeti var. */
.kesim {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--siena-zar);
  border: 1px dashed rgba(var(--siena-rgb), .5);
  margin-bottom: 14px;
}
.kesim__saat {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--siena);
  letter-spacing: .04em;
}
.kesim__yazi { font-size: 13px; line-height: 1.5; color: var(--ikincil); max-width: 52ch; }

/* ——————————————————————————————————————— gün gün şerit */

.gunler { display: flex; flex-direction: column; }

.gun {
  display: grid;
  grid-template-columns: 78px 26px minmax(0, 1fr);
  gap: 0 16px;
  align-items: stretch;
}
.gun__im {
  padding-top: 2px;
  text-align: right;
}
.gun__sayi {
  display: block;
  font-family: var(--baslik);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--murekkep);
}
.gun__ay {
  display: block;
  font-size: 13px;
  color: var(--yardimci);
  margin-top: 3px;
}
.gun__hafta {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kunye);
  margin-top: 4px;
}
.gun__gunno {
  display: inline-block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--kunye);
}

/* Ray: dikey çizgi + düğüm. Çizgi son günde kesilir. */
.gun__ray { position: relative; }
.gun__ray::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  bottom: -6px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, var(--cizgi-koyu), var(--cizgi));
}
.gun:last-child .gun__ray::before { display: none; }
.gun__nokta {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 13px; height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--yuzey-ust);
  border: 2px solid var(--menekse);
  box-shadow: 0 0 0 4px rgba(var(--menekse-rgb), .10);
}
.gun--gelecek .gun__nokta { border-color: var(--cizgi-koyu); background: var(--zemin-dip); }
.gun--gelecek .gun__sayi { color: var(--yardimci); }
.gun--gelecek .gun__ray::before { background: repeating-linear-gradient(180deg, var(--cizgi-koyu) 0 4px, transparent 4px 9px); }
.gun--donum .gun__nokta { border-color: var(--siena); box-shadow: 0 0 0 5px var(--siena-zar); }
.gun--bugun .gun__nokta { border-color: var(--olumlu); background: var(--olumlu); }

.gun__olaylar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 22px;
  min-width: 0;
}
.gun:last-child .gun__olaylar { padding-bottom: 0; }

.gun__bugun-etiket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--r-hap);
  background: rgba(var(--olumlu-rgb), .13);
  border: 1px solid rgba(var(--olumlu-rgb), .38);
  color: var(--olumlu);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.olay {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 15px;
  padding: 17px 19px;
  border-radius: 14px;
  background: linear-gradient(168deg, var(--kart-ust), var(--kart-alt));
  border: 1px solid var(--kart-kenar);
  box-shadow: var(--kabartma-sig);
  transition: transform .14s ease, box-shadow .14s ease;
}
.olay:hover { transform: translateY(-2px); box-shadow: var(--kabartma); }
.olay--hesap {
  background: rgba(var(--siena-rgb), .06);
  border: 1px dashed rgba(var(--siena-rgb), .44);
  box-shadow: none;
}
.olay--haber {
  background: rgba(var(--sis-rgb), .07);
  border-style: dashed;
  box-shadow: none;
}
.olay--sessiz {
  background: transparent;
  border: 1px dashed var(--cizgi);
  box-shadow: none;
}
.olay__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.olay__saat {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--siena);
  letter-spacing: .06em;
}
.olay__ad {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--murekkep);
  margin-bottom: 7px;
}
.olay__yazi { font-size: 13.5px; line-height: 1.58; color: var(--yardimci); }
.olay__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* ——————————————————————————————————————— sürecin basamakları */

.basamaklar { display: flex; flex-direction: column; }

.basamak {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 16px;
  align-items: start;
}
.basamak__ray { position: relative; min-height: 100%; }
.basamak__ray::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 46px;
  bottom: -8px;
  width: 2px;
  background: var(--cizgi);
}
.basamak:last-child .basamak__ray::before { display: none; }
.basamak__govde { padding-bottom: 18px; min-width: 0; }
.basamak:last-child .basamak__govde { padding-bottom: 0; }
.basamak__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}
.basamak__ad {
  font-size: 16px;
  font-weight: 600;
  color: var(--murekkep);
  line-height: 1.3;
}
.basamak__yazi { font-size: 13.5px; line-height: 1.58; color: var(--yardimci); max-width: 70ch; }
.basamak__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.basamak--bitti .simge-kutu { color: var(--olumlu); }
.basamak--bekliyor .basamak__ad { color: var(--ikincil); }
.basamak--bekliyor .basamak__ray::before { background: repeating-linear-gradient(180deg, var(--cizgi-koyu) 0 4px, transparent 4px 9px); }
.basamak--simdi .simge-kutu {
  border-color: rgba(var(--siena-rgb), .6);
}
.imlec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--r-hap);
  background: var(--siena-zar);
  border: 1px solid rgba(var(--siena-rgb), .5);
  color: var(--siena);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.imlec__nokta {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--siena);
}

/* ——————————————————————————————————————— dağılım tablosu */

.dagilim { width: 100%; font-size: 13.5px; }
.dagilim th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kunye);
  text-align: left;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--cizgi-koyu);
  font-weight: 500;
}
.dagilim td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--kart-cizgi);
  vertical-align: middle;
}
.dagilim tr:last-child td { border-bottom: 0; }
.dagilim__ad { font-weight: 600; color: var(--murekkep); white-space: nowrap; }
.dagilim__sayi { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dagilim__cubuk-hucre { width: 46%; min-width: 120px; }
.dagilim__toplam td {
  border-top: 1px solid var(--cizgi-koyu);
  border-bottom: 0;
  padding-top: 13px;
  color: var(--murekkep);
  font-weight: 600;
}

.cubuk {
  position: relative;
  height: 9px;
  border-radius: var(--r-hap);
  background: rgba(var(--dip-rgb), .55);
  overflow: hidden;
}
.cubuk__dolu {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--oran, 0%);
  min-width: 4px;
  border-radius: var(--r-hap);
  background: linear-gradient(90deg, rgba(var(--menekse-rgb), .85), var(--menekse));
  transform-origin: left center;
}
.cubuk__dolu--siena { background: linear-gradient(90deg, rgba(var(--siena-rgb), .8), var(--siena)); }

/* ——————————————————————————————————————— kim etkilendi: iki grup */

.gruplar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.grup-kart {
  padding: 22px;
  border-radius: 16px;
  background: rgba(var(--dip-rgb), .34);
  border: 1px solid var(--kart-cizgi);
}
.grup-kart--once { border-color: rgba(var(--menekse-rgb), .34); background: var(--menekse-zar); }
.grup-kart__ad {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--murekkep);
  line-height: 1.35;
  margin: 13px 0 9px;
}
.grup-kart__yazi { font-size: 13.5px; line-height: 1.6; color: var(--ikincil); }
.grup-kart__yazi strong { color: var(--murekkep); }

/* ——————————————————————————————————————— izlenen olgu kutusu

   Aynı kutu iki hâlde: cevabı gelmiş olgu (yeşil kenar, rakam) ve
   cevabı beklenen olgu (kesik kenar, tire). Soru her iki hâlde de
   ekranda duruyor — eksik olanı gizlemek, eksik olduğunu gizlemek. */

.olgular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: var(--bosluk);
}
.olgu {
  padding: 19px;
  border-radius: 15px;
  background: rgba(var(--dip-rgb), .30);
  border: 1px dashed var(--cizgi-koyu);
  min-width: 0;
}
.olgu--bilinen {
  background: linear-gradient(168deg, var(--kart-ust), var(--kart-alt));
  border: 1px solid rgba(var(--olumlu-rgb), .30);
  box-shadow: var(--kabartma-sig);
}
.olgu__ust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.olgu__deger {
  font-family: var(--baslik);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--kunye);
  overflow-wrap: anywhere;
}
.olgu--bilinen .olgu__deger { color: var(--murekkep); }
.olgu__ad { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--yardimci); }
.olgu__kaynak { display: block; margin-top: 10px; }
.olgu__not {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--kart-cizgi);
  font-size: 12px;
  line-height: 1.5;
  color: var(--kunye);
}

/* Zaman şeridinde, belgenin altındaki rakam — "bunu bu belgeyle öğrendik". */
.olay-olgu {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  background: rgba(var(--olumlu-rgb), .09);
  border-left: 3px solid var(--olumlu);
}
.olay-olgu__deger {
  font-family: var(--baslik);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--murekkep);
  margin-right: 8px;
}
.olay-olgu__ad { font-size: 13px; color: var(--ikincil); }
.olay-olgu__not {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--kunye);
}

/* Arşive girmiş ama henüz okunmamış belge. Sessiz kalmamalı. */
.olay--yeni {
  background: var(--siena-zar);
  border: 1px solid rgba(var(--siena-rgb), .55);
  box-shadow: none;
}

/* ——————————————————————————————————————— bilinmeyenler */

.bilmeceler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
}
.bilmece {
  padding: 22px;
  border-radius: 16px;
  background: rgba(var(--dip-rgb), .30);
  border: 1px dashed var(--cizgi-koyu);
}
.bilmece--kritik {
  background: var(--uyari-zar);
  border: 1px dashed rgba(var(--uyari-rgb), .5);
}
.bilmece__ust { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.bilmece__soru {
  font-family: var(--baslik);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--murekkep);
  line-height: 1.3;
  margin-bottom: 9px;
}
.bilmece__yazi { font-size: 13.5px; line-height: 1.6; color: var(--yardimci); }
.bilmece__alt { margin-top: 13px; }

/* ——————————————————————————————————————— hareket

   Üç kademenin tamamı burada. Dışındaki hiçbir kural opaklığı
   düşürmüyor — animasyon çalışmasa da sayfa eksiksiz okunur. */

@keyframes fk-belir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fk-dolum {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fk-ciz {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes fk-nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(var(--siena-rgb), .48); }
  70%  { box-shadow: 0 0 0 11px rgba(var(--siena-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--siena-rgb), 0); }
}
@keyframes fk-nabiz-yesil {
  0%   { box-shadow: 0 0 0 0 rgba(var(--olumlu-rgb), .5); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--olumlu-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--olumlu-rgb), 0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. Açılış: kahraman ve saat şeridi sırayla belirir. */
  .belir { animation: fk-belir .62s cubic-bezier(.22, .72, .3, 1) both; }
  .belir--1 { animation-delay: .04s; }
  .belir--2 { animation-delay: .12s; }
  .belir--3 { animation-delay: .20s; }
  .belir--4 { animation-delay: .28s; }

  /* Dolgu modu ve gecikme YOK — bilerek. `both` yazsaydık animasyon hiç
     ilerlemeyen bir ortamda (arka plandaki sekme, çerçeve dışındaki bir
     iframe, kısıtlanmış bir görüntüleyici) çubuk boş, ray görünmez
     kalırdı. Fill-mode'suz hâlde element kendi son durumunda durur;
     animasyon çalışırsa da ilk kareden itibaren oradan büyür. */
  .olcu__dolu,
  .cubuk__dolu { animation: fk-dolum 1.1s cubic-bezier(.22, .72, .3, 1); }

  .gun__ray::before,
  .basamak__ray::before { animation: fk-ciz .7s ease-out; transform-origin: top center; }

  .imlec__nokta { animation: fk-nabiz 2.1s ease-out infinite; }
  .gun--bugun .gun__nokta { animation: fk-nabiz-yesil 2.4s ease-out infinite; }
  .ust-etiket__nokta { animation: fk-nabiz 2.6s ease-out infinite; }

  /* 2. Kaydırmayla beliren kartlar — yalnızca tarayıcı kendi
     kaydırma zaman çizelgesini destekliyorsa. JS yok. */
  @supports (animation-timeline: view()) {
    .kaydir {
      animation: fk-belir linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 34%;
    }
  }
}

/* 3. Hareketi kapatan kullanıcıda hiçbir şey oynamaz. */
@media (prefers-reduced-motion: reduce) {
  .olay, .ic-menu__oge { transition: none; }
  .olay:hover, .ic-menu__oge:hover { transform: none; }
}

/* ——————————————————————————————————————— dar ekran */

@media (max-width: 760px) {
  .perde { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px; }
  .perde__no { font-size: 96px; top: -12px; }
  .gun { grid-template-columns: 58px 22px minmax(0, 1fr); gap: 0 11px; }
  .gun__sayi { font-size: 24px; }
  .gun__hafta { display: none; }
  .olay { grid-template-columns: 1fr; gap: 11px; padding: 16px; }
  .basamak { grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; }
  .basamak__ray::before { left: 19px; top: 42px; }
  .simge-kutu { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }
  .dagilim__cubuk-hucre { display: none; }
}

/* Çok dar ekranda ÖNCE→SONRA yan yana durmuyor: iki sütun da üç kelimede
   kırılıp okunmaz hâle geliyordu. Alt alta alınıp ok aşağı çevrildi. */
@media (max-width: 560px) {
  .perde .degisim { flex-direction: column; align-items: stretch; gap: 12px; }
  .perde .degisim__ok { align-self: center; transform: rotate(90deg); }
  .kesim { align-items: flex-start; }
}

/* ——————————————————————————————————————— yazdırma */

@media print {
  .ic-menu { display: none; }
  .perde, .olay, .saat-serit, .grup-kart, .bilmece {
    box-shadow: none;
    background: #fff;
    border-color: #ccc;
    break-inside: avoid;
  }
  .perde__no { display: none; }
}