/* ayet.melberlabs.com — uygulamanın kendi dili: gece mürekkebi + fildişi + yaldız. Dış istek yok. */
@font-face { font-family: 'Cormorant'; src: url('/fonts/CormorantGaramond_500Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/Manrope_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/Manrope_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Amiri Quran'; src: url('/fonts/AmiriQuran_400Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --bg: #0B0E13; --surface: #141922; --line: #2A2F38; --ivory: #F3EBDD; --muted: #A9A196;
  --faint: #6E6A63; --gold: #C9A45C; --gold-light: #E6CF94; --gold-dim: rgba(201,164,92,0.14);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ivory);
  font: 400 17px/1.6 'Manrope', system-ui, sans-serif;
  background-image: radial-gradient(ellipse at 50% -10%, rgba(201,164,92,0.10), transparent 60%);
}
a { color: var(--gold-light); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
header.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ivory); text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); }
.brand span { font: 500 24px/1 'Cormorant', serif; letter-spacing: .2px; }
nav.langs a { color: var(--muted); text-decoration: none; margin-inline-start: 14px; font-size: 14px; }
nav.langs a[aria-current] { color: var(--gold-light); }

.hero { padding: 56px 0 40px; text-align: center; }
.eyebrow { color: var(--gold); letter-spacing: 2.4px; text-transform: uppercase; font-size: 12px; font-weight: 600; }
h1 { font: 500 clamp(40px, 7vw, 68px)/1.05 'Cormorant', serif; margin: 14px auto 18px; max-width: 14ch; letter-spacing: -0.5px; }
.lead { color: var(--muted); font-size: 19px; max-width: 34em; margin: 0 auto; }
.badge { display: inline-block; margin-top: 28px; padding: 13px 22px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-light); font-weight: 600; font-size: 15px; text-decoration: none; }

.verse { margin: 40px auto 8px; max-width: 640px; padding: 34px 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); text-align: center; }
.verse .ar { font: 400 30px/2 'Amiri Quran', serif; direction: rtl; color: var(--ivory); }
.verse .tr { font: 500 22px/1.45 'Cormorant', serif; color: var(--ivory); margin-top: 12px; }
.verse .ref { color: var(--gold); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-top: 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 48px 0; }
.card { border: 1px solid var(--line); border-radius: 20px; padding: 24px; background: rgba(20,25,34,0.6); }
.card h3 { font: 500 26px/1.15 'Cormorant', serif; margin: 0 0 8px; color: var(--gold-light); }
.card p { margin: 0; color: var(--muted); font-size: 16px; }

.plain { padding: 24px 0 48px; max-width: 720px; }
.plain h1 { text-align: start; margin: 8px 0 16px; max-width: none; font-size: clamp(36px, 6vw, 52px); }
.plain h2 { font: 500 28px/1.2 'Cormorant', serif; color: var(--gold-light); margin: 36px 0 8px; }
.plain h3 { font-size: 16px; font-weight: 600; margin: 22px 0 4px; }
.plain p, .plain li { color: var(--muted); }
.contact { display: inline-block; margin: 8px 0; padding: 12px 18px; border-radius: 14px; background: var(--gold-dim); color: var(--gold-light); font-weight: 600; text-decoration: none; }

footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--faint); font-size: 14px; }
footer a { color: var(--muted); margin-inline-end: 16px; }
[dir=rtl] body, [dir=rtl] .lead, [dir=rtl] .card, [dir=rtl] .plain { font-family: 'Manrope', 'Geeza Pro', system-ui, sans-serif; }
@media (max-width: 560px) { .verse .ar { font-size: 24px; } .hero { padding-top: 32px; } }