/* عن الديوان — من About.dc.html (كمبيوتر) + AboutMobile.dc.html (موبايل ≤860px) */

@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1)}}

/* ---------- خلفية ---------- */
.ab-bg{position:absolute;top:0;right:0;left:0;height:1100px;pointer-events:none;overflow:hidden}
.ab-orb{position:absolute;top:-240px;right:-140px;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(247,208,100,.3),rgba(247,208,100,0) 68%);filter:blur(30px)}
.ab-pat{position:absolute;inset:0;opacity:.38;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 60% 20%,#000 10%,transparent 100%);mask-image:radial-gradient(ellipse 60% 55% at 60% 20%,#000 10%,transparent 100%)}

/* ---------- الغلاف ---------- */
.ab-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:center;padding-top:50px}
.ab-text{display:flex;flex-direction:column;gap:22px;min-width:0}
.crumbs{display:flex;gap:10px;font-size:14px;color:var(--sand)}
.crumbs .cur{color:var(--gold)}
.ab-eyebrow{display:block}
.ab-h1{font-family:var(--f-verse);font-weight:700;font-size:clamp(44px,5.6vw,80px);line-height:1.35;color:var(--ivory-hi);text-shadow:0 0 40px rgba(242,199,90,.25)}
.ab-lead{font-family:var(--f-verse);font-size:clamp(24px,2.4vw,32px);line-height:1.8;color:var(--ivory)}
.ab-lead .g{color:var(--gold)}
.ab-detail{font-size:17px;line-height:2;color:var(--sand);max-width:600px}
.ab-act{display:flex;flex-wrap:wrap;gap:12px}
.ab-fig{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0 auto}
.ab-frame{position:relative;width:min(84vw,380px);aspect-ratio:3/4.1;border-radius:300px 300px 30px 30px;overflow:hidden;border:1px solid rgba(242,199,90,.6);box-shadow:0 40px 100px rgba(0,0,0,.45),0 0 70px rgba(242,199,90,.18);background:var(--bg-4)}
.portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform-origin:50% 30%;animation:kb 26s ease-in-out infinite alternate}
.ab-frame-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,48,42,0) 55%,rgba(22,48,42,.85) 100%)}
.ab-frame-in{position:absolute;inset:12px;border-radius:300px 300px 22px 22px;border:1px solid rgba(242,199,90,.35)}
.ab-fig figcaption{text-align:center;display:flex;flex-direction:column;gap:4px}
.cap-n{font-family:var(--f-verse);font-size:22px;color:var(--ivory-hi)}
.cap-d{font-size:13px;color:var(--sand)}

/* ---------- تنقل داخل الصفحة ---------- */
.ab-body{position:relative}
.sec-nav{position:relative;max-width:var(--max);margin:0 auto;padding:56px var(--gut) 0}
.sn-row{border-radius:var(--r-pill);padding:8px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sn-link{display:flex;align-items:center;height:42px;padding:0 20px;border-radius:var(--r-pill);border:1px solid transparent;font-size:15px;white-space:nowrap}
.sn-link[aria-current="true"]{color:var(--gold);border-color:rgba(242,199,90,.6);background:rgba(242,199,90,.12)}

/* ---------- أقسام ---------- */
.ab-sec{position:relative;padding-top:110px}
.ab-sec#diwan{padding-top:100px}
.ab-sec.last{padding-bottom:110px}
.ab-sec{scroll-margin-top:24px}
.wrap.narrow{max-width:1100px}
.ab-head{display:flex;flex-direction:column;gap:12px;margin-bottom:36px}
.ab-head.center{align-items:center;text-align:center;margin-bottom:34px}
.ab-head.split{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px}
.ab-ht{display:flex;flex-direction:column;gap:12px}
.ab-h2{font-family:var(--f-verse);font-weight:400;font-size:clamp(34px,3.8vw,52px);line-height:1.5;color:var(--ivory-hi)}
.ab-sub{max-width:680px;font-size:16px;line-height:2;color:var(--sand)}
.ab-head.split .ab-sub{max-width:520px}
.ab-card{border-radius:36px;padding:44px 36px;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}

/* الديوان */
.ab-matla{font-family:var(--f-verse);font-size:clamp(26px,3vw,40px);line-height:1.9;color:var(--ivory-hi);text-shadow:0 0 30px rgba(242,199,90,.3)}
.ml-star{color:var(--gold);font-size:.5em;vertical-align:middle;margin-inline:.6em}
.ab-note{font-size:14px;color:var(--sand)}
.ab-stats{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:6px}
.ab-stat{border-radius:var(--r-md);border:1px solid var(--line-soft);padding:18px;display:flex;flex-direction:column;gap:4px;text-align:start}
.ab-stat-n{font-family:var(--f-verse);font-size:38px;line-height:1.2;color:var(--gold)}
.ab-stat-l{font-size:13px;color:var(--sand);line-height:1.6}
.ab-p{font-size:16px;line-height:2;color:var(--sand);max-width:760px}

/* الشيخ */
.sh-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:stretch}
.sh-text{display:flex;flex-direction:column;gap:20px;min-width:0}
.sh-text p{font-size:17px;line-height:2.1;color:var(--sand)}
.sh-text .sh-lead{font-family:var(--f-verse);font-size:22px;color:var(--ivory)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start;min-width:0}
.fact,.tl-i{border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:6px;background:var(--glass);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--line)}
.f-l{font-size:13px;color:var(--sand)}
.f-v{font-family:var(--f-verse);font-size:24px;line-height:1.5;color:var(--ivory-hi)}
.f-v.gold{color:var(--gold)}
.f-v.sm{font-size:22px}
/* على الكمبيوتر الخط الزمني يتحول لبطاقتين */
.tl{display:contents}
.tl-t{display:flex;flex-direction:column;gap:6px}
.tl-line,.tl-dot{display:none}
.succ{margin-top:44px;display:flex;flex-direction:column;gap:18px}
.eyebrow.sm{letter-spacing:2px}
.succ-list{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px}
.succ-list>li.glass{flex:1 1 260px;border-radius:26px;padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.succ-list>li.is-first{border-color:rgba(242,199,90,.5)}
.s-n{font-family:var(--f-verse);font-size:22px;line-height:1.6;color:var(--ivory-hi)}
.is-first .s-n{color:var(--gold)}
.s-d{font-size:13px;color:var(--sand)}
.succ-list>li.arr{flex:0 0 auto;display:flex;align-items:center;color:var(--gold)}

/* النسب */
.nasab-card{padding:36px 28px;gap:22px}
.chain{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 8px}
.chain li{display:flex;align-items:center;gap:8px}
.ch{display:inline-block;padding:7px 16px;border-radius:var(--r-pill);font-size:14px;line-height:1.6;border:1px solid rgba(247,236,210,.18);color:var(--ivory)}
.ch-end{border-color:rgba(242,199,90,.6);background:rgba(242,199,90,.12);color:var(--gold)}
.ch-dots{border-color:transparent;padding-inline:4px;color:var(--sand)}
.ch-arr{color:var(--gold);opacity:.7;font-size:18px}
.nasab-more{width:100%;display:flex;flex-direction:column;align-items:center}
.nm-btn{list-style:none;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 22px;border-radius:var(--r-pill);border:1px solid rgba(242,199,90,.55);color:var(--gold);font-size:15px;cursor:pointer;transition:background .4s,border-color .4s}
.nm-btn::-webkit-details-marker{display:none}
.nm-btn:hover{background:rgba(242,199,90,.14);border-color:rgba(242,199,90,.9)}
.nm-chev{transition:transform .4s}
.s-open{display:none}
.nasab-more[open] .s-open{display:inline}
.nasab-more[open] .s-closed{display:none}
.nasab-more[open] .nm-chev{transform:rotate(180deg)}
.nasab-more summary{align-self:center}
.nasab-full{margin-top:22px;font-family:var(--f-verse);font-size:20px;line-height:2.2;color:var(--ivory);text-align:justify;text-align-last:center}

/* الطريقة */
.tq-card{align-items:stretch;text-align:start;padding:32px 28px;gap:20px}
.tq-l{font-size:14px;color:var(--sand)}
.sanad{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.sd{position:relative;border-radius:var(--r-md);border:1px solid var(--line-soft);padding:18px;display:flex;flex-direction:column;gap:6px}
.sd-card{display:flex;flex-direction:column;gap:6px}
.sd-line{display:none}
.sd-n{font-size:12px;color:var(--sand)}
.sd-name{font-family:var(--f-verse);font-size:20px;line-height:1.6;color:var(--ivory-hi)}
.sd-sub{font-size:12px;line-height:1.7;color:var(--sand)}
.sd-first{border-color:rgba(242,199,90,.5);background:rgba(242,199,90,.08)}
.sd-last{border-color:rgba(242,199,90,.6);background:rgba(242,199,90,.14)}
.sd-first .sd-name,.sd-last .sd-name{color:var(--gold)}
.places{border-top:1px solid rgba(247,236,210,.1);padding-top:18px;display:flex;flex-direction:column;gap:12px}
.place-row{display:flex;flex-wrap:wrap;gap:8px}
.place{padding:6px 14px;border-radius:var(--r-pill);border:1px solid rgba(247,236,210,.18);font-size:14px;color:var(--ivory)}

/* المؤلفات */
.bk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;align-items:stretch}
.bk-img{position:relative;min-height:340px;border-radius:32px;overflow:hidden;border:1px solid rgba(242,199,90,.4);background:var(--bg-4)}
.bk-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.bk-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,48,42,.1) 40%,rgba(22,48,42,.9) 100%)}
.bk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;min-width:0}
.bk{border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:10px}
.bk-k{font-size:12px;color:var(--gold)}
.bk-t{font-family:var(--f-verse);font-size:24px;line-height:1.6;color:var(--ivory-hi)}
.bk-t.gold{color:var(--gold)}
.bk-d{font-size:15px;line-height:1.9;color:var(--sand)}
.bk-main{border:1px solid rgba(242,199,90,.55);background:linear-gradient(180deg,rgba(242,199,90,.14),rgba(255,244,214,.03))}
.bk-go{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gold)}

/* الحقوق */
.rights{align-items:stretch;text-align:start;padding:40px 36px;gap:18px;border-radius:36px}
.rt-h{font-weight:300}
.rt-main{font-family:var(--f-verse);font-size:22px;line-height:2;color:var(--ivory-hi)}
.rt-src{font-size:15px;line-height:2;color:var(--sand)}
.rt-src .gold{color:var(--gold);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(242,199,90,.4)}
.ph{color:var(--gold);opacity:.85}

/* ======================= موبايل ======================= */
@media (max-width:860px){
  .ab-bg{height:620px}
  .ab-orb{top:-160px;right:-160px;width:460px;height:460px;filter:none}
  .ab-hero{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding-top:22px}
  .ab-text{display:contents}
  .ab-hero .crumbs{order:1;font-size:13px}
  .ab-hero .ab-eyebrow{order:2;font-size:13px;margin-top:6px}
  .ab-hero .ab-h1{order:3;font-size:42px;line-height:1.4}
  .ab-hero .ab-lead{order:4;font-size:22px;line-height:1.85}
  .ab-hero .ab-fig{order:5;margin:6px auto 4px}
  .ab-hero .ab-detail{order:6;font-size:15px;line-height:2}
  .ab-hero .ab-act{order:7;flex-direction:column;gap:10px;margin-top:6px}
  .ab-act .btn{width:100%}
  .ab-act .btn-gold{height:52px}
  .ab-act .btn-line{height:50px}
  .ab-frame{width:250px;height:342px;aspect-ratio:auto;border-radius:200px 200px 26px 26px}
  .ab-frame-in{border-radius:190px 190px 16px 16px;inset:10px}
  .cap-n{font-size:20px}

  .sec-nav{position:sticky;top:var(--header-h);z-index:28;max-width:none;margin:22px 0 0;padding:0;background:rgba(29,55,49,.88);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-block:1px solid var(--line-soft)}
  .sn-row{border-radius:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:8px var(--gut);gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sn-row::-webkit-scrollbar{display:none}
  .sn-link{height:44px;padding:0 18px;flex:none;border-color:var(--line)}

  .ab-sec,.ab-sec#diwan{padding:48px 0;scroll-margin-top:128px}
  .ab-sec.last{padding-bottom:36px}
  #diwan{background:#294840}#sheikh{background:#244139}#nasab{background:#203c35}#tariqa{background:#1D3731}#books{background:#244139}#rights{background:#203c35}
  .ab-head,.ab-head.center,.ab-head.split{margin-bottom:24px;gap:10px}
  .ab-head.split{flex-direction:column;align-items:stretch}
  .ab-head.center{align-items:center}
  .ab-h2{font-size:32px}
  .ab-sub{font-size:15px;line-height:1.95}
  .ab-card{border-radius:28px;padding:28px 18px;gap:20px}
  .ab-matla{font-size:24px;line-height:1.95}
  .ab-matla .ml-a,.ab-matla .ml-b{display:block}
  .ml-star{display:block;margin:4px 0}
  .ab-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ab-stat{padding:14px}
  .ab-stat-n{font-size:30px}
  .ab-p{font-size:15px}

  .sh-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .sh-text{gap:16px}
  .sh-text p{font-size:15px;line-height:2.05}
  .sh-text .sh-lead{font-size:20px}
  .facts{gap:10px}
  .fact{border-radius:20px;padding:16px}
  .f-v{font-size:22px}
  .tl{display:flex;flex-direction:column;grid-column:1/-1;gap:0;border-radius:22px;padding:18px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .tl-i{position:relative;flex-direction:row;background:none;border:0;border-radius:0;padding:0 28px 18px 0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .tl-i:last-child{padding-bottom:0}
  .tl-dot{display:block;position:absolute;right:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px rgba(242,199,90,.5)}
  .tl-dot.hollow{background:transparent;border:2px solid var(--gold);box-shadow:none}
  .tl-line{display:block;position:absolute;right:5px;top:20px;bottom:-4px;width:2px;background:rgba(242,199,90,.4)}
  .succ{margin-top:28px}
  .succ-list{flex-direction:column;flex-wrap:nowrap;gap:6px}
  .succ-list>li.glass{flex:none;border-radius:22px;padding:16px 18px}
  .succ-list>li.arr{justify-content:center}
  .s-n{font-size:20px}

  .nasab-card{padding:24px 16px}
  .ch{font-size:13px;padding:6px 12px}
  .nasab-full{font-size:18px;line-height:2.1;text-align:start;text-align-last:auto}
  .nm-btn{width:100%;justify-content:center;height:48px}

  .tq-card{padding:22px 16px}
  .sanad{display:flex;flex-direction:column;gap:0}
  .sd{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;border:0;background:none!important;padding:0 0 14px}
  .sd-n{grid-column:1;grid-row:1;position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ivory);border:1px solid rgba(247,236,210,.3);background:var(--bg-3)}
  .sd-card{grid-column:2;grid-row:1;border-radius:20px;border:1px solid var(--line-soft);padding:14px 16px}
  .sd-line{display:block;position:absolute;right:17px;top:36px;bottom:0;width:2px;background:rgba(242,199,90,.35)}
  .sd:last-child{padding-bottom:0}
  .sd-last .sd-line{display:none}
  .sd-first .sd-card{border-color:rgba(242,199,90,.5);background:rgba(242,199,90,.08)}
  .sd-last .sd-card{border-color:rgba(242,199,90,.6);background:rgba(242,199,90,.14)}
  .sd-first .sd-n,.sd-last .sd-n{border-color:var(--gold);background:var(--gold);color:var(--ink)}
  .sd-name{font-size:19px}

  .bk-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .bk-img{min-height:260px;border-radius:26px}
  .bk-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bk{border-radius:22px;padding:18px 16px;gap:8px}
  .bk-t{font-size:19px;line-height:1.55}
  .bk-d{font-size:13px;line-height:1.85}

  .rights{padding:28px 18px;border-radius:26px;gap:14px}
  .rt-bar{display:block;width:44px;height:3px;border-radius:3px;background:var(--gold)}
  .rt-main{font-size:19px;line-height:2}
  .rt-src{font-size:14px}
}
@media (max-width:420px){
  .bk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.portrait{animation:none!important}}