/* ==========================================================================
   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: 16ch;
    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: 52ch;
    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);
}

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

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

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

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

.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--a .tier__mark {
    color: var(--green);
}

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

.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(--sand);
}

.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(--sand);
}

.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. Kartunya transparan supaya warna latar
   terbaca sebagai satu blok, bukan dua kotak di atas warna. */
.never-band {
    padding-block: var(--s-9);
    background: 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);
}

.never__card {
    overflow: hidden;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--bg) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bg) 22%, transparent);
    backdrop-filter: blur(6px);
}

.never__title {
    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) 72%, transparent);
}

.never__list {
    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) 20%, 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);
}

/* --- Ajakan --- */
.page-cta {
    margin-block: var(--s-8);
    padding: var(--s-8) var(--s-7);
    text-align: center;
    background: var(--green);
    color: var(--bg);
    border-radius: var(--r-lg);
}

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

.page-cta p {
    margin: var(--s-4) auto 0;
    max-width: 48ch;
    font-size: var(--fs-small);
    color: color-mix(in srgb, var(--bg) 78%, transparent);
}

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


@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;
    }
}