/* ===== الاستايل العربي الإسلامي (الأندلسي) ===== */
:root {
  --ink: #f3e9d2;
  --muted: #c2b48e;
  --paper: #06251f;
  --gold: #d4af37;
  --deep: #041915;
  --font-display-ar: "Aref Ruqaa", "Amiri", serif;
}

body {
  background:
    radial-gradient(1100px 700px at 50% -10%, #0b3a30 0%, transparent 60%),
    linear-gradient(180deg, #06251f 0%, #041915 100%);
  background-attachment: fixed;
  color: var(--ink);
}

/* شبكة زخرفية إسلامية بـ CSS خالص (تعمل بدون صور) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  /* الطبقة الأولى: زخرفة گيري مولَّدة بالذكاء الاصطناعي (قابلة للتكرار)
     والطبقات التالية بديل بـ CSS خالص لو الصورة غير موجودة */
  background-image:
    url("../../img/pattern-tile.jpg"),
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.5) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.5) 0 1px, transparent 1px 26px),
    radial-gradient(circle at 13px 13px, rgba(212, 175, 55, 0.35) 0 2px, transparent 2px);
  background-size: 360px 360px, 52px 52px, 52px 52px, 26px 26px;
  background-repeat: repeat;
}

.hero-islamic {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 60px 20px;
  position: relative;
  isolation: isolate;
}

/* صورة الخلفية المولَّدة بالذكاء الاصطناعي (اختيارية) */
.hero-islamic .bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  opacity: 0.62;
  filter: saturate(1.05);
}
.hero-islamic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(4, 25, 21, 0.34) 0%, rgba(4, 25, 21, 0.9) 74%);
}

/* الإطار المقوّس (قوس مدبّب / mihrab arch) */
.arch {
  position: relative;
  padding: 54px 32px 46px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 50% 50% 12px 12px / 34% 34% 4% 4%;
  max-width: 500px;
  background: rgba(4, 25, 21, 0.55);
  backdrop-filter: blur(3px);
  box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.05), inset 0 0 60px rgba(212, 175, 55, 0.06);
}
.arch::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: inherit;
  pointer-events: none;
}
.arch .corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: 4px;
  transform: rotate(45deg);
  background: var(--deep);
}
.arch .c1 { inset-block-end: -13px; inset-inline-start: -13px; }
.arch .c2 { inset-block-end: -13px; inset-inline-end: -13px; }

/* ميدالية زخرفية أعلى القوس */
.medallion {
  width: 92px;
  height: 92px;
  object-fit: cover;
  margin: 0 auto 14px;
  /* قطع الصورة على شكل نجمة ثمانية لإخفاء خلفية الصورة المربّعة */
  clip-path: polygon(50% 0%, 64% 18%, 86% 14%, 82% 36%, 100% 50%, 82% 64%, 86% 86%, 64% 82%, 50% 100%, 36% 82%, 14% 86%, 18% 64%, 0% 50%, 18% 36%, 14% 14%, 36% 18%);
  mix-blend-mode: screen;
  filter: brightness(1.15);
}

.bismillah {
  font-family: "Amiri", serif;
  color: var(--gold);
  font-size: clamp(1rem, 4.5vw, 1.35rem);
  letter-spacing: 0.02em;
  margin: 0 0 18px;
}

.names { color: #fff; text-shadow: 0 2px 30px rgba(212, 175, 55, 0.25); }
.names .amp { color: var(--gold); font-family: var(--font-display-ar); }

.date-badge {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 20px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.cd-box { border-color: rgba(212, 175, 55, 0.35); background: rgba(255, 255, 255, 0.03); }
.cd-num { color: var(--gold); }

.card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(212, 175, 55, 0.28);
}
.card h4 { color: var(--gold); }
.card p { color: var(--muted); }

.sec-title { color: var(--gold); }
.tl li { border-color: rgba(212, 175, 55, 0.18); }
.map-frame { border-color: rgba(212, 175, 55, 0.3); }
.btn { border-color: rgba(212, 175, 55, 0.6); color: var(--gold); }
.btn-solid { background: var(--gold); color: #041915; border-color: var(--gold); }
.qr-card { background: #fbf6e9; color: #041915; border-color: rgba(212, 175, 55, 0.4); }
.qr-card .lnk { color: #6d675f; }
.verse p { color: #f7f0dd; }
.orn { color: var(--gold); max-width: 300px; }
.card .art .art-ic { color: var(--gold); }
.gal figure { background: rgba(212, 175, 55, 0.08); }