/*
  بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ

  «فَمَنْ كَانَ يَرْجُوا لِقَٓاءَ رَبِّه۪ فَلْيَعْمَلْ عَمَلًا صَالِحًا»
  "Artık kim Rabbine kavuşmayı umuyorsa, salih amel işlesin." (Kehf, 18/110)

  "Allah katında amellerin en sevimlisi, az da olsa devamlı olanıdır."
  (Buhârî, Rikâk; Müslim, Salâtü'l-Müsâfirîn)

  SALİH AMEL TANITIM SİTESİ — STİL (2. görsel tur)

  YENİ BİR MARKA DİLİ DEĞİLDİR. Değerler uygulamadan alınmıştır:
    • fildişi #FBFAF6, krem #F6F1E7, yeşil #123C36, altın #C59854 / #8A6628 →
      src/pages/Login.jsx (KREM, YESIL, ALTIN, ALTIN_METIN), src/index.css
    • koyu tema: uygulamanın koyu dünyası (derin yeşil zemin, fildişi yazı,
      birincil yeşil hsl(162 55% 53%)), siyaha gömülmez
    • yazı tipi: Inter (uygulamayla aynı @fontsource dosyaları, yerel)
    • ikonlar: lucide (uygulamadaki ikonların kendisi, derlemede satır içi)
    • görseller: onaylı Kudüs / Kubbetü's-Sahra (logosuz), gerçek demo ekranlar,
      İz Bırakanlar'ın gerçek portreleri. Desen, hilal, cami ikonu YOK.
  Tema: YALNIZ html[data-tema] (tema.js). Sistem teması yalnız ilk değerdir.
*/

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/yazi/inter-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/yazi/inter-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/yazi/inter-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/yazi/inter-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/yazi/inter-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/yazi/inter-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(/yazi/inter-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(/yazi/inter-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Tokenler ─────────────────────────────────────────────────────────── */
/* TEK MEKANİZMA: bütün tema kuralları html[data-tema] seçicisine bağlıdır
   (tema.js boyamadan önce yazar). data-tema yoksa açık tema geçerlidir.
   AÇIK tema esastır: fildişi zemin, marka yeşili, kontrollü altın. */
:root {
  --zemin: #FBFAF6;            /* marka fildişi (manifest background_color) */
  --yuzey: #F6F1E7;            /* giriş ekranı kremi (Login.jsx KREM) */
  --kart: #FFFFFF;
  --murekkep: #1E293B;         /* --foreground */
  --baslik: #123C36;           /* başlıklar: marka yeşili (Login.jsx YESIL) */
  --ikincil: #525F73;          /* --muted-foreground */
  --yesil: #123C36;            /* düğme, ikon, bağlantı */
  --yesil-yazi: #FBFAF6;       /* yeşil düğme üstündeki yazı */
  --yesil-yuzey: #EEF4F1;      /* --accent ailesi, çok açık */
  --altin: #C59854;            /* süs (Login.jsx ALTIN) */
  --altin-metin: #8A6628;      /* küçük altın yazı (Login.jsx ALTIN_METIN) */
  --kenar: rgba(18, 60, 54, 0.09);
  --kenar-guclu: rgba(18, 60, 54, 0.18);
  --golge-kart: 0 1px 2px rgba(18, 60, 54, 0.04), 0 12px 32px -18px rgba(18, 60, 54, 0.18);
  --golge-kart-ust: 0 2px 4px rgba(18, 60, 54, 0.05), 0 24px 48px -22px rgba(18, 60, 54, 0.28);
  --golge-cihaz: rgba(18, 60, 54, 0.32);
  --ust-zemin: rgba(251, 250, 246, 0.9);
  /* sinematik bant (İz Bırakanlar): iki temada da koyu yeşil */
  --sinema-1: #123C36;
  --sinema-2: #0C2622;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

/* KOYU tema: uygulamanın koyu dünyası, siyaha değil derin yeşile yaslanır.
   Yazı fildişi; birincil yeşil uygulamanın .dark değeri (hsl 162 55% 53%). */
:root[data-tema="koyu"] {
  --zemin: #0F1F1B;
  --yuzey: #132823;
  --kart: #17302A;
  --murekkep: #EDE8DC;
  --baslik: #F6F1E7;
  --ikincil: #B3C0B8;
  --yesil: #47C9A4;
  --yesil-yazi: #0B1F1A;
  --yesil-yuzey: rgba(71, 201, 164, 0.10);
  --altin: #D9B46A;
  --altin-metin: #E2C27F;
  --kenar: rgba(246, 241, 231, 0.08);
  --kenar-guclu: rgba(246, 241, 231, 0.18);
  --golge-kart: 0 1px 2px rgba(0, 0, 0, 0.2), 0 16px 36px -20px rgba(0, 0, 0, 0.6);
  --golge-kart-ust: 0 2px 4px rgba(0, 0, 0, 0.25), 0 28px 56px -24px rgba(0, 0, 0, 0.7);
  --golge-cihaz: rgba(0, 0, 0, 0.6);
  --ust-zemin: rgba(15, 31, 27, 0.9);
  --sinema-1: #0E2420;
  --sinema-2: #091815;
  color-scheme: dark;
}

/* ── Temel ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; background: var(--zemin); }
body {
  margin: 0; background: var(--zemin); color: var(--murekkep);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Tema değişirken renkler yumuşak geçsin (yalnız düğmeye basınca). */
.tema-geciyor body, .tema-geciyor body * { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; line-height: 1.12; color: var(--baslik); font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--yesil); outline-offset: 3px; border-radius: 8px; }

.kap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.dar { max-width: 640px; }
.orta { text-align: center; margin-left: auto; margin-right: auto; }
.atla { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--kart); padding: 8px 14px; border-radius: 10px; }
.atla:focus { left: 12px; }

/* Logo: açık temada YALNIZ renkli, koyu temada YALNIZ fildişi.
   (src/components/brand/SebatBrand.jsx: "Açık zeminde tam renkli, koyu
   zeminde fildişi tek renk. Başka renk yok.") */
.logo-fildisi { display: none !important; }
[data-tema="koyu"] .logo-renkli { display: none !important; }
[data-tema="koyu"] .logo-fildisi { display: block !important; }

.ust-baslik {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--altin-metin); margin-bottom: 18px;
}
/* Başlık önünde kısa altın çizgi: tek süs bu. */
.ust-baslik::before { content: ""; width: 28px; height: 1px; background: var(--altin); opacity: 0.9; }
.orta .ust-baslik::after { content: ""; width: 28px; height: 1px; background: var(--altin); opacity: 0.9; }

/* ── Düğmeler ─────────────────────────────────────────────────────────── */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 14px;
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 220ms ease, border-color 180ms ease, color 180ms ease;
}
.dugme:active { transform: scale(0.98); }
.dugme svg { width: 18px; height: 18px; transition: transform 220ms ease; }
.dugme:hover svg { transform: translateX(3px); }
.dugme-ana {
  background: var(--yesil); color: var(--yesil-yazi);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 10px 24px -14px var(--golge-cihaz);
}
.dugme-ana:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 16px 30px -14px var(--golge-cihaz); }
.dugme-ikincil { background: color-mix(in srgb, var(--kart) 70%, transparent); color: var(--yesil); border: 1px solid var(--kenar-guclu); }
.dugme-ikincil:hover { border-color: var(--yesil); }
.dugme-metin { color: var(--yesil); padding: 0 12px; }
.dugme-metin:hover { background: var(--yesil-yuzey); }
.dugme-buyuk { min-height: 52px; padding: 0 26px; border-radius: 16px; font-size: 16px; }
/* Görsel üstünde: yarı saydam fildişi cam */
.dugme-cam { color: #FBFAF6; border: 1px solid rgba(251, 250, 246, 0.45); background: rgba(251, 250, 246, 0.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dugme-cam:hover { background: rgba(251, 250, 246, 0.16); border-color: rgba(251, 250, 246, 0.7); }

/* ── Üst şerit ────────────────────────────────────────────────────────── */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: var(--ust-zemin);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color 200ms ease, background-color 200ms ease;
}
.ust.kaydi { border-bottom-color: var(--kenar); }
.ust-ic { display: flex; align-items: center; gap: 12px; height: 72px; }
.logo { flex: none; display: block; }
.logo img { height: 38px; width: auto; }
.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu > a { padding: 8px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ikincil); text-decoration: none; transition: color 160ms ease; }
.menu > a:hover { color: var(--yesil); }
.menu-cta { display: none; }
.ust-cta { display: flex; gap: 6px; }
.tema-dugme, .menu-dugme {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--kenar-guclu); background: transparent; color: var(--yesil);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.tema-dugme { border-radius: 999px; margin-left: 8px; }
.tema-dugme:hover, .menu-dugme:hover { border-color: var(--yesil); background: var(--yesil-yuzey); }
.tema-dugme svg { width: 19px; height: 19px; }
.tema-dugme span { display: inline-flex; transition: transform 300ms ease; }
.tema-dugme:hover span { transform: rotate(-12deg); }
.tema-gunes { display: none !important; }
[data-tema="koyu"] .tema-gunes { display: inline-flex !important; color: var(--altin); }
[data-tema="koyu"] .tema-ay { display: none !important; }
.menu-dugme { display: none; }
.menu-dugme svg { width: 22px; height: 22px; }
.menu-dugme .kapat { display: none; }
.menu-acik .menu-dugme .ac { display: none; }
.menu-acik .menu-dugme .kapat { display: block; }

@media (max-width: 1040px) {
  .ust-cta { display: none; }
  .tema-dugme { margin-left: auto; }
  .menu-dugme { display: inline-flex; }
  .menu {
    position: fixed; inset: 72px 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 24px; background: var(--zemin); border-bottom: 1px solid var(--kenar);
    box-shadow: 0 24px 40px -28px rgba(18, 60, 54, 0.3);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }
  .menu-acik .menu { visibility: visible; opacity: 1; transform: none; transition: opacity 180ms ease, transform 180ms ease; }
  .menu > a { padding: 14px 0; font-size: 17px; color: var(--murekkep); border-bottom: 1px solid var(--kenar); border-radius: 0; }
  .menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .menu-cta .dugme { min-height: 50px; }
}

/* ══ Telefon çerçevesi ═══════════════════════════════════════════════════
   Gerçekçi ama sade: koyu gövde, ince altın kenar ışığı, durum çubuğu ve
   kamera adası. Bütün ölçüler --g (genişlik) üzerinden em ile ölçeklenir:
   font-size = genişlik / 100 → 1em, cihaz genişliğinin %1'i. */
.cihaz { --g: 280px; width: var(--g); max-width: 100%; font-size: calc(var(--g) / 100); }
.telefon {
  position: relative; padding: 3.1em; border-radius: 15.5em;
  background: linear-gradient(155deg, #3B403D 0%, #191C1A 38%, #0E100F 62%, #2C302D 100%);
  box-shadow:
    inset 0 0 0 0.35em rgba(255, 255, 255, 0.10),
    inset 0 0 0 0.9em #0A0B0A,
    0 0 0 0.3em rgba(197, 152, 84, 0.28),
    0 6em 12em -5em var(--golge-cihaz),
    0 2.4em 5em -2.6em rgba(0, 0, 0, 0.35);
  transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}
/* yan tuşlar */
.telefon::before, .telefon::after { content: ""; position: absolute; width: 0.7em; border-radius: 0.4em; background: #2A2E2B; }
.telefon::before { left: -0.6em; top: 26%; height: 12%; box-shadow: 0 -9em 0 #2A2E2B; }
.telefon::after { right: -0.6em; top: 30%; height: 16%; }
.ekran {
  position: relative; overflow: hidden; border-radius: 12.6em;
  background: #FBFAF6; padding-top: 11em;      /* durum çubuğu şeridi */
}
.ekran.ekran-koyu-zemin { background: #121614; }
/* kamera adası */
.ekran::before {
  content: ""; position: absolute; z-index: 2; top: 2.4em; left: 50%; transform: translateX(-50%);
  width: 27%; height: 7em; border-radius: 99em; background: #060707;
}
/* saat */
.ekran::after {
  /* em burada kendi yazı boyuna göre: 3.6em yazı → konumlar /3.6 */
  content: "9:41"; position: absolute; top: 0.6em; left: 2.9em;
  font: 600 3.6em/1.75 var(--font); letter-spacing: -0.01em; color: #1E293B;
}
.ekran.ekran-koyu-zemin::after { color: #EDE8DC; }
.ekran img { display: block; width: 100%; height: auto; }
/* Çift sürümlü ekran: açık temada açık, koyu temada koyu okuyucu */
.tema-koyu-ekran { display: none; }
[data-tema="koyu"] .tema-acik-ekran { display: none; }
[data-tema="koyu"] .tema-koyu-ekran { display: block; }

/* Derinlik katmanı: JS --kay yazar (yalnız hareket açıkken) */
.kat { translate: 0 var(--kay, 0px); will-change: translate; }

/* Çok küçük süzülme (telefon ekranı okunur kalır) */
@keyframes suzul { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* ══ Hero ════════════════════════════════════════════════════════════════
   Onaylı Kudüs görseli tam genişlikte; fildişi bir perde metni okutur,
   Kubbetü's-Sahra sağda doğal biçimde görünür kalır. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: -72px; padding: 152px 0 96px;
  min-height: min(920px, 100svh);
}
.hero-fon { position: absolute; inset: 0; z-index: -2; }
.hero-fon img {
  width: 100%; height: calc(100% + 80px); object-fit: cover; object-position: 30% 100%;
  translate: 0 var(--kay, 0px); margin-top: -40px;
  filter: saturate(0.88) brightness(1.04);
}
.hero-perde {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(251, 250, 246, 0.96) 0%, rgba(251, 250, 246, 0.88) 30%, rgba(251, 250, 246, 0.42) 52%, rgba(251, 250, 246, 0) 70%),
    linear-gradient(180deg, rgba(251, 250, 246, 0.92) 0, rgba(251, 250, 246, 0.35) 18%, rgba(251, 250, 246, 0) 34%),
    linear-gradient(0deg, var(--zemin) 0, rgba(251, 250, 246, 0) 16%);
}
[data-tema="koyu"] .hero-fon img { filter: saturate(0.9) brightness(0.74) contrast(1.04); }
[data-tema="koyu"] .hero-perde {
  background:
    linear-gradient(90deg, rgba(15, 31, 27, 0.95) 0%, rgba(15, 31, 27, 0.85) 30%, rgba(15, 31, 27, 0.4) 54%, rgba(15, 31, 27, 0.08) 72%),
    linear-gradient(180deg, rgba(15, 31, 27, 0.9) 0, rgba(15, 31, 27, 0.3) 18%, rgba(15, 31, 27, 0) 34%),
    linear-gradient(0deg, var(--zemin) 0, rgba(15, 31, 27, 0) 18%);
}
.hero-ic { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.hero h1 { font-size: clamp(42px, 5.2vw, 68px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.04; max-width: 580px; }
.hero-aciklama { margin-top: 24px; max-width: 470px; font-size: 19px; line-height: 1.55; color: var(--ikincil); }
.cta-satir { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-not { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; font-weight: 500; color: var(--ikincil); }
.hero-not svg { width: 16px; height: 16px; color: var(--altin-metin); }

.hero-sahne { position: relative; height: 640px; }
.hero-sahne .kat { position: absolute; }
.hero-sahne .kat-arka { left: 36%; top: 8px; }
.hero-sahne .kat-on { left: 0; top: 58px; z-index: 2; }
.hero-sahne .cihaz-arka { --g: 240px; }
.hero-sahne .cihaz-on { --g: 262px; }
.hero-sahne .cihaz-arka .telefon { transform: perspective(1600px) rotateY(-14deg) rotateZ(2deg); animation: suzul 8s ease-in-out -3s infinite; }
.hero-sahne .cihaz-on .telefon { transform: perspective(1600px) rotateY(9deg) rotateZ(-1.5deg); animation: suzul 7s ease-in-out infinite; }
/* Hero girişi: yalnız CSS, betik gerekmez */
@keyframes giris { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.hero-metin > * { animation: giris 900ms cubic-bezier(.2, .7, .2, 1) both; }
.hero-metin > :nth-child(2) { animation-delay: 80ms; }
.hero-metin > :nth-child(3) { animation-delay: 160ms; }
.hero-metin > :nth-child(4) { animation-delay: 240ms; }
.hero-metin > :nth-child(5) { animation-delay: 320ms; }
.hero-sahne { animation: giris 1100ms cubic-bezier(.2, .7, .2, 1) 200ms both; }

/* ── Bölümler ─────────────────────────────────────────────────────────── */
.bolum { position: relative; padding: 128px 0; }
.bolum h2 { font-size: clamp(32px, 3.9vw, 48px); letter-spacing: -0.032em; }
.bolum-bas { margin-bottom: 64px; max-width: 680px; }
.bolum-aciklama { margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--ikincil); max-width: 470px; }
.iki-sutun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.iki-sutun.ters .sutun-metin { order: 2; }

.liste { margin-top: 36px; display: grid; gap: 18px; }
.liste li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ikincil); }
.liste li > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--yesil); }
.liste strong { color: var(--murekkep); font-weight: 600; }

/* ── Özellikler: çok temiz ───────────────────────────────────────────── */
.ozellikler { padding-top: 112px; }
.ozellik-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ozellik {
  position: relative; padding: 30px 28px 28px; border-radius: 24px;
  background: var(--kart); border: 1px solid var(--kenar); box-shadow: var(--golge-kart);
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1), box-shadow 320ms ease, border-color 320ms ease;
}
.ozellik:hover { transform: translateY(-4px); box-shadow: var(--golge-kart-ust); border-color: color-mix(in srgb, var(--altin) 40%, transparent); }
.ozellik-ikon {
  display: inline-flex; width: 48px; height: 48px; border-radius: 15px;
  align-items: center; justify-content: center; color: var(--yesil);
  background: var(--yesil-yuzey); margin-bottom: 22px;
  transition: transform 320ms ease;
}
.ozellik:hover .ozellik-ikon { transform: scale(1.06); }
.ozellik-ikon svg { width: 23px; height: 23px; }
.ozellik h3 { font-size: 17.5px; letter-spacing: -0.015em; line-height: 1.3; }
.ozellik p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ikincil); }

/* ── Kur'an: sakin ve geniş, krem bant ───────────────────────────────── */
.kuran { background: var(--yuzey); overflow: hidden; }
/* çok hafif sıcak ışık (gün doğumu tonu, desen yok) */
.kuran::before {
  content: ""; position: absolute; right: -10%; top: -20%; width: 70%; height: 120%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--altin) 18%, transparent), transparent 72%);
  pointer-events: none;
}
.kuran .kap { position: relative; }

/* ── İki telefonlu sahne (Kur'an, Takip) ─────────────────────────────── */
.sahne-cift { position: relative; height: 690px; }
.sahne-cift .kat { position: absolute; }
.sahne-cift .kat-arka { left: 4%; top: 0; }
.sahne-cift .kat-on { left: 40%; top: 60px; z-index: 2; }
.sahne-cift .cihaz-arka { --g: 250px; }
.sahne-cift .cihaz-on { --g: 280px; }
.sahne-cift .cihaz-arka .telefon { transform: perspective(1600px) rotateY(12deg) rotateZ(-2deg); }
.sahne-cift .cihaz-on .telefon { transform: perspective(1600px) rotateY(-8deg) rotateZ(1deg); }
.sahne-ters .kat-arka { left: auto; right: 4%; }
.sahne-ters .kat-on { left: auto; right: 40%; }
.sahne-ters .cihaz-arka .telefon { transform: perspective(1600px) rotateY(-12deg) rotateZ(2deg); }
.sahne-ters .cihaz-on .telefon { transform: perspective(1600px) rotateY(8deg) rotateZ(-1deg); }
@media (hover: hover) {
  .sahne-cift .cihaz:hover .telefon, .hero-sahne .cihaz:hover .telefon { transform: perspective(1600px) rotateY(0deg) rotateZ(0deg) translateY(-6px); }
}

/* ── İz Bırakanlar: sinematik koyu yeşil bant (iki temada da) ─────────── */
.iz {
  color: #EDE8DC; overflow: hidden;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(197, 152, 84, 0.16), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(71, 201, 164, 0.08), transparent 70%),
    linear-gradient(180deg, var(--sinema-1), var(--sinema-2));
}
.iz h2 { color: #F6F1E7; }
.iz .ust-baslik { color: #D9B46A; }
.iz .ust-baslik::before { background: #D9B46A; }
.iz .bolum-aciklama { color: rgba(237, 232, 220, 0.78); }
.iz .liste li { color: rgba(237, 232, 220, 0.74); }
.iz .liste li > svg { color: #D9B46A; }
.iz .liste strong { color: #F6F1E7; }
.iz .ekran { background: #FBFAF6; }
.iz-ust { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; margin-bottom: 64px; }
.iz-cihaz { position: relative; height: 600px; width: 330px; }
.iz-cihaz .kat { position: absolute; left: 30px; top: 0; }
.iz-cihaz .cihaz { --g: 270px; }
.iz-cihaz .telefon { transform: perspective(1600px) rotateY(-10deg) rotateZ(2deg); }

.portreler { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.portre {
  position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 3 / 4;
  background: #0A1C18; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(217, 180, 106, 0.18);
  transition: transform 400ms cubic-bezier(.2, .7, .2, 1), box-shadow 400ms ease;
}
.portre img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.portre img.ayna { transform: scaleX(-1); }
.portre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 22, 19, 0) 45%, rgba(8, 22, 19, 0.88) 100%);
}
@media (hover: hover) {
  .portre:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(217, 180, 106, 0.45); }
  .portre:hover img { transform: scale(1.04); }
  .portre:hover img.ayna { transform: scaleX(-1) scale(1.04); }
}
.portre-yazi { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 2px; }
.portre-yazi strong { font-size: 15.5px; font-weight: 600; line-height: 1.25; color: #F6F1E7; letter-spacing: -0.01em; }
.portre-yazi span { font-size: 12.5px; color: rgba(237, 232, 220, 0.72); font-variant-numeric: tabular-nums; }
.yakinda {
  position: absolute; z-index: 2; top: 12px; right: 12px; padding: 3px 10px; border-radius: 99px;
  font-style: normal; font-size: 11.5px; font-weight: 600; color: #3A2A0E; background: #E2C27F;
}

/* ── Hakkında ────────────────────────────────────────────────────────── */
.hakkinda { padding: 120px 0 128px; }
.hakkinda p:not(.ust-baslik) { margin-top: 22px; font-size: 18.5px; line-height: 1.7; color: var(--ikincil); }

/* ── Son çağrı: yeniden Kudüs, akşam ışığı ──────────────────────────── */
.son-cta { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0 140px; color: #F6F1E7; text-align: center; }
.son-fon { position: absolute; inset: 0; z-index: -2; }
.son-fon img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 82%; }
/* Akşam: üstte sıcak ışık kalır, aşağı doğru marka yeşiline iner. */
.son-perde {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(40, 22, 8, 0.36), transparent 75%),
    linear-gradient(180deg, rgba(70, 36, 10, 0.16) 0%, rgba(54, 34, 14, 0.32) 55%, rgba(12, 38, 34, 0.9) 100%);
}
[data-tema="koyu"] .son-fon img { filter: saturate(0.85) brightness(0.6); }
.son-ic { max-width: 720px; }
.son-cta h2 { font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.035em; color: #FBFAF6; text-shadow: 0 2px 24px rgba(40, 20, 6, 0.45); }
.son-cta .son-aciklama, .son-cta blockquote { text-shadow: 0 1px 14px rgba(20, 12, 4, 0.5); }
.son-aciklama { margin-top: 14px; font-size: 18.5px; color: rgba(251, 250, 246, 0.9); }
.son-cta .cta-satir { justify-content: center; }
.son-cta .dugme-ana { background: #FBFAF6; color: #123C36; }
.hadis { margin: 56px auto 0; max-width: 560px; padding-top: 28px; border-top: 1px solid rgba(226, 194, 127, 0.55); }
.hadis blockquote { margin: 0; font-size: 19px; line-height: 1.6; color: #FBFAF6; }
.hadis figcaption { margin-top: 12px; font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em; color: #E2C27F; }

/* ── Alt bilgi ────────────────────────────────────────────────────────── */
/* ── Tanıtım filmi ────────────────────────────────────────────────────────
   Oran önceden ayrılır (CLS yok): geniş ekranda 16:9, telefonda 9:16.
   Kırılım <source media="(min-width: 700px)"> ile AYNIDIR. */
.tanitim { padding: 104px 0 96px; }
.tanitim .bolum-bas { margin-bottom: 40px; }
.tanitim-cerceve {
  position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: 24px; overflow: hidden; background: #0F1F1B;
  border: 1px solid var(--kenar-guclu); box-shadow: var(--golge-kart-ust);
}
.tanitim-video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
@media (max-width: 699px) {
  .tanitim { padding: 72px 0 64px; }
  .tanitim .bolum-bas { margin-bottom: 28px; }
  /* Dikey film ekrana sığsın: yükseklik en çok görünür alanın %78'i. */
  .tanitim-cerceve { aspect-ratio: 9 / 16; width: min(100%, calc(78vh * 9 / 16)); width: min(100%, calc(78svh * 9 / 16)); border-radius: 22px; }
}

/* Alt bilgi: marka + kurumsal bilgi + sosyal | Yasal | İletişim.
   Üstte uygulamanın ayraç motifi (ince altın çizgi + eşkenar dörtgen). */
.alt { position: relative; background: var(--yuzey); padding: 64px 0 calc(48px + env(safe-area-inset-bottom)); }
.alt-ayrac { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; width: min(240px, 60%); }
.alt-ayrac span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--altin)); opacity: 0.7; }
.alt-ayrac span:last-child { background: linear-gradient(270deg, transparent, var(--altin)); }
.alt-ayrac i { width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px; background: var(--altin); }
.alt::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--kenar); }
.alt-ic { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px 48px; align-items: start; }
.alt-logo { display: inline-block; }
.alt img { height: 36px; width: auto; }
.alt-marka p { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--ikincil); max-width: 380px; }
.alt-marka p > a { color: var(--yesil); font-weight: 500; text-underline-offset: 3px; }
.alt-baslik { margin: 6px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--altin-metin); }
.alt-kolon { display: flex; flex-direction: column; align-items: flex-start; }
.alt-kolon a { display: inline-flex; align-items: center; min-height: 40px; font-size: 14.5px; font-weight: 500; color: var(--murekkep); text-decoration: none; }
.alt-kolon a:hover { color: var(--yesil); text-decoration: underline; text-underline-offset: 3px; }
.sosyal { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sosyal a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; border: 1px solid var(--kenar-guclu); color: var(--yesil);
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.sosyal a:hover { background: var(--yesil-yuzey); border-color: var(--altin); transform: translateY(-1px); }
.sosyal a:focus-visible { outline: 2px solid var(--yesil); outline-offset: 2px; }
.sosyal svg { width: 18px; height: 18px; }

/* ══ Kaydırınca beliriş ═══════════════════════════════════════════════════
   .hareket sınıfını menu.js ekler (hareket azaltma kapalıysa). Betik yoksa
   ya da çalışmazsa her şey baştan görünür. */
.hareket .acil { opacity: 0; translate: 0 26px; transition: opacity 900ms cubic-bezier(.2, .7, .2, 1), translate 900ms cubic-bezier(.2, .7, .2, 1); }
.hareket .acil.gorundu { opacity: 1; translate: 0 0; }
.hareket .ozellik-izgara .acil:nth-child(3n+2), .hareket .portreler .acil:nth-child(2) { transition-delay: 90ms; }
.hareket .ozellik-izgara .acil:nth-child(3n), .hareket .portreler .acil:nth-child(3) { transition-delay: 180ms; }
.hareket .portreler .acil:nth-child(4) { transition-delay: 270ms; }
.hareket .portreler .acil:nth-child(5) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .acil { opacity: 1 !important; translate: none !important; }
  .kat, .hero-fon img { translate: none !important; }
}

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hero-ic { gap: 8px; }
  .hero-sahne .kat-arka { left: 40%; }
  .hero-sahne .cihaz-arka { --g: 220px; }
  .hero-sahne .cihaz-on { --g: 240px; }
  .iki-sutun { gap: 40px; }
  .sahne-cift .cihaz-arka { --g: 220px; }
  .sahne-cift .cihaz-on { --g: 250px; }
  .sahne-cift { height: 580px; }
}
@media (max-width: 900px) {
  .hero { padding: 128px 0 40px; min-height: 0; }
  .hero-ic, .iki-sutun { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-metin { text-align: center; }
  .hero h1, .hero-aciklama { margin-left: auto; margin-right: auto; }
  .hero .cta-satir { justify-content: center; }
  .hero-not { width: 100%; justify-content: center; }
  .hero-perde {
    background:
      linear-gradient(180deg, rgba(251, 250, 246, 0.94) 0%, rgba(251, 250, 246, 0.86) 38%, rgba(251, 250, 246, 0.2) 60%, rgba(251, 250, 246, 0) 72%),
      linear-gradient(0deg, var(--zemin) 0, rgba(251, 250, 246, 0) 12%);
  }
  [data-tema="koyu"] .hero-perde {
    background:
      linear-gradient(180deg, rgba(15, 31, 27, 0.94) 0%, rgba(15, 31, 27, 0.84) 38%, rgba(15, 31, 27, 0.3) 60%, rgba(15, 31, 27, 0.1) 72%),
      linear-gradient(0deg, var(--zemin) 0, rgba(15, 31, 27, 0) 12%);
  }
  .hero-sahne { max-width: 560px; width: 100%; margin: 0 auto; height: 560px; }
  .hero-sahne .kat-arka { left: 46%; }
  .hero-sahne .kat-on { left: 6%; top: 50px; }
  .iki-sutun.ters .sutun-metin { order: 0; }
  .sutun-metin { max-width: 600px; }
  .sahne-cift { max-width: 520px; width: 100%; margin: 0 auto; }
  .ozellik-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bolum { padding: 104px 0; }
  .iz-ust { grid-template-columns: minmax(0, 1fr); }
  .iz-cihaz { margin: 0 auto; }
  .portreler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Telefon ──────────────────────────────────────────────────────────── */
/* Telefonda dikey görsel: Kubbe, telefonların hemen üstünde kalacak biçimde
   hero'nun altına göre konumlanır (görsel yüksekliği ≈ 2.164 × genişlik;
   kubbenin alt kenarı görselin %79'unda). */
@media (max-width: 700px) {
  .hero { --sahne-h: 560px; }
  .hero-sahne { height: var(--sahne-h); }
  .hero-fon img {
    position: absolute; left: 0; width: 100%; height: auto; margin: 0; object-fit: fill;
    bottom: calc(var(--sahne-h) + 24px - 64px - 45.4vw);
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  }
  .hero-perde { background: linear-gradient(180deg, rgba(251, 250, 246, 0.94) 0%, rgba(251, 250, 246, 0.78) 30%, rgba(251, 250, 246, 0.25) 46%, rgba(251, 250, 246, 0) 56%); }
  [data-tema="koyu"] .hero-perde { background: linear-gradient(180deg, rgba(15, 31, 27, 0.95) 0%, rgba(15, 31, 27, 0.8) 30%, rgba(15, 31, 27, 0.3) 48%, rgba(15, 31, 27, 0.1) 58%); }
}
@media (max-width: 600px) {
  .kap { padding: 0 20px; }
  .ust-ic { height: 64px; gap: 8px; }
  .menu { inset: 64px 0 auto 0; padding: 8px 20px 20px; }
  .logo img { height: 34px; }

  .hero { margin-top: -64px; padding: 100px 0 24px; }
  .ust-baslik { font-size: 12px; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(34px, 9.6vw, 40px); letter-spacing: -0.035em; max-width: 340px; }
  .hero-aciklama { font-size: 17px; margin-top: 16px; max-width: 330px; }
  .cta-satir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 26px; }
  .cta-satir .dugme { width: 100%; }
  .hero .cta-satir { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .hero .cta-satir .dugme { padding: 0 12px; font-size: 15.5px; }
  .hero-not { margin-top: 16px; font-size: 13.5px; }
  .hero-ic { gap: 28px; }
  .hero { --sahne-h: 440px; }
  .hero-sahne { max-width: 360px; }
  .hero-sahne .cihaz-arka { --g: 172px; }
  .hero-sahne .cihaz-on { --g: 188px; }
  .hero-sahne .kat-arka { left: auto; right: 0; top: 6px; }
  .hero-sahne .kat-on { left: 0; top: 34px; }

  .bolum { padding: 88px 0; }
  .ozellikler { padding-top: 80px; }
  .bolum-bas { margin-bottom: 40px; }
  .bolum h2 { font-size: 31px; }
  .bolum-aciklama { font-size: 17px; }
  .ozellik-izgara { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ozellik { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 20px; border-radius: 20px; }
  .ozellik-ikon { grid-row: span 2; margin: 0; }
  .ozellik h3 { font-size: 16.5px; align-self: end; }
  .ozellik p { margin-top: 4px; font-size: 14.5px; }

  .sahne-cift { height: 500px; max-width: 360px; }
  .sahne-cift .cihaz-arka { --g: 172px; }
  .sahne-cift .cihaz-on { --g: 200px; }
  .sahne-cift .kat-arka { left: 0; }
  .sahne-cift .kat-on { left: auto; right: 0; top: 40px; }
  .sahne-ters .kat-arka { right: 0; left: auto; }
  .sahne-ters .kat-on { right: auto; left: 0; }

  .iz-ust { gap: 36px; }
  .iz-ust { margin-bottom: 16px; }
  .iz-cihaz { height: 500px; width: 250px; }
  .iz-cihaz .kat { left: 14px; }
  .iz-cihaz .cihaz { --g: 222px; }
  /* Portreler: yatay kaydırılan şerit (sayfa taşmaz; kaydırma kendi içinde) */
  .portreler {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 8px -20px 0; padding: 4px 20px 24px; scrollbar-width: none;
  }
  .portreler::-webkit-scrollbar { display: none; }
  .portre { flex: 0 0 64%; scroll-snap-align: center; border-radius: 20px; }

  .hakkinda { padding: 80px 0 96px; }
  .hakkinda p:not(.ust-baslik) { font-size: 17px; }
  /* Kubbe ve gün ışığı başlığın üstünde kalır; yazı zeytin yolunun üstünde */
  .son-cta { padding: 300px 0 96px; }
  .son-fon img { object-position: 50% 0%; }
  .son-perde {
    background:
      linear-gradient(180deg, var(--zemin) 0, rgba(251, 250, 246, 0) 8%),
      linear-gradient(180deg, rgba(70, 36, 10, 0) 20%, rgba(28, 40, 26, 0.55) 40%, rgba(12, 38, 34, 0.88) 70%, rgba(12, 38, 34, 0.94) 100%);
  }
  .son-aciklama { font-size: 17px; }
  .hadis { margin-top: 44px; }
  .hadis blockquote { font-size: 17px; }
  .alt { padding-top: 52px; }
  .alt-ic { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .alt-marka { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .hero .cta-satir { grid-template-columns: minmax(0, 1fr); }
  .hero-sahne .cihaz-arka { --g: 150px; }
  .hero-sahne .cihaz-on { --g: 166px; }
  .hero { --sahne-h: 390px; }
  .sahne-cift .cihaz-arka { --g: 150px; }
  .sahne-cift .cihaz-on { --g: 174px; }
  .sahne-cift { height: 420px; }
  .menu-cta { grid-template-columns: 1fr; }
}

/* ══ Yasal sayfalar (gizlilik, aydınlatma) ═══════════════════════════════
   Uygulamadaki YASAL_METIN_SINIFI tipografisinin karşılığı. */
.yasal { padding: 40px 0 72px; }
.yasal .kap { max-width: 720px; }
.yasal-geri { font-size: 14px; font-weight: 500; color: var(--yesil); text-underline-offset: 3px; }
.yasal h1 { margin-top: 18px; font-size: clamp(26px, 4vw, 32px); font-weight: 700; }
.yasal-tarih { margin-top: 6px; font-size: 13.5px; color: var(--ikincil); }
.yasal-metin { margin-top: 28px; font-size: 15px; line-height: 1.7; }
.yasal-metin > * + * { margin-top: 18px; }
.yasal-metin h2 { font-size: 18px; font-weight: 600; padding-top: 10px; }
.yasal-metin ul { list-style: disc; padding-left: 22px; }
.yasal-metin li + li { margin-top: 6px; }
.yasal-metin a { color: var(--yesil); text-underline-offset: 3px; }
.yasal-metin strong { font-weight: 600; }
.yasal-metin .yasal-vurgu { font-size: 17px; font-weight: 600; color: var(--yesil); }
.yasal-metin .yasal-ikincil { font-size: 13.5px; color: var(--ikincil); }
.ust-yalin .tema-dugme { margin-left: auto; }
.ust-yalin .ust-cta { display: flex; }
@media (max-width: 600px) { .ust-yalin .ust-cta .dugme { padding: 0 12px; font-size: 14px; } }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.bulunamadi { padding: 96px 0; text-align: center; }
.bulunamadi h1 { font-size: 32px; }
.bulunamadi p { margin-top: 12px; color: var(--ikincil); }
.bulunamadi .cta-satir { justify-content: center; }