/* ==========================================================================
   Panduan grade. Kelasnya sengaja tidak memakai nama .grade / .grades —
   itu sudah dipakai ringkasan grade di halaman depan (public.css), dan
   halaman ini memuat kedua berkas.
   ========================================================================== */

.page-head {
    padding-block: var(--s-8) var(--s-7);
    text-align: center;
}

.page-head h1 {
    margin: 0 auto;
    max-width: none;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.page-head p {
    margin: var(--s-5) auto 0;
    max-width: 64ch;
    font-size: 1.0625rem;
    color: var(--ink-muted);
}

.sec {
    padding-block: var(--s-8);
}

.sec__head {
    margin-bottom: var(--s-6);
    text-align: center;
}

.sec__head h2 {
    margin: 0;
    font-size: var(--fs-h2);
}


.sec__head p {
    margin: var(--s-3) auto 0;
    max-width: 52ch;
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

/* --- Empat grade --- */
.tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
}

.tier {
    display: flex;
    flex-direction: column;
    padding: var(--s-6);
    border-radius: var(--r-lg);
    color: var(--bg);
}

.tier--s {
    background: var(--ink);
}

.tier--a {
    background: var(--green);
}

.tier--b {
    background: var(--steel);
}

.tier--c {
    background: var(--clay);
}

.tier__top {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

/* Perisai bersudut, sama seperti tanda verifikasi di halaman produk. */
.tier__mark {
    flex: 0 0 auto;
    width: 3rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.tier--s .tier__mark {
    color: var(--ink);
}

.tier--a .tier__mark {
    color: var(--green);
}

.tier--b .tier__mark {
    color: var(--steel);
}

.tier--c .tier__mark {
    color: var(--clay);
}

.tier__name {
    display: block;
    font-size: var(--fs-h3);
    font-weight: 700;
}

.tier__score {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--bg) 68%, transparent);
}

.tier__list {
    display: grid;
    gap: var(--s-3);
    margin: var(--s-5) 0 0;
    padding: var(--s-5) 0 0;
    list-style: none;
    border-top: 1px solid color-mix(in srgb, var(--bg) 22%, transparent);
}

.tier__list li {
    position: relative;
    padding-left: var(--s-5);
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--bg) 88%, transparent);
}

.tier__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 0.5rem;
    height: 0.3rem;
    border-left: 1.5px solid var(--bg);
    border-bottom: 1.5px solid var(--bg);
    transform: rotate(-45deg);
}

/* --- Empat aturan --- */
.rules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
    max-width: 58rem;
    margin: 0 auto var(--s-7);
    padding: 0;
    list-style: none;
}

.rule {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--s-4);
    align-items: start;
}

.rule__n {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--bg);
    border-radius: var(--r-sm) var(--r-lg) var(--r-sm) var(--r-lg);
}

.rule--1 .rule__n {
    background: var(--green);
}

.rule--2 .rule__n {
    background: var(--clay);
}

.rule--3 .rule__n {
    background: var(--steel);
}

.rule--4 .rule__n {
    background: var(--ink);
}

.rule b {
    display: block;
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rule--1 b {
    color: var(--green);
}

.rule--2 b {
    color: var(--clay);
}

.rule--3 b {
    color: var(--steel);
}

.rule--4 b {
    color: var(--ink);
}

.rule p {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

/* --- Yang tidak masuk katalog ---
   Pita merah selebar layar. Latarnya diberi gradasi, bukan warna rata:
   backdrop-filter di kartunya tidak menghasilkan apa-apa kalau yang di
   belakangnya seragam — tidak ada yang bisa dikaburkan. */
.never-band {
    padding-block: var(--s-10);
    background:
        radial-gradient(70% 90% at 15% 0%,
            color-mix(in srgb, var(--bg) 20%, transparent) 0%,
            transparent 60%),
        radial-gradient(80% 100% at 90% 100%,
            color-mix(in srgb, var(--ink) 45%, transparent) 0%,
            transparent 65%),
        var(--alert);
    color: var(--bg);
}

.never-band__title {
    margin: 0;
    font-size: var(--fs-h2);
    color: var(--bg);
}

.never {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
}

/* saturate di bawah 1 membuat merah di belakang kaca jadi pucat — itu
   yang bikin kesannya es, bukan sekadar buram. Tepi atas dibuat lebih
   terang dari tepi bawah, seolah kena cahaya dari atas. */
.never__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: linear-gradient(160deg,
            color-mix(in srgb, var(--bg) 22%, transparent) 0%,
            color-mix(in srgb, var(--bg) 9%, transparent) 45%,
            color-mix(in srgb, var(--bg) 14%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--bg) 18%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(0.7) brightness(1.12);
    backdrop-filter: blur(16px) saturate(0.7) brightness(1.12);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--bg) 55%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--bg) 12%, transparent),
        0 20px 45px -25px rgba(0, 0, 0, 0.45);
}

/* Kilau tipis di sudut kiri atas. Tanpa ini permukaannya rata dan
   kacanya tidak terbaca sebagai permukaan. */
.never__card::before {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 70%;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--bg) 24%, transparent) 0%,
            transparent 70%);
}

.never__title {
    position: relative;
    margin: 0;
    max-width: none;
    padding: var(--s-4) var(--s-5) var(--s-3);
    font-size: var(--fs-label);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--tr-label);
    color: color-mix(in srgb, var(--bg) 78%, transparent);
}

.never__list {
    position: relative;
    margin: 0;
    padding: 0 var(--s-5) var(--s-4);
    list-style: none;
}

.never__list li {
    padding-block: var(--s-3);
    border-top: 1px solid color-mix(in srgb, var(--bg) 16%, transparent);
    font-weight: 700;
    color: var(--bg);
}

.never__list li:first-child {
    border-top: 0;
}

/* --- Cara menilai ---
   Kartu tinggi tetap yang memanjang saat disorot. Wadahnya diberi tinggi
   minimum setinggi kartu terbuka, jadi bagian di bawahnya tidak ikut
   bergeser waktu kartunya memanjang. */
.how {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    align-items: center;
    min-height: 19rem;

}

.hc {
    height: 10rem;
    overflow: hidden;
    text-align: center;
    border-radius: var(--r-md);
    background: var(--bg);
    box-shadow: 0 1px 2px rgba(28, 43, 35, 0.04),
        0 12px 32px -18px rgba(28, 43, 35, 0.22);
    transition: height 0.5s var(--ease);
}

.hc:hover {
    height: 15rem;
}

/* Kepala setinggi kartu saat tertutup, jadi tidak ada sisa putih di
   bawahnya. Menyusut waktu kartunya memanjang. Foto diberi lapisan warna
   di atasnya supaya teks tetap terbaca dan warnanya tetap mengikuti palet
   — bukan warna asli fotonya. */
.hc__head {
    position: relative;
    height: 10rem;
    padding: var(--s-5) var(--s-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--green);
    transition: height 0.5s var(--ease);
}

.hc:hover .hc__head {
    height: 8.5rem;
    margin-bottom: var(--s-3);
}

.hc__head img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.hc:hover .hc__head img {
    transform: scale(1.05);
}

.hc__head::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--green);
    mix-blend-mode: multiply;
    opacity: 0.82;
}

.hc--2 .hc__head,
.hc--2 .hc__head::after {
    background: var(--clay);
}

.hc--3 .hc__head,
.hc--3 .hc__head::after {
    background: var(--sand);
}

.hc--4 .hc__head,
.hc--4 .hc__head::after {
    background: var(--ink);
}

/* Ikon dan judul harus di atas lapisan warna. */
.hc__i {
    position: relative;
    z-index: 2;
    width: 2.5rem;
    color: var(--bg);
    transition: width 0.5s var(--ease);
}

.hc:hover .hc__i {
    width: 1.75rem;
}

.hc__i svg {
    width: 100%;
    height: auto;
}

/* Judul tersembunyi sampai kartunya dibuka, jadi saat tertutup yang
   terlihat hanya ilustrasinya. grid-template-rows dipakai supaya
   tingginya bisa dianimasikan tanpa angka tetap. */
.hc b {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--bg);
    transition: grid-template-rows 0.5s var(--ease), opacity 0.5s var(--ease);
}

.hc b>span {
    overflow: hidden;
    padding-top: var(--s-3);
}

.hc:hover b {
    grid-template-rows: 1fr;
    opacity: 1;
}

.hc__c {
    margin: 0 var(--s-4);
    text-align: left;
}

.hc__c p {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--ink-muted);
}

/* --- Pertanyaan --- */
.faq details {
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--line);
}

.faq details:first-child {
    border-top: 1px solid var(--line);
}

.faq summary {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    flex: 0 0 auto;
    font-weight: 400;
    color: var(--ink-faint);
}

.faq details[open] summary::after {
    content: "–";
}

.faq p {
    margin: var(--s-3) 0 0;
    max-width: 60ch;
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

/* Daftar bernomor di dalam jawaban FAQ. Hanya dipakai butir cara menjual;
   jawaban lain cukup satu paragraf. */
.faq__steps {
    display: grid;
    gap: var(--s-3);
    margin: var(--s-3) 0 0;
    padding-left: var(--s-5);
    max-width: 60ch;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--ink-muted);
}

.faq__steps b {
    color: var(--ink);
}

/* --- Ajakan ---
   Panelnya kaca di atas .glass-stage (public.css). Jaraknya pindah ke
   panggung; kalau ditinggal di sini, tepi kacanya tidak lagi berimpit
   dengan tepi warnanya. */
.page-cta {
    position: relative;
    z-index: 1;
    padding: var(--s-8) var(--s-7);
    text-align: center;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--bg) 90%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--bg) 45%, transparent),
        0 20px 45px -28px color-mix(in srgb, var(--ink) 55%, transparent);
    color: var(--ink);
}


.page-cta h2 {
    margin: 0 auto;
    max-width: 20ch;
    font-size: var(--fs-h2);
    color: var(--ink);
}

.page-cta p {
    margin: var(--s-4) auto 0;
    max-width: 48ch;
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.page-cta__actions {
    margin-top: var(--s-6);
}

/* Panggung bersama tidak punya jarak luar; di sini yang butuh. */
.page-cta-wrap .glass-stage,
.wrap>.glass-stage {
    margin-block: var(--s-8);
}

/* Empat kartu grade terlalu sempit di layar tanggung. Dua kolom dulu,
   baru satu kolom di bawah 900px. */
@media (max-width: 1200px) {
    .tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {

    .tiers,
    .rules,
    .never,
    .how {
        grid-template-columns: 1fr;
    }
}

/* Perangkat tanpa kursor tidak punya hover, jadi kartunya selalu terbuka. */
@media (hover: none) {
    .how {
        min-height: 0;
    }

    .hc {
        height: auto;
        padding-bottom: var(--s-4);
    }

    .hc__head {
        height: auto;
        margin-bottom: var(--s-4);
    }

    .hc b {
        grid-template-rows: 1fr;
        opacity: 1;
    }
}