/* ===== BASE ===== */
.sn-wrap,.sn-single-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;max-width:1200px !important;margin:0 auto !important;line-height:1.7 !important;padding:0 16px !important}
.sn-wrap *,.sn-single-wrap *{box-sizing:border-box !important}

/* ===== HERO (Listing) ===== */
.sn-hero{text-align:center !important;padding:48px 24px 36px !important;background:linear-gradient(135deg,#0d3d1e,#145a2c,#1b7a3d) !important;border-radius:12px !important;color:#fff !important;margin-bottom:24px !important;position:relative !important;overflow:hidden !important}
.sn-hero::before{content:'' !important;position:absolute !important;inset:0 !important;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23fff' opacity='.06'/%3E%3C/svg%3E") repeat !important}
.sn-bismillah{font-size:36px !important;color:#c8a84e !important;position:relative !important;margin-bottom:6px !important}
.sn-hero h1,body .sn-hero h1{font-size:30px !important;font-weight:800 !important;margin:0 0 8px !important;position:relative !important;color:#fff !important}
.sn-hero p{font-size:15px !important;margin:0 0 20px !important;position:relative !important;max-width:600px !important;margin-left:auto !important;margin-right:auto !important;color:#fff !important;opacity:.9 !important}
.sn-hero-links{display:flex !important;gap:10px !important;justify-content:center !important;flex-wrap:wrap !important;position:relative !important}
.sn-hero-link{display:inline-flex !important;align-items:center !important;gap:6px !important;padding:10px 22px !important;border-radius:50px !important;font-size:14px !important;font-weight:700 !important;text-decoration:none !important;color:#fff !important;transition:.3s !important;border:2px solid rgba(255,255,255,.25) !important}
.sn-hero-link:hover{transform:translateY(-2px) !important;box-shadow:0 6px 20px rgba(0,0,0,.25) !important}
.sn-hl-quran{background:rgba(21,101,192,.6) !important}.sn-hl-quran:hover{background:rgba(21,101,192,.9) !important}
.sn-hl-hadis{background:rgba(106,27,154,.6) !important}.sn-hl-hadis:hover{background:rgba(106,27,154,.9) !important}
.sn-hl-sahabe{background:rgba(230,81,0,.6) !important}.sn-hl-sahabe:hover{background:rgba(230,81,0,.9) !important}

/* ===== TABS ===== */
.sn-tabs{display:flex !important;gap:4px !important;background:#fff !important;border-radius:12px !important;padding:6px !important;box-shadow:0 2px 12px rgba(0,0,0,.06) !important;margin-bottom:24px !important;overflow-x:auto !important;border:1px solid rgba(0,0,0,.08) !important}
.sn-tab{flex:1 !important;padding:10px 14px !important;border:none !important;background:none !important;font-size:13px !important;font-weight:700 !important;color:#777 !important;cursor:pointer !important;border-radius:8px !important;white-space:nowrap !important;transition:.2s !important;font-family:inherit !important}
.sn-tab.sn-active{background:#1b7a3d !important;color:#fff !important;box-shadow:0 2px 8px rgba(27,122,61,.3) !important}
.sn-tab:hover:not(.sn-active){background:#f5f5f5 !important}
.sn-panel{display:none !important}.sn-panel.sn-active{display:block !important}
.sn-section-title{display:flex !important;align-items:center !important;gap:10px !important;font-size:20px !important;font-weight:800 !important;color:#145a2c !important;margin:0 0 16px !important;padding-bottom:12px !important;border-bottom:3px solid #e8f5e9 !important}
.sn-section-title span{font-size:13px !important;font-weight:600 !important;color:#1b7a3d !important;background:#e8f5e9 !important;padding:3px 10px !important;border-radius:12px !important;margin-left:auto !important}

/* ===== CARDS GRID ===== */
.sn-cards{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)) !important;gap:16px !important;margin-bottom:32px !important}
a.sn-card{text-decoration:none !important;color:inherit !important;display:flex !important;flex-direction:column !important;background:#fff !important;border-radius:12px !important;box-shadow:0 2px 10px rgba(0,0,0,.05) !important;border:1px solid rgba(0,0,0,.08) !important;transition:.25s !important;position:relative !important;overflow:hidden !important}
a.sn-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.12) !important;transform:translateY(-3px) !important}
.sn-card::before{content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;height:3px !important;background:linear-gradient(90deg,#1b7a3d,#4caf50) !important;z-index:1 !important}
.sn-card-high::before{background:linear-gradient(90deg,#e65100,#ff9800) !important}
.sn-card-critical::before{background:linear-gradient(90deg,#c62828,#ef5350) !important;height:4px !important}
.sn-card-img{height:160px !important;background-size:cover !important;background-position:center !important}
.sn-card-body{padding:18px 20px !important;flex:1 !important;display:flex !important;flex-direction:column !important}
.sn-card-top{display:flex !important;align-items:center !important;justify-content:space-between !important;margin-bottom:8px !important}
.sn-card-num{width:32px !important;height:32px !important;display:flex !important;align-items:center !important;justify-content:center !important;background:#e8f5e9 !important;color:#1b7a3d !important;font-size:13px !important;font-weight:800 !important;border-radius:50% !important}
.sn-card-critical .sn-card-num{background:#fce4ec !important;color:#c62828 !important}
.sn-card-high .sn-card-num{background:#fff3e0 !important;color:#e65100 !important}
.sn-card-yr{font-size:12px !important;font-weight:700 !important;color:#1b7a3d !important;background:#e8f5e9 !important;padding:3px 10px !important;border-radius:10px !important}
.sn-card-t{font-size:16px !important;font-weight:700 !important;color:#145a2c !important;margin:0 0 6px !important;line-height:1.4 !important}
.sn-card-s{font-size:13px !important;color:#777 !important;margin:0 0 12px !important;flex:1 !important;line-height:1.5 !important}
.sn-card-footer{display:flex !important;align-items:center !important;justify-content:space-between !important}
.sn-card-loc{font-size:11px !important;color:#777 !important;font-weight:600 !important}
.sn-badge{font-size:14px !important;margin-left:4px !important}
.sn-card-arr{position:absolute !important;right:16px !important;top:50% !important;transform:translateY(-50%) !important;font-size:18px !important;color:#1b7a3d !important;opacity:0 !important;transition:.2s !important}
a.sn-card:hover .sn-card-arr{opacity:1 !important}

/* ===== TIMELINE ===== */
.sn-tl{position:relative !important;padding:20px 0 !important}
.sn-tl::before{content:'' !important;position:absolute !important;left:50% !important;top:0 !important;bottom:0 !important;width:3px !important;background:linear-gradient(180deg,#1b7a3d,#c8a84e,#1b7a3d) !important;border-radius:2px !important;transform:translateX(-50%) !important}
.sn-tl-item{display:flex !important;align-items:flex-start !important;margin-bottom:24px !important;position:relative !important}
.sn-tl-left{flex-direction:row-reverse !important;text-align:right !important}
.sn-tl-dot{width:16px !important;height:16px !important;background:#1b7a3d !important;border:3px solid #fff !important;border-radius:50% !important;position:absolute !important;left:50% !important;transform:translateX(-50%) !important;z-index:2 !important;box-shadow:0 0 0 3px #e8f5e9 !important}
.sn-tl-crit .sn-tl-dot{background:#c62828 !important;box-shadow:0 0 0 3px #fce4ec !important}
.sn-tl-high .sn-tl-dot{background:#e65100 !important;box-shadow:0 0 0 3px #fff3e0 !important}
a.sn-tl-box{display:block !important;width:calc(50% - 40px) !important;background:#fff !important;border-radius:12px !important;padding:16px 20px !important;box-shadow:0 2px 10px rgba(0,0,0,.06) !important;border:1px solid rgba(0,0,0,.08) !important;text-decoration:none !important;color:inherit !important;transition:.2s !important}
a.sn-tl-box:hover{box-shadow:0 6px 20px rgba(0,0,0,.1) !important;transform:translateY(-2px) !important}
.sn-tl-left .sn-tl-box{margin-right:auto !important}
.sn-tl-right .sn-tl-box{margin-left:auto !important}
.sn-tl-yr{font-size:12px !important;font-weight:800 !important;color:#1b7a3d !important;background:#e8f5e9 !important;display:inline-block !important;padding:2px 10px !important;border-radius:8px !important;margin-bottom:6px !important}
.sn-tl-box h3{font-size:15px !important;font-weight:700 !important;margin:0 0 4px !important;color:#145a2c !important}
.sn-tl-box p{font-size:13px !important;color:#777 !important;margin:0 0 6px !important}
.sn-tl-loc{font-size:11px !important;color:#777 !important}

/* ===== SINGLE PAGE ===== */
.sn-breadcrumb{font-size:13px !important;color:#777 !important;margin-bottom:16px !important;padding:10px 0 !important}
.sn-breadcrumb a{color:#1b7a3d !important;text-decoration:none !important}
.sn-breadcrumb a:hover{text-decoration:underline !important}
.sn-breadcrumb span{color:#333 !important}

.sn-single-hero{text-align:center !important;padding:48px 28px !important;border-radius:12px !important;color:#fff !important;margin-bottom:28px !important;position:relative !important;overflow:hidden !important}
.sn-single-hero-bg{position:absolute !important;inset:0 !important;background:linear-gradient(135deg,#0d3d1e,#145a2c,#1b7a3d) !important;z-index:0 !important}
.sn-single-hero-bg::after{content:'' !important;position:absolute !important;inset:0 !important;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23fff' opacity='.06'/%3E%3C/svg%3E") repeat !important}
.sn-imp-critical .sn-single-hero-bg{background:linear-gradient(135deg,#4a0e0e,#8b1a1a,#c62828) !important}
.sn-imp-high .sn-single-hero-bg{background:linear-gradient(135deg,#3e2300,#7f3f00,#e65100) !important}
.sn-single-hero-content{position:relative !important;z-index:1 !important}
.sn-single-order{font-size:13px !important;font-weight:700 !important;letter-spacing:2px !important;opacity:.7 !important;margin-bottom:6px !important}
.sn-single-hero h1,body .sn-single-hero h1{font-size:32px !important;font-weight:800 !important;margin:0 0 12px !important;color:#fff !important}
.sn-single-summary{font-size:16px !important;opacity:.9 !important;max-width:700px !important;margin:0 auto 18px !important;color:#fff !important}
.sn-single-meta{display:flex !important;gap:8px !important;justify-content:center !important;flex-wrap:wrap !important}
.sn-sm-item,.sn-sm-cat{display:inline-block !important;font-size:13px !important;padding:5px 14px !important;border-radius:20px !important;background:rgba(255,255,255,.15) !important;backdrop-filter:blur(4px) !important}
.sn-sm-cat{background:rgba(200,168,78,.3) !important;color:#c8a84e !important}

.sn-single-grid{display:grid !important;grid-template-columns:1fr 320px !important;gap:28px !important;margin-bottom:40px !important}
.sn-single-main{min-width:0 !important}

/* Article */
.sn-article{background:#fff !important;border-radius:12px !important;box-shadow:0 2px 12px rgba(0,0,0,.05) !important;border:1px solid rgba(0,0,0,.08) !important;overflow:hidden !important;margin-bottom:24px !important}
.sn-article-img{max-height:400px !important;overflow:hidden !important}
.sn-article-img img{width:100% !important;height:auto !important;display:block !important}
.sn-article-content{padding:32px !important;font-size:17px !important;line-height:2 !important;color:#333 !important}
.sn-article-content p{margin-bottom:16px !important}
.sn-article-content strong{color:#145a2c !important}

/* Sections */
.sn-section{background:#fff !important;border-radius:12px !important;padding:24px !important;box-shadow:0 2px 12px rgba(0,0,0,.05) !important;border:1px solid rgba(0,0,0,.08) !important;margin-bottom:24px !important}
.sn-section-h{font-size:20px !important;font-weight:800 !important;color:#145a2c !important;margin:0 0 16px !important;padding-bottom:10px !important;border-bottom:3px solid #e8f5e9 !important}

/* Videos */
.sn-videos-grid{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)) !important;gap:16px !important}
.sn-video-card{border-radius:10px !important;overflow:hidden !important;border:1px solid rgba(0,0,0,.08) !important}
.sn-video-embed{position:relative !important;padding-top:56.25% !important;background:#000 !important}
.sn-video-embed iframe{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important}
.sn-video-title{padding:10px 14px !important;font-size:14px !important;font-weight:600 !important;background:#fafafa !important}

/* PDFs */
.sn-pdfs-list{display:flex !important;flex-direction:column !important;gap:12px !important}
.sn-pdf-card{display:flex !important;align-items:center !important;gap:16px !important;padding:16px !important;background:#f0faf3 !important;border-radius:10px !important;border:1px solid rgba(0,0,0,.08) !important}
.sn-pdf-icon{font-size:36px !important}
.sn-pdf-info{flex:1 !important}
.sn-pdf-info strong{display:block !important;margin-bottom:6px !important;color:#145a2c !important}
.sn-pdf-actions{display:flex !important;gap:8px !important}
.sn-pdf-btn{display:inline-flex !important;align-items:center !important;gap:4px !important;padding:6px 14px !important;border-radius:8px !important;font-size:13px !important;font-weight:600 !important;text-decoration:none !important;transition:.2s !important}
.sn-pdf-view{background:#e8f5e9 !important;color:#1b7a3d !important}
.sn-pdf-view:hover{background:#1b7a3d !important;color:#fff !important}
.sn-pdf-dl{background:#e3f2fd !important;color:#1565c0 !important}
.sn-pdf-dl:hover{background:#1565c0 !important;color:#fff !important}

/* References */
.sn-refs-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)) !important;gap:14px !important}
.sn-ref-block{background:#fafafa !important;border-radius:10px !important;padding:16px !important;border:1px solid rgba(0,0,0,.08) !important}
.sn-ref-block h3{font-size:15px !important;font-weight:700 !important;color:#145a2c !important;margin:0 0 10px !important;padding-bottom:6px !important;border-bottom:2px solid #e8f5e9 !important}
.sn-ref-item{padding:6px 10px !important;border-radius:6px !important;font-size:13px !important;margin-bottom:4px !important}
.sn-ref-verses .sn-ref-item{background:#fff8e1 !important;border:1px solid rgba(200,168,78,.15) !important}
.sn-ref-hadiths .sn-ref-item{background:#f3e5f5 !important;border:1px solid rgba(142,36,170,.1) !important}
.sn-ref-sahabe .sn-ref-item{background:#f0faf3 !important;border:1px solid rgba(27,122,61,.1) !important}
.sn-cross-links{margin-top:10px !important;display:flex !important;flex-direction:column !important;gap:6px !important}
.sn-cross-link{display:inline-flex !important;align-items:center !important;gap:4px !important;padding:6px 12px !important;background:#1b7a3d !important;color:#fff !important;border-radius:8px !important;font-size:12px !important;font-weight:700 !important;text-decoration:none !important;transition:.2s !important}
.sn-cross-link:hover{background:#145a2c !important;transform:translateX(3px) !important}

/* Navigation */
.sn-nav{display:grid !important;grid-template-columns:1fr 1fr !important;gap:16px !important;margin-bottom:32px !important}
.sn-nav-link{display:flex !important;flex-direction:column !important;padding:18px 22px !important;background:#fff !important;border-radius:12px !important;border:1px solid rgba(0,0,0,.08) !important;text-decoration:none !important;color:inherit !important;transition:.2s !important}
.sn-nav-link:hover{box-shadow:0 4px 16px rgba(0,0,0,.08) !important;border-color:#1b7a3d !important}
.sn-nav-dir{font-size:12px !important;font-weight:700 !important;color:#1b7a3d !important;margin-bottom:4px !important}
.sn-nav-title{font-size:15px !important;font-weight:600 !important;color:#145a2c !important}
.sn-nav-next{text-align:right !important}

/* Sidebar */
.sn-single-sidebar{position:sticky !important;top:100px !important;align-self:start !important}
.sn-sidebar-box{background:#fff !important;border-radius:12px !important;padding:20px !important;box-shadow:0 2px 10px rgba(0,0,0,.05) !important;border:1px solid rgba(0,0,0,.08) !important;margin-bottom:16px !important}
.sn-sidebar-box h3{font-size:16px !important;font-weight:800 !important;color:#145a2c !important;margin:0 0 14px !important;padding-bottom:8px !important;border-bottom:2px solid #e8f5e9 !important}
.sn-sb-link{display:block !important;padding:8px 12px !important;border-radius:8px !important;font-size:14px !important;font-weight:600 !important;text-decoration:none !important;color:#145a2c !important;transition:.15s !important;margin-bottom:2px !important}
.sn-sb-link:hover{background:#e8f5e9 !important;color:#1b7a3d !important}
.sn-sb-related{display:flex !important;align-items:center !important;gap:10px !important;padding:8px 10px !important;border-radius:8px !important;text-decoration:none !important;color:inherit !important;transition:.15s !important;margin-bottom:2px !important}
.sn-sb-related:hover{background:#e8f5e9 !important}
.sn-sb-r-num{width:28px !important;height:28px !important;display:flex !important;align-items:center !important;justify-content:center !important;background:#e8f5e9 !important;color:#1b7a3d !important;font-size:12px !important;font-weight:800 !important;border-radius:50% !important;flex-shrink:0 !important}
.sn-sb-r-title{font-size:13px !important;font-weight:600 !important;color:#145a2c !important}
.sn-sb-cat{display:flex !important;justify-content:space-between !important;padding:6px 10px !important;border-radius:6px !important;font-size:13px !important;text-decoration:none !important;color:#333 !important;transition:.15s !important}
.sn-sb-cat:hover{background:#e8f5e9 !important;color:#1b7a3d !important}
.sn-sb-cat span{color:#777 !important;font-size:12px !important}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .sn-single-grid{grid-template-columns:1fr !important}
    .sn-single-sidebar{position:static !important}
}
@media(max-width:768px){
    .sn-wrap,.sn-single-wrap{padding:0 10px !important}
    .sn-hero{padding:28px 14px 24px !important;border-radius:10px !important;margin-bottom:16px !important}
    .sn-hero h1{font-size:20px !important}
    .sn-hero p{font-size:13px !important;margin-bottom:14px !important}
    .sn-bismillah{font-size:28px !important}
    .sn-hero-links{gap:6px !important}.sn-hero-link{padding:8px 14px !important;font-size:11px !important;gap:4px !important}
    .sn-single-hero{padding:24px 14px !important;border-radius:10px !important;margin-bottom:16px !important}
    .sn-single-hero h1,body .sn-single-hero h1{font-size:20px !important}
    .sn-single-summary{font-size:14px !important;margin-bottom:12px !important}
    .sn-single-order{font-size:11px !important;letter-spacing:1px !important}
    .sn-single-meta{gap:6px !important}
    .sn-sm-item,.sn-sm-cat{font-size:11px !important;padding:3px 10px !important}
    .sn-tabs{gap:2px !important;padding:4px !important;border-radius:8px !important}.sn-tab{font-size:11px !important;padding:8px 6px !important}
    .sn-section-title{font-size:16px !important;gap:8px !important}
    .sn-section-title span{font-size:11px !important;padding:2px 8px !important}
    .sn-cards{grid-template-columns:1fr !important;gap:12px !important}
    .sn-card-body{padding:14px 16px !important}
    .sn-card-t{font-size:15px !important}
    .sn-card-s{font-size:12px !important;margin-bottom:8px !important}
    .sn-card-img{height:120px !important}
    .sn-tl::before{left:16px !important}
    .sn-tl-item{flex-direction:column !important;padding-left:40px !important;margin-bottom:16px !important}
    .sn-tl-dot{left:16px !important;transform:translateX(-50%) !important;width:12px !important;height:12px !important}
    a.sn-tl-box{width:100% !important;margin:0 !important;padding:12px 14px !important}
    .sn-tl-left{text-align:left !important}
    .sn-tl-box h3{font-size:14px !important}
    .sn-tl-box p{font-size:12px !important}
    .sn-article-content{padding:16px !important;font-size:15px !important;line-height:1.8 !important}
    .sn-article-img{max-height:200px !important}
    .sn-section{padding:16px !important;border-radius:10px !important;margin-bottom:16px !important}
    .sn-section-h{font-size:17px !important;margin-bottom:12px !important}
    .sn-refs-grid{grid-template-columns:1fr !important;gap:10px !important}
    .sn-ref-block{padding:12px !important}
    .sn-ref-block h3{font-size:14px !important}
    .sn-ref-item{font-size:12px !important;padding:5px 8px !important}
    .sn-videos-grid{grid-template-columns:1fr !important;gap:12px !important}
    .sn-video-title{font-size:13px !important;padding:8px 12px !important}
    .sn-pdf-card{flex-direction:column !important;align-items:flex-start !important;gap:10px !important;padding:14px !important}
    .sn-pdf-icon{font-size:28px !important}
    .sn-pdf-info strong{font-size:14px !important}
    .sn-pdf-actions{flex-wrap:wrap !important;gap:6px !important}
    .sn-pdf-btn{padding:6px 12px !important;font-size:12px !important}
    .sn-cross-link{font-size:11px !important;padding:5px 10px !important}
    .sn-nav{grid-template-columns:1fr !important;gap:10px !important}
    .sn-nav-link{padding:14px 16px !important}
    .sn-nav-dir{font-size:11px !important}
    .sn-nav-title{font-size:13px !important}
    .sn-breadcrumb{font-size:12px !important;padding:8px 0 !important;margin-bottom:10px !important}
    .sn-sidebar-box{padding:16px !important;border-radius:10px !important;margin-bottom:12px !important}
    .sn-sidebar-box h3{font-size:15px !important;margin-bottom:10px !important}
    .sn-sb-link{padding:6px 10px !important;font-size:13px !important}
    .sn-sb-related{padding:6px 8px !important;gap:8px !important}
    .sn-sb-r-title{font-size:12px !important}
}
@media(max-width:400px){
    .sn-wrap,.sn-single-wrap{padding:0 6px !important}
    .sn-hero{padding:20px 10px 18px !important}
    .sn-hero h1{font-size:18px !important}
    .sn-single-hero h1,body .sn-single-hero h1{font-size:18px !important}
    .sn-hero-link{padding:6px 10px !important;font-size:10px !important}
    .sn-card-body{padding:12px 14px !important}
    .sn-card-num{width:28px !important;height:28px !important;font-size:11px !important}
    .sn-article-content{padding:12px !important;font-size:14px !important}
    .sn-section{padding:12px !important}
}