/* =========================================================
   Her Gün Bir Dua — Tanıtım sitesi stilleri
   Mobile-first, saf CSS. Tasarım token'ları :root'ta.
   ========================================================= */

/* ---------- Token'lar: LIGHT (varsayılan) ---------- */
:root {
  /* Renk */
  --color-bg:#FAFAF9; --color-surface:#FFFFFF; --color-surface-2:#F5F5F4;
  --color-text:#1C1917; --color-text-muted:#57534E; --color-border:#E7E5E4;
  --color-primary:#1C1917; --color-on-primary:#FFFFFF; --color-accent:#A16207; --color-on-accent:#FFFFFF;
  --color-accent-strong:#D4AF37; --color-ring:#A16207; --color-success:#15803D; --color-destructive:#DC2626;
  --glass-bg:rgba(255,255,255,0.62); --glass-border:rgba(212,175,55,0.28); --glass-blur:blur(14px);

  /* Dekor değişkenleri (temaya göre) */
  --pattern-stroke:rgba(161,98,7,0.10);
  --mosque-fill:rgba(161,98,7,0.10);
  --poster-a:#F5F0E6; --poster-b:#EADFC4; --poster-line:#A16207;

  /* Tipografi */
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-arabic:'Amiri','Noto Naskh Arabic',serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; --fs-4xl:3rem; --fs-5xl:4rem;
  --lh-tight:1.15; --lh-heading:1.25; --lh-body:1.65;

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
  --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:96px; --sp-32:128px;

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Gölge */
  --shadow-sm:0 1px 2px rgba(12,10,9,.06);
  --shadow-md:0 8px 24px rgba(12,10,9,.08);
  --shadow-lg:0 24px 60px rgba(12,10,9,.12);
  --shadow-gold:0 8px 30px rgba(212,175,55,.25);

  /* Işık/nur dekor token'ları (Efekt katmanı) */
  --nur:#F2D680; --nur-soft:rgba(212,175,55,0.14);

  /* Bölüm dikey padding */
  --section-y:64px;
}

/* ---------- Token'lar: DARK ---------- */
:root[data-theme="dark"] {
  --color-bg:#0C0A09; --color-surface:#1C1917; --color-surface-2:#262322;
  --color-text:#FAFAF9; --color-text-muted:#A8A29E; --color-border:#3A3532;
  --color-primary:#D4AF37; --color-on-primary:#0C0A09; --color-accent:#E5C158; --color-on-accent:#0C0A09;
  --color-accent-strong:#D4AF37; --color-ring:#D4AF37; --color-success:#4ADE80; --color-destructive:#F87171;
  --glass-bg:rgba(28,25,23,0.52); --glass-border:rgba(212,175,55,0.22); --glass-blur:blur(14px);

  --pattern-stroke:rgba(212,175,55,0.12);
  --mosque-fill:rgba(212,175,55,0.10);
  --poster-a:#1C1917; --poster-b:#2A2620; --poster-line:#D4AF37;
}

/* ---------- Reset / temeller ---------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:88px; /* sticky header için */
  background:var(--color-bg); /* taban renk html'de → arkadaki sembol katmanı görünür */
  transition:background-color .3s ease;
}
body {
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--color-text);
  background:transparent; /* şeffaf → #nur-girih canvas (z-index:-1) içerik arkasında görünür */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* yatay scroll yok */
  touch-action:manipulation;
  transition:color .3s ease;
}

/* ---------- Site geneli "Nur Girih" canvas (imza - Efekt 1) ----------
   PNG data-URI arka plan KALDIRILDI; yerine 2D canvas (#nur-girih) geldi.
   Kafes cizgileri effects.js dosyasinda cizilir, kafes boyunca altin nur gezinir.
   Icerigin arkasinda sabit (z-index:-1). JS/canvas yoksa taban renk gorunur. */
#nur-girih {
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-1; pointer-events:none;
}
/* Efekt 2/3/10 icin host ici dekor canvaslari (hero-bg, cta-bg) */
.fx-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; padding:0; }
button { font:inherit; color:inherit; cursor:pointer; border:none; background:none; }

/* Görünür focus ring — asla kaldırılmaz */
:focus-visible {
  outline:2px solid var(--color-ring);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* İçeriğe geç linki */
.skip-link {
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--color-surface); color:var(--color-text);
  padding:10px 16px; border-radius:var(--r-md);
  box-shadow:var(--shadow-md); font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus { top:12px; }

/* ---------- Yerleşim ---------- */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
.container.narrow { max-width:680px; }
.section { padding-block:var(--section-y); }

/* Bölüm başlığı + eyebrow */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-accent);
  margin-bottom:14px;
}
/* Efekt 6: eyebrow hairline — görünüme girince soldan sağa ışıkla uzar (JS scaleX).
   transform-origin:left; JS yoksa scaleX(1) statik kalır. */
.eyebrow-line { width:28px; height:2px; background:linear-gradient(90deg,transparent,var(--nur),transparent); border-radius:2px; transform-origin:left center; }
.eyebrow-center { justify-content:center; }
.section-title {
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-3xl); line-height:var(--lh-heading);
  color:var(--color-text); margin-bottom:var(--sp-8);
}

/* ---------- Butonlar ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:var(--fs-base);
  padding:12px 20px; min-height:44px; border-radius:var(--r-pill);
  transition:transform .18s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap; border:1.5px solid transparent;
}
.btn-lg { padding:15px 28px; min-height:52px; font-size:var(--fs-lg); }
.btn-block { width:100%; }
.btn svg { flex:none; }

.btn-primary { background:var(--color-primary); color:var(--color-on-primary); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.btn-ghost {
  background:transparent; color:var(--color-text);
  border-color:var(--color-border);
}
.btn-ghost:hover { border-color:var(--color-accent); color:var(--color-accent); transform:translateY(-2px); }

/* Ikon buton (44x44 dokunma hedefi) */
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-pill);
  color:var(--color-text);
  transition:background-color .2s ease, color .2s ease;
}
.icon-btn:hover { background:var(--color-surface-2); color:var(--color-accent); }

/* =========================================================
   1. HEADER (liquid glass)
   ========================================================= */
.site-header {
  position:sticky; top:0; z-index:100;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:68px;
}
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-md);
  color:var(--color-accent-strong);
  background:var(--color-surface-2);
  border:1px solid var(--glass-border);
  animation:brand-breathe 6s ease-in-out infinite; /* hafif nefes/parıltı (opacity+scale) */
}
@keyframes brand-breathe {
  0%, 100% { transform:scale(1); filter:drop-shadow(0 0 0 rgba(212,175,55,0)); }
  50% { transform:scale(1.06); filter:drop-shadow(0 0 6px rgba(212,175,55,.45)); }
}
.brand-text { display:flex; flex-direction:column; line-height:1.2; }
.brand-title { font-family:var(--font-display); font-weight:600; font-size:var(--fs-lg); color:var(--color-text); }
.brand-handle { font-size:var(--fs-xs); color:var(--color-text-muted); }

/* Orta nav — masaüstü */
.main-nav { display:none; }
.main-nav ul { display:flex; gap:8px; }
.main-nav a {
  position:relative;
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border-radius:var(--r-pill); font-weight:500; font-size:var(--fs-sm);
  color:var(--color-text-muted);
  transition:color .2s ease, background-color .2s ease;
}
.main-nav a:hover { color:var(--color-text); background:var(--color-surface-2); }
/* Nav altı altın ışık silme (hover/focus'ta soldan uzar, transform-only) */
.main-nav a::after {
  content:""; position:absolute; left:14px; right:14px; bottom:8px; height:2px;
  background:linear-gradient(90deg, transparent, var(--nur), transparent);
  border-radius:2px; transform:scaleX(0); transform-origin:left center;
  transition:transform .3s ease;
}
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform:scaleX(1); }

.header-actions { display:flex; align-items:center; gap:8px; }
.header-cta { display:none; }
.header-social { display:none; }
.header-social:hover { background:var(--color-surface-2); color:var(--color-accent); }
/* Mobil menü sosyal satırı */
.mobile-social { display:flex; gap:10px; margin-top:12px; }
.mobile-social a {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; border-radius:var(--r-md);
  border:1px solid var(--color-border); color:var(--color-text);
  font-weight:500; font-size:var(--fs-sm);
}
.mobile-social a:hover { border-color:var(--color-accent); color:var(--color-accent); }

/* Tema ikonları: aktif temaya göre birini göster */
.theme-toggle .icon-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:block; }

/* Hamburger: close ikonu gizli başlar */
.menu-toggle .icon-close { display:none; }
.menu-toggle.is-open .icon-menu { display:none; }
.menu-toggle.is-open .icon-close { display:block; }

/* Mobil açılır menü */
.mobile-menu {
  border-top:1px solid var(--glass-border);
  background:var(--color-surface);
  padding:12px 20px 20px;
}
.mobile-menu ul { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.mobile-menu a {
  display:flex; align-items:center; min-height:48px; padding:0 12px;
  border-radius:var(--r-md); font-weight:500; color:var(--color-text);
}
.mobile-menu a:hover { background:var(--color-surface-2); color:var(--color-accent); }

/* =========================================================
   2. HERO
   ========================================================= */
.hero { position:relative; overflow:hidden; padding-block:72px 64px; }
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
/* Hero'nun kendi deseni gizlendi; artık site geneli #nur-girih canvas kullanılıyor (çift desen olmasın) */
.hero-pattern { display:none; }
.hero-glow {
  position:absolute; left:50%; top:-10%; transform:translateX(-50%);
  width:min(900px,120%); height:520px;
  background:radial-gradient(ellipse at center,
    rgba(212,175,55,.28), rgba(212,175,55,.10) 42%, transparent 70%);
  filter:blur(8px);
}
.hero-mosque {
  position:absolute; bottom:0; left:0; width:100%; height:180px;
  opacity:.9;
}
.hero-inner { position:relative; z-index:1; text-align:center; max-width:820px; margin:0 auto; }
.hero .eyebrow { justify-content:center; }
.hero-title {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.5rem, 8vw, 4rem); line-height:var(--lh-tight);
  color:var(--color-text); margin-bottom:20px;
  letter-spacing:-.02em;
  text-wrap:balance;
  font-optical-sizing:auto;
}
.hero-sub {
  font-size:var(--fs-lg); color:var(--color-text-muted);
  max-width:620px; margin:0 auto 32px;
}
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:36px; }
.hero-proof {
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  font-size:var(--fs-sm); color:var(--color-text-muted);
}
.hero-proof li { position:relative; padding-left:18px; }
.hero-proof li::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%;
  background:var(--color-accent-strong);
}

/* =========================================================
   3. SOSYAL KANIT ŞERİDİ
   ========================================================= */
.proof-strip {
  border-block:1px solid var(--color-border);
  /* Yarı şeffaf → arkadaki sembol katmanı hafifçe görünür (metin kontrastı korunur) */
  background:color-mix(in srgb, var(--color-surface) 90%, transparent);
  padding-block:28px;
}
.proof-list {
  display:grid; grid-template-columns:1fr; gap:18px;
}
.proof-item {
  display:flex; align-items:center; gap:12px;
  font-weight:500; color:var(--color-text);
}
.proof-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none; border-radius:var(--r-md);
  color:var(--color-accent); background:var(--color-surface-2);
  border:1px solid var(--color-border);
}

/* =========================================================
   4. HAKKINDA
   ========================================================= */
.about { background:transparent; } /* sembol katmanı görünsün */
.prose p { font-size:var(--fs-lg); color:var(--color-text-muted); margin-bottom:var(--sp-6); }
.prose p:last-child { margin-bottom:0; }

/* =========================================================
   Kart grid'leri (ortak)
   ========================================================= */
.card-grid { display:grid; grid-template-columns:1fr; gap:20px; }
.card {
  position:relative;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--r-lg);
  padding:26px;
  /* Kart iç ışığı: üstte ince altın highlight (derinlik) */
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(212,175,55,.10);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md), inset 0 1px 0 rgba(212,175,55,.18); border-color:var(--glass-border); }
.card > * { position:relative; z-index:1; }
.card h3 { font-family:var(--font-display); font-weight:600; font-size:var(--fs-xl); margin-bottom:10px; color:var(--color-text); }
.card p { color:var(--color-text-muted); font-size:var(--fs-base); }

/* 5. Değer kartları ikon */
.card-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-bottom:16px;
  border-radius:var(--r-md);
  color:var(--color-accent);
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
}

/* 6. Seri kartları */
.series-card { position:relative; }
.series-num {
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-2xl); color:var(--color-accent);
  display:block; margin-bottom:8px;
}

/* =========================================================
   7. VİDEO VİTRİNİ (9:16)
   ========================================================= */
.video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.video-card { display:flex; }
.video-link {
  display:flex; flex-direction:column; width:100%;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.video-link:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--glass-border); }
.video-poster {
  position:relative; display:block; width:100%; aspect-ratio:9/16;
  overflow:hidden; background:var(--color-surface-2);
}
.poster-art { width:100%; height:100%; }
.video-badge {
  position:absolute; top:10px; left:10px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:var(--r-pill);
  background:rgba(12,10,9,.55); color:#fff;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.play-icon {
  position:absolute; inset:0; margin:auto;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--color-on-accent);
  background:var(--color-accent); /* WCAG: light temada #A16207 üzerinde beyaz üçgen ~4.9:1 */
  box-shadow:var(--shadow-gold);
  transition:transform .25s ease;
}
.video-link:hover .play-icon { transform:scale(1.08); }
.video-meta { display:flex; flex-direction:column; gap:6px; padding:16px; }
.video-title { font-family:var(--font-display); font-weight:600; font-size:var(--fs-lg); color:var(--color-text); }
.video-desc { font-size:var(--fs-sm); color:var(--color-text-muted); }
.video-cta {
  display:inline-flex; align-items:center; gap:5px; margin-top:6px;
  font-weight:600; font-size:var(--fs-sm); color:var(--color-accent);
}

/* =========================================================
   8. BUGÜNÜN DUASI
   ========================================================= */
.dua-section { background:color-mix(in srgb, var(--color-surface) 90%, transparent); }
.dua-section .eyebrow { display:flex; justify-content:center; }
.dua-card { max-width:640px; margin:0 auto; }
.dua-frame {
  position:relative; text-align:center;
  padding:40px 28px;
  border-radius:var(--r-xl);
  background:var(--color-bg);
  border:1.5px solid var(--glass-border);
  box-shadow:var(--shadow-md);
}
/* Zarif altın çerçeve iç çizgisi */
.dua-frame::before {
  content:""; position:absolute; inset:10px; border-radius:calc(var(--r-xl) - 8px);
  border:1px solid var(--glass-border); pointer-events:none;
}
.dua-heading {
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-xl);
  color:var(--color-accent); margin-bottom:24px;
}
.dua-arabic {
  font-family:var(--font-arabic); font-weight:700;
  font-size:clamp(1.75rem,6vw,2.6rem); line-height:1.9;
  color:var(--color-text); margin-bottom:20px;
}
.dua-meaning { font-size:var(--fs-lg); color:var(--color-text); margin-bottom:18px; font-style:italic; }
.dua-divider { width:60px; height:2px; margin:0 auto 18px; background:var(--color-accent-strong); border-radius:2px; }
.dua-virtue { font-size:var(--fs-base); color:var(--color-text-muted); max-width:440px; margin:0 auto; }

/* =========================================================
   9. FINAL CTA (cam kart)
   ========================================================= */
.final-cta { background:transparent; } /* sembol katmanı görünsün */
.cta-card {
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:48px 24px;
  text-align:center;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1.5px solid var(--glass-border);
  box-shadow:var(--shadow-lg);
}
.cta-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, rgba(212,175,55,.22), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(212,175,55,.16), transparent 50%);
}
.cta-content { position:relative; z-index:1; max-width:600px; margin:0 auto; }
.cta-title { font-family:var(--font-display); font-weight:700; font-size:var(--fs-3xl); line-height:var(--lh-heading); color:var(--color-text); margin-bottom:16px; }
.cta-desc { font-size:var(--fs-lg); color:var(--color-text-muted); margin-bottom:28px; }

/* =========================================================
   10. FOOTER
   ========================================================= */
.site-footer {
  border-top:1px solid var(--color-border);
  background:color-mix(in srgb, var(--color-surface) 92%, transparent);
  padding-block:48px 32px;
}
.footer-inner { display:grid; grid-template-columns:1fr; gap:28px; }
.footer-brand { display:flex; align-items:center; gap:12px; }
.footer-mark { color:var(--color-accent-strong); flex:none; }
.footer-tagline { font-family:var(--font-display); font-size:var(--fs-lg); color:var(--color-text); }
.footer-social { display:flex; flex-wrap:wrap; gap:10px; }
.social-link {
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:0 16px; border-radius:var(--r-pill);
  border:1px solid var(--color-border); background:var(--color-bg);
  font-weight:500; font-size:var(--fs-sm); color:var(--color-text);
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.social-link:hover { border-color:var(--color-accent); color:var(--color-accent); }
.footer-meta { display:flex; flex-direction:column; gap:6px; }
.footer-handle { font-weight:600; color:var(--color-accent); }
.footer-copy { font-size:var(--fs-sm); color:var(--color-text-muted); }

/* =========================================================
   REVEAL animasyonları (IntersectionObserver)
   ========================================================= */
/* Gizleme yalnızca JS varken (html.js) uygulanır; JS kapalıysa içerik görünür kalır */
.reveal { transition:opacity .35s ease-out, transform .35s ease-out; }
.js .reveal { opacity:0; transform:translateY(12px); }
.reveal.is-visible { opacity:1; transform:none; }

/* GSAP aktifken (html.gsap-on) CSS transition'ı kapat: GSAP her kareyi yazarken
   tarayıcının kendi geçişi üstüne binip smear/jank oluşturmasın. IO fallback'te bu sınıf yok. */
.gsap-on .reveal { transition:none; }
.gsap-on .card-grid .reveal, .gsap-on .video-grid .reveal { transition-delay:0ms; }

/* Kart grid stagger (yalnız IntersectionObserver fallback için) — görünür olunca artan gecikme */
.card-grid .reveal:nth-child(1), .video-grid .reveal:nth-child(1) { transition-delay:0ms; }
.card-grid .reveal:nth-child(2), .video-grid .reveal:nth-child(2) { transition-delay:40ms; }
.card-grid .reveal:nth-child(3), .video-grid .reveal:nth-child(3) { transition-delay:80ms; }
.card-grid .reveal:nth-child(4), .video-grid .reveal:nth-child(4) { transition-delay:120ms; }
.card-grid .reveal:nth-child(5), .video-grid .reveal:nth-child(5) { transition-delay:160ms; }
.card-grid .reveal:nth-child(6), .video-grid .reveal:nth-child(6) { transition-delay:200ms; }

/* =========================================================
   RESPONSIVE — 768 / 1024 / 1440
   ========================================================= */
@media (min-width:768px) {
  :root { --section-y:112px; }
  .header-cta { display:inline-flex; }
  .header-social { display:inline-flex; }
  .proof-list { grid-template-columns:repeat(2,1fr); gap:24px; }
  .card-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
  .video-grid { grid-template-columns:repeat(3,1fr); }
  .section-title { font-size:var(--fs-4xl); }
  .cta-title { font-size:var(--fs-4xl); }
  .cta-card { padding:64px 48px; }
  .footer-inner { grid-template-columns:1fr auto; align-items:center; grid-template-areas:"brand social" "meta meta"; }
  .footer-brand { grid-area:brand; }
  .footer-social { grid-area:social; }
  .footer-meta { grid-area:meta; }
}

@media (min-width:1024px) {
  .main-nav { display:block; }
  .menu-toggle { display:none; }
  .card-grid.values-grid, .card-grid.series-grid { grid-template-columns:repeat(3,1fr); }
  .proof-list { grid-template-columns:repeat(4,1fr); }
  .video-grid { grid-template-columns:repeat(3,1fr); gap:20px; }
  .hero { padding-block:96px 88px; }
}

@media (min-width:1440px) {
  .container { max-width:1240px; }
  .video-grid { grid-template-columns:repeat(4,1fr); gap:20px; }
}

/* =========================================================
   HAREKET KATMANI — GSAP + ambient (yalnız transform/opacity/filter)
   ========================================================= */

/* ---- Açılış animasyonu (splash) ---- */
#splash {
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-bg);
  will-change:transform, opacity;
}
#splash[hidden] { display:none; }
.splash-inner { display:flex; flex-direction:column; align-items:center; gap:18px; }
.splash-mark { width:88px; height:88px; }
/* stroke çizilme başlangıç durumu JS'te set edilir (dasharray/offset) */
.splash-line {
  width:150px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--color-accent-strong), var(--nur,#F2D680), var(--color-accent-strong), transparent);
  box-shadow:0 0 12px rgba(242,214,128,.4);
  transform:scaleX(0); transform-origin:center;
}
.splash-word {
  font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-xl); color:var(--color-text);
  opacity:0; display:inline-flex; align-items:center; gap:.4ch; letter-spacing:.01em;
}
.splash-word-txt {   /* altın-gradyan metin */
  background:linear-gradient(92deg, var(--color-text) 0%, var(--color-accent-strong) 58%, var(--nur,#F2D680) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.splash-word-moon { filter:drop-shadow(0 0 10px rgba(242,214,128,.55)); }
/* Besmele — saygıyla belirir (yalnız opacity/y, ışık silme YOK) */
.splash-basmala {
  font-family:var(--font-arabic); font-weight:700;
  font-size:2.4rem; line-height:1; color:var(--color-accent-strong);
  opacity:0; text-shadow:0 0 22px rgba(242,214,128,.45), 0 0 46px rgba(212,175,55,.28);
}
/* Sonda ışık patlaması: merkezden büyüyüp sayfayı devralır */
.splash-flash {
  position:absolute; left:50%; top:50%;
  width:80px; height:80px; margin:-40px 0 0 -40px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,247,224,.95), rgba(242,214,128,.5) 42%, transparent 70%);
  opacity:0; transform:scale(.2); mix-blend-mode:screen;
}

/* ---- Ambient loop'lar (CSS keyframe; reduced-motion'da otomatik durur) ---- */
/* CTA ışık şeridi: birincil butonda periyodik parıltı */
.btn-primary { position:relative; overflow:hidden; }
.btn-primary::before {
  content:""; position:absolute; top:0; left:0; width:60%; height:100%;
  pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-160%);
  animation:cta-sheen 5s ease-in-out infinite;
}
@keyframes cta-sheen {
  0%, 70% { transform:translateX(-160%); }
  85%, 100% { transform:translateX(260%); }
}

/* Final CTA arka plan: yumuşak nefes (opacity = kompozit, repaint yok) */
.cta-bg {
  animation:cta-shimmer 12s ease-in-out infinite;
}
@keyframes cta-shimmer {
  0%, 100% { opacity:.8; }
  50% { opacity:1; }
}

/* Dua çerçevesi altın nabzı — yalnız opacity (box-shadow repaint kaldırıldı) */
.dua-frame::before {
  box-shadow:0 0 14px rgba(212,175,55,.12);
  animation:dua-pulse 5s ease-in-out infinite;
}
@keyframes dua-pulse {
  0%, 100% { opacity:.5; }
  50% { opacity:1; }
}

/* ---- Zikir şeridi ---- */
.zikir-strip {
  overflow:hidden;
  border-top:1px solid var(--color-border);
  background:var(--color-surface-2);
  padding-block:12px;
}
.zikir-track {
  display:flex; width:max-content;
  will-change:transform;
  animation:zikir-scroll 32s linear infinite;
}
.zikir-strip:hover .zikir-track { animation-play-state:paused; }
.zikir-set {
  display:inline-flex; align-items:center; gap:14px; padding-right:14px;
  font-family:var(--font-display); font-size:var(--fs-base);
  color:var(--color-accent); white-space:nowrap;
}
.zikir-sep { color:var(--color-text-muted); opacity:.6; }
@keyframes zikir-scroll {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

/* Magnetic buton: yalnız aktif öğede will-change (JS class ekler) */
.is-magnetic { will-change:transform; }

/* ---- Scroll ilerleme çubuğu (üstte, sabit) ---- */
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:150;
  pointer-events:none; background:transparent;
}
.scroll-progress-bar {
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg, var(--color-accent), var(--nur), var(--color-accent-strong));
  box-shadow:0 0 10px rgba(212,175,55,.5);
}

/* ---- Yukarı çık butonu ---- */
.to-top {
  position:fixed; right:20px; bottom:20px; z-index:150;
  width:48px; height:48px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--color-on-accent); background:var(--color-accent);
  box-shadow:var(--shadow-gold);
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.to-top.is-visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.to-top:hover { transform:translateY(-3px) scale(1.05); }
.to-top svg { animation:top-bob 2.4s ease-in-out infinite; }
@keyframes top-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }

/* ---- Kart 3D eğim (pointer'a göre; yalnız fine pointer, JS inline transform yazar) ---- */
.card-grid, .video-grid { perspective:1000px; }
.value-card, .series-card, .video-link {
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  transform-style:preserve-3d;
}

/* Mobilde ambient azalt: CTA parıltısını kapat, zikir şeridini yavaşlat, marka nefesini durdur */
@media (max-width:767px) {
  .btn-primary::before { animation:none; }
  .zikir-track { animation-duration:44s; }
  .brand-mark { animation:none; }
}

/* =========================================================
   IŞIK EFEKT KATMANI — yeni efektler (2,4,5,6,7,8,9,11)
   Yalnız transform/opacity/filter. Reduced-motion aşağıda nötrlenir.
   ========================================================= */

/* ---- Efekt 2: HERO AURORA (ışık huzmesi) ---- */
.hero-aurora {
  position:absolute; inset:-12%;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:blur(42px);
  opacity:.85;
  background:
    radial-gradient(42% 50% at 30% 32%, rgba(242,214,128,.30), transparent 70%),
    radial-gradient(45% 45% at 72% 40%, rgba(255,244,214,.22), transparent 70%),
    conic-gradient(from 200deg at 50% 42%, rgba(212,175,55,.12), transparent 40%, rgba(242,214,128,.10) 72%, transparent);
  background-size:180% 180%, 160% 160%, 200% 200%;
  background-repeat:no-repeat;
  animation:aurora-drift 18s ease-in-out infinite alternate;
  will-change:transform; /* yalnız transform → GPU kompozit, repaint yok */
}
@keyframes aurora-drift {
  0%   { transform:translate3d(-2%,0,0) scale(1.02); }
  100% { transform:translate3d(2%,-3%,0) scale(1.08); }
}
/* Dark hero: hafif lacivert derinlik radial (#0C0A09 → #0E1116) */
:root[data-theme="dark"] .hero {
  background:radial-gradient(120% 90% at 50% -12%, #0E1116, var(--color-bg) 62%);
}

/* ---- Efekt 4: BAŞLIK NUR-REVEAL (ışık silme) ---- */
.nur-title { position:relative; }
.nur-title::after {
  content:""; position:absolute; inset:-4% -6%;
  pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 42%, var(--nur) 50%, transparent 58%);
  mix-blend-mode:screen;
  transform:translateX(-45%);
}
.nur-title.is-swept::after { animation:nur-sweep .9s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes nur-sweep {
  0%   { opacity:0; transform:translateX(-45%); }
  22%  { opacity:.7; }
  100% { opacity:0; transform:translateX(45%); }
}

/* ---- Efekt 5: KART SPOTLIGHT / ALTIN GLOW TAKİBİ ---- */
.value-card, .series-card, .video-link { --mx:50%; --my:0%; }
.value-card::before, .series-card::before, .video-link::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:0; opacity:0;
  background:radial-gradient(220px circle at var(--mx) var(--my), var(--nur-soft), transparent 68%);
  transition:opacity .3s ease;
}
.video-link > * { position:relative; z-index:1; }
@media (hover:hover) and (pointer:fine) {
  .value-card:hover::before, .series-card:hover::before, .video-link:hover::before { opacity:1; }
}

/* ---- Efekt 7: ÖZEL İMLEÇ / ALTIN İZ (yalnız fine pointer + >=1024, JS oluşturur) ---- */
.cursor-halo, .cursor-trail {
  position:fixed; top:0; left:0; border-radius:50%;
  pointer-events:none; z-index:400;
  mix-blend-mode:screen; opacity:0;
  will-change:transform;
}
.cursor-halo {
  width:26px; height:26px; margin:-13px 0 0 -13px;
  background:radial-gradient(circle, rgba(242,214,128,.55), rgba(242,214,128,0) 70%);
  filter:blur(1px);
  transition:opacity .3s ease, width .2s ease, height .2s ease;
}
.cursor-trail {
  width:10px; height:10px; margin:-5px 0 0 -5px;
  background:radial-gradient(circle, rgba(242,214,128,.4), rgba(242,214,128,0) 70%);
  filter:blur(2px);
}
.cursor-halo.is-on, .cursor-trail.is-on { opacity:1; }
.cursor-halo.is-active { width:42px; height:42px; }

/* ---- Efekt 8: BUGÜNÜN DUASI — ışıkla beliren hat çerçevesi (2. imza) ---- */
.dua-frame { overflow:visible; }
.dua-border {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.dua-border-glow {
  opacity:0;
  filter:drop-shadow(0 0 4px rgba(242,214,128,.8));
  stroke:var(--nur);
}
.dua-frame > :not(.dua-border):not(.dua-corner) { position:relative; z-index:1; }
/* Simetrik, figürsüz köşe süsleri (statik tezhip esintisi) */
.dua-corner {
  position:absolute; width:7px; height:7px; z-index:1;
  background:var(--color-accent-strong);
  transform:rotate(45deg); opacity:.55; pointer-events:none;
}
.dua-corner-tl { top:15px; left:15px; }
.dua-corner-tr { top:15px; right:15px; }
.dua-corner-bl { bottom:15px; left:15px; }
.dua-corner-br { bottom:15px; right:15px; }
/* Belirme öncesi başlangıç durumları YALNIZ GSAP aktifken JS ile set edilir;
   JS/canvas yoksa çerçeve tam çizili + metin görünür kalır. */

/* ---- Efekt 9: SİNEMATİK AÇILIŞ — girih halkaları + merkez bloom ---- */
.splash-inner { position:relative; }
.splash-bloom {
  position:absolute; left:50%; top:44px;
  width:300px; height:300px; margin:-150px 0 0 -150px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,247,224,.65) 0%, rgba(242,214,128,.5) 32%, transparent 66%);
  filter:blur(14px); opacity:0; transform:scale(.35);
  mix-blend-mode:screen;
}
.splash-rings {
  position:absolute; left:50%; top:44px;
  width:0; height:0; pointer-events:none;
}
.splash-ring {
  position:absolute; left:0; top:0;
  border:1.5px solid rgba(212,175,55,.55);
  border-radius:26px;
  box-shadow:0 0 20px rgba(242,214,128,.22), inset 0 0 12px rgba(242,214,128,.14);
  transform:translate(-50%,-50%) rotate(45deg) scale(0);
  opacity:0;
}

/* ---- Efekt 11: VİDEO POSTER HOVER "IŞIK AÇILMASI" ---- */
.video-poster::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.30) 50%, transparent 60%);
  transform:translateX(-120%); opacity:0;
}
@media (hover:hover) and (pointer:fine) {
  .video-link:hover .video-poster::after { animation:poster-glare .6s ease-out; }
  .video-link:hover .play-icon { box-shadow:0 8px 34px rgba(212,175,55,.5); }
}
@keyframes poster-glare {
  0%   { transform:translateX(-120%); opacity:.9; }
  100% { transform:translateX(120%); opacity:0; }
}

/* Mobil: ağır efektleri hafiflet */
@media (max-width:767px) {
  .hero-aurora {
    filter:blur(26px);
    background-image:radial-gradient(48% 52% at 40% 36%, rgba(242,214,128,.26), transparent 70%);
    animation-duration:22s;
  }
}

/* =========================================================
   YENİ: gökyüzü, günün vakti, Esmaül Hüsna, tema dairesel geçiş
   ========================================================= */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- Gökyüzü katmanı: scroll yolculuğu (gündüz→gece) + günün vakti ---- */
#sky {
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  --journey:0;   /* JS scroll ile 0→1 günceller */
  transition:background .8s ease; /* günün vakti değişiminde yumuşak */
}
/* Açık tema: üstte sıcak, altta serin; scroll indikçe hafif koyulaşma (okunurluk korunur) */
:root:not([data-theme="dark"]) #sky {
  background:linear-gradient(180deg,
    hsl(40 40% 98%) 0%,
    hsl(38 30% calc(97% - var(--journey) * 7%)) 100%);
}
/* Koyu tema: gece göğü derinleşir, scroll indikçe daha koyu lacivit */
:root[data-theme="dark"] #sky {
  background:linear-gradient(180deg,
    #0E1116 0%,
    hsl(230 30% calc(6% - var(--journey) * 2%)) 100%);
}
/* Günün vakti ruh hâli — hero arkasına ince sıcak/serin vurgu (data-daypart html'de) */
:root[data-daypart="dawn"]  { --nur:#F5C877; }   /* şafak: sıcak */
:root[data-daypart="dusk"]  { --nur:#F0B968; }   /* akşam: amber */
:root[data-daypart="night"] { --nur:#EBD9A0; }   /* gece: soğuk altın */

/* ---- Hero: günün vakti karşılaması ---- */
.hero-greet {
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.04em;
  color:var(--color-accent); margin-bottom:6px; min-height:1em;
}

/* ---- Esmaül Hüsna döngüsü ---- */
.esma { text-align:center; }
.esma-stage {
  position:relative; min-height:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.esma-ar {
  font-family:var(--font-arabic); font-weight:700;
  font-size:clamp(2.4rem, 8vw, 3.6rem); line-height:1.2;
  color:var(--color-accent-strong); text-shadow:0 0 24px rgba(212,175,55,.25);
  transition:opacity .6s ease, transform .6s ease;
}
.esma-tr {
  font-family:var(--font-display); font-size:var(--fs-xl); color:var(--color-text);
  transition:opacity .6s ease .05s, transform .6s ease .05s;
}
.esma-mean {
  font-size:var(--fs-base); color:var(--color-text-muted); max-width:420px;
  transition:opacity .6s ease .1s, transform .6s ease .1s;
}
.esma-ar, .esma-tr, .esma-mean { opacity:0; transform:translateY(8px); }
.esma-stage.esma-in .esma-ar,
.esma-stage.esma-in .esma-tr,
.esma-stage.esma-in .esma-mean { opacity:1; transform:none; }
.esma-note { margin-top:20px; font-size:var(--fs-sm); color:var(--color-text-muted); }

/* ---- Tema geçişi: dairesel ışık dalgası (View Transitions API) ---- */
/* Tema geçişi (same-document) yalnız .theme-wave iken kök animasyonlarını nötrler,
   böylece SADECE dairesel ışık dalgası görünür. Sayfalar arası geçişi etkilemez. */
.theme-wave::view-transition-old(root),
.theme-wave::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
.theme-wave::view-transition-old(root) { z-index:1; }
.theme-wave::view-transition-new(root) { z-index:2; }

/* ---- Sayfalar arası (cross-document) geçiş — zarif kayan çapraz geçiş ----
   Destekleyen tarayıcıda otomatik; desteklemeyende normal navigasyon (progressive). */
@view-transition { navigation: auto; }
:root:not(.theme-wave)::view-transition-old(root) { animation:vt-nav-out .30s cubic-bezier(.4,0,.2,1) both; }
:root:not(.theme-wave)::view-transition-new(root) { animation:vt-nav-in .34s cubic-bezier(.4,0,.2,1) both; }
@keyframes vt-nav-out { to   { opacity:0; transform:translateY(-8px) scale(.995); } }
@keyframes vt-nav-in  { from { opacity:0; transform:translateY(10px) scale(.995); } }
@keyframes theme-wave { from { clip-path:circle(0% at var(--tx,50%) var(--ty,8%)); }
                        to   { clip-path:circle(150% at var(--tx,50%) var(--ty,8%)); } }
.theme-wave::view-transition-new(root) {
  animation:theme-wave .55s ease-in;
}

/* =========================================================
   REDUCED MOTION — tüm animasyonları kapat
   ========================================================= */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .reveal { opacity:1 !important; transform:none !important; }

  /* Yeni: Esmaül Hüsna hep görünür (JS anında değiştirir), gökyüzü/tema dalgası sabit */
  .esma-ar, .esma-tr, .esma-mean { opacity:1 !important; transform:none !important; }
  #sky { transition:none !important; }
  .theme-wave::view-transition-new(root),
  .theme-wave::view-transition-old(root) { animation:none !important; }
  /* Sayfa geçişi de reduced-motion'da anında (kayma yok) */
  :root:not(.theme-wave)::view-transition-old(root),
  :root:not(.theme-wave)::view-transition-new(root) { animation:none !important; }

  /* Açılış animasyonu hiç gösterilmez */
  #splash { display:none !important; }

  /* Nur Girih + dekor canvas'ları: effects.js hareketi durdurur, soluk-statik çizer.
     (CSS tarafında ek durdurmaya gerek yok; canvas RAF'ı JS kapatır.) */

  /* Ambient loop'lar kapalı */
  .cta-bg, .dua-frame::before, .zikir-track, .hero-aurora { animation:none !important; }
  .btn-primary::before { animation:none !important; opacity:0 !important; }

  /* Yeni efektler: hareket yok ama görsel boş kalmaz (zarif statik) */
  .hero-aurora { transform:none !important; opacity:.7 !important; }   /* statik yumuşak ışık */
  .nur-title::after { animation:none !important; opacity:0 !important; } /* ışık silme kapalı, başlık net */
  .value-card::before, .series-card::before, .video-link::before { opacity:0 !important; }
  .video-poster::after { animation:none !important; opacity:0 !important; }
  .cursor-halo, .cursor-trail { display:none !important; }             /* özel imleç tamamen kapalı */
  /* Yeni ambient animasyonlar kapalı (marka nefesi, yukarı-çık zıplaması, nav ışık) */
  .brand-mark, .to-top svg { animation:none !important; transform:none !important; }
  .main-nav a::after { display:none !important; }
  .value-card, .series-card, .video-link { transform:none !important; } /* 3D eğim JS'te zaten kapalı */
  /* Dua çerçevesi: tam çizili statik, metin tam görünür (JS başlangıç durumu uygulamaz) */
  .dua-border-line { stroke-dashoffset:0 !important; }
  .dua-border-glow { opacity:0 !important; }

  /* Parallax dekor katmanları sabit; SplitText kelimeleri tam görünür */
  .hero-glow, .hero-pattern, .hero-mosque { transform:none !important; }
  .splash-line { transform:scaleX(1) !important; }
  .splash-word { opacity:1 !important; }
  /* Hero'nun tüm alt öğeleri görünür kalsın — birincil CTA/proof/eyebrow kaybolmasın */
  .hero-title, .hero-title *, .hero-sub,
  .hero .eyebrow, .hero .eyebrow-line,
  .hero-cta, .hero-cta .btn, .hero-proof, .hero-proof li {
    opacity:1 !important; transform:none !important;
  }
}

/* ---- Açılış "Geç" (atla) butonu — splash üzerinde, cam pill ---- */
.splash-skip {
  position:absolute; left:50%; bottom:max(26px, env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:3;
  font:600 var(--fs-sm)/1 var(--font-body); letter-spacing:.03em;
  color:var(--color-accent-strong); background:var(--glass-bg);
  border:1px solid var(--glass-border); border-radius:var(--r-pill);
  padding:9px 22px; cursor:pointer;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  opacity:0; animation:splash-skip-in .5s ease 1.15s forwards;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.splash-skip::after { content:" ›"; }
.splash-skip:hover { border-color:var(--color-accent-strong);
  background:color-mix(in oklab, var(--color-accent-strong) 16%, var(--glass-bg));
  transform:translateX(-50%) translateY(-1px); }
.splash-skip:focus-visible { outline:2px solid var(--color-ring); outline-offset:3px; }
@keyframes splash-skip-in { to { opacity:.92; } }

/* ==========================================================
   AÇILIŞ GÜZELLEŞTİRME — nur backdrop + yörünge + parıltılar
   (hepsi GSAP timeline'dan bağımsız, splash ile birlikte solar;
    reduced-motion'da #splash zaten display:none)
   ========================================================== */
#splash::before {   /* merkez nur ışığı — yumuşak nefes */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 42%, var(--nur-soft, rgba(212,175,55,.14)) 0%, transparent 60%);
  animation:splash-breathe 4.2s ease-in-out infinite;
}
#splash::after {    /* köşe vinyet — derinlik */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(12,10,9,.26) 100%);
}
:root[data-theme="dark"] #splash::after {
  background:radial-gradient(130% 100% at 50% 45%, transparent 48%, rgba(0,0,0,.55) 100%);
}
@keyframes splash-breathe { 0%,100% { opacity:.5; } 50% { opacity:1; } }

/* Dönen ince hâle + üzerinde gezen altın ışık noktası */
.splash-orbit {
  position:absolute; left:50%; top:44px; width:184px; height:184px;
  margin:-92px 0 0 -92px; border-radius:50%; pointer-events:none;
  border:1px dashed rgba(212,175,55,.28);
  opacity:0; animation:splash-orbit-in .9s ease .3s forwards, splash-spin 14s linear infinite;
}
.splash-orbit::before {
  content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px; margin-left:-3px;
  border-radius:50%; background:var(--nur,#F2D680);
  box-shadow:0 0 10px 2px rgba(242,214,128,.7);
}
@keyframes splash-orbit-in { to { opacity:1; } }
@keyframes splash-spin { to { transform:rotate(360deg); } }

/* Çevrede sakin sönüp yanan parıltı yıldızcıkları */
.splash-sparks { position:absolute; left:50%; top:44px; width:0; height:0; pointer-events:none; }
.splash-sparks i {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--nur,#F2D680); box-shadow:0 0 8px 1px rgba(242,214,128,.6);
  opacity:0; animation:splash-twinkle 2.6s ease-in-out infinite;
}
.splash-sparks i:nth-child(1){ transform:translate(-98px,-40px); animation-delay:.2s; }
.splash-sparks i:nth-child(2){ transform:translate(90px,-66px);  animation-delay:.7s; }
.splash-sparks i:nth-child(3){ transform:translate(-122px,46px); animation-delay:1.1s; }
.splash-sparks i:nth-child(4){ transform:translate(114px,38px);  animation-delay:1.5s; }
.splash-sparks i:nth-child(5){ transform:translate(-42px,-106px);animation-delay:.9s; }
.splash-sparks i:nth-child(6){ transform:translate(58px,98px);   animation-delay:1.9s; }
@keyframes splash-twinkle { 0%,100% { opacity:0; } 50% { opacity:.9; } }

/* ==========================================================
   YENİ AÇILIŞ (sp-) — eşmerkezli amblem + zarif animasyonlar
   Tüm katmanlar CSS grid'in AYNI hücresinde ortalanır → hiçbir sembol kaymaz.
   Dönme animasyonları CSS'te (transform); GSAP bunlara yalnız opacity uygular.
   ========================================================== */
.sp-stage { display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; padding:0 24px; }
.sp-emblem { position:relative; width:min(66vw, 240px); aspect-ratio:1; display:grid; place-items:center; margin-bottom:4px; }
.sp-emblem > * { grid-area:1 / 1; }   /* tüm katmanlar eşmerkezli istiflenir */

.sp-glow {
  width:100%; height:100%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,247,224,.70) 0%, rgba(242,214,128,.42) 34%, transparent 68%);
  filter:blur(14px); mix-blend-mode:screen;
}
.sp-rays {
  width:152%; height:152%; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(242,214,128,.16) 8deg, transparent 22deg,
    transparent 45deg, rgba(242,214,128,.12) 53deg, transparent 67deg,
    transparent 90deg, rgba(242,214,128,.16) 98deg, transparent 112deg,
    transparent 135deg, rgba(242,214,128,.12) 143deg, transparent 157deg,
    transparent 180deg, rgba(242,214,128,.16) 188deg, transparent 202deg,
    transparent 225deg, rgba(242,214,128,.12) 233deg, transparent 247deg,
    transparent 270deg, rgba(242,214,128,.16) 278deg, transparent 292deg,
    transparent 315deg, rgba(242,214,128,.12) 323deg, transparent 337deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, transparent 30%, #000 46%, #000 68%, transparent 74%);
          mask:radial-gradient(circle, transparent 30%, #000 46%, #000 68%, transparent 74%);
  animation:sp-spin 26s linear infinite;
}
.sp-ring {
  border-radius:50%; border:1.5px solid rgba(212,175,55,.5);
  box-shadow:0 0 22px rgba(242,214,128,.18), inset 0 0 14px rgba(242,214,128,.12);
}
.sp-ring-1 { width:52%; height:52%; }
.sp-ring-2 { width:74%; height:74%; border-style:dashed; border-color:rgba(212,175,55,.32); box-shadow:none; }
.sp-ring-3 { width:96%; height:96%; }
.sp-orbit {
  position:relative; width:84%; height:84%; border-radius:50%; pointer-events:none;
  animation:sp-spin 15s linear infinite;
}
.sp-orbit-dot {
  position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px;
  border-radius:50%; background:var(--nur,#F2D680); box-shadow:0 0 12px 2px rgba(242,214,128,.75);
}
.sp-sparks { position:relative; width:100%; height:100%; pointer-events:none; }
.sp-sparks i {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--nur,#F2D680); box-shadow:0 0 8px 1px rgba(242,214,128,.6);
  animation:sp-twinkle 2.8s ease-in-out infinite;
}
.sp-sparks i:nth-child(1){ top:5%;  left:50%; animation-delay:.1s; }
.sp-sparks i:nth-child(2){ top:22%; left:86%; animation-delay:.6s; }
.sp-sparks i:nth-child(3){ top:58%; left:95%; animation-delay:1.0s; }
.sp-sparks i:nth-child(4){ top:90%; left:66%; animation-delay:1.4s; }
.sp-sparks i:nth-child(5){ top:92%; left:32%; animation-delay:.8s; }
.sp-sparks i:nth-child(6){ top:58%; left:4%;  animation-delay:1.8s; }
.sp-sparks i:nth-child(7){ top:22%; left:12%; animation-delay:1.2s; }
.sp-sparks i:nth-child(8){ top:6%;  left:30%; animation-delay:2.1s; }
.sp-mark { width:40%; height:40%; filter:drop-shadow(0 0 10px rgba(242,214,128,.35)); }

.sp-basmala {
  font-family:var(--font-arabic); font-weight:700; line-height:1;
  font-size:clamp(2rem, 7vw, 2.6rem); color:var(--color-accent-strong);
  text-shadow:0 0 22px rgba(242,214,128,.45), 0 0 48px rgba(212,175,55,.28);
}
.sp-line {
  width:min(60vw,168px); height:2px; border-radius:2px; transform-origin:center;
  background:linear-gradient(90deg, transparent, var(--color-accent-strong), var(--nur,#F2D680), var(--color-accent-strong), transparent);
  box-shadow:0 0 12px rgba(242,214,128,.4);
}
.sp-word {
  font-family:var(--font-display); font-weight:600; color:var(--color-text);
  font-size:clamp(1.35rem, 5vw, 1.9rem);
  display:inline-flex; align-items:center; gap:.4ch; letter-spacing:.01em;
}
.sp-word-txt {
  background:linear-gradient(92deg, var(--color-text) 0%, var(--color-accent-strong) 58%, var(--nur,#F2D680) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.sp-word-moon { filter:drop-shadow(0 0 10px rgba(242,214,128,.55)); }
.sp-tag {
  font-family:var(--font-body); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.16em; color:var(--color-text-muted);
}
@keyframes sp-spin { to { transform:rotate(360deg); } }
@keyframes sp-twinkle { 0%,100% { opacity:0; transform:scale(.6); } 50% { opacity:.95; transform:scale(1); } }

/* ==========================================================
   AÇILIŞ v2 — KÂBE ÜZERİNE GÜNEŞ DOĞUŞU (soyut/geometrik)
   ========================================================== */
#splash { overflow:hidden; }
#splash::before, #splash::after { content:none; }   /* eski nur/vinyet pseudo'larını kapat */

.dawn-sky { position:absolute; inset:0; z-index:0; pointer-events:none; }
.dawn-sky-night { background:linear-gradient(180deg, #070b1f 0%, #101334 42%, #241634 78%, #341f3a 100%); }
.dawn-sky-dawn  { background:linear-gradient(180deg, #24305f 0%, #6a4a63 40%, #b9713f 68%, #E6A85E 84%, #F4D98A 100%); }

.dawn-stars { position:absolute; inset:0; z-index:1; pointer-events:none; }
.dawn-stars i {
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff; box-shadow:0 0 5px 1px rgba(255,255,255,.6);
  animation:sp-twinkle 3.4s ease-in-out infinite;
}
.dawn-stars i:nth-child(1){ top:12%; left:16%; animation-delay:.1s; }
.dawn-stars i:nth-child(2){ top:20%; left:74%; animation-delay:.5s; }
.dawn-stars i:nth-child(3){ top:9%;  left:52%; animation-delay:.9s; }
.dawn-stars i:nth-child(4){ top:28%; left:33%; animation-delay:1.3s; }
.dawn-stars i:nth-child(5){ top:16%; left:88%; animation-delay:.7s; }
.dawn-stars i:nth-child(6){ top:34%; left:60%; animation-delay:1.7s; }
.dawn-stars i:nth-child(7){ top:24%; left:8%;  animation-delay:2.0s; }
.dawn-stars i:nth-child(8){ top:6%;  left:38%; animation-delay:1.1s; }
.dawn-stars i:nth-child(9){ top:31%; left:82%; animation-delay:.3s; }
.dawn-stars i:nth-child(10){ top:14%; left:26%; animation-delay:1.5s; }

/* Sahne katmanı metin/sahne için gökyüzünün üstünde */
.sp-stage { position:relative; z-index:2; }
.dawn-scene { position:relative; width:min(88vw,400px); height:260px; margin-bottom:8px; }

.dawn-rays {
  position:absolute; left:50%; top:98px; width:360px; height:360px; margin:-180px 0 0 -180px;
  border-radius:50%; pointer-events:none; opacity:0;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(242,214,128,.22) 6deg, transparent 20deg,
    transparent 45deg, rgba(242,214,128,.15) 51deg, transparent 65deg,
    transparent 90deg, rgba(242,214,128,.22) 96deg, transparent 110deg,
    transparent 135deg, rgba(242,214,128,.15) 141deg, transparent 155deg,
    transparent 180deg, rgba(242,214,128,.22) 186deg, transparent 200deg,
    transparent 225deg, rgba(242,214,128,.15) 231deg, transparent 245deg,
    transparent 270deg, rgba(242,214,128,.22) 276deg, transparent 290deg,
    transparent 315deg, rgba(242,214,128,.15) 321deg, transparent 335deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, transparent 22%, #000 30%, #000 60%, transparent 66%);
          mask:radial-gradient(circle, transparent 22%, #000 30%, #000 60%, transparent 66%);
  animation:dawn-rays-in 1.8s ease 1.3s forwards, sp-spin 46s linear infinite;
}
@keyframes dawn-rays-in { to { opacity:.5; } }

.dawn-sun {
  position:absolute; left:50%; top:124px; width:140px; height:140px; margin:-70px 0 0 -70px;
  border-radius:50%;
  background:radial-gradient(circle, #FFF7E0 0%, #F7DE9A 34%, #E9B667 60%, rgba(233,182,103,.18) 78%, transparent 82%);
  box-shadow:0 0 66px 20px rgba(242,214,128,.45);
}
/* dawn-haze kaldırıldı — Kâbe altındaki karanlık bölge istenmedi */
.dawn-ground {
  position:absolute; left:6%; right:6%; top:208px; height:2px; border-radius:2px; transform-origin:center;
  background:linear-gradient(90deg, transparent, var(--nur,#F2D680), transparent);
  box-shadow:0 0 28px 5px rgba(242,214,128,.5);
}
.dawn-kaaba {
  position:absolute; left:50%; bottom:28px; width:210px; height:210px; margin-left:-105px;
  filter:drop-shadow(0 0 18px rgba(242,214,128,.30));   /* koyu gölge değil, altın hâle (gece göğünde ayrışsın) */
}

/* Ek animasyonlar: hilal + ufuktan ışık nabızları + yükselen ışık zerreleri */
.dawn-moon {
  position:absolute; top:13%; right:15%; z-index:1; pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.dawn-pulse {
  position:absolute; left:50%; top:146px; width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%; border:1px solid rgba(242,214,128,.5); pointer-events:none; opacity:0;
  animation:dawn-pulse-anim 4.6s ease-out infinite;
}
.dawn-pulse-2 { animation-delay:2.3s; }
@keyframes dawn-pulse-anim {
  0%   { transform:scale(.3); opacity:.55; }
  70%  { opacity:.12; }
  100% { transform:scale(6);  opacity:0; }
}
.dawn-motes { position:absolute; inset:0; pointer-events:none; z-index:3; }
.dawn-motes i {
  position:absolute; bottom:22%; width:3px; height:3px; border-radius:50%;
  background:var(--nur,#F2D680); box-shadow:0 0 6px 1px rgba(242,214,128,.6);
  opacity:0; animation:dawn-mote 6.5s ease-in infinite;
}
.dawn-motes i:nth-child(1){ left:14%; animation-delay:0s;   }
.dawn-motes i:nth-child(2){ left:28%; animation-delay:1.4s; }
.dawn-motes i:nth-child(3){ left:40%; animation-delay:2.8s; }
.dawn-motes i:nth-child(4){ left:52%; animation-delay:.8s;  }
.dawn-motes i:nth-child(5){ left:63%; animation-delay:3.4s; }
.dawn-motes i:nth-child(6){ left:74%; animation-delay:2.0s; }
.dawn-motes i:nth-child(7){ left:85%; animation-delay:4.0s; }
.dawn-motes i:nth-child(8){ left:47%; animation-delay:5.0s; }
@keyframes dawn-mote {
  0%   { transform:translateY(0) scale(.6);     opacity:0; }
  15%  { opacity:.9; }
  80%  { opacity:.6; }
  100% { transform:translateY(-130px) scale(1); opacity:0; }
}