/* MARC Academy — tema elegan: navy tinta (ink) + emas lembut (gold) di atas latar gading. */
:root {
    --ink-900: #131A27; --ink-800: #1E2738; --ink-700: #2B3548; --ink-500: #58647B; --ink-300: #AAB3C2; --ink-100: #E9ECF1;
    --gold-50: #FBF8F2; --gold-100: #F4EDE0; --gold-200: #E8DBC2; --gold-300: #D9C29C; --gold-400: #C6A673; --gold-500: #B08D57; --gold-600: #967545; --gold-700: #7A5E38;
    --ivory: #F8F6F1; --line: #E7E1D6;
}

body { font-family: Inter, system-ui, sans-serif; letter-spacing: -.005em; }
h1, h2, .font-display { font-family: 'Playfair Display', Georgia, serif; letter-spacing: 0; }
h1.font-extrabold, h2.font-extrabold { font-weight: 700; }

.input {
    width: 100%;
    border: 1px solid #D6D0C4;
    background: #fff;
    border-radius: .5rem;
    padding: .6rem .8rem;
    font-size: .875rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(176, 141, 87, .18); }
.label { display: block; font-size: .7rem; font-weight: 600; color: var(--ink-500); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .08em; }
.hint { font-size: .75rem; color: #6B7280; margin-top: .3rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: .9rem; box-shadow: 0 1px 2px rgba(19, 26, 39, .04), 0 8px 24px -18px rgba(19, 26, 39, .25); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1.15rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; letter-spacing: .01em; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; cursor: pointer; white-space: nowrap; }
.btn-sm { padding: .4rem .75rem; font-size: .8rem; }
.btn-primary { background: var(--ink-800); color: #fff; box-shadow: inset 0 -2px 0 var(--gold-500); }
.btn-primary:hover { background: var(--ink-900); color: var(--gold-200); }
.btn-dark { background: var(--ink-900); color: var(--gold-200); }
.btn-dark:hover { background: var(--ink-700); }
.btn-success { background: var(--gold-500); color: #fff; }
.btn-success:hover { background: var(--gold-600); }
.btn-light { background: #fff; color: var(--ink-800); border: 1px solid #D6D0C4; }
.btn-light:hover { border-color: var(--gold-500); color: var(--gold-700); background: var(--gold-50); }
.btn-danger { background: #fff; color: #9B2C2C; border: 1px solid #E8C9C9; }
.btn-danger:hover { background: #FBF1F1; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.table thead tr { background: var(--gold-50); }
.table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); font-weight: 600; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.table td { padding: .8rem 1rem; border-bottom: 1px solid #F1EDE6; vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #FCFBF8; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tabs { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: .7rem 0; font-size: .875rem; font-weight: 600; color: var(--ink-500); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink-800); }
.tabs a.on { color: var(--ink-800); border-color: var(--gold-500); }

/* Latar & header */
.app-bg { background-color: var(--ivory); }
.app-header { background: var(--ink-900); border-bottom: 1px solid rgba(198, 166, 115, .35); }
.app-header nav a { color: rgba(255, 255, 255, .78); }
.app-header nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.app-header nav a.bg-white\/10 { background: transparent; color: var(--gold-300); box-shadow: inset 0 -2px 0 var(--gold-400); border-radius: 0; }
.rainbow-bar { display: none; }

.page-h1 { position: relative; padding-bottom: .5rem; color: var(--ink-800); font-size: 1.85rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 700 !important; }
.page-h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 48px; height: 2px; background: var(--gold-500); }

/* Kartu angka */
.kpi { background: #fff; color: var(--ink-800); }
.kpi-icon { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; background: var(--ink-800); color: var(--gold-300); }
.kpi p:first-child { color: var(--ink-500); letter-spacing: .08em; font-weight: 600; }
.kpi p:nth-child(2) { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: var(--ink-900); }
.kpi p:nth-child(3) { color: #6B7280; }

form.card { border-top: 2px solid var(--gold-400); }

/* Kartu kursus */
.course-card { transition: transform .2s, box-shadow .2s, border-color .2s; }
.course-card:hover { transform: translateY(-2px); border-color: var(--gold-300); box-shadow: 0 18px 36px -22px rgba(19, 26, 39, .45); }
.course-card h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.05rem; }

/* Hero katalog & kursus */
.hero-lms { background: radial-gradient(ellipse at 85% -10%, rgba(198, 166, 115, .22) 0, transparent 55%), linear-gradient(180deg, #131A27, #1E2738); color: #fff; border-bottom: 1px solid rgba(198, 166, 115, .35); }
.hero-lms h1 { font-weight: 700; letter-spacing: -.01em; }

/* Progres */
.progress { width: 100%; background: var(--gold-100); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); transition: width .3s; }

/* Daftar pelajaran */
.lesson-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; border-radius: .5rem; font-size: .875rem; }
.lesson-row:hover { background: var(--gold-50); }
.lesson-row.on { background: var(--gold-100); font-weight: 600; box-shadow: inset 2px 0 0 var(--gold-500); }
.lesson-check { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #CFC7B8; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .6rem; color: #fff; }
.lesson-check.done { background: var(--ink-800); border-color: var(--ink-800); color: var(--gold-300); }

/* Pilihan jenis pelajaran */
.type-pick input { position: absolute; opacity: 0; pointer-events: none; }
.type-pick label { display: flex; flex-direction: column; gap: .25rem; padding: .8rem; border: 1px solid var(--line); border-radius: .6rem; cursor: pointer; background: #fff; height: 100%; }
.type-pick input:checked + label { border-color: var(--gold-500); background: var(--gold-50); box-shadow: 0 0 0 3px rgba(176, 141, 87, .15); }

/* Jawaban kuis */
.opt { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: .6rem; cursor: pointer; background: #fff; }
.opt:hover { border-color: var(--gold-300); }
.opt:has(input:checked) { border-color: var(--gold-500); background: var(--gold-50); }
.opt.right { border-color: #4F7A65; background: #F1F6F3; }
.opt.wrong { border-color: #B45454; background: #FBF1F1; }

/* Teks materi */
.prose-lms { font-size: 1rem; line-height: 1.8; color: #1F2937; }
.prose-lms > * + * { margin-top: 1rem; }
.prose-lms h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--ink-800); margin-top: 1.8rem; }
.prose-lms h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--ink-800); margin-top: 1.5rem; }
.prose-lms h4 { font-size: 1rem; font-weight: 700; color: var(--gold-700); }
.prose-lms ul { list-style: disc; padding-left: 1.4rem; }
.prose-lms ol { list-style: decimal; padding-left: 1.4rem; }
.prose-lms li::marker { color: var(--gold-500); }
.prose-lms li + li { margin-top: .3rem; }
.prose-lms blockquote { border-left: 3px solid var(--gold-400); background: var(--gold-50); padding: .8rem 1.1rem; border-radius: 0 .5rem .5rem 0; color: var(--ink-700); font-style: italic; }

/* Sertifikat */
.cert { aspect-ratio: 1.414 / 1; background: #fff; position: relative; overflow: hidden; }
.cert-frame { position: absolute; inset: 18px; border: 1.5px solid var(--gold-400); border-radius: 4px; box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px var(--gold-200); }

@media print {
    header, footer, .no-print { display: none !important; }
    body, .app-bg { background: #fff !important; }
    main { padding: 0 !important; max-width: none !important; }
    .card { border: 0; box-shadow: none; }
    @page { size: A4 landscape; margin: 0; }
    .cert { width: 297mm; height: 209mm; aspect-ratio: auto; border-radius: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}