:root{
  --bg:#06050400;--c1:#0d0b09;--c2:#161210;--c3:#201c19;
  --ash:#332e2a;--smoke:#5c5249;--stone:#8c7d74;
  --dust:#c0b0a7;--paper:#e8ddd6;--cream:#f5ede5;
  --red:#8a1818;--ember:#bc3222;--gold:#a68428;--gold2:#c9a44a;--gold3:#dfc06a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--c1);color:var(--cream);font-family:'Tajawal',sans-serif;overflow-x:hidden;direction:rtl}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.5}
#loader{position:fixed;inset:0;background:var(--c1);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  transition:opacity .8s ease}
#loader.gone{opacity:0;pointer-events:none}
.ld-title{font-family:'Amiri',serif;font-size:2rem;color:var(--gold2);letter-spacing:.05em}
.ld-bar{width:260px;height:1px;background:var(--ash);position:relative;overflow:hidden}
.ld-fill{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:right;
  animation:ldfill 2s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes ldfill{to{transform:scaleX(1)}}
.ld-sub{font-size:.7rem;letter-spacing:.5em;color:var(--smoke);text-transform:uppercase}
/* ── NAV ── */
/* ══════════════════════════════════════════════════════
   NAV — شريط تنقل موحد أحادي الصف
   [شعار] | روابط | [AR ▾]
   ══════════════════════════════════════════════════════ */
nav{
  position:fixed;
  top:30px; /* تحت شريط العداد */
  inset-inline:0;
  z-index:500;
  height:46px;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0;
  background:rgba(10,8,6,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(51,46,42,.45);
  flex-wrap:nowrap;
}

/* الشعار */
.nav-logo{
  font-family:'Amiri',serif;
  font-size:.92rem;
  color:var(--gold2);
  letter-spacing:.04em;
  flex-shrink:0;
  white-space:nowrap;
  padding-left:.5rem;
}

/* فاصل عمودي */
.nav-divider{
  width:1px;
  height:20px;
  background:rgba(51,46,42,.6);
  flex-shrink:0;
  margin:0 1rem;
}

/* روابط التنقل — أحادية الصف في المنتصف */
.nav-links{
  display:flex;
  align-items:center;
  gap:0;
  list-style:none;
  flex:1;
  justify-content:center;
}
.nav-links li{display:flex;align-items:center}
.nav-links a{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .8rem;
  font-family:'Tajawal',sans-serif;
  font-size:.76rem;
  letter-spacing:.1em;
  color:var(--stone);
  text-decoration:none;
  border-bottom:1.5px solid transparent;
  transition:color .2s,border-color .2s;
  cursor:pointer;
  white-space:nowrap;
  line-height:1;
}
.nav-links a:hover{color:var(--gold3);border-bottom-color:rgba(166,132,40,.5)}
.nav-links a.nav-active{
  color:var(--gold2);
  border-bottom-color:var(--gold);
  font-weight:600;
}
/* رابط الشهداء */
.nav-martyrs-link{
  color:var(--gold2)!important;
}
.nav-martyrs-link.nav-active{
  color:var(--gold3)!important;
}

/* زر الجوال — مخفي دائماً، الروابط تظهر أفقياً في كل الأحجام */
.nav-hamburger{display:none!important}

/* الطرف الأيسر — زر اللغة */
.nav-end{display:flex;align-items:center;gap:.5rem;flex-shrink:0}

/* ── الجوال: صف أفقي مضغوط مثل عداد المجزرة ── */
@media(max-width:900px){
  nav{
    padding:0 0 0 0 !important;
    padding-inline-end:0 !important;
    padding-inline-start:0 !important;
    height:auto;
    min-height:42px;
    flex-wrap:nowrap;
    gap:0;
    justify-content:flex-start;
  }
  .nav-logo{display:none}
  .nav-divider{display:none}
  .nav-links{
    display:flex!important;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:0;
    justify-content:flex-start;
    flex:1;
    overflow:visible;
    padding-inline-start:0;
    margin-inline-start:0;
  }
  .nav-links li:first-child a{padding-inline-start:0}
  .nav-links a{
    padding:.3rem .15rem;
    font-size:.42rem;
    letter-spacing:0;
    white-space:nowrap;
    border-bottom:1.5px solid transparent;
  }
  .nav-links a.nav-active{
    color:var(--gold2);
    border-bottom-color:var(--gold);
    font-weight:600;
  }
  .nav-end{flex-shrink:0;gap:0;margin-inline-start:.1rem}
  nav#main-nav .nav-links li + li::before{display:none}
  /* إخفاء رابط الرواية لتوفير مساحة لزر اللغة */
  .nav-links a[href="intro-novel.html"]{display:none}
  .lang-current{
    padding:.25rem .4rem .25rem .3rem;
    font-size:.63rem;
    letter-spacing:.06em;
  }
  .lang-chevron{display:flex}
}

@media(max-width:600px){
  nav{padding:0 !important;min-height:38px}
  .nav-links a{
    padding:.2rem .1rem;
    font-size:.38rem;
    letter-spacing:0;
  }
  /* رابط الشهداء: أخفِ النص وأبقِ الأيقونة فقط */
  .nav-martyrs-link span[data-i18n="nav.martyrs"]{display:none}
  .lang-current{
    padding:.22rem .32rem .22rem .24rem;
    font-size:.57rem;
  }
  .lang-label{font-size:.57rem}
  .lang-chevron{display:none}
}

@media(max-width:400px){
  .nav-links a{padding:.18rem .08rem;font-size:.36rem}
  .lang-current{padding:.18rem .26rem}
  .lang-label{font-size:.51rem}
}
section{position:relative}
.sec-intro{text-align:center;padding:5rem 2rem 2.5rem}
.sec-tag{display:block;font-size:.68rem;letter-spacing:.55em;color:var(--gold);
  text-transform:uppercase;margin-bottom:.8rem}
.sec-h{font-family:'Amiri',serif;font-size:clamp(2rem,5vw,3.8rem);color:var(--cream);line-height:1.1}
.sec-rule{width:64px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);
  margin:1.2rem auto}
.sec-desc{font-family:'Amiri',serif;font-size:1rem;color:var(--stone);font-style:italic;
  max-width:520px;margin:0 auto;line-height:1.9}
/* ── HERO ── */
#sec-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:7rem 2rem 4rem;position:relative}
.hero-bg{position:absolute;inset:0;z-index:0;
  background-image:url('museum-bg.jpg');
  background-size:cover;background-position:center top;background-repeat:no-repeat}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(13,11,9,.25) 0%,rgba(13,11,9,.75) 50%,rgba(13,11,9,.96) 100%),
    linear-gradient(to bottom,rgba(13,11,9,.3) 0%,transparent 30%,transparent 70%,rgba(13,11,9,.6) 100%),
    radial-gradient(ellipse 60% 70% at 70% 50%,rgba(138,24,24,.15) 0%,transparent 70%);
}
.hero-vl{position:absolute;left:50%;transform:translateX(-50%);width:1px;
  background:linear-gradient(to bottom,transparent,var(--gold),transparent);opacity:.3}
.hero-vl.top{top:0;height:110px}.hero-vl.bot{bottom:0;height:110px}

/* Split layout */
.hero-split{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;align-items:center;max-width:1300px;width:100%;margin:0 auto}

/* Text column */
.hero-text-col{text-align:right}
.hero-sup{font-size:.72rem;letter-spacing:.65em;color:var(--gold);text-transform:uppercase;
  margin-bottom:2rem;opacity:0;animation:fup 1s .4s both}
.hero-h1{font-family:'Amiri',serif;font-size:clamp(3.2rem,7vw,7rem);font-weight:700;
  color:var(--cream);line-height:1.05;margin-bottom:1rem;
  text-shadow:0 0 100px rgba(166,132,40,.2);opacity:0;animation:fup 1s .65s both}
.hero-sub{font-family:'Amiri',serif;font-size:clamp(1rem,2vw,1.5rem);
  color:var(--stone);font-style:italic;margin-bottom:2rem;opacity:0;animation:fup 1s .85s both}
.hero-rule{width:90px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);
  margin:0 0 1.8rem auto;opacity:0;animation:fup 1s 1s both}
.hero-quote{font-family:'Amiri',serif;font-size:clamp(.9rem,1.6vw,1.15rem);
  color:var(--dust);font-style:italic;line-height:2.1;margin-bottom:2.5rem;
  opacity:0;animation:fup 1s 1.15s both}
.hero-cta{display:inline-block;margin-top:.5rem;padding:.75rem 2rem;
  border:1px solid var(--gold);color:var(--gold2);
  font-family:'Amiri',serif;font-size:1rem;text-decoration:none;letter-spacing:.08em;
  transition:all .3s;opacity:0;animation:fup 1s 1.4s both}
.hero-cta:hover{background:rgba(166,132,40,.12);color:var(--gold3);border-color:var(--gold2)}

/* Image column */
.hero-img-col{opacity:0;animation:fup 1.2s .5s both}
.hero-img-frame{position:relative;border:1px solid rgba(166,132,40,.25);overflow:hidden}
.hero-img-frame::before,.hero-img-frame::after{content:'';position:absolute;
  width:28px;height:28px;border-color:var(--gold);border-style:solid;z-index:3;pointer-events:none}
.hero-img-frame::before{top:10px;right:10px;border-width:1px 1px 0 0}
.hero-img-frame::after{bottom:10px;left:10px;border-width:0 0 1px 1px}
.hero-museum-img{width:100%;display:block;filter:sepia(15%) contrast(1.05);
  transition:transform 6s ease;transform:scale(1.02)}
.hero-img-frame:hover .hero-museum-img{transform:scale(1.06)}
.hero-img-overlay{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,11,9,.75) 0%,transparent 50%);pointer-events:none;z-index:2}
.hero-img-caption{position:absolute;bottom:0;inset-inline:0;z-index:4;
  padding:1.2rem 1.4rem;font-family:'Amiri',serif;font-size:1rem;
  color:var(--gold3);font-style:italic;line-height:1.7;text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.8)}

/* Responsive */
@media(max-width:860px){
  .hero-split{grid-template-columns:1fr;gap:2.5rem;text-align:center}
  .hero-text-col{text-align:center}
  .hero-rule{margin:0 auto 1.8rem}
  #sec-hero{padding:6rem 1.5rem 4rem}
  .hero-img-col{max-width:480px;margin:0 auto;width:100%}
}
@media(max-width:500px){
  .hero-h1{font-size:clamp(2.8rem,12vw,4rem)}
  .hero-img-caption{font-size:.88rem}
}

.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:.68rem;letter-spacing:.3em;color:var(--smoke);
  opacity:0;animation:fup 1s 1.8s both;cursor:pointer}
.hero-scroll::after{content:'';display:block;width:1px;height:40px;
  background:linear-gradient(to bottom,var(--smoke),transparent);
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* Back to top */
#back-top{position:fixed;bottom:2rem;right:2rem;z-index:600;
  width:42px;height:42px;background:rgba(13,11,9,.88);border:1px solid var(--ash);
  color:var(--stone);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s;opacity:0;pointer-events:none;backdrop-filter:blur(4px)}
#back-top.visible{opacity:1;pointer-events:auto}
#back-top:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
#sec-pano{background:var(--c1);padding-bottom:5rem}
#pano-viewer{position:relative;width:100%;height:720px;overflow:hidden;
  background:var(--c1);border-top:1px solid var(--ash);border-bottom:1px solid var(--ash);
  cursor:grab;user-select:none}
#pano-viewer.grabbing{cursor:grabbing}
#pano-canvas{display:block;width:100%;height:100%;image-rendering:high-quality;image-rendering:-webkit-optimize-contrast}
.pano-overlay{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(13,11,9,.6) 0%,transparent 15%,transparent 85%,rgba(13,11,9,.6) 100%),
  linear-gradient(to bottom,rgba(13,11,9,.5) 0%,transparent 20%,transparent 80%,rgba(13,11,9,.5) 100%)}
.pano-hint{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  font-size:.7rem;letter-spacing:.3em;color:rgba(255,255,255,.4);
  text-transform:uppercase;pointer-events:none;
  animation:fadeHint 4s ease 1s forwards}
@keyframes fadeHint{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
.pano-controls{position:absolute;bottom:1.5rem;right:2rem;display:flex;gap:.5rem}
.pano-btn{background:rgba(13,11,9,.7);border:1px solid var(--ash);color:var(--dust);
  width:36px;height:36px;cursor:pointer;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;transition:all .2s}
.pano-btn:hover{border-color:var(--gold);color:var(--gold)}
.pano-counter{position:absolute;top:1.2rem;right:2rem;font-size:.7rem;
  letter-spacing:.2em;color:rgba(255,255,255,.4)}
.pano-autoplay-indicator{position:absolute;top:1.2rem;left:2rem;font-size:.65rem;
  letter-spacing:.25em;color:var(--gold);opacity:.7;text-transform:uppercase}
#sec-timeline{background:var(--c2);padding-bottom:6rem}
.tl-wrap{max-width:960px;margin:0 auto;padding:0 2rem;position:relative}
.tl-line{position:absolute;right:calc(50% - .5px);top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,var(--ash) 3%,var(--ash) 97%,transparent)}
.tl-row{display:grid;grid-template-columns:1fr 48px 1fr;align-items:start;
  margin-bottom:3rem}
.tl-row.show{opacity:1;transform:translateY(0)}
.tl-dot{grid-column:2;width:12px;height:12px;border-radius:50%;
  background:var(--ash);border:2px solid var(--smoke);margin:4px auto 0;
  position:relative;z-index:1;flex-shrink:0}
.tl-row.key .tl-dot{background:var(--ember);border-color:var(--gold2);
  width:16px;height:16px;box-shadow:0 0 14px rgba(188,50,34,.5)}
.tl-body{padding:.2rem 2rem .2rem}
.tl-row.r .tl-body{grid-column:1;text-align:right;padding-right:0;padding-left:2rem}
.tl-row.l .tl-body{grid-column:3;text-align:right}
.tl-badge{display:inline-block;font-size:.62rem;letter-spacing:.18em;
  padding:.18rem .55rem;border:1px solid;text-transform:uppercase;margin-bottom:.5rem}
.tl-badge.mas{border-color:var(--ember);color:var(--ember)}
.tl-badge.pol{border-color:var(--stone);color:var(--stone)}
.tl-badge.intl{border-color:var(--gold);color:var(--gold)}
.tl-badge.cef{border-color:#4e8a52;color:#6aaa6e}
.tl-date{font-size:.7rem;letter-spacing:.28em;color:var(--gold);display:block;margin-bottom:.35rem}
.tl-title{font-family:'Amiri',serif;font-size:1.15rem;color:var(--cream);
  font-weight:700;margin-bottom:.45rem;line-height:1.4}
.tl-text{font-size:.88rem;color:var(--stone);line-height:1.85}
.tl-src{font-size:.65rem;color:var(--ash);font-style:italic;margin-top:.4rem}
@media(max-width:700px){
  .tl-line{right:18px}
  .tl-row{grid-template-columns:32px 1fr}
  .tl-row.r .tl-body,.tl-row.l .tl-body{grid-column:2;padding:.2rem 1rem}
  .tl-dot{grid-column:1}
}
#sec-gallery{background:var(--c3);padding-bottom:5rem}
.masonry{columns:4;column-gap:5px;padding:0 1.5rem;max-width:1700px;margin:0 auto}
@media(max-width:1200px){.masonry{columns:3}}
@media(max-width:750px){.masonry{columns:2}}
@media(max-width:480px){.masonry{columns:1}}
.m-item{break-inside:avoid;margin-bottom:5px;position:relative;overflow:hidden;
  cursor:pointer;background:var(--c2);opacity:0;transition:opacity .4s}
.m-item.loaded{opacity:1}
.m-item img{width:100%;display:block;filter:grayscale(20%) contrast(1.1);
  transition:transform .45s ease,filter .35s}
.m-item::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(138,24,24,.45),transparent 55%);
  opacity:0;transition:opacity .35s}
.m-item:hover img{transform:scale(1.04);filter:grayscale(0%) contrast(1.12) brightness(1.02)}
.m-item:hover::after{opacity:1}
.m-badge{position:absolute;bottom:.55rem;right:.6rem;font-size:.6rem;
  letter-spacing:.12em;color:rgba(255,255,255,.45);z-index:2;
  opacity:0;transition:opacity .25s}
.m-item:hover .m-badge{opacity:1}
.gallery-more{text-align:center;padding:2rem;display:none}
.gallery-more.show{display:block}
#lb{display:none;position:fixed;inset:0;z-index:800;background:rgba(3,2,2,.97);
  flex-direction:column;align-items:center;justify-content:center;padding:1rem}
#lb.open{display:flex}
#lb-img{max-width:92vw;max-height:84vh;object-fit:contain;
  box-shadow:0 20px 80px rgba(0,0,0,.7)}
.lb-info{color:var(--stone);font-size:.72rem;letter-spacing:.22em;margin-top:1rem}
.lb-close{position:absolute;top:1.2rem;left:1.2rem;background:none;
  border:1px solid var(--ash);color:var(--dust);width:40px;height:40px;
  cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:1}
.lb-close:hover{border-color:var(--ember);color:var(--ember)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;
  border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.5);
  width:46px;height:80px;cursor:pointer;font-size:1.4rem;transition:all .2s}
.lb-nav:hover{background:rgba(138,24,24,.2);border-color:var(--ember);color:var(--cream)}
.lb-prev{right:1.2rem}.lb-next{left:1.2rem}
#sec-novel{background:var(--c1);padding-bottom:6rem}
.novel-wrap{max-width:820px;margin:0 auto;padding:0 2rem}
.novel-book{background:var(--c2);border:1px solid var(--ash);padding:3.5rem 3rem;
  text-align:center;margin-bottom:2.5rem;position:relative}
.novel-book::before,.novel-book::after{content:'';position:absolute;
  width:26px;height:26px;border-color:var(--gold);border-style:solid}
.novel-book::before{top:1.2rem;right:1.2rem;border-width:1px 1px 0 0}
.novel-book::after{bottom:1.2rem;left:1.2rem;border-width:0 0 1px 1px}
.book-title{font-family:'Amiri',serif;font-size:2.3rem;color:var(--gold2);margin-bottom:.4rem}
.book-sub{font-family:'Amiri',serif;font-size:1.1rem;color:var(--stone);font-style:italic;margin-bottom:1rem}
.book-author{font-size:.82rem;letter-spacing:.28em;color:var(--dust)}
.excerpt-label{display:block;font-size:.66rem;letter-spacing:.48em;color:var(--gold);
  text-transform:uppercase;margin:2rem 0 1.2rem;text-align:center}
.excerpt{background:var(--c2);border-right:2px solid var(--ember);
  padding:1.8rem 2rem 1.8rem 1.6rem;margin-bottom:1rem}
.excerpt-q{font-family:'Amiri',serif;font-size:1.05rem;color:var(--paper);
  line-height:2.15;font-style:italic;position:relative}
.excerpt-q::before{content:'❝';font-size:1.6rem;color:var(--gold);
  opacity:.3;display:block;margin-bottom:.2rem;font-style:normal}
.excerpt-ch{font-size:.67rem;letter-spacing:.2em;color:var(--smoke);
  text-transform:uppercase;margin-top:.8rem;display:block}
.pdf-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  margin:2rem 0 1.5rem}
.btn-p{background:transparent;border:1px solid var(--gold);color:var(--gold2);
  padding:.8rem 2.2rem;font-family:'Amiri',serif;font-size:1rem;cursor:pointer;
  letter-spacing:.1em;transition:all .3s}
.btn-p:hover{background:rgba(166,132,40,.1);color:var(--gold3);border-color:var(--gold2)}
.btn-g{background:transparent;border:1px solid var(--ash);color:var(--dust);
  padding:.8rem 2.2rem;font-family:'Amiri',serif;font-size:1rem;cursor:pointer;
  letter-spacing:.1em;transition:all .3s}
.btn-g:hover{border-color:var(--smoke);color:var(--cream)}
#pdf-wrap{display:none;margin-bottom:1.5rem}
.pdf-frame{width:100%;height:78vh;border:1px solid var(--ash);display:block;background:var(--c2)}
#reader{display:none;background:var(--c2);border:1px solid var(--ash);margin-bottom:1.5rem}
.reader-prog{height:2px;background:var(--ash)}
.reader-prog-fill{height:100%;background:linear-gradient(to left,var(--ember),var(--gold2));
  width:0;transition:width .1s}
.reader-bar{padding:.85rem 1.5rem;border-bottom:1px solid var(--ash);background:var(--c1);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.reader-bar-title{font-size:.68rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.font-ctrl{display:flex;gap:.3rem;align-items:center}
.fc-btn{background:none;border:1px solid var(--ash);color:var(--dust);
  width:28px;height:28px;cursor:pointer;font-size:.78rem;transition:all .2s;
  display:flex;align-items:center;justify-content:center}
.fc-btn:hover{border-color:var(--gold);color:var(--gold)}
.reader-body{height:62vh;overflow-y:auto;padding:2.5rem 3rem;
  scrollbar-width:thin;scrollbar-color:var(--ash) transparent;direction:rtl}
.reader-body::-webkit-scrollbar{width:3px}
.reader-body::-webkit-scrollbar-thumb{background:var(--ash)}
.reader-text{font-family:'Amiri',serif;font-size:1.1rem;line-height:2.3;
  color:var(--paper);white-space:pre-wrap;word-break:break-word;text-align:right}
.reader-foot{padding:.7rem 1.5rem;border-top:1px solid var(--ash);background:var(--c1);
  display:flex;justify-content:space-between}
.r-pct{font-size:.68rem;color:var(--smoke);letter-spacing:.15em}
footer{background:var(--c1);border-top:1px solid var(--ash);
  padding:4.5rem 3rem 3rem;text-align:center}
.footer-ornament{width:160px;height:1px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  margin:0 auto 3rem}
.footer-title{font-family:'Amiri',serif;font-size:1.4rem;color:var(--gold2);margin-bottom:2.5rem}
.credits{display:flex;justify-content:center;gap:5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.credit .role{font-size:.63rem;letter-spacing:.38em;color:var(--smoke);
  text-transform:uppercase;display:block;margin-bottom:.4rem}
.credit .name{font-family:'Amiri',serif;font-size:1.3rem;color:var(--dust)}
.footer-copy{font-size:.72rem;color:var(--ash);letter-spacing:.1em}
.lang-btn{background:transparent;border:1px solid var(--gold);color:var(--gold2);
  padding:.3rem .9rem;font-size:.72rem;letter-spacing:.15em;cursor:pointer;
  transition:all .2s;font-family:'Tajawal',sans-serif}
.lang-btn:hover{background:rgba(166,132,40,.15);color:var(--gold3)}
[data-lang="en"] body,[data-lang="en"]{direction:ltr;text-align:left}
[data-lang="en"] .tl-row.r .tl-body{text-align:left}
[data-lang="en"] .tl-row.l .tl-body{text-align:left}
[data-lang="en"] .reader-body{direction:ltr}
[data-lang="en"] .reader-text{text-align:left}

.t-en { display: none !important; }
.t-ar { display: inline !important; }
[data-lang="en"] .t-en { display: inline !important; }
[data-lang="en"] .t-ar { display: none !important; }
div.t-ar, p.t-ar, h1.t-ar, h2.t-ar { display: block !important; }
div.t-en, p.t-en, h1.t-en, h2.t-en { display: none !important; }
[data-lang="en"] div.t-en, [data-lang="en"] p.t-en, [data-lang="en"] h1.t-en, [data-lang="en"] h2.t-en { display: block !important; }
[data-lang="en"] div.t-ar, [data-lang="en"] p.t-ar, [data-lang="en"] h1.t-ar, [data-lang="en"] h2.t-ar { display: none !important; }
#music-player{position:fixed;bottom:1.5rem;left:1.5rem;z-index:600;
  background:rgba(13,11,9,.92);border:1px solid var(--ash);
  backdrop-filter:blur(8px);padding:.6rem 1rem;
  display:flex;align-items:center;gap:.7rem;min-width:220px}
#music-player.hidden{display:none}
.mp-btn{background:none;border:1px solid var(--ash);color:var(--dust);
  width:32px;height:32px;cursor:pointer;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.mp-btn:hover{border-color:var(--gold);color:var(--gold)}
.mp-info{flex:1;min-width:0}
.mp-title{font-size:.62rem;letter-spacing:.18em;color:var(--gold);
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-vol{display:flex;align-items:center;gap:.4rem;margin-top:.3rem}
.mp-vol-slider{width:70px;height:2px;accent-color:var(--gold);cursor:pointer}
.mp-vol-icon{font-size:.65rem;color:var(--smoke)}
.mp-close{background:none;border:none;color:var(--smoke);cursor:pointer;
  font-size:.75rem;padding:.1rem .2rem;transition:color .2s;flex-shrink:0}
.mp-close:hover{color:var(--dust)}
@keyframes fup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:translateY(0)}
#sec-casualties{background:var(--c1);padding-bottom:6rem}
.cas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;max-width:1100px;margin:0 auto;background:var(--ash);border:1px solid var(--ash)}
@media(max-width:750px){.cas-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.cas-grid{grid-template-columns:1fr}}
.cas-card{background:var(--c1);padding:3rem 1.5rem;text-align:center;transition:background .3s}
.cas-card:hover{background:rgba(138,24,24,.04)}
.cas-num{font-family:'Amiri',serif;font-size:clamp(2.8rem,5vw,4.5rem);color:var(--ember);line-height:1;display:block;margin-bottom:.6rem;text-shadow:0 0 40px rgba(188,50,34,.25)}
.cas-label{font-size:.72rem;letter-spacing:.38em;color:var(--stone);text-transform:uppercase;display:block;margin-bottom:.4rem}
.cas-sub{font-size:.78rem;color:var(--smoke);font-family:'Amiri',serif;font-style:italic;line-height:1.6}
.cas-icon{font-size:1.4rem;display:block;margin-bottom:.8rem;opacity:.5}
.cas-src{font-size:.6rem;color:var(--ash);letter-spacing:.12em;margin-top:.8rem;display:block}

#sec-map{background:var(--c2);padding-bottom:6rem}
.map-wrap{max-width:1100px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 320px;gap:1px;background:var(--ash);border:1px solid var(--ash)}
@media(max-width:800px){.map-wrap{grid-template-columns:1fr}}
.map-svg-wrap{background:var(--c2);min-height:500px;position:relative}
#real-map{width:100%;height:520px;z-index:1}
.leaflet-container{background:#111009 !important}
.leaflet-tile-pane{filter:grayscale(60%) brightness(0.65) sepia(20%)}
.map-custom-marker{display:flex;align-items:center;justify-content:center}
.map-marker-inner{width:14px;height:14px;border-radius:50%;border:2px solid;box-shadow:0 0 12px currentColor;cursor:pointer;transition:transform .2s}
.map-marker-inner:hover,.map-marker-inner.active{transform:scale(1.5)}
.leaflet-popup-content-wrapper{background:rgba(22,19,16,.97)!important;border:1px solid var(--ash)!important;border-radius:0!important;box-shadow:0 8px 40px rgba(0,0,0,.7)!important;color:var(--cream)!important;direction:rtl}
.leaflet-popup-tip{background:rgba(22,19,16,.97)!important}
.leaflet-popup-content{margin:12px 16px!important;font-family:'Tajawal',sans-serif!important}
.lp-date{font-size:.6rem;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:.3rem}
.lp-title{font-family:'Amiri',serif;font-size:1rem;color:var(--cream);font-weight:700;margin-bottom:.4rem;line-height:1.4}
.lp-detail{font-size:.8rem;color:var(--stone);line-height:1.75}
.lp-badge{display:inline-block;font-size:.58rem;letter-spacing:.15em;padding:.1rem .4rem;border:1px solid;margin-bottom:.4rem}
.lp-badge.mas{border-color:var(--ember);color:var(--ember)}
.lp-badge.pol{border-color:var(--stone);color:var(--stone)}
.lp-badge.intl{border-color:var(--gold);color:var(--gold)}
.leaflet-popup-close-button{color:var(--stone)!important;font-size:16px!important;top:6px!important;left:6px!important;right:auto!important}
.map-panel{background:var(--c2)}
.map-panel-header{padding:1.2rem 1.5rem;border-bottom:1px solid var(--ash);font-size:.68rem;letter-spacing:.35em;color:var(--gold);text-transform:uppercase}
.map-events-list{overflow-y:auto;max-height:500px;scrollbar-width:thin;scrollbar-color:var(--ash) transparent}
.map-ev{padding:1rem 1.5rem;border-bottom:1px solid rgba(51,46,42,.5);cursor:pointer;transition:background .2s}
.map-ev:hover,.map-ev.active{background:rgba(138,24,24,.08)}
.map-ev.active{border-right:2px solid var(--ember)}
.map-ev-date{font-size:.62rem;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:.25rem}
.map-ev-title{font-family:'Amiri',serif;font-size:.92rem;color:var(--cream);margin-bottom:.3rem;line-height:1.4}
.map-ev-badge{display:inline-block;font-size:.58rem;letter-spacing:.15em;padding:.1rem .4rem;border:1px solid}
.map-ev-badge.mas{border-color:var(--ember);color:var(--ember)}
.map-ev-badge.pol{border-color:var(--stone);color:var(--stone)}
.map-ev-badge.intl{border-color:var(--gold);color:var(--gold)}
.map-ev-detail{font-size:.78rem;color:var(--stone);line-height:1.7;margin-top:.5rem;display:none}
.map-ev.active .map-ev-detail{display:block}
.map-dot{cursor:pointer}
.map-pulse{animation:mPulse 2s ease-in-out infinite}
@keyframes mPulse{0%,100%{opacity:.2}50%{opacity:.7}}

#sec-compare{background:var(--c1);padding-bottom:6rem}
.cmp-wrap{max-width:1100px;margin:0 auto;padding:0 1.5rem}
.cmp-item{margin-bottom:2.5rem;border:1px solid var(--ash);overflow:hidden}
.cmp-label-row{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.2rem;background:var(--c2);border-bottom:1px solid var(--ash);flex-wrap:wrap;gap:.5rem}
.cmp-place{font-family:'Amiri',serif;font-size:1rem;color:var(--gold2)}
.cmp-tags{display:flex;gap:.5rem}
.cmp-tag{font-size:.58rem;letter-spacing:.2em;padding:.18rem .6rem;border:1px solid}
.cmp-tag.before{border-color:var(--stone);color:var(--stone)}
.cmp-tag.after{border-color:var(--ember);color:var(--ember)}
.cmp-stage{position:relative;width:100%;height:440px;overflow:hidden;cursor:col-resize;user-select:none;touch-action:none;background:#000}
@media(max-width:600px){.cmp-stage{height:250px}}
.cmp-img-b,.cmp-img-a{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.cmp-img-a{clip-path:inset(0 50% 0 0)}
.cmp-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);z-index:10;pointer-events:none}
.cmp-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--gold);z-index:11;display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 2px 16px rgba(0,0,0,.7)}
.cmp-handle svg{width:20px;height:20px;stroke:var(--c1);fill:none;stroke-width:2.5;stroke-linecap:round}
.cmp-lbl{position:absolute;bottom:.9rem;font-size:.62rem;letter-spacing:.22em;padding:.2rem .7rem;z-index:5;pointer-events:none;background:rgba(13,11,9,.8);text-transform:uppercase}
.cmp-lbl.lft{left:.9rem;color:var(--ember)}
.cmp-lbl.rgt{right:.9rem;color:var(--stone)}
.cmp-note{padding:.65rem 1.2rem;background:var(--c2);border-top:1px solid var(--ash);font-size:.72rem;color:var(--smoke);font-style:italic;text-align:center}
.docs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;max-width:1100px;margin:2rem auto 0;background:var(--ash);border:1px solid var(--ash)}
@media(min-width:700px){.docs-grid{grid-template-columns:repeat(4,1fr)}}
.doc-wrap{position:relative;overflow:hidden;aspect-ratio:4/3}
.doc-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.doc-wrap:hover img{transform:scale(1.05)}
.doc-cap{position:absolute;bottom:0;inset-inline:0;background:linear-gradient(transparent,rgba(13,11,9,.85));padding:.5rem .7rem;font-size:.65rem;color:var(--dust);font-family:'Amiri',serif}

@keyframes loaderFade{0%{opacity:1}70%{opacity:1}100%{opacity:0;pointer-events:none}}
#loader.gone{opacity:0 !important;pointer-events:none !important;display:none !important}


</style>
<style>
@keyframes mapPulse {
  0%,100% { transform:translate(-50%,-50%) scale(1); opacity:0.4; }
  50% { transform:translate(-50%,-50%) scale(1.6); opacity:0.1; }
}
.sweida-popup .leaflet-popup-content-wrapper {
  background: rgba(22,19,16,0.97) !important;
  border: 1px solid #332e2a !important;
  border-radius: 0 !important;
  color: #f5ede5 !important;
  direction: rtl !important;
}
.sweida-popup .leaflet-popup-tip {
  background: rgba(22,19,16,0.97) !important;
}

/* ============================================
   MOBILE RESPONSIVE — شامل لكل الأقسام
   ============================================ */

/* ── عام ── */
@media(max-width:600px){
  .sec-intro{padding:4rem 1.2rem 2rem}
  .sec-h{font-size:clamp(1.6rem,7vw,2.4rem)}
  .sec-desc{font-size:.9rem}
}

/* ── Hero على الجوال ── */
@media(max-width:600px){
  #sec-hero{padding:5.5rem 1.2rem 3.5rem;min-height:100svh}
  /* الخلفية تتركز على الجزء الأعلى من الصورة */
  .hero-bg{background-position:center 20%}
  /* overlay أكثر تعتيماً على الجوال لضمان قراءة النص */
  .hero-bg::after{
    background:
      rgba(13,11,9,.82),
      radial-gradient(ellipse 80% 60% at 50% 40%,rgba(138,24,24,.15) 0%,transparent 70%);
  }
  /* تحويل الـ split لعمود واحد */
  .hero-split{grid-template-columns:1fr;gap:1.8rem;text-align:center}
  .hero-text-col{text-align:center;order:2}
  .hero-img-col{order:1;max-width:100%;width:100%}
  .hero-rule{margin:0 auto 1.4rem}
  .hero-sup{margin-bottom:1rem;letter-spacing:.3em;font-size:.65rem}
  .hero-h1{font-size:clamp(2.6rem,10vw,3.6rem);margin-bottom:.7rem}
  .hero-sub{font-size:1rem;margin-bottom:1.2rem}
  .hero-quote{font-size:.9rem;line-height:1.9;margin-bottom:1.5rem}
  .hero-cta{padding:.65rem 1.4rem;font-size:.9rem;width:100%;text-align:center;display:block}
  .hero-img-caption{font-size:.82rem;padding:.9rem 1rem}
  /* إخفاء الخطوط العمودية الزينة على الجوال */
  .hero-vl{display:none}
  .hero-scroll{bottom:1.5rem}
}

/* ── شريط التنقل على الجوال الصغير ── */
@media(max-width:400px){
  nav{padding:.6rem 1rem}
  .nav-logo{font-size:.85rem}
}

/* ── Panorama — تقليل الارتفاع ── */
@media(max-width:600px){
  #pano-viewer{height:320px}
  .pano-controls{bottom:1rem;right:1rem;gap:.3rem}
  .pano-btn{width:32px;height:32px;font-size:.8rem}
  .pano-counter{top:.8rem;right:1rem;font-size:.6rem}
  .pano-autoplay-indicator{top:.8rem;left:1rem;font-size:.58rem}
}

/* ── Timeline — تحسين على الجوال ── */
@media(max-width:600px){
  .tl-wrap{padding:0 1rem}
  .tl-line{right:14px}
  .tl-row{grid-template-columns:28px 1fr;margin-bottom:2rem}
  .tl-row.r .tl-body,.tl-row.l .tl-body{grid-column:2;padding:.2rem .8rem}
  .tl-dot{grid-column:1;width:10px;height:10px;margin-top:6px}
  .tl-row.key .tl-dot{width:14px;height:14px}
  .tl-title{font-size:1rem}
  .tl-text{font-size:.82rem;line-height:1.75}
  .tl-date{letter-spacing:.15em}
}

/* ── Casualties — تحسين الأرقام ── */
@media(max-width:600px){
  #sec-casualties{padding-bottom:4rem}
  .cas-grid{grid-template-columns:repeat(2,1fr)}
  .cas-card{padding:2rem 1rem}
  .cas-num{font-size:clamp(2.2rem,8vw,3.2rem)}
  .cas-label{font-size:.65rem;letter-spacing:.2em}
  .cas-sub{font-size:.72rem}
}

/* ── Map — عمود واحد + ارتفاع مناسب ── */
@media(max-width:600px){
  #sec-map{padding-bottom:4rem}
  .map-wrap{grid-template-columns:1fr;padding:0}
  #real-map{height:320px}
  .map-events-list{max-height:300px}
  .map-panel-header{padding:1rem}
  .map-ev{padding:.75rem 1rem}
  .map-ev-title{font-size:.85rem}
  .map-ev-detail{font-size:.75rem}
}

/* ── Before/After Compare ── */
@media(max-width:600px){
  .cmp-wrap{padding:0 .8rem}
  .cmp-stage{height:220px}
  .cmp-lbl{font-size:.55rem;padding:.15rem .5rem;bottom:.6rem}
  .cmp-handle{width:36px;height:36px}
  .cmp-label-row{padding:.6rem .9rem}
  .cmp-place{font-size:.88rem}
}

/* ── Gallery ── */
@media(max-width:600px){
  .masonry{padding:0 .8rem;column-gap:4px}
  .m-item{margin-bottom:4px}
}

/* ── Lightbox على الجوال ── */
@media(max-width:600px){
  #lb{padding:.5rem}
  #lb-img{max-width:98vw;max-height:75vh}
  .lb-nav{width:38px;height:60px;font-size:1.2rem}
  .lb-close{top:.6rem;left:.6rem;width:36px;height:36px}
  .lb-info{font-size:.65rem;letter-spacing:.12em;text-align:center;padding:0 1rem}
}

/* ── Novel / Reader ── */
@media(max-width:600px){
  .novel-book{padding:2rem 1.2rem}
  .book-title{font-size:1.6rem}
  .book-sub{font-size:.95rem}
  .novel-wrap{padding:0 1rem}
  .excerpt{padding:1.2rem 1.2rem 1.2rem 1rem}
  .excerpt-q{font-size:.95rem;line-height:1.95}
  .reader-body{padding:1.5rem 1.2rem;height:55vh}
  .reader-text{font-size:1rem;line-height:2.1}
  .reader-bar{padding:.7rem 1rem}
  .pdf-actions{gap:.6rem}
  .btn-p,.btn-g{padding:.7rem 1.2rem;font-size:.9rem}
}

/* ── Footer ── */
@media(max-width:600px){
  footer{padding:3rem 1.2rem 2rem}
  .credits{gap:2rem}
  .credit .name{font-size:1.1rem}
  .footer-title{font-size:1.1rem;margin-bottom:1.5rem}
  .footer-ornament{margin-bottom:2rem}
}

/* ── Music Player — أصغر على الجوال ── */
@media(max-width:600px){
  #music-player{
    bottom:1rem;left:1rem;
    padding:.5rem .7rem;
    min-width:0;
    gap:.5rem
  }
  .mp-vol-slider{width:50px}
  .mp-title{font-size:.58rem}
  .mp-btn{width:28px;height:28px;font-size:.8rem}
}

/* ── Back to top — بعيداً عن مشغل الموسيقى ── */
@media(max-width:600px){
  #back-top{bottom:1rem;right:1rem;width:36px;height:36px;font-size:1rem}
}

/* ── تحسينات اللمس (Touch) ── */
@media(hover:none){
  /* على الأجهزة اللمسية، إظهار overlay المعرض دائماً */
  .m-item::after{opacity:.6}
  .m-badge{opacity:.7}
  /* تكبير أزرار التنقل في الـ Lightbox للمس أسهل */
  .lb-nav{width:50px}
}

/* ── إصلاح letter-spacing على الشاشات الصغيرة ── */
@media(max-width:400px){
  .sec-tag{letter-spacing:.25em}
  .cas-label{letter-spacing:.15em}
  .hero-sup{letter-spacing:.2em}
}

/* ═══════════════════════════════════════════════
   نافذة الذكرى السنوية
═══════════════════════════════════════════════ */
#ann-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,5,4,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  animation: annOverlayIn .6s ease .2s forwards;
}
#ann-overlay.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
@keyframes annOverlayIn { to { opacity:1; } }

#ann-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: var(--c2);
  border: 1px solid var(--ash);
  overflow: hidden;
  transform: translateY(30px);
  opacity: 0;
  animation: annModalIn .7s cubic-bezier(.2,.8,.3,1) .5s forwards;
}
@keyframes annModalIn { to { transform:translateY(0); opacity:1; } }

#ann-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to left, transparent, var(--gold), var(--gold2), var(--gold), transparent);
}

.ann-head {
  padding: 2rem 2.2rem 1.4rem;
  border-bottom: 1px solid var(--ash);
  position: relative;
  text-align: center;
}
.ann-candle {
  font-size: 1.8rem;
  display: block;
  margin-bottom: .6rem;
  animation: annFlicker 3s ease-in-out infinite;
}
@keyframes annFlicker {
  0%,100% { opacity:1; transform:scale(1); }
  25% { opacity:.85; transform:scale(0.97); }
  50% { opacity:1; transform:scale(1.03); }
  75% { opacity:.9; transform:scale(0.98); }
}
.ann-tag {
  display: block;
  font-size: .6rem;
  letter-spacing: .6em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: .7rem;
}
.ann-title {
  font-family: 'Amiri', serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--cream);
  line-height: 1.3;
  margin-bottom: .3rem;
}
.ann-title em { color: var(--gold2); font-style: normal; }
.ann-date-label {
  font-size: .72rem;
  letter-spacing: .25em;
  color: var(--stone);
  margin-top: .5rem;
}
.ann-close {
  position: absolute;
  top: 1rem; left: 1.2rem;
  background: none;
  border: 1px solid var(--ash);
  color: var(--stone);
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.ann-close:hover { border-color: var(--gold); color: var(--gold2); }

.ann-counters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--ash);
}
.ann-counter-block {
  padding: 1.6rem 1.5rem;
  text-align: center;
  position: relative;
}
.ann-counter-block:first-child { border-left: 1px solid var(--ash); }
.ann-counter-block::before {
  content: attr(data-label-top);
  display: block;
  font-size: .58rem;
  letter-spacing: .4em;
  color: var(--smoke);
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.counter-digits {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .7rem;
}
.digit-group { text-align: center; }
.digit-num {
  font-family: 'Amiri', serif;
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--gold2);
  line-height: 1;
  display: block;
  min-width: 2ch;
}
.ann-counter-block.countdown .digit-num { color: var(--gold3); }
.digit-sep {
  font-family: 'Amiri', serif;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--ash);
  line-height: 1.1;
  padding-bottom: .1rem;
}
.digit-label {
  font-size: .6rem;
  letter-spacing: .2em;
  color: var(--stone);
  display: block;
  margin-top: .3rem;
}
.ann-counter-block-label {
  font-size: .68rem;
  letter-spacing: .15em;
  color: var(--gold);
  font-family: 'Amiri', serif;
}
.ann-anniversary-badge {
  display: none;
  background: linear-gradient(135deg, var(--red), var(--ember));
  color: var(--cream);
  font-size: .6rem;
  letter-spacing: .3em;
  padding: .3rem .8rem;
  margin: .5rem auto 0;
  width: fit-content;
}
#ann-overlay.is-anniversary .ann-anniversary-badge { display: block; }
#ann-overlay.is-anniversary #ann-modal::before {
  animation: annGoldPulse 2s ease-in-out infinite;
}
@keyframes annGoldPulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.ann-message {
  padding: 1.5rem 2.2rem;
  text-align: center;
  border-bottom: 1px solid var(--ash);
}
.ann-quote {
  font-family: 'Amiri', serif;
  font-size: clamp(.95rem, 2.5vw, 1.1rem);
  color: var(--dust);
  line-height: 2;
  font-style: italic;
}
.ann-quote-mark {
  color: var(--gold);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.15em;
}
.ann-footer {
  padding: 1.2rem 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ann-martyrs-count { display: flex; align-items: center; gap: .6rem; }
.ann-count-num { font-family: 'Amiri', serif; font-size: 1.4rem; color: var(--gold2); }
.ann-count-text { font-size: .72rem; color: var(--stone); line-height: 1.5; letter-spacing: .05em; }
.ann-btn {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold2);
  font-family: 'Tajawal', sans-serif;
  font-size: .78rem;
  letter-spacing: .1em;
  padding: .6rem 1.4rem;
  cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.ann-btn:hover { background: rgba(166,132,40,.12); color: var(--gold3); }

@media (max-width:480px) {
  .ann-counters { grid-template-columns: 1fr; }
  .ann-counter-block:first-child { border-left: none; border-bottom: 1px solid var(--ash); }
  .ann-footer { flex-direction: column; text-align: center; }
  .ann-martyrs-count { justify-content: center; }
  .ann-head { padding: 1.5rem 1.5rem 1.2rem; }
  .ann-message { padding: 1.2rem 1.5rem; }
  .ann-footer { padding: 1rem 1.5rem; }
}

/* ═══════════════════════════════════════════════════════
   SVG ICONS — يحل محل الإيموجي
   ═══════════════════════════════════════════════════════ */

/* القاعدة المشتركة لكل الأيقونات */
.icon-svg {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: opacity .2s, transform .2s;
}

/* شمعة الـ Ann popup — كبيرة ومضيئة */
.icon-candle-lg {
  color: var(--gold2);
  filter: drop-shadow(0 0 8px rgba(201,164,74,.6));
  animation: candleSvgFlicker 2.2s ease-in-out infinite;
}
@keyframes candleSvgFlicker {
  0%,100% { filter: drop-shadow(0 0 8px rgba(201,164,74,.6)); opacity: 1; }
  30%      { filter: drop-shadow(0 0 4px rgba(201,164,74,.3)); opacity: .85; }
  65%      { filter: drop-shadow(0 0 12px rgba(201,164,74,.8)); opacity: 1; }
}

/* أيقونات كروت الضحايا (Casualties) */
.cas-svg {
  color: var(--gold);
  opacity: .75;
  margin-bottom: .4rem;
}
.cas-card:hover .cas-svg {
  opacity: 1;
  color: var(--gold2);
}

/* أيقونات كروت التنقل (Memorial Nav) */
.mnav-svg {
  color: var(--stone);
  opacity: .7;
  transition: color .3s, opacity .3s;
}
.mnav-card:hover .mnav-svg {
  color: var(--gold2);
  opacity: 1;
}

/* شموع شريط الشهداء */
.mnav-candle {
  color: var(--gold);
  opacity: .55;
  animation: candleSvgFlicker 3s ease-in-out infinite;
}
.mnav-candle:nth-child(2) { animation-delay: .4s; }
.mnav-candle:nth-child(3) { animation-delay: .8s; }
.mnav-martyrs-link:hover .mnav-candle {
  opacity: .9;
}

/* أزرار التحكم في البانوراما */
.pano-btn .icon-svg {
  color: inherit;
  pointer-events: none;
}

/* أزرار lightbox */
.lb-close .icon-svg,
.lb-nav .icon-svg {
  color: inherit;
  pointer-events: none;
}

/* زر العودة للأعلى */
#back-top .icon-svg {
  color: inherit;
}

/* مشغل الموسيقى */
.mp-btn .icon-svg,
.mp-close .icon-svg {
  color: inherit;
  pointer-events: none;
}
.mp-vol-icon .icon-svg {
  color: var(--smoke);
}

/* أيقونة الشمعة في nav */
.nav-martyrs-link .icon-svg {
  color: var(--gold2);
}

/* hero CTA */
.hero-cta .icon-svg {
  color: var(--gold2);
  margin-left: .3em;
}

/* أيقونة VR entry */
.vr-entry-icon .icon-svg {
  color: var(--gold2);
  filter: drop-shadow(0 0 8px rgba(201,164,74,.5));
}


/* ═══════════════════════════════════════════════════════
   LANGUAGE SWITCHER DROPDOWN
   ═══════════════════════════════════════════════════════ */

.lang-switcher {
  position: relative;
  z-index: 600;
}

/* الزر الرئيسي */
.lang-current {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .7rem .32rem .55rem;
  background: rgba(166,132,40,.08);
  border: 1px solid rgba(166,132,40,.45);
  color: var(--gold2);
  font-family: 'Tajawal', sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  cursor: pointer;
  border-radius: 2px;
  transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.lang-current:hover,
.lang-switcher.open .lang-current {
  background: rgba(166,132,40,.18);
  border-color: var(--gold2);
  color: var(--gold3);
}

.lang-globe { display: flex; align-items: center; opacity: .75; }
.lang-label { font-weight: 600; }

.lang-chevron {
  display: flex;
  align-items: center;
  opacity: .6;
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.lang-switcher.open .lang-chevron {
  transform: rotate(180deg);
}

/* القائمة المنسدلة */
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 148px;
  background: var(--c2);
  border: 1px solid var(--ash);
  border-top: 2px solid var(--gold);
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s cubic-bezier(.2,.8,.3,1),
              transform .2s cubic-bezier(.2,.8,.3,1);
  z-index: 700;
}
.lang-switcher.open .lang-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* خيارات اللغة */
.lang-opt {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .6rem 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(51,46,42,.4);
  color: var(--dust);
  font-family: 'Tajawal', sans-serif;
  font-size: .8rem;
  cursor: pointer;
  text-align: right;
  transition: background .15s, color .15s;
  letter-spacing: .04em;
}
.lang-opt:last-child { border-bottom: none; }
.lang-opt:hover { background: rgba(166,132,40,.08); color: var(--gold3); }
.lang-opt.active {
  color: var(--gold2);
  background: rgba(166,132,40,.1);
}
.lang-opt.active .lang-opt-code {
  color: var(--gold2);
}

.lang-opt-code {
  font-size: .64rem;
  letter-spacing: .22em;
  color: var(--stone);
  font-weight: 700;
  min-width: 22px;
  transition: color .15s;
}
.lang-opt-name {
  flex: 1;
}

/* ── نقطة مؤشر اللغة النشطة ── */
.lang-opt.active::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: auto;
  margin-left: 0;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════
   ANIMATION IMPROVEMENTS
   ═══════════════════════════════════════════════════════ */

/* reveal — أسرع وأنعم */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1),
              transform .55s cubic-bezier(.16,1,.3,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Timeline rows — ease-out-quint */
.tl-row {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1),
              transform .5s cubic-bezier(.16,1,.3,1);
}
.tl-row.show {
  opacity: 1;
  transform: translateY(0);
}

/* Casualties cards — stagger entrance */
.cas-card {
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .45s cubic-bezier(.16,1,.3,1),
              transform .45s cubic-bezier(.16,1,.3,1),
              background .25s, box-shadow .25s;
}
.cas-card.cas-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Casualties hover — كان ساكناً تماماً، الآن يتفاعل */
.cas-card:hover {
  background: var(--c3);
  box-shadow: 0 0 0 1px rgba(166,132,40,.25),
              0 8px 24px rgba(0,0,0,.3);
}
.cas-card:hover .cas-num {
  color: var(--gold3);
  text-shadow: 0 0 20px rgba(201,164,74,.3);
}


/* ═══════════════════════════════════════════════════════
   MASSACRE TICKER — شريط عداد المجزرة
   ═══════════════════════════════════════════════════════ */

#massacre-ticker {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 501; /* فوق الـ nav */
  height: 30px;
  background: rgba(8,6,4,.96);
  border-bottom: 1px solid rgba(166,132,40,.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* تأثير لمعة حمراء خفيفة على اليمين واليسار */
#massacre-ticker::before,
#massacre-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 1;
}
#massacre-ticker::before {
  right: 0;
  background: linear-gradient(to left, rgba(8,6,4,.96), transparent);
}
#massacre-ticker::after {
  left: 0;
  background: linear-gradient(to right, rgba(8,6,4,.96), transparent);
}

.ticker-inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Tajawal', sans-serif;
  font-size: .64rem;
  letter-spacing: .08em;
  color: var(--stone);
  white-space: nowrap;
  padding: 0 1.5rem;
}

.ticker-flame {
  display: flex;
  align-items: center;
  color: var(--gold);
  animation: tickerFlame 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes tickerFlame {
  0%,100% { opacity: .7; transform: scaleY(1); }
  40%     { opacity: 1;  transform: scaleY(1.08); }
  70%     { opacity: .6; transform: scaleY(.96); }
}

.ticker-label {
  color: var(--smoke);
  font-size: .62rem;
  letter-spacing: .12em;
}

.ticker-sep {
  color: rgba(166,132,40,.3);
  margin: 0 .1rem;
}

.ticker-unit {
  display: inline-flex;
  align-items: baseline;
  gap: .18rem;
}

.ticker-num {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold2);
  font-variant-numeric: tabular-nums;
  min-width: 1.6ch;
  text-align: center;
  /* flash عند تغيير الثواني */
  transition: color .1s;
}

/* الثواني تومض بخفة */
#tk-secs {
  color: var(--ember);
  animation: secPulse 1s ease-in-out infinite;
}
@keyframes secPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .6; }
}

.ticker-unit-label {
  font-size: .56rem;
  color: var(--smoke);
  letter-spacing: .1em;
}

.ticker-dot {
  color: rgba(51,46,42,.7);
  font-size: .5rem;
  margin: 0 -.1rem;
}

.ticker-martyrs-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-right: .4rem;
  padding: .15rem .55rem;
  border: 1px solid rgba(138,24,24,.35);
  color: var(--ember);
  font-size: .58rem;
  letter-spacing: .15em;
  background: rgba(138,24,24,.06);
  flex-shrink: 0;
}
.ticker-martyrs-badge svg {
  color: var(--ember);
  opacity: .8;
  animation: tickerFlame 2s ease-in-out infinite .6s;
}

/* ── تعويض hero لارتفاع الشريط (30px) + nav (46px) = 76px ── */
#sec-hero {
  padding-top: calc(7rem + 76px) !important;
}

/* ── موبايل ── */
@media (max-width: 480px) {
  #massacre-ticker { height: 26px; }
  #sec-hero { padding-top: calc(6rem + 72px) !important; }
  .ticker-label,
  .ticker-sep,
  .ticker-martyrs-badge { display: none; }
  .ticker-inner { gap: .3rem; font-size: .6rem; }
  .ticker-num { font-size: .72rem; }
}


/* ═══════════════════════════════════════════════════════
   DESIGN IMPROVEMENTS v2 — applied 2026-05-24
   ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   DESIGN IMPROVEMENTS — تحسينات التصميم الشاملة
   ═══════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY HIERARCHY — تدرج بصري أوضح لكل section ── */

/* sec-tag: شخصية مختلفة لكل قسم عبر ألوان الـ border */
.sec-intro {
  padding: 5.5rem 2rem 2.5rem;
  position: relative;
}

.sec-tag {
  display: inline-block;
  font-size: .62rem;
  letter-spacing: .6em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  padding: .22rem .9rem;
  border: 1px solid rgba(166,132,40,.25);
  background: rgba(166,132,40,.04);
  position: relative;
}

/* خط ذهبي أسفل كل section header */
.sec-intro::after {
  content: '';
  display: block;
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, var(--gold), transparent);
  margin: 2rem auto 0;
  opacity: .3;
}

.sec-h {
  font-family: 'Amiri', serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--cream);
  line-height: 1.08;
  letter-spacing: .01em;
}

.sec-rule {
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 1.4rem auto;
}

.sec-desc {
  font-family: 'Amiri', serif;
  font-size: 1.05rem;
  color: var(--stone);
  font-style: italic;
  max-width: 500px;
  margin: 0 auto;
  line-height: 2;
}

/* ── شخصية مختلفة لكل section tag ── */
#sec-timeline .sec-tag  { color: var(--ember); border-color: rgba(188,50,34,.3); background: rgba(138,24,24,.04); }
#sec-casualties .sec-tag { color: var(--gold2); border-color: rgba(201,164,74,.3); }
#sec-compare .sec-tag   { color: var(--stone); border-color: rgba(140,125,116,.25); }
#sec-pano .sec-tag      { color: var(--gold); border-color: rgba(166,132,40,.25); }

/* ── 2. SECTION DIVIDERS — فواصل بصرية بين السكشنز ── */

section {
  position: relative;
}

/* divider علوي لكل section */
#sec-pano::before,
#sec-timeline::before,
#sec-casualties::before,
#sec-compare::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 80%);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(166,132,40,.2), transparent);
  z-index: 2;
}

/* نقطة وسط الـ divider */
#sec-pano::after,
#sec-timeline::after,
#sec-casualties::after,
#sec-compare::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ash);
  border: 1px solid rgba(166,132,40,.3);
  z-index: 3;
}

/* ── 3. HERO — توازن أفضل وعنوان أقوى ── */

.hero-split {
  grid-template-columns: 55% 45%;
  gap: 3rem;
  align-items: center;
}

.hero-h1 {
  font-size: clamp(3.5rem, 7.5vw, 7.5rem);
  line-height: 1.0;
  letter-spacing: -.01em;
  text-shadow: 0 2px 40px rgba(0,0,0,.5), 0 0 80px rgba(166,132,40,.15);
}

/* تقوية الاقتباس */
.hero-quote {
  font-size: clamp(.92rem, 1.5vw, 1.1rem);
  line-height: 2.2;
  color: rgba(192,176,167,.85);
  border-right: 2px solid rgba(166,132,40,.3);
  padding-right: 1.2rem;
  margin-right: .2rem;
}

/* زر CTA أقوى */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 2.2rem;
  border: 1px solid var(--gold);
  color: var(--gold2);
  font-family: 'Amiri', serif;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: .1em;
  transition: all .35s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
}

.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(166,132,40,.1), transparent);
  opacity: 0;
  transition: opacity .35s;
}

.hero-cta:hover {
  color: var(--gold3);
  border-color: var(--gold2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(166,132,40,.15);
}

.hero-cta:hover::before { opacity: 1; }
.hero-cta:active { transform: translateY(0); }

/* إطار الصورة — نسبة أفضل */
.hero-img-frame {
  border: 1px solid rgba(166,132,40,.2);
  aspect-ratio: 4/5;
  overflow: hidden;
}

.hero-museum-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(20%) contrast(1.05) brightness(.95);
  transition: transform 8s cubic-bezier(.16,1,.3,1);
  transform: scale(1.06);
}

.hero-img-frame:hover .hero-museum-img {
  transform: scale(1.1);
}

@media(max-width:860px) {
  .hero-split { grid-template-columns: 1fr; gap: 2rem; }
  .hero-img-frame { aspect-ratio: 16/9; }
}

/* ── 4. NAVIGATION — تم توحيده أعلاه ── */

/* ── 5. TICKER — تم توحيده أعلاه ── */

/* ── 6. CASUALTIES CARDS — hierarchy وفصل بصري أقوى ── */

#sec-casualties {
  background: var(--c1);
  padding-bottom: 7rem;
}

.cas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1140px;
  margin: 0 auto;
  background: transparent;
  border: none;
  padding: 0 1.5rem;
}

.cas-card {
  background: var(--c1);
  padding: 2.8rem 1.5rem 2.2rem;
  text-align: center;
  border: 1px solid rgba(51,46,42,.45);
  margin: -1px -1px 0 0;
  position: relative;
  overflow: hidden;
  transition: background .3s cubic-bezier(.16,1,.3,1),
              box-shadow .3s cubic-bezier(.16,1,.3,1);
}

/* خط ذهبي علوي لكل بطاقة — يظهر عند hover */
.cas-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .3s;
}

.cas-card:hover {
  background: var(--c2);
  box-shadow: 0 0 0 1px rgba(166,132,40,.12) inset;
  z-index: 1;
}

.cas-card:hover::before { opacity: 1; }

/* الأيقونة */
.cas-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
  opacity: .45;
  transition: opacity .3s, transform .3s;
}

.cas-card:hover .cas-icon {
  opacity: .85;
  transform: translateY(-2px);
}

/* الرقم الكبير */
.cas-num {
  font-family: 'Amiri', serif;
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  color: var(--ember);
  line-height: 1;
  display: block;
  margin-bottom: .5rem;
  text-shadow: 0 0 30px rgba(188,50,34,.2);
  transition: color .3s, text-shadow .3s;
  font-variant-numeric: tabular-nums;
}

.cas-card:hover .cas-num {
  color: var(--gold2);
  text-shadow: 0 0 20px rgba(201,164,74,.25);
}

/* التسمية */
.cas-label {
  font-size: .68rem;
  letter-spacing: .3em;
  color: var(--stone);
  text-transform: uppercase;
  display: block;
  margin-bottom: .45rem;
  font-family: 'Tajawal', sans-serif;
}

.cas-sub {
  font-size: .8rem;
  color: var(--smoke);
  font-family: 'Amiri', serif;
  font-style: italic;
  line-height: 1.65;
}

.cas-src {
  font-size: .58rem;
  color: var(--ash);
  letter-spacing: .1em;
  margin-top: .9rem;
  display: block;
  border-top: 1px solid rgba(51,46,42,.3);
  padding-top: .6rem;
}

@media(max-width:860px) {
  .cas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:480px) {
  .cas-grid { grid-template-columns: 1fr; padding: 0 1rem; }
  .cas-card { padding: 2rem 1.2rem; margin: -1px 0 0 0; }
  .cas-num { font-size: clamp(2.2rem, 8vw, 3rem); }
}

/* ── 7. FOOTER — ثقل عاطفي أكبر ── */

footer {
  background: var(--c1);
  border-top: none;
  padding: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* طبقة خلفية */
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(166,132,40,.15) 20%,
    rgba(166,132,40,.4) 50%,
    rgba(166,132,40,.15) 80%,
    transparent 100%
  );
}

.footer-inner {
  padding: 5rem 3rem 3.5rem;
  position: relative;
}

.footer-ornament {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  margin: 0 auto 3rem;
  opacity: .4;
}

/* نقطة في وسط الـ ornament */
.footer-ornament::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin: 37px auto 0;
  transform: translateX(-2px);
  opacity: .6;
}

.footer-title {
  font-family: 'Amiri', serif;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--gold2);
  margin-bottom: .8rem;
  letter-spacing: .04em;
  line-height: 1.5;
}

/* جملة ثانوية أسفل العنوان */
.footer-subtitle {
  font-family: 'Amiri', serif;
  font-size: .95rem;
  color: var(--smoke);
  font-style: italic;
  margin-bottom: 3.5rem;
  letter-spacing: .02em;
}

.credits {
  display: flex;
  justify-content: center;
  gap: 5rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(51,46,42,.3);
}

.credit .role {
  font-size: .58rem;
  letter-spacing: .45em;
  color: var(--ash);
  text-transform: uppercase;
  display: block;
  margin-bottom: .5rem;
}

.credit .name {
  font-family: 'Amiri', serif;
  font-size: 1.25rem;
  color: var(--dust);
  transition: color .2s;
}

.credit:hover .name { color: var(--gold2); }

.footer-copy {
  font-family: 'Amiri', serif;
  font-size: .88rem;
  color: var(--ash);
  letter-spacing: .08em;
  font-style: italic;
  padding-bottom: 2.5rem;
}

@media(max-width:600px) {
  .footer-inner { padding: 3.5rem 1.5rem 2.5rem; }
  .credits { gap: 2rem; }
  .footer-ornament { height: 50px; }
  .footer-title { font-size: 1.2rem; }
}

/* ── 8. GLOBAL TRANSITION IMPROVEMENTS ── */

/* ease أنعم على كل العناصر التفاعلية */
.mnav-card,
.tl-row,
.cas-card,
.cmp-item,
.m-item {
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* reveal أسرع وأنعم */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* timeline rows */
.tl-row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1),
              transform .55s cubic-bezier(.16,1,.3,1);
}

.tl-row.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── 9. MUSIC PLAYER — أنظف ── */

#music-player {
  background: rgba(6,4,3,.94);
  border: 1px solid rgba(51,46,42,.6);
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  backdrop-filter: blur(12px);
  padding: .65rem 1rem;
  gap: .75rem;
}

.mp-btn {
  border: 1px solid rgba(51,46,42,.7);
  transition: border-color .2s, color .2s, background .2s;
}

.mp-btn:hover {
  background: rgba(166,132,40,.08);
}


/* ═══════════════════════════════════════════════════════
   NAV — شريط موحّد: [لوغو] [روابط وسط] [AR▾]
   ═══════════════════════════════════════════════════════ */

nav#main-nav {
  position: fixed;
  top: 30px; /* بعد الـ ticker */
  inset-inline: 0;
  z-index: 500;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  gap: 1.5rem;
  background: rgba(6,4,3,.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(51,46,42,.3);
}

/* ── اللوغو — يسار ── */
nav#main-nav .nav-logo {
  font-family: 'Amiri', serif;
  font-size: .95rem;
  color: var(--gold2);
  letter-spacing: .06em;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: .9;
  text-decoration: none;
}

/* ── الروابط — وسط ── */
nav#main-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  width: auto;
  order: unset;
  flex: 1;
  justify-content: center;
}

nav#main-nav .nav-links li {
  display: flex;
  align-items: center;
}

/* فاصل · بين الروابط */
nav#main-nav .nav-links li + li::before {
  content: '·';
  color: var(--ash);
  font-size: .7rem;
  padding: 0 .1rem;
  pointer-events: none;
  user-select: none;
}
@media(max-width:900px){
  nav#main-nav .nav-links li + li::before{display:none}
  nav#main-nav .nav-links a{padding:.3rem .18rem !important;font-size:.48rem !important;letter-spacing:0 !important}
  nav#main-nav .nav-links .nav-martyrs-link{padding:.3rem .18rem !important}
}
@media(max-width:600px){
  nav#main-nav .nav-links a{padding:.25rem .12rem !important;font-size:.43rem !important}
  nav#main-nav .nav-links .nav-martyrs-link{padding:.25rem .12rem !important}
}

nav#main-nav .nav-links a {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  font-family: 'Tajawal', sans-serif;
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--stone);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
  line-height: 1;
}

nav#main-nav .nav-links a:hover {
  color: var(--gold3);
  border-bottom-color: rgba(166,132,40,.4);
}

nav#main-nav .nav-links a.nav-active {
  color: var(--gold2);
  border-bottom-color: var(--gold);
}

/* رابط الشهداء */
nav#main-nav .nav-links .nav-martyrs-link {
  color: var(--gold2);
  background: none;
  border-radius: 0;
  padding: .35rem .75rem;
}
nav#main-nav .nav-links .nav-martyrs-link.nav-active {
  color: var(--gold3);
  border-bottom-color: var(--gold2);
}
nav#main-nav .nav-links .nav-martyrs-link:hover {
  color: var(--gold3);
}

/* ── nav-end: اللغة + هامبرغر — يمين ── */
nav#main-nav .nav-end {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

/* ── زر اللغة — أبسط بدون globe icon ── */
nav#main-nav .lang-current {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .65rem;
  background: rgba(166,132,40,.06);
  border: 1px solid rgba(166,132,40,.35);
  color: var(--gold2);
  font-family: 'Tajawal', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  cursor: pointer;
  border-radius: 2px;
  transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
  line-height: 1;
}

nav#main-nav .lang-current:hover,
nav#main-nav .lang-switcher.open .lang-current {
  background: rgba(166,132,40,.14);
  border-color: var(--gold2);
  color: var(--gold3);
}

nav#main-nav .lang-chevron {
  display: flex;
  align-items: center;
  opacity: .55;
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}

nav#main-nav .lang-switcher.open .lang-chevron {
  transform: rotate(180deg);
}

/* القائمة المنسدلة — تفتح للأسفل */
nav#main-nav .lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 140px;
  background: var(--c2);
  border: 1px solid var(--ash);
  border-top: 2px solid var(--gold);
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s cubic-bezier(.16,1,.3,1);
  z-index: 700;
}

nav#main-nav .lang-switcher.open .lang-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── تعويض الـ hero ── */
#sec-hero {
  padding-top: calc(7rem + 30px + 52px) !important;
}