/* GC v2 */
/* Google Fonts dimuat di layout.php — tidak perlu @import di sini */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #F5F9F7; color: #1A2B24; line-height: 1.65; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* Tokens */
:root {
  --g9:#062318; --g8:#0A3828; --g7:#135C42; --g6:#1A7A58; --g5:#22A070;
  --g4:#68C99B; --g3:#A8E0C2; --g2:#D4F0E3; --g1:#EDF9F3;
  --amber:#E8A030; --amber-bg:#FEF4E0; --amber-d:#7A4E0C;
  --purple:#6C5CE7; --purple-bg:#F0EFFE; --purple-d:#3A2DAA;
  --rose:#E8395A; --rose-bg:#FEE8EC; --rose-d:#961832;
  --ink:#1A2B24; --ink2:#3A5044; --ink3:#6B7F75; --ink4:#9BB0A7;
  --line:#DFE9E4; --bg:#F5F9F7; --white:#FFFFFF;
  --r:16px; --rm:12px; --rs:8px; --rxs:6px;
  --sh: 0 1px 3px rgba(10,56,40,.06), 0 4px 16px rgba(10,56,40,.06);
  --sh-lg: 0 8px 32px rgba(10,56,40,.13);
}

/* Layout */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap-sm { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.section { padding: 60px 0; }
.section-sm { padding: 40px 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.fw { flex-wrap: wrap; }

/* Typography */
h1 { font-family: 'Lora',serif; font-size: clamp(1.8rem,4vw,2.7rem); font-weight: 600; line-height: 1.15; color: var(--g9); }
h2 { font-family: 'Lora',serif; font-size: clamp(1.25rem,2.5vw,1.65rem); font-weight: 600; line-height: 1.2; color: var(--g9); }
h3 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.eyebrow { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--g5); }
.muted { color: var(--ink3); }
.small { font-size: .85rem; }
.xs { font-size: .76rem; }
.serif { font-family: 'Lora',serif; }

/* Navbar */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(6,35,24,.96); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-inner { display: flex; align-items: center; gap: 8px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; color: #fff; letter-spacing: -.01em; flex-shrink: 0; }
.brand-ico { width: 32px; height: 32px; background: var(--g5); border-radius: 9px; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.nav-menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-menu a { color: rgba(255,255,255,.65); font-size: .88rem; font-weight: 500; padding: 7px 11px; border-radius: 8px; transition: all .15s; white-space: nowrap; }
.nav-menu a:hover, .nav-menu a.act { color: #fff; background: rgba(255,255,255,.1); }
.nav-menu .nav-race { color: var(--amber); }
.nav-drop { position: relative; }
.nav-drop-trig { display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font: inherit; color: rgba(255,255,255,.65); font-size: .88rem; font-weight: 500; padding: 7px 11px; border-radius: 8px; transition: all .15s; }
.nav-drop-trig:hover, .nav-drop.act .nav-drop-trig, .nav-drop.open .nav-drop-trig { color: #fff; background: rgba(255,255,255,.1); }
.nav-drop-caret { font-size: .65rem; transition: transform .15s; }
.nav-drop.open .nav-drop-caret { transform: rotate(180deg); }
.nav-drop-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 170px; background: var(--g9, #062318); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 6px; box-shadow: 0 12px 28px rgba(0,0,0,.35); z-index: 200; }
.nav-drop.open .nav-drop-menu { display: flex; flex-direction: column; gap: 2px; }
.nav-drop-menu a { padding: 8px 10px; border-radius: 7px; }
.nav-bell { position: relative; }
.nav-bell .dot { position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; background: var(--amber); border-radius: 50%; border: 2px solid var(--g9); }
.nav-me { display: flex; align-items: center; gap: 0; padding: 4px !important; }
.nav-tog { display: none; background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; padding: 6px; margin-left: auto; }
@media(max-width:840px){
  .nav-tog{display:block}
  .nav-menu{display:none;position:fixed;top:60px;left:0;right:0;background:var(--g9);flex-direction:column;align-items:stretch;padding:10px 20px 18px;gap:2px;border-bottom:1px solid rgba(255,255,255,.08);z-index:999}
  .nav-menu.open{display:flex}
  .nav-menu a{padding:10px 12px}
  .nav-drop-trig{width:100%;justify-content:space-between;padding:10px 12px}
  .nav-drop-menu{position:static;box-shadow:none;border:none;background:rgba(255,255,255,.04);margin:2px 0 4px 10px}
}

/* Buttons */
.btn { display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:99px;font-weight:600;font-size:.9rem;border:1.5px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1; }
.btn-primary { background:var(--g6);color:#fff;border-color:var(--g6); }
.btn-primary:hover { background:var(--g7); }
.btn-outline { background:transparent;color:var(--g6);border-color:var(--g6); }
.btn-outline:hover { background:var(--g1); }
.btn-white { background:#fff;color:var(--g8); }
.btn-white:hover { background:var(--g2); }
.btn-amber { background:var(--amber);color:#fff;border-color:var(--amber); }
.btn-amber:hover { background:#d4911f; }
.btn-ghost { background:transparent;color:var(--ink3);border-color:var(--line); }
.btn-ghost:hover { border-color:var(--g5);color:var(--g6); }
.btn-danger { background:#FFF0F0;color:#A32D2D;border-color:#FAD0D0; }
.btn-sm { padding:6px 14px;font-size:.82rem; }
.btn-xs { padding:4px 10px;font-size:.76rem; }
.btn-full { width:100%;justify-content:center; }
.btn:disabled { opacity:.45;pointer-events:none; }

/* Cards */
.card { background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden; }
.card-body { padding:20px; }
.card-lift { transition:transform .18s,box-shadow .18s; }
.card-lift:hover { transform:translateY(-3px);box-shadow:var(--sh-lg); }

/* Material card */
.mat-card { display:flex;flex-direction:column;cursor:pointer; }
.mat-thumb { width:100%;aspect-ratio:16/9;object-fit:cover; }
.mat-thumb-empty { width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:2.8rem; }
.mat-card .card-body { flex:1;display:flex;flex-direction:column; }
.mat-card h3 { margin:8px 0 5px;line-height:1.35; }
.mat-card-foot { display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line); }

/* === Series "book" covers (A5 ratio ≈ 0.707) === */
.book-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:40px 36px;max-width:680px; }
@media(max-width:560px){ .book-grid{ gap:18px 14px;max-width:100%; } .book-cover-empty .bc-emoji{ font-size:1.8rem; } .book-cover-empty .bc-name{ font-size:.78rem; } .book-name{ font-size:.85rem; } }
.book-item { display:block;text-decoration:none;color:inherit; }
.book-cover { position:relative;aspect-ratio:.707;border-radius:3px 9px 9px 3px;overflow:hidden;background:var(--g2);box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 18px rgba(10,35,25,.16);transition:transform .2s ease,box-shadow .2s ease; }
.book-item:hover .book-cover { transform:translateY(-5px) rotate(-1deg);box-shadow:0 2px 3px rgba(0,0,0,.1),0 16px 30px rgba(10,35,25,.24); }
.book-cover::before { content:'';position:absolute;left:0;top:0;bottom:0;width:9px;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0));z-index:2; }
.book-cover img { width:100%;height:100%;object-fit:cover;display:block; }
.book-cover-empty { width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 12px;gap:8px; }
.book-cover-empty .bc-emoji { font-size:2.9rem; }
.book-cover-empty .bc-name { font-weight:700;font-size:1rem;line-height:1.35;color:rgba(6,35,24,.8); }
.book-caption { margin-top:10px; }
.book-name { font-weight:700;font-size:1.05rem;line-height:1.3;margin-bottom:4px; }
.book-cover-lg { width:100%;max-width:230px; }
@media(min-width:700px){ .book-cover-lg{ width:230px; } }

/* Series page layout: cover left, vertical material menu right */
.series-page-layout { display:flex;gap:56px;align-items:flex-start;flex-wrap:wrap;margin-bottom:36px; }
.series-cover-col { flex:0 0 200px;max-width:200px; }
.series-menu-col { flex:1;min-width:260px; }
.series-desc { font-size:14px; }
.series-mat-full { max-width:720px; }
.series-mat-list { display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line); }
.series-mat-item { display:flex;align-items:center;gap:14px;padding:16px 4px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line);transition:background .15s; }
.series-mat-item:hover { background:var(--g1); }
.series-mat-num { flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--g2);color:var(--g7);font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center; }
.series-mat-info { flex:1;min-width:0; }
.series-mat-title { display:block;font-weight:600;margin-bottom:3px; }
.series-mat-arrow { flex-shrink:0;color:var(--g4); }
@media(max-width:700px){ .series-page-layout{ gap:0; } .series-cover-col{ flex:0 0 100%;width:auto;max-width:190px;margin:0 auto 22px; } .series-menu-col{ flex:0 0 100%; } }
.mat-locked { position:relative; }
.mat-locked .mat-lock-overlay { position:absolute;inset:0;background:linear-gradient(to top, rgba(255,255,255,.97) 0%,transparent 55%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;pointer-events:none; }

/* Badge */
.badge { display:inline-block;font-size:.73rem;font-weight:700;padding:3px 10px;border-radius:99px; }
.b-green { background:var(--g2);color:var(--g7); }
.b-amber { background:var(--amber-bg);color:var(--amber-d); }
.b-purple { background:var(--purple-bg);color:var(--purple-d); }
.b-rose { background:var(--rose-bg);color:var(--rose-d); }
.b-gray { background:#EEF2EF;color:var(--ink2); }
.b-church { background:var(--g2);color:var(--g8); }
.b-indep { background:var(--amber-bg);color:var(--amber-d); }

/* Avatar */
.ava { border-radius:50%;object-fit:cover;background:var(--g2);display:inline-block;flex-shrink:0; }
.ava-stack { display:flex;align-items:center; }
.ava-stack .ava { border:2px solid #fff;margin-left:-8px; }
.ava-stack .ava:first-child { margin-left:0; }
.ava-more { font-size:.76rem;color:var(--ink3);margin-left:8px; }
/* Avatar emoji style */
.ava-ico { border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--g2); }

/* Forms */
.form-group { margin-bottom:18px; }
.form-group label { display:block;font-size:.85rem;font-weight:600;color:var(--ink2);margin-bottom:6px; }
.form-group input,.form-group select,.form-group textarea { display:block;width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--rm);background:#fff;color:var(--ink);transition:border-color .15s; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none;border-color:var(--g5);box-shadow:0 0 0 3px rgba(34,160,112,.1); }
.form-group textarea { resize:vertical;min-height:90px; }
.form-note { font-size:.8rem;color:var(--ink3);margin-top:5px; }
.form-warn { background:var(--amber-bg);color:var(--amber-d);border-radius:var(--rm);padding:10px 14px;font-size:.84rem;margin:10px 0; }
.form-info { background:var(--g1);color:var(--g7);border-radius:var(--rm);padding:10px 14px;font-size:.84rem;margin:10px 0; }
.form-err { background:#FFF0F0;color:#A32D2D;border-radius:var(--rm);padding:10px 14px;font-size:.84rem;margin:10px 0; }
/* flash modal — lihat init.php flash_show() */

/* Progress / Level */
.level-bar { background:var(--g1);border-radius:99px;height:9px;overflow:hidden; }
.level-bar span { display:block;height:100%;background:linear-gradient(90deg,var(--g5),var(--g4));border-radius:99px; }
.level-badge { display:inline-flex;align-items:center;gap:8px;background:var(--g9);color:var(--g3);font-size:.82rem;font-weight:700;padding:6px 14px;border-radius:99px; }
.level-badge .star { color:var(--amber); }

/* Stars (rating) */
.stars { display:inline-flex;gap:3px; }
.star-btn { background:none;border:none;cursor:pointer;font-size:1.4rem;line-height:1;padding:2px;color:var(--line);transition:color .1s; }
.star-btn.on,.star-btn:hover { color:var(--amber); }

/* Hero */
.hero { background:var(--g9);color:#fff;padding:80px 0 72px;position:relative;overflow:hidden; }
.hero::before { content:'';position:absolute;top:-80px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(34,160,112,.15),transparent 65%);pointer-events:none; }
.hero::after { content:'';position:absolute;bottom:-60px;left:-60px;width:360px;height:360px;background:radial-gradient(circle,rgba(104,201,155,.08),transparent 65%);pointer-events:none; }
.hero .eyebrow { color:var(--g4);margin-bottom:14px; }
.hero h1 { color:#fff;max-width:620px;margin-bottom:18px; }
.hero .sub { color:rgba(168,224,194,.85);max-width:500px;font-size:1.05rem;margin-bottom:32px; }
.hero-btns { display:flex;gap:12px;flex-wrap:wrap; }
.hero-stats { display:flex;gap:36px;flex-wrap:wrap;margin-top:52px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1); }
.hero-stats .sn { font-family:'Lora',serif;font-size:2rem;font-weight:600;color:#fff; }
.hero-stats .sl { font-size:.82rem;color:var(--g4);margin-top:2px; }

/* Section header */
.sec-head { display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:wrap; }
.sec-head h2 { margin:0; }

/* Group card */
.group-thumb { width:100%;height:120px;object-fit:cover; }
.group-thumb-empty { width:100%;height:120px;display:flex;align-items:center;justify-content:center;font-size:2.4rem; }

/* Rank */
.rank-row { display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line); }
.rank-row:last-child { border:none; }
.rank-row.gold { background:linear-gradient(90deg,rgba(232,160,48,.07),transparent); }
.rank-pos { width:26px;text-align:center;font-weight:700;color:var(--ink3);font-size:.88rem;flex-shrink:0; }
.rank-pos.p1 { color:var(--amber); }
.rank-pos.p2 { color:#9BA3AB; }
.rank-pos.p3 { color:#CD7F32; }
.rank-name { flex:1;font-weight:600;font-size:.9rem; }
.rank-sub { font-size:.76rem;color:var(--ink3);font-weight:400; }
.rank-pts { font-size:.85rem;color:var(--g6);font-weight:700;flex-shrink:0; }

/* Material content (prose) */
.prose h2,.prose h3 { margin:1.5em 0 .6em; }
.prose p { margin:.8em 0; }
.prose ul,.prose ol { margin:.7em 0;padding-left:1.5em; }
.prose li { margin:.3em 0; }
.prose blockquote { border-left:4px solid var(--g4);padding:12px 18px;background:var(--g1);border-radius:0 var(--rm) var(--rm) 0;font-family:'Lora',serif;font-style:italic;margin:1.2em 0; }
.prose table { width:100%;border-collapse:collapse;font-size:.9rem;margin:1em 0; }
.prose table th { background:var(--g1);padding:9px 12px;text-align:left;font-weight:700;border:1px solid var(--line); }
.prose table td { padding:9px 12px;border:1px solid var(--line);vertical-align:top; }
.prose table tr:nth-child(even) { background:#FAFCFB; }
.prose img { border-radius:var(--rm);margin:1em 0; }
.prose .question-box { background:var(--g1);border:1px solid var(--g3);border-radius:var(--rm);padding:16px 18px;margin:1em 0; }
.prose .question-box p { margin:.4em 0; }
.prose .commitment-box { background:var(--amber-bg);border:1px solid rgba(232,160,48,.3);border-radius:var(--rm);padding:16px 18px;margin:1em 0; }

/* Checklist-style section heads */
.mat-section { margin:32px 0; }
.mat-section-label { display:flex;align-items:center;gap:10px;font-weight:700;font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px; }
.mat-section-label::after { content:'';flex:1;height:1px;background:var(--line); }

/* Ice-break card */
.ice-card { border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .15s; }
.ice-card:hover { border-color:var(--g5);box-shadow:var(--sh); }
.ice-card-head { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--g1); }
.ice-card-body { padding:16px;display:none; }
.ice-card.open .ice-card-body { display:block; }
.ice-tag { font-size:.73rem;font-weight:700;padding:3px 9px;border-radius:99px; }
.ice-tag-online { background:var(--purple-bg);color:var(--purple-d); }
.ice-tag-offline { background:var(--g2);color:var(--g7); }
.ice-tag-both { background:var(--amber-bg);color:var(--amber-d); }
.ice-mode { display:none; }
.ice-mode.active { display:block; }

/* Update/berita */
.update-card { border-left:4px solid var(--g5);border-radius:0 var(--r) var(--r) 0;background:var(--white);padding:18px 20px;margin-bottom:16px;box-shadow:var(--sh); }
.syukur-box { background:var(--g1);border:1px solid var(--g3);border-radius:var(--rm);padding:14px 16px;margin:10px 0; }
.doa-box { background:var(--purple-bg);border:1px solid rgba(108,92,231,.2);border-radius:var(--rm);padding:14px 16px;margin:10px 0; }
.box-label { font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:7px; }
.syukur-label { color:var(--g6); }
.doa-label { color:var(--purple-d); }

/* Gallery */
.photo-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px; }
.photo-grid figure { margin:0; }
.photo-grid img { width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rm); }
.photo-grid figcaption { font-size:.76rem;color:var(--ink3);margin-top:5px;line-height:1.35; }

/* Avatar picker */
.ava-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px; }
.ava-opt { cursor:pointer; }
.ava-opt input { display:none; }
.ava-opt .ava-box { text-align:center;border:2px solid transparent;border-radius:var(--r);padding:10px 6px;transition:all .15s; }
.ava-opt input:checked ~ .ava-box, .ava-opt:hover .ava-box { border-color:var(--g5);background:var(--g1); }
.ava-ico-lg { width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.9rem;margin:0 auto 6px; }
.ava-nm { font-size:.76rem;color:var(--ink3);font-weight:600; }

/* Tabs */
.tabs { display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:24px; }
.tab { padding:10px 18px;font-size:.9rem;font-weight:600;color:var(--ink3);border-bottom:2.5px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap; }
.tab.act,.tab:hover { color:var(--g6);border-bottom-color:var(--g6); }
.tab-panel { display:none; }
.tab-panel.act { display:block; }

/* Table */
.tbl { width:100%;border-collapse:collapse;font-size:.9rem; }
.card:has(table.tbl) { overflow-x:auto; }
.tbl th { padding:9px 12px;border-bottom:2px solid var(--line);text-align:left;font-size:.78rem;color:var(--ink3);font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap; }
.tbl td { padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle; }
.tbl tr:last-child td { border:none; }
.tbl tr:hover td { background:#FAFCFB; }

/* Steps */
.steps { display:flex;align-items:center;gap:6px;margin:20px 0; }
.step-node { width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;background:var(--line);color:var(--ink3);flex-shrink:0; }
.step-node.done { background:var(--g6);color:#fff; }
.step-node.act { background:var(--g9);color:#fff; }
.step-ln { flex:1;height:2px;background:var(--line); }
.step-ln.done { background:var(--g5); }
.step-lbl { font-size:.8rem;color:var(--ink3); }
.step-lbl.act { color:var(--g9);font-weight:700; }

/* Admin */
.admin-wrap { display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start; }
.admin-side { background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:12px;position:sticky;top:76px; }
.admin-side a { display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--rm);font-size:.88rem;color:var(--ink2);font-weight:500;margin-bottom:2px; }
.admin-side a:hover,.admin-side a.act { background:var(--g1);color:var(--g7); }
.admin-side .side-group { font-size:.72rem;color:var(--ink4);letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:10px 11px 4px; }
@media(max-width:800px){.admin-wrap{grid-template-columns:1fr}.admin-side{position:static}}

/* Lockbox */
.lockbox { border:2px dashed var(--line);border-radius:var(--r);padding:40px 24px;text-align:center;color:var(--ink3); }
.lockbox h3 { margin:14px 0 8px;color:var(--ink2); }
.lockbox p { max-width:360px;margin:0 auto 20px; }

/* Divider */
hr { border:none;border-top:1px solid var(--line);margin:24px 0; }

/* Attendance */
.att-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px; }
.att-card { border:1.5px solid var(--line);border-radius:var(--rm);padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .15s; }
.att-card.hadir { border-color:var(--g5);background:var(--g1); }
.att-card.absen { border-color:var(--rose);background:var(--rose-bg); }

/* Testimonial */
.testi { background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px; }
.testi .quote-txt { font-family:'Lora',serif;font-style:italic;font-size:.97rem;color:var(--ink);margin-bottom:12px;line-height:1.65; }

/* Support */
.support-hero { background:linear-gradient(130deg,var(--g9) 0%,#0D4A35 100%);color:#fff;padding:56px 0; }
.support-hero h1 { color:#fff;margin-bottom:12px; }
.qris-wrap { width:140px;height:140px;background:#fff;border-radius:var(--rm);display:flex;align-items:center;justify-content:center;font-size:3rem;margin:0 auto 12px; }

/* Notifications */
.notif-item { display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start; }
.notif-item.unread { background:var(--g1);padding:14px 12px;border-radius:var(--rm);margin:-14px -12px;border:none;margin-bottom:8px; }

/* Checkout (post-session) */
.checkout-card { background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px; }
.att-toggle { display:flex;border:1.5px solid var(--line);border-radius:99px;overflow:hidden;width:fit-content; }
.att-toggle button { padding:6px 16px;font-size:.85rem;font-weight:600;border:none;background:none;cursor:pointer;color:var(--ink3); }
.att-toggle button.on { background:var(--g6);color:#fff; }

/* Footer */
.foot { background:var(--g9);color:rgba(255,255,255,.6);padding:48px 0;margin-top:80px; }
.foot-inner { display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap; }
.foot .brand { margin-bottom:10px; }
.foot-desc { font-size:.84rem;color:rgba(255,255,255,.4);max-width:220px;margin-top:8px; }
.foot-col h4 { font-size:.82rem;color:rgba(255,255,255,.8);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px; }
.foot-col a { display:block;color:rgba(255,255,255,.55);font-size:.88rem;margin-bottom:7px; }
.foot-col a:hover { color:#fff; }
.foot-copy { border-top:1px solid rgba(255,255,255,.07);margin-top:32px;padding-top:20px;font-size:.78rem;color:rgba(255,255,255,.3);text-align:center; }

@media(max-width:600px){
  .section{padding:40px 0}.hero{padding:56px 0 48px}
  .hero h1{font-size:1.75rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ====================== NEW ADDITIONS v2 ====================== */

/* 1:1 Group photo thumbnails */
.group-thumb-wrap { width:100%; aspect-ratio:1/1; overflow:hidden; }
.group-thumb-sq { width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; transition:transform .35s ease; }
.group-card:hover .group-thumb-sq { transform:scale(1.06); }
.group-thumb-sq.group-thumb-empty { display:flex;align-items:center;justify-content:center;font-size:2.8rem;background:linear-gradient(135deg,var(--g2),var(--g3)); }
.grid-groups { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }
.group-card { overflow:hidden; position:relative; }
.group-card:active { transform:scale(.98); }
.group-thumb-wrap { position:relative; }
.group-thumb-fade { position:absolute; inset:auto 0 0 0; height:56%; background:linear-gradient(to top,rgba(6,35,24,.75),rgba(6,35,24,0)); pointer-events:none; }
.group-thumb-badges { position:absolute; top:8px; left:8px; right:8px; display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.gt-chip { display:inline-flex; align-items:center; gap:3px; font-size:.68rem; font-weight:700; padding:4px 9px; border-radius:99px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); line-height:1.3; white-space:nowrap; }
.gt-chip-church { background:rgba(255,255,255,.88); color:var(--g8); }
.gt-chip-indep { background:rgba(255,255,255,.88); color:var(--amber-d); }
.gt-chip-member { background:var(--g5); color:#fff; padding:4px 7px; }
.group-thumb-mc { position:absolute; left:10px; bottom:9px; color:#fff; font-size:.72rem; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.4); z-index:1; }
@media(max-width:640px){
  .grid-groups { grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .group-card-wrap { min-width:0; overflow:hidden; }
  .group-card { min-width:0 !important; border-radius:16px !important; }
  .group-card .card-body { padding:10px 11px !important; }
  .group-card h3 { font-size:.86rem !important; margin-bottom:2px !important; line-height:1.25 !important; }
  .group-card .muted.small { font-size:.72rem !important; margin:2px 0 6px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  .group-card .sched-badge { font-size:.66rem !important; padding:3px 8px !important; }
  .group-card .ava-stack .ava { width:20px !important; height:20px !important; }
  .group-card .muted.xs { font-size:.66rem !important; }
  .gt-chip { font-size:.62rem !important; padding:3px 7px !important; }
  .group-thumb-mc { font-size:.66rem !important; }
  .group-card .btn-outline.btn-sm { font-size:.7rem !important; padding:5px 8px !important; margin-top:6px !important; }
  .group-card .row { gap:4px !important; }
}

/* Language switcher (sliding toggle) */
.lang-switch { position:relative;display:inline-flex;align-items:center;margin-left:10px;background:rgba(255,255,255,.08);border-radius:99px;padding:3px;gap:0; }
.lang-switch a { position:relative;z-index:1;color:rgba(255,255,255,.55);font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:5px 13px;border-radius:99px;transition:color .2s;}
.lang-switch a.act { color:#06231a; }
.lang-switch::before { content:'';position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);background:#fff;border-radius:99px;transition:transform .25s ease;z-index:0; }
.lang-switch-en::before { transform:translateX(100%); }

/* Devotional content blocks */
.mat-content { max-width:680px; }
.mat-title { font-family:'Lora',serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;color:var(--g9);line-height:1.2;margin-bottom:1.2em; }
.mat-subtitle { font-family:'Lora',serif;font-size:1.2rem;font-weight:600;color:var(--g7);margin:2em 0 .7em; }
.mat-p { font-size:1.05rem;line-height:1.85;color:var(--ink);margin:.9em 0; }
.mat-quote { border-left:4px solid var(--g4);padding:16px 20px;background:var(--g1);border-radius:0 var(--r) var(--r) 0;font-family:'Lora',serif;font-style:italic;font-size:1.1rem;color:var(--g8);margin:1.5em 0;line-height:1.7; }
.mat-bible { background:linear-gradient(135deg,var(--g1),#f0fbf5);border:1px solid var(--g3);border-radius:var(--r);padding:18px 20px;margin:1.5em 0; }
.mat-bible .mat-bible-ref { display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g6);margin-bottom:8px; }
.mat-tips { background:var(--amber-bg);border:1px solid rgba(232,160,48,.3);border-radius:var(--r);padding:16px 20px;margin:1.5em 0; }
.mat-tips > span { display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--amber-d);margin-bottom:8px; }
.mat-discuss { background:var(--purple-bg);border:1px solid rgba(108,92,231,.2);border-radius:var(--r);padding:16px 20px;margin:1.5em 0; }
.mat-discuss > span { display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--purple-d);margin-bottom:8px; }
.mat-apply { background:var(--g1);border:2px solid var(--g3);border-radius:var(--r);padding:16px 20px;margin:1.5em 0; }
.mat-apply > span { display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--g6);margin-bottom:8px; }
.mat-img { margin:1.5em 0; }
.mat-img img { border-radius:var(--r);width:100%; }
.mat-img figcaption { font-size:.8rem;color:var(--ink3);margin-top:8px;text-align:center; }
.mat-list { margin:1.2em 0;padding-left:1.4em;line-height:1.9;font-size:1.02rem;color:var(--ink); }
.mat-list li { margin-bottom:.5em; }

/* Reading progress bar */
.prog-track { background:var(--g2);border-radius:99px;height:6px;overflow:hidden; }
.prog-bar { height:100%;background:linear-gradient(90deg,var(--g5),var(--g4));border-radius:99px;transition:width .4s ease; }

/* Prayer request cards */
.prayer-card { border-left:3px solid var(--purple); }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px; }

/* Series badges */
.series-badge { display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--amber),#d4911f);color:#fff;font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:99px; }
.series-badge::before { content:'🏅'; }

/* Rating sliders */
input[type="range"] { -webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:var(--g2);cursor:pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--g6);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2); }

/* Meeting photo required indicator */
.photo-required { border:2px dashed var(--rose)!important;background:var(--rose-bg); }

/* Donation chart wrapper */
#donChart { max-height:200px; }

/* Check-in attendance checkbox highlight */
.fellow-checkin-box { background:var(--g1);border:2px solid var(--g3);border-radius:var(--r);padding:18px 20px; }
.fellow-checkin-box.done { border-color:var(--g5);background:linear-gradient(135deg,var(--g1),#e0f7ec); }

/* Content block editor */
.content-block select,.content-block textarea,.content-block input[type="text"] {
  font-size:.85rem;padding:8px 10px;border:1.5px solid var(--line);border-radius:var(--rm);background:#fff;width:100%;
}
.content-block textarea { resize:vertical; }

/* Badge b-church / b-indep */
.b-church { background:#EEF2FF;color:#3730A3; }
.b-indep { background:var(--g1);color:var(--g7); }
.b-purple { background:var(--purple-bg);color:var(--purple-d); }
.b-amber { background:var(--amber-bg);color:var(--amber-d); }
.b-rose { background:var(--rose-bg);color:var(--rose-d); }
.b-green { background:var(--g1);color:var(--g7); }
.b-gray { background:#F0F0F0;color:#555; }

/* Badge */
.badge { display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:.73rem;font-weight:700;line-height:1.4; }

/* Attendance self check-in */
.checkin-confirm { display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer; }

@media(max-width:640px){
  .admin-wrap { grid-template-columns:1fr; }
}

/* ===== LOGO DESKTOP/MOBILE ===== */
.logo-desktop { display:block; }
.logo-mobile { display:none; }
@media(max-width:840px){
  .logo-desktop { display:none; }
  .logo-mobile { display:block; }
}

/* ===== FIXES v3 ===== */

/* Fix hamburger nav - ensure nav-inner is relatively positioned */
.nav-inner { position: relative; }

/* Fix materi content PC - proper readable width with good typography */
.mat-content-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}
/* Prose styling untuk konten dari Google Docs */
.mat-content-wrap h1,.prose h1 { font-size:1.7rem; font-weight:700; color:var(--ink); margin:1.4em 0 .5em; line-height:1.2; }
.mat-content-wrap h2,.prose h2 { font-size:1.35rem; font-weight:700; color:var(--ink); margin:1.2em 0 .4em; line-height:1.25; }
.mat-content-wrap h3,.prose h3 { font-size:1.1rem; font-weight:700; color:var(--ink); margin:1em 0 .35em; }
.mat-content-wrap h4,.prose h4 { font-size:1rem; font-weight:700; color:var(--ink); margin:.9em 0 .3em; }
.mat-content-wrap p,.prose p { font-size:1.02rem; line-height:1.85; color:var(--ink); margin:.75em 0; }
.mat-content-wrap strong,.prose strong { font-weight:700; color:var(--ink); }
.mat-content-wrap em,.prose em { font-style:italic; }
.mat-content-wrap u,.prose u { text-decoration:underline; }
.mat-content-wrap s,.prose s { text-decoration:line-through; color:var(--ink3); }
.mat-content-wrap ul,.prose ul { padding-left:1.5em; margin:.75em 0; list-style:disc; }
.mat-content-wrap ol,.prose ol { padding-left:1.5em; margin:.75em 0; list-style:decimal; }
.mat-content-wrap li,.prose li { margin:.3em 0; line-height:1.7; }
.mat-content-wrap blockquote,.prose blockquote { border-left:4px solid var(--g4); padding:.5em 1em; margin:1em 0; color:var(--ink2); font-style:italic; background:var(--g1); border-radius:0 8px 8px 0; }
.mat-content-wrap table,.prose table { border-collapse:collapse; width:100%; margin:1em 0; }
.mat-content-wrap th,.prose th { background:var(--g2); font-weight:700; padding:8px 12px; border:1px solid var(--line); text-align:left; }
.mat-content-wrap td,.prose td { padding:8px 12px; border:1px solid var(--line); vertical-align:top; }
.mat-content-wrap a,.prose a { color:var(--g6); text-decoration:underline; }
.mat-content-wrap sup,.prose sup { font-size:.75em; vertical-align:super; }
.mat-content-wrap sub,.prose sub { font-size:.75em; vertical-align:sub; }
.mat-content-wrap img,.prose img { max-width:100%; border-radius:8px; margin:1em 0; }
.mat-content-wrap .mat-p {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--ink);
  margin: .85em 0;
  max-width: 65ch;
}
.mat-content-wrap h1,
.mat-content-wrap h2 {
  max-width: 100%;
}

/* Content block alignment */
.mat-align-center { text-align: center; }
.mat-align-right { text-align: right; }
.mat-align-left { text-align: left; }
.mat-align-justify { text-align: justify; }

/* Bold/italic/underline in material blocks */
.mat-bold { font-weight: 700; }
.mat-italic { font-style: italic; }
.mat-underline { text-decoration: underline; }

/* Checkout section (fellow & leader) */
.checkout-section {
  background: linear-gradient(135deg, var(--g1), #e8f5f0);
  border: 2px solid var(--g3);
  border-radius: var(--r);
  padding: 28px 24px;
  margin-top: 48px;
}
.checkout-section h3 { margin-bottom: 6px; }

/* Star rating (larger) */
.star-rating-row { display: flex; gap: 6px; margin: 8px 0; }
.star-rating-row .star-btn { font-size: 1.8rem; }

/* Profile page new fields */
.profile-field { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.profile-field:last-child { border: none; }
.profile-field label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); }
.profile-field .val { font-size: .95rem; color: var(--ink); }

/* Word tags (3 kata tentang aku) */
.word-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--g1); border: 1.5px solid var(--g3); color: var(--g7); font-size: .82rem; font-weight: 600; padding: 4px 12px; border-radius: 99px; cursor: pointer; transition: all .15s; }
.word-tag:hover, .word-tag.selected { background: var(--g5); color: #fff; border-color: var(--g5); }
.word-tag-given { background: var(--amber-bg); border-color: var(--amber); color: var(--amber-d); }

/* Series badge large */
.badge-series { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,var(--amber),#d4911f); color: #fff; font-size: .85rem; font-weight: 700; padding: 8px 16px; border-radius: var(--rm); }

/* Admin format buttons */
.fmt-btns { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.fmt-btn { background: var(--bg); border: 1.5px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .12s; }
.fmt-btn.active { background: var(--g6); color: #fff; border-color: var(--g6); }

/* Schedule badge on group cards */
.sched-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--purple-bg); color: var(--purple-d); font-size: .76rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; }

/* Prayer points */
.prayer-point { background: var(--purple-bg); border-left: 4px solid var(--purple); border-radius: 0 var(--rm) var(--rm) 0; padding: 12px 16px; margin-bottom: 10px; }
.prayer-point p { color: var(--ink); font-size: .95rem; margin: 0; }

/* Evaluation chart */
.eval-chart-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin-top: 20px; }

/* Leader checkout button */
.leader-checkout-btn { background: var(--amber); color: #fff; border: none; }
.leader-checkout-btn:hover { background: #d4911f; }

/* Session duration display */
.session-duration { font-size: .82rem; color: var(--ink3); display: inline-flex; align-items: center; gap: 5px; }

/* Partner church list */
.church-partner-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.church-partner-item:last-child { border: none; }
.church-groups-list { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }

/* Social media links */
.social-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-size: .83rem; font-weight: 600; border: 1.5px solid var(--line); transition: all .15s; }
.social-link:hover { border-color: var(--g5); color: var(--g6); }
.social-link-ig { border-color: #e1306c; color: #e1306c; }
.social-link-fb { border-color: #1877f2; color: #1877f2; }

@media(max-width:600px) {
  .mat-content-wrap { padding: 24px 16px 40px; }
  .checkout-section { padding: 20px 16px; }
}

/* === Materi Detail Header (thumbnail removed from this page per latest request) === */

/* === General padding fix for phone === */
.wrap { padding-left: 20px; padding-right: 20px; }
.wrap-sm { padding-left: 20px; padding-right: 20px; }
@media(max-width:600px){
  .wrap { padding-left: 16px; padding-right: 16px; }
  .wrap-sm { padding-left: 16px; padding-right: 16px; }
  .section { padding: 40px 0; }
  .mat-content-wrap { padding: 20px 16px 40px; }
}

/* === Dashboard cards === */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:24px; }
.dash-stat { background:var(--g1); border:1px solid var(--line); border-radius:var(--rm); padding:16px; }
.dash-stat .ds-val { font-size:1.8rem; font-weight:800; color:var(--g9); line-height:1; }
.dash-stat .ds-lbl { font-size:.78rem; color:var(--ink3); margin-top:4px; }
.active-session-banner { background:linear-gradient(135deg,var(--g9),#0a4028); border-radius:var(--rm); padding:18px 20px; color:#fff; margin-bottom:20px; }
.active-session-banner h3 { color:#fff; margin-bottom:6px; }
.notif-dot-new { width:8px;height:8px;border-radius:50%;background:var(--g5);flex-shrink:0;margin-top:5px; }

/* ====================== MOBILE LAYOUT FIX (does not affect PC) ====================== */

/* Prevent any element from forcing horizontal scroll on phone */
@media(max-width:768px){
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, video, table, iframe, canvas { max-width: 100%; }
  /* Buttons with dynamic/long text (e.g. WhatsApp contact buttons with a
     name + group name) must be allowed to wrap on narrow screens instead
     of forcing nowrap, which was pushing them wider than the viewport. */
  .btn { white-space: normal; text-align: center; line-height: 1.3; }
}

/* Force ALL multi-column grids to single column on mobile.
   Covers both class-based and inline style grids across all pages. */
@media(max-width:700px){
  /* Class-based grids */
  .grid-2,.grid-3,.grid-4,.dash-grid { grid-template-columns: 1fr !important; }
  
  /* Inline style grids — all common patterns used across pages */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Admin sidebar */
  .admin-wrap { grid-template-columns: 1fr !important; gap: 16px !important; }
  .admin-side { display:flex; flex-wrap:wrap; gap:4px 14px; padding:12px 14px !important; }
  .admin-side .side-group { display:none; }

  /* Support page two-column sections */
  .support-hero + .section > .wrap > div[style],
  section > .wrap > div[style*="grid"] { grid-template-columns: 1fr !important; }

  /* Dashboard main grid */
  .dash-main-grid { grid-template-columns: 1fr !important; }
}

/* Prevent text/buttons from being squeezed too small — keep tap targets usable */
@media(max-width:480px){
  .hero h1 { font-size: 1.55rem !important; line-height:1.25; }
  .hero .sub { font-size: .92rem; }
  .btn { font-size: .85rem; padding: 10px 16px; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { text-align: center; }
  table.tbl { white-space:nowrap; }
  .tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
}

/* Testimonial photo: show in full on phone instead of cropping */
@media(max-width:700px){
  .testi-photo-wrap { max-height:none !important; }
  .testi-photo { height:auto !important; object-fit:contain !important; background:var(--g1); }
}

/* === Ice-Breaking Game Embed (isolated iframe) === */
.mat-game-embed { box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); }
.mat-game-embed iframe { background:#fff; }

/* === Material Slide Show (1:1 square, image-based) === */
.slide-show { width:100%; }
.slide-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  background: #14140f;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
}
.slide-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  background: #14140f;
}
.slide-img.act { opacity: 1; pointer-events: auto; }
.slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  z-index: 5;
}
.slide-nav:hover { background: rgba(0,0,0,.7); }
.slide-prev { left: 10px; }
.slide-next { right: 10px; }
.slide-counter {
  position: absolute;
  bottom: 10px; right: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .75rem;
  padding: 3px 10px;
  border-radius: 99px;
  z-index: 5;
}
.slide-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.slide-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.slide-dot.act { background: var(--g6); transform: scale(1.3); }

@media(max-width:480px){
  .slide-stage { max-width: 100%; }
  .slide-nav { width:32px;height:32px;font-size:1.1rem; }
}


/* Horizontal-scroll single-row sections (homepage: Komunitas Kami, Materi, Testimonials) */
.hrow-wrap{ position:relative; }
.hrow{ display:flex; gap:20px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 12px; scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.hrow::-webkit-scrollbar{ display:none; }
.hrow > *{ flex-shrink:0; }

.hrow-nav{ position:absolute; top:0; bottom:12px; width:44px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; z-index:5; color:var(--ink); opacity:0; transition:opacity .15s; }
.hrow-wrap:hover .hrow-nav{ opacity:1; }
.hrow-nav.prev{ left:-8px; background:linear-gradient(90deg,var(--white) 30%,transparent); justify-content:flex-start; }
.hrow-nav.next{ right:-8px; background:linear-gradient(270deg,var(--white) 30%,transparent); justify-content:flex-end; }
.hrow-nav span{ width:36px;height:36px;border-radius:50%;background:var(--white);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:transform .15s; }
.hrow-nav:hover span{ transform:scale(1.1); background:var(--g1); }
.hrow-nav[disabled]{ opacity:0 !important; pointer-events:none; }
@media(max-width:768px){ .hrow-nav{ display:none; } }

.hrow-groups > .group-card{ width:260px; }
.hrow-books > .book-item{ width:190px; }
.hrow-testi{ align-items:stretch; }
.hrow-testi > .testi-mini{ width:max-content; min-width:190px; max-width:360px; display:flex; flex-direction:column; }
.testi-mini{ padding:14px 16px; }
.testi-mini .quote-txt{ font-family:'Lora',serif;font-style:italic; font-size:clamp(.68rem,1.4vw,.92rem); line-height:1.55; margin-bottom:10px; white-space:normal; flex:1; }
.testi-mini .testi-photo-wrap{ max-height:none !important; margin-bottom:8px; border-radius:8px; overflow:hidden; background:var(--g1); text-align:center; }
.testi-mini .testi-photo{ height:auto !important; max-height:180px; width:auto !important; max-width:100%; object-fit:contain !important; background:var(--g1); margin:0 auto; display:block; }

@media(max-width:560px){
  .hrow-groups > .group-card{ width:220px; }
  .hrow-books > .book-item{ width:150px; }
  .hrow-testi > .testi-mini{ max-width:280px; }
}

/* Interactive series-badge medallion (profile + dashboard) */
.badge-medal-grid{ display:flex; flex-wrap:wrap; gap:16px; }
.badge-medal{ width:96px; text-align:center; cursor:default; }
.badge-medal-coin{ width:76px; height:76px; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; position:relative; background:linear-gradient(145deg,#F3C463,#C47B10); box-shadow:0 3px 0 #9A5F0A,0 6px 14px rgba(196,123,16,.35); border:3px solid #FFE9BE; transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s; }
.badge-medal-coin::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 55%); pointer-events:none; }
.badge-medal:hover .badge-medal-coin{ transform:translateY(-4px) scale(1.08) rotate(-4deg); box-shadow:0 6px 0 #9A5F0A,0 14px 22px rgba(196,123,16,.4); }
.badge-medal-name{ font-size:.74rem; font-weight:700; color:var(--ink); line-height:1.3; }
.badge-medal-date{ font-size:.62rem; color:var(--ink3); margin-top:2px; max-height:0; opacity:0; overflow:hidden; transition:max-height .2s,opacity .2s; }
.badge-medal:hover .badge-medal-date{ max-height:20px; opacity:1; }
@media(max-width:560px){ .badge-medal{ width:80px; } .badge-medal-coin{ width:64px;height:64px;font-size:1.5rem; } }