/* صفحات Azkari: لازورد وذهب كالمصاحف المذهّبة، بنفس ألوان التطبيق */
:root {
  --bg: #0e1b38;
  --glow: #21407c;
  --surface: #14254b;
  --ink: #f2e9d3;
  --muted: #9aa8c7;
  --line: #283b66;
  --frame: #8a7442;
  --gold: #d8b25c;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: radial-gradient(90% 50% at 50% 0%, var(--glow), var(--bg) 70%) no-repeat, var(--bg);
  font: 17px/1.85 "IBM Plex Sans Arabic", system-ui, sans-serif;
}
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }

/* إظهار لغة واحدة فقط */
body[data-lang="ar"] [lang="en"], body[data-lang="en"] [lang="ar"] { display: none; }
[lang="ar"] { direction: rtl; text-align: right; }
[lang="en"] { direction: ltr; text-align: left; }

.switch { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.switch a {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 16px;
  font-size: 15px;
}
body[data-lang="ar"] .switch a[data-to="ar"], body[data-lang="en"] .switch a[data-to="en"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}

.hero { text-align: center; padding: 28px 0 8px; }
.hero svg { width: 132px; height: 132px; }
.brand { font-family: "Amiri", serif; font-weight: 700; font-size: 52px; line-height: 1.2; margin: 10px 0 0; }
.tagline { color: var(--gold); font-family: "Amiri", serif; font-size: 21px; margin: 0; text-align: center !important; }

h1 { font-family: "Amiri", serif; font-weight: 700; font-size: 34px; line-height: 1.5; margin: 24px 0 4px; }
h2 { font-family: "Amiri", serif; font-weight: 700; font-size: 23px; color: var(--gold); margin: 32px 0 6px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); font-size: 15px; }
a { color: var(--gold); }

/* إطار مزدوج بنجوم في الأركان كإطار صفحة المصحف */
.frame { position: relative; border: 1px solid var(--frame); border-radius: 6px; padding: 4px; margin-top: 24px; background: var(--surface); }
.frame > .inner { border: 1px solid var(--frame); border-radius: 3px; padding: 20px; }
.frame .star { position: absolute; width: 14px; height: 14px; fill: var(--gold); }
.frame .tl { top: -7px; left: -7px; } .frame .tr { top: -7px; right: -7px; }
.frame .bl { bottom: -7px; left: -7px; } .frame .br { bottom: -7px; right: -7px; }
.frame h2 { margin-top: 0; }

.faq h3 { font-size: 17px; margin: 20px 0 2px; }
footer { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 16px; }