/* Lencana — ucapan kelulusan/pelantikan polisi: cokelat tua dan emas. Kotak beludru dibuka memperlihatkan medali berpita,
   papan nama dada berukir, surat gading berbingkai emas, pesan sebelum bertugas bernomor Romawi. Tanpa lambang resmi. */
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("fonts/pinyon-script.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root { --bg: #1c1611; --bg2: #2c2219; --ink: #f2e9d8; --soft: #b3a185; --gold: #c9a55a; --gold-hi: #f4e3a8; --gold-lo: #7a5c25; --card: #f6efe0; --card-ink: #2a2018; --ink-gold: #8a6a2c; --line: #4a3b2b; --rib: #6b1f1d; --rib2: #efe4c8; --velvet: #4a1717; --leather: #2a1d14; --btn-ink: #1c1611; --serif: "Cormorant Garamond", Georgia, serif; --caps: "Cinzel", Georgia, serif; --script: "Pinyon Script", cursive; }
/* Tone warna (field "tone"): cokelat = bawaan di atas. */
:root[data-tone="biru"] { --bg: #0f1526; --bg2: #1a2440; --ink: #eef1f7; --soft: #9aa6c2; --gold: #d0ae5e; --gold-hi: #f6e7b4; --gold-lo: #7e6227; --card: #f3efe6; --card-ink: #151d33; --line: #2c3a5e; --rib: #1f3266; --rib2: #efe4c8; --velvet: #182654; --leather: #121a30; --btn-ink: #0f1526; }
:root[data-tone="hitam"] { --bg: #121212; --bg2: #1f1f1f; --ink: #f2efe8; --soft: #a7a39a; --card: #f4f1ea; --card-ink: #161616; --line: #383632; --rib: #2b2b2b; --rib2: #c9a55a; --velvet: #2a2a2a; --leather: #191919; --btn-ink: #121212; }

body { margin: 0; min-height: 100vh; background: radial-gradient(110% 60% at 50% 0%, var(--bg2), var(--bg) 70%) fixed; color: var(--ink); font: 500 19px/1.5 var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
em { font-style: italic; color: var(--gold); }
.kicker, .lbl { font: 500 12px/1.4 var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.s-hi { stop-color: var(--gold-hi); }
.s-mid { stop-color: var(--gold); }
.s-lo { stop-color: var(--gold-lo); }
.s-rib { stop-color: var(--rib); }
.s-rib2 { stop-color: var(--rib2); }
/* Kilau yang menyapu medali dari kiri ke kanan, berulang pelan. */
.kilau { transform-box: fill-box; transform-origin: center; animation: kilau 4.5s ease-in-out infinite; }
.medal { display: block; overflow: visible; }

/* Sampul: kotak beludru bertutup kulit; tutup terangkat saat diketuk, medali naik dan berkilau. */
.cover h1 { max-width: 320px; font: 400 42px/1.08 var(--serif); }
.cover h1 em { display: block; }
.case { position: relative; width: 210px; height: 250px; margin: 8px 0 4px; perspective: 900px; }
.bed { position: absolute; inset: 0; border-radius: 10px; background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--velvet) 70%, #fff 8%), var(--velvet) 60%, color-mix(in srgb, var(--velvet) 60%, #000)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent), inset 0 0 0 7px var(--leather), inset 0 0 0 8px color-mix(in srgb, var(--gold) 40%, transparent), inset 0 14px 30px rgb(0 0 0 / .55), 0 30px 50px rgb(0 0 0 / .55); display: grid; place-items: center; }
.bed .medal { width: 104px; height: 169px; filter: drop-shadow(0 10px 10px rgb(0 0 0 / .45)); opacity: 0; transition: transform 1s cubic-bezier(.2, .8, .2, 1) .35s, opacity .3s ease .15s; }
.lid { position: absolute; inset: 0; z-index: 1; border-radius: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--leather) 80%, #fff 10%), var(--leather) 55%, color-mix(in srgb, var(--leather) 70%, #000)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent), inset 0 0 0 9px transparent, 0 30px 50px rgb(0 0 0 / .55); transform-origin: 50% 0; transition: transform 1s cubic-bezier(.5, 0, .2, 1), opacity .4s ease .7s; display: grid; place-items: center; backface-visibility: hidden; }
.lid::before { content: ""; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 6px; }
.lid::after { content: ""; position: absolute; inset: 14px; border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 4px; }
.emblem { width: 54px; height: 54px; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo)); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: .9; animation: napas 2.6s ease-in-out infinite; }
.opening .lid { transform: rotateX(-105deg); opacity: 0; }
.opening .bed .medal { opacity: 1; transform: translateY(-14px) scale(1.06); }
.open { min-height: 50px; padding: 0 34px; border: 1px solid var(--gold); border-radius: 2px; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo)); color: var(--btn-ink); font: 600 13px/1 var(--caps); letter-spacing: .26em; text-transform: uppercase; cursor: pointer; box-shadow: 0 12px 26px rgb(0 0 0 / .4); }

/* Pembuka isi: medali tergantung dengan sinar halus di belakangnya, lalu papan nama dada. */
.hero { position: relative; padding-top: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rays { position: absolute; left: 50%; top: -60px; width: 460px; height: 460px; margin-left: -230px; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 9%, transparent) 0 2deg, transparent 2deg 9deg); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent); animation: putar 90s linear infinite; pointer-events: none; }
.pinned { position: relative; width: 120px; height: 195px; margin-bottom: 10px; filter: drop-shadow(0 16px 18px rgb(0 0 0 / .5)); transform-origin: 50% 0; animation: ayun 6s ease-in-out infinite; }
.opened .pinned { animation: sematkan 1.1s cubic-bezier(.2, .9, .3, 1.2) both, ayun 6s ease-in-out 1.1s infinite; }
/* Papan nama dada: pelat hitam mengilap, bingkai emas, dua paku kecil. */
.plate { position: relative; max-width: 100%; padding: 13px 34px; border: 1px solid var(--gold); border-radius: 3px; background: linear-gradient(180deg, #2b2824, #0e0d0c 55%, #1a1816); outline: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); outline-offset: 4px; box-shadow: 0 14px 28px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .12); }
.plate::before, .plate::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-hi), var(--gold-lo)); }
.plate::before { left: 12px; }
.plate::after { right: 12px; }
.plate span { font: 600 22px/1.2 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: #f1e9d6; text-shadow: 0 1px 0 rgb(0 0 0 / .8); overflow-wrap: anywhere; }
.school { margin-top: 6px; font: italic 400 20px/1.3 var(--serif); color: var(--soft); }
.laurel { width: 220px; height: 40px; margin-top: 4px; }
.laurel > path { stroke: color-mix(in srgb, var(--gold) 70%, transparent); }
.laurel .daun, .laurel .bintang { fill: var(--gold); }

/* Surat: kertas gading, bingkai emas ganda, ornamen di atas, tanda tangan tulisan tangan. */
.letter { position: relative; padding: 46px 28px 34px; background: var(--card); color: var(--card-ink); border-radius: 2px; box-shadow: 0 24px 48px rgb(0 0 0 / .45); }
.letter::before { content: ""; position: absolute; inset: 9px; border: 1px solid color-mix(in srgb, var(--ink-gold) 55%, transparent); pointer-events: none; }
.letter::after { content: ""; position: absolute; inset: 13px; border: 1px solid color-mix(in srgb, var(--ink-gold) 22%, transparent); pointer-events: none; }
.orn { position: absolute; left: 50%; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, var(--card) 58%, transparent 60%), linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo)); box-shadow: 0 6px 14px rgb(0 0 0 / .3); }
.orn::after { content: ""; position: absolute; inset: 14px; background: linear-gradient(135deg, var(--gold), var(--gold-lo)); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.msg { font: 500 21px/1.6 var(--serif); }
.sign { margin-top: 14px; font: 400 44px/1 var(--script); color: var(--ink-gold); text-align: right; }

/* Pesan sebelum bertugas: daftar di tengah, angka Romawi emas, pemisah garis tipis. */
.lbl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; text-align: center; }
.lbl::before, .lbl::after { content: ""; width: 30px; height: 1px; background: color-mix(in srgb, var(--gold) 60%, transparent); }
.brief ol { counter-reset: p; display: flex; flex-direction: column; }
.brief li { counter-increment: p; padding: 18px 8px; text-align: center; font: italic 400 23px/1.35 var(--serif); }
.brief li + li { border-top: 1px solid var(--line); }
.brief li::before { content: counter(p, upper-roman); display: block; margin-bottom: 6px; font: 500 13px/1 var(--caps); font-style: normal; letter-spacing: .2em; color: var(--gold); }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photos figure { margin: 0; padding: 6px; background: var(--card); box-shadow: 0 12px 24px rgb(0 0 0 / .4); }
.photos figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.photos figure:first-child:nth-last-child(odd) img { aspect-ratio: 4 / 3; }
.card { padding: 32px 24px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); outline: 1px solid color-mix(in srgb, var(--gold) 15%, transparent); outline-offset: -7px; background: color-mix(in srgb, var(--bg2) 70%, transparent); text-align: center; }
.reply h2 { margin-bottom: 16px; font: 400 32px/1.1 var(--serif); }
.hint { font-size: 18px; font-style: italic; color: var(--soft); }
.quick { justify-content: center; }
.btn { min-height: 50px; padding: 0 24px; border: 0; border-radius: 2px; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo)); color: var(--btn-ink); font: 600 12px/1.2 var(--caps); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; }
.btn.ghost { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: italic 500 18px/1.2 var(--serif); letter-spacing: 0; text-transform: none; }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); }
textarea { border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--ink); font: 500 18px/1.4 var(--serif); }
textarea::placeholder { color: var(--soft); font-style: italic; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.js-only { display: none; }
.js .js-only { display: block; }
main { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: 0 24px; overflow-x: clip; }

/* Cara dibuka "amplop": sampul diketuk dulu. Tanpa JS sampul dilewati dan semua isi langsung tampil. */
.cover { display: none; min-height: 100vh; min-height: 100svh; padding: 48px 0 40px; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; cursor: pointer; }
.js body[data-opener="amplop"]:not(.opened) .cover { display: flex; }
.js body[data-opener="amplop"]:not(.opened) .content,
.js body[data-opener="amplop"]:not(.opened) .foot { display: none; }
.opening .cover > :not(.case) { opacity: 0; transition: opacity .5s ease .2s; }
.content { display: flex; flex-direction: column; gap: 40px; padding: 44px 0 56px; }
.opened .content { animation: masuk .8s cubic-bezier(.2, .7, .2, 1) both; }
form { display: flex; flex-direction: column; gap: 12px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
textarea { width: 100%; min-height: 96px; padding: 14px 16px; resize: vertical; }
.msg { white-space: pre-line; overflow-wrap: anywhere; }
.music-toggle { position: fixed; top: 14px; right: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.music-toggle svg { width: 20px; height: 20px; }
.music-toggle[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--btn-ink); }
.foot { position: relative; z-index: 1; padding: 8px 22px 34px; text-align: center; font-size: 13px; color: var(--soft); }
.anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.anim .reveal.in { opacity: 1; transform: none; }
@keyframes masuk { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes napas { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes putar { to { transform: rotate(360deg); } }
@keyframes kilau { 0%, 55% { transform: translateX(-90px) rotate(18deg); } 100% { transform: translateX(140px) rotate(18deg); } }
@keyframes ayun { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes sematkan { from { opacity: 0; transform: translateY(-40px) scale(1.15); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Video unggahan (field video): ditaruh sebelum galeri, bingkai mengikuti warna teks template (currentColor). */
.vk { width: min(100%, 440px); margin: 34px auto; padding: 0 20px; text-align: center; flex-direction: column; align-items: center; justify-content: center; }
.vk-layar { width: 100%; }
.vk-judul { margin: 0 0 12px; font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.vk-layar { position: relative; margin: 0; padding: 10px; border-radius: 20px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: color-mix(in srgb, currentColor 7%, transparent); box-shadow: 0 16px 34px rgba(0, 0, 0, .16); }
.vk-layar video { display: block; width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.vk-layar figcaption { margin-top: 10px; font-size: 14px; font-style: italic; opacity: .75; }