/* =================================================================
   RÜYA TABİRLERİ REHBERİ — Tasarım Sistemi
   Palet: gece göğü + ay + altın yıldız
   Tipografi: Amiri (başlık) + Inter (gövde)
   ================================================================= */

/* ---------------- 1. TASARIM JETONLARI ---------------- */
:root {
  /* Gece tonları (koyu → açık) */
  --gece-en-koyu:    #0b0816;
  --gece-koyu:       #0f0a20;
  --gece:            #160f2c;
  --gece-orta:       #1a1230;
  --gece-acik:       #2d1f52;
  --gece-daha-acik:  #3d2d6b;

  /* Ay tonları */
  --ay-koyu:   #7b6baa;
  --ay:        #9b8ec1;
  --ay-acik:   #c4b5e3;

  /* Yıldız (altın vurgu) */
  --yildiz:       #d4af37;
  --yildiz-acik:  #f4d03f;
  --yildiz-sis:   rgba(212, 175, 55, 0.14);

  /* Metin */
  --metin:        #f0eef5;
  --metin-ikincil:#d5d1dd;
  --metin-soluk:  #8a7a9e;

  /* Yüzeyler */
  --yuzey:        var(--gece);
  --yuzey-yukseK: var(--gece-orta);
  --cizgi:        rgba(155, 142, 193, 0.18);
  --cizgi-guclu:  rgba(155, 142, 193, 0.34);

  /* Durum renkleri */
  --basari:  #5fae84;
  --uyari:   #d9a23f;
  --hata:    #d97070;

  /* Tipografi */
  --font-baslik: 'Amiri', 'Georgia', 'Times New Roman', serif;
  --font-govde:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Tip ölçeği (1.25 — majör üçlü) */
  --ol-xs:   0.78rem;
  --ol-sm:   0.875rem;
  --ol-tb:   1rem;
  --ol-lg:   1.25rem;
  --ol-xl:   1.563rem;
  --ol-2xl:  1.953rem;
  --ol-3xl:  2.441rem;
  --ol-4xl:  3.052rem;

  /* Boşluk */
  --bo-1: 0.25rem;
  --bo-2: 0.5rem;
  --bo-3: 0.75rem;
  --bo-4: 1rem;
  --bo-5: 1.5rem;
  --bo-6: 2rem;
  --bo-7: 3rem;
  --bo-8: 4rem;
  --bo-9: 6rem;

  /* Köşe yarıçapı — hiyerarşiye göre farklı */
  --yari-sm:  6px;
  --yari-md:  10px;
  --yari-lg:  16px;
  --yari-tam: 999px;

  /* Gölge */
  --golge-sm: 0 1px 3px rgba(0,0,0,0.35);
  --golge-md: 0 6px 20px rgba(0,0,0,0.38);
  --golge-lg: 0 16px 48px rgba(0,0,0,0.45);

  /* Geçiş */
  --gecis-hizli: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --gecis:       240ms cubic-bezier(0.4, 0, 0.2, 1);
  --gecis-yavas: 420ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Düzen — geniş ekranlarda (1920px) kenarlarda aşırı boşluk kalmasın diye
     geniş tutuldu. Okunabilirlik, tek sütun yerine çok sütunlu
     yerleşimlerle korunuyor (bkz. .metin-sutunlu, .yorum-izgara). */
  --kapsayici: 1560px;
  --kapsayici-orta: 1480px;
  --kapsayici-dar: 1100px;
}

/* ---------------- AÇIK TEMA — "Blue Serenity" paleti ---------------- */
/* Palet basamakları: #eef2fc → #e6edfb → #dde6fa → #d2defa
                      → #c5d4f9 → #b8caf8 → #a9bef7                   */
:root[data-tema="acik"] {
  --gece-en-koyu:   #eef2fc;   /* sayfa zemini  — paletin en açığı */
  --gece-koyu:      #e6edfb;   /* alt bilgi zemini */
  --gece:           #ffffff;   /* kart yüzeyi */
  --gece-orta:      #f4f7fe;   /* hafif yükseltilmiş yüzey */
  --gece-acik:      #dde6fa;   /* etiket / ikincil düğme */
  --gece-daha-acik: #c5d4f9;   /* vurgulu yüzey */

  /* Bağlantı mavileri — açık zeminde okunabilmesi için koyulaştırıldı */
  --ay-koyu:  #7387c4;
  --ay:       #455ca8;
  --ay-acik:  #2e4489;

  /* Altın vurgu — açık zeminde kontrast için koyulaştırıldı */
  --yildiz:      #8a6a12;
  --yildiz-acik: #6f540c;
  --yildiz-sis:  rgba(138, 106, 18, 0.12);

  --metin:         #16213f;   /* koyu lacivert */
  --metin-ikincil: #34406b;
  --metin-soluk:   #5c688d;

  --cizgi:       rgba(22, 33, 63, 0.13);
  --cizgi-guclu: rgba(22, 33, 63, 0.24);

  --golge-sm: 0 1px 3px rgba(22,33,63,0.08);
  --golge-md: 0 6px 20px rgba(22,33,63,0.10);
  --golge-lg: 0 16px 48px rgba(22,33,63,0.14);
}

/* Açık temada altın düğmenin üstündeki metin koyu zemin ister */
:root[data-tema="acik"] .dugme-birincil {
  background: linear-gradient(135deg, #2e4489 0%, #455ca8 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(46, 68, 137, 0.22);
}
:root[data-tema="acik"] .dugme-birincil:hover {
  color: #ffffff;
  box-shadow: 0 8px 28px rgba(46, 68, 137, 0.30);
}
:root[data-tema="acik"] .sayfalama-aktif {
  background: #2e4489;
  border-color: #2e4489;
  color: #ffffff;
}
:root[data-tema="acik"] .hero-vurgu {
  background: linear-gradient(120deg, #2e4489, #6f540c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--gece-en-koyu);
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: var(--ol-tb);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Yıldızlı gece arka planı — iki katmanlı, çok hafif */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(61, 45, 107, 0.45), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 15%, rgba(212, 175, 55, 0.07), transparent 55%),
    var(--gece-en-koyu);
  pointer-events: none;
}

:root[data-tema="acik"] body::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(217, 205, 185, 0.5), transparent 60%),
    var(--gece-en-koyu);
}

/* ---- Yıldız katmanları ----
   İki ayrı katman: biri küçük ve yoğun, biri büyük ve seyrek.
   Farklı hızlarda sönüp parladıkları için gökyüzü canlı görünür. */
.gokyuzu {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.yildiz-katman {
  position: absolute;
  inset: -50%;
  background-repeat: repeat;
}

/* Küçük yıldızlar — yoğun */
.yildiz-katman-1 {
  background-image:
    radial-gradient(1px 1px at 12% 18%,  rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 28% 42%,  rgba(196,181,227,0.85), transparent),
    radial-gradient(1px 1px at 64% 56%,  rgba(255,255,255,0.80), transparent),
    radial-gradient(1px 1px at 78% 26%,  rgba(196,181,227,0.90), transparent),
    radial-gradient(1px 1px at 34% 78%,  rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 8%  62%,  rgba(196,181,227,0.70), transparent),
    radial-gradient(1px 1px at 52% 88%,  rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 92% 44%,  rgba(196,181,227,0.75), transparent),
    radial-gradient(1px 1px at 44% 32%,  rgba(255,255,255,0.60), transparent),
    radial-gradient(1px 1px at 20% 94%,  rgba(196,181,227,0.65), transparent);
  background-size: 420px 420px;
  animation: yildiz-sol 11s ease-in-out infinite, gokyuzu-kay 190s linear infinite;
}

/* Büyük yıldızlar — seyrek, altın tonlu */
.yildiz-katman-2 {
  background-image:
    radial-gradient(1.8px 1.8px at 46% 12%, rgba(244,208,63,0.75), transparent),
    radial-gradient(1.8px 1.8px at 88% 68%, rgba(244,208,63,0.60), transparent),
    radial-gradient(2px   2px   at 16% 52%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.8px 1.8px at 70% 84%, rgba(244,208,63,0.55), transparent),
    radial-gradient(2px   2px   at 36% 66%, rgba(255,255,255,0.70), transparent);
  background-size: 680px 680px;
  animation: yildiz-sag 7s ease-in-out infinite, gokyuzu-kay 320s linear infinite reverse;
}

@keyframes yildiz-sol { 0%,100% { opacity: 0.40; } 50% { opacity: 0.75; } }
@keyframes yildiz-sag { 0%,100% { opacity: 0.70; } 50% { opacity: 0.35; } }

/* Çok yavaş yatay kayma — gökyüzünün döndüğü hissi */
@keyframes gokyuzu-kay {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-420px, 0, 0); }
}

/* ---- Fare imlecini takip eden parıltı ---- */
.imlec-parilti {
  position: fixed;
  top: 0; left: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;      /* merkezi imlece hizala */
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle closest-side,
              rgba(212, 175, 55, 0.14) 0%,
              rgba(155, 142, 193, 0.09) 38%,
              transparent 72%);
  transition: opacity 500ms ease;
  will-change: transform;
}
.imlec-parilti.gorunur { opacity: 1; }

/* Açık temada gökyüzü kapalı, parıltı daha yumuşak */
:root[data-tema="acik"] .gokyuzu { display: none; }
:root[data-tema="acik"] .imlec-parilti {
  background: radial-gradient(circle closest-side,
              rgba(69, 92, 168, 0.10) 0%,
              rgba(138, 106, 18, 0.06) 40%,
              transparent 72%);
}

/* ---------------- 3. TİPOGRAFİ ---------------- */
h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: 700;
  line-height: 1.22;
  margin: 0 0 var(--bo-4);
  color: var(--metin);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, var(--ol-4xl)); }
h2 { font-size: clamp(1.6rem, 3.6vw, var(--ol-3xl)); }
h3 { font-size: clamp(1.25rem, 2.4vw, var(--ol-xl)); }
h4 { font-size: var(--ol-lg); }

p {
  margin: 0 0 var(--bo-4);
  max-width: 72ch;          /* satır uzunluğu sınırı */
}

a {
  color: var(--ay-acik);
  text-decoration-color: rgba(196, 181, 227, 0.35);
  text-underline-offset: 3px;
  transition: color var(--gecis-hizli), text-decoration-color var(--gecis-hizli);
}
a:hover { color: var(--yildiz-acik); text-decoration-color: var(--yildiz); }

/* Klavye odağı — erişilebilirlik için görünür olmalı */
:focus-visible {
  outline: 2px solid var(--yildiz);
  outline-offset: 3px;
  border-radius: var(--yari-sm);
}

strong { color: var(--metin); font-weight: 600; }
small  { font-size: var(--ol-sm); color: var(--metin-soluk); }

/* ---------------- 4. DÜZEN ---------------- */
.kapsayici {
  width: 100%;
  max-width: var(--kapsayici);
  margin-inline: auto;
  padding-inline: var(--bo-4);
}

/* margin-inline şart: .kapsayici içinde tek başına kullanıldığında
   ortalanmazsa blok sola yapışır. */
.kapsayici-dar {
  max-width: var(--kapsayici-dar);
  margin-inline: auto;
}

/* Uzun metin bölümleri için orta genişlik — kenarlarda daha az boşluk */
.kapsayici-orta {
  max-width: var(--kapsayici-orta);
  margin-inline: auto;
}

.bolum { padding-block: var(--bo-8); }
.bolum-kucuk { padding-block: var(--bo-6); }

.bolum-basi {
  text-align: center;
  margin-bottom: var(--bo-6);
}
.bolum-basi p {
  margin-inline: auto;
  color: var(--metin-ikincil);
  max-width: 58ch;
}

.izgara { display: grid; gap: var(--bo-4); }
.izgara-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.izgara-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.izgara-4 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* Sabit sütunlu ızgaralar — 3x3, 4x3 gibi düzenler için.
   auto-fill değil; sütun sayısı ekran genişliğiyle kademeli azalır. */
.izgara-sabit-3 { grid-template-columns: repeat(3, 1fr); }
.izgara-sabit-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .izgara-sabit-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .izgara-sabit-3,
  .izgara-sabit-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .izgara-sabit-3,
  .izgara-sabit-4 { grid-template-columns: 1fr; }
}

/* ---------------- 5. ÜST MENÜ ---------------- */
.ust-menu {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 8, 22, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cizgi);
}
:root[data-tema="acik"] .ust-menu { background: rgba(255, 255, 255, 0.85); }

.ust-menu-ic {
  display: flex;
  align-items: center;
  gap: var(--bo-5);
  min-height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--bo-2);
  font-family: var(--font-baslik);
  font-size: var(--ol-lg);
  font-weight: 700;
  color: var(--metin);
  text-decoration: none;
  white-space: nowrap;
}
.logo-simge {
  font-size: 1.4em;
  line-height: 1;
  filter: drop-shadow(0 0 10px var(--yildiz-sis));
}
.logo:hover { color: var(--yildiz-acik); }

.ana-menu {
  display: flex;
  align-items: center;
  gap: var(--bo-1);
  margin-left: auto;
  list-style: none;
  padding: 0;
}
.ana-menu a {
  display: block;
  padding: var(--bo-2) var(--bo-3);
  border-radius: var(--yari-sm);
  color: var(--metin-ikincil);
  font-size: var(--ol-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}
.ana-menu a:hover,
.ana-menu a.aktif {
  background: var(--gece-acik);
  color: var(--metin);
}

.menu-sag { display: flex; align-items: center; gap: var(--bo-2); }

/* Mobil menü düğmesi */
.menu-dugme {
  display: none;
  background: none;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--yari-sm);
  color: var(--metin);
  padding: var(--bo-2) var(--bo-3);
  font-size: var(--ol-lg);
  cursor: pointer;
  line-height: 1;
}

/* Tema değiştirici */
.tema-dugme {
  background: none;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--yari-tam);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--metin-ikincil);
  cursor: pointer;
  font-size: 1rem;
  transition: border-color var(--gecis-hizli), color var(--gecis-hizli), transform var(--gecis-hizli);
}
.tema-dugme:hover {
  border-color: var(--yildiz);
  color: var(--yildiz-acik);
  transform: rotate(-18deg);
}

/* ---------------- 6. DÜĞMELER ---------------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bo-2);
  padding: var(--bo-3) var(--bo-5);
  min-height: 46px;                 /* dokunma hedefi */
  border: 1px solid transparent;
  border-radius: var(--yari-md);
  font-family: var(--font-govde);
  font-size: var(--ol-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--gecis-hizli), box-shadow var(--gecis),
              background var(--gecis-hizli), border-color var(--gecis-hizli);
}

.dugme-birincil {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e8c14a 0%, var(--yildiz-acik) 45%, #c9a227 100%);
  color: #1d1604;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-color: rgba(255, 240, 180, 0.45);
  box-shadow:
    0 2px 0 rgba(255, 245, 200, 0.35) inset,
    0 6px 22px rgba(212, 175, 55, 0.30),
    0 0 0 1px rgba(212, 175, 55, 0.18);
}
.dugme-birincil:hover {
  color: #1d1604;
  transform: translateY(-2px);
  box-shadow:
    0 2px 0 rgba(255, 245, 200, 0.45) inset,
    0 10px 30px rgba(212, 175, 55, 0.42),
    0 0 0 1px rgba(212, 175, 55, 0.28);
}
.dugme-birincil:active { transform: translateY(0); }

/* Üzerine gelince soldan sağa geçen parlaklık */
.dugme-birincil::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg,
              transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 620ms ease;
  pointer-events: none;
}
.dugme-birincil:hover::after { left: 125%; }

@media (prefers-reduced-motion: reduce) {
  .dugme-birincil::after { display: none; }
}

.dugme-ikincil {
  background: var(--gece-acik);
  color: var(--metin);
  border-color: var(--cizgi-guclu);
}
.dugme-ikincil:hover {
  background: var(--gece-daha-acik);
  color: var(--metin);
  transform: translateY(-2px);
}

.dugme-cerceve {
  background: transparent;
  color: var(--ay-acik);
  border-color: var(--cizgi-guclu);
}
.dugme-cerceve:hover { border-color: var(--yildiz); color: var(--yildiz-acik); }

.dugme-kucuk { padding: var(--bo-2) var(--bo-3); min-height: 36px; font-size: var(--ol-xs); }
.dugme-tam   { width: 100%; }

/* ---------------- 7. HERO ---------------- */
.hero {
  position: relative;
  padding-block: var(--bo-9) var(--bo-8);
  text-align: center;
  overflow: hidden;
}

.hero-rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--bo-2);
  padding: var(--bo-2) var(--bo-4);
  margin-bottom: var(--bo-5);
  background: var(--yildiz-sis);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--yari-tam);
  font-size: var(--ol-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--yildiz-acik);
}

.hero h1 { margin-bottom: var(--bo-4); }

.hero-vurgu {
  display: block;
  background: linear-gradient(120deg, var(--yildiz-acik), var(--ay-acik));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-aciklama {
  margin-inline: auto;
  margin-bottom: var(--bo-6);
  max-width: 56ch;
  font-size: var(--ol-lg);
  color: var(--metin-ikincil);
}

.hero-dugmeler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bo-3);
  margin-bottom: var(--bo-5);
}

/* İki düğme eşit genişlikte dursun — metin uzunlukları farklı olsa da.
   En uzun etiket ("Ücretsiz Rüya Yorumlat") 261px; hepsi 268'e sabitlenir. */
.hero-dugmeler .dugme {
  min-width: 268px;
  padding-block: var(--bo-4);
  font-size: var(--ol-tb);
}

/* Bölüm altındaki tek düğmeyi sayfaya ortala */
.dugme-ortala {
  display: flex;
  justify-content: center;
  margin-top: var(--bo-6);
}

.hero-guvence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bo-4);
  font-size: var(--ol-sm);
  color: var(--metin-soluk);
}
.hero-guvence span { display: inline-flex; align-items: center; gap: var(--bo-1); }

/* ---------------- 8. İSTATİSTİK ŞERİDİ ---------------- */
.istatistik-serit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--bo-4);
  padding: var(--bo-5);
  background: linear-gradient(180deg, var(--gece) 0%, var(--gece-koyu) 100%);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-lg);
  box-shadow: var(--golge-md);
}
.istatistik { text-align: center; }
.istatistik-sayi {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--ol-2xl);
  font-weight: 700;
  color: var(--yildiz-acik);
  line-height: 1.1;
}
.istatistik-etiket {
  font-size: var(--ol-sm);
  color: var(--metin-soluk);
}

/* ---------------- 9. KARTLAR ---------------- */
.kart {
  display: flex;
  flex-direction: column;
  padding: var(--bo-5);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.kart:hover {
  border-color: var(--cizgi-guclu);
  transform: translateY(-3px);
  box-shadow: var(--golge-md);
  color: inherit;
}

.kart-ikon { font-size: 1.75rem; line-height: 1; margin-bottom: var(--bo-3); }
.kart-baslik {
  font-family: var(--font-baslik);
  font-size: var(--ol-lg);
  font-weight: 700;
  margin-bottom: var(--bo-2);
  color: var(--metin);
}
.kart:hover .kart-baslik { color: var(--yildiz-acik); }
.kart-ozet {
  font-size: var(--ol-sm);
  color: var(--metin-ikincil);
  margin-bottom: var(--bo-3);
  flex-grow: 1;
}
.kart-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-2);
  font-size: var(--ol-xs);
  color: var(--metin-soluk);
  padding-top: var(--bo-3);
  border-top: 1px solid var(--cizgi);
}

/* Küçük sembol kartı */
.sembol-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--bo-4) var(--bo-3);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--gecis-hizli), transform var(--gecis-hizli), background var(--gecis-hizli);
}
.sembol-kart:hover {
  border-color: var(--yildiz);
  background: var(--gece-orta);
  transform: translateY(-2px);
  color: inherit;
}
.sembol-kart-ikon { font-size: 1.6rem; margin-bottom: var(--bo-2); }
.sembol-kart-ad {
  font-size: var(--ol-sm);
  font-weight: 600;
  color: var(--metin);
  line-height: 1.35;
}
.sembol-kart-adet { font-size: var(--ol-xs); color: var(--metin-soluk); margin-top: var(--bo-1); }

/* ---------------- 10. ÖZEL PANELLER ---------------- */
.ikili-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--bo-4);
}

.panel {
  padding: var(--bo-5);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-lg);
}
.panel-etiket {
  font-size: var(--ol-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--yildiz);
  margin-bottom: var(--bo-3);
}
.panel-alinti {
  font-family: var(--font-baslik);
  font-size: var(--ol-xl);
  line-height: 1.45;
  color: var(--metin);
  margin: 0;
}

/* ---------------- 11. ADIMLAR ---------------- */
/* Üç adım, kartvizit görünümünde, aralarında ok */
.adimlar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bo-6);
  align-items: stretch;
}

.adim {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--bo-6) var(--bo-5) var(--bo-5);
  background: linear-gradient(180deg, var(--gece-orta) 0%, var(--gece) 100%);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-lg);
  box-shadow: var(--golge-sm);
  transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.adim:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-3px);
  box-shadow: var(--golge-md);
}

/* Kartlar arasındaki ok — son karttan sonra çizilmez */
.adim:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 50%;
  right: calc(var(--bo-6) * -1);
  width: var(--bo-6);
  transform: translate(0, -50%);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--yildiz);
  opacity: 0.75;
  pointer-events: none;
}

.adim-numara {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: var(--bo-4);
  background: radial-gradient(circle at 30% 25%, rgba(244,208,63,0.28), var(--yildiz-sis));
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: var(--yari-tam);
  font-family: var(--font-baslik);
  font-size: var(--ol-xl);
  font-weight: 700;
  color: var(--yildiz-acik);
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.14);
}
.adim h3 { margin-bottom: var(--bo-3); font-size: var(--ol-lg); }
.adim p {
  font-size: var(--ol-sm);
  color: var(--metin-ikincil);
  margin: 0;
  max-width: 34ch;
}

/* Dar ekranda kartlar alt alta, ok aşağıyı gösterir */
@media (max-width: 880px) {
  .adimlar { grid-template-columns: 1fr; gap: var(--bo-7); }
  .adim:not(:last-child)::after {
    content: '↓';
    top: auto; right: auto;
    bottom: calc(var(--bo-7) * -1);
    left: 50%;
    width: auto; height: var(--bo-7);
    transform: translate(-50%, 0);
  }
}

/* ---------------- 12. ARAMA ---------------- */
.arama-sarmal { position: relative; max-width: 620px; margin-inline: auto; }

.arama-kutu {
  display: flex;
  align-items: center;
  gap: var(--bo-2);
  padding: var(--bo-2) var(--bo-2) var(--bo-2) var(--bo-4);
  background: var(--yuzey);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--yari-tam);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}
.arama-kutu:focus-within {
  border-color: var(--yildiz);
  box-shadow: 0 0 0 4px var(--yildiz-sis);
}
.arama-girdi {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: var(--ol-tb);
  min-width: 0;
  padding-block: var(--bo-2);
}
.arama-girdi::placeholder { color: var(--metin-soluk); }

.arama-sonuc {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  max-height: 380px;
  overflow-y: auto;
  background: var(--gece-orta);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--yari-md);
  box-shadow: var(--golge-lg);
  z-index: 40;
  display: none;
}
.arama-sonuc.acik { display: block; }

.arama-satir {
  display: flex;
  align-items: center;
  gap: var(--bo-3);
  padding: var(--bo-3) var(--bo-4);
  text-decoration: none;
  color: var(--metin);
  border-bottom: 1px solid var(--cizgi);
  transition: background var(--gecis-hizli);
}
.arama-satir:last-child { border-bottom: none; }
.arama-satir:hover, .arama-satir.secili { background: var(--gece-acik); color: var(--metin); }
.arama-satir-ikon { font-size: 1.15rem; flex-shrink: 0; }
.arama-satir-metin { min-width: 0; }
.arama-satir-baslik { font-size: var(--ol-sm); font-weight: 600; }
.arama-satir-kategori { font-size: var(--ol-xs); color: var(--metin-soluk); }
.arama-bos { padding: var(--bo-5); text-align: center; color: var(--metin-soluk); font-size: var(--ol-sm); }

/* ---------------- 13. FORMLAR ---------------- */
.form-grup { margin-bottom: var(--bo-4); }
.form-etiket {
  display: block;
  margin-bottom: var(--bo-2);
  font-size: var(--ol-sm);
  font-weight: 600;
  color: var(--metin-ikincil);
}
.form-girdi, .form-alan, .form-secim {
  width: 100%;
  padding: var(--bo-3) var(--bo-4);
  background: var(--gece-koyu);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--yari-md);
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: var(--ol-tb);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}
.form-girdi:focus, .form-alan:focus, .form-secim:focus {
  outline: none;
  border-color: var(--yildiz);
  box-shadow: 0 0 0 3px var(--yildiz-sis);
}
.form-alan { min-height: 160px; resize: vertical; line-height: 1.65; }
.form-ipucu { margin-top: var(--bo-2); font-size: var(--ol-xs); color: var(--metin-soluk); }

/* Uyarı kutuları */
.uyari-kutu {
  padding: var(--bo-3) var(--bo-4);
  margin-bottom: var(--bo-4);
  border-radius: var(--yari-md);
  border-left: 3px solid;
  font-size: var(--ol-sm);
}
.uyari-hata   { background: rgba(217,112,112,0.1); border-color: var(--hata);   color: #f0b4b4; }
.uyari-basari { background: rgba(95,174,132,0.1);  border-color: var(--basari); color: #a8dcc0; }
.uyari-bilgi  { background: rgba(155,142,193,0.1); border-color: var(--ay);     color: var(--ay-acik); }

/* ---------------- 14. SSS (AÇILIR KAPANIR) ---------------- */
.sss-liste { display: grid; gap: var(--bo-2); }

/* Ana sayfa: 2 sütun x 4 sıra, sayfa genişliğini doldurur. */
.sss-izgara {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bo-3) var(--bo-4);
  align-items: start;
}
@media (max-width: 760px) { .sss-izgara { grid-template-columns: 1fr; } }

.sss-izgara .sss-soru { align-items: flex-start; line-height: 1.45; }

.sss-oge {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-md);
  overflow: hidden;
}
.sss-soru {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-3);
  padding: var(--bo-4);
  background: none;
  border: none;
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: var(--ol-tb);
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  text-align: left;
  transition: background var(--gecis-hizli);
}
.sss-soru:hover { background: var(--gece-orta); }
.sss-isaret {
  flex-shrink: 0;
  color: var(--yildiz);
  font-size: var(--ol-lg);
  transition: transform var(--gecis);
}
.sss-oge.acik .sss-isaret { transform: rotate(45deg); }

.sss-cevap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--gecis);
}
.sss-oge.acik .sss-cevap { grid-template-rows: 1fr; }
.sss-cevap-ic { overflow: hidden; }
.sss-cevap p {
  padding: 0 var(--bo-4) var(--bo-4);
  margin: 0;
  font-size: var(--ol-sm);
  color: var(--metin-ikincil);
}

/* ---------------- 15. İÇERİK METNİ ---------------- */
/* margin-inline şart: max-width tek başına bloğu sola yapıştırır ve
   geniş kapsayıcıda sağda kocaman bir boşluk bırakır. */
.icerik-metin {
  max-width: 78ch;
  margin-inline: auto;
}

/* Geniş kapsayıcı içinde kullanıldığında kendi sınırını bırakır */
.icerik-metin.tam-genislik { max-width: none; }
.icerik-metin.tam-genislik p { max-width: none; }

/* --- Uzun düz metni iki sütuna yay ---
   Sayfayı doldurur ama satır uzunluğu okunabilir kalır. */
.metin-sutunlu {
  columns: 2;
  column-gap: var(--bo-7);
  column-rule: 1px solid var(--cizgi);
}
.metin-sutunlu p {
  max-width: none;
  break-inside: avoid;
  margin-bottom: var(--bo-4);
}

/* Çok geniş ekranda iki sütun fazla uzar; üçe böl.
   Sayfa dolar, satır uzunluğu ideale yaklaşır. */
@media (min-width: 1400px) {
  .metin-sutunlu { columns: 3; }
}
@media (max-width: 900px) {
  .metin-sutunlu { columns: 1; column-rule: none; }
}

/* --- Alt başlıklı uzun içeriği kart ızgarasına yerleştir --- */
.rehber-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bo-5);
  align-items: start;
}
.rehber-kutu {
  padding: var(--bo-5) var(--bo-6);
  background: var(--gece);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-lg);
  border-top: 2px solid rgba(212, 175, 55, 0.5);
}
.rehber-kutu h3 {
  margin-top: 0;
  margin-bottom: var(--bo-3);
  color: var(--yildiz-acik);
  font-size: var(--ol-lg);
}
.rehber-kutu p,
.rehber-kutu li { font-size: var(--ol-sm); max-width: none; }
.rehber-kutu p:last-child,
.rehber-kutu ul:last-child { margin-bottom: 0; }
.rehber-kutu ul { padding-left: var(--bo-5); margin-bottom: 0; }

@media (max-width: 900px) {
  .rehber-izgara { grid-template-columns: 1fr; }
}
.icerik-metin h2 { margin-top: var(--bo-7); }
.icerik-metin h3 { margin-top: var(--bo-6); color: var(--ay-acik); }
.icerik-metin p  { color: var(--metin-ikincil); }
.icerik-metin ul, .icerik-metin ol { color: var(--metin-ikincil); padding-left: var(--bo-5); }
.icerik-metin li { margin-bottom: var(--bo-2); }
.icerik-metin blockquote {
  margin: var(--bo-5) 0;
  padding: var(--bo-4) var(--bo-5);
  border-left: 3px solid var(--yildiz);
  background: var(--gece-orta);
  border-radius: 0 var(--yari-md) var(--yari-md) 0;
  font-family: var(--font-baslik);
  font-size: var(--ol-lg);
  color: var(--metin);
}

/* Tabir detay: İslami ve psikolojik yorum yan yana.
   Geniş ekranda sayfayı doldurur, her sütun okunabilir kalır. */
.yorum-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bo-4);
  align-items: start;
  margin-bottom: var(--bo-4);
}
.yorum-izgara .yorum-bolum { margin-bottom: 0; height: 100%; }

@media (max-width: 1000px) {
  .yorum-izgara { grid-template-columns: 1fr; }
}

/* Yorum bölümü (tabir detay) */
.yorum-bolum {
  padding: var(--bo-5);
  margin-bottom: var(--bo-4);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-lg);
  border-left: 3px solid var(--yildiz);
}
.yorum-bolum h2 {
  display: flex;
  align-items: center;
  gap: var(--bo-3);
  font-size: var(--ol-xl);
  margin-bottom: var(--bo-4);
}
.yorum-bolum p { color: var(--metin-ikincil); margin-bottom: var(--bo-3); }
.yorum-bolum p:last-child { margin-bottom: 0; }

/* ---------------- 16. KIRINTI YOLU ---------------- */
.kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bo-2);
  padding-block: var(--bo-4);
  font-size: var(--ol-sm);
  color: var(--metin-soluk);
  list-style: none;
  margin: 0;
}
.kirinti li { display: flex; align-items: center; gap: var(--bo-2); }
.kirinti a { color: var(--metin-soluk); text-decoration: none; }
.kirinti a:hover { color: var(--yildiz-acik); }
.kirinti-ayrac { opacity: 0.5; }

/* ---------------- 17. ETİKETLER ---------------- */
.etiket-grup { display: flex; flex-wrap: wrap; gap: var(--bo-2); }
.etiket {
  display: inline-flex;
  align-items: center;
  gap: var(--bo-1);
  padding: var(--bo-1) var(--bo-3);
  background: var(--gece-acik);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-tam);
  font-size: var(--ol-xs);
  color: var(--metin-ikincil);
  text-decoration: none;
  transition: border-color var(--gecis-hizli), color var(--gecis-hizli);
}
.etiket:hover { border-color: var(--yildiz); color: var(--yildiz-acik); }

/* ---------------- 18. ÇAĞRI BÖLÜMÜ ---------------- */
.cagri {
  position: relative;
  padding: var(--bo-8) var(--bo-5);
  text-align: center;
  background: linear-gradient(135deg, var(--gece-acik) 0%, var(--gece) 60%);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--yari-lg);
  overflow: hidden;
}
.cagri::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  width: 520px; height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--yildiz-sis), transparent 65%);
  pointer-events: none;
}
.cagri > * { position: relative; }
.cagri p { margin-inline: auto; color: var(--metin-ikincil); }

/* ---- Ücretsiz üyelik bölümü ---- */
.uyelik-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bo-4);
  margin-block: var(--bo-7);
  text-align: center;
}
.uyelik-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--bo-6) var(--bo-4);
  background: rgba(11, 8, 22, 0.42);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-lg);
  transition: border-color var(--gecis), transform var(--gecis);
}
:root[data-tema="acik"] .uyelik-kart { background: rgba(255, 255, 255, 0.65); }
.uyelik-kart:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-3px);
}
.uyelik-kart-ikon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--bo-4);
  font-size: 1.5rem;
  line-height: 1;
  background: var(--yildiz-sis);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--yari-tam);
}
.uyelik-kart h3 {
  font-size: var(--ol-lg);
  margin-bottom: var(--bo-2);
  min-height: 2.6em;            /* başlıklar 1 veya 2 satır olsa da hizalı dursun */
  display: flex;
  align-items: center;
}
.uyelik-kart p {
  font-size: var(--ol-sm);
  color: var(--metin-ikincil);
  margin: 0;
  max-width: 30ch;
}

@media (max-width: 860px) {
  .uyelik-izgara { grid-template-columns: 1fr; gap: var(--bo-3); }
  .uyelik-kart h3 { min-height: 0; }
}

/* ---------------- 19. ALT BİLGİ ---------------- */
.alt-bilgi {
  margin-top: var(--bo-9);
  padding-top: var(--bo-7);
  border-top: 1px solid var(--cizgi);
  background: var(--gece-koyu);
}
/* 5 sütun, hepsi başlıklı ve yan yana:
   Keşfet | Kategoriler | Rüya Rehberleri | Bilgi | Üyelik
   Marka bloğu bunların üstünde tam genişlikte durur. */
.alt-bilgi-izgara {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--bo-6) var(--bo-5);
  padding-bottom: var(--bo-6);
}

/* Marka: sütunların üstünde, tam genişlik */
.alt-bilgi-marka {
  grid-column: 1 / -1;
  padding-bottom: var(--bo-5);
  margin-bottom: var(--bo-2);
  border-bottom: 1px solid var(--cizgi);
}

/* Kategoriler sütunu içinde liste ikiye bölünür */
.alt-bilgi-sutunlu {
  columns: 2;
  column-gap: var(--bo-4);
}
.alt-bilgi-sutunlu li { break-inside: avoid; }

/* ---- Marka sütunu: logo + slogan ---- */
.alt-bilgi-logo {
  display: flex;
  align-items: center;
  gap: var(--bo-3);
  margin-bottom: var(--bo-4);
  text-decoration: none;
  color: inherit;
}
.alt-bilgi-logo svg { flex-shrink: 0; }
.alt-bilgi-logo-ad {
  font-family: var(--font-baslik);
  font-size: var(--ol-lg);
  font-weight: 700;
  color: var(--metin);
  line-height: 1.2;
}
.alt-bilgi-logo-slogan {
  display: block;
  font-family: var(--font-govde);
  font-size: var(--ol-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--yildiz);
}
.alt-bilgi-baslik {
  font-family: var(--font-baslik);
  font-size: var(--ol-xl);      /* 1.563rem — belirgin şekilde büyük */
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--metin);
  margin-bottom: var(--bo-4);
  padding-bottom: var(--bo-3);
  border-bottom: 2px solid rgba(212, 175, 55, 0.45);
}
.alt-bilgi-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bo-2); }
.alt-bilgi-liste a {
  font-size: var(--ol-sm);
  color: var(--metin-ikincil);
  text-decoration: none;
}
.alt-bilgi-liste a:hover { color: var(--yildiz-acik); }

.alt-bilgi-alinti {
  font-family: var(--font-baslik);
  font-size: var(--ol-lg);
  color: var(--metin);
  margin-bottom: var(--bo-3);
}

.alt-bilgi-son {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-3);
  padding-block: var(--bo-4);
  border-top: 1px solid var(--cizgi);
  font-size: var(--ol-xs);
  color: var(--metin-soluk);
}

/* ---------------- 20. SAYFALAMA ---------------- */
.sayfalama {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--bo-2);
  margin-top: var(--bo-7);
}
.sayfalama a, .sayfalama-aktif {
  display: grid;
  place-items: center;
  min-width: 42px; min-height: 42px;
  padding-inline: var(--bo-3);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-md);
  font-size: var(--ol-sm);
  text-decoration: none;
  color: var(--metin-ikincil);
  transition: border-color var(--gecis-hizli), background var(--gecis-hizli);
}
.sayfalama a:hover { border-color: var(--yildiz); color: var(--yildiz-acik); }
.sayfalama-aktif {
  background: var(--yildiz);
  border-color: var(--yildiz);
  color: #221a05;
  font-weight: 700;
}
.sayfalama-bosluk { color: var(--metin-soluk); padding-inline: var(--bo-1); }

/* ---------------- 21. YARDIMCI SINIFLAR ---------------- */
/* margin-inline şart: p etiketinin max-width sınırı var, auto olmazsa
   ortalanmış metin bloğu sola yapışır ve içindeki düğme de kayar. */
.ortala      { text-align: center; margin-inline: auto; }
.gizli       { display: none !important; }
.sadece-okuyucu {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.metin-soluk { color: var(--metin-soluk); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.bag-sag { display: inline-flex; align-items: center; gap: var(--bo-1); font-size: var(--ol-sm); }

/* ---------------- 22. GİRİŞ ANİMASYONU ---------------- */
/* Tek bir düzenlenmiş açılış — her bölüme ayrı efekt konmaz */
.acilis {
  opacity: 0;
  transform: translateY(14px);
  animation: acilis-gir var(--gecis-yavas) forwards;
}
.acilis-1 { animation-delay: 60ms; }
.acilis-2 { animation-delay: 140ms; }
.acilis-3 { animation-delay: 220ms; }
.acilis-4 { animation-delay: 300ms; }

@keyframes acilis-gir {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------- 23. DUYARLI TASARIM ---------------- */
/* Beş sütun 1150px altında sığmaz — üçe indir */
@media (max-width: 1150px) {
  .alt-bilgi-izgara { grid-template-columns: repeat(3, 1fr); }
  .alt-bilgi-baslik { font-size: var(--ol-lg); }
}

@media (max-width: 900px) {
  .ana-menu {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--bo-3);
    background: var(--gece-koyu);
    border-bottom: 1px solid var(--cizgi);
    box-shadow: var(--golge-lg);
    display: none;
  }
  .ana-menu.acik { display: flex; }
  .ana-menu a { padding: var(--bo-3) var(--bo-4); }
  .menu-dugme { display: block; margin-left: auto; }
  .menu-sag { order: 3; }

}

@media (max-width: 620px) {
  .alt-bilgi-izgara  { grid-template-columns: repeat(2, 1fr); gap: var(--bo-5) var(--bo-4); }
  .alt-bilgi-sutunlu { columns: 1; }
  .alt-bilgi-baslik  { font-size: var(--ol-tb); }
}

@media (max-width: 560px) {
  :root { --bo-8: 3rem; --bo-9: 4rem; }
  .kapsayici { padding-inline: var(--bo-4); }   /* 16px yan boşluk korunur */
  .hero { padding-block: var(--bo-7) var(--bo-6); }
  .hero-dugmeler .dugme { width: 100%; }
  .istatistik-serit { grid-template-columns: repeat(2, 1fr); }
  .izgara-4 { grid-template-columns: repeat(2, 1fr); }
  .alt-bilgi-son { flex-direction: column; align-items: flex-start; }
}

/* ---------------- 24. HAREKET AZALTMA ---------------- */
/* Kullanıcı sistem ayarında hareketi azalttıysa tüm animasyonlar durur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .acilis { opacity: 1; transform: none; }

  /* Yıldızlar sabit kalsın, imleç parıltısı tamamen kapansın */
  .yildiz-katman { animation: none; opacity: 0.5; }
  .imlec-parilti { display: none; }
}

/* Dokunmatik cihazlarda imleç yoktur — parıltıyı hiç çizme */
@media (hover: none), (pointer: coarse) {
  .imlec-parilti { display: none; }
}

/* ---------------- 25. YAZDIRMA ---------------- */
@media print {
  .ust-menu, .alt-bilgi, .cagri, .arama-sarmal, .tema-dugme { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  a { color: #000; text-decoration: underline; }
}