/* app.css - BUNDLE build dari 7 modul (tokens,themes,base,components,header,footer,sections). Regenerate saat modul berubah. */ /* ===== tokens.css ===== */ /* ========================================================= tokens.css — Design tokens (single source of truth) Dark adalah default (:root). Override tema terang ada di themes.css. Semua warna komponen WAJIB lewat variabel di sini agar scalable. ========================================================= */ :root { color-scheme: dark; /* Surfaces */ --bg: #1a0b0d; --bg-deep: #12070a; --surface: #2a1216; --surface-lift: #351a1e; /* Body background tint (radial glow di belakang konten) */ --body-glow-1: color-mix(in srgb, var(--primary) 10%, transparent); --body-glow-2: color-mix(in srgb, var(--secondary) 8%, transparent); /* Text */ --text: #eef0ff; --muted: #9aa0cc; --muted-soft: #8b90bf; /* Brand */ --primary: #ffb020; --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent); --primary-glow: color-mix(in srgb, var(--primary) 28%, transparent); --secondary: #e0342b; --on-primary: #1a0b0d; /* teks di atas tombol primary */ --link: #3fc6f0; /* aksen cyan (meniru "Kredit" di logo) untuk link konten */ /* Lines & elevation */ --line: rgba(238, 240, 255, 0.09); --line-strong: rgba(238, 240, 255, 0.16); --shadow: 0 20px 48px rgba(0, 0, 0, 0.38); --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22); /* Card / hero surfaces (ditokenisasi supaya tema terang tinggal override) */ --card-bg: linear-gradient(160deg, rgba(27, 31, 74, 0.98), rgba(40, 15, 19, 0.96)); --card-glow-a: color-mix(in srgb, var(--primary) 12%, transparent); --card-glow-b: color-mix(in srgb, var(--primary) 4.5%, transparent); --card-border: color-mix(in srgb, var(--primary) 16%, transparent); --hero-bg: linear-gradient(150deg, rgba(48, 18, 22, 0.98), rgba(40, 15, 19, 0.94)); --hero-border: color-mix(in srgb, var(--primary) 32%, transparent); --tile-bg: rgba(255, 255, 255, 0.05); --nav-mobile-bg: var(--surface); --header-bg: rgba(7, 10, 20, 0.82); /* Footer */ --footer-bg: #12070a; --footer-text: #eef0ff; --footer-muted: #9aa0cc; --footer-link-hover: #ffb020; /* Radii */ --radius: 20px; --radius-xl: 36px; /* Typography */ --font-display: 'Outfit', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* Meta theme-color value (dibaca layout.js untuk update ) */ --meta-theme: #e0342b; } /* ===== themes.css ===== */ /* ========================================================= themes.css — Override tema TERANG Aktif saat . Karena semua komponen memakai token dari tokens.css, di sini cukup menimpa tokennya. ========================================================= */ html[data-theme="light"] { color-scheme: light; /* Surfaces */ --bg: #fbf3f2; --bg-deep: #f5e9e8; --surface: #ffffff; --surface-lift: #fbeeed; --body-glow-1: color-mix(in srgb, var(--primary) 7%, transparent); --body-glow-2: color-mix(in srgb, var(--secondary) 5%, transparent); /* Text */ --text: #2a0f12; --muted: #5a6088; --muted-soft: #5f6488; /* Brand (sedikit lebih pekat agar kontras di latar terang) */ --primary: #c7701e; --primary-soft: color-mix(in srgb, var(--primary) 10%, transparent); --primary-glow: color-mix(in srgb, var(--primary) 22%, transparent); --secondary: #e0342b; --on-primary: #2a0f12; /* teks navy di atas tombol emas (kontras lebih baik) */ --link: #0e7fb0; /* cyan lebih pekat agar terbaca di latar terang */ /* Lines & elevation */ --line: rgba(42, 15, 18, 0.10); --line-strong: rgba(42, 15, 18, 0.16); --shadow: 0 20px 48px rgba(30, 34, 70, 0.14); --shadow-sm: 0 8px 24px rgba(30, 34, 70, 0.10); /* Card / hero surfaces */ --card-bg: linear-gradient(160deg, #ffffff, #f2f5fd); --card-glow-a: color-mix(in srgb, var(--primary) 6%, transparent); --card-glow-b: color-mix(in srgb, var(--primary) 3%, transparent); --card-border: color-mix(in srgb, var(--primary) 14%, transparent); --hero-bg: linear-gradient(150deg, #ffffff, #f2f5fd); --hero-border: color-mix(in srgb, var(--primary) 24%, transparent); --tile-bg: rgba(42, 15, 18, 0.03); --nav-mobile-bg: #ffffff; --header-bg: rgba(255, 255, 255, 0.85); /* Footer */ --footer-bg: #f5e9e8; --footer-text: #2a0f12; --footer-muted: #5a6088; --footer-link-hover: #c7701e; --meta-theme: #ffffff; } /* --- Tema terang: HEADER tetap "berbrand" (navy-biru seperti latar logo) --- Body tetap terang, tapi header memakai latar navy-biru + teks terang + emas cerah + garis bawah emas, sehingga logo (badge navy + emas/cyan) menyatu dan identitas brand tetap kuat di mode terang. Token di-scope ke .site-header saja, jadi hanya header (beserta submenu & mobile nav di dalamnya) yang berubah. */ html[data-theme="light"] .site-header { color: var(--text); border-bottom-color: color-mix(in srgb, var(--primary) 22%, transparent); /* Header tetap GELAP di mode terang (branded), tapi warna GELAP + aksen (ticker/CTA) IKUT SKIN: --primary/--secondary TIDAK di-hardcode lagi → mengikuti skin (nilai light). */ --header-bg: color-mix(in srgb, #0b0d1e 84%, var(--primary)); --text: #eef0ff; --muted: rgba(238, 240, 255, 0.72); --muted-soft: rgba(238, 240, 255, 0.5); --primary-soft: color-mix(in srgb, var(--primary) 16%, transparent); --on-primary: #ffffff; --line: rgba(238, 240, 255, 0.12); --line-strong: rgba(238, 240, 255, 0.2); --tile-bg: rgba(255, 255, 255, 0.08); --nav-mobile-bg: color-mix(in srgb, #14162e 86%, var(--primary)); --shadow: 0 22px 50px rgba(6, 9, 30, 0.35); } /* ===== base.css ===== */ /* ========================================================= base.css — Fonts, reset, base elemen, aksesibilitas, layout primitives, dan tipografi global. ========================================================= */ /* --- 00. Self-hosted Fonts (path relatif terhadap folder /assets/css/) --- */ @font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-300i.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* --- 01. Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; /* Background rata (flat) — tanpa glow yang terkonsentrasi di atas, supaya hero dan seluruh section memakai warna latar yang sama (tidak ada seam). */ background: var(--bg); color: var(--text); line-height: 1.65; min-height: 100dvh; transition: background-color 0.3s ease, color 0.3s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } p, li, dd { color: var(--muted); font-weight: 400; } li::marker { color: var(--primary); } /* --- 02. Accessibility --- */ .skip-link { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .skip-link:focus-visible { position: fixed !important; top: 14px !important; left: 14px !important; z-index: 9999 !important; width: auto !important; height: auto !important; padding: 12px 20px !important; margin: 0 !important; overflow: visible !important; clip: auto !important; border-radius: 12px !important; background: var(--primary) !important; color: var(--on-primary) !important; font-weight: 700 !important; font-family: var(--font-display) !important; } :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; } /* --- 03. Layout primitives --- */ .layout-container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; } .layout-container--narrow { width: min(860px, calc(100% - 40px)); } .section-block { padding: 56px 0; } /* label di atas, h2 di bawah (menumpuk) — seragam dengan section lain */ .section-heading { margin-bottom: 28px; } .flow > * + * { margin-top: 1.1rem; } /* --- 04. Typography --- */ h1, h2, h3 { font-family: var(--font-display); color: var(--text); line-height: 1.15; letter-spacing: -0.03em; } h1 { font-size: clamp(2rem, 4.5vw, 3.75rem); font-weight: 800; } h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; } h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; } .section-heading h2, .section-card h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.035em; } .label-text { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--primary); font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .label-text::before { content: ''; display: inline-block; width: 18px; height: 2px; background: var(--primary); border-radius: 2px; } .text-lead { max-width: 680px; color: var(--muted); font-size: 1.05rem; font-weight: 400; line-height: 1.7; } /* --- 05. Reduced motion --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===== components.css ===== */ /* ========================================================= components.css — Komponen reusable: tombol, kartu, list proses, breadcrumb, feature card, FAQ, inline link. ========================================================= */ /* --- Buttons --- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 1px solid transparent; border-radius: 12px; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; -webkit-tap-highlight-color: transparent; } .button:hover { transform: translateY(-2px); } .button:active { transform: translateY(0); } .button:focus-visible { outline-offset: 4px; } /* CTA emas standar — SEMUA tombol CTA memakai style ini (gradien mengalir + kilau, teks navy). Keyframes cta-flow/cta-shine didefinisikan di sections.css (global). */ .button--primary { position: relative; overflow: hidden; color: var(--on-primary); background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary)); background-size: 300% 100%; animation: cta-flow 4s linear infinite; box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 40%, transparent); } .button--primary::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: translateX(-130%); animation: cta-shine 3.4s ease-in-out infinite; } .button--primary:hover { filter: brightness(1.06); box-shadow: 0 14px 40px color-mix(in srgb, var(--primary) 50%, transparent); } @media (prefers-reduced-motion: reduce) { .button--primary, .button--primary::after { animation: none; } } @keyframes cta-flow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes cta-shine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(230%); } } .button--secondary { background: var(--tile-bg); border-color: var(--line-strong); color: var(--text); } .button--secondary:hover { border-color: color-mix(in srgb, var(--primary) 50%, transparent); background: var(--primary-soft); color: var(--primary); } .button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* --- Cards --- */ .section-card, .feature-card, .faq-item { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); } .section-card { padding: 36px; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18); overflow: hidden; position: relative; border-color: var(--card-border); background: radial-gradient(ellipse 62% 52% at right top, var(--card-glow-a), transparent 56%), radial-gradient(ellipse 42% 38% at left bottom, var(--card-glow-b), transparent 60%), var(--card-bg); } .section-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--card-glow-b) 52%, transparent); pointer-events: none; } .section-card > * { position: relative; z-index: 1; } /* Content lists inside cards */ .section-card ul, .section-card ol { margin: 0 0 1.15em; padding-left: 1.5em; list-style-position: outside; } .section-card ul { list-style: disc; } .section-card ol { list-style: decimal; } .section-card li { margin: .5em 0; line-height: 1.6; } .section-card li::marker { color: var(--primary); } .section-card li > b, .section-card li > strong { color: var(--text); } /* --- Process / ordered list --- */ .process-list { list-style: none; counter-reset: step; display: grid; gap: 12px; } .process-list li { counter-increment: step; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--primary-soft); color: var(--muted); line-height: 1.6; } .process-list li::before { content: counter(step); flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--on-primary); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; } /* --- Action row --- */ .action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* --- Inline links (di dalam konten utama) — aksen cyan seperti "Kredit" di logo --- */ main a:not(.button):not(.site-brand) { color: var(--link); font-weight: 500; } main a:not(.button):not(.site-brand):hover { color: var(--primary); } /* --- Promo card (hub browse): banner thumbnail + CTA beranimasi --- */ .promo-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .promo-card__banner { aspect-ratio: 1200 / 630; overflow: hidden; background: var(--bg-deep); border-bottom: 1px solid var(--line); } .promo-card__banner img { width: 100%; height: 100%; object-fit: cover; } .promo-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .promo-card__body h3 { margin-bottom: 6px; font-size: 1.05rem; } .promo-card__body p { margin: 0 0 16px; flex: 1; } /* promo-cta pakai .button.button--primary (style CTA standar); ini hanya layout */ .promo-cta { margin-top: auto; width: 100%; text-transform: uppercase; letter-spacing: 0.02em; } @media (prefers-reduced-motion: reduce) { .promo-card__banner img { transition: none; } } /* --- List table (crawlable) — daftar promo/child untuk internal linking di hub --- */ .list-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); } .list-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .list-table thead th { text-align: left; padding: 14px 18px; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; color: var(--muted); background: var(--tile-bg); border-bottom: 1px solid var(--line); white-space: nowrap; } .list-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: middle; } .list-table tbody tr:last-child td { border-bottom: 0; } .list-table tbody tr:hover { background: var(--primary-soft); } .list-table a.list-name { font-family: var(--font-display); font-weight: 700; color: var(--text); } .list-table a.list-name:hover { color: var(--primary); } .list-table .list-tag { display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--tile-bg); border: 1px solid var(--line); color: var(--muted-soft); font-size: 0.74rem; font-weight: 600; font-family: var(--font-display); } .list-table .list-go { color: var(--primary); font-weight: 700; font-family: var(--font-display); white-space: nowrap; } .list-table .list-go:hover { color: var(--secondary); } @media (max-width: 680px) { .list-table .col-hide { display: none; } .list-table td, .list-table thead th { padding: 12px 12px; } } /* --- Related links (chips) — dipakai di halaman spoke/child untuk internal linking --- */ .chip-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.1rem; } .chip-links a { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: var(--tile-bg); border: 1px solid var(--line); color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .chip-links a:hover { border-color: var(--card-border); background: var(--primary-soft); color: var(--primary); } /* Judul kartu hub = anchor SEO; ::after meregang menutupi kartu agar seluruh kartu klik-able */ .feature-card .card-link { color: var(--text); } /* --- Breadcrumb --- */ .section-breadcrumb { padding: 10px 0; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted-soft); font-size: 0.875rem; } .breadcrumb li { display: inline-flex; align-items: center; } .breadcrumb a:hover { color: var(--primary); } /* --- Feature card grid --- */ .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 1.1rem; align-items: stretch; } .card-grid > article:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 10px); margin-left: auto; margin-right: auto; width: 100%; } /* Grid 3 kolom untuk halaman HUB (daftar spoke/offer yang banyak) */ .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid--3 > article:last-child:nth-child(odd) { grid-column: auto; max-width: none; } @media (max-width: 900px) { .card-grid--3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .card-grid--3 { grid-template-columns: 1fr; } } .feature-card { position: relative; min-height: 100%; padding: 28px; display: flex; flex-direction: column; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color 0.2s ease, transform 0.2s ease; } .feature-card:hover { border-color: color-mix(in srgb, var(--primary) 24%, transparent); transform: translateY(-2px); } .feature-card .card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } .feature-card .card-link:hover { color: var(--primary); } .feature-card .card-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .feature-card > span { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-weight: 700; } .feature-card .action-row { margin-top: auto; } /* --- FAQ (flat: tanpa kotak/border kartu, hanya garis pemisah tipis) --- */ :root { interpolate-size: allow-keywords; } .faq-list { display: grid; gap: 0; } .faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); /* hanya garis pemisah antar item */ border-radius: 0; } .faq-item:last-child { border-bottom: 0; } .faq-question { list-style: none; } .faq-question::-webkit-details-marker { display: none; } .faq-question { width: 100%; padding: 18px 6px; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: transparent; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; cursor: pointer; user-select: none; transition: color 0.15s ease; } .faq-question:hover { color: var(--primary); } .faq-question span { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: var(--primary-soft); color: var(--primary); font-size: 1rem; transition: transform 0.25s ease; } .faq-item[open] .faq-question span { transform: rotate(45deg); } .faq-answer { padding: 0 6px 20px; color: var(--muted); font-weight: 400; line-height: 1.7; overflow: hidden; transition: height 0.32s ease; } details.faq-item[open] > .faq-answer { height: auto; } @media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } .card-grid > article:last-child:nth-child(odd) { grid-column: auto; max-width: 100%; } } @media (max-width: 560px) { .card-grid { gap: 12px; } .feature-card { padding: 20px; } .feature-card .button { width: 100%; min-height: 44px; font-size: 0.875rem; } .action-row, .action-row .button { width: 100%; } } /* ===== header.css ===== */ /* ========================================================= header.css — Site header, navigasi + submenu (child menu), tombol tema, dan mobile nav. Markup di-render oleh assets/js/layout.js. ========================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Reserve tinggi minimum agar tidak ada layout shift sebelum JS mengisi header */ .header-layout { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .site-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; flex-shrink: 0; } .site-brand__logo { width: 105px; height: auto; flex: 0 0 auto; object-fit: contain; } /* --- Primary nav --- */ .site-nav { display: flex; flex: 1; justify-content: center; } .site-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .site-nav__item { position: relative; display: flex; align-items: center; } .site-nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 8px; color: var(--muted); font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; } .site-nav__link:hover, .site-nav__item:hover > .site-nav__link, .site-nav__item:focus-within > .site-nav__link { background: var(--tile-bg); color: var(--text); } .site-nav__link[aria-current="page"] { color: var(--primary); } /* Caret = tombol terpisah (anchor tetap navigasi ke halaman induk) */ .site-nav__caret { display: inline-grid; place-items: center; width: 22px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); border-radius: 6px; } .site-nav__caret::before { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.2s ease; } .site-nav__item:hover > .site-nav__caret, .site-nav__item:focus-within > .site-nav__caret { color: var(--text); } /* --- Submenu (dropdown desktop) --- */ .site-subnav { position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; display: grid; gap: 2px; padding: 8px; margin: 0; list-style: none; background: var(--nav-mobile-bg); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 30; } .site-subnav::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } .site-nav__item--has-children:hover > .site-subnav, .site-nav__item--has-children:focus-within > .site-subnav { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav__item--has-children:hover > .site-nav__caret::before, .site-nav__item--has-children:focus-within > .site-nav__caret::before { transform: rotate(180deg); } .site-subnav a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--muted); font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; } .site-subnav a:hover, .site-subnav a:focus-visible { background: var(--primary-soft); color: var(--primary); } /* --- Header right side: tema + CTA + mobile toggle --- */ .header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .theme-toggle { width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; display: inline-grid; place-items: center; background: transparent; color: var(--text); font-size: 1.05rem; line-height: 1; transition: background 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 40%, transparent); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: block; } .header-cta { min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 0.85rem; } .site-nav__cta-wrap { display: none; } .nav-toggle { width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; display: none; place-items: center; background: transparent; color: var(--text); font-size: 1.1rem; transition: background 0.15s ease, border-color 0.15s ease; } .nav-toggle:hover { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 40%, transparent); } /* --- Mobile --- */ @media (max-width: 900px) { .nav-toggle { display: inline-grid; } .header-cta { display: none; } /* Kelompokkan tombol tema + hamburger di kanan (jaraknya rapat) */ .header-layout { gap: 10px; } .header-actions { margin-left: auto; } .site-nav { position: absolute; top: 80px; left: 16px; right: 16px; display: none; flex: none; padding: 14px; background: var(--nav-mobile-bg); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow); max-height: calc(100dvh - 96px); overflow-y: auto; } .site-nav.is-open { display: block; } .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .site-nav__item { flex-wrap: wrap; } .site-nav__link { flex: 1; padding: 11px 14px; font-size: 0.95rem; } .site-nav__caret { width: 44px; height: 44px; } .site-nav__caret::before { border-left-width: 5px; border-right-width: 5px; border-top-width: 6px; } /* Submenu jadi accordion di mobile (hanya buka via tombol caret) */ .site-subnav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--line-strong); border-radius: 0; margin: 2px 0 6px 14px; padding: 2px 0 2px 8px; min-width: 0; display: none; width: 100%; } /* Di mobile submenu HANYA dibuka via tombol caret (kelas --open). Reveal hover/focus-within desktop tak berpengaruh di sini karena hanya mengubah opacity/visibility, sedangkan display default none. */ .site-nav__item--open > .site-subnav { display: grid; } .site-nav__item--open > .site-nav__caret::before { transform: rotate(180deg); } .site-nav__cta-wrap { display: block; margin-top: 8px; } .site-nav__cta { display: inline-flex; width: 100%; justify-content: center; } } @media (max-width: 560px) { .header-layout { position: relative; } .site-brand__logo { width: 88px; height: auto; } } /* ===== footer.css ===== */ /* ========================================================= footer.css — Site footer (payments / license / responsible, brand block, kolom navigasi, bottom bar). Markup di-render oleh assets/js/layout.js. ========================================================= */ .site-footer { margin-top: 56px; background: var(--footer-bg); color: var(--footer-text); border-top: 1px solid var(--line); } .footer-top { padding: 56px 0 42px; } .footer-top__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; align-items: start; } /* payment (12) & license (11) = 2 kolom setara ~4 baris; responsible (3) = strip full-width di bawah */ .footer-media-group--responsible { grid-column: 1 / -1; } .footer-side-groups { display: grid; gap: 32px; } .footer-media-group h3, .footer-links h3 { margin-bottom: 18px; font-family: var(--font-display); color: var(--footer-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; } .footer-image-grid { display: grid; align-items: center; gap: 12px; } .footer-image-grid--payment, .footer-image-grid--license { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-image-grid--responsible { grid-template-columns: repeat(3, minmax(0, 132px)); } .footer-image-grid img { width: 100%; height: 52px; padding: 10px 12px; object-fit: contain; /* Latar NETRAL (abu-abu tengah) — logo bermacam warna (putih & hitam) sama-sama terbaca. */ background: #8b9099; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; transition: background 0.2s ease, border-color 0.2s ease; } .footer-image-grid img:hover { background: #9aa0a9; border-color: color-mix(in srgb, var(--primary) 50%, transparent); } .footer-mid { padding: 44px 0 36px; border-top: 1px solid var(--line); } .footer-mid__grid { display: grid; grid-template-columns: 1.4fr 0.7fr 0.7fr 1fr; gap: 44px; } .site-footer p, .site-footer a { color: var(--footer-muted); font-weight: 400; } .site-footer a:hover { color: var(--footer-link-hover); } .footer-links a { display: block; margin-bottom: 10px; font-size: 0.9rem; transition: color 0.15s ease, padding-left 0.15s ease; } .footer-links a:hover { padding-left: 4px; } .footer-links a[aria-current="page"] { color: var(--footer-link-hover); font-weight: 700; } .footer-brand { margin-bottom: 16px; } .footer-bottom { padding: 20px 0 36px; border-top: 1px solid var(--line); text-align: center; } .footer-bottom p { color: var(--footer-muted); font-size: 0.875rem; } @media (max-width: 1024px) { .footer-top__grid { grid-template-columns: 1fr; gap: 30px; } .footer-mid__grid { grid-template-columns: 1fr 1fr; gap: 32px 44px; } .footer-image-grid--payment, .footer-image-grid--license { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 560px) { .footer-mid__grid { grid-template-columns: 1fr; } .footer-image-grid--payment, .footer-image-grid--license, .footer-image-grid--responsible { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .footer-image-grid img { height: 46px; padding: 8px 10px; } } /* ===== sections.css ===== */ /* ========================================================= sections.css — Section-spesifik: home hero, banner slider (rasio OG 1200x630), page hero, marquee provider, floating actions. ========================================================= */ /* --- Home Hero --- */ /* Tanpa background/::before khusus → memakai background body yang sama dengan section lain, sehingga hero tidak terlihat terpisah karena kontras. */ .home-hero { padding: 32px 0 48px; position: relative; } /* Banner kini rasio lebar (1.91:1) → hero 1 KOLOM, banner full-width agar tidak terpotong */ .home-hero__layout { position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; } /* Banner tampil di ATAS secara visual, tapi H1/konten TETAP pertama di urutan HTML (order tidak mengubah DOM → H1 tetap di atas untuk SEO & aksesibilitas). */ .home-hero__layout .home-banner-slider { order: 1; } .home-hero__layout .home-hero__content { order: 2; } .home-hero__content { padding: 48px 40px; border: 1px solid var(--hero-border); border-radius: var(--radius-xl); text-align: center; /* konten dipusatkan agar tidak ada ruang kosong di sisi kanan */ background: radial-gradient(ellipse 90% 70% at 50% 0%, var(--card-glow-a), transparent 60%), var(--hero-bg); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.20), 0 0 54px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .home-hero__content h1 { margin: 6px auto 18px; max-width: 680px; } .home-hero__content .text-lead { margin-left: auto; margin-right: auto; } .home-hero__content .page-hero__meta, .home-hero__content .action-row { justify-content: center; } /* Banner STATIS untuk hero subpage (tampil di atas seperti homepage, tanpa slider) */ .home-hero__banner { order: 1; position: relative; aspect-ratio: 1200 / 630; overflow: hidden; border: 1px solid var(--hero-border); border-radius: var(--radius-xl); background: var(--bg-deep); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.30); } .home-hero__banner img { width: 100%; height: 100%; object-fit: cover; } /* Desktop: banner muat 1 layar TANPA scroll & TANPA crop. Tinggi dibatasi ke viewport; lebar mengikuti tinggi (rasio 1200:630 dijaga) → layar pendek/skala tinggi = banner mengecil proporsional, layar normal = tampil penuh ~900px. File 1200×630 (og:image) tak berubah. */ @media (min-width: 900px) { .home-hero__layout { max-width: 900px; margin-inline: auto; } .home-banner-slider, .home-hero__banner { height: min(471px, calc(100vh - 210px)); width: auto; max-width: 100%; justify-self: center; margin-inline: auto; } } /* --- Banner slider (rasio Open Graph 1200:630 ≈ 1.91:1 agar tidak terpotong saat di-share) --- */ .home-banner-slider { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; border: 1px solid var(--hero-border); border-radius: var(--radius-xl); background: var(--bg-deep); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.30); } .home-banner-slider__track, .home-banner-slide { position: absolute; inset: 0; } .home-banner-slide { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .home-banner-slide.is-active { opacity: 1; visibility: visible; } .home-banner-slide img { width: 100%; height: 100%; object-fit: cover; } .home-banner-slider__controls { position: absolute; right: 18px; bottom: 18px; z-index: 2; display: flex; gap: 12px; } .home-banner-dot { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .home-banner-dot::after { content: ''; width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); transition: width 0.25s ease, background 0.25s ease; } .home-banner-dot.is-active::after { width: 28px; background: var(--primary); } /* Provider marquee dipindah ke assets/js/extra.js (section non-crawl, CSS di-inject dari sana). */ /* --- Page Hero (no banner) --- */ /* Tanpa ::before khusus → seragam dengan section lain (lihat .home-hero). */ .page-hero { position: relative; padding: 56px 0 40px; } .page-hero__card { position: relative; padding: 48px; border-radius: var(--radius-xl); border: 1px solid var(--hero-border); background: var(--hero-bg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); overflow: hidden; } .page-hero__card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, var(--card-glow-a), transparent 38%); pointer-events: none; } .page-hero__content { position: relative; z-index: 2; max-width: 760px; } .page-hero__content h1 { margin: 8px 0 18px; font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -0.045em; } .page-hero__content .text-lead { max-width: 680px; font-size: 1.08rem; line-height: 1.75; } .page-hero__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .page-hero__badge { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--primary-soft); border: 1px solid var(--card-border); color: var(--text); font-size: 0.82rem; font-weight: 600; font-family: var(--font-display); } .page-hero__badge strong { color: var(--primary); font-weight: 700; } /* Page Hero — with banner (rasio OG lebar) → juga 1 kolom, banner full-width */ .page-hero__layout { position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; } .page-hero__media { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; border: 1px solid var(--hero-border); border-radius: var(--radius-xl); background: var(--bg-deep); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; } /* --- Floating Actions --- */ .floating-actions { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } .floating-actions.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* CTA melayang — warna gradien mengalir + kilau (eyecatching) */ .floating-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px; font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; color: var(--on-primary); white-space: nowrap; position: relative; overflow: hidden; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary)); background-size: 300% 100%; animation: floating-flow 4s linear infinite; box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 40%, transparent); transition: transform 0.2s ease, filter 0.2s ease; } .floating-cta::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: translateX(-130%); animation: floating-shine 3.4s ease-in-out infinite; } .floating-cta:hover { transform: translateY(-2px); filter: brightness(1.06); } @keyframes floating-flow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes floating-shine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(230%); } } @media (prefers-reduced-motion: reduce) { .floating-cta, .floating-cta::after { animation: none; } } .floating-top { width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 12px; display: inline-grid; place-items: center; background: var(--surface-lift); color: var(--text); font-size: 1.1rem; box-shadow: var(--shadow-sm); transition: background 0.15s ease, border-color 0.15s ease; } .floating-top:hover { background: var(--primary); border-color: transparent; color: var(--on-primary); } /* --- Responsive --- */ /* Banner full-width di semua breakpoint (rasio 1.91:1 tetap terjaga via aspect-ratio) */ @media (max-width: 768px) { .page-hero { padding: 36px 0 24px; } .page-hero__card { padding: 30px 24px; border-radius: 24px; } .page-hero__content h1 { font-size: clamp(2rem, 8vw, 3rem); } .page-hero__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .page-hero__badge { width: 100%; justify-content: center; } } @media (max-width: 560px) { .layout-container, .layout-container--narrow { width: calc(100% - 24px); } .home-hero { padding: 36px 0 28px; } .home-hero__content { padding: 26px; border-radius: 22px; } .home-banner-slider { border-radius: 22px; } .section-block { padding: 40px 0; } .section-card { padding: 24px; } .floating-actions { left: 12px; right: 12px; bottom: 16px; display: grid; grid-template-columns: 1fr 1fr 46px; } .floating-cta { width: 100%; padding: 0 10px; } } /* ---------- Review block + spec (hub/child capability: review hub & APK) ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .list-table th[scope="row"] { text-align: left; padding: 13px 18px; color: var(--muted); font-family: var(--font-display); font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; } .list-table tbody tr:last-child th[scope="row"] { border-bottom: 0; } .review-block { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sm); } .review-score { display: grid; place-items: center; gap: 2px; align-content: center; min-width: 150px; padding: 22px 26px; border-radius: 16px; background: var(--primary-soft); border: 1px solid var(--card-border); text-align: center; } .review-score__num { font-family: var(--font-display); font-weight: 800; font-size: 2.8rem; line-height: 1; color: var(--primary); } .review-score__max { color: var(--muted-soft); font-weight: 700; font-size: .9rem; } .review-score__label { margin-top: 6px; color: var(--muted); font-size: .74rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .review-verdict { margin: 0 0 18px; color: var(--muted); line-height: 1.7; } .review-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .review-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .review-list li { position: relative; padding-left: 26px; color: var(--muted); line-height: 1.5; } .review-list li::before { position: absolute; left: 0; top: 0; font-weight: 800; } .review-list--pros li::before { content: '\2713'; color: #35c26b; } .review-list--cons li::before { content: '\2715'; color: var(--secondary); } @media (max-width: 680px) { .review-block { grid-template-columns: 1fr; gap: 18px; padding: 22px; } .review-score { min-width: 0; } .review-cols { grid-template-columns: 1fr; } } /* ---------- User reviews (ulasan beberapa user — placeholder, no schema) ---------- */ .user-reviews__avg { margin-top: 4px; color: var(--muted); font-weight: 600; font-family: var(--font-display); font-size: .9rem; } .user-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ureview { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sm); } .ureview__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .ureview__avatar { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); border: 1px solid var(--card-border); color: var(--primary); font-family: var(--font-display); font-weight: 800; font-size: .9rem; } .ureview__meta { min-width: 0; } .ureview__author { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: .95rem; } .ureview__stars { display: inline-flex; gap: 2px; margin-top: 3px; } .ureview__stars svg { width: 14px; height: 14px; fill: var(--line-strong); } .ureview__stars svg.is-on { fill: var(--primary); } .ureview__date { margin-left: auto; align-self: flex-start; color: var(--muted-soft); font-size: .78rem; white-space: nowrap; } .ureview__title { font-size: 1rem; margin: 0 0 6px; color: var(--text); } .ureview__body { margin: 0; color: var(--muted); line-height: 1.6; } @media (max-width: 680px) { .user-reviews { grid-template-columns: 1fr; } } /* ============================================================ SKINS — variasi warna bernama (atribut data-skin di ). Tiap skin cukup set 8 warna DASAR (bg/bg-deep/surface/surface-lift/ primary/secondary/on-primary/link) untuk dark & light; token turunan (soft/glow/border/gradient/header/footer/meta) AUTO-DERIVE via color-mix. Aktif: . +[data-theme=light] = mode terang. OWNER: rename value data-skin + label di switcher sesuai brand. (Default no-JS tetap pakai :root/themes di atas.) ============================================================ */ html[data-skin] { --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent); --primary-glow: color-mix(in srgb, var(--primary) 28%, transparent); --card-glow-a: color-mix(in srgb, var(--primary) 12%, transparent); --card-glow-b: color-mix(in srgb, var(--primary) 5%, transparent); --card-border: color-mix(in srgb, var(--primary) 16%, transparent); --hero-border: color-mix(in srgb, var(--primary) 32%, transparent); --body-glow-1: color-mix(in srgb, var(--primary) 10%, transparent); --body-glow-2: color-mix(in srgb, var(--secondary) 8%, transparent); --card-bg: linear-gradient(160deg, var(--surface-lift), var(--surface)); --hero-bg: linear-gradient(150deg, var(--surface-lift), var(--surface)); --header-bg: color-mix(in srgb, var(--bg-deep) 82%, transparent); --footer-bg: var(--bg-deep); --footer-text: var(--text); --footer-muted: var(--muted); --footer-link-hover: var(--primary); --nav-mobile-bg: var(--surface); --meta-theme: var(--secondary); } /* 1) MAROON (default) */ html[data-skin="maroon"]{--bg:#1a0b0d;--bg-deep:#12070a;--surface:#2a1216;--surface-lift:#351a1e;--primary:#ffb020;--secondary:#e0342b;--on-primary:#1a0b0d;--link:#3fc6f0} html[data-skin="maroon"][data-theme="light"]{--bg:#fbf3f2;--bg-deep:#f5e9e8;--surface:#ffffff;--surface-lift:#fbeeed;--primary:#c7701e;--secondary:#e0342b;--on-primary:#2a0f12;--link:#0e7fb0} /* 2) OCEAN — biru-cyan */ html[data-skin="ocean"]{--bg:#071522;--bg-deep:#030c14;--surface:#0f2438;--surface-lift:#17324c;--primary:#38bdf8;--secondary:#2563eb;--on-primary:#04121e;--link:#7dd3fc} html[data-skin="ocean"][data-theme="light"]{--bg:#f1f8fe;--bg-deep:#e3f0fb;--surface:#ffffff;--surface-lift:#edf5fd;--primary:#0284c7;--secondary:#2563eb;--on-primary:#ffffff;--link:#0369a1} /* 3) EMERALD — hijau */ html[data-skin="emerald"]{--bg:#06140e;--bg-deep:#030b07;--surface:#0e2418;--surface-lift:#163424;--primary:#34d399;--secondary:#059669;--on-primary:#04140d;--link:#6ee7b7} html[data-skin="emerald"][data-theme="light"]{--bg:#f0faf4;--bg-deep:#e2f4ea;--surface:#ffffff;--surface-lift:#edf8f1;--primary:#059669;--secondary:#047857;--on-primary:#ffffff;--link:#047857} /* 4) MAGENTA — ungu-pink */ html[data-skin="magenta"]{--bg:#150a20;--bg-deep:#0b0513;--surface:#251436;--surface-lift:#33204c;--primary:#e879f9;--secondary:#c026d3;--on-primary:#150a20;--link:#f5d0fe} html[data-skin="magenta"][data-theme="light"]{--bg:#fbf2fd;--bg-deep:#f4e4fa;--surface:#ffffff;--surface-lift:#f8edfb;--primary:#c026d3;--secondary:#a21caf;--on-primary:#ffffff;--link:#a21caf} /* 5) CRIMSON — merah */ html[data-skin="crimson"]{--bg:#1a080b;--bg-deep:#100407;--surface:#2c1015;--surface-lift:#3d1a20;--primary:#fb7185;--secondary:#e11d48;--on-primary:#1a080b;--link:#fda4af} html[data-skin="crimson"][data-theme="light"]{--bg:#fef1f3;--bg-deep:#fce3e7;--surface:#ffffff;--surface-lift:#fdedf0;--primary:#e11d48;--secondary:#be123c;--on-primary:#ffffff;--link:#be123c} /* 6) TEAL-ORANGE — teal + oranye */ html[data-skin="teal-orange"]{--bg:#06171a;--bg-deep:#030d0f;--surface:#0d2a2f;--surface-lift:#163a41;--primary:#fb923c;--secondary:#14b8a6;--on-primary:#06171a;--link:#5eead4} html[data-skin="teal-orange"][data-theme="light"]{--bg:#f0fbf9;--bg-deep:#e1f5f1;--surface:#ffffff;--surface-lift:#ecf9f6;--primary:#ea580c;--secondary:#0d9488;--on-primary:#ffffff;--link:#0d9488} /* 7) INDIGO — indigo-violet */ html[data-skin="indigo"]{--bg:#0d0f24;--bg-deep:#060716;--surface:#191c3c;--surface-lift:#242850;--primary:#818cf8;--secondary:#6366f1;--on-primary:#0d0f24;--link:#a5b4fc} html[data-skin="indigo"][data-theme="light"]{--bg:#f2f3fe;--bg-deep:#e5e7fb;--surface:#ffffff;--surface-lift:#eef0fd;--primary:#4f46e5;--secondary:#6366f1;--on-primary:#ffffff;--link:#4338ca} /* 8) GOLD-NOIR — emas + hitam */ html[data-skin="gold-noir"]{--bg:#100f0b;--bg-deep:#080703;--surface:#1d1c16;--surface-lift:#2b2a22;--primary:#eab308;--secondary:#ca8a04;--on-primary:#100f0b;--link:#fde047} html[data-skin="gold-noir"][data-theme="light"]{--bg:#faf8ef;--bg-deep:#f2efdf;--surface:#ffffff;--surface-lift:#f7f4e8;--primary:#a16207;--secondary:#ca8a04;--on-primary:#ffffff;--link:#854d0e} /* ---------- Skin switcher (pemilih variasi warna live) ---------- */ .skin-switch { position: relative; } .skin-switch__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--tile-bg); color: var(--primary); cursor: pointer; transition: background .15s, border-color .15s; } .skin-switch__btn:hover { background: var(--primary-soft); border-color: var(--card-border); } .skin-switch__btn svg { width: 20px; height: 20px; } .skin-switch__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; display: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; min-width: 232px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow); } .skin-switch.is-open .skin-switch__menu { display: grid; } .skin-swatch { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--tile-bg); color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: .8rem; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; } .skin-swatch:hover { border-color: var(--card-border); background: var(--primary-soft); } .skin-swatch__dot { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 1px 3px rgba(0,0,0,.3); } .skin-swatch[aria-current="true"] { border-color: var(--primary); background: var(--primary-soft); } @media (max-width: 680px) { .skin-switch__menu { min-width: 200px; } }