/* ==========================================================================
   SDTQ ATTAMAM — gaya scrapbook ceria & islami
   Kertas putih gading, navy, kuning. Semua emoji berupa karakter asli perangkat
   (di iPhone/Mac tampil sebagai emoji iOS).
   ========================================================================== */

:root {
    --kertas: #F4F1EA;
    --putih: #FFFFFF;
    --navy: #0B1C38;
    --navy-2: #1B2D4F;
    --kuning: #FFC83D;
    --kuning-muda: #FFE7A3;
    --kuning-pucat: #FFF4D1;
    --kraft: #D3C2A3;
    --teks: #3A4560;
    --garis: #DED6C6;
    /* sama dengan template Instagram: Fredoka (judul) + Nunito (teks), bulat seperti emoji iOS */
    --serif: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --mono: 'Nunito', system-ui, sans-serif;
    --sans: 'Nunito', system-ui, sans-serif;
    --tulis: 'Caveat', cursive;
    --arab: 'Amiri', serif;
    --bayang: 0 14px 30px rgba(11, 28, 56, 0.16);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--navy);
    background: var(--kertas);
    overflow-x: clip;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0;
}

h1 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.9rem); }
h3 { font-size: 1.5rem; }

p {
    margin: 0 0 1rem;
}

a {
    color: var(--navy);
}

:focus-visible {
    outline: 3px solid var(--kuning);
    outline-offset: 3px;
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.label {
    display: block;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teks);
    margin-bottom: 0.8rem;
}

.lead {
    font-size: 1.08rem;
    color: var(--teks);
    max-width: 640px;
}

.tengah {
    text-align: center;
}

.tengah .lead {
    margin-left: auto;
    margin-right: auto;
}

.arab {
    font-family: var(--arab);
    font-weight: 700;
}

/* Emoji asli perangkat (di iPhone tampil sebagai emoji iOS): .emo di kalimat, .ej untuk ikon */
.emo,
.ej {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
}

.nowrap {
    white-space: nowrap;
}

/* ikon emoji: ukurannya lewat font-size, bukan lebar gambar */
.ej {
    display: inline-block;
    width: auto;
    height: auto;
    text-align: center;
}

.stiker.ej { font-size: calc(var(--w, 90px) * var(--skala, 1)); line-height: 1; width: auto; max-height: none; }
.klip.ej { font-size: 38px; width: auto; }
.kartu-kertas .ikon.ej { font-size: 56px; width: auto; }
.buku > .ikon.ej { font-size: 64px; width: auto; }

.emo {
    display: inline-block;
    font-size: 0.62em;
    vertical-align: 0.1em;
    margin: 0 0.06em;
    transform: rotate(var(--r, -8deg));
    filter: drop-shadow(0 4px 6px rgba(11, 28, 56, 0.18));
}

/* Stiker bebas (alat tulis, Al-Qur'an) di sudut seksi */
.stiker {
    position: absolute;
    z-index: 1;
    top: var(--t, auto);
    left: var(--l, auto);
    right: var(--ka, auto);
    bottom: var(--b, auto);
    width: calc(var(--w, 90px) * var(--skala, 1)); /* --skala mengecilkan gambar & emoji bersamaan di tablet/HP */
    max-height: 170px; /* pena & penggaris itu tinggi-ramping: batasi tingginya */
    object-fit: contain;
    transform: rotate(var(--r, 0deg));
    filter: drop-shadow(0 12px 18px rgba(11, 28, 56, 0.25));
    pointer-events: none;
    animation: melayang 6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes melayang {
    50% { translate: 0 -10px; }
}

/* --------------------------------------------------------------------------
   Tombol (kotak navy, huruf mesin ketik)
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    background: var(--navy);
    color: var(--kertas);
    padding: 0.45rem 1.1rem;
    border: 2px solid var(--navy);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn:hover {
    background: var(--kuning);
    color: var(--navy);
    transform: translateY(-2px);
}

.btn--terang {
    background: var(--kertas);
    color: var(--navy);
    border-color: var(--kertas);
}

.btn--wa i {
    font-size: 1.15em;
}

.panah {
    display: inline-block;
    width: 74px;
    height: 70px;
    vertical-align: middle;
    margin-left: 0.6rem;
    color: var(--navy);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.garis-atas {
    height: 8px;
    background: var(--kuning);
}

.nav {
    position: relative;
    z-index: 50;
}

.nav__isi {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.nav #navTautan {
    display: contents;
}

.nav__grup {
    display: flex;
    gap: 2.2rem;
}

.nav__grup--kiri { order: 1; }
.nav__grup--kanan { order: 3; justify-content: flex-end; align-items: center; }

.nav__grup a {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    color: var(--navy);
}

.nav__grup a:hover,
.nav__grup a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--kuning);
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
}

.nav__grup .btn {
    color: var(--kertas);
    font-size: 0.95rem;
}

.nav__grup .btn:hover {
    color: var(--navy);
    text-decoration: none;
}

.merek {
    order: 2;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.merek img {
    height: 54px;
    width: auto;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(11, 28, 56, 0.15);
}

.merek__nama {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--navy);
    text-shadow: 2px 2px 0 var(--kuning);
}

.merek__nama small {
    display: block;
    font-family: var(--arab);
    font-weight: 400;
    font-size: 0.62rem;
    letter-spacing: 0;
    text-shadow: none;
    margin-top: 0.15rem;
}

.nav__burger {
    display: none;
    order: 3;
    justify-self: end;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
}

.nav__burger span {
    width: 26px;
    height: 3px;
    background: var(--navy);
}

/* --------------------------------------------------------------------------
   Hero beranda + kartu santri
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    padding: 2.5rem 0 4.5rem;
    background: linear-gradient(180deg, var(--kertas) 0%, var(--kertas) 30%, var(--kuning-muda) 78%, var(--kuning) 100%);
    text-align: center;
}

.hero__arab {
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    margin-bottom: 0.6rem;
}

.hero h1 {
    max-width: 1000px;
    margin: 0 auto;
}

.hero__panggung {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    margin-top: 2.5rem;
}

.hero__panggung .btn:first-child { justify-self: end; }
.hero__panggung .btn:last-child { justify-self: start; }

.idcard {
    position: relative;
    width: min(500px, 100%);
    transform: rotate(-4deg);
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    padding: 38px 16px 16px;
    box-shadow: var(--bayang);
    text-align: left;
}

/* jepitan dan lubang tali kartu */
.idcard::before {
    content: "";
    position: absolute;
    top: -34px;
    left: 50%;
    width: 46px;
    height: 58px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #C9CDD3, #EEF0F2 45%, #B8BDC4);
    border-radius: 10px 10px 6px 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.idcard::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 50%;
    width: 70px;
    height: 10px;
    transform: translateX(-50%);
    border-radius: 6px;
    background: var(--kuning-muda);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15);
}

.idcard__isi {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 1rem;
    background: #FCFBF7;
    padding: 1.2rem 1.2rem 1rem;
    box-shadow: inset 0 0 0 1px var(--garis);
}

.idcard__judul {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1;
    margin: 0 0 0.3rem;
}

.idcard__ket,
.idcard__motto,
.idcard dt,
.idcard__no {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.idcard__ket {
    color: var(--teks);
    margin-bottom: 0.6rem;
}

.idcard dl {
    margin: 0 0 0.6rem;
}

.idcard dl div {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    border-bottom: 1px solid var(--navy);
    padding: 0.15rem 0;
}

.idcard__isi > div {
    min-width: 0;
}

.idcard dd {
    min-width: 0;
    margin: 0;
    font-family: var(--tulis);
    font-size: 1.35rem;
    line-height: 1.1;
}

.idcard__motto {
    margin: 0;
}

.idcard__kanan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.idcard__no {
    text-align: right;
    margin: 0;
}

.idcard__kanan img {
    aspect-ratio: 4 / 5;
    width: 100%;
    object-fit: cover;
    object-position: 40% 60%;
    filter: grayscale(0.15) contrast(1.05);
}

/* stempel menempel di pojok bawah foto, tidak menutupi tulisan */
.idcard__stempel {
    position: absolute;
    bottom: 1.6rem;
    left: -1.4rem;
    width: 64px;
    height: 64px;
    border: 2px solid var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.55rem;
    line-height: 1.2;
    transform: rotate(-14deg);
    background: rgba(255, 255, 255, 0.6);
    z-index: 2;
}

.idcard__barcode {
    height: 28px;
    background: repeating-linear-gradient(90deg, var(--navy) 0 2px, transparent 2px 4px, var(--navy) 4px 5px, transparent 5px 8px, var(--navy) 8px 11px, transparent 11px 12px);
}

/* --------------------------------------------------------------------------
   Pita berjalan (navy)
   -------------------------------------------------------------------------- */

.pita {
    background: var(--navy);
    color: var(--kertas);
    overflow: hidden;
    white-space: nowrap;
    padding: 0.55rem 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.35rem;
}

.pita__t {
    display: inline-block;
    animation: geser 45s linear infinite;
}

/* tanda rub el hizb (۞) sebagai pemisah, seperti di mushaf */
.pita__tanda {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 1.6rem;
    vertical-align: middle;
    position: relative;
    top: -0.12em;
    font-size: 0; /* karakter ۞ hanya cadangan; bentuknya digambar SVG di bawah */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23FFC83D'%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Crect x='5' y='5' width='14' height='14' transform='rotate(45 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%230B1C38'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes geser {
    to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Seksi umum
   -------------------------------------------------------------------------- */

.seksi {
    position: relative;
    padding: 5.5rem 0;
}

.seksi--kuning { background: var(--kuning-muda); }

.seksi--gradasi {
    background: linear-gradient(160deg, var(--kertas) 0%, var(--kuning-pucat) 45%, var(--kuning-muda) 75%, var(--kuning) 100%);
}

.dua-kolom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Kolase sambutan (kertas kuning + map kraft + polaroid)
   -------------------------------------------------------------------------- */

.kolase {
    position: relative;
    min-height: 560px;
}

.kolase__kertas {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 82%;
    min-height: 470px;
    background: var(--kuning);
    padding: 2.2rem 2rem 1.8rem;
    transform: rotate(-4deg);
    box-shadow: var(--bayang);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* lebar dibatasi supaya tidak tertutup map kraft di kanan */
.kolase__sapa {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.1rem);
    line-height: 0.92;
    letter-spacing: -0.05em;
    max-width: 50%;
    margin: 0;
}

.kolase__form {
    margin: 0;
    border: 1.5px solid var(--navy);
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kolase__form div {
    display: flex;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    border-bottom: 1.5px solid var(--navy);
}

.kolase__form div:last-child {
    border-bottom: 0;
}

.kolase__form dd {
    margin: 0;
    text-transform: none;
    font-family: var(--tulis);
    font-size: 1.25rem;
    line-height: 1;
}

.kolase__map {
    position: absolute;
    top: 0;
    right: 0;
    width: 46%;
    height: 330px;
    background: var(--kraft);
    transform: rotate(3deg);
    box-shadow: var(--bayang);
    z-index: 2;
}

.kolase__map::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: 40%;
    height: 18px;
    background: var(--kraft);
    border-radius: 6px 6px 0 0;
}

.polaroid {
    background: var(--putih);
    padding: 10px 10px 34px;
    box-shadow: 0 10px 22px rgba(11, 28, 56, 0.2);
    transform: rotate(var(--r, -3deg));
    position: relative;
}

.polaroid img:not(.klip) {
    aspect-ratio: 1;
    width: 100%;
    object-fit: cover;
}

.polaroid figcaption {
    font-family: var(--tulis);
    font-size: 1.35rem;
    line-height: 1.1;
    text-align: center;
    margin-top: 0.55rem;
}

.kolase__map .polaroid {
    position: absolute;
    width: 66%;
}

.kolase__map .polaroid:nth-child(1) { top: 18px; left: 8%; --r: -6deg; }
.kolase__map .polaroid:nth-child(2) { top: 120px; right: 4%; --r: 5deg; }

.klip {
    position: absolute;
    top: -26px;
    left: 50%;
    width: 46px;
    transform: translateX(-50%) rotate(12deg);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2));
    z-index: 3;
}

/* --------------------------------------------------------------------------
   Map (folder) menuju halaman lain
   -------------------------------------------------------------------------- */

.map-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
}

.map {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.map .ej {
    font-size: 128px;
    filter: drop-shadow(0 10px 14px rgba(11, 28, 56, 0.18));
    transition: transform 0.2s ease;
}

.map:hover .ej {
    transform: translateY(-6px) rotate(-3deg);
}

.map span:not(.ej) {
    font-family: var(--mono);
    font-weight: 700;
    background: var(--kertas);
    padding: 0.35rem 1.2rem;
    color: var(--navy);
}

/* --------------------------------------------------------------------------
   Deretan foto kegiatan (gulir ke samping)
   -------------------------------------------------------------------------- */

.deret {
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    padding: 0.5rem 20px 1.5rem max(20px, calc((100vw - 1180px) / 2 + 20px));
    scroll-snap-type: x mandatory;
}

.deret img {
    flex: none;
    width: 300px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    scroll-snap-align: start;
}

.judul-tautan {
    display: inline-block;
    text-decoration: none;
    margin-top: 1.5rem;
}

/* panah ikut di ujung kalimat, tidak terpisah ke pinggir */
.judul-tautan i {
    font-size: 0.55em;
    vertical-align: middle;
    margin-left: 0.2em;
}

.judul-tautan:hover h2 {
    text-decoration: underline;
    text-decoration-color: var(--kuning);
    text-decoration-thickness: 5px;
}

/* --------------------------------------------------------------------------
   Kutipan wali murid + gugus stiker
   -------------------------------------------------------------------------- */

.gugus {
    position: relative;
    min-height: 420px;
}

.kutipan blockquote {
    margin: 0 0 1.2rem;
}

.kutipan__besar {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.3vw, 2.5rem);
    line-height: 1.1;
    margin-bottom: 1.2rem;
}

.kutipan__penuh {
    color: var(--teks);
}

.kutipan figcaption {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1.4rem;
}

/* --------------------------------------------------------------------------
   Pita ajakan (navy) dengan stiker kiri-kanan
   -------------------------------------------------------------------------- */

.ajakan {
    background: var(--navy);
    color: var(--kertas);
    padding: 5rem 0;
}

.ajakan__isi {
    display: grid;
    grid-template-columns: 180px 1fr 180px;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.ajakan h2 {
    margin-bottom: 1.6rem;
}

.ajakan img {
    width: 170px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}

.ajakan__isi > img:first-child { transform: rotate(-10deg); }
.ajakan__isi > img:last-child { transform: rotate(10deg); justify-self: end; }

/* --------------------------------------------------------------------------
   Kepala halaman dalam
   -------------------------------------------------------------------------- */

.kepala-halaman {
    position: relative;
    padding: 3.5rem 0 4.5rem;
    background: linear-gradient(180deg, var(--kertas) 0%, var(--kuning-pucat) 60%, var(--kuning-muda) 100%);
    text-align: center;
}

.kepala-halaman h1 {
    margin-bottom: 1.2rem;
}

.kepala-halaman .lead {
    margin-left: auto;
    margin-right: auto;
}

.hero, .seksi, .kepala-halaman {
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Kertas catatan (pilar, program) & papan nama guru
   -------------------------------------------------------------------------- */

.kartu-kertas {
    position: relative;
    background: var(--putih);
    padding: 2.6rem 2rem 2rem;
    box-shadow: var(--bayang);
    transform: rotate(var(--r, -1deg));
}

.kartu-kertas .ikon {
    position: absolute;
    top: -34px;
    left: 1.6rem;
    width: 68px;
    transform: rotate(-8deg);
    filter: drop-shadow(0 6px 8px rgba(11, 28, 56, 0.2));
}

.kartu-kertas h3 {
    margin: 0.2rem 0 0.6rem;
}

.kartu-kertas p:last-child {
    margin-bottom: 0;
    color: var(--teks);
}

.visi {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 2.5rem;
}

.visi blockquote {
    margin: 0 0 1rem;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
}

.kisi-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2rem;
    margin-top: 4.5rem;
}

.kisi-3 > :nth-child(2) { --r: 1.5deg; }
.kisi-3 > :nth-child(3) { --r: -2deg; }

.catatan-kecil {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    max-width: 100%;
    margin: 3rem auto 0;
    background: var(--kuning-pucat);
    border: 1.5px dashed var(--navy);
    padding: 0.9rem 1.4rem;
}

.catatan-kecil .ej {
    font-size: 38px;
    flex: none;
}

.catatan-kecil p {
    margin: 0;
}

/* Ayat / hadits di pita navy */
.ayat {
    background: var(--navy);
    color: var(--kertas);
    text-align: center;
    padding: 4rem 20px;
}

.ayat__arab {
    font-family: var(--arab);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.8;
    color: var(--kuning);
    margin-bottom: 0.4rem;
}

.ayat__arti {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    line-height: 1.35;
    max-width: 720px;
    margin: 0 auto 0.6rem;
}

.ayat__sumber {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--kuning);
    margin: 0;
}

/* Papan nama "Assalamu'alaikum, saya ..." */
.papan-nama {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start; /* papan tanpa foto tidak ikut setinggi papan berfoto */
}

.papan {
    background: var(--putih);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--bayang);
    text-align: center;
    transform: rotate(var(--r, 0deg));
}

.papan-nama li:nth-child(odd) { --r: -1.5deg; }
.papan-nama li:nth-child(3n) { --r: 1.2deg; }

.papan__atas {
    display: block;
    background: var(--kuning);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.7rem 0.5rem;
}

.papan__nama {
    display: block;
    font-family: var(--tulis);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.1;
    padding: 1.2rem 1rem 0.3rem;
}

.papan__peran {
    display: block;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--teks);
    padding: 0 1rem 1.2rem;
}

/* Foto potongan (tanpa latar) di lingkaran kuning, kepala menyembul ke atas */
.papan__foto {
    position: relative;
    display: block;
    width: 140px;
    height: 140px;
    margin: 2.6rem auto 0;
    border-radius: 50%;
    background: var(--kuning-muda);
    box-shadow: inset 0 0 0 3px var(--kuning);
    clip-path: inset(-70px 0 0 0 round 0 0 70px 70px);
}

.papan__foto img {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 118%;
    max-width: none;
    transform: translateX(-50%);
}

.papan--ketua {
    max-width: 640px;
    margin: 0 auto 3rem;
    transform: rotate(-1deg);
}

.papan--ketua .papan__isi {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 0 1.8rem 0.4rem;
    text-align: left;
}

.papan--ketua .papan__foto {
    flex: none;
    width: 170px;
    height: 170px;
    margin: 3.2rem 0 1.2rem;
    clip-path: inset(-80px 0 0 0 round 0 0 85px 85px);
}

.papan--ketua .papan__nama,
.papan--ketua .papan__peran {
    padding-left: 0;
    padding-right: 0;
}

.papan--ketua .papan__atas {
    background: var(--navy);
    color: var(--kuning);
}

.papan--ketua .papan__nama {
    font-size: 2.4rem;
}

/* Kliping koran (liputan media) */
.kliping {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2.5rem;
}

.kliping li {
    position: relative;
    background: #FBF8F0;
    padding: 2rem 1.8rem 1.6rem;
    box-shadow: var(--bayang);
    transform: rotate(var(--r, -1deg));
    border-top: 3px double var(--navy);
}

.kliping li:nth-child(even) { --r: 1.2deg; }

.kliping .klip {
    left: 82%;
}

.kliping__sumber {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--teks);
    border-bottom: 1px solid var(--garis);
    padding-bottom: 0.5rem;
    margin-bottom: 0.8rem;
}

.kliping h3 {
    font-size: 1.3rem;
    line-height: 1.2;
    margin-bottom: 0.7rem;
}

.kliping p {
    color: var(--teks);
    font-size: 0.95rem;
}

.kliping a {
    font-family: var(--mono);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Program: catatan tempel
   -------------------------------------------------------------------------- */

.tempel {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2.5rem 1.5rem;
}

.tempel li {
    position: relative;
    background: var(--kuning);
    aspect-ratio: 1;
    padding: 1.6rem 1.1rem 1rem;
    box-shadow: 0 12px 20px rgba(11, 28, 56, 0.18);
    transform: rotate(var(--r, -2deg));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tempel li:nth-child(even) { --r: 2.5deg; background: var(--kuning-muda); }
.tempel li:nth-child(3) { --r: -0.5deg; }

.tempel .klip {
    width: 40px;
    top: -22px;
    transform: translateX(-50%) rotate(-10deg);
}

.tempel__no {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1;
}

.tempel__teks {
    font-family: var(--tulis);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.05;
}

/* Kertas buku tulis bergaris (SKL, persyaratan berkas) */
.buku {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    background-color: var(--putih);
    background-image:
        linear-gradient(90deg, transparent 54px, #F19A9A 54px, #F19A9A 56px, transparent 56px),
        repeating-linear-gradient(180deg, transparent 0 39px, #CFE0F5 39px 40px);
    padding: 2.6rem 2rem 1.6rem 4.6rem;
    box-shadow: var(--bayang);
    transform: rotate(-0.8deg);
}

.buku h3 {
    font-family: var(--tulis);
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 40px;
    margin-bottom: 0.5rem;
}

.buku ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.buku li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 40px;
    font-weight: 600;
    line-height: 1.25;
}

.buku li .ej {
    font-size: 22px;
    flex: none;
}

.buku > .ikon {
    position: absolute;
    top: -38px;
    right: 1.5rem;
    width: 80px;
    transform: rotate(10deg);
    filter: drop-shadow(0 6px 8px rgba(11, 28, 56, 0.2));
}

/* --------------------------------------------------------------------------
   Kegiatan: dinding polaroid
   -------------------------------------------------------------------------- */

.dinding {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 2.5rem;
}

.dinding figure {
    margin: 0;
}

.dinding .polaroid {
    padding-bottom: 14px;
}

.dinding .polaroid img:not(.klip) {
    aspect-ratio: 4 / 5;
}

.dinding figure:nth-child(3n+1) .polaroid { --r: -2.5deg; }
.dinding figure:nth-child(3n+2) .polaroid { --r: 1.8deg; }
.dinding figure:nth-child(3n) .polaroid { --r: -1deg; }

.dinding .klip {
    width: 50px;
    top: -28px;
}

.dinding h3 {
    font-family: var(--tulis);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.05;
    margin: 1.4rem 0 0.4rem;
}

.dinding p {
    color: var(--teks);
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   SPMB: langkah, kuitansi, lokasi
   -------------------------------------------------------------------------- */

.langkah {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2rem;
}

.langkah .kartu-kertas {
    height: 100%;
}

.langkah li:nth-child(2) .kartu-kertas { --r: 1.2deg; }
.langkah li:nth-child(3) .kartu-kertas { --r: -1.6deg; }

.langkah p {
    font-size: 0.95rem;
}

.spmb-kisi {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem 3rem;
    align-items: start;
    margin-top: 5rem;
}

.kuitansi {
    background: var(--putih);
    font-family: var(--mono);
    padding: 2rem 1.8rem 2.6rem;
    box-shadow: var(--bayang);
    transform: rotate(1.2deg);
    /* tepi bawah bergerigi seperti struk */
    -webkit-mask: radial-gradient(10px at 50% 100%, transparent 98%, #000) 50% / 20px 100%;
    mask: radial-gradient(10px at 50% 100%, transparent 98%, #000) 50% / 20px 100%;
}

.kuitansi__kepala {
    text-align: center;
    border-bottom: 2px dashed var(--navy);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.kuitansi__kepala strong {
    display: block;
    font-size: 1.2rem;
}

.kuitansi__kepala span {
    font-size: 0.82rem;
    color: var(--teks);
}

.kuitansi ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.kuitansi li {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0;
    font-size: 0.92rem;
}

/* titik-titik penghubung antara nama dan harga */
.kuitansi li::after {
    content: "";
    order: 1;
    flex: 1;
    border-bottom: 2px dotted var(--garis);
}

.kuitansi li strong {
    order: 2;
    white-space: nowrap;
}

.kuitansi__total {
    display: flex;
    justify-content: space-between;
    border-top: 2px dashed var(--navy);
    padding-top: 0.9rem;
    font-weight: 700;
    font-size: 1.3rem;
}

.kuitansi .btn {
    width: 100%;
    margin-top: 1.5rem;
}

.lokasi {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 4rem;
    background: var(--putih);
    padding: 1.6rem 1.8rem;
    box-shadow: var(--bayang);
}

.lokasi .ej {
    font-size: 54px;
    flex: none;
}

.lokasi p {
    flex: 1;
    margin: 0;
}

.legal {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--teks);
    text-align: center;
    margin-top: 2rem;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Footer (kuning)
   -------------------------------------------------------------------------- */

.kaki {
    background: var(--kuning-muda);
    padding: 3rem 0 2rem;
    text-align: center;
}

.kaki__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 2rem;
    margin-bottom: 2.2rem;
}

.kaki__nav a {
    font-family: var(--mono);
    font-weight: 700;
    text-decoration: none;
}

.kaki__nav a:hover {
    text-decoration: underline;
}

.kaki__tengah {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.6rem;
}

.kaki__ikon {
    display: flex;
    gap: 1.4rem;
}

.kaki__ikon:first-child { justify-content: flex-end; }

.kaki__ikon a {
    font-size: 1.9rem;
    color: var(--navy);
}

.kaki__ikon a:hover {
    color: var(--teks);
}

.kaki__logo img {
    width: 130px;
    border-radius: 12px;
    box-shadow: var(--bayang);
    transform: rotate(-3deg);
}

.kaki p {
    font-size: 0.88rem;
    color: var(--teks);
    max-width: 640px;
    margin: 0 auto 0.6rem;
    overflow-wrap: anywhere;
}

.kaki__hak {
    font-family: var(--mono);
    font-size: 0.8rem;
    margin-top: 1.2rem;
}

/* --------------------------------------------------------------------------
   Responsif
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .nav__isi {
        grid-template-columns: 1fr auto;
    }

    .merek {
        order: 1;
    }

    .nav__burger {
        display: flex;
        order: 2;
    }

    .nav #navTautan {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0.2rem;
        background: var(--kertas);
        border-bottom: 3px solid var(--kuning);
        padding: 0.6rem 20px 1.4rem;
        box-shadow: var(--bayang);
    }

    .nav #navTautan.nav__tautan--active {
        display: flex;
    }

    .nav__grup {
        flex-direction: column;
        gap: 0;
    }

    .nav__grup--kanan {
        align-items: stretch;
    }

    .nav__grup a {
        padding: 0.65rem 0;
        font-size: 1.1rem;
    }

    .nav__grup .btn {
        margin-top: 0.6rem;
        padding: 0.65rem 1rem;
    }

    .dua-kolom {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .tempel {
        grid-template-columns: repeat(3, 1fr);
    }

    .kisi-3, .langkah, .dinding, .papan-nama {
        grid-template-columns: repeat(2, 1fr);
    }

    .spmb-kisi {
        grid-template-columns: 1fr;
    }

    .stiker {
        --skala: 0.75;
    }

    /* satu kolom: gugus stiker jadi hiasan ringkas di tengah, bukan kotak lebar kosong */
    .gugus {
        min-height: 320px;
        max-width: 460px;
        width: 100%;
        margin: 0 auto -1.5rem;
    }
}

@media (max-width: 680px) {
    .seksi {
        padding: 4rem 0;
    }

    .hero__panggung {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 1rem;
    }

    .hero__panggung .idcard {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
    }

    .hero__panggung .btn:first-child { justify-self: stretch; }
    .hero__panggung .btn:last-child { justify-self: stretch; }

    .idcard__isi {
        grid-template-columns: 1fr 108px;
        padding: 1rem 0.9rem 0.8rem;
    }

    .idcard__judul {
        font-size: 1.1rem;
    }

    .idcard dd {
        font-size: 1.15rem;
    }

    .idcard__stempel {
        width: 52px;
        height: 52px;
        left: -1.2rem;
        font-size: 0.48rem;
    }

    /* di HP kolase disusun atas-bawah supaya polaroid tidak menutupi tulisan */
    .kolase {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .kolase__map {
        order: -1;
        position: relative;
        width: 82%;
        height: 290px;
        margin: 1rem 0 0 auto;
    }

    .kolase__map .polaroid {
        width: 52%;
    }

    .kolase__map .polaroid:nth-child(2) {
        top: 70px;
    }

    .kolase__kertas {
        position: relative;
        z-index: 3;
        width: 96%;
        min-height: 0;
        gap: 1.6rem;
        margin-top: -1.5rem;
        padding: 1.6rem 1.3rem 1.3rem;
    }

    .kolase__sapa {
        max-width: none;
    }

    .map .ej {
        font-size: 96px;
    }

    .map span:not(.ej) {
        font-size: 0.85rem;
        white-space: nowrap;
        padding: 0.3rem 0.7rem;
    }

    .map-grid {
        gap: 2rem 1rem;
    }

    /* di HP gugus stiker jadi hiasan kecil di atas kutipan, bukan satu layar penuh */
    .gugus {
        min-height: 220px;
        max-width: 340px;
    }

    .gugus .stiker {
        --skala: 0.55;
        max-height: 100px;
    }

    .ajakan__isi {
        grid-template-columns: 1fr 1fr;
    }

    .ajakan__isi > div {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .ajakan img {
        width: 110px;
        justify-self: center;
    }

    .ajakan__isi > img:last-child {
        justify-self: center;
    }

    .tempel {
        grid-template-columns: repeat(2, 1fr);
    }

    .kisi-3, .langkah, .dinding, .papan-nama, .kliping {
        grid-template-columns: 1fr;
    }

    .kisi-3 {
        gap: 3.5rem;
    }

    .buku {
        padding: 2.4rem 1rem 1.4rem 3.6rem;
        background-image:
            linear-gradient(90deg, transparent 40px, #F19A9A 40px, #F19A9A 42px, transparent 42px),
            repeating-linear-gradient(180deg, transparent 0 39px, #CFE0F5 39px 40px);
    }

    .lokasi {
        flex-direction: column;
        text-align: center;
    }

    .papan--ketua .papan__isi {
        flex-direction: column;
        gap: 0;
        text-align: center;
    }

    .papan--ketua .papan__foto {
        margin: 3rem auto 0;
    }

    /* logo di atas, keempat ikon kontak satu baris di bawahnya */
    .kaki__tengah {
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem 1.4rem;
    }

    .kaki__ikon:first-child {
        justify-content: flex-end;
    }

    .kaki__logo {
        justify-self: center;
        grid-row: 1;
        grid-column: 1 / -1;
    }

    /* di HP stiker besar disembunyikan sebagian agar tidak menutupi teks */
    .stiker--lebar {
        display: none;
    }
}

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

    .pita {
        white-space: normal;
        text-align: center;
    }

    .pita__t > span:nth-child(n+2) {
        display: none;
    }
}