/* (c) 2026 Pemilik repository. Semua hak dilindungi. Lihat berkas LICENSE di folder utama. */
/* dekorasi.css - Semua hiasan pastel pink, kuning, dan hijau: latar bertabur confetti,
   bentuk lembut (blob), bintang dan hati melayang, garis gelombang, footer, dan kartu berwarna.
   Ingin tampilan lebih polos? Hapus baris <link> dekorasi.css di index.html. */

:root{--pink-2:#F6B3C6;--green-2:#B5E2C3;--yellow-2:#FFE08A;--sprinkle-opacity:.55}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--pink-2:#7A3D53;--green-2:#2F5A42;--yellow-2:#6B5A1C;--sprinkle-opacity:.16}}
:root[data-theme="dark"]{--pink-2:#7A3D53;--green-2:#2F5A42;--yellow-2:#6B5A1C;--sprinkle-opacity:.16}

/* ---------- latar bertabur confetti ---------- */
body{background:
  radial-gradient(900px 520px at 6% -6%,var(--pink) 0%,transparent 62%),
  radial-gradient(820px 520px at 96% 6%,var(--yellow) 0%,transparent 60%),
  radial-gradient(900px 620px at 50% 108%,var(--green) 0%,transparent 62%),
  var(--bg);background-attachment:fixed}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cline x1='66' y1='140' x2='77' y2='140' stroke='%23F6B3C6' stroke-width='4.6' stroke-linecap='round' transform='rotate(94 66 140)'/%3E%3Cline x1='230' y1='123' x2='241' y2='123' stroke='%23B5E2C3' stroke-width='4.6' stroke-linecap='round' transform='rotate(148 230 123)'/%3E%3Cline x1='24' y1='11' x2='35' y2='11' stroke='%23FFE08A' stroke-width='4.6' stroke-linecap='round' transform='rotate(120 24 11)'/%3E%3Ccircle cx='71' cy='65' r='3.4' fill='%23F6B3C6'/%3E%3Cline x1='249' y1='122' x2='260' y2='122' stroke='%23B5E2C3' stroke-width='4.6' stroke-linecap='round' transform='rotate(140 249 122)'/%3E%3Cline x1='123' y1='163' x2='134' y2='163' stroke='%23FFE08A' stroke-width='4.6' stroke-linecap='round' transform='rotate(38 123 163)'/%3E%3Cline x1='64' y1='45' x2='75' y2='45' stroke='%23F6B3C6' stroke-width='4.6' stroke-linecap='round' transform='rotate(133 64 45)'/%3E%3Ccircle cx='102' cy='12' r='3.4' fill='%23B5E2C3'/%3E%3Cline x1='196' y1='47' x2='207' y2='47' stroke='%23FFE08A' stroke-width='4.6' stroke-linecap='round' transform='rotate(151 196 47)'/%3E%3Cline x1='18' y1='197' x2='29' y2='197' stroke='%23F6B3C6' stroke-width='4.6' stroke-linecap='round' transform='rotate(68 18 197)'/%3E%3Cline x1='122' y1='182' x2='133' y2='182' stroke='%23B5E2C3' stroke-width='4.6' stroke-linecap='round' transform='rotate(99 122 182)'/%3E%3Ccircle cx='181' cy='231' r='3.4' fill='%23FFE08A'/%3E%3Cline x1='104' y1='202' x2='115' y2='202' stroke='%23F6B3C6' stroke-width='4.6' stroke-linecap='round' transform='rotate(113 104 202)'/%3E%3Cline x1='241' y1='40' x2='252' y2='40' stroke='%23B5E2C3' stroke-width='4.6' stroke-linecap='round' transform='rotate(93 241 40)'/%3E%3Cline x1='32' y1='41' x2='43' y2='41' stroke='%23FFE08A' stroke-width='4.6' stroke-linecap='round' transform='rotate(55 32 41)'/%3E%3Ccircle cx='70' cy='171' r='3.4' fill='%23F6B3C6'/%3E%3Cline x1='197' y1='215' x2='208' y2='215' stroke='%23B5E2C3' stroke-width='4.6' stroke-linecap='round' transform='rotate(107 197 215)'/%3E%3Cline x1='131' y1='101' x2='142' y2='101' stroke='%23FFE08A' stroke-width='4.6' stroke-linecap='round' transform='rotate(89 131 101)'/%3E%3Cline x1='137' y1='107' x2='148' y2='107' stroke='%23F6B3C6' stroke-width='4.6' stroke-linecap='round' transform='rotate(59 137 107)'/%3E%3Ccircle cx='227' cy='173' r='3.4' fill='%23B5E2C3'/%3E%3C/svg%3E");opacity:var(--sprinkle-opacity)}

/* ---------- warna hiasan ---------- */
.c-pink{color:var(--pink-2)}.c-green{color:var(--green-2)}.c-yellow{color:var(--yellow-2)}
.blob{position:absolute;display:block;border-radius:58% 42% 55% 45%/48% 58% 42% 52%;background:currentColor;opacity:.55;pointer-events:none;z-index:0;animation:ambang 10s ease-in-out infinite}
.hias{position:absolute;display:block;width:26px;height:26px;pointer-events:none;z-index:1;animation:kerlip 5s ease-in-out infinite}
.hias svg,.hias-inline svg{width:100%;height:100%;display:block}
.hias-inline{display:inline-block;width:24px;height:24px;vertical-align:-3px;margin-left:6px;animation:kerlip 5s ease-in-out infinite}
.hias-inline.small{width:18px;height:18px;margin-left:2px}
@keyframes ambang{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(5deg)}}
@keyframes kerlip{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(14deg)}}
@keyframes melayang{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}

/* ---------- header dan footer ---------- */
.top::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:5px;background:linear-gradient(90deg,var(--pink-2) 0 33.3%,var(--yellow-2) 33.3% 66.6%,var(--green-2) 66.6%)}
.logo span.mark{box-shadow:0 4px 10px rgba(246,179,198,.55)}
.footer{position:relative;margin-top:28px;color:var(--ink)}
.footer .wave{display:block;width:100%;height:70px;color:var(--pink)}
.footer-isi{background:var(--pink);padding:8px 24px 36px;margin:0;max-width:none;position:relative;overflow:hidden}
.footer-grid{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1.4fr 1fr;gap:28px;position:relative;z-index:2}
.footer h3{font-size:20px;margin-bottom:10px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.footer a{font-weight:800}
.footer .kecil{font-size:13px;color:var(--muted);margin-top:22px;text-align:center;position:relative;z-index:2}
.footer .tri{height:10px;background:linear-gradient(90deg,var(--pink-2) 0 33.3%,var(--yellow-2) 33.3% 66.6%,var(--green-2) 66.6%)}

/* ---------- hero beranda ---------- */
.hero-panel{position:relative;overflow:hidden;border-radius:46px;margin:26px 0 10px;padding:44px 44px 40px;
  background:linear-gradient(135deg,var(--pinksoft) 0%,var(--yellow) 54%,var(--green) 100%);box-shadow:0 16px 44px rgba(201,71,111,.14),inset 0 0 0 3px rgba(255,255,255,.55)}
.hero-panel .hero{padding:0;position:relative;z-index:2;align-items:center}
.hero-panel .blob.b1{width:280px;height:280px;left:-80px;top:-100px}
.hero-panel .blob.b2{width:210px;height:210px;left:38%;top:-90px;opacity:.5}
.hero-panel .blob.b3{width:260px;height:260px;right:-70px;bottom:-110px}
.hero-panel .blob.b4{width:130px;height:130px;left:34%;bottom:-60px;opacity:.6}
.hero-panel .hias.p1{left:4%;top:72%}.hero-panel .hias.p2{left:46%;top:10%;width:30px;height:30px}
.hero-panel .hias.p3{left:50%;top:84%;width:22px;height:22px}.hero-panel .hias.p4{right:6%;top:9%;width:30px;height:30px}
.hero-panel .hero h1{font-size:clamp(34px,4.3vw,52px)}
.hl{background:linear-gradient(transparent 58%,var(--yellow-2) 58%);padding:0 .08em;border-radius:6px}
.hl.hl2{background:linear-gradient(transparent 58%,var(--pink-2) 58%)}
.hero-kanan{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.hero-kue{width:min(230px,56%);animation:melayang 6s ease-in-out infinite;filter:drop-shadow(0 12px 14px rgba(201,71,111,.22))}
.hero-kue svg{display:block;width:100%;height:auto}
.hero-panel .po{width:100%;background:var(--surface);border:3px dashed var(--yellow-2);box-shadow:0 10px 26px rgba(120,90,0,.10)}
.hero-panel .po .slot{background:var(--pinksoft)}

/* ---------- panel bagian ---------- */
.panel{position:relative;border-radius:38px;padding:30px 28px;margin:26px 0;background:var(--surface);box-shadow:0 12px 34px rgba(201,71,111,.10);border:2px solid var(--pink)}
.panel.warna{background:linear-gradient(135deg,var(--surface) 0%,var(--pinksoft) 100%);border-color:var(--yellow-2);overflow:hidden}
.panel.warna::before{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:58% 42% 55% 45%/48% 58% 42% 52%;background:var(--green);opacity:.7;pointer-events:none}
.panel.warna>*{position:relative}
.judul{font-size:36px}
.pemisah{height:20px;margin:6px 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='20' viewBox='0 0 72 20'%3E%3Ccircle cx='6' cy='10' r='4' fill='%23F6B3C6'/%3E%3Cpath d='M24 4 25.9 8.1 30 10 25.9 11.9 24 16 22.1 11.9 18 10 22.1 8.1Z' fill='%23FFE08A'/%3E%3Ccircle cx='42' cy='10' r='4' fill='%23B5E2C3'/%3E%3Cpath d='M60 4 61.9 8.1 66 10 61.9 11.9 60 16 58.1 11.9 54 10 58.1 8.1Z' fill='%23F6B3C6'/%3E%3C/svg%3E") repeat-x center/72px 20px;opacity:.9}

/* ---------- judul bergaris gelombang ---------- */
main.wrap h1:not(.hero h1),.amain h1{display:block;width:fit-content;max-width:100%;padding-bottom:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 4 Q7 0 14 4 T28 4' fill='none' stroke='%23F6B3C6' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom/28px 8px}

/* ---------- kartu berwarna ---------- */
.card:not(.pcard){border-top:6px solid var(--accent,var(--pink-2));box-shadow:0 8px 22px rgba(201,71,111,.07)}
.card:nth-child(3n+1){--accent:var(--pink-2)}.card:nth-child(3n+2){--accent:var(--yellow-2)}.card:nth-child(3n){--accent:var(--green-2)}
.pcard{border:2px solid var(--tint,var(--line));transition:transform .22s ease,box-shadow .22s ease;overflow:visible}
.menu .pcard:nth-child(3n+1){--tint:var(--pink-2)}.menu .pcard:nth-child(3n+2){--tint:var(--yellow-2)}.menu .pcard:nth-child(3n){--tint:var(--green-2)}
.pcard:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 18px 32px rgba(201,71,111,.18)}
.pcard::after{content:'';position:absolute;top:-11px;right:-8px;width:32px;height:32px;background:var(--tint,var(--pink-2));-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1.5 14.6 9.4 22.5 12 14.6 14.6 12 22.5 9.4 14.6 1.5 12 9.4 9.4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1.5 14.6 9.4 22.5 12 14.6 14.6 12 22.5 9.4 14.6 1.5 12 9.4 9.4Z'/%3E%3C/svg%3E") center/contain no-repeat;animation:kerlip 5s ease-in-out infinite;pointer-events:none}
.pcard .ph{border:4px solid var(--surface)}
.chip.k0{background:var(--pinksoft);border-color:var(--pink-2)}.chip.k1{background:var(--yellow);border-color:var(--yellow-2)}.chip.k2{background:var(--green);border-color:var(--green-2)}
.chip[aria-pressed="true"].k0,.chip[aria-pressed="true"].k1,.chip[aria-pressed="true"].k2{background:var(--ink);border-color:var(--ink)}
.btn{box-shadow:0 6px 14px rgba(201,71,111,.24)}.btn.ghost,.btn.small.ghost{box-shadow:none}
.btn:hover{transform:translateY(-1px)}
.step{position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(201,71,111,.08)}
.step::after{content:'';position:absolute;right:-26px;bottom:-26px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.55)}
.step b.n{width:46px;height:46px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:24px;box-shadow:0 4px 10px rgba(0,0,0,.07);margin-bottom:6px}

/* ---------- halaman masuk dan daftar ---------- */
.auth-wrap{position:relative;overflow:clip;padding:18px 0 34px}
.auth-wrap .auth-card{position:relative;z-index:2;background:var(--surface);box-shadow:0 18px 44px rgba(201,71,111,.16)}
.auth-wrap .blob.a1{width:260px;height:260px;left:6%;top:6%}.auth-wrap .blob.a2{width:210px;height:210px;right:7%;top:0}
.auth-wrap .blob.a3{width:240px;height:240px;right:20%;bottom:-40px}
.auth-wrap .hias.h1{left:24%;top:14%}.auth-wrap .hias.h2{right:24%;top:30%;width:32px;height:32px}.auth-wrap .hias.h3{left:16%;bottom:14%;width:22px;height:22px}
.auth-bg{position:relative;min-height:100vh;overflow:clip;display:flex;justify-content:center}
.auth-bg>main{position:relative;z-index:2;width:100%}
.auth-bg .blob.a1{width:300px;height:300px;left:-70px;top:-80px}.auth-bg .blob.a2{width:240px;height:240px;right:-60px;top:20%}
.auth-bg .blob.a3{width:280px;height:280px;left:12%;bottom:-100px}
.auth-bg .hias.h1{left:18%;top:22%;width:30px;height:30px}.auth-bg .hias.h2{right:18%;top:12%}.auth-bg .hias.h3{right:22%;bottom:16%;width:30px;height:30px}
.auth-bg .card{box-shadow:0 18px 44px rgba(201,71,111,.16)}

/* ---------- panel admin ---------- */
.adm{position:relative}
.adm::before{content:'';position:fixed;top:0;left:0;right:0;height:6px;z-index:30;background:linear-gradient(90deg,var(--pink-2) 0 33.3%,var(--yellow-2) 33.3% 66.6%,var(--green-2) 66.6%)}
.side{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--pinksoft) 0%,var(--surface) 48%,var(--green) 100%)}
.side::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cline x1='66' y1='140' x2='77' y2='140' stroke='%23F6B3C6' stroke-width='4.6' stroke-linecap='round' transform='rotate(94 66 140)'/%3E%3Cline x1='230' y1='123' x2='241' y2='123' stroke='%23B5E2C3' stroke-width='4.6' stroke-linecap='round' transform='rotate(148 230 123)'/%3E%3Cline x1='24' y1='11' x2='35' y2='11' stroke='%23FFE08A' stroke-width='4.6' stroke-linecap='round' transform='rotate(120 24 11)'/%3E%3Ccircle cx='71' cy='65' r='3.4' fill='%23F6B3C6'/%3E%3Cline x1='249' y1='122' x2='260' y2='122' stroke='%23B5E2C3' stroke-width='4.6' stroke-linecap='round' transform='rotate(140 249 122)'/%3E%3Cline x1='123' y1='163' x2='134' y2='163' stroke='%23FFE08A' stroke-width='4.6' stroke-linecap='round' transform='rotate(38 123 163)'/%3E%3Cline x1='64' y1='45' x2='75' y2='45' stroke='%23F6B3C6' stroke-width='4.6' stroke-linecap='round' transform='rotate(133 64 45)'/%3E%3Ccircle cx='102' cy='12' r='3.4' fill='%23B5E2C3'/%3E%3Cline x1='196' y1='47' x2='207' y2='47' stroke='%23FFE08A' stroke-width='4.6' stroke-linecap='round' transform='rotate(151 196 47)'/%3E%3Cline x1='18' y1='197' x2='29' y2='197' stroke='%23F6B3C6' stroke-width='4.6' stroke-linecap='round' transform='rotate(68 18 197)'/%3E%3Cline x1='122' y1='182' x2='133' y2='182' stroke='%23B5E2C3' stroke-width='4.6' stroke-linecap='round' transform='rotate(99 122 182)'/%3E%3Ccircle cx='181' cy='231' r='3.4' fill='%23FFE08A'/%3E%3Cline x1='104' y1='202' x2='115' y2='202' stroke='%23F6B3C6' stroke-width='4.6' stroke-linecap='round' transform='rotate(113 104 202)'/%3E%3Cline x1='241' y1='40' x2='252' y2='40' stroke='%23B5E2C3' stroke-width='4.6' stroke-linecap='round' transform='rotate(93 241 40)'/%3E%3Cline x1='32' y1='41' x2='43' y2='41' stroke='%23FFE08A' stroke-width='4.6' stroke-linecap='round' transform='rotate(55 32 41)'/%3E%3Ccircle cx='70' cy='171' r='3.4' fill='%23F6B3C6'/%3E%3Cline x1='197' y1='215' x2='208' y2='215' stroke='%23B5E2C3' stroke-width='4.6' stroke-linecap='round' transform='rotate(107 197 215)'/%3E%3Cline x1='131' y1='101' x2='142' y2='101' stroke='%23FFE08A' stroke-width='4.6' stroke-linecap='round' transform='rotate(89 131 101)'/%3E%3Cline x1='137' y1='107' x2='148' y2='107' stroke='%23F6B3C6' stroke-width='4.6' stroke-linecap='round' transform='rotate(59 137 107)'/%3E%3Ccircle cx='227' cy='173' r='3.4' fill='%23B5E2C3'/%3E%3C/svg%3E");opacity:.38;pointer-events:none}
.side>*{position:relative}
.side a:nth-of-type(3n+1):hover{background:var(--pinksoft)}.side a:nth-of-type(3n+2):hover{background:var(--yellow)}.side a:nth-of-type(3n):hover{background:var(--green)}
.side a[aria-current="page"]{background:var(--pink);box-shadow:inset 5px 0 0 var(--primary)}
.amain{position:relative;overflow:hidden}
.amain::before{content:'';position:absolute;top:-90px;right:-70px;width:280px;height:280px;border-radius:58% 42% 55% 45%/48% 58% 42% 52%;background:var(--yellow);opacity:.7;pointer-events:none}
.amain::after{content:'';position:absolute;bottom:-110px;left:-60px;width:260px;height:260px;border-radius:55% 45% 42% 58%/52% 42% 58% 48%;background:var(--green);opacity:.5;pointer-events:none}
.amain>*{position:relative;z-index:1}
.stat{position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(201,71,111,.08)}
.stat::after{content:'';position:absolute;right:12px;top:12px;width:22px;height:22px;background:rgba(255,255,255,.75);-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1.5 14.6 9.4 22.5 12 14.6 14.6 12 22.5 9.4 14.6 1.5 12 9.4 9.4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1.5 14.6 9.4 22.5 12 14.6 14.6 12 22.5 9.4 14.6 1.5 12 9.4 9.4Z'/%3E%3C/svg%3E") center/contain no-repeat}
.tbl th{background:var(--pinksoft)}
.scroll{box-shadow:0 8px 22px rgba(201,71,111,.07)}

@media (max-width:820px){
  .hero-panel{padding:30px 22px;border-radius:34px}.hero-kue{width:min(170px,50%)}
  .footer-grid{grid-template-columns:1fr}.panel{padding:22px 16px;border-radius:30px}.judul{font-size:30px}
  .hero-panel .blob.b2,.hero-panel .hias.p2{display:none}
}