:root {
    --arc-primary: #f97316;        /* Orange Utama */
    --arc-primary-dark: #ea580c;
    --arc-dark-premium: #0b0f19;   /* Deep Tech Dark */
    --arc-ink: #1e293b;
    --arc-muted: #64748b;
    --arc-bg-light: #f8fafc;
    --arc-border: #e2e8f0;
}
* { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.01em; }
body { color: var(--arc-ink); background: #fff; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { font-weight: 800; color: var(--arc-dark-premium); letter-spacing: -0.03em; }
.eyebrow { color: var(--arc-primary); font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; margin-bottom: .5rem; display: block; }
.bg-soft { background: var(--arc-bg-light); }
.section-padding { padding: 7rem 0; }
.text-arc { color: var(--arc-primary) !important; }

/* ===== Buttons ===== */
.btn-arc { background: var(--arc-primary); color: #fff; border: none; border-radius: 10px; padding: .8rem 2rem; font-weight: 700; transition: all .25s ease; }
.btn-arc:hover { background: var(--arc-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(249,115,22,.25); }
.btn-outline-arc { border: 2px solid var(--arc-dark-premium); color: var(--arc-dark-premium); border-radius: 10px; padding: .75rem 1.8rem; font-weight: 700; background: transparent; transition: all .25s ease; }
.btn-outline-arc:hover { background: var(--arc-dark-premium); color: #fff; }
.btn-light-arc { background: #fff; color: var(--arc-dark-premium); border: none; border-radius: 10px; padding: .8rem 2rem; font-weight: 700; transition: all .25s ease; }
.btn-light-arc:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.2); color: var(--arc-primary-dark); }
.btn-filter-icon { border: 1px solid var(--arc-border); background: var(--arc-bg-light); color: var(--arc-ink); border-radius: 10px; padding: .72rem 1rem; font-weight: 700; }
.btn-filter-icon:hover { border-color: var(--arc-primary); color: var(--arc-primary); }

/* ===== Navbar ===== */
.navbar { transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.brand-logo { width: 34px; height: 34px; border-radius: 8px; background: var(--arc-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.nav-link { font-weight: 600; font-size: .95rem; transition: color .2s ease; }
.navbar .brand-text, .navbar .btn-login { transition: color .2s ease; }
.navbar-top { background: transparent; backdrop-filter: none; }
.navbar-top .nav-link { color: #fff !important; }
.navbar-top .nav-link:hover, .navbar-top .nav-link.active { color: #fff !important; opacity: .8; }
.navbar-top .brand-text, .navbar-top .btn-login { color: #fff !important; }
.navbar-top .navbar-toggler-icon { filter: invert(1) brightness(2); }
.navbar-scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(15px); border-bottom: 1px solid var(--arc-border); box-shadow: 0 4px 20px rgba(0,0,0,.05); }
.navbar-scrolled .nav-link { color: var(--arc-ink) !important; }
.navbar-scrolled .nav-link:hover, .navbar-scrolled .nav-link.active { color: var(--arc-primary) !important; }
.navbar-scrolled .brand-text, .navbar-scrolled .btn-login { color: var(--arc-dark-premium) !important; }
.nav-link.active { color: var(--arc-primary) !important; opacity: 1; }
.brand-img { height: 60px; width: auto; margin: -12px 0; }
.navbar-top .brand-img-dark { display: none; }
.navbar-scrolled .brand-img-light { display: none; }

/* ===== Hero (Home) ===== */
.hero-premium { min-height: 100vh; display: flex; align-items: center; padding: 8rem 0 3rem; color: #fff; position: relative; overflow: hidden; background: #0b0f19; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease-in-out; transform: scale(1.05); }
.hero-bg .hero-slide.is-active { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,15,25,.94) 0%, rgba(11,15,25,.80) 45%, rgba(30,27,75,.55) 100%); }
.hero-premium .container { position: relative; z-index: 2; }
.hero-premium h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; }
.hero-premium .text-muted-custom { color: #cbd5e1; font-size: 1.15rem; line-height: 1.6; }

/* ===== Hero (Organizer) ===== */
.hero-org { min-height: 100vh; display:flex; align-items:center; padding:8rem 0 4rem; position:relative; overflow:hidden; color:#fff; background:#0b0f19; }
.hero-org .hero-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; background-image:url('https://images.unsplash.com/photo-1461896836934-ffe607ba8211?auto=format&fit=crop&w=1600&q=80'); transform:scale(1.05); }
.hero-org .hero-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(11,15,25,.95) 0%, rgba(11,15,25,.82) 45%, rgba(30,27,75,.55) 100%); }
.hero-org .container { position:relative; z-index:2; }
.hero-org h1 { color:#fff; font-size:clamp(2.4rem,5vw,3.8rem); line-height:1.1; }
.hero-org .lead-muted { color:#cbd5e1; font-size:1.15rem; line-height:1.6; }
.badge-hero { display:inline-flex; align-items:center; gap:.5rem; background:rgba(249,115,22,.15); color:#fdba74; border:1px solid rgba(249,115,22,.3); border-radius:999px; padding:.4rem 1rem; font-weight:700; font-size:.85rem; }
.hero-stat h3 { color:#fff; font-size:2rem; margin-bottom:.1rem; }
.hero-stat span { color:#94a3b8; font-size:.85rem; font-weight:600; }

/* ===== Store buttons ===== */
.store-btn { background: rgba(255,255,255,0.08); color:#fff; border: 1px solid rgba(255,255,255,0.15); border-radius:12px; padding:.65rem 1.4rem; display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; transition: all .2s; }
.store-btn:hover { background: rgba(255,255,255,0.15); color:#fff; transform: translateY(-2px); }
.store-btn small { display:block; font-size:.65rem; color: #cbd5e1; }
.store-btn span.big { font-size:.95rem; font-weight:700; }
.store-btn-light { background:#fff; color:var(--arc-dark-premium); border:none; }
.store-btn-light:hover { background:#fff; color:var(--arc-primary-dark); }
.store-btn-light small { color: var(--arc-muted); }

/* ===== Hero search widget ===== */
.search-bar-floating { background:#fff; border-radius:16px; padding:.6rem; box-shadow:0 20px 40px rgba(0,0,0,.25); display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.search-item { flex:1; min-width:140px; padding:.5rem 1rem; border-right:1px solid var(--arc-border); }
.search-item:last-child { border-right:none; }
.search-item label { display:block; font-size:.75rem; font-weight:700; color:var(--arc-muted); text-transform:uppercase; margin-bottom:.2rem; }
.search-item select, .search-item input { border:none; outline:none; width:100%; font-weight:600; color:var(--arc-dark-premium); background:transparent; }

/* ===== Sport pills ===== */
.sport-pill { background: var(--arc-bg-light); border:1px solid var(--arc-border); border-radius:14px; padding:1.2rem; text-align:center; transition:all .2s ease; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; }
.sport-pill:hover { border-color:var(--arc-primary); background:#fff; transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.04); }
.sport-icon-wrap { font-size:1.8rem; color:var(--arc-muted); margin-bottom:.5rem; transition:color .2s; }
.sport-pill:hover .sport-icon-wrap { color:var(--arc-primary); }
.sport-pill span { font-weight:700; font-size:.95rem; color:var(--arc-dark-premium); }

/* ===== Modern scroll card (home matchmaking) ===== */
.modern-card { background:#fff; border:1px solid var(--arc-border); border-radius:16px; overflow:hidden; height:100%; display:flex; flex-direction:column; transition:all .25s ease; }
.modern-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(15,23,42,.06); border-color:rgba(0,0,0,.05); }
.card-thumb { height:200px; background-size:cover; background-position:center; position:relative; }
.card-badge { position:absolute; bottom:12px; left:12px; background:rgba(11,15,25,.9); color:#fff; font-size:.75rem; font-weight:700; padding:.35rem .8rem; border-radius:6px; backdrop-filter:blur(4px); }
.card-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }

/* ===== Horizontal scroll ===== */
.h-scroll { display:flex; gap:1.5rem; overflow-x:auto; padding:.25rem .25rem 1.5rem; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--arc-primary) #e2e8f0; }
.h-scroll::-webkit-scrollbar { height:8px; }
.h-scroll::-webkit-scrollbar-track { background:#eef2f6; border-radius:999px; }
.h-scroll::-webkit-scrollbar-thumb { background:var(--arc-primary); border-radius:999px; }
.h-slide { flex:0 0 340px; max-width:340px; scroll-snap-align:start; }
@media (max-width:480px) { .h-slide { flex-basis:85%; max-width:85%; } }

/* ===== Page header (inner pages) ===== */
.page-header { background:linear-gradient(135deg,#0b0f19 0%,#1e1b4b 100%); position:relative; overflow:hidden; color:#fff; padding:9rem 0 6rem; text-align:center; }
.page-header::before { content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 15% 10%, rgba(249,115,22,.25), transparent 60%), radial-gradient(500px 260px at 90% 90%, rgba(99,102,241,.25), transparent 60%); }
.page-header .container { position:relative; z-index:2; }
.page-header h1 { color:#fff; font-size:clamp(2rem,4vw,3rem); }
.breadcrumb-arc a { color:#cbd5e1; text-decoration:none; }
.breadcrumb-arc a:hover { color:#fff; }
.breadcrumb-arc .sep { color:#64748b; }
.breadcrumb-arc .current { color:var(--arc-primary); font-weight:600; }

/* ===== Filter card ===== */
.filter-card { background:#fff; border:1px solid var(--arc-border); border-radius:16px; padding:1rem; box-shadow:0 20px 40px rgba(15,23,42,.10); position:relative; z-index:5; }
.filter-card.floating { margin-top:-2.75rem; }
.filter-input { position:relative; }
.filter-input > i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--arc-muted); pointer-events:none; }
.filter-input .form-control, .filter-input .form-select { border:1px solid var(--arc-border); border-radius:10px; padding:.75rem .9rem .75rem 2.4rem; font-weight:600; color:var(--arc-ink); background-color:var(--arc-bg-light); box-shadow:none; }
.filter-input .form-control::placeholder { color:var(--arc-muted); font-weight:500; }
.filter-input .form-control:focus, .filter-input .form-select:focus { border-color:var(--arc-primary); background:#fff; box-shadow:0 0 0 .2rem rgba(249,115,22,.12); }
.sort-select { border:1px solid var(--arc-border); border-radius:10px; padding:.5rem 2rem .5rem .9rem; font-weight:700; color:var(--arc-ink); background-color:#fff; }

/* ===== Explore tabs (Jelajah) ===== */
.explore-tabs { display:inline-flex; flex-wrap:wrap; gap:.25rem; background:#fff; border:1px solid var(--arc-border); border-radius:14px; padding:.35rem; box-shadow:0 20px 40px rgba(15,23,42,.10); }
.explore-tab { border:none; background:transparent; color:var(--arc-muted); font-weight:700; padding:.65rem 1.6rem; border-radius:10px; transition:all .2s; display:inline-flex; align-items:center; gap:.5rem; }
.explore-tab:hover { color:var(--arc-ink); }
.explore-tab.active { background:var(--arc-primary); color:#fff; box-shadow:0 6px 14px rgba(249,115,22,.25); }
.explore-tab .count { font-size:.72rem; background:rgba(255,255,255,.25); padding:.05rem .45rem; border-radius:999px; }
.explore-tab:not(.active) .count { background:var(--arc-bg-light); color:var(--arc-muted); }

/* ===== Explore event card ===== */
.explore-card { background:#fff; border:1px solid var(--arc-border); border-radius:16px; overflow:hidden; height:100%; display:flex; flex-direction:column; transition:all .25s ease; }
.explore-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(15,23,42,.08); }
.explore-thumb { height:168px; background-size:cover; background-position:center; position:relative; }
.badge-sport { position:absolute; top:12px; left:12px; background:var(--arc-primary); color:#fff; font-size:.72rem; font-weight:700; padding:.28rem .7rem; border-radius:6px; }
.badge-level { position:absolute; top:12px; right:12px; background:rgba(11,15,25,.82); color:#fff; font-size:.72rem; font-weight:600; padding:.28rem .7rem; border-radius:6px; backdrop-filter:blur(4px); }
.badge-verified { display:inline-flex; align-items:center; gap:.3rem; background:#fff7ed; color:var(--arc-primary-dark); font-size:.72rem; font-weight:700; padding:.22rem .6rem; border-radius:6px; }
.meta-row { color:var(--arc-muted); font-size:.85rem; }
.meta-row i { color:var(--arc-primary); width:16px; }
.mini-avatar { width:30px; height:30px; border-radius:50%; border:2px solid #fff; background:var(--arc-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
.mini-avatar + .mini-avatar { margin-left:-10px; }
.mini-avatar.more { background:var(--arc-dark-premium); }
.host-avatar { width:36px; height:36px; border-radius:50%; background:var(--arc-bg-light); border:1px solid var(--arc-border); display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:var(--arc-primary); }
.rating { color:#f59e0b; font-weight:700; font-size:.85rem; }
.slot-bar { height:6px; background:var(--arc-bg-light); border-radius:999px; overflow:hidden; }
.slot-bar > div { height:100%; background:var(--arc-primary); border-radius:999px; }

/* ===== Collaboration ===== */
.collab-box { background:#fff; border:1px solid var(--arc-border); border-radius:16px; padding:1.4rem 1.5rem; transition:all .2s; }
.collab-box:hover { box-shadow:0 12px 26px rgba(15,23,42,.06); border-color:var(--arc-primary); }
.collab-ico { flex:0 0 auto; width:56px; height:56px; border-radius:14px; background:var(--arc-bg-light); color:var(--arc-primary); display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.collab-cat { background:var(--arc-bg-light); color:var(--arc-primary-dark); font-size:.7rem; font-weight:700; padding:.14rem .6rem; border-radius:999px; }
.status-pill { font-size:.72rem; font-weight:700; padding:.16rem .6rem; border-radius:999px; }
.status-open { background:#fff7ed; color:var(--arc-primary-dark); }
.status-almost { background:#fef2f2; color:#dc2626; }
.status-sponsor { background:#eef2ff; color:#4f46e5; }
.collab-progress { height:6px; background:var(--arc-bg-light); border-radius:999px; overflow:hidden; max-width:320px; }
.collab-progress > div, .collab-progress .collab-progress-bar { height:100%; background:var(--arc-primary); border-radius:999px; }
.meta-mini { color:var(--arc-muted); font-size:.85rem; }
.meta-mini i { color:var(--arc-primary); }

/* ===== Community ===== */
.community-card { background:#fff; border:1px solid var(--arc-border); border-radius:16px; overflow:hidden; height:100%; transition:all .25s ease; }
.community-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(15,23,42,.06); }
.community-head { height:100px; position:relative; display:flex; align-items:center; padding:0 1.25rem; }
.community-ico { width:54px; height:54px; border-radius:14px; background:rgba(255,255,255,.22); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem; backdrop-filter:blur(2px); }
.community-badge { position:absolute; top:12px; right:12px; background:rgba(255,255,255,.92); color:var(--arc-primary-dark); font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:6px; }
.member-dot { width:28px; height:28px; border-radius:50%; background:var(--arc-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; border:2px solid #fff; }
.member-dot + .member-dot { margin-left:-10px; }
.community-cta { background:var(--arc-bg-light); border:1px dashed #cbd5e1; border-radius:16px; padding:1.5rem; }

/* ===== Organizer benefit / steps / feature / faq ===== */
.benefit-card { background:#fff; border:1px solid var(--arc-border); border-radius:16px; padding:2rem; height:100%; transition:all .25s ease; }
.benefit-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(15,23,42,.06); border-color:transparent; }
.benefit-ico { width:60px; height:60px; border-radius:16px; background:var(--arc-bg-light); color:var(--arc-primary); display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin-bottom:1.2rem; }
.step-num { width:52px; height:52px; border-radius:14px; background:var(--arc-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; box-shadow:0 8px 18px rgba(249,115,22,.3); }
.step-line { position:relative; }
@media (min-width:768px){ .step-line::after { content:""; position:absolute; top:26px; left:calc(50% + 40px); right:calc(-50% + 40px); height:2px; background:repeating-linear-gradient(90deg, var(--arc-border) 0 8px, transparent 8px 16px); } .step-line:last-child::after { display:none; } }
.feature-panel { background:linear-gradient(135deg,#0b0f19 0%,#1e1b4b 100%); border-radius:24px; padding:3rem; color:#fff; position:relative; overflow:hidden; }
.feature-panel::before { content:""; position:absolute; inset:0; background:radial-gradient(400px 200px at 90% 10%, rgba(249,115,22,.25), transparent 60%); }
.feature-panel .content { position:relative; z-index:2; }
.check-list li { display:flex; gap:.75rem; align-items:flex-start; margin-bottom:1rem; }
.check-list i { color:var(--arc-primary); font-size:1.2rem; margin-top:2px; }
.accordion-button { font-weight:700; color:var(--arc-dark-premium); border-radius:12px !important; }
.accordion-button:not(.collapsed) { background:var(--arc-bg-light); color:var(--arc-primary-dark); box-shadow:none; }
.accordion-button:focus { box-shadow:0 0 0 .2rem rgba(249,115,22,.12); }
.accordion-item { border:1px solid var(--arc-border); border-radius:12px !important; margin-bottom:.75rem; overflow:hidden; }

/* ===== Pagination ===== */
.pagination .page-link { color:var(--arc-ink); border:1px solid var(--arc-border); border-radius:10px !important; margin:0 3px; font-weight:700; min-width:42px; text-align:center; }
.pagination .page-link:hover { border-color:var(--arc-primary); color:var(--arc-primary); background:#fff; }
.pagination .page-item.active .page-link { background:var(--arc-primary); border-color:var(--arc-primary); color:#fff; }
.pagination .page-item.disabled .page-link { color:#cbd5e1; }

/* ===== CTA banner ===== */
.cta-premium-box { background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%); border-radius:24px; padding:3.5rem; color:#fff; position:relative; overflow:hidden; }
.cta-premium-box.cta-orange { background:linear-gradient(135deg,#f97316 0%,#ea580c 100%); }

/* ===== Footer ===== */
footer { background:#0b0f19; color:#64748b; font-size:.9rem; padding:5rem 0 3rem; }
footer a { color:#94a3b8; text-decoration:none; }
footer a:hover { color:#fff; }
footer h6 { color:#fff; font-weight:700; margin-bottom:1.2rem; }

/* ===== Bottom Nav (mobile & tablet) ===== */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:1040; background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-top:1px solid var(--arc-border); display:none; }
.bottom-nav .bn-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:.5rem 0 .55rem; color:var(--arc-muted); text-decoration:none; font-size:.68rem; font-weight:700; }
.bottom-nav .bn-item i { font-size:1.3rem; }
.bottom-nav .bn-item.active { color:var(--arc-primary); }
.bottom-nav .bn-fab { flex:0 0 auto; display:flex; justify-content:center; }
.bottom-nav .bn-fab .fab { width:52px; height:52px; border-radius:50%; background:var(--arc-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 8px 18px rgba(249,115,22,.4); margin-top:-20px; }
@media (max-width: 991.98px) {
    .bottom-nav { display:flex; }
    body { padding-bottom:74px; }
    .navbar .navbar-toggler { display:none; }
}

/* ===== Detail pages ===== */
.detail-hero { position:relative; height:420px; background-size:cover; background-position:center; }
.detail-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,15,25,.15) 0%, rgba(11,15,25,.85) 100%); }
.detail-hero .container { position:relative; z-index:2; height:100%; display:flex; align-items:flex-end; padding-bottom:2.5rem; }
.detail-hero h1 { color:#fff; }
.chip { display:inline-flex; align-items:center; gap:.35rem; background:#fff7ed; color:var(--arc-primary-dark); font-size:.78rem; font-weight:700; padding:.3rem .8rem; border-radius:999px; }
.chip-dark { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); }
.info-card { background:#fff; border:1px solid var(--arc-border); border-radius:16px; padding:1.5rem; }
.sidebar-sticky { position:sticky; top:100px; }
.info-list { list-style:none; padding:0; margin:0; }
.info-list li { display:flex; gap:.8rem; align-items:center; padding:.65rem 0; border-bottom:1px dashed var(--arc-border); }
.info-list li:last-child { border-bottom:none; }
.info-list .ico { width:38px; height:38px; border-radius:10px; background:var(--arc-bg-light); color:var(--arc-primary); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }

/* ===== Social feed ===== */
.composer { background:#fff; border:1px solid var(--arc-border); border-radius:16px; padding:1.2rem; }
.composer textarea { border:1px solid var(--arc-border); border-radius:12px; resize:none; width:100%; padding:.8rem 1rem; font-weight:500; }
.composer textarea:focus { outline:none; border-color:var(--arc-primary); box-shadow:0 0 0 .2rem rgba(249,115,22,.12); }
.post-card { background:#fff; border:1px solid var(--arc-border); border-radius:16px; padding:1.3rem; }
.post-avatar { width:44px; height:44px; border-radius:50%; background:var(--arc-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; flex:0 0 auto; }
.post-actions a { color:var(--arc-muted); text-decoration:none; font-weight:600; font-size:.88rem; }
.post-actions a:hover { color:var(--arc-primary); }
.comment { display:flex; gap:.6rem; }
.comment .c-body { background:var(--arc-bg-light); border-radius:14px; padding:.55rem .9rem; }
.comment .c-avatar { width:32px; height:32px; border-radius:50%; background:var(--arc-dark-premium); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.72rem; flex:0 0 auto; }

/* ===== Profile (Komunitas) ===== */
.profile-cover { height:360px; background-size:cover; background-position:center; position:relative; }
.profile-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,15,25,.55),rgba(11,15,25,.25) 45%,rgba(11,15,25,.6)); }
.profile-avatar { width:96px; height:96px; border-radius:22px; border:4px solid #fff; background:var(--arc-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:800; margin-top:-60px; position:relative; z-index:2; box-shadow:0 10px 24px rgba(0,0,0,.15); }

/* ===== Blog ===== */
.blog-card { background:#fff; border:1px solid var(--arc-border); border-radius:16px; overflow:hidden; height:100%; display:flex; flex-direction:column; transition:all .25s ease; }
.blog-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(15,23,42,.08); }
.blog-thumb { height:190px; background-size:cover; background-position:center; position:relative; }
.blog-cat { position:absolute; top:12px; left:12px; background:var(--arc-primary); color:#fff; font-size:.72rem; font-weight:700; padding:.28rem .7rem; border-radius:6px; }
.blog-meta { color:var(--arc-muted); font-size:.82rem; }
.article-body { font-size:1.08rem; line-height:1.85; color:#334155; }
.article-body h2, .article-body h3 { margin:2rem 0 1rem; color:var(--arc-dark-premium); }
.article-body p { margin-bottom:1.2rem; }
.article-body img { border-radius:16px; margin:1.5rem 0; max-width:100%; }
.article-body blockquote { border-left:4px solid var(--arc-primary); background:var(--arc-bg-light); padding:1rem 1.5rem; border-radius:0 12px 12px 0; font-style:italic; color:var(--arc-ink); margin:1.5rem 0; }

/* ===== Auth ===== */
.auth-wrap { min-height:100vh; display:flex; }
.auth-visual { flex:1; position:relative; background-size:cover; background-position:center; color:#fff; padding:3rem; display:flex; flex-direction:column; justify-content:space-between; }
.auth-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(11,15,25,.92), rgba(30,27,75,.75)); }
.auth-visual > * { position:relative; z-index:2; }
.auth-form-side { flex:1; display:flex; align-items:center; justify-content:center; padding:2.5rem 1.5rem; }
.auth-card { width:100%; max-width:440px; }
.form-control-arc { border:1px solid var(--arc-border); border-radius:10px; padding:.8rem 1rem; font-weight:500; }
.form-control-arc:focus { border-color:var(--arc-primary); box-shadow:0 0 0 .2rem rgba(249,115,22,.12); }
.social-btn { border:1px solid var(--arc-border); border-radius:10px; padding:.7rem; font-weight:700; background:#fff; color:var(--arc-ink); width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; }
.social-btn:hover { border-color:var(--arc-primary); color:var(--arc-ink); }
.auth-divider { display:flex; align-items:center; gap:1rem; color:var(--arc-muted); font-size:.85rem; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:var(--arc-border); }
@media (max-width: 767.98px){ .auth-visual { display:none; } }

/* ===== Onboarding ===== */
.onboard-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0b0f19,#1e1b4b); padding:2rem; }
.onboard-card { background:#fff; border-radius:24px; max-width:460px; width:100%; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.3); }
.onboard-illus { height:280px; background-size:cover; background-position:center; }
.onboard-dot { width:9px; height:9px; border-radius:999px; background:var(--arc-border); display:inline-block; transition:all .2s; }
.onboard-dot.active { width:26px; background:var(--arc-primary); }

/* Chip pilihan onboarding: input .btn-check disembunyikan, labelnya yang jadi chip. */
.btn-check:checked + .btn-outline-arc { background: var(--arc-dark-premium); color:#fff; }
.btn-check:focus-visible + .btn-outline-arc { outline:2px solid var(--arc-primary); outline-offset:2px; }
.btn-outline-arc.btn-sm { padding:.45rem 1rem; border-width:2px; }

/* ===== Invoice / Checkout ===== */
.pay-method { border:1px solid var(--arc-border); border-radius:12px; padding:1rem 1.1rem; cursor:pointer; transition:all .18s ease; display:flex; align-items:center; gap:.9rem; }
.pay-method:hover { border-color:var(--arc-primary); }
.pay-method.selected { border-color:var(--arc-primary); background:#fff7ed; }
.pay-method .pm-ico { width:42px; height:42px; border-radius:10px; background:var(--arc-bg-light); color:var(--arc-primary); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex:0 0 auto; }
.pay-method .pm-check { margin-left:auto; color:var(--arc-primary); opacity:0; font-size:1.2rem; }
.pay-method.selected .pm-check { opacity:1; }
.invoice-status { background:#fff7ed; color:var(--arc-primary-dark); border:1px solid #fed7aa; border-radius:10px; padding:.5rem .9rem; font-weight:700; font-size:.85rem; display:inline-flex; align-items:center; gap:.4rem; }
.countdown-badge { background:var(--arc-dark-premium); color:#fff; border-radius:10px; padding:.4rem .8rem; font-weight:700; font-variant-numeric:tabular-nums; }
.pay-summary-row { display:flex; justify-content:space-between; padding:.4rem 0; color:var(--arc-muted); }
.pay-summary-row.total { border-top:1px dashed var(--arc-border); margin-top:.5rem; padding-top:.8rem; color:var(--arc-dark-premium); font-weight:800; font-size:1.15rem; }

/* ===== Dashboard CMS ===== */
.dash-layout { display:flex; min-height:100vh; background:var(--arc-bg-light); }
.dash-sidebar { width:264px; background:#fff; border-right:1px solid var(--arc-border); display:flex; flex-direction:column; }
@media (min-width:992px){
    .dash-sidebar { position:fixed !important; top:0; left:0; height:100vh; z-index:30; }
    .dash-main { margin-left:264px; }
}
.dash-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.dash-brand { flex:0 0 auto; }
.dash-nav { flex:1 1 auto; }
.dash-brand { padding:1.05rem 1.3rem; border-bottom:1px solid var(--arc-border); }
.dash-nav { padding:1rem .8rem; overflow-y:auto; }
.dash-section-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--arc-muted); padding:.9rem .8rem .35rem; }
.dash-link { display:flex; align-items:center; gap:.75rem; padding:.65rem .9rem; border-radius:10px; color:var(--arc-ink); text-decoration:none; font-weight:600; font-size:.92rem; margin-bottom:2px; }
.dash-link i { font-size:1.15rem; }
.dash-link:hover { background:var(--arc-bg-light); color:var(--arc-primary); }
.dash-link.active { background:var(--arc-primary); color:#fff; box-shadow:0 6px 14px rgba(249,115,22,.25); }
.dash-link .badge-count { margin-left:auto; background:#fff7ed; color:var(--arc-primary-dark); font-size:.7rem; font-weight:700; padding:.1rem .5rem; border-radius:999px; }
.dash-link.active .badge-count { background:rgba(255,255,255,.25); color:#fff; }
.dash-topbar { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--arc-border); padding:.75rem 1.2rem; display:flex; align-items:center; gap:1rem; }
.dash-search { position:relative; max-width:360px; width:100%; }
.dash-search i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--arc-muted); }
.dash-search input { border:1px solid var(--arc-border); border-radius:10px; padding:.55rem .9rem .55rem 2.2rem; width:100%; background:var(--arc-bg-light); font-weight:500; }
.dash-search input:focus { outline:none; border-color:var(--arc-primary); background:#fff; box-shadow:0 0 0 .2rem rgba(249,115,22,.12); }
.icon-btn { width:42px; height:42px; border-radius:10px; border:1px solid var(--arc-border); background:#fff; color:var(--arc-ink); display:inline-flex; align-items:center; justify-content:center; position:relative; }
.icon-btn:hover { border-color:var(--arc-primary); color:var(--arc-primary); }
.icon-btn .dot { position:absolute; top:8px; right:9px; width:8px; height:8px; background:var(--arc-primary); border-radius:50%; border:2px solid #fff; }
.stat-card { background:#fff; border:1px solid var(--arc-border); border-radius:16px; padding:1.3rem; height:100%; }
.stat-ico { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.dash-card { background:#fff; border:1px solid var(--arc-border); border-radius:16px; }
.trend-up { color:#16a34a; font-weight:700; font-size:.82rem; }
.trend-down { color:#dc2626; font-weight:700; font-size:.82rem; }
.bar-chart { display:flex; align-items:flex-end; gap:.55rem; height:190px; }
.bar-chart .bar { flex:1; background:linear-gradient(180deg,var(--arc-primary),#fdba74); border-radius:8px 8px 0 0; min-height:6px; transition:.2s; }
.bar-chart .bar:hover { filter:brightness(.94); }
.donut { position:relative; width:170px; height:170px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.donut::before { content:""; position:absolute; width:108px; height:108px; background:#fff; border-radius:50%; }
.legend-dot { width:11px; height:11px; border-radius:3px; display:inline-block; }
.dash-table th { font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--arc-muted); font-weight:700; white-space:nowrap; }
.dash-table td { vertical-align:middle; }
.badge-soft-green { background:#dcfce7; color:#16a34a; font-weight:700; font-size:.75rem; padding:.25rem .6rem; border-radius:999px; }
.badge-soft-orange { background:#fff7ed; color:var(--arc-primary-dark); font-weight:700; font-size:.75rem; padding:.25rem .6rem; border-radius:999px; }
.badge-soft-red { background:#fef2f2; color:#dc2626; font-weight:700; font-size:.75rem; padding:.25rem .6rem; border-radius:999px; }

/* ===== Form tambah data (dashboard) ===== */
.dash-form-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
@media (max-width: 991.98px) { .dash-form-side { position: static; } }

.repeater-row { display:flex; gap:.5rem; align-items:flex-start; margin-bottom:.5rem; }
.repeater-row .form-control-arc { padding:.55rem .8rem; }
.repeater-remove { flex:0 0 auto; width:38px; height:38px; border-radius:10px; border:1px solid var(--arc-border); background:#fff; color:var(--arc-muted); }
.repeater-remove:hover { border-color:#dc3545; color:#dc3545; }

.cover-drop { border:2px dashed var(--arc-border); border-radius:14px; padding:1.25rem; text-align:center; cursor:pointer; transition:all .2s; background:#fff; }
.cover-drop:hover { border-color:var(--arc-primary); background:rgba(249,115,22,.03); }
.cover-drop img { max-width:100%; border-radius:10px; display:block; margin:0 auto; }

/* =========================================================
   CMS: penanda proses & status
   ========================================================= */

/* Badge status. Warna hijau/oranye/merah sudah ada di atas; dua ini
   melengkapi kamus status di const STATUSES tiap model. */
.badge-soft-gray { background:#f1f5f9; color:#475569; font-weight:700; font-size:.75rem; padding:.25rem .6rem; border-radius:999px; }
.badge-soft-blue { background:#eff6ff; color:#2563eb; font-weight:700; font-size:.75rem; padding:.25rem .6rem; border-radius:999px; }

/* Progress bar tipis di puncak layar saat ada permintaan berjalan. */
.dash-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:2000; opacity:0; transition:opacity .2s; pointer-events:none; }
.dash-progress.is-active { opacity:1; }
.dash-progress > span { display:block; height:100%; width:40%; border-radius:0 3px 3px 0;
    background:linear-gradient(90deg, var(--arc-primary), #fdba74);
    animation:dash-progress-slide 1.1s ease-in-out infinite; }
@keyframes dash-progress-slide {
    0%   { margin-left:-40%; width:40%; }
    50%  { margin-left:30%;  width:55%; }
    100% { margin-left:100%; width:40%; }
}

/* Skeleton baris tabel selama data baru diambil. */
.skeleton-bar { display:block; height:.85rem; border-radius:6px;
    background:linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
    background-size:400% 100%; animation:skeleton-shimmer 1.3s ease-in-out infinite; }
@keyframes skeleton-shimmer {
    0%   { background-position:100% 50%; }
    100% { background-position:0 50%; }
}
[data-list-region].is-loading { pointer-events:none; }
[data-list-region].is-loading .pagination { opacity:.4; }

/* Tombol yang sedang memproses: teksnya tetap, ditambah cincin berputar. */
button.is-loading { position:relative; color:transparent !important; pointer-events:none; }
button.is-loading::after { content:''; position:absolute; top:50%; left:50%; width:1rem; height:1rem;
    margin:-.5rem 0 0 -.5rem; border-radius:50%;
    border:2px solid currentColor; border-right-color:transparent; color:#fff;
    animation:dash-spin .6s linear infinite; }
.btn-outline-arc.is-loading::after, .btn-outline-danger.is-loading::after, .btn-light.is-loading::after { color:var(--arc-primary); }
@keyframes dash-spin { to { transform:rotate(360deg); } }

/* Notifikasi ringkas setelah aksi AJAX. */
.dash-toasts { position:fixed; right:1rem; bottom:1rem; z-index:2100; display:flex; flex-direction:column; gap:.5rem; max-width:min(360px, calc(100vw - 2rem)); }
.dash-toast { padding:.75rem 1rem; border-radius:12px; font-size:.875rem; font-weight:600; color:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.18); animation:dash-toast-in .25s ease-out; }
.dash-toast.is-success { background:#16a34a; }
.dash-toast.is-error { background:#dc2626; }
.dash-toast.is-leaving { opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
@keyframes dash-toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
    .dash-progress > span, .skeleton-bar, button.is-loading::after { animation:none; }
    .dash-toast { animation:none; }
}

/* Huruf awal pada thumbnail konten yang belum punya sampul. */
.thumb-letter { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:3rem; font-weight:800; color:rgba(255,255,255,.55); letter-spacing:-.02em; }
.explore-thumb, .blog-thumb { position:relative; }