/* =========================================================
   صفحة تأبين — نمط أبيض، عربي RTL
   ========================================================= */

:root {
  --paper:      #ffffff;
  --paper-2:    #f6f7f4;
  --ink:        #16211b;
  --muted:      #6e7a71;
  --line:       #e4e7e1;
  --green:      #2c5844;
  --green-soft: #eef3ef;
  --gold:       #a98b4e;

  --ui: "Tajawal", "Segoe UI", system-ui, sans-serif;
  --sacred: "Amiri", "Traditional Arabic", Georgia, serif;

  --measure: 62ch;
  --gap: clamp(3.5rem, 9vw, 7rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--green); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}
.narrow { max-width: var(--measure); margin-inline: auto; }

/* ---------- ترويسة ---------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 56px;
}
.topbar nav {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  margin-inline-start: auto;
}
.topbar a {
  color: var(--muted); text-decoration: none;
  font-size: .94rem; font-weight: 500;
  padding: .2rem 0;
  border-bottom: 1.5px solid transparent;
}
.topbar a:hover { color: var(--green); border-bottom-color: var(--gold); }
.topbar .brand {
  font-family: var(--sacred); font-size: 1.25rem;
  color: var(--ink); border: 0; font-weight: 700;
}

/* ---------- الواجهة ---------- */

.hero {
  padding: clamp(3rem, 8vw, 5.5rem) 0 var(--gap);
  text-align: center;
}
.hero .arch {
  width: min(270px, 62vw);
  margin: 0 auto 2.25rem;
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% 8px 8px / 42% 42% 6px 6px;
  overflow: hidden;
  background: var(--green-soft);
  box-shadow: 0 0 0 1px var(--line), 0 18px 45px -30px rgba(22,33,27,.6);
}
.hero .arch img { width: 100%; height: 100%; object-fit: cover; }
.hero .arch.empty {
  display: grid; place-items: center;
  color: var(--green); opacity: .5;
  font-family: var(--sacred); font-size: 3rem;
}

.hero h1 {
  font-family: var(--sacred);
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
}
.hero .full-name {
  font-size: 1rem; color: var(--muted); margin: 0 0 1.25rem;
}
.hero .dates {
  display: inline-flex; align-items: center; gap: .85rem;
  color: var(--muted); font-size: .97rem;
  font-variant-numeric: lining-nums;
}
.hero .dates i {
  width: 28px; height: 1px; background: var(--gold);
  display: inline-block; font-style: normal;
}
.hero .epitaph {
  font-family: var(--sacred);
  font-size: clamp(1.35rem, 3.6vw, 1.7rem);
  color: var(--green);
  margin: 2rem auto 0;
  max-width: 34ch;
  line-height: 1.7;
}
.hero .ayah {
  margin-top: 2.75rem;
  font-family: var(--sacred);
  font-size: 1.15rem;
  color: var(--muted);
}

/* ---------- أقسام ---------- */

section { padding-block: 0 var(--gap); }

.rule {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 2.5rem;
}
.rule::before, .rule::after {
  content: ""; height: 1px; background: var(--line); flex: 1;
}
.rule h2 {
  font-family: var(--sacred);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700; margin: 0;
  white-space: nowrap;
}
.rule .star { color: var(--gold); font-size: 1rem; }

.lede { color: var(--muted); font-size: .97rem; margin: -1.75rem 0 2.25rem; text-align: center; }

/* السيرة */
.bio { font-size: 1.08rem; line-height: 2.05; }
.bio p { margin: 0 0 1.35rem; }
.bio p:first-child::first-letter {
  font-family: var(--sacred); font-size: 3.2rem;
  float: right; line-height: .9; margin-inline-start: .35rem;
  color: var(--green);
}

/* ---------- معرض الصور ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.gallery figure { margin: 0; }
.gallery button.shot {
  padding: 0; border: 1px solid var(--line); background: var(--paper-2);
  width: 100%; aspect-ratio: 1; overflow: hidden; cursor: pointer;
  border-radius: 3px;
}
.gallery button.shot img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption {
  font-size: .86rem; color: var(--muted); margin-top: .55rem; text-align: center;
}

dialog.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 94vw; max-height: 94vh;
}
dialog.lightbox::backdrop { background: rgba(255,255,255,.96); }
dialog.lightbox img { max-height: 84vh; width: auto; margin-inline: auto; border-radius: 3px; }
dialog.lightbox .cap { text-align: center; color: var(--muted); padding: .9rem; font-size: .92rem; }
dialog.lightbox .close {
  position: fixed; top: 1rem; inset-inline-start: 1rem;
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; width: 40px; height: 40px; font-size: 1.1rem;
  cursor: pointer; color: var(--ink);
}

/* ---------- التسبيح ---------- */

.tasbih {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
  padding-block: var(--gap);
  margin-bottom: var(--gap);
}
.tasbih .rule::before, .tasbih .rule::after { background: #dfe4dd; }

.dhikr-picker {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin-bottom: 2.5rem;
}
.dhikr-picker button {
  font-family: var(--sacred); font-size: 1.12rem;
  padding: .35rem 1rem; cursor: pointer;
  background: var(--paper); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
}
.dhikr-picker button[aria-pressed="true"] {
  background: var(--green); border-color: var(--green); color: #fff;
}

.counter { display: grid; place-items: center; }
.counter .ring {
  position: relative;
  width: min(310px, 78vw); aspect-ratio: 1;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0; cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.counter svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) scaleX(-1); }
.counter svg circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.counter svg .track { stroke: #e0e5df; }
.counter svg .fill {
  stroke: var(--green);
  transition: stroke-dashoffset .35s cubic-bezier(.4,0,.2,1);
}
.counter .ring:active { transform: scale(.985); }
.counter .face { display: grid; place-items: center; gap: .1rem; pointer-events: none; }
.counter .face .word {
  font-family: var(--sacred); font-size: clamp(1.5rem, 5.5vw, 2rem);
  color: var(--ink); line-height: 1.4; padding-inline: 1.5rem; text-align: center;
}
.counter .face .num {
  font-size: clamp(3rem, 12vw, 4.2rem); font-weight: 300;
  color: var(--green); line-height: 1; font-variant-numeric: lining-nums;
}
.counter .face .of { font-size: .85rem; color: var(--muted); }

.counter-actions {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2rem;
}
.counter-actions button, .btn {
  font-family: var(--ui); font-size: .95rem;
  padding: .55rem 1.35rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.counter-actions button:hover, .btn:hover { border-color: var(--green); color: var(--green); }
.counter-total { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 1.1rem; }
.counter-total b { color: var(--ink); font-weight: 600; }

/* ---------- الأدعية ---------- */

.dua-group { margin-bottom: 3rem; }
.dua-group > h3 {
  font-family: var(--ui); font-size: .95rem; font-weight: 700;
  color: var(--green); margin: 0 0 1.25rem;
  padding-inline-start: .8rem;
  border-inline-start: 2px solid var(--gold);
}
.dua {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.dua:last-child { border-bottom: 0; }
.dua p {
  font-family: var(--sacred);
  font-size: clamp(1.2rem, 3.4vw, 1.42rem);
  line-height: 2.1; margin: 0;
}
.dua .foot {
  display: flex; align-items: center; gap: 1rem;
  margin-top: .9rem;
}
.dua .src { font-size: .84rem; color: var(--muted); }
.dua .copy {
  margin-inline-start: auto;
  border: 0; background: none; color: var(--muted);
  font-size: .84rem; cursor: pointer; font-family: var(--ui);
  padding: .2rem .4rem;
}
.dua .copy:hover { color: var(--green); }

/* ---------- القرآن ---------- */

.surah {
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: .75rem;
  background: var(--paper);
  overflow: hidden;
}
.surah > summary {
  list-style: none; cursor: pointer;
  padding: 1.15rem 1.4rem;
  display: flex; align-items: baseline; gap: .9rem;
}
.surah > summary::-webkit-details-marker { display: none; }
.surah > summary::after {
  content: "+"; margin-inline-start: auto;
  color: var(--muted); font-size: 1.3rem; line-height: 1;
}
.surah[open] > summary::after { content: "−"; }
.surah[open] > summary { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.surah .name { font-family: var(--sacred); font-size: 1.45rem; font-weight: 700; }
.surah .meta { font-size: .84rem; color: var(--muted); }

.surah .body { padding: 2rem clamp(1.2rem, 4vw, 2.5rem) 2.5rem; }
.surah .note { font-size: .88rem; color: var(--muted); text-align: center; margin: 0 0 1.5rem; }
.surah .basmala {
  font-family: var(--sacred); font-size: 1.5rem; color: var(--green);
  text-align: center; margin-bottom: 1.75rem;
}
.surah .text {
  font-family: var(--sacred);
  font-size: clamp(1.3rem, 3.8vw, 1.6rem);
  line-height: 2.5;
  text-align: justify;
  text-align-last: center;
  max-width: 46ch; margin-inline: auto;
}
.surah .missing {
  background: var(--green-soft); border-radius: 4px;
  padding: 1.25rem; font-size: .92rem; color: var(--muted); text-align: center;
}

/* ---------- تذييل ---------- */

footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  text-align: center; color: var(--muted); font-size: .9rem;
}
footer .fatiha { font-family: var(--sacred); font-size: 1.2rem; color: var(--ink); margin-bottom: .6rem; }
footer a { color: var(--muted); }

.toast {
  position: fixed; inset-block-end: 1.5rem; inset-inline: 0;
  margin-inline: auto; width: max-content;
  background: var(--ink); color: #fff;
  padding: .55rem 1.2rem; border-radius: 999px; font-size: .9rem;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 100;
}
.toast.on { opacity: 1; transform: translateY(0); }

/* =========================================================
   لوحة التحكم
   ========================================================= */

.admin-shell { padding-block: 2.5rem 5rem; }
.admin-shell h1 { font-family: var(--sacred); font-size: 2rem; margin: 0 0 .3rem; }
.admin-shell .sub { color: var(--muted); margin: 0 0 2.5rem; font-size: .95rem; }

.panel {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 1.75rem; margin-bottom: 1.25rem;
}
.panel > h2 {
  font-size: 1rem; font-weight: 700; margin: 0 0 1.5rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}

.field { margin-bottom: 1.25rem; }
.field label { display: block; font-size: .88rem; font-weight: 500; margin-bottom: .4rem; }
.field .hint { font-size: .8rem; color: var(--muted); margin-top: .35rem; }
input[type=text], input[type=date], input[type=password], textarea, select {
  width: 100%; font-family: var(--ui); font-size: 1rem;
  padding: .6rem .8rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
}
input:focus, textarea:focus { border-color: var(--green); outline: none; }
textarea { line-height: 1.8; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } }

.btn-primary {
  background: var(--green); color: #fff; border: 1px solid var(--green);
  padding: .6rem 1.6rem; border-radius: 999px; cursor: pointer;
  font-family: var(--ui); font-size: .95rem;
}
.btn-primary:hover { background: #24483a; }
.btn-quiet {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-family: var(--ui); font-size: .85rem; text-decoration: underline;
}
.btn-quiet:hover { color: #a33; }

.flash {
  padding: .8rem 1.1rem; border-radius: 3px; margin-bottom: 1.5rem; font-size: .93rem;
}
.flash.ok  { background: var(--green-soft); color: #1f4535; }
.flash.bad { background: #fdf0ee; color: #8d3524; }

.admin-photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem;
}
.admin-photos .card { border: 1px solid var(--line); border-radius: 3px; padding: .6rem; }
.admin-photos .card img { aspect-ratio: 1; object-fit: cover; border-radius: 2px; margin-bottom: .55rem; }
.admin-photos .card input { font-size: .85rem; padding: .35rem .5rem; margin-bottom: .45rem; }

.login-box { max-width: 24rem; margin: 18vh auto; }
.login-box h1 { font-family: var(--sacred); font-size: 1.8rem; margin: 0 0 1.75rem; text-align: center; }

/* مدخل المشرف — علامة باهتة في شريط التنقل */
.topbar .admin-dot {
  color: var(--line);
  font-size: 1rem;
  border-bottom: 0;
  transition: color .25s;
}
.topbar .admin-dot:hover,
.topbar .admin-dot:focus-visible {
  color: var(--green);
  border-bottom: 0;
}
.topbar .admin-back { color: var(--green); }

/* ---------- التلاوة الصوتية ---------- */
.listen {
  margin: 0 auto 2rem;
  max-width: 46ch;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.listen .reciters {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  margin-bottom: .9rem;
}
.listen .reciters button {
  font-family: var(--ui); font-size: .84rem;
  padding: .25rem .8rem; cursor: pointer;
  background: var(--paper); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
}
.listen .reciters button[aria-pressed="true"] {
  background: var(--green-soft); border-color: var(--green); color: var(--green);
}
.listen audio { width: 100%; height: 38px; }

/* ---------- فيديو التلاوة ---------- */
.video {
  position: relative; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  background: var(--paper-2);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }