/* Skiplink SFL - Liquid Glass, tema terang & gelap (mobile-first) */
:root {
    color-scheme: light;
    --text: #172033;
    --muted: #5d6784;
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-soft: rgba(79, 70, 229, .12);
    --danger: #c0334d;
    --ok: #17794f;

    /* Glass */
    --bg: #dfe6ff;
    --blob1: rgba(120, 140, 255, .75);
    --blob2: rgba(255, 140, 200, .55);
    --blob3: rgba(90, 220, 230, .55);
    --glass: rgba(255, 255, 255, .42);
    --glass-strong: rgba(255, 255, 255, .62);
    --glass-border: rgba(255, 255, 255, .75);
    --glass-edge: rgba(255, 255, 255, .9);
    --glass-edge-low: rgba(255, 255, 255, .25);
    --field: rgba(255, 255, 255, .55);
    --field-code: rgba(255, 255, 255, .5);
    --accent-tint: rgba(110, 120, 255, .16);
    --danger-tint: rgba(255, 90, 120, .18);
    --blur: 22px;
    --shadow: 0 8px 32px rgba(40, 50, 110, .16), 0 1px 2px rgba(40, 50, 110, .08);

    --radius: 20px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --text: #eef1ff;
    --muted: #a3acc9;
    --primary: #8b93ff;
    --primary-dark: #a5abff;
    --primary-soft: rgba(139, 147, 255, .18);
    --danger: #ff8aa0;
    --ok: #6fe0ae;

    --bg: #0a0d1c;
    --blob1: rgba(80, 90, 255, .50);
    --blob2: rgba(200, 70, 170, .35);
    --blob3: rgba(30, 170, 190, .35);
    --glass: rgba(255, 255, 255, .07);
    --glass-strong: rgba(255, 255, 255, .12);
    --glass-border: rgba(255, 255, 255, .16);
    --glass-edge: rgba(255, 255, 255, .30);
    --glass-edge-low: rgba(255, 255, 255, .06);
    --field: rgba(0, 0, 0, .28);
    --field-code: rgba(0, 0, 0, .35);
    --accent-tint: rgba(120, 130, 255, .14);
    --danger-tint: rgba(255, 90, 120, .14);
    --shadow: 0 10px 36px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: color .25s;
}

/* Latar warna cair di belakang kaca */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: -1;
    background:
        radial-gradient(40% 40% at 15% 20%, var(--blob1), transparent 70%),
        radial-gradient(35% 35% at 85% 25%, var(--blob2), transparent 70%),
        radial-gradient(45% 45% at 60% 90%, var(--blob3), transparent 70%);
    animation: drift 24s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-3%, 4%, 0) scale(1.08); }
}

main { flex: 1; }

.container { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* Permukaan kaca (dipakai bersama) */
.navbar, .form, .card, .raw, .promo, .footer {
    background: var(--glass);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
    backdrop-filter: blur(var(--blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow:
        var(--shadow),
        inset 0 1px 0 var(--glass-edge),
        inset 0 -1px 0 var(--glass-edge-low);
    position: relative;
}
/* Kilau lengkung di sisi atas */
.form::before, .card::before, .raw::before, .promo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 38%);
    opacity: .55;
    pointer-events: none;
}
:root[data-theme="dark"] .form::before,
:root[data-theme="dark"] .card::before,
:root[data-theme="dark"] .raw::before,
:root[data-theme="dark"] .promo::before { opacity: .22; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --glass: rgba(255, 255, 255, .85); }
    :root[data-theme="dark"] { --glass: rgba(24, 28, 52, .92); }
}

/* Navbar */
.navbar {
    position: sticky;
    top: 10px;
    z-index: 10;
    margin: 10px 12px 0;
    border-radius: 999px;
}
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 56px;
    padding: 0 10px 0 14px;
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -.01em;
}
.logo__mark {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(145deg, #7c83ff, #4f46e5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 12px rgba(79, 70, 229, .4);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
}
.navbar__actions { display: flex; align-items: center; gap: 8px; }
.navbar__tag {
    font-size: 12px;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
}

/* Tombol tema */
.theme-toggle {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text);
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 var(--glass-edge);
    cursor: pointer;
    transition: transform .2s, background .2s;
}
.theme-toggle:hover { transform: scale(1.08); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Hero */
.hero { padding: 48px 0 28px; }
.hero__inner { text-align: center; }
.hero__title {
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 5vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -.02em;
}
.hero__desc { margin: 0 auto 28px; max-width: 560px; color: var(--muted); }

/* Form */
.form { border-radius: 28px; padding: 20px; text-align: left; }
.form > * { position: relative; }
.form__label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.form__row { display: flex; flex-direction: column; gap: 10px; }
.input {
    width: 100%;
    padding: 13px 18px;
    font: inherit;
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .08);
    transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--muted); opacity: .8; }
.input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .06), 0 0 0 4px rgba(120, 130, 255, .28);
}
.input.is-invalid { border-color: var(--danger); }

.form__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; min-height: 20px; }
.form__error { color: var(--danger); }
.form__counter { color: var(--muted); margin-left: auto; }

/* Buttons */
.btn {
    font: inherit;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible, .copy-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn--primary {
    color: #fff;
    background: linear-gradient(180deg, rgba(150, 156, 255, .95), rgba(79, 70, 229, .95));
    border-color: rgba(255, 255, 255, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 18px rgba(79, 70, 229, .4);
}
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 24px rgba(79, 70, 229, .55); transform: translateY(-1px); }
.btn--primary[disabled] { opacity: .7; cursor: not-allowed; transform: none; }
.btn--ghost { background: var(--glass-strong); color: var(--text); border-color: var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge); }
.btn--ghost:hover { background: var(--glass-border); }

.spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Results */
.results { padding-bottom: 56px; }
#result-area { display: grid; gap: 16px; }

.card { border-radius: var(--radius); padding: 18px 20px; animation: fade-in .3s ease; }
.card > * { position: relative; }
.card__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.card--accent { background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--glass); }
.card--error { background: linear-gradient(var(--danger-tint), var(--danger-tint)), var(--glass); }
.card--error .card__title { color: var(--danger); }
.card--error p { margin: 0; word-break: break-word; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to { opacity: 1; transform: none; }
}

.url-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.url-list li { word-break: break-all; }

.link { color: var(--primary); text-decoration: none; word-break: break-all; }
.link:hover { text-decoration: underline; }
.val { word-break: break-word; }
.muted { color: var(--muted); font-size: 14px; }
.badge {
    font-family: var(--mono);
    font-size: 13px;
    background: var(--primary-soft);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 999px;
}

/* Key-value */
.kv { margin: 0; display: grid; gap: 8px; }
.kv .kv { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--glass-border); }
.kv__row { display: grid; gap: 2px; }
.kv dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; }

.copy-btn {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 12px;
    margin-left: 4px;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    cursor: pointer;
    vertical-align: middle;
}
.copy-btn:hover { background: var(--glass-strong); }
.copy-btn.is-copied { color: var(--ok); }

/* Raw JSON */
.raw { border-radius: var(--radius); padding: 14px 20px; }
.raw > * { position: relative; }
.raw summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.raw__bar { margin-top: 10px; }
.raw pre {
    margin: 10px 0 0;
    padding: 14px;
    background: var(--field-code);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    font-family: var(--mono);
    font-size: 13px;
    overflow-x: auto;
    max-height: 360px;
}

/* Promosi */
.promo {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    border-radius: 24px;
    background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--glass);
}
.promo > * { position: relative; }
.promo__text { display: flex; flex-direction: column; gap: 2px; }
.promo__badge {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 0 10px;
}
.promo__sub { color: var(--muted); font-size: 14px; }
.promo__btn { text-decoration: none; }

/* Footer */
.footer {
    margin: 0 12px 12px;
    border-radius: 24px;
    padding: 18px 0;
    font-size: 14px;
    color: var(--muted);
}
.footer a { color: var(--primary); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__inner { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }

/* Tablet ke atas */
@media (min-width: 640px) {
    .navbar { margin: 14px auto 0; width: calc(100% - 40px); max-width: 880px; }
    .form { padding: 26px; }
    .form__row { flex-direction: row; }
    .input { flex: 1; }
    .promo { flex-direction: row; align-items: center; justify-content: space-between; }
    .footer { margin: 0 auto 16px; width: calc(100% - 40px); max-width: 880px; }
    .footer__inner { flex-direction: row; justify-content: space-between; text-align: left; flex-wrap: wrap; }
    .kv__row { grid-template-columns: 160px 1fr; gap: 12px; }
    .kv .kv .kv__row { grid-template-columns: 140px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}