/* home.css — gaya beranda imalah.net (dipindah dari home.php, 29 Okt 2026). */
/* ============================================================
   BERANDA v-IEN UI (20 Okt 2026) — ditulis ulang di atas /assets/ien/ien-ui.css
   Token warna, tombol (.ien-btn), kartu (.ien-card), judul (.ien-eyebrow/.ien-h2),
   chip, reveal, dan lazyload datang dari file bersama; di sini hanya tata letak beranda.
============================================================ */
.imalah-home{
  --ih-gap:clamp(10px,2.4vw,16px);
  --ih-sec:clamp(26px,6vw,46px);
  --ih-pad:clamp(12px,3vw,18px);
  max-width:1100px; margin-inline:auto;
  padding:clamp(10px,2vw,16px) var(--ih-pad) clamp(18px,5vw,34px);
  font-family:var(--ien-font); color:var(--ien-text);
}
.imalah-home *,.imalah-home *::before,.imalah-home *::after{ box-sizing:border-box; }
.imalah-home img{ max-width:100%; display:block; }
.imalah-home a{ -webkit-tap-highlight-color:transparent; }
.ih-ico{ width:1em; height:1em; flex:0 0 auto; display:block; overflow:visible; }
#pelatihan,#member,#statistik,#solusi-sekolah{ scroll-margin-top:calc(var(--ien-bar-h) + var(--ien-tabs-h) + 16px); }
.ih-sec{ margin-bottom:var(--ih-sec); }

/* kepala seksi: eyebrow + judul di kiri, chip/aksi di kanan */
.ih-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 16px; margin-bottom:var(--ih-gap); }
.ih-head .ien-chip .ih-ico{ width:15px; height:15px; color:var(--ien-blue); }
a.ien-chip{ transition:border-color .2s,transform .25s var(--ien-spring); }
a.ien-chip:active{ transform:scale(.95); }
@media (hover:hover){ a.ien-chip:hover{ border-color:var(--ien-blue-soft); } }
.ih-note{ margin:6px 0 0; font-size:13px; font-weight:600; color:var(--ien-soft); }

/* ========== HERO ========== */
.ih-hero{ position:relative; isolation:isolate; overflow:hidden; text-align:center; color:#fff;
  border-radius:28px; padding:clamp(32px,6vw,62px) clamp(18px,4vw,40px) clamp(54px,8vw,76px);
  background:var(--ien-hero); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 50px -26px rgba(10,42,94,.75); }
html.dark .ih-hero{ box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 26px 50px -26px rgba(0,0,0,.85); }
.ih-hero::before{ content:""; position:absolute; inset:0; z-index:-2; opacity:.55; pointer-events:none;
  background-image:var(--ien-grid); background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 25%,transparent 72%); mask-image:radial-gradient(ellipse at 50% 20%,#000 25%,transparent 72%); }
html.dark .ih-hero::before{ opacity:.35; }
#ih-hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.ih-hero-content{ position:relative; z-index:1; }
.ih-kicker{ display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; padding:7px 15px; border-radius:99px;
  font:900 11.5px/1 var(--ien-font); letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ih-kicker .ih-ico{ width:14px; height:14px; }
.ih-hero h1{ margin:0 0 14px; font:700 clamp(27px,6vw,46px)/1.12 var(--ien-display); letter-spacing:-.01em; text-wrap:balance; }
.ih-hero p{ margin:0 auto clamp(22px,4vw,30px); max-width:52ch; font-size:clamp(14px,3.3vw,17px); font-weight:600; line-height:1.55; color:rgba(255,255,255,.88); text-wrap:balance; }
.ih-hero-btns{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px 14px; }
.ih-hero-icons{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(8px,2.4vw,12px); max-width:820px; margin:clamp(26px,5vw,36px) auto 0; }
.ih-hero-icon{ position:relative; overflow:hidden; isolation:isolate; flex:1 1 88px; max-width:150px; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 8px 12px; border-radius:18px; color:#fff; text-decoration:none; font-size:clamp(11.5px,2.8vw,13px); font-weight:800;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .35s var(--ien-ease),background .3s; }
.ih-hero-icon:active{ transform:scale(.95); }
.ih-hero-badge{ display:grid; place-items:center; width:42px; height:42px; border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -6px rgba(0,0,0,.35); }
.ih-hero-badge .ih-ico{ width:22px; height:22px; }
@media (hover:hover){ a.ih-hero-icon:hover{ transform:translateY(-4px); background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.1)); } }
/* masuk: satu momen berurutan saat halaman dibuka */
.ih-kicker,.ih-hero h1,.ih-hero p,.ih-hero-btns,.ih-hero-icons{ animation:ih-up .8s var(--ien-ease) both; }
.ih-hero h1{ animation-delay:.05s; } .ih-hero p{ animation-delay:.1s; } .ih-hero-btns{ animation-delay:.16s; } .ih-hero-icons{ animation-delay:.24s; }
@keyframes ih-up{ from{ opacity:0; transform:translateY(14px); } }
/* HP: hero menempel ke tepi layar seperti aplikasi */
@media (max-width:640px){
  .imalah-home{ padding-top:0; }
  .ih-hero{ margin-inline:calc(var(--ih-pad) * -1); border-radius:0 0 28px 28px; padding-top:26px; }
  .ih-hero-btns .ien-btn{ flex:1 1 140px; }
}

/* ========== BAR LEGALITAS ========== */
.ih-trust{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 20px;
  width:min(940px,calc(100% - 24px)); margin:-28px auto var(--ih-sec); padding:13px 18px; border-radius:18px;
  font-size:13px; font-weight:800; color:var(--ien-soft); box-shadow:var(--ien-gloss),var(--ien-sh-lg); }
.ih-trust span{ display:inline-flex; align-items:center; gap:7px; }
.ih-trust span .ih-ico{ width:16px; height:16px; color:var(--ien-blue); }
.ih-trust b{ font-family:var(--ien-display); font-weight:600; color:var(--ien-text); }
.ih-trust i{ width:4px; height:4px; border-radius:50%; background:var(--ien-blue-soft); }
html.dark .ih-trust i{ background:#2a3a55; }
.ih-trust a{ display:inline-flex; align-items:center; gap:5px; color:var(--ien-blue); text-decoration:none; }
.ih-trust a .ih-ico{ width:14px; height:14px; transition:transform .3s var(--ien-ease); }
@media (hover:hover){ .ih-trust a:hover .ih-ico{ transform:translateX(3px); } }
@media (max-width:640px){ .ih-trust{ justify-content:flex-start; gap:6px 14px; } .ih-trust i{ display:none; } }

/* ========== BANNER WEBINAR (nuansa poster: navy + merah + emas) ========== */
.ih-ev{ --ev-navy:#0f2a7a; --ev-navy-2:#1e40af; --ev-red:#d0142f; --ev-red-2:#a50e25; --ev-gold:#f2b705; --ev-ink:#13235c; --ev-muted:#4b5a86;
  --ev-bg:linear-gradient(120deg,#fffaf0 0%,#eef6ff 60%,#fff7e8 100%);
  position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:clamp(12px,3vw,24px);
  margin-bottom:var(--ih-sec); padding:clamp(16px,4vw,22px) clamp(16px,4vw,26px); border-radius:var(--ien-r-lg);
  border:2px solid rgba(242,183,5,.6); background:var(--ev-bg); color:var(--ev-ink); text-decoration:none;
  box-shadow:0 12px 32px -14px rgba(15,42,122,.35); transition:transform .3s var(--ien-ease),box-shadow .3s; }
html.dark .ih-ev{ --ev-ink:#eef3ff; --ev-muted:#a9b6dc; --ev-bg:linear-gradient(120deg,#0c1838 0%,#0f1f4d 60%,#1a1630 100%); border-color:rgba(242,183,5,.35); box-shadow:0 12px 32px -14px rgba(0,0,0,.7); }
.ih-ev::before{ content:""; position:absolute; inset:0 0 0 auto; width:55%; z-index:-1; opacity:.45; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='60' viewBox='0 0 48 60'%3E%3Cpath d='M6 60V27Q6 10 24 2Q42 10 42 27V60' fill='none' stroke='%23c9a227' stroke-width='1.4'/%3E%3C/svg%3E") right top/48px 60px repeat-x;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%); mask-image:linear-gradient(90deg,transparent,#000 60%); }
html.dark .ih-ev::before{ opacity:.25; }
.ih-ev:active{ transform:scale(.985); }
.ih-ev-main{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.ih-ev-top{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ih-ev-free{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 8px; border-radius:8px; border:2px solid var(--ev-gold);
  background:linear-gradient(160deg,#ef2645,var(--ev-red-2)); color:#fff; font:700 13px/1.2 var(--ien-display); letter-spacing:.6px; text-transform:uppercase; transform:rotate(-4deg); }
.ih-ev-free .ih-ico{ width:14px; height:14px; color:#fde68a; }
.ih-ev-pill{ padding:3px 12px; border-radius:50px; background:linear-gradient(180deg,var(--ev-navy-2),var(--ev-navy)); border:1.5px solid var(--ev-gold); color:#fff; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }
.ih-ev-title{ margin:2px 0 0; font-family:var(--ien-display); font-weight:700; line-height:1.05; text-transform:uppercase; }
.ih-ev-t1{ font-size:clamp(24px,6.4vw,32px); color:var(--ev-red); text-shadow:0 3px 0 rgba(165,14,37,.25); }
.ih-ev-t2{ font-size:clamp(19px,5vw,26px); color:var(--ev-navy); }
html.dark .ih-ev-t1{ color:#ff4d6a; } html.dark .ih-ev-t2{ color:#fff; }
.ih-ev-kicker{ color:var(--ev-muted); font-size:clamp(12px,3.1vw,13.5px); font-weight:700; line-height:1.4; }
.ih-ev-when{ display:inline-flex; align-items:center; gap:6px; color:var(--ev-ink); font-size:clamp(12px,3.1vw,13px); font-weight:800; }
.ih-ev-when .ih-ico{ width:15px; height:15px; color:var(--ev-red); }
.ih-ev-go{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:10px 20px; border-radius:var(--ien-r-btn); border:2px solid var(--ev-gold);
  background:linear-gradient(180deg,#ef2645,var(--ev-red-2)); color:#fff; font-size:14.5px; font-weight:800; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -10px rgba(208,20,47,.75); }
.ih-ev-go .ih-ico{ width:17px; height:17px; transition:transform .25s; }
@media (hover:hover){ .ih-ev:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -14px rgba(15,42,122,.45); } .ih-ev:hover .ih-ev-go .ih-ico{ transform:translateX(4px); } }
@media (max-width:600px){ .ih-ev{ flex-direction:column; align-items:stretch; } .ih-ev-go{ justify-content:center; } }

/* ========== STATISTIK PESERTA ========== */
.ih-tone-blue  { --pc:#1976d2; --pc2:#42a5f5; --pcs:#e8f2ff; }
.ih-tone-red   { --pc:#d32f2f; --pc2:#ef5350; --pcs:#fdecec; }
.ih-tone-green { --pc:#2e9d5b; --pc2:#4cc47e; --pcs:#e5f6ec; }
.ih-tone-orange{ --pc:#ef8a17; --pc2:#ffb04a; --pcs:#fff1e0; }
html.dark .ih-tone-blue{ --pcs:rgba(66,165,245,.14); } html.dark .ih-tone-red{ --pcs:rgba(239,83,80,.15); }
html.dark .ih-tone-green{ --pcs:rgba(76,196,126,.15); } html.dark .ih-tone-orange{ --pcs:rgba(255,176,74,.15); }

/* (23 Okt 2026) kartu statistik lama (.ih-ps-*, .ih-pg-*, .ih-mq-*) diganti infografis ringkas .ih-st-* */

/* ========== KONTAK ADMIN ========== */
.ih-contact{ display:flex; align-items:center; gap:16px; padding:clamp(16px,3.4vw,22px); }
.ih-contact-av{ flex:none; width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--ien-pale); border:2px solid var(--ien-blue-soft); }
html.dark .ih-contact-av{ border-color:#2a4a7a; }
.ih-contact-body{ flex:1; min-width:0; }
.ih-contact-title{ margin:0 0 4px; font:600 clamp(17px,2.2vw,20px)/1.25 var(--ien-display); color:var(--ien-text); }
.ih-contact-text{ margin:0; font-size:13.5px; font-weight:600; line-height:1.55; color:var(--ien-soft); }
.ih-contact .ien-btn svg{ width:19px; height:19px; }
@media (max-width:620px){ .ih-contact{ flex-wrap:wrap; } .ih-contact-av{ width:52px; height:52px; } .ih-contact .ien-btn{ width:100%; } }

/* ========== MENU PINTAS (HP: satu panel ala aplikasi) ========== */
.ih-quicknav{ display:none; }
@media (max-width:768px){
  .imalah-home .ih-quicknav{ position:static; inset:auto; float:none; transform:none; display:block; width:auto; max-width:none; height:auto; overflow:visible; z-index:auto;
    margin:0 0 var(--ih-sec); padding:14px 8px 8px; border-radius:var(--ien-r-lg); }
  .ih-qn-head{ display:flex; align-items:center; gap:8px; margin:0; padding:0 8px 10px; font:600 16px/1.2 var(--ien-display); color:var(--ien-text); }
  .ih-qn-head .ih-ico{ width:18px; height:18px; color:var(--ien-blue); }
  .ih-qn-grid{ display:flex; flex-wrap:wrap; justify-content:center; row-gap:4px; }
  .ih-qn-grid > .ih-qn-item{ flex:0 0 calc(100% / var(--qn-cols,4)); }
  .ih-qn-item{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; min-height:44px; padding:8px 2px 6px;
    border-radius:14px; color:var(--ien-text); text-decoration:none; transition:transform .25s var(--ien-spring); }
  .ih-qn-item:active{ transform:scale(.92); }
  .ih-qn-ico{ display:grid; place-items:center; width:46px; height:46px; border-radius:15px; background:var(--qn-bg); color:var(--qn-fg);
    box-shadow:0 6px 12px -6px var(--qn-sh),inset 0 0 0 1px rgba(255,255,255,.6); }
  .ih-qn-c5 .ih-qn-ico{ width:44px; height:44px; border-radius:14px; }
  .ih-qn-ico .ih-ico{ width:22px; height:22px; }
  .ih-qn-label{ max-width:100%; font-size:11.5px; font-weight:800; line-height:1.2; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ih-qn-c5 .ih-qn-label{ font-size:11px; }
  .ih-menu{ display:none; }
}
@media (max-width:360px){ .ih-qn-label{ font-size:10.5px; } .ih-qn-ico{ width:42px; height:42px; } }
.ih-qn-t0{ --qn-bg:linear-gradient(145deg,#eaf2ff,#d3e5ff); --qn-fg:#1d4ed8; --qn-sh:rgba(29,78,216,.45); }
.ih-qn-t1{ --qn-bg:linear-gradient(145deg,#ffecef,#ffd4dc); --qn-fg:#d0142f; --qn-sh:rgba(208,20,47,.4); }
.ih-qn-t2{ --qn-bg:linear-gradient(145deg,#fff7df,#ffe8a8); --qn-fg:#b45309; --qn-sh:rgba(217,119,6,.4); }
.ih-qn-t3{ --qn-bg:linear-gradient(145deg,#e5f8ee,#c6efd8); --qn-fg:#15803d; --qn-sh:rgba(21,128,61,.4); }
.ih-qn-t4{ --qn-bg:linear-gradient(145deg,#f2ecff,#e0d4ff); --qn-fg:#6d28d9; --qn-sh:rgba(109,40,217,.4); }
.ih-qn-t5{ --qn-bg:linear-gradient(145deg,#e2f7f9,#c3edf2); --qn-fg:#0e7490; --qn-sh:rgba(14,116,144,.4); }
html.dark .ih-qn-ico{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
html.dark .ih-qn-t0{ --qn-bg:rgba(59,130,246,.16); --qn-fg:#93c5fd; } html.dark .ih-qn-t1{ --qn-bg:rgba(244,63,94,.16); --qn-fg:#fda4af; }
html.dark .ih-qn-t2{ --qn-bg:rgba(245,158,11,.16); --qn-fg:#fcd34d; } html.dark .ih-qn-t3{ --qn-bg:rgba(34,197,94,.16); --qn-fg:#86efac; }
html.dark .ih-qn-t4{ --qn-bg:rgba(139,92,246,.18); --qn-fg:#c4b5fd; } html.dark .ih-qn-t5{ --qn-bg:rgba(6,182,212,.16); --qn-fg:#67e8f9; }

/* ========== LAYANAN UNTUK SEKOLAH ========== */
.ih-units-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--ih-gap); }
.ih-unit{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:8px; padding:20px; color:var(--ien-text); text-decoration:none;
  transition:transform .4s var(--ien-ease),box-shadow .4s var(--ien-ease),border-color .3s; }
.ih-unit:active{ transform:scale(.98); }
.ih-unit-ic{ display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:#fff; background:var(--ien-gl); box-shadow:var(--ien-gl-in),0 10px 22px -10px var(--ien-blue); transition:transform .4s var(--ien-ease); }
.ih-unit-ic .ih-ico{ width:24px; height:24px; }
.ih-unit b{ margin-top:4px; font:600 17px/1.25 var(--ien-display); }
.ih-unit p{ flex:1; margin:0; font-size:13.5px; font-weight:600; line-height:1.5; color:var(--ien-soft); }
.ih-unit-go{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:13px; font-weight:800; color:var(--ien-blue); }
html.dark .ih-unit-go{ color:#7ab8ff; }
.ih-unit-go .ih-ico{ width:15px; height:15px; transition:transform .3s var(--ien-ease); }
@media (hover:hover){ .ih-unit:hover{ transform:translateY(-5px); box-shadow:var(--ien-gloss),var(--ien-sh-lg); border-color:var(--ien-blue-soft); }
  .ih-unit:hover .ih-unit-ic{ transform:rotate(-6deg) scale(1.06); } .ih-unit:hover .ih-unit-go .ih-ico{ transform:translateX(4px); } }
@media (max-width:560px){ .ih-unit{ display:grid; grid-template-columns:46px 1fr; column-gap:14px; row-gap:2px; padding:16px; }
  .ih-unit-ic{ grid-row:1 / span 3; width:46px; height:46px; border-radius:13px; } .ih-unit b{ margin-top:0; } }

/* ========== PAKET SEKOLAH & ORDER ========== */
.ih-offer{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ih-gap); }
.ih-offer-card{ display:flex; flex-direction:column; gap:12px; padding:clamp(20px,4vw,28px); transition:transform .4s var(--ien-ease),box-shadow .4s var(--ien-ease),border-color .3s; }
.ih-offer-card.is-main{ background:linear-gradient(135deg,var(--ien-pale),var(--ien-surface) 70%); border-color:var(--ien-blue-soft); }
html.dark .ih-offer-card.is-main{ border-color:#24406c; }
@media (hover:hover){ .ih-offer-card:hover{ transform:translateY(-5px); box-shadow:var(--ien-gloss),var(--ien-sh-lg); border-color:var(--ien-blue-soft); } }
.ih-offer-tag{ align-self:flex-start; padding:5px 11px; border-radius:50px; font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; background:var(--ien-pale); color:var(--ien-blue); box-shadow:inset 0 0 0 1px var(--ien-blue-soft); }
html.dark .ih-offer-tag{ color:#7ab8ff; box-shadow:none; }
.ih-offer-title{ margin:0; font:600 clamp(20px,2.4vw,25px)/1.2 var(--ien-display); color:var(--ien-text); }
.ih-offer-lead{ margin:0; font-size:14px; font-weight:600; line-height:1.6; color:var(--ien-soft); }
.ih-offer-list{ list-style:none; margin:2px 0 0; padding:0; display:grid; gap:8px; font-size:13.5px; font-weight:700; color:var(--ien-text); }
.ih-offer-list li{ display:flex; align-items:center; gap:8px; }
.ih-offer-list .ih-ico{ width:16px; height:16px; color:var(--ien-ok); }
.ih-offer-cta{ margin-top:auto; padding-top:6px; }
@media (max-width:760px){ .ih-offer{ grid-template-columns:1fr; } .ih-offer-cta .ien-btn{ width:100%; } }

/* ========== SLIDER POSTER ========== */
.ih-slider-viewport{ position:relative; }
.ih-slides{ display:flex; gap:var(--ih-gap); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  padding:4px 2px 12px; scrollbar-width:none; scroll-padding-inline:2px; }
.ih-slides::-webkit-scrollbar{ display:none; }
@media (max-width:640px){ .ih-slides{ margin-inline:calc(var(--ih-pad) * -1); padding-inline:var(--ih-pad); scroll-padding-inline:var(--ih-pad); } }
.ih-slide{ position:relative; display:block; flex:0 0 clamp(138px,40vw,184px); aspect-ratio:13/23; margin:0; border-radius:20px; overflow:hidden; scroll-snap-align:start;
  background:var(--ien-mist); box-shadow:0 2px 6px rgba(16,42,90,.06),0 18px 34px -18px rgba(16,42,90,.35); transition:transform .35s var(--ien-ease),box-shadow .35s; }
.ih-slide:active{ transform:scale(.97); }
.ih-slide img,.ih-slide video{ width:100%; height:100%; object-fit:cover; display:block; }
.ih-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.6),transparent 55%); pointer-events:none; }
.ih-slide-zoom{ display:block; width:100%; height:100%; padding:0; margin:0; border:0; background:none; cursor:zoom-in; }
.ih-caption{ position:absolute; left:10px; right:10px; bottom:10px; z-index:2; font-size:clamp(10.5px,2.8vw,12px); font-weight:800; line-height:1.35; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5); pointer-events:none; }
.ih-slide-link,.ih-vid-sound,.ih-vid-link{ position:absolute; z-index:3; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--ien-blue); box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:pointer; }
.ih-slide-link{ top:8px; right:8px; width:28px; height:28px; }
.ih-vid-sound{ top:8px; right:8px; width:32px; height:32px; opacity:.88; }
.ih-vid-sound.is-on{ background:var(--ien-blue); color:#fff; opacity:1; }
.ih-vid-link{ bottom:40px; right:8px; width:32px; height:32px; }
.ih-slide-link .ih-ico,.ih-vid-sound .ih-ico,.ih-vid-link .ih-ico{ width:15px; height:15px; }
.ih-vid-badge{ position:absolute; top:8px; left:8px; z-index:2; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(211,47,47,.92); }
.ih-vid-badge::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#fff; vertical-align:1px; animation:ih-rec 1.4s ease-in-out infinite; }
@keyframes ih-rec{ 50%{ opacity:.3; } }
.ih-nav{ position:absolute; top:50%; z-index:3; width:44px; height:44px; display:none; place-items:center; padding:0; border:1px solid var(--ien-border); border-radius:50%; cursor:pointer;
  background:var(--ien-chip); color:var(--ien-text); box-shadow:var(--ien-gloss),var(--ien-sh-lg); transform:translateY(-50%); transition:transform .2s; }
.ih-nav .ih-ico{ width:20px; height:20px; }
.ih-nav[hidden]{ display:none !important; }
.ih-nav-prev{ left:-6px; } .ih-nav-next{ right:-6px; }
@media (hover:hover) and (min-width:820px){ .ih-nav{ display:grid; } .ih-nav:hover{ transform:translateY(-50%) scale(1.08); } .ih-slide:hover{ transform:translateY(-5px) scale(1.02); } .ih-slide-dots{ display:none !important; } }
.ih-slide-dots{ display:flex; justify-content:center; gap:6px; margin-top:8px; }
.ih-slide-dots[hidden]{ display:none; }
.ih-slide-dots span{ width:6px; height:6px; border-radius:6px; background:var(--ien-border); transition:background .2s,width .25s var(--ien-ease); }
.ih-slide-dots span.active{ width:18px; background:var(--ien-blue); }
html.dark .ih-slide-dots span{ background:#3a3a3a; } html.dark .ih-slide-dots span.active{ background:var(--ien-blue-2); }
.ih-slides-empty{ margin:0; padding:32px 16px; text-align:center; font-size:.86rem; font-weight:700; color:var(--ien-soft); border:2px dashed var(--ien-border); border-radius:var(--ien-r-lg); }

/* ========== MENU PINTAS (desktop) ========== */
.ih-features{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--ih-gap); }
.ih-feature-card{ position:relative; overflow:hidden; isolation:isolate; flex:0 0 calc((100% - 2 * var(--ih-gap)) / 3); min-width:0; display:flex; flex-direction:column; align-items:center;
  padding:clamp(14px,3.6vw,20px) 8px clamp(12px,3vw,16px); border-radius:20px; color:var(--ien-text); text-align:center; text-decoration:none;
  transition:transform .3s var(--ien-ease),border-color .25s,box-shadow .3s; }
@media (min-width:600px){ .ih-feature-card{ flex-basis:calc((100% - 3 * var(--ih-gap)) / 4); } }
@media (min-width:900px){ .ih-feature-card{ flex-basis:calc((100% - 5 * var(--ih-gap)) / 6); } }
.ih-feature-card:active{ transform:scale(.96); }
.ih-feature-icon{ display:grid; place-items:center; width:clamp(46px,13vw,58px); height:clamp(46px,13vw,58px); margin:0 auto 10px; border-radius:16px;
  background:linear-gradient(135deg,var(--ien-pale),#dfeeff); box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(25,118,210,.45); transition:transform .3s var(--ien-ease),background .25s; }
html.dark .ih-feature-icon{ background:linear-gradient(135deg,#16294a,#1d3560); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.ih-feature-icon .ih-ico{ width:clamp(24px,6.6vw,30px); height:clamp(24px,6.6vw,30px); color:var(--ien-blue); transition:color .25s; }
html.dark .ih-feature-icon .ih-ico{ color:#7ab8ff; }
.ih-feature-name{ margin:0; max-width:100%; font-size:clamp(12px,3vw,14px); font-weight:800; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (hover:hover){ .ih-feature-card:hover{ transform:translateY(-5px); border-color:var(--ien-blue-soft); box-shadow:var(--ien-gloss),var(--ien-sh-lg); }
  .ih-feature-card:hover .ih-feature-icon{ transform:translateY(-3px) scale(1.06); background:var(--ien-gl); } .ih-feature-card:hover .ih-feature-icon .ih-ico{ color:#fff; } }

/* ========== AKUN MEMBER & TIM ========== */
.ih-mb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.ih-mb-card{ position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; gap:12px; min-width:0; padding:12px 14px; border-radius:20px; color:var(--ien-text); text-decoration:none;
  transition:border-color .2s,box-shadow .25s,transform .25s var(--ien-ease); }
.ih-mb-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--ien-blue),var(--ien-blue-2)); transform:scaleY(0); transform-origin:bottom; transition:transform .3s ease; }
.ih-mb-card:active{ transform:scale(.98); }
.ih-mb-av{ flex:none; width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--ien-pale); border:1px solid var(--ien-border); transition:transform .3s var(--ien-spring),box-shadow .3s; }
.ih-mb-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ih-mb-name{ font-size:14px; font-weight:800; line-height:1.3; overflow-wrap:anywhere; }
.ih-mb-handle{ font-size:12px; font-weight:600; color:var(--ien-soft); overflow-wrap:anywhere; }
.ih-mb-role{ align-self:flex-start; margin-top:3px; padding:2px 8px; border-radius:50px; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.ih-mb-role.is-admin{ background:#fff4dc; color:#b26a00; } .ih-mb-role.is-mod{ background:#e5f6ec; color:#1f7a45; }
html.dark .ih-mb-role.is-admin{ background:rgba(251,191,36,.15); color:#fbbf24; } html.dark .ih-mb-role.is-mod{ background:rgba(52,211,153,.15); color:#34d399; }
.ih-mb-go{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--ien-blue); background:var(--ien-pale); opacity:0; transform:translateX(-8px); transition:opacity .25s,transform .25s; }
.ih-mb-go .ih-ico{ width:14px; height:14px; }
@media (hover:hover){ .ih-mb-card:hover{ border-color:var(--ien-blue-soft); box-shadow:var(--ien-gloss),0 10px 24px -14px rgba(25,118,210,.45); transform:translateY(-3px); }
  .ih-mb-card:hover::before{ transform:scaleY(1); } .ih-mb-card:hover .ih-mb-av{ transform:scale(1.08); box-shadow:0 0 0 3px var(--ien-blue-soft); } .ih-mb-card:hover .ih-mb-go{ opacity:1; transform:none; } }
@media (max-width:480px){
  .ih-mb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .ih-mb-card{ flex-direction:column; text-align:center; gap:8px; padding:14px 10px 12px; }
  .ih-mb-av{ width:56px; height:56px; } .ih-mb-info{ align-items:center; } .ih-mb-role{ align-self:center; } .ih-mb-go{ display:none; }
}
.ih-empty{ margin:0; padding:22px 0; text-align:center; color:var(--ien-soft); font-size:14px; font-weight:700; }

/* ========== PAGINATION ========== */
.ih-pagination{ display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:6px; margin:clamp(14px,4vw,22px) 0 var(--ih-sec); }
.ih-page-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 12px; border-radius:13px;
  border:1px solid var(--ien-border); background:var(--ien-chip); box-shadow:var(--ien-gloss); color:var(--ien-soft); font-size:14px; font-weight:800; text-decoration:none;
  transition:border-color .2s,color .2s,transform .2s var(--ien-spring); }
.ih-page-btn:active{ transform:scale(.92); }
.ih-page-btn .ih-ico{ width:16px; height:16px; }
.ih-page-btn.active{ color:#fff; background:var(--ien-gl); border-color:transparent; box-shadow:var(--ien-gl-in),0 8px 18px -10px var(--ien-blue); }
@media (hover:hover){ .ih-page-btn:not(.active):hover{ border-color:var(--ien-blue-soft); color:var(--ien-blue); } }
.ih-page-dots{ display:inline-flex; align-items:center; justify-content:center; gap:3px; min-width:24px; }
.ih-page-dots span{ width:3px; height:3px; border-radius:50%; background:var(--ien-soft); }
.ih-page-info{ width:100%; margin-top:4px; text-align:center; font-size:12px; font-weight:700; color:var(--ien-soft); }

/* ========== LIGHTBOX ========== */
#ih-lightbox{ position:fixed; inset:0; z-index:99990; display:none; background:rgba(4,10,24,.94); }
#ih-lightbox.is-open{ display:block; animation:ih-fade .2s ease; }
@keyframes ih-fade{ from{ opacity:0; } }
#ih-lightbox-track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior:contain; }
#ih-lightbox-track::-webkit-scrollbar{ display:none; }
#ih-lightbox-track img{ flex:0 0 100%; width:100%; height:100%; object-fit:contain; scroll-snap-align:center; padding:calc(64px + env(safe-area-inset-top)) 8px calc(56px + env(safe-area-inset-bottom)); }
.ih-lb-btn{ position:absolute; z-index:2; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.15); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s,transform .2s,opacity .2s; }
.ih-lb-btn .ih-ico{ width:22px; height:22px; }
.ih-lb-btn:disabled{ opacity:.3; cursor:default; }
#ih-lightbox-close{ top:calc(12px + env(safe-area-inset-top)); right:12px; }
.ih-lb-nav{ top:50%; transform:translateY(-50%); display:none; }
.ih-lb-prev{ left:16px; } .ih-lb-next{ right:16px; }
@media (hover:hover) and (min-width:820px){ .ih-lb-nav{ display:grid; } .ih-lb-btn:not(:disabled):hover{ background:rgba(255,255,255,.28); } #ih-lightbox-close:hover{ transform:rotate(90deg); } }
#ih-lightbox-counter{ position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:2; transform:translateX(-50%); padding:5px 14px; border-radius:50px;
  background:rgba(255,255,255,.15); color:#fff; font-size:13px; font-weight:800; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
body.ih-noscroll{ overflow:hidden; }

/* fokus keyboard */
.imalah-home a:focus-visible,.imalah-home button:focus-visible{ outline:3px solid var(--ien-blue-2); outline-offset:3px; border-radius:10px; }
.ih-lb-btn:focus-visible{ outline:3px solid #90caf9; outline-offset:3px; }

/* HP / sentuh: efek berat dimatikan supaya gulir tetap 60fps */
@media (max-width:640px),(hover:none){
  .ih-hero-icon,.ih-kicker{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .ih-hero-icon{ background:rgba(255,255,255,.14); }
  .ih-ps-sum,.ih-pg,.ih-contact,.ih-unit,.ih-offer-card,.ih-mb-card,.ih-quicknav{ box-shadow:var(--ien-gloss),0 1px 3px rgba(16,42,90,.08); }
}
@media (prefers-reduced-motion:reduce){
  .imalah-home *,.imalah-home *::before,.imalah-home *::after,#ih-lightbox,#ih-lightbox *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .ih-pg-ring .v{ stroke-dasharray:var(--p) 100; } .ih-pg-bar i{ transform:none; }
}
/* ===== 23 Okt 2026 · ACARA TERBARU (slide setara) ===== */
@font-face{ font-family:'Amiri Quran LT'; src:url('/assets/tahfiz/amiri-quran-arabic.woff2') format('woff2'); font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
.ih-tone-teal  { --pc:#00897b; --pc2:#26a69a; --pcs:#e0f4f1; }
.ih-tone-purple{ --pc:#6d4fc2; --pc2:#9575cd; --pcs:#efeafb; }
html.dark .ih-tone-teal{ --pcs:rgba(38,166,154,.15); } html.dark .ih-tone-purple{ --pcs:rgba(149,117,205,.16); }
/* ===== 23 Okt 2026 · INFOGRAFIS RINGKAS (satu kartu, baris seragam) ===== */
.ih-st-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin-bottom:12px; }
.ih-st-sum{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; font-weight:800; color:var(--ien-text-2); }
.ih-st-sum > span b{ font:700 22px/1 var(--ien-display); color:var(--ien-text); font-variant-numeric:tabular-nums; margin-right:2px; }
.ih-st-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:700px){ .ih-st-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .ih-st-grid{ grid-template-columns:repeat(3,1fr); } }
.ih-st-pg{ display:flex; flex-direction:column; gap:10px; padding:14px; scroll-margin-top:120px; }
@media (max-width:699px){ .ih-st-grid{ gap:8px; } .ih-st-pg{ gap:8px; padding:12px; } .ih-st-q{ padding:8px 10px; gap:6px; } .ih-st-q .nx{ padding-top:6px; } }
.ih-st-top{ display:grid; grid-template-columns:36px minmax(0,1fr) auto auto; gap:10px; align-items:center; }
.ih-st-top .ih-st-ic{ width:36px; height:36px; }
.ih-st-pg .ih-st-n{ font-size:22px; min-width:0; }
.ih-st-pg .ih-st-bar{ height:5px; }
/* panel pendaftar: yang tampil + antrean berikutnya */
.ih-st-q{ display:grid; gap:8px; padding:10px; border-radius:14px; background:var(--ien-blue-soft); }
.ih-st-q .cur{ position:relative; height:40px; overflow:hidden; }
.ih-st-q .it{ position:absolute; inset:0; display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:center; opacity:0; transform:translate3d(0,70%,0); transition:opacity .45s var(--ien-ease), transform .55s var(--ien-ease); }
.ih-st-q .it.on{ opacity:1; transform:none; } .ih-st-q .it.out{ opacity:0; transform:translate3d(0,-70%,0); }
.ih-st-q .av{ width:34px; height:34px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(16,42,90,.4); transition:transform .5s var(--ien-spring); }
.ih-st-q .it:not(.on) .av{ transform:scale(.6); }
.ih-st-q .av img{ width:100%; height:100%; object-fit:cover; }
.ih-st-q .tx{ min-width:0; } .ih-st-q .tx b{ display:block; font-size:13.5px; font-weight:800; color:var(--ien-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ih-st-q .tx small{ display:block; font-size:11.5px; font-weight:700; color:var(--ien-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ih-st-q .ke{ padding:3px 9px; border-radius:99px; background:var(--ien-card); border:1px solid var(--ien-border); font-size:11px; font-weight:700; color:var(--ien-text-2); white-space:nowrap; }
.ih-st-q .ke b{ color:var(--ien-blue); font-weight:800; font-variant-numeric:tabular-nums; }
.ih-st-q .nx{ display:flex; align-items:center; gap:8px; min-width:0; padding-top:8px; border-top:1px dashed rgba(25,118,210,.2); }
.ih-st-q .nx .lbl{ flex:0 0 auto; font-size:10.5px; font-weight:800; color:var(--ien-blue); }
.ih-st-q .chips{ display:flex; flex-wrap:wrap; gap:5px; min-width:0; height:22px; overflow:hidden; transition:opacity .3s; }
.ih-st-q .chips.ganti{ opacity:0; }
.ih-st-q .chips span{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; height:22px; padding:2px 9px 2px 2px; border-radius:99px; background:var(--ien-card); font-size:11px; font-weight:700; color:var(--ien-text); white-space:nowrap; }
.ih-st-q .chips img{ width:18px; height:18px; border-radius:50%; flex:0 0 auto; background:var(--ien-pale); object-fit:cover; }
html.dark .ih-st-q .av{ box-shadow:0 0 0 2px var(--ien-card); }
@media (prefers-reduced-motion:reduce){ .ih-st-q .it,.ih-st-q .av,.ih-st-q .chips{ transition:none; } }
.ih-st-ls{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; }
/* ---- skema warna per program (var --pa utama, --pb aksen, --ps latar lembut) ---- */
.ih-st-pg{ position:relative; overflow:hidden; }
.ih-st-pg::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--pa),var(--pb)); }
.ih-st-pg .ih-st-ic{ background:var(--pa); background:linear-gradient(140deg,color-mix(in srgb,var(--pa) 78%,#fff),var(--pa)); color:#fff; box-shadow:0 6px 14px -8px var(--pa); }
.ih-st-pg .ih-st-n{ color:var(--pa); }
.ih-st-pg .ih-st-bar i{ background:linear-gradient(90deg,var(--pa),var(--pb)); }
.ih-st-pg .ih-st-go{ color:var(--pa); border-color:color-mix(in srgb,var(--pa) 28%,transparent); }
@media (hover:hover){ .ih-st-pg .ih-st-go:hover{ background:var(--ps); } }
.ih-st-pg .ih-st-q{ background:var(--ps); }
.ih-st-pg .ih-st-q .ke b,.ih-st-pg .ih-st-q .nx .lbl{ color:var(--pa); }
.ih-st-pg .ih-st-q .ke{ border-color:color-mix(in srgb,var(--pa) 22%,transparent); }
.ih-st-pg .ih-st-q .nx{ border-top-color:color-mix(in srgb,var(--pa) 24%,transparent); }
html.dark .ih-st-pg .ih-st-q{ background:color-mix(in srgb,var(--pa) 18%,transparent); }
html.dark .ih-st-pg .ih-st-n,html.dark .ih-st-pg .ih-st-go,html.dark .ih-st-pg .ih-st-q .ke b,html.dark .ih-st-pg .ih-st-q .nx .lbl{ color:color-mix(in srgb,var(--pa) 45%,#fff); }
/* ---- program sorotan: cincin & bayangan cahaya warna program, label acara terdekat, kilau lembut ---- */
.ih-st-pg.sorot{ box-shadow:0 0 0 2px var(--pa),0 22px 44px -20px var(--pa); box-shadow:0 0 0 2px color-mix(in srgb,var(--pa) 55%,transparent),0 22px 44px -20px color-mix(in srgb,var(--pa) 70%,transparent),0 0 34px -6px color-mix(in srgb,var(--pb) 40%,transparent); }
.ih-st-pg.sorot::before{ height:4px; z-index:2; }
.ih-st-pg.sorot{ background:linear-gradient(180deg,color-mix(in srgb,var(--pa) 8%,#fff) 0,#fff 65%); }
html.dark .ih-st-pg.sorot{ background:linear-gradient(180deg,color-mix(in srgb,var(--pa) 22%,#122038) 0,#122038 70%); }
.ih-st-pg.sorot > *{ position:relative; z-index:1; }
.ih-st-pg.sorot::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:45%; z-index:0; pointer-events:none; background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent); transform:translateX(-120%); animation:pgKilau 7s 1.2s ease-in-out infinite; }
@keyframes pgKilau{ 0%{ transform:translateX(-120%); } 22%,100%{ transform:translateX(330%); } }
html.dark .ih-st-pg.sorot::after{ background:linear-gradient(105deg,transparent,rgba(255,255,255,.1),transparent); }
.ih-st-sor{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; margin:2px 0 -2px; padding:4px 11px 4px 9px; border-radius:99px; background:var(--pa); background:linear-gradient(90deg,var(--pa),color-mix(in srgb,var(--pa) 75%,#fff)); color:#fff; font:700 12px/1.1 var(--ien-display); box-shadow:0 6px 14px -8px var(--pa); }
.ih-st-sor i{ position:relative; width:7px; height:7px; border-radius:50%; background:#ffd36a; }
.ih-st-sor i::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid #ffd36a; animation:sorDenyut 1.8s ease-out infinite; }
@media (min-width:700px){ .ih-st-pg.sorot{ transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce){ .ih-st-pg.sorot::after,.ih-st-sor i::after{ animation:none; } }
.ih-st-ls li{ display:grid; grid-template-columns:34px minmax(0,1fr) minmax(48px,17%) 42px 88px; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--ien-border); scroll-margin-top:120px; }
.ih-st-ls li:last-child{ border-bottom:0; }
@media (min-width:860px){ .ih-st-ls{ grid-template-columns:1fr 1fr; column-gap:28px; } .ih-st-ls li:nth-last-child(2):nth-child(odd){ border-bottom:0; } }
.ih-st-ic{ display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--ien-blue-soft); color:var(--ien-blue); }
.ih-st-ic .ih-ico{ width:17px; height:17px; }
.ih-st-nm{ min-width:0; } .ih-st-nm b{ display:block; font-size:14px; font-weight:800; line-height:1.3; color:var(--ien-text); white-space:normal; overflow-wrap:anywhere; }   /* 27 Okt: judul program tampil penuh (boleh 2–3 baris) */
.ih-st-nm small{ display:block; font-size:11.5px; font-weight:700; color:var(--ien-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ih-st-bar{ height:6px; border-radius:99px; background:var(--ien-border); overflow:hidden; }
.ih-st-bar i{ display:block; height:100%; width:var(--w); border-radius:inherit; background:linear-gradient(90deg,var(--ien-blue),var(--ien-blue-2)); transform-origin:0 50%; transform:scaleX(0); transition:transform 1.1s var(--ien-ease); }
.ih-st.in .ih-st-bar i{ transform:none; }
.ih-st-n{ min-width:34px; text-align:right; font:700 18px/1 var(--ien-display); color:var(--ien-text); font-variant-numeric:tabular-nums; }
.ih-st-go{ justify-self:end; display:inline-flex; align-items:center; gap:3px; padding:6px 10px; border-radius:99px; border:1px solid var(--ien-border); color:var(--ien-blue); font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; }
.ih-st-go .ih-ico{ width:12px; height:12px; }
@media (hover:hover){ .ih-st-go:hover{ border-color:var(--ien-blue); background:var(--ien-blue-soft); } }
@media (max-width:480px){ .ih-st-ls li{ grid-template-columns:30px minmax(0,1fr) auto auto; row-gap:6px; padding:9px 0; } .ih-st-bar{ grid-column:2 / -1; grid-row:2; } .ih-st-ic{ width:30px; height:30px; } }
.ih-st-rot{ position:relative; display:block; height:20px; margin-top:2px; overflow:hidden; }
.ih-st-rot .it{ position:absolute; inset:0; display:flex; align-items:center; gap:6px; font-size:11.5px; white-space:nowrap; opacity:0; transform:translate3d(0,100%,0); transition:opacity .4s var(--ien-ease), transform .5s var(--ien-ease); }
.ih-st-rot .it.on{ opacity:1; transform:none; } .ih-st-rot .it.out{ opacity:0; transform:translate3d(0,-100%,0); }
.ih-st-rot img{ width:18px; height:18px; flex:0 0 auto; border-radius:50%; background:var(--ien-pale); object-fit:cover; transition:transform .45s var(--ien-spring); }
.ih-st-rot .it:not(.on) img{ transform:scale(.4); }
.ih-st-rot b{ font-weight:800; color:var(--ien-text); overflow:hidden; text-overflow:ellipsis; flex:0 0 auto; min-width:0; max-width:66%; font-size:11.5px; }
.ih-st-rot em{ flex:1 1 0; font-style:normal; font-weight:700; color:var(--ien-text-2); overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ih-st-rot em::before{ content:'· '; }
@media (prefers-reduced-motion:reduce){ .ih-st-rot .it{ transition:none; } }
@media (prefers-reduced-motion:reduce){ .ih-st-bar i{ transition:none; transform:none; } }
.ih-acara{ margin:clamp(18px,4vw,28px) 0 var(--ih-sec); }
.ih-acara-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:0 0 12px; }
.ih-acara-t{ margin:2px 0 0; font:700 clamp(20px,5vw,28px)/1.15 var(--ien-display); color:var(--ien-text); }
.ih-acara-no{ font:600 13px/1 var(--ien-display); color:var(--ien-text-2); font-variant-numeric:tabular-nums; margin-right:4px; } .ih-acara-no b{ color:var(--ien-text); font-weight:700; }
.ih-acara-prog{ height:3px; margin:10px 2px 0; border-radius:99px; background:var(--ien-border); overflow:hidden; }
.ih-acara-prog i{ display:block; height:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--ien-blue); border-radius:inherit; }
.ih-acara-prog i.jeda{ opacity:.45; }
@media (max-width:480px){ .ih-acara-dots{ display:none; } }
.ih-acara-no{ white-space:nowrap; } .ih-acara-hd .ien-eyebrow{ white-space:nowrap; }
.ih-acara-nav{ display:flex; align-items:center; gap:6px; }
.ih-acara-nav > button{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--ien-border); background:var(--ien-card); color:var(--ien-text); cursor:pointer; }
.ih-acara-nav > button .ih-ico{ width:16px; height:16px; }
.ih-acara-dots{ display:flex; gap:5px; } .ih-acara-dots button{ width:8px; height:8px; padding:0; border:0; border-radius:99px; background:var(--ien-border); cursor:pointer; transition:width .3s var(--ien-ease), background .3s; }
.ih-acara-dots button[aria-selected="true"]{ width:22px; background:var(--ien-blue); }
.ih-acara-track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; border-radius:var(--ien-r-lg); }
.ih-acara-track::-webkit-scrollbar{ display:none; }
.ih-acara-track:focus-visible{ outline:3px solid var(--ien-blue); outline-offset:3px; }
.ih-ac{ scroll-snap-align:start; display:grid; grid-template-columns:1fr; overflow:hidden; border-radius:var(--ien-r-lg); background:var(--ien-card); border:1px solid var(--ien-border); box-shadow:var(--ien-gloss),var(--ien-sh); min-height:100%; }
.ih-ac{ position:relative; isolation:isolate; }
/* kabut foto tim IEN: memenuhi latar slide, bergeser pelan hanya di slide yang tampil (transform saja → ringan) */
/* ---- LATAR PENUH: foto tajam / gambar semi-blur + gradasi gelap profesional ---- */
.ih-ac-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:linear-gradient(135deg,#0d2c5e,#081a3a); }
.ih-ac-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; transform:scale(1.06); transition:transform 12s linear; }
.ih-ac.is-on .ih-ac-bg img{ transform:scale(1); }
.ih-ac-bg.tim{ background:radial-gradient(80% 90% at 60% 30%,#1c4f9a 0,#0d2c5e 55%,#071735 100%); }
.ih-ac-bg.tim img{ object-fit:contain; object-position:50% 0; height:auto; max-width:none; bottom:auto; top:4px; opacity:.95; }   /* HP: tim mengapit poster di atas */
.ih-ac-bg.blur img{ filter:blur(16px) saturate(1.2); transform:scale(1.2); opacity:.9; transition:none; }
.ih-ac-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(var(--gc),calc(var(--g) - .38)) 0,rgba(var(--gc),calc(var(--g) - .12)) 30%,rgba(var(--gc),calc(var(--g) + .1)) 52%,rgba(var(--gc),calc(var(--g) + .16)) 100%); }
@media (min-width:760px){
  .ih-ac-bg.tim img{ width:46%; left:31%; height:auto; top:10px; bottom:auto; object-position:50% 0; }   /* desktop: wajah tim di antara teks & poster */
  .ih-ac-bg::after{ background:linear-gradient(90deg,rgba(var(--gc),calc(var(--g) + .16)) 0,rgba(var(--gc),calc(var(--g) + .04)) 40%,rgba(var(--gc),calc(var(--g) - .26)) 70%,rgba(var(--gc),calc(var(--g) - .34)) 100%),linear-gradient(0deg,rgba(6,18,42,.45),rgba(6,18,42,0) 38%); }
}
.ih-ac{ --gc:6,18,42; } .ih-ac--tahfiz{ --gc:3,38,29; } .ih-ac--webinar{ --gc:12,22,66; }
.ih-ac.ih-ac--gelap.ih-ac--tahfiz{ background:#052e24; border-color:rgba(232,168,23,.35); }
.ih-ac.ih-ac--gelap.ih-ac--tahfiz .ih-ac-go{ background:linear-gradient(180deg,#14a777,#0b7a57); box-shadow:0 10px 22px -12px rgba(11,122,87,.9); }
.ih-ac.ih-ac--gelap.ih-ac--tahfiz .ih-ac-when .ih-ico{ color:#ffd36a; }
.ih-ac.ih-ac--gelap.ih-ac--webinar .ih-ac-go{ background:linear-gradient(180deg,#e0213d,#a50e25); box-shadow:0 10px 22px -12px rgba(208,20,47,.9); }
.ih-ac.ih-ac--gelap{ --g:.72; background:#0b2350; border-color:rgba(144,202,249,.28); color:#fff; }
.ih-ac.ih-ac--gelap.g-ringan{ --g:.58; } .ih-ac.ih-ac--gelap.g-pekat{ --g:.84; }
.ih-ac.ih-ac--gelap h3{ color:#fff; } .ih-ac.ih-ac--gelap p{ color:rgba(255,255,255,.8); }
.ih-ac.ih-ac--gelap .ih-ac-jenis{ color:rgba(255,255,255,.74); }
.ih-ac.ih-ac--gelap .ih-ac-when{ color:#fff; } .ih-ac.ih-ac--gelap .ih-ac-when .ih-ico{ color:#90caf9; }
.ih-ac.ih-ac--gelap .ih-ac-art{ background:transparent !important; }
.ih-ac.ih-ac--gelap .ih-ac-art::after,.ih-ac.ih-ac--gelap .ih-ac-art::before{ display:none; }
.ih-ac.ih-ac--gelap.ih-ac--tahfiz .ih-ac-art{ margin:12px 12px 0; border-radius:16px; box-shadow:0 18px 36px -18px rgba(0,0,0,.7); background:radial-gradient(90% 120% at 50% 110%,#16a36f 0,#0b7a57 45%,#064c38 100%) !important; }
@media (min-width:760px){ .ih-ac.ih-ac--gelap.ih-ac--tahfiz .ih-ac-art{ margin:16px 16px 16px 0; } }
.ih-ac.ih-ac--gelap .ih-ac-poster{ box-shadow:0 24px 44px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12); }
.ih-ac.ih-ac--gelap .ih-ac-sor{ background:linear-gradient(90deg,#f7c04a,#e8a817); color:#1d1300; box-shadow:0 8px 20px -10px rgba(232,168,23,.9); }
.ih-ac.ih-ac--gelap .ih-ac-sor i{ background:#7a4b00; } .ih-ac.ih-ac--gelap .ih-ac-sor i::after{ border-color:#7a4b00; }
.ih-ac.ih-ac--gelap .ih-ac-sor em{ color:#4a2e00; border-left-color:rgba(29,19,0,.25); }
.ih-ac.ih-ac--gelap .ih-cd-lbl{ color:rgba(255,255,255,.72); }
.ih-ac.ih-ac--gelap .ih-cd .u{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ih-ac.ih-ac--gelap .ih-cd .u-s{ background:linear-gradient(180deg,#1e88e5,#1565c0); box-shadow:none; }
.ih-ac.ih-ac--gelap .ih-cd.dekat .u{ background:rgba(232,137,12,.85); }
.ih-ac.ih-ac--gelap .ih-kursi .kt{ color:rgba(255,255,255,.72); } .ih-ac.ih-ac--gelap .ih-kursi .kt b{ color:#fff; } .ih-ac.ih-ac--gelap .ih-kursi .kt b i{ color:rgba(255,255,255,.6); }
.ih-ac.ih-ac--gelap .ih-kursi .kb{ background:rgba(255,255,255,.16); } .ih-ac.ih-ac--gelap .ih-kursi .tipis .kt b{ color:#ffc76b; }
.ih-ac.ih-ac--gelap.ih-ac--sorot{ border-color:rgba(247,192,74,.5); box-shadow:0 0 0 3px rgba(247,192,74,.14),0 24px 48px -26px rgba(6,18,42,.8); }
/* ---- poster utama di latar gelap: bingkai kaca semi-transparan, latar di belakangnya diredam supaya tidak bentrok ---- */
.ih-ac.ih-ac--gelap .ih-ac-poster{ height:88%; max-width:82%; border-radius:14px; opacity:.96; box-shadow:0 0 0 6px rgba(255,255,255,.14),0 0 0 7px rgba(255,255,255,.1),0 26px 50px -18px rgba(0,0,0,.8); }
.ih-ac.ih-ac--gelap.ih-ac--rubi .ih-ac-art::before{ display:block; content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(34% 52% at 50% 50%,rgba(6,18,42,.5),rgba(6,18,42,.18) 70%,rgba(6,18,42,0) 100%); }
@media (hover:hover){ .ih-ac.ih-ac--gelap .ih-ac-art:hover .ih-ac-poster{ opacity:1; } }
@media (max-width:759px){
  .ih-ac.ih-ac--gelap.ih-ac--rubi .ih-ac-art{ height:clamp(250px,74vw,320px); }   /* HP: poster lebih besar */
  .ih-ac.ih-ac--gelap .ih-ac-poster{ top:6%; bottom:6%; height:88%; }
  .ih-ac-bg.tim img{ top:auto; bottom:0; width:136%; left:-18%; object-position:50% 100%; }   /* tim menempel penuh sampai bawah kartu, wajah kiri-kanan mengapit poster */
}
/* ---- tombol perbesar di gambar acara ---- */
.ih-ac-zm{ position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; justify-content:flex-end; padding:10px; border:0; background:none; cursor:zoom-in; -webkit-tap-highlight-color:transparent; }
.ih-ac-zm span{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px 6px 9px; border-radius:99px; background:rgba(6,18,42,.55); color:#fff; font-size:12px; font-weight:800; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); transition:transform .3s var(--ien-spring), background .2s; }
.ih-ac-zm .ih-ico{ width:14px; height:14px; }
.ih-ac-poster,.ih-ac-foto{ transition:transform .5s var(--ien-ease), filter .3s; }
@media (hover:hover){ .ih-ac-zm:hover span{ transform:scale(1.06); background:rgba(25,118,210,.85); } .ih-ac-art:hover .ih-ac-poster{ transform:translateY(-3px) scale(1.025); } }
.ih-ac-zm:focus-visible span{ outline:3px solid #90caf9; outline-offset:2px; }
.ih-ac-art.zm-asal .ih-ac-poster,.ih-ac-art.zm-asal .ih-ac-foto{ visibility:hidden; }
/* ---- dialog perbesar ---- */
.ih-zm{ position:fixed; inset:0; z-index:99995; overflow:hidden; touch-action:none; }
.ih-zm[hidden]{ display:none; }
.ih-zm-bg{ position:absolute; inset:0; background:rgba(4,12,30,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; transition:opacity .38s ease; }
.ih-zm.buka .ih-zm-bg{ opacity:1; }
.ih-zm-pan{ position:absolute; inset:0; transform-origin:0 0; will-change:transform; }
.ih-zm-pan.halus{ transition:transform .32s cubic-bezier(.2,.9,.25,1); }
.ih-zm-img{ position:absolute; max-width:none; user-select:none; -webkit-user-select:none; border-radius:10px; box-shadow:0 30px 70px -20px rgba(0,0,0,.8); transform-origin:0 0; will-change:transform,clip-path; }
.ih-zm-img.lari{ transition:transform .52s cubic-bezier(.2,.9,.22,1), clip-path .52s cubic-bezier(.2,.9,.22,1), border-radius .52s; }
.ih-zm-x{ top:calc(12px + env(safe-area-inset-top)); right:12px; opacity:0; transform:scale(.6); transition:opacity .3s .15s, transform .4s .15s var(--ien-spring); }
.ih-zm-alat{ position:absolute; z-index:2; top:calc(14px + env(safe-area-inset-top)); left:50%; display:flex; align-items:center; gap:2px; padding:3px; border-radius:99px; background:rgba(255,255,255,.14); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transform:translate(-50%,-10px); transition:opacity .3s .2s, transform .4s .2s var(--ien-ease); }
.ih-zm-alat button{ width:36px; height:36px; border:0; border-radius:50%; background:none; color:#fff; font:700 20px/1 var(--ien-display); cursor:pointer; }
.ih-zm-alat button:hover{ background:rgba(255,255,255,.18); }
.ih-zm-alat b{ min-width:48px; text-align:center; font:700 13px/1 var(--ien-display); font-variant-numeric:tabular-nums; }
.ih-zm-cap{ position:absolute; z-index:2; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); width:min(560px,calc(100% - 24px)); display:flex; align-items:center; gap:12px; padding:10px 10px 10px 16px; border-radius:18px; background:rgba(255,255,255,.12); color:#fff; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); opacity:0; transform:translate(-50%,24px); transition:opacity .35s .22s, transform .5s .22s var(--ien-ease); }
.ih-zm-cap span{ flex:1; min-width:0; font:700 14px/1.3 var(--ien-display); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ih-zm-cap a{ flex:0 0 auto; }
.ih-zm.buka .ih-zm-x{ opacity:1; transform:none; } .ih-zm.buka .ih-zm-alat{ opacity:1; transform:translate(-50%,0); } .ih-zm.buka .ih-zm-cap{ opacity:1; transform:translate(-50%,0); }
.ih-zm.sembunyi-ui .ih-zm-cap,.ih-zm.sembunyi-ui .ih-zm-alat{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .ih-zm-img.lari,.ih-zm-pan.halus,.ih-zm-bg,.ih-zm-x,.ih-zm-alat,.ih-zm-cap,.ih-ac-bg img{ transition:none !important; } }
.ih-ac-tx,.ih-ac-art{ background:transparent; }
/* pergantian slide: teks masuk berurutan, panel gambar menyusut-pulih */
.ih-ac-tx > *{ transition:opacity .45s var(--ien-ease), transform .45s var(--ien-ease); }
.ih-ac:not(.is-on) .ih-ac-tx > *{ opacity:0; transform:translateY(10px); }
.ih-ac.is-on .ih-ac-tx > :nth-child(1){ transition-delay:.05s; } .ih-ac.is-on .ih-ac-tx > :nth-child(2){ transition-delay:.12s; } .ih-ac.is-on .ih-ac-tx > :nth-child(3){ transition-delay:.19s; }
.ih-ac.is-on .ih-ac-tx > :nth-child(4){ transition-delay:.26s; } .ih-ac.is-on .ih-ac-tx > :nth-child(5){ transition-delay:.33s; }
.ih-ac-art{ transition:transform .7s var(--ien-ease), opacity .7s var(--ien-ease); }
.ih-ac:not(.is-on) .ih-ac-art{ transform:scale(.94); opacity:.6; }
.ih-ac-tx{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:14px 16px 16px; min-width:0; }
.ih-ac-top{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ih-ac-sub2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ih-ac-jenis{ font-size:12px; font-weight:800; color:var(--ien-text-2); }
.ih-ac-st{ padding:2px 9px; border-radius:99px; font-size:11.5px; font-weight:800; background:var(--ien-blue-soft); color:var(--ien-blue); }
.ih-ac-st.buka{ background:#e5f6ec; color:#1e7d46; } .ih-ac-st.segera{ background:#fff4d6; color:#8a5a00; }
html.dark .ih-ac-st.buka{ background:rgba(76,196,126,.16); color:#8fe0b0; } html.dark .ih-ac-st.segera{ background:rgba(255,196,64,.14); color:#ffd47a; }
.ih-ac h3{ margin:0; font:700 clamp(18px,5vw,24px)/1.18 var(--ien-display); color:var(--ien-text); text-wrap:balance; }
.ih-ac p{ margin:0; color:var(--ien-text-2); font-size:13.5px; line-height:1.5; max-width:52ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ih-ac-when{ display:inline-flex; gap:6px; align-items:flex-start; font-size:12.5px; font-weight:800; color:var(--ien-text); } .ih-ac-when .ih-ico{ width:15px; height:15px; flex:0 0 auto; margin-top:1px; color:var(--ien-blue); }
.ih-ac-go{ margin-top:0; }
.ih-ac-aksi{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px; }
.ih-ac-pa{ min-height:44px; padding:10px 16px; border-radius:99px; border:1.5px solid var(--ien-border); background:var(--ien-card); color:var(--ien-blue); font:800 13.5px/1 var(--ien-font,inherit); }
.ih-ac-pa.on{ background:#e6f6ec; border-color:#bfe3c9; color:#1e7d46; }
.ih-ac.ih-ac--gelap .ih-ac-pa{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.32); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ih-ac.ih-ac--gelap .ih-ac-pa.on{ background:rgba(247,192,74,.2); border-color:rgba(247,192,74,.6); color:#ffe2a0; }
@media (hover:hover){ .ih-ac-pa:hover{ border-color:currentColor; } }
/* ---- SOROTAN: acara terdekat (badge, hitung mundur, sisa kursi) ---- */
.ih-ac--sorot{ border-color:rgba(25,118,210,.45); box-shadow:var(--ien-gloss),0 0 0 3px rgba(25,118,210,.12),0 22px 44px -26px rgba(16,58,120,.55); }
.ih-ac-sor{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 10px; border-radius:99px; background:linear-gradient(90deg,#0f4fa8,#1976d2); color:#fff; font:700 clamp(14px,3.8vw,16px)/1.1 var(--ien-display); box-shadow:0 8px 18px -10px rgba(15,79,168,.9); }
.ih-ac-sor i{ position:relative; width:9px; height:9px; border-radius:50%; background:#ffd36a; }
.ih-ac-sor i::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid #ffd36a; opacity:0; animation:sorDenyut 1.8s ease-out infinite; animation-play-state:paused; }
.ih-ac.is-on .ih-ac-sor i::after{ animation-play-state:running; }
.ih-ac-sor em{ font-style:normal; font-weight:600; padding-left:8px; margin-left:2px; border-left:1px solid rgba(255,255,255,.35); color:#ffe6a6; }
@keyframes sorDenyut{ from{ opacity:.9; transform:scale(.6); } to{ opacity:0; transform:scale(1.7); } }
.ih-cd{ display:flex; flex-direction:column; gap:5px; margin-top:2px; }
.ih-cd-lbl{ font-size:11.5px; font-weight:800; color:var(--ien-text-2); }
.ih-cd-box{ display:flex; gap:6px; }
.ih-cd .u{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:54px; padding:8px 6px 6px; border-radius:12px; background:linear-gradient(180deg,#123a73,#0c2a55); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 16px -10px rgba(12,42,85,.8); overflow:hidden; }
.ih-cd .u b{ display:block; font:700 clamp(22px,6vw,28px)/1 var(--ien-display); font-variant-numeric:tabular-nums; letter-spacing:.5px; }
.ih-cd .u b.ganti{ animation:cdGanti .42s cubic-bezier(.2,.9,.3,1.2); }
.ih-cd .u small{ font-size:10.5px; font-weight:700; color:rgba(255,255,255,.7); }
.ih-cd .u-s{ background:linear-gradient(180deg,#1976d2,#1259a8); }
@keyframes cdGanti{ from{ opacity:0; transform:translateY(-55%); } to{ opacity:1; transform:none; } }
.ih-cd.dekat .u{ background:linear-gradient(180deg,#b4570a,#8a3f05); }
.ih-kursi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px 12px; width:100%; max-width:440px; }
.ih-kursi .k{ display:grid; gap:4px; }
.ih-kursi .kt{ display:flex; justify-content:space-between; gap:8px; white-space:nowrap; font-size:11.5px; font-weight:700; color:var(--ien-text-2); }
.ih-kursi .kt b{ color:var(--ien-text); font-weight:800; font-variant-numeric:tabular-nums; } .ih-kursi .kt b i{ font-style:normal; font-weight:600; color:var(--ien-text-2); }
.ih-kursi .kb{ height:6px; border-radius:99px; background:var(--ien-border); overflow:hidden; }
.ih-kursi .kb i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#1976d2,#42a5f5); transform-origin:0 50%; transform:scaleX(var(--s)); }
.ih-ac.is-on .ih-kursi .kb i{ animation:kursiTipis 1.4s .4s cubic-bezier(.3,.8,.3,1) both; }
@keyframes kursiTipis{ from{ transform:scaleX(1); } to{ transform:scaleX(var(--s)); } }   /* bar menyusut dari penuh ke sisa kursi */
.ih-kursi .tipis .kb i{ background:linear-gradient(90deg,#e8890c,#f5b041); } .ih-kursi .tipis .kt b{ color:#b4570a; }
.ih-kursi .penuh .kt b{ color:#c62828; }
html.dark .ih-kursi .tipis .kt b{ color:#f5b041; }
@media (min-width:760px){ .ih-ac--sorot .ih-ac-tx{ gap:10px; } .ih-cd .u{ min-width:62px; } }
@media (max-width:359px){ .ih-cd .u{ min-width:0; flex:1; } }
@media (max-width:759px){ .ih-ac--sorot .ih-ac-art{ height:176px; } .ih-kursi{ grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion:reduce){ .ih-ac-sor i::after,.ih-cd .u b.ganti,.ih-ac.is-on .ih-kursi .kb i{ animation:none; } }
.ih-ac-art{ position:relative; order:-1; height:196px; overflow:hidden; background:linear-gradient(160deg,var(--ien-blue-soft),var(--ien-pale)); }
.ih-ac-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.ih-ac--rubi .ih-ac-art{ background:linear-gradient(180deg,#bfe6fb,#e9f7ff); } .ih-ac--rubi .ih-ac-img{ object-fit:contain; padding:10px; }
.ih-ac-ic{ position:absolute; inset:0; display:grid; place-items:center; color:var(--ien-blue); } .ih-ac-ic .ih-ico{ width:64px; height:64px; opacity:.85; }
@media (min-width:760px){
  .ih-acara-track{ grid-auto-columns:100%; }
  .ih-ac{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
  .ih-ac-art{ order:0; height:auto; min-height:250px; }
  .ih-ac-tx{ justify-content:center; padding:24px 26px; gap:9px; }
  .ih-ac p{ font-size:14.5px; }
}
/* --- foto pose (galeri tahfidz / unggahan): penuh, bergerak pelan (Ken Burns) saat tampil --- */
.ih-ac-foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 4%; transform:scale(1.02); transform-origin:50% 12%; }
.ih-ac.is-on .ih-ac-foto{ animation:acKen 9s ease-out both; }
.ih-ac-sinar{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,76,56,0) 55%,rgba(6,76,56,.35)); pointer-events:none; }
@keyframes acKen{ from{ transform:scale(1.12) translateY(2%); } to{ transform:scale(1.02); } }
/* --- Rubi: poster di atas kabut foto tim IEN (lembut, bergeser pelan) --- */
.ih-ac--rubi .ih-ac-art{ display:grid; place-items:center; background:linear-gradient(180deg,#d8eefc,#f2f9ff); }
.ih-ac--rubi .ih-ac-art::after{ content:''; position:absolute; inset:0; background:radial-gradient(75% 95% at 50% 50%,rgba(242,249,255,0) 40%,rgba(242,249,255,.6)); pointer-events:none; }
html.dark .ih-ac--rubi .ih-ac-art{ background:linear-gradient(180deg,#10345e,#0d2847); } html.dark .ih-ac--rubi .ih-ac-art::after{ background:radial-gradient(70% 90% at 50% 50%,rgba(13,40,71,0) 30%,rgba(13,40,71,.8)); }
.ih-ac-poster{ position:absolute; z-index:1; top:7%; bottom:7%; left:0; right:0; margin:auto; height:86%; width:auto; max-width:86%; object-fit:contain; border-radius:12px; box-shadow:0 18px 34px -16px rgba(16,40,80,.55); }
.ih-ac.is-on .ih-ac-poster{ animation:acPoster .8s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes acPoster{ from{ opacity:0; transform:translateY(14px) rotate(-1.5deg) scale(.97); } }
.ih-ac--rubi .ih-ac-img{ z-index:1; }
@media (max-width:759px){ .ih-ac-poster{ top:6%; bottom:6%; height:88%; } }
/* --- seni Lomba Tahfidz: dua sosok percaya diri (ikhwan bersedekap, akhwat berhijab) --- */
.ih-ac--tahfiz .ih-ac-art{ background:radial-gradient(90% 120% at 50% 110%,#16a36f 0,#0b7a57 45%,#064c38 100%); }
.ih-ac--tahfiz .ih-ac-art::before{ content:''; position:absolute; inset:0; opacity:.13;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E") 0 0/64px 64px; }
.tz-cahaya{ position:absolute; left:50%; bottom:-30%; width:120%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side,rgba(255,224,138,.55),rgba(255,224,138,0)); }
.tz-ayat{ position:absolute; left:0; right:0; top:10px; text-align:center; direction:rtl; font:400 clamp(17px,4.6vw,24px)/1.5 'Amiri Quran LT','Amiri','Traditional Arabic',serif; color:#ffe08a; text-shadow:0 2px 10px rgba(0,0,0,.25); }
.tz-sosok{ position:absolute; bottom:0; height:80%; aspect-ratio:3/4; }
.tz-sosok.ikhwan{ left:calc(50% - 30%); } .tz-sosok.akhwat{ right:calc(50% - 30%); }
.tz-sosok img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:50% 100%; z-index:1; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.tz-sosok img + svg{ display:none; }
.tz-sosok svg{ position:absolute; inset:0; width:100%; height:100%; fill:rgba(255,255,255,.92); filter:drop-shadow(0 10px 18px rgba(0,0,0,.3)); }
.tz-sosok.akhwat svg{ fill:rgba(255,240,214,.95); } .tz-sosok svg .tg{ fill:#e8a817; }
.tz-bubble{ position:absolute; left:50%; top:36%; margin-left:-44px; padding:6px 12px; border-radius:14px 14px 14px 4px; background:#fff; color:#0b4f45; font:700 14px/1 var(--ien-display); box-shadow:0 10px 22px -10px rgba(0,0,0,.45); }
@media (min-width:760px){ .tz-sosok{ height:80%; } .tz-sosok.ikhwan{ left:22%; } .tz-sosok.akhwat{ right:22%; } .tz-ayat{ top:20px; } .tz-bubble{ top:40%; margin-left:-50px; font-size:16px; } }
.ih-ac.is-on .tz-sosok{ animation:tzNaik .9s cubic-bezier(.2,.9,.25,1.1) both; } .ih-ac.is-on .tz-sosok.akhwat{ animation-delay:.15s; }
.ih-ac.is-on .tz-cahaya{ animation:tzCahaya 3.2s ease-in-out infinite alternate; }
.ih-ac.is-on .tz-bubble{ animation:tzPop .6s .7s cubic-bezier(.2,.9,.3,1.4) both, tzGoyang 2.6s 1.4s ease-in-out infinite; }
.ih-ac.is-on .tz-ayat{ animation:tzMuncul 1s .2s ease both; }
@keyframes tzNaik{ from{ opacity:0; transform:translateY(26%); } }
@keyframes tzCahaya{ from{ opacity:.7; transform:translateX(-50%) scale(.94); } to{ opacity:1; transform:translateX(-50%) scale(1.04); } }
@keyframes tzPop{ from{ opacity:0; transform:scale(.4) rotate(-8deg); } }
@keyframes tzGoyang{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-4deg) translateY(-2px); } }
@keyframes tzMuncul{ from{ opacity:0; transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce){ .ih-ac *{ animation:none !important; } .ih-ac-tx > *,.ih-ac-art{ transition:none !important; opacity:1 !important; transform:none !important; } .ih-acara-dots button{ transition:none; } }

/* ===== 29 Okt 2026 · AKUN MEMBER: slide menyamping + lapisan "semua member" ===== */
.ih-mb-all{ cursor:pointer; font:inherit; font-size:13px; font-weight:800; color:var(--ien-text); gap:6px; }
.ih-mb-all .ih-ico:last-child{ width:14px; height:14px; color:var(--ien-blue); }
.ih-mbs{ --w:92px; --av:60px; position:relative; margin-inline:calc(var(--ih-pad) * -1); }
@media (min-width:720px){ .ih-mbs{ --w:118px; --av:72px; } }
/* 29 Okt 2026 (v3): hanya foto profil yang "hidup" — tanpa kotak kartu. Foto aktif membesar di tengah dengan cincin berputar,
   tetangga mengecil & memudar sesuai jaraknya, semua foto melayang pelan bergantian. Nama tampil di bawah untuk foto aktif. */
.ih-mbs-track{ list-style:none; margin:0; display:flex; align-items:center; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:36px calc(50% - var(--w) / 2) 34px; scrollbar-width:none; -webkit-overflow-scrolling:touch; outline:none; }
.ih-mbs-track::-webkit-scrollbar{ display:none; }
.ih-mbs-it{ flex:0 0 var(--w); display:flex; justify-content:center; scroll-snap-align:center; }
.ih-mbs-card{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ien-text); text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:transform .55s var(--ien-spring,cubic-bezier(.2,.9,.3,1.2)),opacity .4s ease,filter .4s ease; }
.ih-mbs-ava{ position:relative; display:block; width:var(--av); height:var(--av); border-radius:50%; animation:ihMbFloat 4.2s ease-in-out infinite alternate; animation-delay:calc(var(--i,0) * -.7s); }
.ih-mbs-ava img{ position:relative; z-index:1; width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--ien-pale); border:3px solid var(--ien-card,#fff);
  box-shadow:0 10px 22px -12px rgba(16,42,90,.55); }
.ih-mbs-ava::before{ content:""; position:absolute; inset:-4px; border-radius:50%; background:conic-gradient(from 0deg,var(--ien-blue),#7cc4ff,#f5a524,var(--ien-blue)); opacity:0; transition:opacity .4s ease; }
.ih-mbs-ava::after{ content:""; position:absolute; inset:-10px; border-radius:50%; background:radial-gradient(circle,rgba(66,165,245,.35),transparent 70%); opacity:0; transition:opacity .4s ease; }
.ih-mbs-on{ position:absolute; z-index:2; right:2px; bottom:2px; width:14px; height:14px; border-radius:50%; background:#22c55e; border:2.5px solid var(--ien-card,#fff); }
.ih-mbs-on::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid #22c55e; animation:ihMbPing 2s ease-out infinite; }
.ih-mbs-nm,.ih-mbs-un,.ih-mbs-meta{ display:block; max-width:var(--w); font-size:12px; font-weight:800; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ih-mbs-un,.ih-mbs-meta{ display:none; }
/* dengan JS: ukuran & keburaman menurut jarak dari tengah (data-d), nama pindah ke keterangan bersama di bawah */
.ih-mbs.js .ih-mbs-nm{ display:none; }
.ih-mbs.js .ih-mbs-it[data-d="0"] .ih-mbs-card{ transform:scale(1.42); z-index:2; }
.ih-mbs.js .ih-mbs-it[data-d="0"] .ih-mbs-ava::before{ opacity:1; animation:ihMbSpin 5s linear infinite; }
.ih-mbs.js .ih-mbs-it[data-d="0"] .ih-mbs-ava::after{ opacity:1; animation:ihMbGlow 2.6s ease-in-out infinite; }
.ih-mbs.js .ih-mbs-it[data-d="1"] .ih-mbs-card{ transform:scale(.92); opacity:.85; }
.ih-mbs.js .ih-mbs-it[data-d="2"] .ih-mbs-card{ transform:scale(.74); opacity:.55; filter:saturate(.75); }
.ih-mbs.js .ih-mbs-it[data-d="3"] .ih-mbs-card{ transform:scale(.6); opacity:.3; filter:saturate(.5) blur(.4px); }
@keyframes ihMbFloat{ from{ transform:translateY(3px); } to{ transform:translateY(-5px); } }
@keyframes ihMbSpin{ to{ transform:rotate(360deg); } }
@keyframes ihMbGlow{ 50%{ opacity:.35; transform:scale(1.08); } }
@keyframes ihMbPing{ 0%{ opacity:.8; transform:scale(1); } 100%{ opacity:0; transform:scale(2); } }
.ih-mbs-cap{ display:none; min-height:56px; margin-top:0; text-align:center; transition:opacity .25s ease,transform .25s ease; }
.ih-mbs.js .ih-mbs-cap{ display:block; }
.ih-mbs-cap.ganti{ opacity:0; transform:translateY(6px); }
.ih-mbs-cap b{ display:block; padding:0 16px; font-size:16px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ih-mbs-cap small{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:4px; font-size:12px; font-weight:700; color:var(--ien-soft); }
.ih-mbs-cap small span{ padding:2px 9px; border-radius:99px; background:var(--ien-pale); }
.ih-mbs-cap small .lv{ color:var(--ien-blue); font-weight:800; }
.ih-mbs-nav{ position:absolute; top:calc(36px + var(--av) / 2 - 20px); z-index:3; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--ien-border); background:var(--ien-chip,#fff);
  color:var(--ien-blue); box-shadow:var(--ien-gloss),0 8px 18px -12px rgba(16,42,90,.45); cursor:pointer; transition:transform .2s var(--ien-spring); }
.ih-mbs-nav:active{ transform:scale(.9); }
.ih-mbs-nav .ih-ico{ width:18px; height:18px; }
.ih-mbs-nav.prev{ left:12px; } .ih-mbs-nav.next{ right:12px; }
@media (max-width:719px){ .ih-mbs-nav{ display:none; } }
.ih-mbs-prog{ display:block; width:min(120px,34%); height:3px; margin:10px auto 0; border-radius:99px; background:var(--ien-border); overflow:hidden; }
.ih-mbs-prog i{ display:block; height:100%; width:100%; border-radius:inherit; background:var(--ien-blue); transform-origin:left; transform:scaleX(0); }

.ih-ml{ position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-end; justify-content:center; }
.ih-ml[hidden]{ display:none; }
.ih-ml-bg{ position:absolute; inset:0; background:rgba(9,20,40,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:ihMlBg .25s ease both; }
.ih-ml-panel{ position:relative; display:flex; flex-direction:column; width:100%; max-width:640px; height:min(88dvh,760px); border-radius:24px 24px 0 0; background:var(--ien-card,#fff); color:var(--ien-text);
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.4); animation:ihMlIn .38s var(--ien-spring,cubic-bezier(.2,.9,.3,1.2)) both; padding-bottom:env(safe-area-inset-bottom); }
.ih-ml.tutup .ih-ml-panel{ animation:ihMlOut .22s ease forwards; } .ih-ml.tutup .ih-ml-bg{ animation:ihMlBg .22s ease reverse forwards; }
@keyframes ihMlBg{ from{ opacity:0; } } @keyframes ihMlIn{ from{ transform:translateY(100%); } } @keyframes ihMlOut{ to{ transform:translateY(100%); } }
@media (min-width:720px){ .ih-ml{ align-items:center; padding:24px; } .ih-ml-panel{ border-radius:24px; height:min(80dvh,720px); }
  @keyframes ihMlIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } } @keyframes ihMlOut{ to{ opacity:0; transform:translateY(16px) scale(.98); } } }
.ih-ml-hd{ position:relative; display:flex; align-items:center; gap:12px; padding:18px 18px 10px; }
.ih-ml-grip{ position:absolute; top:7px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:99px; background:var(--ien-border); }
@media (min-width:720px){ .ih-ml-grip{ display:none; } }
.ih-ml-tt{ flex:1; min-width:0; } .ih-ml-tt h2{ margin:0; font:700 19px/1.2 var(--ien-display,inherit); } .ih-ml-tt small{ font-size:12.5px; font-weight:700; color:var(--ien-soft); }
.ih-ml-x{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--ien-border); background:var(--ien-pale); color:var(--ien-text); cursor:pointer; }
.ih-ml-x .ih-ico{ width:16px; height:16px; }
.ih-ml-cari{ display:flex; align-items:center; gap:10px; margin:0 18px 8px; padding:0 14px; height:46px; border-radius:14px; border:1.5px solid var(--ien-border); background:var(--ien-pale); }
.ih-ml-cari:focus-within{ border-color:var(--ien-blue); box-shadow:0 0 0 4px var(--ien-blue-soft,rgba(66,165,245,.2)); }
.ih-ml-cari .ih-ico{ width:17px; height:17px; color:var(--ien-soft); }
.ih-ml-cari input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--ien-text); font:700 15px var(--ien-font,inherit); }
.ih-ml-sc{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.ih-ml-list{ list-style:none; margin:0; padding:4px 10px 6px; }
.ih-ml-row{ display:grid; grid-template-columns:44px minmax(0,1fr) auto 16px; align-items:center; gap:12px; padding:10px 8px; border-radius:14px; color:var(--ien-text); text-decoration:none; animation:ihMlRow .3s ease both; }
.ih-ml-row + .ih-ml-row{ border-top:1px solid var(--ien-border); }
@keyframes ihMlRow{ from{ opacity:0; transform:translateY(6px); } }
@media (hover:hover){ .ih-ml-row:hover{ background:var(--ien-pale); } }
.ih-ml-row img{ width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--ien-pale); }
.ih-ml-row b{ display:block; font-size:14.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ih-ml-row small{ display:block; font-size:12px; font-weight:600; color:var(--ien-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ih-ml-row .lv{ text-align:right; font-size:11px; font-weight:800; color:var(--ien-soft); line-height:1.3; }
.ih-ml-row .lv b{ font-size:13px; color:var(--ien-blue); margin-bottom:1px; }
.ih-ml-row .ih-ico{ width:14px; height:14px; color:var(--ien-soft); }
.ih-ml-st{ margin:0; padding:12px; text-align:center; font-size:13px; font-weight:700; color:var(--ien-soft); }
.ih-ml-st:empty{ display:none; }
html.ih-ml-on{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .ih-mbs-card,.ih-mbs-ava,.ih-mbs-ava::before,.ih-mbs-ava::after,.ih-mbs-on::after,.ih-ml-panel,.ih-ml-bg,.ih-ml-row{ transition:none !important; animation:none !important; } }