/* =========================================================
   Takiyüddin Web Sitesi — Ortak Stiller
   Tasarım sistemi: Osmanlı minyatürü + gece gökyüzü + pirinç
   ========================================================= */

/* --- 1. CSS Değişkenleri ----------------------------------- */
:root {
  /* Renk paleti — claude.md'den */
  --gece:        #0e1733;
  --gece-koyu:   #070b1c;
  --gece-derin:  #03050f;
  --pirinc:      #c8a44d;
  --pirinc-acik: #e7cd86;
  --pirinc-koyu: #8c6f2c;
  --parsomen:    #f3e9d2;
  --parsomen-koyu:#d8c79e;
  --mercan:      #b5532e;
  --gokyuzu:     #e8eaf2;
  --gokyuzu-mat: #a8aec4;

  /* Tipografi */
  --font-baslik: "Cormorant Garamond", "EB Garamond", "Iowan Old Style",
                 Georgia, "Times New Roman", serif;
  --font-govde:  "Inter", "Source Sans 3", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-vurgu:  "Cormorant Garamond", Georgia, serif;

  /* Boşluk skalası */
  --bos-1: 0.25rem;
  --bos-2: 0.5rem;
  --bos-3: 0.75rem;
  --bos-4: 1rem;
  --bos-5: 1.5rem;
  --bos-6: 2rem;
  --bos-7: 3rem;
  --bos-8: 4.5rem;
  --bos-9: 6.5rem;

  /* Yapı */
  --max-genislik: 1180px;
  --okuma-genislik: 68ch;
  --kose-yumusak: 4px;
  --kose-kart: 10px;

  /* Gölge & çerçeve */
  --cizgi-altin: 1px solid rgba(200, 164, 77, 0.35);
  --cizgi-altin-yumusak: 1px solid rgba(200, 164, 77, 0.18);
  --golge-kart: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --golge-yumusak: 0 4px 18px -6px rgba(0, 0, 0, 0.4);

  /* Hareket */
  --gecis: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --gecis-yavas: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. Reset & temel ------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-govde);
  font-size: 17px;
  line-height: 1.65;
  color: var(--gokyuzu);
  background: var(--gece-derin);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

a {
  color: var(--pirinc-acik);
  text-decoration: none;
  transition: color var(--gecis);
}
a:hover { color: var(--parsomen); }

::selection {
  background: var(--pirinc);
  color: var(--gece-koyu);
}

/* Odak göstergesi — erişilebilirlik */
:focus-visible {
  outline: 2px solid var(--pirinc-acik);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 3. Tipografi ----------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--parsomen);
  line-height: 1.15;
  margin: 0 0 var(--bos-4);
}

h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}
h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
}

p { margin: 0 0 var(--bos-4); }

.metin-vurgu {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc-acik);
}

.kucuk-baslik {
  font-family: var(--font-govde);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pirinc);
  margin-bottom: var(--bos-3);
}

/* --- 4. Yardımcı kapsayıcı -------------------------------- */
.kapsayici {
  width: 100%;
  max-width: var(--max-genislik);
  margin-inline: auto;
  padding-inline: var(--bos-5);
}

.bolum {
  padding-block: var(--bos-8);
}

.altin-cizgi {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(200, 164, 77, 0.6),
    transparent
  );
  border: 0;
  margin-block: var(--bos-6);
}

/* --- 5. Site başlığı / nav -------------------------------- */
.site-bas {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(7, 11, 28, 0.72);
  border-bottom: var(--cizgi-altin-yumusak);
}

.site-bas__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bos-5);
  padding-block: var(--bos-3);
}

.marka {
  display: flex;
  align-items: center;
  gap: var(--bos-3);
  font-family: var(--font-baslik);
  font-size: 1.2rem;
  color: var(--parsomen);
  letter-spacing: 0.02em;
}
.marka:hover { color: var(--pirinc-acik); }

.marka__sembol {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.marka__isim {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.marka__isim small {
  font-family: var(--font-govde);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pirinc);
  margin-top: 2px;
}

.site-nav ul {
  display: flex;
  gap: var(--bos-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--gokyuzu-mat);
  font-size: 0.93rem;
  letter-spacing: 0.02em;
  padding-block: var(--bos-2);
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--pirinc);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--gecis);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--parsomen);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Mobil menü düğmesi */
.nav-toggle {
  display: none;
  background: transparent;
  border: var(--cizgi-altin);
  color: var(--pirinc-acik);
  width: 42px;
  height: 42px;
  border-radius: var(--kose-yumusak);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(3, 5, 15, 0.96);
    backdrop-filter: blur(20px);
    border-bottom: var(--cizgi-altin-yumusak);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gecis), transform var(--gecis);
  }
  .site-nav[data-acik="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: var(--bos-3) var(--bos-5);
  }
  .site-nav li {
    border-bottom: var(--cizgi-altin-yumusak);
  }
  .site-nav li:last-child { border-bottom: 0; }
  .site-nav a {
    display: block;
    padding-block: var(--bos-4);
  }
}

/* --- 6. Hero (anasayfa) ----------------------------------- */
.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 880px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(30, 45, 90, 0.55), transparent 65%),
    linear-gradient(to bottom, var(--gece-derin) 0%, var(--gece-koyu) 60%, var(--gece-derin) 100%);
  isolation: isolate;
}

/* Astrolab katmanı — hero arkasında */
.hero__astrolab {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero__astrolab svg {
  width: min(140vmin, 1100px);
  height: auto;
  opacity: 0.22;
  filter: drop-shadow(0 0 28px rgba(200, 164, 77, 0.18));
}

/* Yıldız alanı katmanı */
.yildiz-alani {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Hero içerik */
.hero__ic {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--bos-5);
  max-width: 880px;
}

.hero h1 {
  font-weight: 500;
  margin-bottom: var(--bos-5);
}
.hero h1 .vurgu {
  color: var(--pirinc-acik);
  font-style: italic;
}

.hero__ozet {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--gokyuzu-mat);
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--bos-6);
}

.hero__yillar {
  font-family: var(--font-vurgu);
  letter-spacing: 0.32em;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--pirinc);
  margin-bottom: var(--bos-4);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--bos-3);
  padding: var(--bos-3) var(--bos-5);
  border: 1px solid var(--pirinc);
  color: var(--parsomen);
  border-radius: 999px;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.hero__cta:hover {
  background: var(--pirinc);
  color: var(--gece-koyu);
  transform: translateY(-2px);
}
.hero__cta .ok { transition: transform var(--gecis); }
.hero__cta:hover .ok { transform: translateX(4px); }

/* Kaydırma ipucu */
.hero__kaydir {
  position: absolute;
  bottom: var(--bos-5);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gokyuzu-mat);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bos-2);
  z-index: 2;
}
.hero__kaydir::after {
  content: "";
  width: 1px;
  height: 38px;
  background: linear-gradient(to bottom, var(--pirinc), transparent);
  animation: kaydir-isigi 2.4s ease-in-out infinite;
}
@keyframes kaydir-isigi {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50%      { opacity: 1;   transform: scaleY(1); }
}

/* --- 7. Astrolab dönüşü (rete katmanı) -------------------- */
@keyframes rete-don {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* SVG içindeki .rete grubu döner; transform-box: view-box ile
   transform-origin viewBox koordinat sistemine göre yorumlanır.
   Astrolab viewBox'ı 0 0 1000 1000; merkez (500, 500). */
.astrolab-svg .rete {
  transform-box: view-box;
  transform-origin: 500px 500px;
  animation: rete-don 360s linear infinite; /* 6 dakikada bir tur */
}

.astrolab-svg .alidade {
  transform-box: view-box;
  transform-origin: 500px 500px;
  animation: rete-don 900s linear infinite reverse; /* 15 dk, ters yön */
}

/* Reduced motion — durdur */
@media (prefers-reduced-motion: reduce) {
  .astrolab-svg .rete,
  .astrolab-svg .alidade {
    animation: none;
  }
  .hero__kaydir::after { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- 8. Bölüm kartları (anasayfa) ------------------------- */
.tanitim {
  background: linear-gradient(to bottom, var(--gece-derin), var(--gece-koyu));
  position: relative;
}
.tanitim__metin {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.tanitim__metin p {
  font-size: 1.08rem;
  color: var(--gokyuzu-mat);
}

.kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--bos-5);
  margin-top: var(--bos-7);
}

.kart {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg,
    rgba(14, 23, 51, 0.85),
    rgba(7, 11, 28, 0.9));
  border: var(--cizgi-altin-yumusak);
  border-radius: var(--kose-kart);
  padding: var(--bos-6) var(--bos-5);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.kart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%,
    rgba(200, 164, 77, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity var(--gecis);
  pointer-events: none;
}
.kart:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 164, 77, 0.55);
  box-shadow: var(--golge-kart);
}
.kart:hover::before { opacity: 1; }

.kart__numara {
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: 1rem;
  color: var(--pirinc);
  margin-bottom: var(--bos-3);
  letter-spacing: 0.18em;
}

.kart h3 {
  margin-bottom: var(--bos-3);
  color: var(--parsomen);
}

.kart p {
  font-size: 0.95rem;
  color: var(--gokyuzu-mat);
  margin-bottom: var(--bos-4);
  flex-grow: 1;
}

.kart__git {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pirinc-acik);
  display: inline-flex;
  align-items: center;
  gap: var(--bos-2);
}
.kart__git .ok { transition: transform var(--gecis); }
.kart:hover .kart__git .ok { transform: translateX(4px); }

/* --- 9. Genel sayfa başlığı (anasayfa dışında) ------------ */
.sayfa-bas {
  padding-block: var(--bos-9) var(--bos-7);
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse at top, rgba(30, 45, 90, 0.5), transparent 70%),
    var(--gece-derin);
  border-bottom: var(--cizgi-altin-yumusak);
}
.sayfa-bas h1 {
  margin-bottom: var(--bos-3);
}
.sayfa-bas__altyazi {
  color: var(--gokyuzu-mat);
  font-family: var(--font-vurgu);
  font-style: italic;
  font-size: 1.15rem;
}

.taslak-not {
  max-width: 640px;
  margin: var(--bos-7) auto;
  padding: var(--bos-5);
  border: 1px dashed rgba(200, 164, 77, 0.35);
  border-radius: var(--kose-kart);
  text-align: center;
  color: var(--gokyuzu-mat);
  font-size: 0.95rem;
  background: rgba(14, 23, 51, 0.4);
}
.taslak-not strong {
  color: var(--pirinc-acik);
  font-family: var(--font-baslik);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* --- 10. Footer ------------------------------------------- */
.site-alt {
  margin-top: var(--bos-9);
  padding-block: var(--bos-7) var(--bos-5);
  background: var(--gece-derin);
  border-top: var(--cizgi-altin-yumusak);
  color: var(--gokyuzu-mat);
  font-size: 0.88rem;
}

.site-alt__ic {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--bos-7);
}

@media (max-width: 720px) {
  .site-alt__ic {
    grid-template-columns: 1fr;
    gap: var(--bos-5);
  }
}

.site-alt h4 {
  font-family: var(--font-govde);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pirinc);
  margin-bottom: var(--bos-4);
}

.site-alt ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bos-2);
}

.site-alt__telif {
  margin-top: var(--bos-6);
  padding-top: var(--bos-4);
  border-top: var(--cizgi-altin-yumusak);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bos-3);
  font-size: 0.78rem;
  color: var(--gokyuzu-mat);
  opacity: 0.8;
}

.site-alt__marka {
  display: flex;
  align-items: center;
  gap: var(--bos-3);
  font-family: var(--font-baslik);
  font-size: 1.15rem;
  color: var(--parsomen);
  margin-bottom: var(--bos-3);
}

.kaynak-notu {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--gokyuzu-mat);
  opacity: 0.85;
  line-height: 1.5;
}

/* --- 11. Hayat rotası grafiği (Hayatı sayfası girişi) ---- */
.rota {
  max-width: 820px;
  margin: var(--bos-6) auto var(--bos-8);
  padding: var(--bos-5);
}
.rota__icerik { width: 100%; height: auto; }
.rota__sehir-isim {
  font-family: var(--font-baslik);
  font-size: 16px;
  fill: var(--parsomen);
  letter-spacing: 0.04em;
}
.rota__sehir-yil {
  font-family: var(--font-govde);
  font-size: 11px;
  fill: var(--gokyuzu-mat);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- 12. Zaman çizelgesi (Hayatı sayfası) ---------------- */
.zaman-bolum {
  padding-block: var(--bos-6) var(--bos-8);
}

.zaman {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1020px;
  position: relative;
}

/* Merkez omurga */
.zaman::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(200, 164, 77, 0.5) 5%,
    rgba(200, 164, 77, 0.5) 95%,
    transparent 100%);
  z-index: 0;
}

.zaman__durak {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  padding-block: var(--bos-3) var(--bos-5);
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.zaman__durak:nth-child(odd)  { transform: translateY(36px) translateX(-18px); }
.zaman__durak:nth-child(even) { transform: translateY(36px) translateX(18px); }
.zaman__durak.gorunur          { opacity: 1; transform: translate(0, 0); }

/* Omurga üzerindeki nokta */
.zaman__nokta {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--gece-derin);
  border: 1.5px solid var(--pirinc);
  box-shadow: 0 0 0 6px var(--gece-derin), 0 0 14px rgba(231, 205, 134, 0.45);
  z-index: 2;
}

/* Omurga üzerindeki yıl etiketi */
.zaman__yil {
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  font-family: var(--font-vurgu);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--pirinc-acik);
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: var(--gece-derin);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

/* Kart */
.zaman__icerik {
  background: rgba(14, 23, 51, 0.55);
  border: 1px solid rgba(200, 164, 77, 0.2);
  border-radius: var(--kose-kart);
  padding: var(--bos-5);
  position: relative;
  backdrop-filter: blur(2px);
}
.zaman__durak:nth-child(odd) .zaman__icerik {
  grid-column: 1;
  margin-right: 40px;
}
.zaman__durak:nth-child(even) .zaman__icerik {
  grid-column: 2;
  margin-left: 40px;
}

/* Karttan omurgaya bakan oklar */
.zaman__icerik::before {
  content: "";
  position: absolute;
  top: 26px;
  width: 12px;
  height: 12px;
  background: rgba(14, 23, 51, 0.55);
  border: 1px solid rgba(200, 164, 77, 0.2);
  transform: rotate(45deg);
}
.zaman__durak:nth-child(odd) .zaman__icerik::before {
  right: -7px;
  border-left: 0;
  border-bottom: 0;
}
.zaman__durak:nth-child(even) .zaman__icerik::before {
  left: -7px;
  border-right: 0;
  border-top: 0;
}

.zaman__yer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pirinc);
  margin-bottom: var(--bos-3);
}
.zaman__yer svg { width: 11px; height: 13px; }

.zaman__icerik h3 {
  margin: 0 0 var(--bos-3);
  font-size: 1.35rem;
}
.zaman__icerik p {
  font-size: 0.96rem;
  color: var(--gokyuzu-mat);
  margin: 0 0 var(--bos-3);
  line-height: 1.65;
}

.zaman__ac {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: var(--bos-2);
  font-family: var(--font-govde);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pirinc-acik);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--gecis);
}
.zaman__ac:hover { color: var(--parsomen); }
.zaman__ac .ok {
  transition: transform var(--gecis);
  display: inline-block;
}
.zaman__ac[aria-expanded="true"] .ok { transform: rotate(180deg); }

.zaman__detay {
  margin-top: var(--bos-4);
  padding-top: var(--bos-4);
  border-top: 1px solid rgba(200, 164, 77, 0.2);
  font-size: 0.92rem;
  color: var(--gokyuzu-mat);
  line-height: 1.7;
}
.zaman__detay p:last-child { margin-bottom: 0; }

/* Mobil: omurga sola çekilir, kartlar tek sütun */
@media (max-width: 760px) {
  .zaman::before { left: 20px; }
  .zaman__durak {
    grid-template-columns: 1fr;
    padding-left: 56px;
    padding-block: var(--bos-2) var(--bos-5);
    transform: translateY(24px) !important;
  }
  .zaman__durak.gorunur { transform: translate(0, 0) !important; }
  .zaman__nokta {
    left: 20px;
    top: 6px;
  }
  .zaman__yil {
    position: static;
    transform: none;
    display: inline-block;
    background: transparent;
    padding: 0;
    margin-bottom: var(--bos-3);
    font-size: 0.9rem;
  }
  .zaman__icerik,
  .zaman__durak:nth-child(odd) .zaman__icerik,
  .zaman__durak:nth-child(even) .zaman__icerik {
    grid-column: 1;
    margin: 0;
  }
  .zaman__icerik::before,
  .zaman__durak:nth-child(odd) .zaman__icerik::before,
  .zaman__durak:nth-child(even) .zaman__icerik::before {
    left: -7px;
    right: auto;
    top: 22px;
    border-right: 0;
    border-top: 0;
    border-left: 1px solid rgba(200, 164, 77, 0.2);
    border-bottom: 1px solid rgba(200, 164, 77, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zaman__durak,
  .zaman__durak:nth-child(odd),
  .zaman__durak:nth-child(even) {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* Sayfa giriş prose */
.zaman-giris {
  max-width: 720px;
  margin: 0 auto var(--bos-5);
  text-align: center;
  color: var(--gokyuzu-mat);
  font-size: 1.05rem;
}
.zaman-giris p { margin-bottom: var(--bos-3); }

/* Sonraki sayfa bağlantısı */
.sonraki {
  margin: var(--bos-9) auto var(--bos-6);
  max-width: 540px;
  text-align: center;
  padding: var(--bos-6) var(--bos-5);
  border: 1px solid rgba(200, 164, 77, 0.25);
  border-radius: var(--kose-kart);
  background: rgba(14, 23, 51, 0.4);
}
.sonraki p {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--gokyuzu-mat);
  margin-bottom: var(--bos-4);
}
.sonraki a {
  display: inline-flex;
  align-items: center;
  gap: var(--bos-3);
  padding: var(--bos-3) var(--bos-5);
  border: 1px solid var(--pirinc);
  color: var(--parsomen);
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background var(--gecis), color var(--gecis);
}
.sonraki a:hover {
  background: var(--pirinc);
  color: var(--gece-koyu);
}

/* --- 13. Rasathane — Şehinşehname etkileşimli sahne ------- */
.sahne-bolum {
  padding-block: var(--bos-7);
}

.sahne-giris {
  max-width: 720px;
  margin: 0 auto var(--bos-6);
  text-align: center;
  color: var(--gokyuzu-mat);
}
.sahne-giris p { font-size: 1.05rem; }

.sahne {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  border-radius: var(--kose-kart);
  overflow: hidden;
  border: 1px solid rgba(200, 164, 77, 0.35);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.8),
              0 0 0 1px rgba(200, 164, 77, 0.08);
  background: var(--gece-koyu);
}

.sahne__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Etkin nokta (hotspot) */
.sahne__nokta {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(231, 205, 134, 0.92);
  border: 2px solid #fff3d6;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 0;
  transition: background var(--gecis), transform var(--gecis);
}
.sahne__nokta:hover {
  background: var(--parsomen);
  transform: translate(-50%, -50%) scale(1.15);
}
.sahne__nokta[aria-pressed="true"] {
  background: var(--parsomen);
  box-shadow: 0 0 0 4px rgba(231, 205, 134, 0.35);
}

/* Nabız halkası */
.sahne__nokta::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid var(--pirinc-acik);
  opacity: 0.7;
  animation: sahne-nabiz 2.4s ease-out infinite;
}
.sahne__nokta[aria-pressed="true"]::before {
  animation: none;
  opacity: 0;
}

@keyframes sahne-nabiz {
  0%   { opacity: 0.9; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(2);   }
}

@media (prefers-reduced-motion: reduce) {
  .sahne__nokta::before { animation: none; opacity: 0.4; transform: scale(1); }
}

/* Nokta numarası (görsel rehber) */
.sahne__nokta__no {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: 12px;
  font-weight: 500;
  color: var(--gece-koyu);
  pointer-events: none;
}

/* Panel grubu — sahnenin altında, aktif olana göre değişir */
.sahne-paneller {
  margin-top: var(--bos-6);
  max-width: 720px;
  margin-inline: auto;
  position: relative;
  min-height: 180px;
}

.sahne-panel {
  background: rgba(14, 23, 51, 0.6);
  border: 1px solid rgba(200, 164, 77, 0.25);
  border-radius: var(--kose-kart);
  padding: var(--bos-5) var(--bos-6);
  transition: opacity 320ms ease;
}
.sahne-panel[hidden] { display: none; }

.sahne-panel__no {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc-acik);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  margin-bottom: var(--bos-2);
}
.sahne-panel h3 {
  margin: 0 0 var(--bos-3);
  font-size: 1.4rem;
}
.sahne-panel p {
  font-size: 0.96rem;
  color: var(--gokyuzu-mat);
  margin: 0 0 var(--bos-3);
  line-height: 1.7;
}
.sahne-panel p:last-child { margin-bottom: 0; }

.sahne-ipucu {
  text-align: center;
  color: var(--gokyuzu-mat);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: var(--bos-5) auto 0;
  opacity: 0.7;
}

/* Rasathane sayfası — iki sütun bilgi blokları */
.rasathane-bilgi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--bos-5);
  margin-top: var(--bos-7);
}
.rasathane-bilgi article {
  background: rgba(14, 23, 51, 0.45);
  border: 1px solid rgba(200, 164, 77, 0.18);
  border-radius: var(--kose-kart);
  padding: var(--bos-5);
}
.rasathane-bilgi h3 {
  margin: 0 0 var(--bos-3);
  font-size: 1.2rem;
}
.rasathane-bilgi p {
  font-size: 0.94rem;
  color: var(--gokyuzu-mat);
  margin: 0;
  line-height: 1.7;
}
.rasathane-bilgi .alt-bilgi {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc-acik);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: var(--bos-2);
  display: block;
}

/* Yıkım bölümü — daha vurgulu */
.yikim {
  margin-top: var(--bos-8);
  padding: var(--bos-6);
  border-left: 3px solid var(--mercan);
  background: linear-gradient(to right, rgba(181, 83, 46, 0.08), transparent);
  border-radius: 0 var(--kose-kart) var(--kose-kart) 0;
}
.yikim h3 {
  color: var(--mercan);
  font-style: italic;
  margin-bottom: var(--bos-3);
}
.yikim p {
  color: var(--gokyuzu-mat);
  margin-bottom: var(--bos-3);
}
.yikim p:last-child { margin-bottom: 0; }

/* --- 14. Aletleri sayfası ------------------------------- */
.aletler-giris {
  max-width: 760px;
  margin: 0 auto var(--bos-7);
  text-align: center;
  color: var(--gokyuzu-mat);
}
.aletler-giris p { font-size: 1.05rem; }

.aletler-galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bos-5);
  margin-top: var(--bos-6);
}

.alet-kart {
  background: linear-gradient(160deg,
    rgba(14, 23, 51, 0.7),
    rgba(7, 11, 28, 0.85));
  border: 1px solid rgba(200, 164, 77, 0.2);
  border-radius: var(--kose-kart);
  padding: var(--bos-5) var(--bos-5) var(--bos-4);
  text-align: center;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
  position: relative;
  display: flex;
  flex-direction: column;
}
.alet-kart:hover,
.alet-kart:focus-within {
  transform: translateY(-4px);
  border-color: rgba(200, 164, 77, 0.55);
  box-shadow: var(--golge-kart);
}

.alet-kart__gorsel {
  height: 140px;
  display: grid;
  place-items: center;
  margin-bottom: var(--bos-4);
  position: relative;
}
.alet-kart__gorsel svg {
  max-width: 130px;
  max-height: 130px;
  width: auto;
  height: auto;
  color: var(--pirinc);
}

.alet-rozet {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 auto var(--bos-3);
  border: 1px solid currentColor;
  background: rgba(0,0,0,0.2);
}
.alet-rozet--antik { color: var(--gokyuzu-mat); }
.alet-rozet--islam { color: var(--pirinc); }
.alet-rozet--icat {
  color: var(--mercan);
  background: rgba(181, 83, 46, 0.12);
}

.alet-kart h3 {
  margin: 0 0 var(--bos-1);
  font-size: 1.2rem;
}
.alet-kart .orijinal-ad {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc);
  font-size: 0.88rem;
  margin: 0 0 var(--bos-3);
}
.alet-kart__aciklama {
  font-size: 0.94rem;
  color: var(--gokyuzu-mat);
  margin: 0;
  line-height: 1.65;
  flex-grow: 1;
}

/* SVG döner animasyonu (sürekli yavaş, hover'da hızlanır) */
.alet-doner {
  transform-box: view-box;
  transform-origin: center;
  animation: alet-don 28s linear infinite;
}
.alet-kart:hover .alet-doner {
  animation-duration: 8s;
}

@keyframes alet-don {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Sallanan sarkaç (mekanik saat) */
.alet-sarkac {
  transform-box: view-box;
  transform-origin: 50px 30px;
  animation: alet-salla 2.2s ease-in-out infinite;
}
@keyframes alet-salla {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(18deg); }
}

@media (prefers-reduced-motion: reduce) {
  .alet-doner,
  .alet-sarkac { animation: none; }
}

/* Tycho karşılaştırma kutusu */
.tycho-karsilastirma {
  margin-top: var(--bos-8);
  padding: var(--bos-6);
  background:
    radial-gradient(ellipse at top left, rgba(30, 45, 90, 0.5), transparent 70%),
    rgba(14, 23, 51, 0.4);
  border: 1px solid rgba(200, 164, 77, 0.25);
  border-radius: var(--kose-kart);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bos-6);
  align-items: start;
}
@media (max-width: 720px) {
  .tycho-karsilastirma { grid-template-columns: 1fr; gap: var(--bos-4); }
}
.tycho-karsilastirma h3 {
  font-style: italic;
  color: var(--parsomen);
}
.tycho-karsilastirma p {
  font-size: 0.95rem;
  color: var(--gokyuzu-mat);
  margin: 0 0 var(--bos-3);
}
.tycho-karsilastirma p:last-child { margin-bottom: 0; }
.tycho-bolme h4 {
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--pirinc-acik);
  margin: 0 0 var(--bos-3);
  letter-spacing: 0.02em;
}

/* --- 15. Eserleri sayfası — sekme arayüzü --------------- */
.eserler-giris {
  max-width: 760px;
  margin: 0 auto var(--bos-7);
  text-align: center;
  color: var(--gokyuzu-mat);
}
.eserler-giris p { font-size: 1.05rem; }

.sekme-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bos-2);
  border-bottom: 1px solid rgba(200, 164, 77, 0.18);
  margin-bottom: var(--bos-6);
}
.sekme-bar button {
  background: transparent;
  border: 0;
  padding: var(--bos-3) var(--bos-5);
  font-family: var(--font-baslik);
  font-size: 1.15rem;
  color: var(--gokyuzu-mat);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--gecis), border-color var(--gecis);
  letter-spacing: 0.02em;
  margin-bottom: -1px;
}
.sekme-bar button:hover { color: var(--parsomen); }
.sekme-bar button[aria-selected="true"] {
  color: var(--parsomen);
  border-bottom-color: var(--pirinc);
}
.sekme-bar button:focus-visible {
  outline: 2px solid var(--pirinc-acik);
  outline-offset: -2px;
  border-radius: 4px;
}

.sekme-panel { display: none; }
.sekme-panel[data-aktif="true"] { display: block; }

.eser-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bos-5);
}
.eser-kart {
  background: rgba(14, 23, 51, 0.5);
  border: 1px solid rgba(200, 164, 77, 0.18);
  border-radius: var(--kose-kart);
  padding: var(--bos-5);
  position: relative;
  transition: border-color var(--gecis), transform var(--gecis);
}
.eser-kart:hover {
  border-color: rgba(200, 164, 77, 0.45);
  transform: translateY(-2px);
}
.eser-kart h3 {
  margin: 0 0 var(--bos-1);
  font-size: 1.25rem;
}
.eser-kart .orijinal-ad {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc);
  font-size: 0.92rem;
  margin: 0 0 var(--bos-3);
}
.eser-kart p {
  font-size: 0.95rem;
  color: var(--gokyuzu-mat);
  margin: 0;
  line-height: 1.65;
}

.eser-kart--imza {
  border: 1px solid rgba(200, 164, 77, 0.55);
  background:
    radial-gradient(ellipse at top right, rgba(200, 164, 77, 0.1), transparent 70%),
    rgba(14, 23, 51, 0.6);
}
.eser-kart--imza .imza-rozet {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--pirinc-acik);
  padding: 3px 10px;
  border: 1px solid rgba(231, 205, 134, 0.5);
  border-radius: 999px;
  margin-bottom: var(--bos-3);
}

/* Optik uyarısı */
.optik-uyari {
  margin-top: var(--bos-5);
  padding: var(--bos-4) var(--bos-5);
  background: rgba(181, 83, 46, 0.08);
  border-left: 3px solid var(--mercan);
  border-radius: 0 var(--kose-kart) var(--kose-kart) 0;
  font-size: 0.92rem;
  color: var(--gokyuzu-mat);
  line-height: 1.6;
}
.optik-uyari strong { color: var(--mercan); }
.optik-uyari em { color: var(--pirinc-acik); font-style: italic; }

/* Mühendislik vitrini */
.bulus-bolum {
  margin-top: var(--bos-9);
}
.bulus-bolum .bolum-bas {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--bos-6);
}
.bulus-vitrin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bos-6);
}
@media (max-width: 760px) {
  .bulus-vitrin { grid-template-columns: 1fr; }
}
.bulus-vitrin article {
  background: linear-gradient(160deg, rgba(14, 23, 51, 0.7), rgba(7, 11, 28, 0.85));
  border: 1px solid rgba(200, 164, 77, 0.3);
  border-radius: var(--kose-kart);
  padding: var(--bos-6);
}
.bulus-vitrin .yil-vurgu {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--mercan);
  font-size: 1rem;
  display: block;
  margin-bottom: var(--bos-3);
  letter-spacing: 0.04em;
}
.bulus-vitrin h3 {
  margin: 0 0 var(--bos-3);
  font-size: 1.35rem;
}
.bulus-vitrin p {
  font-size: 0.96rem;
  color: var(--gokyuzu-mat);
  margin: 0 0 var(--bos-3);
  line-height: 1.7;
}
.bulus-vitrin p:last-child { margin-bottom: 0; }

/* --- 16. Kuyruklu Yıldız sayfası ----------------------- */
.komet-hero {
  position: relative;
  min-height: clamp(560px, 90vh, 820px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(35, 50, 100, 0.45), transparent 65%),
    radial-gradient(ellipse at 80% 20%, rgba(8, 12, 32, 0.85), transparent 70%),
    linear-gradient(to bottom, var(--gece-derin) 0%, #02030a 70%, var(--gece-derin) 100%);
  isolation: isolate;
}

/* Hareket eden kuyruklu yıldız katmanı */
.komet-sahne {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.komet-sahne svg {
  position: absolute;
  width: 220%;
  height: auto;
  top: 12%;
  left: -120%;
  animation: komet-gec 80s linear infinite;
  filter: drop-shadow(0 0 24px rgba(231, 205, 134, 0.35));
}

@keyframes komet-gec {
  0%   { transform: translateX(0) translateY(0); opacity: 0; }
  6%   { opacity: 0.95; }
  50%  { transform: translateX(50%) translateY(8%); opacity: 1; }
  94%  { opacity: 0.95; }
  100% { transform: translateX(100%) translateY(16%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .komet-sahne svg {
    animation: none;
    transform: translateX(40%) translateY(6%);
    opacity: 0.7;
  }
}

.komet-hero__ic {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--bos-5);
  max-width: 820px;
}
.komet-hero h1 {
  font-style: italic;
  font-weight: 400;
  color: var(--parsomen);
  margin-bottom: var(--bos-3);
}
.komet-hero__alt {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc-acik);
  font-size: 1.2rem;
  margin-bottom: var(--bos-5);
}
.komet-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--bos-3);
  color: var(--gokyuzu-mat);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.komet-hero__tag::before,
.komet-hero__tag::after {
  content: "";
  height: 1px;
  width: 38px;
  background: linear-gradient(to right, transparent, var(--pirinc), transparent);
}

/* Veri kartları — komet hızlı bilgi */
.komet-veri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--bos-4);
  margin: var(--bos-7) auto;
  max-width: 980px;
}
.komet-veri article {
  background: rgba(14, 23, 51, 0.55);
  border: 1px solid rgba(200, 164, 77, 0.2);
  border-radius: var(--kose-kart);
  padding: var(--bos-4) var(--bos-5);
  text-align: center;
}
.komet-veri .deger {
  font-family: var(--font-baslik);
  font-size: 2rem;
  font-weight: 500;
  color: var(--pirinc-acik);
  display: block;
  margin-bottom: var(--bos-1);
  line-height: 1.1;
}
.komet-veri .etiket {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gokyuzu-mat);
}

/* Olay şeridi (timeline-lite) */
.olay-seridi {
  position: relative;
  max-width: 980px;
  margin: var(--bos-7) auto 0;
  padding: var(--bos-6) 0;
}
.olay-seridi::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(200, 164, 77, 0.4) 8%,
    rgba(200, 164, 77, 0.4) 92%, transparent);
}
.olay-seridi__ic {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--bos-2);
  position: relative;
  z-index: 1;
}
@media (max-width: 760px) {
  .olay-seridi__ic { grid-template-columns: 1fr; gap: var(--bos-4); }
  .olay-seridi::before { display: none; }
}

.olay-nokta {
  text-align: center;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: var(--bos-2);
  font-family: inherit;
  color: var(--gokyuzu-mat);
  transition: color var(--gecis);
}
.olay-nokta:hover { color: var(--parsomen); }

.olay-nokta__dot {
  width: 14px;
  height: 14px;
  margin: 0 auto var(--bos-2);
  background: var(--gece-derin);
  border: 1.5px solid var(--pirinc);
  border-radius: 50%;
  transition: background var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.olay-nokta[aria-pressed="true"] .olay-nokta__dot {
  background: var(--pirinc-acik);
  transform: scale(1.3);
  box-shadow: 0 0 0 6px rgba(231, 205, 134, 0.18);
}
.olay-nokta__tarih {
  font-family: var(--font-vurgu);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--pirinc);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: var(--bos-1);
}
.olay-nokta__baslik {
  font-size: 0.78rem;
  line-height: 1.3;
  display: block;
}
.olay-nokta[aria-pressed="true"] .olay-nokta__tarih { color: var(--pirinc-acik); }
.olay-nokta[aria-pressed="true"] .olay-nokta__baslik { color: var(--parsomen); }

/* Olay detay paneli */
.olay-detay {
  margin-top: var(--bos-7);
  background: rgba(14, 23, 51, 0.6);
  border: 1px solid rgba(200, 164, 77, 0.25);
  border-radius: var(--kose-kart);
  padding: var(--bos-6);
  max-width: 820px;
  margin-inline: auto;
  min-height: 180px;
}
.olay-detay-icerik[hidden] { display: none; }
.olay-detay h3 {
  margin: 0 0 var(--bos-3);
  font-size: 1.4rem;
}
.olay-detay .meta {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc-acik);
  font-size: 0.95rem;
  display: block;
  margin-bottom: var(--bos-3);
}
.olay-detay p {
  color: var(--gokyuzu-mat);
  margin: 0 0 var(--bos-3);
  line-height: 1.7;
}
.olay-detay p:last-child { margin-bottom: 0; }

/* Takiyüddin'in raporu — alıntı bloğu */
.rapor-blok {
  margin: var(--bos-9) auto var(--bos-7);
  max-width: 820px;
  text-align: center;
  padding: var(--bos-7) var(--bos-6);
  background:
    radial-gradient(ellipse at top, rgba(200, 164, 77, 0.08), transparent 70%),
    rgba(14, 23, 51, 0.55);
  border: 1px solid rgba(200, 164, 77, 0.3);
  border-radius: var(--kose-kart);
  position: relative;
}
.rapor-blok::before,
.rapor-blok::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 1px;
  background: var(--pirinc);
  opacity: 0.5;
  top: 50%;
}
.rapor-blok::before { left: -30px; }
.rapor-blok::after  { right: -30px; }
@media (max-width: 900px) {
  .rapor-blok::before, .rapor-blok::after { display: none; }
}

.rapor-blok blockquote {
  margin: 0 0 var(--bos-5);
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--parsomen);
  line-height: 1.4;
  position: relative;
}
.rapor-blok blockquote::before {
  content: "“";
  display: block;
  font-size: 4rem;
  color: var(--pirinc);
  line-height: 0.7;
  margin-bottom: var(--bos-2);
}
.rapor-blok cite {
  font-family: var(--font-govde);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pirinc);
}

/* Çatallanan kader — iki sütun */
.catal-bolum {
  margin-top: var(--bos-8);
}
.catal-bolum .bolum-bas {
  text-align: center;
  margin-bottom: var(--bos-6);
}
.catallar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bos-6);
  position: relative;
}
.catallar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(200, 164, 77, 0.5), transparent);
}
@media (max-width: 760px) {
  .catallar { grid-template-columns: 1fr; }
  .catallar::before { display: none; }
}
.catallar article {
  background: rgba(14, 23, 51, 0.45);
  border: 1px solid rgba(200, 164, 77, 0.22);
  border-radius: var(--kose-kart);
  padding: var(--bos-6);
}
.catallar h3 {
  margin: 0 0 var(--bos-3);
  font-size: 1.35rem;
  font-style: italic;
}
.catallar .yer-etiketi {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pirinc);
  font-weight: 500;
  margin-bottom: var(--bos-3);
}
.catallar p {
  font-size: 0.95rem;
  color: var(--gokyuzu-mat);
  line-height: 1.7;
  margin: 0 0 var(--bos-3);
}
.catallar p:last-child { margin-bottom: 0; }
.catallar .vurgu-cumle {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc-acik);
  font-size: 1.05rem;
  border-left: 2px solid var(--pirinc);
  padding-left: var(--bos-4);
  margin: var(--bos-4) 0;
}

/* --- 17. Astrolab Atölyesi (interaktif) ---------------- */
.atolye-bolum {
  padding-block: var(--bos-7);
}

.atolye-izgara {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 1fr;
  gap: var(--bos-6);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .atolye-izgara { grid-template-columns: 1fr; }
}

/* Astrolab vitrini */
.atolye-vitrin {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at center, rgba(30, 45, 90, 0.4), transparent 70%),
    rgba(7, 11, 28, 0.6);
  border: 1px solid rgba(200, 164, 77, 0.3);
  border-radius: var(--kose-kart);
  overflow: hidden;
  padding: var(--bos-5);
}
.atolye-vitrin svg {
  width: 100%;
  height: 100%;
}
.atolye-vitrin .rete-kontrol {
  transform-box: view-box;
  transform-origin: 500px 500px;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.atolye-vitrin .alidade-kontrol {
  transform-box: view-box;
  transform-origin: 500px 500px;
  transition: transform 350ms ease;
}

/* Kontrol paneli (sağ tarafta) */
.atolye-panel {
  background: rgba(14, 23, 51, 0.5);
  border: 1px solid rgba(200, 164, 77, 0.2);
  border-radius: var(--kose-kart);
  padding: var(--bos-6);
  display: flex;
  flex-direction: column;
  gap: var(--bos-5);
}

.atolye-baslik {
  margin: 0;
  font-size: 1.5rem;
  font-style: italic;
  color: var(--parsomen);
  letter-spacing: 0.01em;
}
.atolye-altyazi {
  margin: 0 0 var(--bos-2);
  color: var(--gokyuzu-mat);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Kaydırıcı (slider) gruplama */
.atolye-grup {
  display: flex;
  flex-direction: column;
  gap: var(--bos-2);
}
.atolye-grup__bas {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.atolye-grup label {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pirinc);
  font-weight: 500;
}
.atolye-grup__deger {
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--pirinc-acik);
  line-height: 1;
}

.atolye-grup input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(200, 164, 77, 0.25);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.atolye-grup input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  background: var(--pirinc-acik);
  border: 2px solid var(--parsomen);
  border-radius: 50%;
  cursor: grab;
  transition: transform var(--gecis);
}
.atolye-grup input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--pirinc-acik);
  border: 2px solid var(--parsomen);
  border-radius: 50%;
  cursor: grab;
}
.atolye-grup input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.atolye-grup input[type="range"]:focus-visible {
  box-shadow: 0 0 0 4px rgba(231, 205, 134, 0.25);
}

/* Bilgi metrikleri */
.atolye-metrik {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bos-3);
  padding: var(--bos-4) 0;
  border-top: 1px solid rgba(200, 164, 77, 0.18);
  border-bottom: 1px solid rgba(200, 164, 77, 0.18);
}
.atolye-metrik > div {
  text-align: center;
}
.atolye-metrik .deger {
  font-family: var(--font-baslik);
  font-size: 1.4rem;
  color: var(--pirinc-acik);
  display: block;
  line-height: 1.1;
  margin-bottom: 2px;
}
.atolye-metrik .etiket {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gokyuzu-mat);
}

/* "Şimdi gökyüzü" yıldız listesi */
.gokyuzu-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--bos-2);
}
.gokyuzu-liste li {
  display: flex;
  align-items: center;
  gap: var(--bos-2);
  font-size: 0.88rem;
  padding: var(--bos-2) var(--bos-3);
  background: rgba(7, 11, 28, 0.5);
  border-radius: 6px;
  border: 1px solid rgba(200, 164, 77, 0.1);
  transition: border-color var(--gecis), color var(--gecis);
}
.gokyuzu-liste li[data-gorunur="true"] {
  border-color: rgba(231, 205, 134, 0.45);
  color: var(--parsomen);
}
.gokyuzu-liste li[data-gorunur="false"] {
  opacity: 0.4;
}
.gokyuzu-liste .nokta {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pirinc);
  flex-shrink: 0;
}
.gokyuzu-liste li[data-gorunur="false"] .nokta { background: var(--gokyuzu-mat); opacity: 0.5; }
.gokyuzu-liste .ad { flex-grow: 1; }
.gokyuzu-liste .durum {
  font-family: var(--font-vurgu);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--pirinc);
}
.gokyuzu-liste li[data-gorunur="false"] .durum { color: var(--gokyuzu-mat); }

/* "Nasıl çalışır" rehber */
.nasil-calisir {
  margin-top: var(--bos-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--bos-5);
}
.nasil-adim {
  background: rgba(14, 23, 51, 0.4);
  border: 1px solid rgba(200, 164, 77, 0.18);
  border-radius: var(--kose-kart);
  padding: var(--bos-5);
}
.nasil-adim__no {
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--pirinc);
  line-height: 1;
  margin-bottom: var(--bos-3);
  display: block;
}
.nasil-adim h3 {
  margin: 0 0 var(--bos-2);
  font-size: 1.15rem;
}
.nasil-adim p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--gokyuzu-mat);
  line-height: 1.65;
}

/* --- 18. Erişilebilirlik — skip link --------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--pirinc-acik);
  color: var(--gece-koyu);
  padding: var(--bos-3) var(--bos-5);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  border-radius: 0 0 var(--kose-kart) 0;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--parsomen);
  outline-offset: 2px;
}

/* --- 19. Ek atölyeler (güneş saati, mekanik saat, buhar şişi) ---- */
.atolye-tema {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bos-6);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 840px) {
  .atolye-tema { grid-template-columns: 1fr; }
}

.atolye-sahne {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at center, rgba(30, 45, 90, 0.4), transparent 70%),
    rgba(7, 11, 28, 0.6);
  border: 1px solid rgba(200, 164, 77, 0.3);
  border-radius: var(--kose-kart);
  overflow: hidden;
  padding: var(--bos-5);
  display: grid;
  place-items: center;
}
.atolye-sahne svg {
  width: 100%; height: 100%;
  max-width: 460px;
}

.atolye-buton {
  background: rgba(200, 164, 77, 0.12);
  color: var(--parsomen);
  border: 1px solid var(--pirinc);
  padding: var(--bos-3) var(--bos-5);
  border-radius: 999px;
  font-family: var(--font-govde);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--bos-2);
  transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.atolye-buton:hover {
  background: var(--pirinc);
  color: var(--gece-koyu);
  transform: translateY(-2px);
}
.atolye-buton[aria-pressed="true"] {
  background: var(--pirinc);
  color: var(--gece-koyu);
}

/* Güneş saati */
.gunes-gnomon { fill: #c8a44d; }
.gunes-golge {
  fill: rgba(0, 0, 0, 0.45);
  transform-box: view-box;
  transform-origin: 200px 200px;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gunes-isık {
  fill: #fff3d6;
  filter: drop-shadow(0 0 16px rgba(231, 205, 134, 0.55));
  transform-box: view-box;
  transform-origin: 200px 200px;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mekanik saat — sarkaç ve akrepler */
.saat-sarkac {
  transform-box: view-box;
  transform-origin: 200px 110px;
  animation: saat-salla 1.4s ease-in-out infinite;
}
@keyframes saat-salla {
  0%, 100% { transform: rotate(-22deg); }
  50%      { transform: rotate(22deg); }
}

.saat-akrep-h {
  transform-box: view-box;
  transform-origin: 200px 200px;
  transition: transform 300ms linear;
}
.saat-akrep-d {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: saat-dakika 60s linear infinite;
}
.saat-akrep-s {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: saat-saniye 60s steps(60, end) infinite;
}
@keyframes saat-dakika { from {transform:rotate(0);} to {transform:rotate(360deg);} }
@keyframes saat-saniye { from {transform:rotate(0);} to {transform:rotate(360deg);} }

.saat-cark {
  transform-box: view-box;
  transform-origin: var(--cark-x, 200px) var(--cark-y, 200px);
  animation: saat-cark-don var(--cark-sure, 6s) linear infinite;
}
.saat-cark--ters { animation-direction: reverse; }
@keyframes saat-cark-don { from {transform:rotate(0);} to {transform:rotate(360deg);} }

@media (prefers-reduced-motion: reduce) {
  .saat-sarkac, .saat-akrep-d, .saat-akrep-s, .saat-cark { animation: none; }
}

/* Buhar şişi — duraklamalı */
[data-atese="kapali"] .duman,
[data-atese="kapali"] .ates,
[data-atese="kapali"] .fan,
[data-atese="kapali"] .sis-don { animation-play-state: paused; opacity: 0; }
[data-atese="acik"] .ates { animation: ates-titre 0.5s ease-in-out infinite; }
[data-atese="acik"] .duman {
  animation: buhar-yuksel 3s ease-out infinite;
  opacity: 0.7;
}
[data-atese="acik"] .fan {
  transform-box: view-box;
  transform-origin: 200px 160px;
  animation: fan-don 1.4s linear infinite;
}
[data-atese="acik"] .sis-don {
  transform-box: view-box;
  transform-origin: 200px 280px;
  animation: sis-don-don 3s linear infinite;
}

@keyframes ates-titre {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: 1; }
  50%      { transform: scaleY(1.15) translateY(-3px); opacity: 0.85; }
}
@keyframes buhar-yuksel {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  40%  { opacity: 0.7; }
  100% { transform: translateY(-90px) scale(1.4); opacity: 0; }
}
@keyframes fan-don { from {transform:rotate(0);} to {transform:rotate(360deg);} }
@keyframes sis-don-don { from {transform:rotate(0);} to {transform:rotate(360deg);} }

@media (prefers-reduced-motion: reduce) {
  [data-atese="acik"] .ates,
  [data-atese="acik"] .duman,
  [data-atese="acik"] .fan,
  [data-atese="acik"] .sis-don { animation: none; }
}

/* --- 20. Öne çıkan rakamlar şeridi (anasayfa) ----------- */
.rakamlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--bos-5);
  padding: var(--bos-7) 0;
  border-top: var(--cizgi-altin-yumusak);
  border-bottom: var(--cizgi-altin-yumusak);
  margin-top: var(--bos-7);
}
.rakam {
  text-align: center;
  position: relative;
}
.rakam::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(200, 164, 77, 0.2);
}
.rakam:last-child::after { display: none; }
@media (max-width: 760px) {
  .rakam::after { display: none; }
}
.rakam__deger {
  font-family: var(--font-baslik);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 500;
  color: var(--pirinc-acik);
  line-height: 1;
  display: block;
  margin-bottom: var(--bos-2);
  letter-spacing: -0.01em;
}
.rakam__deger sup {
  font-size: 0.5em;
  color: var(--pirinc);
  font-style: italic;
}
.rakam__etiket {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gokyuzu-mat);
}
.rakam__altyazi {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc);
  font-size: 0.86rem;
  margin-top: var(--bos-1);
  display: block;
}

/* --- 21. 26 eser listesi accordion ---------------------- */
.eser-toplu {
  margin-top: var(--bos-8);
  padding-top: var(--bos-6);
  border-top: var(--cizgi-altin-yumusak);
}
.eser-toplu summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--bos-3) 0;
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--parsomen);
}
.eser-toplu summary::-webkit-details-marker { display: none; }
.eser-toplu summary::after {
  content: "▾";
  color: var(--pirinc);
  font-size: 1rem;
  transition: transform var(--gecis);
}
.eser-toplu[open] summary::after { transform: rotate(180deg); }

.eser-toplu__icerik {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bos-3) var(--bos-5);
  padding: var(--bos-5) 0 var(--bos-3);
}
.eser-toplu__icerik h4 {
  margin: var(--bos-3) 0 var(--bos-2);
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pirinc);
  font-weight: 500;
}
.eser-toplu__icerik ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bos-2);
}
.eser-toplu__icerik li {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gokyuzu-mat);
  padding-left: var(--bos-4);
  position: relative;
}
.eser-toplu__icerik li::before {
  content: counter(eser, decimal-leading-zero);
  counter-increment: eser;
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc);
  font-size: 0.78rem;
}
.eser-toplu__icerik { counter-reset: eser; }
.eser-toplu__icerik em {
  color: var(--pirinc-acik);
  font-style: italic;
}

/* --- 22. Bilim tarihi şeridi (Mirası) ------------------- */
.bilim-seridi {
  margin: var(--bos-7) auto;
  max-width: 1000px;
  padding: var(--bos-6) 0;
  position: relative;
}
.bilim-seridi::before {
  content: "";
  position: absolute;
  top: 50%; left: 4%; right: 4%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,164,77,0.5), transparent);
}
.bilim-seridi__ic {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--bos-3);
  position: relative;
}
@media (max-width: 760px) {
  .bilim-seridi__ic { grid-template-columns: 1fr; }
  .bilim-seridi::before { display: none; }
}
.bilim-nokta {
  background: transparent;
  border: 0;
  padding: var(--bos-3);
  cursor: pointer;
  text-align: center;
  color: var(--gokyuzu-mat);
  font-family: inherit;
  transition: color var(--gecis);
}
.bilim-nokta:hover { color: var(--parsomen); }
.bilim-nokta__yil {
  font-family: var(--font-baslik);
  font-size: 1.4rem;
  color: var(--pirinc-acik);
  display: block;
  margin-bottom: var(--bos-2);
}
.bilim-nokta__isim {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--bos-1);
}
.bilim-nokta__olay {
  font-family: var(--font-vurgu);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--pirinc);
  display: block;
  line-height: 1.4;
}
.bilim-nokta--takiyuddin .bilim-nokta__yil { color: var(--mercan); }
.bilim-nokta--takiyuddin .bilim-nokta__isim { color: var(--mercan); }

/* --- 23. Doğrudan alıntı kutusu (Hayatı) ---------------- */
.alinti-kutu {
  margin: var(--bos-6) auto;
  max-width: 720px;
  padding: var(--bos-5) var(--bos-6);
  border-left: 3px solid var(--pirinc);
  background: rgba(200, 164, 77, 0.05);
  border-radius: 0 var(--kose-kart) var(--kose-kart) 0;
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--parsomen);
  line-height: 1.6;
}
.alinti-kutu cite {
  display: block;
  margin-top: var(--bos-3);
  font-family: var(--font-govde);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pirinc);
}

/* --- 24. Alet detay accordion (Aletler sayfası) ---------- */
.alet-detay {
  margin-top: var(--bos-3);
  border-top: 1px solid rgba(200, 164, 77, 0.18);
  padding-top: var(--bos-3);
}
.alet-detay summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--pirinc-acik);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--gecis);
}
.alet-detay summary::-webkit-details-marker { display: none; }
.alet-detay summary::after {
  content: "▾";
  transition: transform var(--gecis);
  font-size: 0.85rem;
}
.alet-detay[open] summary::after { transform: rotate(180deg); }
.alet-detay summary:hover { color: var(--parsomen); }
.alet-detay__icerik {
  margin-top: var(--bos-3);
  padding-top: var(--bos-3);
  border-top: 1px dashed rgba(200, 164, 77, 0.18);
  font-size: 0.88rem;
  color: var(--gokyuzu-mat);
  line-height: 1.65;
  text-align: left;
}
.alet-detay__icerik p { margin: 0 0 var(--bos-2); }
.alet-detay__icerik p:last-child { margin: 0; }
.alet-detay__icerik em { color: var(--pirinc-acik); font-style: italic; }
.alet-detay__icerik strong { color: var(--parsomen); }

/* --- 25. Rasathane ekibi temsili kartlar --------------- */
.ekip-bolum {
  margin-top: var(--bos-8);
}
.ekip-baslik {
  text-align: center;
  margin-bottom: var(--bos-5);
}
.ekip-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--bos-4);
}
.ekip-kart {
  background: rgba(14, 23, 51, 0.5);
  border: 1px solid rgba(200, 164, 77, 0.18);
  border-radius: var(--kose-kart);
  padding: var(--bos-4);
  text-align: center;
  transition: border-color var(--gecis), transform var(--gecis);
}
.ekip-kart:hover {
  border-color: rgba(200, 164, 77, 0.45);
  transform: translateY(-2px);
}
.ekip-kart__siluet {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--bos-3);
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(200, 164, 77, 0.25), rgba(14, 23, 51, 0.5));
  border: 1px solid rgba(200, 164, 77, 0.35);
  display: grid;
  place-items: center;
  color: var(--pirinc-acik);
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: 1.6rem;
}
.ekip-kart h4 {
  margin: 0 0 var(--bos-1);
  font-size: 1rem;
  color: var(--parsomen);
}
.ekip-kart .gorev {
  font-family: var(--font-vurgu);
  font-style: italic;
  color: var(--pirinc);
  font-size: 0.84rem;
  display: block;
  margin-bottom: var(--bos-2);
}
.ekip-kart p {
  font-size: 0.84rem;
  color: var(--gokyuzu-mat);
  margin: 0;
  line-height: 1.55;
}

/* --- 26. Mini görev kutusu (Astrolab atölyesi) ---------- */
.gorev-kutu {
  margin-top: var(--bos-5);
  padding: var(--bos-4) var(--bos-5);
  background: linear-gradient(135deg, rgba(181, 83, 46, 0.12), rgba(14, 23, 51, 0.4));
  border: 1px solid rgba(231, 205, 134, 0.35);
  border-radius: var(--kose-kart);
}
.gorev-kutu__bas {
  display: flex;
  align-items: center;
  gap: var(--bos-3);
  margin-bottom: var(--bos-3);
}
.gorev-kutu__rozet {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mercan);
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--mercan);
  border-radius: 999px;
  background: rgba(181, 83, 46, 0.08);
}
.gorev-kutu p {
  margin: 0 0 var(--bos-2);
  font-size: 0.92rem;
  color: var(--gokyuzu-mat);
  line-height: 1.6;
}
.gorev-kutu__durum {
  font-family: var(--font-vurgu);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--pirinc-acik);
  margin-top: var(--bos-3);
  display: block;
}
.gorev-kutu[data-tamam="true"] .gorev-kutu__durum {
  color: #97c459;
}
.gorev-kutu[data-tamam="true"] {
  border-color: rgba(151, 196, 89, 0.55);
}

/* --- 27. Ek atölye stilleri (3D küre, sekstant, libne) -- */
.kure-3d {
  perspective: 800px;
  transform-style: preserve-3d;
}
.kure-3d-icerik {
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  transform-box: view-box;
  transform-origin: center;
}

/* Ölç-oyunu sonuç vurguları */
.olcum-sonuc {
  font-family: var(--font-baslik);
  font-style: italic;
  color: var(--pirinc-acik);
  font-size: 1.5rem;
  text-align: center;
  margin: var(--bos-3) 0;
  letter-spacing: 0.04em;
}
.olcum-sonuc.--basari { color: #97c459; }
.olcum-sonuc.--hatali { color: var(--mercan); }

/* Buton dizisi */
.atolye-buton-dizi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bos-2);
  margin: var(--bos-3) 0;
}
.atolye-buton.--kucuk {
  padding: var(--bos-2) var(--bos-4);
  font-size: 0.74rem;
}

/* --- 28. Atölye seçim butonları (enlem, mevsim, hız) ---- */
.atolye-secim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bos-2);
  margin-top: var(--bos-3);
}
.atolye-secim button {
  background: transparent;
  border: 1px solid rgba(200, 164, 77, 0.35);
  color: var(--gokyuzu-mat);
  padding: var(--bos-2) var(--bos-4);
  border-radius: 999px;
  font-family: var(--font-govde);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.atolye-secim button:hover {
  color: var(--parsomen);
  border-color: var(--pirinc);
}
.atolye-secim button[aria-pressed="true"] {
  background: rgba(200, 164, 77, 0.18);
  color: var(--parsomen);
  border-color: var(--pirinc);
}

/* Sayaç gösterge — büyük puan */
.sayac-kutu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bos-3);
  padding: var(--bos-4);
  background: rgba(7, 11, 28, 0.6);
  border: 1px solid rgba(200, 164, 77, 0.18);
  border-radius: var(--kose-kart);
  margin: var(--bos-3) 0;
}
.sayac-kutu .sayi {
  font-family: var(--font-baslik);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--pirinc-acik);
  text-align: center;
  display: block;
  line-height: 1;
}
.sayac-kutu .etiket {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gokyuzu-mat);
  margin-top: var(--bos-2);
  display: block;
}

/* Saat hız göstergesi (renkli bar) */
.hiz-bar {
  display: flex;
  gap: 4px;
  margin-top: var(--bos-2);
}
.hiz-bar span {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(200, 164, 77, 0.18);
}
.hiz-bar[data-hiz="yavas"] span:nth-child(-n+1),
.hiz-bar[data-hiz="normal"] span:nth-child(-n+2),
.hiz-bar[data-hiz="hizli"] span:nth-child(-n+3) { background: var(--pirinc-acik); }

/* Buhar/ateş seviyesi göstergesi */
.seviye-bar {
  display: flex;
  gap: 3px;
  margin-top: var(--bos-2);
}
.seviye-bar span {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: rgba(200, 164, 77, 0.18);
  transition: background var(--gecis);
}
.seviye-bar[data-seviye="dusuk"] span:nth-child(-n+2) { background: var(--mercan); }
.seviye-bar[data-seviye="orta"] span:nth-child(-n+3) { background: var(--pirinc); }
.seviye-bar[data-seviye="yuksek"] span { background: var(--pirinc-acik); }

/* Saat akrebi senkron sürükle */
.akrep-rehber {
  margin-top: var(--bos-3);
  padding: var(--bos-3);
  background: rgba(200, 164, 77, 0.06);
  border-left: 2px solid var(--pirinc);
  font-size: 0.86rem;
  color: var(--gokyuzu-mat);
  font-family: var(--font-vurgu);
  font-style: italic;
}

/* Buhar yüksek — kazan kızıl glow */
[data-ates="yuksek"] .ates {
  filter: drop-shadow(0 0 12px rgba(231, 100, 50, 0.7));
}
[data-ates="yuksek"] .duman {
  animation-duration: 1.5s !important;
}
[data-ates="orta"] .duman {
  animation-duration: 2.5s !important;
}
[data-ates="dusuk"] .duman {
  animation-duration: 4s !important;
  opacity: 0.4 !important;
}
[data-ates="dusuk"] .fan {
  animation-duration: 3s !important;
}
[data-ates="orta"] .fan {
  animation-duration: 1.8s !important;
}
[data-ates="yuksek"] .fan {
  animation-duration: 0.8s !important;
}
[data-ates="dusuk"] .sis-don { animation-duration: 6s !important; }
[data-ates="orta"] .sis-don { animation-duration: 3s !important; }
[data-ates="yuksek"] .sis-don { animation-duration: 1.5s !important; }

/* =========================================================
   --- 29. Mobil optimizasyon (≤640px ve ≤480px) ---------
   Kapsamlı responsive geliştirme — telefon ekranları için
   ========================================================= */

@media (max-width: 720px) {
  /* Temel tipografi - daha küçük */
  body { font-size: 16px; }
  h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  h2 { font-size: clamp(1.55rem, 5.5vw, 1.95rem); }
  h3 { font-size: clamp(1.15rem, 4vw, 1.3rem); }

  /* Kapsayıcı padding daralt */
  .kapsayici { padding-inline: var(--bos-4); }
  .bolum { padding-block: var(--bos-6); }

  /* Sayfa başlığı (sayfa-bas) küçült */
  .sayfa-bas { padding-block: var(--bos-7) var(--bos-5); }
  .sayfa-bas__altyazi { font-size: 1rem; }

  /* Hero — anasayfa */
  .hero { min-height: clamp(480px, 80vh, 640px); }
  .hero__ic { padding-inline: var(--bos-4); }
  .hero h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
  .hero__ozet { font-size: 1rem; margin-bottom: var(--bos-5); }
  .hero__cta {
    padding: var(--bos-2) var(--bos-4);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
  .hero__astrolab svg {
    width: min(160vmin, 600px);
    opacity: 0.18;
  }
  .hero__kaydir { font-size: 0.62rem; bottom: var(--bos-3); }

  /* Rakamlar şeridi — 2 sütun */
  .rakamlar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--bos-4);
    padding-block: var(--bos-5);
  }
  .rakam__deger { font-size: clamp(2rem, 8vw, 2.6rem); }
  .rakam__etiket { font-size: 0.7rem; letter-spacing: 0.15em; }
  .rakam::after { display: none; }
  .rakam {
    padding: var(--bos-3) 0;
    border-bottom: 1px solid rgba(200, 164, 77, 0.12);
  }
  .rakamlar > .rakam:nth-last-child(-n+2) { border-bottom: 0; }

  /* Site nav — mobil menü zaten var, ama 8 öğe için scroll */
  .site-bas__ic { padding-block: var(--bos-2); }
  .marka { font-size: 1.05rem; }
  .marka__sembol { width: 24px; height: 24px; }
  .marka__isim small { font-size: 0.58rem; }

  /* Bölüm kartları — anasayfa */
  .kart-izgara { gap: var(--bos-4); }
  .kart { padding: var(--bos-5) var(--bos-4); }
  .kart h3 { font-size: 1.15rem; }
  .kart p { font-size: 0.88rem; }

  /* Aletler galerisi - tek sütun bazen */
  .aletler-galeri {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--bos-4);
  }
  .alet-kart { padding: var(--bos-4); }
  .alet-kart__gorsel { height: 110px; }
  .alet-kart__gorsel svg { max-width: 100px; max-height: 100px; }
  .alet-kart h3 { font-size: 1.1rem; }
  .alet-kart .orijinal-ad { font-size: 0.8rem; }
  .alet-kart__aciklama { font-size: 0.86rem; }

  /* Şehinşehname sahnesi — küçük noktalar */
  .sahne { max-width: 100%; padding: 0; }
  .sahne__nokta {
    width: 18px; height: 18px;
    border-width: 1.5px;
  }
  .sahne__nokta::before {
    inset: -8px;
    border-width: 1px;
  }
  .sahne__nokta__no { font-size: 10px; }
  .sahne-panel { padding: var(--bos-4); }
  .sahne-panel h3 { font-size: 1.2rem; }

  /* Rasathane bilgi kartları */
  .rasathane-bilgi { gap: var(--bos-4); }
  .rasathane-bilgi article { padding: var(--bos-4); }
  .ekip-kart { padding: var(--bos-3); }
  .ekip-kart__siluet { width: 44px; height: 44px; font-size: 1.3rem; }
  .ekip-kart h4 { font-size: 0.9rem; }
  .ekip-kart p { font-size: 0.78rem; }

  /* Sekme bar — yatay scroll */
  .sekme-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--pirinc) transparent;
  }
  .sekme-bar::-webkit-scrollbar { height: 4px; }
  .sekme-bar::-webkit-scrollbar-thumb { background: var(--pirinc); border-radius: 2px; }
  .sekme-bar button {
    flex-shrink: 0;
    font-size: 0.96rem;
    padding: var(--bos-2) var(--bos-3);
  }

  /* Eser listesi */
  .eser-listesi { gap: var(--bos-3); }
  .eser-kart { padding: var(--bos-4); }
  .eser-kart h3 { font-size: 1.1rem; }

  /* Mühendislik vitrini */
  .bulus-vitrin article { padding: var(--bos-4); }
  .bulus-vitrin h3 { font-size: 1.15rem; }

  /* Atölye — küçük ekran */
  .atolye-izgara,
  .atolye-tema {
    grid-template-columns: 1fr;
    gap: var(--bos-4);
  }
  .atolye-vitrin,
  .atolye-sahne {
    aspect-ratio: 1 / 1;
    max-width: 100%;
    padding: var(--bos-3);
  }
  .atolye-panel { padding: var(--bos-4); }
  .atolye-baslik { font-size: 1.3rem; }
  .atolye-grup label { font-size: 0.7rem; }
  .atolye-grup__deger { font-size: 1.1rem; }

  /* Atölye seçim butonları sığsın */
  .atolye-secim {
    flex-wrap: wrap;
    gap: var(--bos-1);
  }
  .atolye-secim button {
    font-size: 0.7rem;
    padding: var(--bos-1) var(--bos-3);
    letter-spacing: 0.06em;
  }

  /* Görev kutusu */
  .gorev-kutu { padding: var(--bos-3) var(--bos-4); }
  .gorev-kutu p { font-size: 0.85rem; }
  .gorev-kutu__durum { font-size: 0.92rem; }

  /* Sayaç kutusu */
  .sayac-kutu .sayi { font-size: 1.7rem; }

  /* Yıldız listesi (astrolab atölyesi) — küçük ekran 1 sütun */
  .gokyuzu-liste {
    grid-template-columns: 1fr;
  }

  /* Bilim halkası */
  .bilim-nokta { padding: var(--bos-2); }
  .bilim-nokta__yil { font-size: 1.2rem; }

  /* Komet hero */
  .komet-hero { min-height: clamp(420px, 70vh, 600px); }
  .komet-sahne svg { width: 260%; }
  .komet-hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .komet-hero__alt { font-size: 1rem; }

  /* Olay şeridi (kuyruklu yıldız) — tek sütun zaten var ama küçült */
  .olay-nokta { padding: var(--bos-1); }
  .olay-nokta__tarih { font-size: 0.78rem; }
  .olay-nokta__baslik { font-size: 0.7rem; }

  /* Rapor bloğu (alıntı) */
  .rapor-blok {
    padding: var(--bos-5) var(--bos-4);
    margin-inline: 0;
  }
  .rapor-blok blockquote { font-size: 1.15rem; }
  .rapor-blok::before, .rapor-blok::after { display: none; }

  /* Çatallanan kader */
  .catallar article { padding: var(--bos-4); }
  .catallar h3 { font-size: 1.2rem; }

  /* Zaman çizelgesi mobil (zaten var ama küçük rötuş) */
  .zaman::before { left: 16px; }
  .zaman__durak { padding-left: 44px; }
  .zaman__nokta { left: 16px; width: 12px; height: 12px; }
  .zaman__icerik { padding: var(--bos-4); }
  .zaman__icerik h3 { font-size: 1.15rem; }
  .zaman__icerik p { font-size: 0.88rem; }

  /* Footer */
  .site-alt { padding-block: var(--bos-5) var(--bos-3); }
  .site-alt__ic { gap: var(--bos-4); }
  .site-alt h4 { font-size: 0.72rem; }
  .site-alt__telif {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bos-2);
  }

  /* Sonraki bağlantı */
  .sonraki {
    margin: var(--bos-7) auto var(--bos-4);
    padding: var(--bos-4) var(--bos-3);
  }
  .sonraki a {
    padding: var(--bos-2) var(--bos-4);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
  }

  /* Rota grafiği — Hayatı sayfası */
  .rota { padding: var(--bos-3); }

  /* Yıkım kutusu */
  .yikim { padding: var(--bos-4); }
  .yikim h3 { font-size: 1.15rem; }

  /* Alet detay panelleri */
  .alet-detay__icerik { font-size: 0.85rem; }
  .alet-detay summary { font-size: 0.68rem; }

  /* 26 eser accordion */
  .eser-toplu summary { font-size: 1.15rem; padding: var(--bos-2) 0; }
  .eser-toplu__icerik { gap: var(--bos-3); }
  .eser-toplu__icerik li { font-size: 0.85rem; }
}

@media (max-width: 480px) {
  /* Daha küçük ekranlar için ek sıkışma */
  h1 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .kapsayici { padding-inline: var(--bos-3); }
  .bolum { padding-block: var(--bos-5); }

  /* Tek sütun zorla */
  .aletler-galeri,
  .kart-izgara,
  .rasathane-bilgi,
  .ekip-izgara,
  .nasil-calisir,
  .eser-listesi,
  .bulus-vitrin {
    grid-template-columns: 1fr !important;
  }

  /* Rakamlar tek sütun */
  .rakamlar {
    grid-template-columns: 1fr !important;
  }
  .rakam { padding: var(--bos-2) 0; }
  .rakam__deger { font-size: 1.8rem; }

  /* Hero CTA dikey yığma */
  .hero__ic > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero__cta { justify-content: center; }

  /* Atölye sahnesi daha küçük */
  .atolye-vitrin,
  .atolye-sahne { padding: var(--bos-2); }

  /* Şehinşehname noktaları daha küçük */
  .sahne__nokta {
    width: 16px; height: 16px;
  }
  .sahne__nokta__no { font-size: 9px; }

  /* Buton padding'leri sıkıştır */
  .atolye-buton {
    padding: var(--bos-2) var(--bos-4);
    font-size: 0.78rem;
  }

  /* Tarih şeridi rakam vurgu küçült */
  .komet-veri .deger { font-size: 1.4rem; }
}

/* Daha geniş tabletler için */
@media (min-width: 721px) and (max-width: 960px) {
  .aletler-galeri,
  .rasathane-bilgi,
  .bulus-vitrin {
    grid-template-columns: repeat(2, 1fr);
  }
  .atolye-tema {
    grid-template-columns: 1fr;
  }
}

/* Çok yüksek dpi için font netleştirme */
@media (-webkit-min-device-pixel-ratio: 2) {
  body { text-rendering: optimizeLegibility; }
}

/* Yatay ekran (mobil) */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100vh; }
  .sayfa-bas { padding-block: var(--bos-5) var(--bos-3); }
}

/* Dokunmatik cihazlarda hover'ı azalt */
@media (hover: none) {
  .alet-kart:hover,
  .kart:hover,
  .ekip-kart:hover {
    transform: none;
  }
}