/* ==========================================================
   FELISTAR — STYLE
   ========================================================== */
:root {
  --blue: #2f5bff;
  --blue-d: #1c3fd6;
  --blue-l: #8ea6ff;
  --blue-xl: #dfe7ff;
  --pink: #ff3d8b;
  --pink-d: #d81f6c;
  --pink-l: #ff8cc0;
  --green: #e86096;
  --green-d: #e02671;
  --yellow: #ff69a0;
  --lav: #b8c6ff;
  --ink: #23265a;
  --text: #4b4f80;
  --muted: #8a8fb8;
  --paper: #ffffff;
  --radius: 28px;
  --shadow: 0 18px 40px -18px rgba(47, 66, 170, .35);
  --font-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-logo: "Fredoka", "Nunito", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: #fff;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.container { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn-pink, .btn-blue, .btn-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 34px; border-radius: 14px;
  font-weight: 800; font-size: 15px; letter-spacing: .2px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-pink { background: var(--pink); color: #fff; box-shadow: 0 6px 0 var(--pink-d), 0 14px 24px -8px rgba(255, 61, 139, .6); }
.btn-pink:hover { transform: translateY(-2px); background: #ff5299; }
.btn-pink:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pink-d); }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 5px 0 var(--blue-d); }
.btn-blue:hover { transform: translateY(-2px); }
.btn-blue.sm { padding: 7px 14px; font-size: 12px; border-radius: 9px; box-shadow: none; }
.btn-white { background: #fff; color: var(--blue); box-shadow: 0 5px 0 #c5d1ff; }

/* ---------- Display titles ---------- */
.title-3d {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .9;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #ffffff 30%, #e1e7ff 70%, #cfc6ff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #8b94f2) drop-shadow(0 10px 18px rgba(70, 60, 170, .35));
}
.title-pink {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7.5vw, 92px);
  line-height: .95;
  text-align: center;
  background: linear-gradient(180deg, #ff5fa2 0%, #ff3d8b 55%, #ff79b4 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #c9216d) drop-shadow(0 12px 18px rgba(255, 61, 139, .3));
}
.title-pink .indent { display: block; padding-left: 1.4em; }
.title-white {
  font-size: clamp(48px, 7vw, 88px);
}

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative;
  margin: 14px;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 660px;
  background: linear-gradient(180deg, #7d98ff 0%, #a0a6ff 22%, #b3c0f3 48%, #ffc4e2 70%, #ffd9ec 100%);
  isolation: isolate;
}
.hero-glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(600px 300px at 75% 30%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(500px 260px at 15% 15%, rgba(255, 255, 255, .25), transparent 70%);
}
.scene {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 70%;
  z-index: 0;
  pointer-events: none;
}
.scene svg { width: 100%; height: 100%; display: block; }

/* Topbar */
.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 28px;
  padding: 18px 28px;
}
.logo {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -.5px;
  color: #fff;
  display: inline-flex; align-items: center; gap: 2px;
  text-shadow: 0 2px 0 rgba(47, 91, 255, .35);
}
.logo img { width: 40px; height: 40px; object-fit: contain; margin-right: 6px; filter: drop-shadow(0 2px 0 rgba(47, 91, 255, .35)); }
.logo .star { color: var(--yellow); font-size: .75em; transform: translateY(-2px); }
.logo.blue { color: var(--blue); text-shadow: none; }
.nav { display: flex; gap: 6px; }
.nav a {
  color: #fff; font-weight: 700; font-size: 14px;
  padding: 8px 14px; border-radius: 999px;
  transition: background .2s;
}
.nav a:hover { background: rgba(255, 255, 255, .22); }
.nav a.active { background: #fff; color: var(--blue); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top-id { color: #fff; font-weight: 800; font-size: 12px; opacity: .95; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ff69a0, #ff3c4c);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  color: #fff;
  transition: transform .2s;
}
.avatar:hover { transform: rotate(-8deg) scale(1.08); }
.avatar.alt { background: linear-gradient(135deg, #ff7ab6, #ff3d8b); }
.avatar svg { width: 18px; height: 18px; }
.burger { display: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .25); }
.burger span { display: block; width: 20px; height: 2.5px; background: #fff; margin: 4px auto; border-radius: 2px; }

/* Hero content */
.hero-inner {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px;
  padding: 26px 48px 0;
}
.hero-title h1 { font-size: clamp(64px, 10vw, 138px); }
.hero-title .line { display: flex; align-items: center; gap: 18px; }
.date-badge {
  font-family: var(--font-display);
  display: inline-block;
  background: linear-gradient(180deg, #4d74ff, var(--blue));
  color: #fff;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1;
  padding: 10px 14px 8px;
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--blue-d);
  transform: rotate(-4deg);
  text-align: center;
  white-space: nowrap;
}
.hero-side { padding-top: 26px; max-width: 420px; }
.hero-side h3 {
  font-family: var(--font-display);
  color: #fff; font-size: 30px; font-weight: 400; letter-spacing: .5px;
  margin-bottom: 8px;
}
.hero-side p { color: #fff; font-size: 14px; opacity: .95; margin-bottom: 22px; }

/* ==========================================================
   SECTIONS — shared
   ========================================================== */
section { position: relative; }
section > .container { position: relative; z-index: 1; }
.sec { overflow: hidden; }
.sec { padding: 90px 0; }
.burst {
  position: absolute; width: 54px; height: 54px; pointer-events: none;
  animation: twinkle 3s ease-in-out infinite;
}
.burst.sm { width: 34px; height: 34px; }
.burst:nth-of-type(2n) { animation-delay: 1.2s; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.75) rotate(20deg); opacity: .7; } }

.cloud {
  position: absolute; background: #fff; border-radius: 999px; opacity: .9;
  filter: drop-shadow(0 6px 10px rgba(120, 140, 230, .2));
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 55%; height: 160%; left: 15%; bottom: 20%; }
.cloud::after { width: 40%; height: 120%; right: 12%; bottom: 25%; }

/* ==========================================================
   NOTEBOOK
   ========================================================== */
.nb-sec {
  padding: 80px 0 120px;
  background: linear-gradient(180deg, #fff 0%, #fff 40%, #e4ebff 80%, #d6e1ff 100%);
  overflow: hidden;
}
.nb-sec .title-pink { margin-bottom: 50px; }
.notebook {
  position: relative;
  width: min(820px, 100%);
  margin: 0 auto;
}
.nb-sheet {
  position: absolute; left: -24px; top: -26px;
  width: 200px; height: 140px;
  background: linear-gradient(135deg, #ff9cc8, #ff7ab6);
  border-radius: 12px;
  transform: rotate(-8deg);
  z-index: 0;
}
.nb-sheet::after {
  content: ""; position: absolute; left: 22px; top: 20px; width: 150px; height: 120px;
  background: #ffc4dd; border-radius: 10px; transform: rotate(5deg);
}
.nb-board {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 54px 1fr;
  background: linear-gradient(180deg, #8fa8ff, #6d8cff);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 10px 0 #4f6fe6, var(--shadow);
}
.nb-page {
  background: var(--paper);
  border-radius: 14px;
  padding: 36px 34px;
  min-height: 420px;
  position: relative;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, #eef2ff 31px 32px);
}
.nb-page.left { border-radius: 14px 6px 6px 14px; }
.nb-page.right { border-radius: 6px 14px 14px 6px; }
.nb-rings { display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 20px 0; }
.nb-rings span {
  width: 64px; height: 16px; border-radius: 10px;
  background: linear-gradient(180deg, #f4f6ff, #b8c7ff);
  border: 2px solid #5878f0;
  box-shadow: 0 3px 0 #4462d8;
}
.step { margin-bottom: 26px; }
.step:last-child { margin-bottom: 0; }
.step-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: .5px;
  color: #fff;
  background: linear-gradient(180deg, #eb76a5, var(--green));
  padding: 4px 18px 2px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--green-d);
  margin-bottom: 10px;
}
.step p { font-size: 14.5px; color: var(--ink); }
.step p + p { margin-top: 8px; }

.polaroid {
  position: relative;
  background: #fff;
  padding: 10px 10px 34px;
  border-radius: 6px;
  box-shadow: 0 10px 24px -8px rgba(40, 50, 140, .35);
  transform: rotate(4deg);
  width: 190px;
  margin: 28px 0 0 auto;
}
.polaroid .ph { aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: linear-gradient(135deg, #b7c6ff, #ffc4e2); display: grid; place-items: center; }
.polaroid .ph img { width: 100%; height: 100%; object-fit: cover; }
.polaroid .cap { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 13px; color: var(--ink); }
.tape {
  position: absolute; width: 74px; height: 22px;
  background: rgba(255, 140, 192, .75);
  top: -10px; left: 50%; transform: translateX(-50%) rotate(-6deg);
}
.tape.green { background: rgba(149, 214, 74, .75); }
.calendar {
  position: absolute; left: 30px; bottom: 34px;
  width: 128px; background: #fff; border-radius: 8px; padding: 10px;
  box-shadow: 0 8px 20px -8px rgba(40, 50, 140, .35);
  transform: rotate(-6deg);
}
.calendar b { display: block; font-family: var(--font-display); color: var(--pink); font-size: 18px; font-weight: 400; margin-bottom: 4px; }
.calendar .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar .grid i { aspect-ratio: 1; background: #eef2ff; border-radius: 2px; }
.calendar .grid i.on { background: var(--pink-l); }
.ticket {
  position: absolute; right: -40px; top: -40px; z-index: 2;
  width: 150px; height: 74px;
  transform: rotate(14deg);
  filter: drop-shadow(0 8px 10px rgba(255, 61, 139, .3));
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  background:
    radial-gradient(circle at 0 50%, transparent 10px, #ff8cc0 11px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 10px, #ff8cc0 11px) right / 51% 100% no-repeat;
}
.ticket::before { transform: rotate(-16deg) translate(-14px, 10px); opacity: .7; }
.ticket span {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  font-family: "Fredoka", cursive; font-weight: 600; color: #fff; font-size: 22px; letter-spacing: 1px;
  transform: rotate(-4deg);
}

/* ==========================================================
   CAROUSEL (Karya pilihan / buku)
   ========================================================== */
.band {
  position: relative;
  background: linear-gradient(180deg, #d6e1ff 0%, #f0e6ff 45%, #fff 100%);
  padding: 30px 0 90px;
  overflow: hidden;
}
.band-hills { position: absolute; left: 0; right: 0; top: 60px; height: 260px; z-index: 0; pointer-events: none; }
.band-hills svg { width: 100%; height: 100%; }
.band .container { position: relative; z-index: 1; }
.band .title-white { margin: 110px 0 34px; }
.carousel { position: relative; }
.carousel-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 10px 4px 24px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 0 var(--blue-d), 0 10px 18px -6px rgba(47, 91, 255, .6);
  transition: transform .2s;
}
.carousel-btn:hover { transform: translateY(-50%) scale(1.08); }
.carousel-btn.prev { left: -20px; }
.carousel-btn.next { right: -20px; }
.carousel-btn svg { width: 18px; height: 18px; }

.card {
  scroll-snap-align: start;
  background: #fff;
  border-radius: 24px;
  padding: 28px 20px 26px;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform .25s;
  display: flex; flex-direction: column; align-items: center;
}
.card:hover { transform: translateY(-6px); }
.card-art { height: 210px; width: 100%; display: grid; place-items: center; margin-bottom: 18px; }
.card h4 {
  font-family: var(--font-display); font-weight: 400;
  color: var(--blue); font-size: 26px; line-height: 1; letter-spacing: .5px;
}
.card .sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.card .dot-badge {
  position: absolute; top: 26px; right: 26%;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pink); color: #fff; font-size: 12px; font-weight: 900;
  display: grid; place-items: center;
}

/* ==========================================================
   PILLS + TILES
   ========================================================== */
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.pill {
  min-width: 110px;
  padding: 9px 20px; border-radius: 999px;
  background: var(--blue); color: #fff;
  font-weight: 800; font-size: 14px;
  box-shadow: 0 4px 0 var(--blue-d);
  transition: transform .15s, background .2s;
}
.pill:hover { transform: translateY(-2px); }
.pill.active { background: var(--pink); box-shadow: 0 4px 0 var(--pink-d); }

.tiles { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.tile {
  position: relative; overflow: hidden;
  border-radius: 24px; min-height: 280px;
  padding: 26px;
  color: #fff;
  transition: transform .25s, opacity .3s;
  display: block;
}
.tile:hover { transform: translateY(-5px); }
.tile.green { background: linear-gradient(160deg, #eb72a3, #e54c8a); }
.tile.blue { background: linear-gradient(160deg, #a9bcff, #8aa4ff); }
.tile.pink { background: linear-gradient(160deg, #ffb3d4, #ff8cc0); }
.tile .tag {
  display: inline-block; font-size: 12px; font-weight: 800;
  background: var(--pink); color: #fff; padding: 3px 10px; border-radius: 8px;
}
.tile .tag.blue { background: var(--blue); }
.tile h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 58px); line-height: .9; letter-spacing: .5px;
  margin-top: 10px; position: relative; z-index: 1;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .08);
}
.tile p { position: relative; z-index: 1; font-size: 14px; margin-top: 10px; max-width: 280px; font-weight: 600; }
.tile .tile-art { position: absolute; right: 12px; bottom: 0; width: 46%; max-width: 260px; }
.tile .big-letters {
  position: absolute; right: -6px; bottom: -14px;
  font-family: var(--font-display); font-size: 150px; line-height: 1; color: #fff;
  text-shadow: 0 6px 0 rgba(216, 31, 108, .25);
}
.tile .heart { position: absolute; right: 18px; top: 18px; width: 92px; }
.tile.hide { display: none; }

/* ==========================================================
   BOOKS (3D)
   ========================================================== */
.shelf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px;
}
.book-card { cursor: pointer; }
.book-card.hide { display: none; }
.book-stage { perspective: 1100px; height: 270px; display: grid; place-items: center; margin-bottom: 10px; }
.book3d {
  --w: 160px; --h: calc(var(--w) / var(--r, .69)); --t: 26px;
  width: var(--w); height: var(--h);
  position: relative; transform-style: preserve-3d;
  transform: rotateY(28deg) rotateX(4deg);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.book-card:hover .book3d { transform: rotateY(8deg) rotateX(2deg) translateY(-8px); }
.book-card.flipped .book3d, .book-card.flipped:hover .book3d { transform: rotateY(200deg) rotateX(2deg) translateY(-6px); }
.book3d .back { overflow: hidden; }
.book3d .back img { width: 100%; height: 100%; object-fit: cover; }
.book3d .spine { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.book3d .spine span {
  writing-mode: vertical-rl; font-family: var(--font-display); font-size: 13px; letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 90%;
}
.gloss {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0 40%, rgba(255,255,255,.28) 48%, rgba(255,255,255,0) 58%),
              linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(255,255,255,.18) 3%, rgba(0,0,0,.08) 5%, transparent 9%);
}
.card-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.flip-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; color: var(--blue); font-size: 12px; font-weight: 800;
  padding: 5px 12px; border-radius: 99px; box-shadow: 0 3px 0 #c5d1ff;
}
.flip-btn svg { width: 14px; height: 14px; }
.flip-btn:hover { background: var(--blue); color: #fff; }
.book3d > div { position: absolute; }
.book3d .front { inset: 0; transform: translateZ(calc(var(--t) / 2)); border-radius: 2px 8px 8px 2px; overflow: hidden; }
.book3d .back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); border-radius: 8px 2px 2px 8px; }
.book3d .spine {
  top: 0; bottom: 0; width: var(--t);
  left: calc((var(--w) - var(--t)) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  border-radius: 3px;
}
.book3d .pages {
  top: 4px; bottom: 4px; width: calc(var(--t) - 4px);
  left: calc((var(--w) - var(--t) + 4px) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 4px));
  background: repeating-linear-gradient(90deg, #fff 0 2px, #e9ecf7 2px 3px);
}
.book3d .top {
  left: 0; width: calc(var(--w) - 4px); height: calc(var(--t) - 4px);
  top: calc((var(--h) - var(--t)) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 4px));
  background: repeating-linear-gradient(180deg, #fff 0 2px, #e9ecf7 2px 3px);
}
.book-shadow {
  position: absolute; bottom: 12px; width: 170px; height: 18px;
  background: radial-gradient(closest-side, rgba(40, 50, 140, .3), transparent);
  transform: translateX(-10px);
}
.cover-art {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px 14px 14px 18px; color: #fff;
}
.cover-art::before {
  content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 3px;
  background: rgba(255, 255, 255, .35);
}
.cover-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-art .ct {
  font-family: var(--font-display); font-size: 26px; line-height: .95; letter-spacing: .5px;
  position: relative; z-index: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}
.cover-art .ca { font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; position: relative; z-index: 1; opacity: .95; }
.cover-art .deco { position: absolute; right: -20px; bottom: 30px; width: 120px; opacity: .9; }
.book-card .meta { text-align: center; }
.book-card .genre { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: var(--green); padding: 2px 10px; border-radius: 99px; margin-bottom: 6px; }
.book-card h4 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--blue); line-height: 1; }
.book-card .price { font-weight: 900; color: var(--pink); margin-top: 4px; }
.book-card .hint { font-size: 12px; color: var(--muted); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(35, 38, 90, .55);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
  padding: 16px;
}
.modal.show { opacity: 1; pointer-events: auto; }
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--pink); font-size: 26px; font-weight: 900;
  box-shadow: 0 4px 0 #ffc4dd;
  z-index: 3;
}
.modal-hint { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: #fff; font-weight: 700; font-size: 14px; }

.ob {
  --w: min(410px, 45vw, calc(84vh * var(--r, .69))); --h: calc(var(--w) / var(--r, .69));
  position: relative;
  width: calc(var(--w) * 2); height: var(--h);
  perspective: 2200px;
  transform: translateX(calc(var(--w) * -.5));
  transition: transform .9s cubic-bezier(.4, .1, .2, 1);
}
.ob.open { transform: translateX(0); }
.ob-page {
  position: absolute; left: var(--w); top: 0; width: var(--w); height: 100%;
  background: #fffdf8;
  border-radius: 4px 12px 12px 4px;
  padding: 28px 26px;
  overflow-y: auto;
  box-shadow: inset 14px 0 18px -14px rgba(0, 0, 0, .25), 0 20px 40px -10px rgba(0, 0, 0, .35);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, #f1ece0 27px 28px);
}
.ob-cover {
  position: absolute; left: var(--w); top: 0; width: var(--w); height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.4, .1, .2, 1);
  cursor: pointer; z-index: 2;
}
.ob.open .ob-cover { transform: rotateY(-180deg); cursor: default; }
.ob-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px 12px 12px 4px; overflow: hidden; }
.ob-face.front { box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .4); }
.ob-face.front .cover-art .ct { font-size: clamp(30px, 5vw, 50px); }
.ob-face.front .cover-art { padding: 26px 22px 22px 30px; }
.ob-face.front .cover-art .deco { width: 60%; }
.ob-face.back {
  transform: rotateY(180deg);
  border-radius: 12px 4px 4px 12px;
  background: #fffdf8;
  padding: 28px 26px;
  box-shadow: inset -14px 0 18px -14px rgba(0, 0, 0, .25);
  overflow-y: auto;
}
.ob-open-btn {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  background: #fff; color: var(--pink); font-weight: 900; font-size: 13px;
  padding: 8px 16px; border-radius: 99px; white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateX(-50%) translateY(-4px); } }
.ob h5 { font-family: var(--font-display); font-weight: 400; color: var(--pink); font-size: 26px; letter-spacing: .5px; margin-bottom: 8px; }
.ob .syn { font-size: 13.5px; color: var(--ink); line-height: 1.7; }
.ob .quote { font-family: "Fredoka", sans-serif; font-size: 18px; color: var(--blue); line-height: 1.35; margin: 14px 0 18px; padding-left: 14px; border-left: 4px solid var(--yellow); }
.ob dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
.ob dt { color: var(--muted); font-weight: 700; }
.ob dd { color: var(--ink); font-weight: 800; }
.ob .price-big { font-family: var(--font-display); font-size: 36px; color: var(--blue); margin: 16px 0 10px; line-height: 1; }
.ob .btn-pink { width: 100%; padding: 12px; }
.ob .note { font-size: 11.5px; color: var(--muted); margin-top: 10px; text-align: center; }

/* ==========================================================
   DESIGN GALLERY
   ========================================================== */
.gallery { columns: 3 260px; column-gap: 18px; }
.g-item {
  break-inside: avoid; margin-bottom: 18px;
  border-radius: 22px; overflow: hidden; position: relative;
  box-shadow: var(--shadow); cursor: zoom-in;
  background: #fff;
  transition: transform .25s;
  display: block; width: 100%;
}
.g-item:hover { transform: translateY(-5px) rotate(-.5deg); }
.g-item.hide { display: none; }
.g-item .art { width: 100%; display: block; }
.g-item .art svg, .g-item .art img { width: 100%; height: auto; display: block; }
.g-item .cap {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 16px; text-align: left;
}
.g-item .cap b { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--blue); line-height: 1; letter-spacing: .3px; }
.g-item .cap span { font-size: 11px; font-weight: 800; color: #fff; background: var(--pink); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }

.lightbox-box {
  background: #fff; border-radius: 26px; overflow: hidden;
  width: min(760px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  transform: scale(.95); transition: transform .3s;
}
.modal.show .lightbox-box { transform: scale(1); }
.lightbox-box .art { flex: 1; min-height: 0; background: #f2f4ff; display: grid; place-items: center; }
.lightbox-box .art svg, .lightbox-box .art img { max-height: 64vh; width: auto; max-width: 100%; }
.lightbox-box .info { padding: 18px 24px 22px; display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.lightbox-box .info h4 { font-family: var(--font-display); font-weight: 400; color: var(--blue); font-size: 30px; line-height: 1; }
.lightbox-box .info p { font-size: 14px; }
.lb-nav { display: flex; gap: 8px; }
.lb-nav button { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 var(--blue-d); }
.lb-nav svg { width: 18px; height: 18px; }

.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tool {
  background: #fff; border-radius: 16px; padding: 12px 20px;
  font-weight: 800; color: var(--ink); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 10px;
}
.tool i { width: 12px; height: 12px; border-radius: 50%; }

/* ==========================================================
   ACHIEVEMENTS
   ========================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -70px; position: relative; z-index: 4; }
.stat {
  background: #fff; border-radius: 22px; padding: 22px 18px; text-align: center;
  box-shadow: var(--shadow);
}
.stat b { font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 1; display: block; }
.stat span { font-size: 13px; font-weight: 800; color: var(--muted); }
.stat:nth-child(1) b { color: var(--blue); }
.stat:nth-child(2) b { color: var(--pink); }
.stat:nth-child(3) b { color: var(--green-d); }
.stat:nth-child(4) b { color: #ff3c4c; }

.timeline { position: relative; max-width: 900px; margin: 0 auto; }
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--pink-l) 0 14px, transparent 14px 24px);
  border-radius: 3px;
}
.t-item { position: relative; width: 50%; padding: 0 44px 34px 0; }
.t-item:nth-child(even) { margin-left: 50%; padding: 0 0 34px 44px; }
.t-item.hide { display: none; }
.t-item::after {
  content: ""; position: absolute; top: 26px; right: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--yellow); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--pink-l);
}
.t-item:nth-child(even)::after { right: auto; left: -11px; }
.t-card {
  background: #fff; border-radius: 22px; padding: 22px 22px 20px;
  box-shadow: var(--shadow);
  display: grid; grid-template-columns: 64px 1fr; gap: 16px;
  transition: transform .25s;
}
.t-card:hover { transform: translateY(-4px); }
.t-ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; }
.t-ico svg { width: 38px; height: 38px; }
.t-ico.piala { background: linear-gradient(160deg, #ff97bd, #ff5090); }
.t-ico.medali { background: linear-gradient(160deg, #ffb3d4, #ff7ab6); }
.t-ico.sertifikat { background: linear-gradient(160deg, #b7c6ff, #8aa4ff); }
.t-ico.bintang { background: linear-gradient(160deg, #ef92b7, #e85b93); }
.t-card .yr { display: inline-block; font-family: var(--font-display); font-size: 18px; color: #fff; background: var(--blue); border-radius: 8px; padding: 2px 10px 0; line-height: 1.2; }
.t-card .kat { font-size: 11px; font-weight: 800; color: var(--pink); margin-left: 6px; text-transform: uppercase; letter-spacing: 1px; }
.t-card h4 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--ink); line-height: 1; margin: 8px 0 4px; letter-spacing: .3px; }
.t-card .org { font-size: 13px; font-weight: 800; color: var(--blue); }
.t-card p { font-size: 13.5px; margin-top: 6px; }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
  margin: 0 14px 14px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #4d74ff, #2f5bff 60%, #6a5cff);
  color: #fff;
  padding: 56px 0 30px;
  position: relative; overflow: hidden;
}
.footer .container { position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.footer h3 { font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: .95; margin-bottom: 12px; letter-spacing: .5px; }
.footer h5 { font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; opacity: .85; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer ul a { font-weight: 700; opacity: .92; }
.footer ul a:hover { opacity: 1; text-decoration: underline; }
.footer p { opacity: .9; font-size: 14px; max-width: 380px; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; opacity: .85; }
.footer .ring { position: absolute; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .07); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Scene animations ---------- */
.wheel { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
.wheel.rev { animation-direction: reverse; animation-duration: 48s; }
@keyframes spin { to { transform: rotate(360deg); } }
.bulb { animation: blink 1.4s ease-in-out infinite; }
.bulb:nth-child(2n) { animation-delay: .7s; }
@keyframes blink { 50% { opacity: .35; } }
.drift { animation: drift 60s linear infinite; }
.drift.slow { animation-duration: 90s; }
@keyframes drift { from { transform: translateX(-200px); } to { transform: translateX(1400px); } }
.boat { animation: sway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@keyframes sway { 50% { transform: rotate(4deg) translateX(6px); } }

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

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1020px) {
  .nav { display: none; }
  .burger { display: block; }
  .top-id { display: none; }
  .topbar.open .nav {
    display: flex; flex-direction: column;
    position: absolute; top: 72px; left: 16px; right: 16px;
    background: #fff; padding: 10px; border-radius: 18px;
    box-shadow: var(--shadow);
  }
  .topbar.open .nav a { color: var(--ink); padding: 12px 16px; }
  .topbar.open .nav a.active { background: var(--blue); color: #fff; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles .tile:first-child { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .hero { margin: 8px; min-height: 780px; border-radius: 22px; }
  .topbar { padding: 14px 16px; gap: 12px; }
  .top-right .btn-blue { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 6px; padding: 16px 20px 0; }
  .hero-side { padding-top: 6px; }
  .scene { height: 52%; }
  .nb-board { grid-template-columns: 1fr; padding: 12px; }
  .nb-rings { flex-direction: row; padding: 0 20px; height: 40px; }
  .nb-rings span { width: 16px; height: 50px; }
  .nb-page { min-height: 0; padding: 28px 22px; border-radius: 14px !important; }
  .nb-page.right { padding-bottom: 210px; }
  .ticket { right: -6px; top: -34px; width: 110px; height: 54px; }
  .ticket span { font-size: 17px; }
  .nb-sec .title-pink { margin-bottom: 64px; }
  .nb-sheet { left: -10px; }
  .carousel-track { grid-auto-columns: 82%; }
  .carousel-btn.prev { left: -8px; }
  .carousel-btn.next { right: -8px; }
  .tiles { grid-template-columns: 1fr; }
  .tile .tile-art { width: 42%; }
  .timeline::before { left: 18px; }
  .t-item, .t-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 26px 48px; }
  .t-item::after, .t-item:nth-child(even)::after { left: 7px; right: auto; }
  .t-card { grid-template-columns: 1fr; }
  .footer { margin: 0 8px 8px; }
  .footer-top { grid-template-columns: 1fr; }
  .lightbox-box .info { flex-direction: column; align-items: flex-start; }
  .ob { --w: min(86vw, calc(70vh * var(--r, .69))); width: var(--w); transform: none; }
  .ob.open { transform: none; }
  .ob-page, .ob-cover { left: 0; }
  .ob-page { border-radius: 12px; }
  .ob.open .ob-cover { opacity: 0; pointer-events: none; transition: transform 1.1s cubic-bezier(.4, .1, .2, 1), opacity .35s .6s; }
  .mobile-only { display: block !important; }
  .ob-page, .ob-face.back { padding: 16px 12px; }
  .ob .syn { font-size: 12px; line-height: 1.6; }
  .ob h5 { font-size: 20px; }
  .ob .quote { font-size: 14px; }
  .ob .price-big { font-size: 26px; }
  .ob dl { font-size: 11.5px; }
  .ob-face.front .cover-art .ct { font-size: 26px; }
  .ob-face.front .cover-art { padding: 16px 12px 14px 18px; }
}


/* ==========================================================
   v2 — BUY BOX, FLOATIES, MARQUEE, LOADER
   ========================================================== */
.mobile-only { display: none; margin-bottom: 18px; }
.buy-box { margin-top: 18px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px -10px rgba(40, 50, 140, .35); }
.buy-box > b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--blue); letter-spacing: .5px; margin-bottom: 10px; }
.shop-list { display: grid; gap: 8px; }
.shop-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--c); color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18);
  transition: transform .15s;
}
.shop-btn:hover { transform: translateY(-2px); }
.shop-btn svg { width: 18px; height: 18px; flex: none; }
.shop-btn span::before { content: "Beli via "; font-weight: 600; opacity: .9; }
.back-thumb { width: 46%; margin-top: 8px; border-radius: 6px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .4); transform: rotate(-3deg); }

/* Tile with real covers */
.cover-fan { position: absolute; right: 26px; bottom: 22px; width: 46%; height: 75%; }
.cover-fan img {
  position: absolute; bottom: 0; right: calc(var(--i) * 26%);
  width: 44%; aspect-ratio: .69; object-fit: cover; border-radius: 4px 10px 10px 4px;
  box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .45);
  transform: rotate(calc((var(--i) - 1) * -8deg)) translateY(calc(var(--i) * -6px));
  transition: transform .3s;
}
.tile:hover .cover-fan img { transform: rotate(calc((var(--i) - 1) * -12deg)) translateY(-14px); }

/* Floating decorations */
.floaties { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fl { position: absolute; display: block; transform: rotate(var(--rot)); }
.fl svg { width: 100%; height: auto; display: block; overflow: visible; }
.fl.bob { animation: fl-bob var(--d) ease-in-out var(--delay) infinite; }
.fl.rise { animation: fl-rise calc(var(--d) * 1.6) ease-in-out var(--delay) infinite; }
.fl.flutter { animation: fl-flutter calc(var(--d) * 1.4) ease-in-out var(--delay) infinite; }
.fl.glide { animation: fl-glide calc(var(--d) * 1.5) ease-in-out var(--delay) infinite; }
.fl.sway { animation: fl-sway calc(var(--d) * 2) ease-in-out var(--delay) infinite; }
.fl.spin-slow { animation: fl-bob var(--d) ease-in-out var(--delay) infinite; }
.fl.spin-slow svg { animation: spin 18s linear infinite; }
.fl.pulse { animation: fl-pulse calc(var(--d) * .5) ease-in-out var(--delay) infinite; }
.wing-l, .wing-r { transform-origin: 20px 16px; animation: flap .35s ease-in-out infinite alternate; }
@keyframes flap { to { transform: scaleX(.35); } }
@keyframes fl-bob { 0%, 100% { transform: translateY(0) rotate(var(--rot)); } 50% { transform: translateY(-16px) rotate(calc(var(--rot) * -1)); } }
@keyframes fl-rise { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(10px, -34px) rotate(5deg); } }
@keyframes fl-flutter { 0% { transform: translate(0, 0) rotate(-10deg); } 25% { transform: translate(22px, -18px) rotate(8deg); } 50% { transform: translate(6px, -36px) rotate(-6deg); } 75% { transform: translate(-16px, -14px) rotate(10deg); } 100% { transform: translate(0, 0) rotate(-10deg); } }
@keyframes fl-glide { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(40px, -24px) rotate(4deg); } }
@keyframes fl-sway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(30px); } }
@keyframes fl-pulse { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.6) rotate(45deg); opacity: .5; } }

/* Hero extras */
.hab { animation: hab 7s ease-in-out infinite; }
@keyframes hab { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.birds { animation: birds 30s linear infinite; }
@keyframes birds { from { transform: translateX(-700px); } to { transform: translateX(700px); } }
.shoot {
  position: absolute; z-index: 1; top: 8%; left: -10%;
  width: 140px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9));
  transform: rotate(-18deg); opacity: 0;
  animation: shoot 9s ease-in infinite;
  pointer-events: none;
}
.shoot::after {
  content: "\2605"; position: absolute; right: -10px; top: -11px; font-size: 20px; color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #ff69a0;
}
.shoot.s2 { top: 22%; animation-delay: 3.2s; animation-duration: 11s; }
.shoot.s3 { top: 4%; animation-delay: 6.5s; animation-duration: 13s; width: 90px; }
@keyframes shoot {
  0% { transform: translate(0, 0) rotate(-18deg); opacity: 0; }
  3% { opacity: 1; }
  14% { transform: translate(70vw, -22vw) rotate(-18deg); opacity: 0; }
  100% { transform: translate(70vw, -22vw) rotate(-18deg); opacity: 0; }
}

/* Marquee ribbons */
.mq-wrap { position: relative; height: 150px; margin: 10px 0 -20px; overflow: hidden; z-index: 2; }
.mq {
  position: absolute; left: -5%; right: -5%; top: 50%;
  padding: 12px 0; overflow: hidden; white-space: nowrap;
  font-family: var(--font-display); font-size: 28px; letter-spacing: 1px; color: #fff;
  box-shadow: 0 10px 24px -12px rgba(40, 50, 140, .4);
}
.mq.blue { background: linear-gradient(90deg, #4d74ff, #2f5bff); transform: translateY(-50%) rotate(2.5deg); }
.mq.pink { background: linear-gradient(90deg, #ff5fa2, #ff3d8b); transform: translateY(-50%) rotate(-2.5deg); }
.mq-track { display: inline-flex; animation: mq 32s linear infinite; }
.mq.blue .mq-track { animation-direction: reverse; }
.mq b { color: var(--yellow); margin: 0 22px; font-weight: 400; }
@keyframes mq { to { transform: translateX(-50%); } }

/* Loader */
html.is-loading { overflow: hidden; }
.loader {
  position: fixed; inset: 0; z-index: 999;
  background: radial-gradient(900px 500px at 50% 40%, #b9b3ff 0%, transparent 70%),
              linear-gradient(180deg, #6f86ff 0%, #a3a2ff 40%, #b6c1ee 75%, #ffc6e2 100%);
  overflow: hidden;
  transition: opacity .7s ease, transform .7s ease, visibility .7s;
  animation: ld-failsafe 0s 9s forwards;
}
.loader.done { opacity: 0; transform: scale(1.06); visibility: hidden; }
@keyframes ld-failsafe { to { opacity: 0; visibility: hidden; } }
.ld-stars i {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px #fff; animation: blink var(--d) ease-in-out var(--delay) infinite;
}
.ld-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ld-spot { width: 120px; height: 120px; }
.ld-logo {
  position: fixed; left: 0; top: 0; width: 120px; height: 120px; object-fit: contain;
  transform: translate(-300px, 120vh); will-change: transform;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, .8));
}
.loader.arrived .ld-logo { animation: ld-glow 1.6s ease-in-out infinite; }
@keyframes ld-glow { 50% { filter: drop-shadow(0 0 30px #fff) drop-shadow(0 0 12px #ff69a0); } }
.ld-word { display: flex; gap: 2px; font-family: var(--font-display); font-size: clamp(48px, 9vw, 84px); line-height: 1; color: #fff; filter: drop-shadow(0 4px 0 #8b94f2); }
.ld-word span { opacity: 0; transform: translateY(30px) scale(.6); }
.loader.arrived .ld-word span { animation: ld-pop .5s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes ld-pop { to { opacity: 1; transform: none; } }
.ld-tag { color: #fff; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; font-size: 13px; opacity: 0; transition: opacity .5s .5s; }
.loader.arrived .ld-tag { opacity: .95; }
.ld-bar { width: 180px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .35); overflow: hidden; margin-top: 8px; }
.ld-bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #ff69a0, #ff7ab6, #5fb4ff); animation: ld-bar 2.8s ease-in-out forwards; }
@keyframes ld-bar { 60% { width: 75%; } to { width: 100%; } }
.ld-spark {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: ld-spark 1.1s ease-out forwards;
}
@keyframes ld-spark { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }

@media (max-width: 760px) {
  .mq { font-size: 20px; padding: 8px 0; }
  .mq-wrap { height: 110px; }
  .cover-fan { width: 52%; right: 14px; }
}

/* ==========================================================
   v3 — TYPOGRAPHY & CONTRAST
   Heading font: Lilita One (chunky, playful) with a navy
   outline + 3D drop so titles read on any background.
   ========================================================== */
:root {
  --font-display: "Lilita One", "Bebas Neue", Impact, sans-serif;
  --navy: #262a7c;
  --navy-d: #181b5a;
  --muted: #666b96;
  --text: #3d4170;
}
body { font-weight: 600; }

/* Big outlined titles (hero, KARYA PILIHAN, KOLEKSI BUKU, ...) */
.title-3d {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff;
  filter: none;
  letter-spacing: 1px;
  line-height: 1;
  -webkit-text-stroke: .11em var(--navy);
  paint-order: stroke fill;
  text-shadow:
    0 .05em 0 var(--navy), 0 .09em 0 var(--navy-d),
    .02em .1em 0 var(--navy-d), 0 .16em .22em rgba(20, 22, 80, .35);
}
.hero-title h1 { font-size: clamp(50px, 7.4vw, 104px); }
.hero-title .line { gap: 22px; }
.hero-title .line + .line { margin-top: .08em; }
.hero-title .line:last-child { color: var(--yellow); }
.title-white { font-size: clamp(40px, 5.6vw, 72px); }

/* Pink section titles */
.title-pink {
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--pink);
  filter: none;
  -webkit-text-stroke: .1em #fff;
  paint-order: stroke fill;
  text-shadow:
    0 .06em 0 #b8135a, 0 .1em 0 #8e0d44,
    0 .18em .3em rgba(184, 19, 90, .3);
}
.title-pink .indent { color: var(--blue); text-shadow: 0 .06em 0 #1c3fd6, 0 .1em 0 #142e9e, 0 .18em .3em rgba(28, 63, 214, .3); }

.date-badge {
  font-size: clamp(15px, 1.7vw, 22px);
  line-height: 1.05;
  padding: 10px 14px 9px;
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 0 var(--blue-d);
  border: 3px solid #fff;
}

/* Hero side panel: dark text on a soft white card */
.hero-side {
  align-self: start;
  margin-top: 18px; padding: 22px 24px 24px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 18px 40px -20px rgba(38, 42, 124, .55);
}
.hero-side h3 { color: var(--navy); font-size: 24px; letter-spacing: .3px; line-height: 1.1; }
.hero-side p { color: var(--text); opacity: 1; font-size: 14.5px; font-weight: 600; }

/* Nav on a white bar */
.nav {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 5px; border-radius: 999px;
  box-shadow: 0 8px 20px -12px rgba(38, 42, 124, .5);
}
.nav a { color: var(--navy); font-weight: 800; }
.nav a:hover { background: var(--blue-xl); }
.nav a.active { background: var(--blue); color: #fff; }
.top-id {
  background: rgba(38, 42, 124, .55); padding: 6px 12px; border-radius: 999px;
  font-size: 12px;
}
.logo { font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: 1px; -webkit-text-stroke: 5px var(--navy); paint-order: stroke fill; text-shadow: 0 3px 0 var(--navy); }
.logo img { filter: drop-shadow(0 0 2px var(--navy)) drop-shadow(0 2px 0 var(--navy)); }
.footer .logo { -webkit-text-stroke: 0; text-shadow: none; }

/* Display text everywhere else */
.step-pill { font-size: 17px; padding: 5px 16px 4px; text-shadow: 0 2px 0 var(--green-d); }
.step p { font-weight: 600; }
.calendar b { font-size: 14px; }
.card h4, .book-card h4 { font-size: 21px; line-height: 1.1; color: var(--navy); }
.card .sub, .book-card .hint { color: var(--muted); font-weight: 700; }
.book-card .genre { font-size: 11.5px; background: var(--green-d); }
.g-item .cap b { font-size: 17px; color: var(--navy); line-height: 1.15; }
.lightbox-box .info h4 { font-size: 26px; color: var(--navy); }
.stat b { font-size: 48px; }
.t-card .yr { font-size: 15px; padding: 3px 10px 2px; }
.t-card h4 { font-size: 20px; line-height: 1.15; color: var(--navy); }
.ob h5 { font-size: 22px; color: var(--pink); }
.ob .price-big { font-size: 32px; }
.buy-box > b { font-size: 17px; color: var(--navy); }
.footer h3 { font-size: 40px; line-height: 1.05; text-shadow: 0 4px 0 rgba(10, 20, 90, .35); }
.mq { font-size: 22px; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.ld-word { font-size: clamp(44px, 7vw, 72px); letter-spacing: 2px; filter: none; -webkit-text-stroke: .1em var(--navy); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--navy), 0 .12em 0 var(--navy-d); }
.ld-tag { color: var(--navy); background: rgba(255, 255, 255, .8); padding: 5px 14px; border-radius: 999px; }
.card .dot-badge { font-family: var(--font-display); }

/* Tiles: darker text tones per colour */
.tile h3 {
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.02;
  -webkit-text-stroke: .1em var(--tile-ink); paint-order: stroke fill;
  text-shadow: 0 .07em 0 var(--tile-ink);
}
.tile p { color: var(--tile-ink); font-weight: 800; }
.tile.green { --tile-ink: #a9134f; }
.tile.blue { --tile-ink: #2238b8; }
.tile.pink { --tile-ink: #b0145a; }
.tile .big-letters { font-size: 120px; -webkit-text-stroke: .08em #b0145a; paint-order: stroke fill; text-shadow: 0 8px 0 #b0145a; }

@media (max-width: 760px) {
  .hero-side { padding: 18px; }
  .hero-side h3 { font-size: 21px; }
  .ob h5 { font-size: 19px; }
  .ob .price-big { font-size: 24px; }
  .logo { font-size: 24px; }
  .nav { background: #fff; padding: 10px; border-radius: 18px; }
}
.hero-title h1 { font-size: clamp(44px, 6.4vw, 92px); }
.hero-title .line { white-space: nowrap; }
.tile.green h3, .tile.green p { max-width: 52%; }
.cover-fan { width: 42%; }
.tile .big-letters { right: 14px; bottom: -6px; }
@media (max-width: 760px) {
  .tile.green h3, .tile.green p { max-width: 60%; }
  .cover-fan { width: 46%; }
}

/* ==========================================================
   v4 — BUBBLY TITLES (Chewy)
   Pink letters, thick pale outline, bouncy tilted letters.
   ========================================================== */
:root { --font-title: "Chewy", "Lilita One", cursive; --bub: #e8418f; --bub-o: #ffd2e7; --bub-s: #c42a72; }
.title-3d, .title-pink, .tile h3, .bubbly-sm {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: .5px;
}
.word { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; transform: translateY(calc(var(--b, 0) * 1px)) rotate(var(--t, 0deg)); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ch:nth-child(4n+1) { --t: -4deg; --b: 1; }
.ch:nth-child(4n+2) { --t: 3deg; --b: -3; }
.ch:nth-child(4n+3) { --t: -2deg; --b: 2; }
.ch:nth-child(4n) { --t: 4deg; --b: -1; }
.title-3d:hover .ch, .title-pink:hover .ch { animation: ch-jump .5s ease calc(var(--i) * 35ms); }
@keyframes ch-jump { 40% { transform: translateY(-10px) rotate(0); } }

/* Main bubbly style: pink fill + thick pale-pink outline + soft depth */
.title-3d, .title-pink {
  color: var(--bub);
  -webkit-text-stroke: .2em var(--bub-o);
  paint-order: stroke fill;
  text-shadow:
    0 .05em 0 #f6a9cd, 0 .09em 0 #e47aad,
    0 .1em 0 var(--bub-s), 0 .2em .3em rgba(140, 20, 80, .3);
  line-height: 1.05;
}
/* Second line / accent in blue bubbly */
.hero-title .line:last-child, .title-pink .indent {
  color: #3557ff;
  -webkit-text-stroke: .2em #d9e2ff;
  text-shadow:
    0 .05em 0 #b8c6ff, 0 .09em 0 #8aa0ff,
    0 .1em 0 #2440c9, 0 .2em .3em rgba(30, 50, 170, .3);
}
.hero-title h1 { font-size: clamp(54px, 7.6vw, 112px); }
.hero-title .line { gap: 26px; align-items: center; }
.hero-title .line + .line { margin-top: -.02em; }
.title-pink { font-size: clamp(46px, 6.6vw, 90px); }
.title-white { font-size: clamp(46px, 6.2vw, 82px); }

/* Tiles: white bubbly with coloured outline */
.tile h3 {
  font-size: clamp(36px, 4.2vw, 56px); line-height: 1.02; color: #fff;
  -webkit-text-stroke: .16em var(--tile-ink);
  text-shadow: 0 .08em 0 var(--tile-ink), 0 .16em .25em rgba(0, 0, 0, .18);
}
.bubbly-sm {
  font-size: 46px; line-height: 1.05;
  -webkit-text-stroke: .14em #1c3fd6; paint-order: stroke fill;
  text-shadow: 0 .08em 0 #142e9e;
}
.ld-word { font-family: var(--font-title); font-size: clamp(56px, 9vw, 92px); color: var(--bub); -webkit-text-stroke: .2em var(--bub-o); text-shadow: 0 .09em 0 #e47aad, 0 .1em 0 var(--bub-s); }
.ld-word span:nth-child(odd) { rotate: -4deg; }
.ld-word span:nth-child(even) { rotate: 3deg; translate: 0 -3px; }

@media (max-width: 760px) {
  .hero-title h1 { font-size: clamp(48px, 13vw, 64px); }
  .bubbly-sm { font-size: 38px; }
}

/* ==========================================================
   v5 — SKILLS
   ========================================================== */
.nb-sec { padding-bottom: 70px; }
.skill-sec {
  padding: 30px 0 100px;
  background: linear-gradient(180deg, #d6e1ff 0%, #e0e6ff 50%, #d6e1ff 100%);
  overflow: hidden;
}
.skill-sec .title-pink { margin-bottom: 44px; }
.skill-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr 1.25fr 1fr;
  grid-template-areas: "soft blue green" "soft yellow yellow";
}
.skill-card {
  position: relative; border-radius: 26px; padding: 22px;
  background: #fff;
  box-shadow: 0 8px 0 var(--edge), var(--shadow);
  border: 3px solid var(--edge);
}
.skill-card.soft { grid-area: soft; --edge: #ff8cc0; background: linear-gradient(170deg, #fff 0%, #fff0f7 100%); }
.skill-card.blue { grid-area: blue; --edge: #8ea6ff; }
.skill-card.green { grid-area: green; --edge: #e86096; }
.skill-card.yellow { grid-area: yellow; --edge: #ff679f; }
.skill-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.skill-head .bubbly-sm {
  font-size: clamp(24px, 2.4vw, 32px); color: #fff; line-height: 1.05;
  -webkit-text-stroke: .16em var(--ink-c); text-shadow: 0 .08em 0 var(--ink-c);
  flex: 1 1 100%;
}
.skill-card.soft { --ink-c: #c42a72; }
.skill-card.blue { --ink-c: #2440c9; }
.skill-card.green { --ink-c: #b71a59; }
.skill-card.yellow { --ink-c: #c40010; }
.skill-card.soft .skill-head .bubbly-sm { flex: 1; }
.skill-ico { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(160deg, #ffb3d4, #ff7ab6); display: grid; place-items: center; flex: none; transform: rotate(-6deg); }
.skill-ico svg { width: 32px; height: 32px; }
.tag-hard { font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: var(--ink-c); padding: 4px 10px; border-radius: 99px; }

.soft-list { display: flex; flex-direction: column; gap: 12px; }
.soft-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 18px;
  font-weight: 800; font-size: 16px; color: var(--navy);
  background: #fff; border: 2px solid #ffd2e7;
  box-shadow: 0 4px 0 #ffd2e7;
  transform: rotate(calc((var(--i) - 2.5) * .6deg));
  transition: transform .2s;
}
.soft-chip:nth-child(odd) { transform: rotate(-1deg); }
.soft-chip:nth-child(even) { transform: rotate(1deg) translateX(8px); }
.soft-chip:hover { transform: scale(1.04) rotate(0); }
.soft-chip svg { width: 38px; height: 38px; padding: 8px; border-radius: 12px; flex: none; color: #fff; }
.soft-chip:nth-child(6n+1) svg { background: #ff5fa2; }
.soft-chip:nth-child(6n+2) svg { background: #ff5090; }
.soft-chip:nth-child(6n+3) svg { background: #4d74ff; }
.soft-chip:nth-child(6n+4) svg { background: #e54a88; }
.soft-chip:nth-child(6n+5) svg { background: #597aff; }
.soft-chip:nth-child(6n) svg { background: #ff3c4c; }

.hard-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hard-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 16px;
  background: #f6f8ff; border: 2px solid #e6ebff;
  transition: transform .2s, border-color .2s;
}
.hard-chip:hover { transform: translateY(-3px); border-color: var(--edge); }
.hard-chip b { display: block; font-size: 14px; font-weight: 900; color: var(--navy); line-height: 1.2; }
.hard-chip small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.2; margin-top: 2px; }
.mono {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  font-style: normal; font-weight: 900; font-size: 13px; letter-spacing: -.3px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}
@media (max-width: 1020px) {
  .skill-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "soft blue" "soft green" "yellow yellow"; }
}
@media (max-width: 760px) {
  .skill-grid { grid-template-columns: 1fr; grid-template-areas: "soft" "blue" "green" "yellow"; }
  .hard-list { grid-template-columns: 1fr 1fr; }
  .hard-chip { padding: 8px; gap: 8px; }
  .mono { width: 34px; height: 34px; font-size: 12px; }
  .hard-chip b { font-size: 12.5px; }
}

/* ==========================================================
   v6 — SCRIPT TITLES (Pacifico, "Decor World" style)
   Blue fill, thick white outline, pink outer ring. Letters stay
   connected (no per-letter animation).
   ========================================================== */
:root {
  --font-title: "Pacifico", cursive;
  --sc-fill: #3a73c8;
  --sc-ring: #ff8cc0;
}
.title-3d, .title-pink, .title-pink .indent, .hero-title .line:last-child, .logo-word, .ld-word {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sc-fill);
  -webkit-text-stroke: .17em #fff;
  paint-order: stroke fill;
  text-shadow: none;
}
.title-3d, .title-pink, .ld-word {
  line-height: 1.3;
  filter:
    drop-shadow(.035em 0 0 var(--sc-ring)) drop-shadow(-.035em 0 0 var(--sc-ring))
    drop-shadow(0 .035em 0 var(--sc-ring)) drop-shadow(0 -.035em 0 var(--sc-ring))
    drop-shadow(0 .08em .1em rgba(140, 30, 100, .3));
}
.title-pink .indent { padding-left: 1.2em; }
.hero-title h1 { font-size: clamp(46px, 6.2vw, 92px); }
.hero-title .line { gap: 22px; }
.hero-title .line + .line { margin-top: -.18em; padding-left: .5em; }
.title-pink { font-size: clamp(40px, 5.6vw, 76px); }
.title-white { font-size: clamp(40px, 5.4vw, 70px); }
.date-badge { color: #fff; font-family: var(--font-display); }

/* Logo word */
.logo { -webkit-text-stroke: 0; text-shadow: none; gap: 4px; }
.logo-word {
  font-size: 26px; line-height: 1.2; -webkit-text-stroke: .16em #fff;
  filter: drop-shadow(1.5px 0 0 var(--sc-ring)) drop-shadow(-1.5px 0 0 var(--sc-ring)) drop-shadow(0 1.5px 0 var(--sc-ring)) drop-shadow(0 -1.5px 0 var(--sc-ring));
  padding: 0 4px 4px;
}
.footer .logo-word { font-size: 22px; }

/* Smaller script headings (tiles, footer, skill cards) */
.tile h3, .bubbly-sm {
  font-family: var(--font-title); letter-spacing: 0; line-height: 1.3;
}
.tile h3 { font-size: clamp(28px, 3vw, 40px); }
.tile h3 + p { margin-top: 4px; }
.bubbly-sm { font-size: 36px; }
.skill-head .bubbly-sm { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.35; }

/* Loader word pops in as one piece */
.ld-word { font-size: clamp(54px, 8vw, 86px); opacity: 0; transform: translateY(24px) scale(.7); }
.loader.arrived .ld-word { animation: ld-pop .6s cubic-bezier(.3, 1.6, .5, 1) forwards; }

@media (max-width: 760px) {
  .hero-title h1 { font-size: clamp(40px, 11.5vw, 56px); }
  .logo-word { font-size: 22px; }
  .bubbly-sm { font-size: 30px; }
}
.skill-head .bubbly-sm { color: var(--ink-c); -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(0, 0, 0, .08); font-size: clamp(24px, 2.3vw, 30px); }
.skill-card.soft { display: flex; flex-direction: column; }
.skill-card.soft .soft-list { flex: 1; justify-content: space-evenly; }
.soft-chip { padding: 14px 16px; }
.tile.blue h3 { margin-top: 52px !important; }

/* ==========================================================
   v7 — STICKER SCRIPT TITLES (closer to "Decor World")
   Layers per word, back → front:
     ::before  pink ring + pink 3D drop
     ::after   thick white outline
     .sc-f     bold blue gradient letters with dark-blue rim
   Tune thickness per element with --sw (white) and --sp (pink).
   ========================================================== */
.title-3d, .title-pink, .title-pink .indent, .hero-title .line:last-child,
.tile h3, .footer .bubbly-sm, .logo-word, .ld-word {
  filter: none;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.sc {
  --sw: .3em; --sp: .46em; --sb: .065em;
  position: relative; display: inline-block; isolation: isolate;
  white-space: nowrap;
  padding: .02em .14em .08em;
  margin: 0 -.07em;
}
.sc::before, .sc::after, .sc-f { font: inherit; letter-spacing: inherit; line-height: inherit; }
.sc::before, .sc::after {
  content: attr(data-t);
  position: absolute; inset: 0; padding: inherit;
  white-space: nowrap; pointer-events: none;
}
.sc::after { z-index: -1; color: #fff; -webkit-text-stroke: var(--sw) #fff; }
.sc::before {
  z-index: -2; color: #ff8cc0; -webkit-text-stroke: var(--sp) #ff8cc0;
  filter: drop-shadow(0 .07em 0 #e061a1) drop-shadow(0 .16em .14em rgba(150, 40, 110, .32));
}
.sc-f {
  position: relative; z-index: 1; display: inline-block;
  padding: 0 .08em; margin: 0 -.08em;
  background: linear-gradient(180deg, #9ccdf8 0%, #5d9be2 38%, #3876c6 70%, #2b62ad 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: var(--sb) #2a5ea6;
  paint-order: stroke fill;
}
/* Logo: slimmer layers so it stays crisp at small size */
.logo-word .sc { --sw: .28em; --sp: .42em; --sb: .06em; }
.logo-word { font-size: 28px; padding: 0 6px 6px; filter: none; }
.footer .logo-word { font-size: 24px; }
/* Tiles & footer heading */
.tile h3 .sc, .footer .bubbly-sm .sc { --sw: .26em; --sp: .4em; }
.footer .bubbly-sm { color: inherit; }
/* Spacing so thick outlines don't collide between lines */
.title-3d, .title-pink { line-height: 1.32; }
.hero-title .line + .line { margin-top: -.12em; }
.title-pink .indent { padding-left: 1em; }
.sc { --sb: .075em; }
.sc-f {
  background: linear-gradient(180deg, #6fa9ea 0%, #4b8bd9 35%, #3a78c8 65%, #2f6ab8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: var(--sb) #3a76c4;
}
.tile.blue h3 { margin-top: 36px !important; }
.tile h3 + p, .tile p { margin-top: 14px; }
.footer .bubbly-sm { margin-bottom: 22px; }

/* ==========================================================
   v8 — DESAIN: PICNIC CLOTHESLINE (Poster) + category sections
   ========================================================== */
.picnic {
  position: relative; overflow: hidden;
  padding: 60px 0 90px;
  background-color: #e96298;
  background-image:
    radial-gradient(#ed83ad 1.4px, transparent 2px),
    radial-gradient(#e44283 1.4px, transparent 2px);
  background-size: 14px 14px, 19px 19px;
  background-position: 0 0, 7px 9px;
}
.picnic-cloth {
  position: absolute; left: -12%; right: -12%; top: 34%; bottom: -30%;
  background-color: #fff;
  background-image:
    linear-gradient(90deg, rgba(255, 77, 120, .55) 50%, transparent 50%),
    linear-gradient(rgba(255, 77, 120, .55) 50%, transparent 50%);
  background-size: 64px 64px;
  transform: rotate(-5deg);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .15);
}
.picnic > .container { z-index: 2; }
.fruit { position: absolute; z-index: 1; display: block; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); animation: fl-bob 9s ease-in-out infinite; --rot: 0deg; }
.fruit svg { width: 100%; height: auto; display: block; }
.napkin {
  display: table; margin: 0 auto;
  padding: 18px 46px 10px;
  background-color: #fff;
  background-image:
    linear-gradient(90deg, rgba(255, 77, 120, .6) 50%, transparent 50%),
    linear-gradient(rgba(255, 77, 120, .6) 50%, transparent 50%);
  background-size: 34px 34px;
  border-radius: 6px;
  rotate: -3deg;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .45);
  outline: 3px dashed rgba(255, 255, 255, .7); outline-offset: -8px;
}
.picnic-title { font-size: clamp(50px, 7vw, 92px); margin: 0; }
.picnic-sub {
  display: table; margin: 18px auto 34px;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  font-weight: 800; font-size: 14px;
  padding: 7px 18px; border-radius: 999px;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35);
}
.rope-row { position: relative; margin-bottom: 30px; }
.rope { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; z-index: 1; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
.hangs { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 18px; }
.hang {
  justify-self: center; position: relative;
  margin-top: calc(var(--y) * 1px - 30px);
  padding: 0; background: none; cursor: zoom-in;
  transform-origin: 50% 0;
  rotate: var(--tilt);
  animation: hang-sway var(--d) ease-in-out infinite alternate;
}
.hang:hover { animation-duration: .6s; }
@keyframes hang-sway { from { rotate: var(--tilt); } to { rotate: calc(var(--tilt) * -.5); } }
.hang .pin {
  position: absolute; left: 50%; top: 0; z-index: 3;
  width: 24px; height: 68px; translate: -50% 0;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3));
}
.hang-card {
  display: block; margin-top: 40px;
  width: clamp(140px, 19vw, 230px);
  background: #fff; padding: 9px 9px 10px; border-radius: 10px;
  box-shadow: 0 18px 26px -12px rgba(0, 0, 0, .5);
  transition: transform .25s;
}
.hang:hover .hang-card { transform: scale(1.03); }
.hang-card .art svg, .hang-card .art img { width: 100%; height: auto; display: block; border-radius: 5px; }
.hang-card b { display: block; margin-top: 8px; font-size: 13px; font-weight: 900; color: var(--navy); line-height: 1.25; text-align: center; }

.cat-sec { padding: 70px 0 80px; }
.cat-sec.alt { background: linear-gradient(180deg, #f3f0ff, #fff); }
.cat-title { font-size: clamp(40px, 5.2vw, 64px); margin-bottom: 30px; }
#galeri .pills { margin-bottom: 0; }

@media (max-width: 760px) {
  .picnic { padding: 46px 0 70px; }
  .fruit { scale: .6; }
  .napkin { padding: 14px 26px 6px; }
  .hang-card { width: 40vw; }
}

/* v9 — sticker titles: lighter weight + glossy white highlight */
.sc { --sw: .24em; --sp: .36em; --sb: .022em; }
.logo-word .sc { --sw: .24em; --sp: .36em; --sb: .02em; }
.tile h3 .sc, .footer .bubbly-sm .sc { --sw: .22em; --sp: .34em; }
.sc-f {
  background: linear-gradient(180deg, #5b9be4 0%, #3f7fd0 45%, #3170c0 75%, #2862ae 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: var(--sb) #2d68b6;
}
/* Glossy highlight: a white band clipped to the upper part of each letter,
   nudged up-left so it reads as a shine along the top edge of the strokes */
.sc-f::before {
  content: attr(data-t);
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  padding: inherit; white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, transparent 0 22%, rgba(255, 255, 255, .95) 30%, rgba(255, 255, 255, .55) 40%, transparent 50%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0;
  translate: -.025em -.03em;
  -webkit-mask: linear-gradient(180deg, #000 0 55%, transparent 56%); mask: linear-gradient(180deg, #000 0 55%, transparent 56%);
  opacity: .85;
}
.sc::before { filter: drop-shadow(0 .06em 0 #e061a1) drop-shadow(0 .14em .12em rgba(150, 40, 110, .3)); }
.hang .pin { width: 30px; height: 84px; top: -6px; }
.hang-card { margin-top: 46px; }
@media (max-width: 760px) { .hang .pin { width: 24px; height: 68px; } .hang-card { margin-top: 40px; } }

/* v10 — logo icon as part of the same sticker as the word */
.logo { gap: 0; align-items: center; }
.logo img {
  width: 46px; height: 46px; margin-right: 2px;
  filter:
    drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)
    drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff)
    drop-shadow(1.5px 0 0 #ff8cc0) drop-shadow(-1.5px 0 0 #ff8cc0) drop-shadow(0 1.5px 0 #ff8cc0) drop-shadow(0 -1.5px 0 #ff8cc0)
    drop-shadow(0 2px 0 #e061a1) drop-shadow(0 4px 4px rgba(150, 40, 110, .3));
}
.footer .logo img { width: 36px; height: 36px; }

/* ==========================================================
   v11 — DESAIN: BOOKSHELF (Cover Buku)
   ========================================================== */
.library {
  position: relative; overflow: hidden;
  padding: 64px 0 90px;
  background-color: #fff1e4;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 140, 192, .13) 0 26px, transparent 26px 52px),
    radial-gradient(rgba(255, 180, 120, .35) 1.5px, transparent 2px);
  background-size: auto, 26px 26px;
}
.lib-title { font-size: clamp(46px, 6.4vw, 84px); text-align: center; }
.bookcase {
  max-width: 980px; margin: 0 auto;
  background: linear-gradient(180deg, #b77744, #95592f);
  border-radius: 22px 22px 10px 10px;
  padding: 22px 22px 0;
  box-shadow: 0 24px 40px -18px rgba(90, 40, 10, .6), inset 0 3px 0 rgba(255, 255, 255, .25);
  position: relative;
}
.bookcase::before { /* little sign hanging on the case */
  content: "Rak Desain Felistar"; position: absolute; top: -18px; left: 50%; translate: -50% 0;
  background: #fff; color: #95592f; font-family: var(--font-display); font-size: 15px; letter-spacing: .5px;
  padding: 5px 16px; border-radius: 99px; box-shadow: 0 4px 0 #e6c9a8; white-space: nowrap;
}
.shelf-row {
  display: flex; align-items: flex-end; justify-content: center; gap: 5px;
  min-height: 340px; padding: 60px 26px 0;
  background: linear-gradient(180deg, #5e331b, #7a4527 70%, #6a3a20);
  border-radius: 12px 12px 0 0;
  box-shadow: inset 0 12px 24px rgba(0, 0, 0, .45), inset 0 -6px 12px rgba(0, 0, 0, .25);
  overflow-x: auto; overflow-y: visible; scrollbar-width: thin;
}
.shelf-board {
  height: 24px; margin: 0 -22px;
  background: linear-gradient(180deg, #d8995f, #a9693a);
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 12px 18px -6px rgba(60, 25, 5, .55);
}
.spine-fill, .spine-book {
  position: relative; flex: none;
  border-radius: 5px 5px 2px 2px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 2px 0 3px rgba(0, 0, 0, .25);
}
.spine-fill {
  width: var(--w); height: var(--h);
  background: linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 22%, rgba(255, 255, 255, .22) 48%, transparent 70%, rgba(0, 0, 0, .22)), var(--c);
}
.spine-fill i { position: absolute; left: 0; right: 0; height: 6px; top: 18px; }
.spine-fill i + i { top: auto; bottom: 22px; }
.spine-book {
  width: 66px; height: 290px; padding: 14px 0 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 22%, rgba(255, 255, 255, .25) 48%, transparent 70%, rgba(0, 0, 0, .25)), var(--c1);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s;
  z-index: 1;
}
.spine-book:hover { transform: translateY(-16px); box-shadow: 0 16px 22px -8px rgba(0, 0, 0, .5); }
.spine-book.pulled { transform: translateY(-70px) rotate(-7deg) scale(1.06); z-index: 5; }
.sb-band { width: 72%; height: 5px; border-radius: 3px; background: var(--c2); flex: none; }
.sb-title {
  writing-mode: vertical-rl; height: 190px;
  font-family: var(--font-display); font-size: 15px; line-height: 1.15; letter-spacing: .4px;
  text-align: center; overflow: hidden;
}
.spine-book img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.sb-tag {
  position: absolute; top: -40px; left: 50%; translate: -50% 0;
  background: #fff; color: var(--pink); font-size: 11px; font-weight: 900; white-space: nowrap;
  padding: 4px 10px; border-radius: 99px; box-shadow: 0 3px 0 #ffc4dd;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 50% { translate: -50% -4px; } }
.prop { flex: none; align-self: flex-end; display: block; }
.prop.plant { width: 86px; margin-right: 6px; }
.prop.plant svg { width: 100%; display: block; }
.prop.stack { display: flex; flex-direction: column; align-items: center; margin: 0 6px; }
.prop.stack i { display: block; width: var(--w); height: 20px; margin-top: 3px; border-radius: 3px; background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%, rgba(0, 0, 0, .15)), var(--c); }
.prop.frame { margin-left: 10px; rotate: -5deg; }
.prop.frame span { display: grid; place-items: center; width: 92px; height: 112px; background: #fff; border: 8px solid #ff69a0; border-radius: 6px; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .5); }
.prop.frame img { width: 62px; }

/* Lightbox: front + back cover side by side */
.cover-pair { display: flex; gap: 16px; padding: 18px; justify-content: center; align-items: flex-start; }
.cover-pair figure { margin: 0; text-align: center; }
.cover-pair img, .cover-pair svg { max-height: 56vh; width: auto; max-width: 100%; border-radius: 6px; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .45); display: block; }
.cover-pair figcaption { margin-top: 8px; font-weight: 900; font-size: 13px; color: var(--muted); }

@media (max-width: 760px) {
  .shelf-row { justify-content: flex-start; padding: 60px 14px 0; min-height: 320px; }
  .bookcase { padding: 16px 14px 0; }
  .shelf-board { margin: 0 -14px; }
  .cover-pair { gap: 10px; padding: 12px; }
  .cover-pair figure { flex: 1; }
  .cover-pair img { max-height: 46vh; }
}
@media (max-width: 760px) {
  .shelf-row { justify-content: center; gap: 4px; }
  .shelf-row > :nth-child(3), .shelf-row > :nth-child(4), .shelf-row > :nth-child(7),
  .shelf-row > :nth-child(8), .shelf-row > :nth-child(11), .shelf-row > .prop.frame { display: none; }
  .prop.plant { width: 58px; margin-right: 2px; }
  .picnic-sub { font-size: 13px; text-align: center; }
}

/* v12 — real posters on the line */
.hang-card .art img { width: 100%; height: auto; display: block; border-radius: 5px; background: #f2f2f2; }
.picnic-title { font-size: clamp(40px, 5.6vw, 76px); }
.lb-full { display: inline-block; margin-top: 8px; font-weight: 900; font-size: 13px; color: #fff; background: var(--pink); padding: 6px 14px; border-radius: 99px; box-shadow: 0 3px 0 var(--pink-d); }
.lb-full[hidden] { display: none; }
.lightbox-box .art img { max-height: 66vh; }

/* ==========================================================
   v13 — MAIN PAGE TITLES: Titan One, ALL CAPS
   (section sub-titles keep the Pacifico sticker style)
   ========================================================== */
.hero-title h1, .hero-title h1 .sc, .hero-title h1 .sc-f, .hero-title .line:last-child {
  font-family: "Titan One", "Lilita One", sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.hero-title h1 { font-size: clamp(42px, 5.6vw, 84px); line-height: 1.22; }
.hero-title h1 .sc { --sw: .22em; --sp: .34em; --sb: .015em; }
.hero-title .line + .line { margin-top: -.08em; padding-left: .3em; }
@media (max-width: 760px) { .hero-title h1 { font-size: clamp(34px, 10vw, 48px); } }

/* Logo without the word */
.logo img { width: 52px; height: 52px; }
.footer .logo img { width: 40px; height: 40px; }
.ld-spot { width: 140px; height: 140px; }

/* ==========================================================
   v13 — DESAIN: GROCERY STORE (Logo & Watermark + Profil & Twibbon)
   ========================================================== */
.market { padding: 70px 0 90px; background: linear-gradient(180deg, #fff, #e8f1ff); }
.mk-store { position: relative; max-width: 1060px; margin: 0 auto; padding-top: 58px; }
.mk-dome {
  position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 2;
  width: 250px; height: 118px; border-radius: 125px 125px 0 0;
  background: #1d3fa8; border: 5px solid #ff72a6; border-bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 24px;
  color: #ff72a6; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 1px;
}
.mk-dome svg { width: 70px; }
.mk-sign {
  position: relative; z-index: 3;
  background: linear-gradient(180deg, #2349c2, #1a3a9e);
  border-radius: 22px 22px 6px 6px;
  padding: 26px 20px 16px; text-align: center;
  box-shadow: 0 8px 0 #12296f;
}
.mk-sign::before, .mk-sign::after { /* red stripes running behind the oval */
  content: ""; position: absolute; top: 50%; height: 12px; width: 26%; background: #e3262f; translate: 0 -14px;
}
.mk-sign::before { left: 0; } .mk-sign::after { right: 0; }
.mk-bolt { position: absolute; top: 14px; left: 18px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 -2px 0 #b9c4e6; }
.mk-bolt.r { left: auto; right: 18px; }
.mk-oval {
  position: relative; z-index: 1; display: inline-block;
  background: #e3262f; border: 4px solid #fff; border-radius: 50%;
  padding: 10px 46px 12px;
  box-shadow: 0 6px 0 #9c141a;
}
.mk-oval b {
  font-family: "Fredoka", sans-serif; font-weight: 600; color: #fff;
  font-size: clamp(30px, 5vw, 62px); letter-spacing: 1px; line-height: 1;
  text-shadow: 0 4px 0 #7a0f14, 3px 4px 0 #7a0f14;
}
.mk-sign small {
  display: block; margin-top: 10px;
  font-family: "Fredoka", sans-serif; font-weight: 600; color: #ff72a6; font-size: clamp(13px, 1.6vw, 18px); letter-spacing: 3px;
}
.mk-awning {
  height: 74px; position: relative; z-index: 2; margin: 0 -10px;
  background: repeating-linear-gradient(90deg, #e3262f 0 70px, #ff72a6 70px 140px);
  border-radius: 0 0 18px 18px;
  -webkit-mask: radial-gradient(35px 30px at 35px 44px, #000 98%, transparent) 0 0 / 70px 100% repeat-x, linear-gradient(#000, #000) 0 0 / 100% 44px no-repeat;
          mask: radial-gradient(35px 30px at 35px 44px, #000 98%, transparent) 0 0 / 70px 100% repeat-x, linear-gradient(#000, #000) 0 0 / 100% 44px no-repeat;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .18));
}
.mk-floor {
  margin-top: -20px; padding: 56px 34px 40px;
  background-color: #dcebfb;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .6) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .6) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, .6) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .6) 75%);
  background-size: 40px 40px; background-position: 0 0, 20px 20px;
  border-left: 10px solid #1d3fa8; border-right: 10px solid #1d3fa8;
}
.mk-aisle-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mk-aisle-head.center { justify-content: center; margin: 6px 0 22px; }
.mk-aisle-head h4 { font-family: "Fredoka", sans-serif; font-weight: 600; color: #1d3fa8; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.1; }
.mk-aisle-head.center h4 { font-size: clamp(26px, 3.4vw, 40px); text-shadow: 0 3px 0 #ff72a6; }
.mk-aisle-no { background: #e3262f; color: #fff; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 1.5px; padding: 5px 12px; border-radius: 8px; box-shadow: 0 3px 0 #9c141a; }
.mk-count { margin-left: auto; font-weight: 900; font-size: 13px; color: #1d3fa8; background: #ff72a6; padding: 4px 12px; border-radius: 99px; }

/* Basket */
.mk-basket {
  max-width: 720px; margin: 0 auto 50px; padding: 18px;
  background: #2b63e0; border-radius: 26px;
  box-shadow: inset 0 0 0 8px #1f4fc0, 0 18px 30px -14px rgba(20, 50, 140, .6);
  position: relative;
}
.mk-basket::before { /* handle */
  content: ""; position: absolute; left: 12%; right: 12%; top: -14px; height: 22px;
  border: 7px solid #1f4fc0; border-bottom: 0; border-radius: 18px 18px 0 0;
}
.mk-basket-in {
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  padding: 26px 20px 20px; border-radius: 14px;
  background-color: #3f78ef;
  background-image: repeating-linear-gradient(90deg, transparent 0 26px, rgba(255, 255, 255, .28) 26px 34px),
                    repeating-linear-gradient(0deg, transparent 0 26px, rgba(255, 255, 255, .18) 26px 34px);
}
.mk-basket .mk-product { width: clamp(150px, 22vw, 210px); }

/* Shelves */
.mk-aisle { margin-bottom: 34px; }
.mk-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: 18px;
  grid-auto-rows: 250px;
  padding: 0 14px;
  background: linear-gradient(180deg, transparent 0 calc(100% - 18px), #c98d55 calc(100% - 18px), #a96b37 100%) 0 0 / 100% 250px;
  border-radius: 6px;
}
.mk-product {
  align-self: end; margin-bottom: 10px;
  display: flex; flex-direction: column; align-items: center;
  cursor: zoom-in; background: none; padding: 0;
  rotate: var(--tilt);
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
.mk-product:hover { transform: translateY(-10px) scale(1.04); }
.mk-box {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: #fff; border: 4px solid #fff;
  box-shadow: 6px 6px 0 rgba(20, 40, 120, .18), 0 12px 18px -8px rgba(0, 0, 0, .45);
}
.mk-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-tag {
  margin-top: -10px; position: relative; z-index: 1;
  background: #ff72a6; border: 2px solid #1d3fa8; border-radius: 8px;
  padding: 4px 10px 5px; max-width: 100%;
  box-shadow: 0 3px 0 #1d3fa8;
  display: flex; flex-direction: column; align-items: center;
}
.mk-tag b { font-size: 11.5px; font-weight: 900; color: #1d3fa8; line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-tag i { font-style: normal; font-size: 10px; font-weight: 900; color: #e3262f; }

/* Bottom banner */
.mk-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #1d3fa8; padding: 20px 26px; border-radius: 0 0 22px 22px;
  border-bottom: 14px solid #ff72a6;
}
.mk-barcode { width: 120px; flex: none; border-radius: 4px; }
.mk-oval2 { text-align: center; background: #e3262f; border-radius: 50%; padding: 10px 40px 12px; border: 3px solid #fff; }
.mk-oval2 b { display: block; font-family: "Fredoka", sans-serif; font-weight: 600; color: #ff72a6; font-size: clamp(18px, 2.6vw, 30px); text-shadow: 0 3px 0 #7a0f14; }
.mk-oval2 small { color: #fff; font-weight: 800; font-size: 12px; }
.mk-seal { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 50%; padding: 8px; border: 3px solid #ff72a6; flex: none; }

@media (max-width: 760px) {
  .mk-dome { width: 190px; height: 96px; font-size: 13px; }
  .mk-dome svg { width: 52px; }
  .mk-oval { padding: 8px 22px 10px; }
  .mk-sign::before, .mk-sign::after { display: none; }
  .mk-floor { padding: 46px 12px 28px; border-width: 6px; }
  .mk-row { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 230px; background-size: 100% 230px; column-gap: 12px; padding: 0 6px; }
  .mk-basket .mk-product { width: 40%; }
  .mk-bottom { padding: 14px; gap: 10px; }
  .mk-barcode, .mk-seal { display: none; }
  .mk-oval2 { flex: 1; padding: 8px 14px; }
  .mk-count { margin-left: 0; }
}
.mk-aisles { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.mk-aisles > .mk-aisle-head, .mk-aisle.wide { grid-column: 1 / -1; }
.mk-aisle .mk-aisle-head h4 { font-size: clamp(17px, 1.8vw, 22px); }
@media (max-width: 760px) { .mk-aisles { grid-template-columns: 1fr; } }

/* v14 — banners, feed pack, full-width market */
.gallery.banners { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gallery.banners .g-item { margin: 0; }
.gallery.pack { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery.pack .g-item { margin: 0; }
.gallery .g-item .art img { width: 100%; height: auto; display: block; }
.pack-title {
  display: table; margin: -10px auto 26px;
  font-family: "Fredoka", sans-serif; font-weight: 600; color: #fff; font-size: clamp(16px, 2vw, 22px);
  background: var(--blue); padding: 8px 22px; border-radius: 99px; box-shadow: 0 4px 0 var(--blue-d);
}
.market { padding: 70px 14px 90px; }
.mk-store { max-width: none; }
.mk-floor { padding-left: max(34px, calc((100% - 1180px) / 2)); padding-right: max(34px, calc((100% - 1180px) / 2)); }
.mk-row { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.mk-tag { padding: 5px 10px; }
@media (max-width: 760px) {
  .gallery.banners { grid-template-columns: 1fr; }
  .gallery.pack { grid-template-columns: 1fr 1fr; gap: 10px; }
  .market { padding: 50px 8px 70px; }
  .mk-floor { padding-left: 12px; padding-right: 12px; }
}
/* shelves sized by content: each product stands on its own plank piece */
.mk-row { grid-auto-rows: auto; row-gap: 26px; background: none; padding: 0 12px; }
.mk-product { position: relative; margin-bottom: 0; padding-bottom: 16px; align-self: end; }
.mk-product::after {
  content: ""; position: absolute; left: -11px; right: -11px; bottom: 0; height: 16px; z-index: -1;
  background: linear-gradient(180deg, #d8995f, #a96b37); border-radius: 3px;
  box-shadow: 0 6px 8px -4px rgba(60, 25, 5, .45);
  rotate: calc(var(--tilt) * -1);
}
.mk-aisle-head { position: relative; z-index: 2; }
.mk-aisle-no { font-size: 12px; }
@media (max-width: 760px) { .mk-row { row-gap: 20px; } .mk-product::after { left: -8px; right: -8px; } }
.mk-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* v15 — balanced, larger market layout: one centred shelf per project */
.mk-aisles { display: block; }
.mk-aisle { margin-bottom: 44px; }
.mk-aisle .mk-aisle-head { justify-content: center; margin-bottom: 18px; }
.mk-aisle .mk-aisle-head h4 { font-size: clamp(20px, 2.4vw, 28px); }
.mk-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: 30px 30px; padding: 0;
}
.mk-product { width: clamp(180px, 20vw, 250px); }
.mk-product::after { left: -15px; right: -15px; }
.mk-tag { padding: 6px 12px; }
.mk-tag b { font-size: 13px; }
.mk-basket { max-width: 820px; padding: 22px; }
.mk-basket-in { padding: 34px 20px 26px; }
.mk-basket .mk-product { width: clamp(220px, 28vw, 320px); }
@media (max-width: 760px) {
  .mk-row { gap: 22px 16px; }
  .mk-product { width: calc(50% - 8px); }
  .mk-product::after { left: -8px; right: -8px; }
  .mk-basket .mk-product { width: 72%; }
  .mk-tag b { font-size: 11.5px; }
}

/* ==========================================================
   v16 — PRESTASI: rekap, certificate thumbs, awards cabinet
   ========================================================== */
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 20px; }
.stat-ico { width: 46px !important; height: 46px !important; border-radius: 14px !important; margin-bottom: 4px; }
.stat-ico svg { width: 28px !important; height: 28px !important; }
.stat b { font-family: "Fredoka", sans-serif; font-weight: 600; }
.stat b i { font-style: normal; }
.stat span:last-child { line-height: 1.25; }
.t-card .yr { font-family: "Nunito", sans-serif; font-weight: 900; font-size: 12.5px; padding: 4px 10px; }
.cert-btn {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 12px;
  background: #f3f5ff; border: 2px solid #e2e7ff; border-radius: 14px; padding: 8px 14px 8px 8px;
  font-weight: 900; font-size: 13px; color: var(--blue); transition: transform .2s, border-color .2s;
}
.cert-btn:hover { transform: translateY(-2px); border-color: var(--blue); }
.cert-stack { position: relative; width: 74px; height: 52px; flex: none; }
.cert-stack img {
  position: absolute; left: calc(var(--j) * 10px); top: calc(var(--j) * 3px);
  width: 54px; height: 42px; object-fit: cover; border-radius: 4px; border: 2px solid #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .25); rotate: calc((var(--j) - 1) * 5deg);
}
.lemari-sec {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #fff, #ffeef6);
}
.lemari {
  max-width: 1080px; margin: 26px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 22px;
  padding: 30px 26px 40px; border-radius: 26px;
  background: linear-gradient(180deg, #b77744, #95592f);
  box-shadow: inset 0 0 0 10px #a7683a, 0 24px 40px -18px rgba(90, 40, 10, .6);
}
.lemari-item {
  width: clamp(130px, 17vw, 190px); background: #fff; padding: 8px 8px 10px; border-radius: 8px;
  rotate: var(--r); box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .55);
  transition: transform .25s; cursor: zoom-in;
}
.lemari-item:hover { transform: scale(1.06) rotate(0deg); }
.lemari-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; display: block; }
.lemari-item span { display: block; margin-top: 7px; font-size: 13px; font-weight: 900; color: var(--navy); text-align: center; }
#lightbox .lightbox-box .art img { max-height: 70vh; width: auto; max-width: 100%; }
@media (max-width: 760px) {
  .lemari { padding: 20px 12px 26px; gap: 18px 12px; }
  .lemari-item { width: calc(50% - 10px); }
  .cert-btn { padding-right: 10px; }
}

/* ==========================================================
   v17 — PENDIDIKAN & PENGALAMAN (Beranda) + 4th skill group
   ========================================================== */
.journey-sec { padding: 40px 0 90px; background: linear-gradient(180deg, #d6e1ff 0%, #fff 100%); overflow: hidden; }
.journey-sec .title-pink { margin-bottom: 40px; }
.edu-track {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start;
  padding-top: 26px;
}
.edu-track::before { /* dashed "train track" connecting the stops */
  content: ""; position: absolute; left: 6%; right: 6%; top: 12px; height: 8px; border-radius: 8px;
  background: repeating-linear-gradient(90deg, #ff8cc0 0 22px, transparent 22px 34px);
}
.edu-card {
  position: relative; background: #fff; border-radius: 26px; padding: 34px 24px 24px;
  border: 3px solid #c9d4ff; box-shadow: 0 8px 0 #c9d4ff, var(--shadow);
}
.edu-card:nth-child(2) { border-color: #ffc4dd; box-shadow: 0 8px 0 #ffc4dd, var(--shadow); }
.edu-card:nth-child(3) { border-color: #f3aac7; box-shadow: 0 8px 0 #f3aac7, var(--shadow); }
.edu-pin {
  position: absolute; top: -27px; left: 50%; translate: -50% 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--yellow); border: 6px solid #fff; box-shadow: 0 0 0 3px #ff8cc0;
}
.edu-year {
  display: inline-block; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .5px;
  color: #fff; background: var(--blue); padding: 5px 14px; border-radius: 99px; box-shadow: 0 3px 0 var(--blue-d);
}
.edu-card h3 { font-family: "Fredoka", sans-serif; font-weight: 600; color: var(--navy); font-size: 23px; line-height: 1.15; margin: 14px 0 4px; }
.edu-major { font-size: 13.5px; font-weight: 800; color: var(--pink); margin-bottom: 4px; }
.edu-card ul { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.edu-card li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink); line-height: 1.45; }
.edu-card li::before { content: "★"; position: absolute; left: 0; top: 0; color: var(--yellow); text-shadow: 0 1px 0 #ff1a6e; }

.xp-title { margin-top: 80px; }
.xp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.xp-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border-radius: 22px; padding: 20px; box-shadow: var(--shadow);
  border-top: 6px solid var(--c, var(--blue));
  transition: transform .25s;
}
.xp-card:hover { transform: translateY(-5px) rotate(-.5deg); }
.xp-card:nth-child(6n+1) { --c: #2f5bff; } .xp-card:nth-child(6n+2) { --c: #ff3d8b; } .xp-card:nth-child(6n+3) { --c: #e54a88; }
.xp-card:nth-child(6n+4) { --c: #ff3c4c; } .xp-card:nth-child(6n+5) { --c: #597aff; } .xp-card:nth-child(6n) { --c: #004eb4; }
.xp-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c); color: #fff; transform: rotate(-6deg); box-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
.xp-ico svg { width: 28px; height: 28px; }
.xp-card h4 { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 18px; color: var(--navy); line-height: 1.2; }
.xp-where { display: block; font-size: 12px; font-weight: 900; color: var(--c); margin: 4px 0 6px; }
.xp-card p { font-size: 13.5px; line-height: 1.5; }

/* skills: 4th group */
.skill-card.purple { grid-area: purple; --edge: #b8c6ff; --ink-c: #3f5dd6; }
.skill-grid { grid-template-areas: "soft blue green" "soft yellow yellow" "purple purple purple"; }
.skill-card.yellow .hard-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.skill-card.purple .hard-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.mono { font-size: 12px; }

@media (max-width: 1020px) {
  .edu-track, .xp-grid { grid-template-columns: 1fr 1fr; }
  .skill-grid { grid-template-areas: "soft blue" "soft green" "yellow yellow" "purple purple"; }
}
@media (max-width: 760px) {
  .edu-track { grid-template-columns: 1fr; gap: 40px; }
  .edu-track::before { left: 50%; right: auto; top: 0; bottom: 0; width: 8px; height: auto; translate: -50% 0;
    background: repeating-linear-gradient(180deg, #ff8cc0 0 22px, transparent 22px 34px); }
  .xp-grid { grid-template-columns: 1fr; }
  .skill-grid { grid-template-areas: "soft" "blue" "green" "yellow" "purple"; }
}

/* ==========================================================
   v18 — REVISION: about photos, skills, experience, certs, flipbook
   ========================================================== */
/* Introduction notebook */
.step-pill { font-size: 16px; text-transform: none; }
.photo-stack { position: relative; width: 200px; margin: 30px 0 0 auto; }
.photo-stack .polaroid { margin: 0; width: 200px; position: relative; z-index: 2; }
.photo-stack .polaroid .ph { aspect-ratio: 4 / 5; }
.photo-stack .polaroid .ph img { object-position: center 20%; }
.photo-stack .polaroid.back { position: absolute; inset: 0 auto auto 0; z-index: 1; padding-bottom: 10px; }
.photo-stack .polaroid.back.b0 { transform: rotate(-11deg) translate(-56px, 14px); }
.photo-stack .polaroid.back.b1 { transform: rotate(9deg) translate(-110px, 34px); z-index: 0; }
.nb-page.right { min-height: 470px; }
@media (max-width: 760px) {
  .photo-stack { margin: 26px auto 0; translate: 40px 0; width: 170px; }
  .photo-stack .polaroid { width: 170px; }
  .nb-page.right { padding-bottom: 230px; }
}

/* Karya pilihan: award photos */
.award-photo { width: 160px; background: #fff; padding: 8px 8px 22px; border-radius: 6px; rotate: var(--r); box-shadow: var(--shadow); }
.award-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; display: block; }

/* Experience */
.xp-grid { grid-template-columns: repeat(3, 1fr); }
.xp-period {
  display: inline-block; margin-bottom: 6px; font-size: 11px; font-weight: 900; letter-spacing: .5px;
  color: #fff; background: var(--c); padding: 3px 10px; border-radius: 99px;
}
.xp-card:nth-child(9n+7) { --c: #e3262f; } .xp-card:nth-child(9n+8) { --c: #5b6bd6; } .xp-card:nth-child(9n) { --c: #c40010; }

/* Skills: soft row on top, hard groups in an even 3-column grid */
.skill-grid { grid-template-columns: repeat(3, 1fr); grid-template-areas: none; align-items: stretch; }
.skill-card { grid-area: auto; }
.skill-grid > .skill-card { min-width: 0; }
.skill-card.soft { grid-column: 1 / -1 !important; }
.skill-card.soft .soft-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: none; }
.skill-card.soft .soft-chip, .skill-card.soft .soft-chip:nth-child(odd), .skill-card.soft .soft-chip:nth-child(even) { transform: none; }
.skill-card.orange { grid-column: 1 / -1 !important; }
.skill-card.pink { --edge: #ff8cc0; --ink-c: #c42a72; }
.skill-card.teal { --edge: #7fa6d8; --ink-c: #08397a; }
.skill-card.orange { --edge: #ff7a85; --ink-c: #b8000f; }
.skill-card.purple { --edge: #b8c6ff; --ink-c: #3f5dd6; }
.skill-card .hard-list { grid-template-columns: 1fr 1fr; }
.skill-card.orange .hard-list { grid-template-columns: repeat(5, 1fr); }
.skill-head .bubbly-sm { font-size: clamp(22px, 2vw, 27px); }
.app-logo {
  width: 40px; height: 40px; flex: none; border-radius: 12px; background: #fff;
  display: grid; place-items: center; box-shadow: 0 0 0 2px #edf0ff, 0 3px 6px rgba(30, 40, 120, .12);
}
.app-logo img { width: 26px; height: 26px; object-fit: contain; }
.hard-chip { background: #fbfcff; }
@media (max-width: 1020px) {
  .skill-grid { grid-template-columns: 1fr 1fr; }
  .skill-card.soft .soft-list { grid-template-columns: 1fr 1fr; }
  .skill-card.orange .hard-list { grid-template-columns: repeat(2, 1fr); }
  .xp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .skill-grid { grid-template-columns: 1fr; }
  .skill-card.soft .soft-list { grid-template-columns: 1fr 1fr; }
  .skill-card .hard-list, .skill-card.orange .hard-list { grid-template-columns: 1fr 1fr; }
  .xp-grid { grid-template-columns: 1fr; }
}

/* Certificate wall */
.cert-sec { background: linear-gradient(180deg, #fff8ec, #fff); }
.gallery.certs { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.gallery.certs .g-item {
  margin: 0; padding: 12px; border-radius: 6px;
  background: linear-gradient(135deg, #ff7aab, #b8862e 40%, #ff9cc0 60%, #a8741f);
  box-shadow: 0 16px 26px -12px rgba(90, 60, 10, .55);
}
.gallery.certs .g-item .art { border: 6px solid #fff; background: #fff; }
.gallery.certs .g-item .cap { background: #fff; margin-top: 8px; border-radius: 4px; }
.gallery.certs .g-item .cap span { display: none; }
@media (max-width: 760px) { .gallery.certs { grid-template-columns: 1fr; } }

/* Feed packs: wide carousel images get the full row */
.gallery.pack .g-item:has(img[src*="x6-2"]), .gallery.pack .g-item:has(img[src*="x6-3"]) { grid-column: span 2; }

/* ---------- Buku Menu: 3D flipbook ---------- */
.menu-sec {
  padding: 70px 0 90px; overflow: hidden;
  background-color: #3a5a40;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .06) 50%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, .06) 50%, transparent 50%);
  background-size: 46px 46px;
}
.menu-title { text-align: center; font-size: clamp(44px, 6vw, 78px); }
.fb-wrap { perspective: 2600px; display: flex; justify-content: center; margin-top: 18px; }
.fb {
  --w: min(360px, 44vw, calc(70vh * .707));
  --h: calc(var(--w) / .707);
  position: relative; width: calc(var(--w) * 2); height: var(--h);
  transform: translateX(calc(var(--w) * -.5));
  transition: transform .8s cubic-bezier(.4, .1, .2, 1);
  transform-style: preserve-3d;
}
.fb.is-open { transform: translateX(0); }
.fb.is-end { transform: translateX(calc(var(--w) * .5)); }
.fb-leaf {
  position: absolute; left: var(--w); top: 0; width: var(--w); height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.45, .05, .2, 1);
  cursor: pointer;
}
.fb-leaf.flipped { transform: rotateY(-180deg); }
.fb-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fff; overflow: hidden;
}
.fb-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-face.front { border-radius: 2px 8px 8px 2px; box-shadow: inset 12px 0 18px -12px rgba(0, 0, 0, .35), 0 18px 34px -12px rgba(0, 0, 0, .55); }
.fb-face.back { transform: rotateY(180deg); border-radius: 8px 2px 2px 8px; box-shadow: inset -12px 0 18px -12px rgba(0, 0, 0, .35), 0 18px 34px -12px rgba(0, 0, 0, .55); }
.fb-face::after { /* page curl shine */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 8%, transparent 92%, rgba(0, 0, 0, .08));
}
.fb-blank { display: grid; place-items: center; width: 100%; height: 100%; background: #f6f1e6; }
.fb-blank img { width: 40%; height: auto; opacity: .7; }
.fb-leaf:not(.flipped):hover { transform: rotateY(-6deg); }
.fb-leaf.flipped:hover { transform: rotateY(-174deg); }
.fb-ctrl { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.fb-btn { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #3a5a40; display: grid; place-items: center; box-shadow: 0 4px 0 #c9d6c4; }
.fb-btn svg { width: 20px; height: 20px; }
.fb-count { min-width: 150px; text-align: center; color: #fff; font-weight: 900; font-size: 14px; background: rgba(0, 0, 0, .25); padding: 8px 16px; border-radius: 99px; }
.fb-zoom { background: #ff69a0; color: #9d003a; font-weight: 900; font-size: 13px; padding: 10px 16px; border-radius: 99px; box-shadow: 0 4px 0 #ff0e66; }
@media (max-width: 760px) {
  .fb { --w: 44vw; }
}

#about-right .calendar { display: none; }
.hard-chip b { overflow-wrap: anywhere; }
.skill-grid .skill-card { grid-area: auto; }
.skill-grid .skill-card.soft, .skill-grid .skill-card.orange { grid-column: 1 / -1; }
@media (max-width: 760px) { .nb-page.right { padding-bottom: 40px; min-height: 0; } .photo-stack { margin-bottom: 20px; } }
.gallery.pack + .pack-title { margin-top: 40px; }
.gallery.pack { margin-bottom: 8px; }

/* v19 — main page titles in Anton (tall, condensed, all caps) */
.hero-title h1, .hero-title h1 .sc, .hero-title h1 .sc-f, .hero-title .line:last-child {
  font-family: "Anton", "Bebas Neue", Impact, sans-serif;
  letter-spacing: 2px;
}
.hero-title h1 { font-size: clamp(60px, 8.4vw, 124px); line-height: 1.12; }
.hero-title h1 .sc { --sw: .14em; --sp: .22em; --sb: 0; }
.hero-title .line + .line { margin-top: -.06em; padding-left: .15em; }
@media (max-width: 760px) { .hero-title h1 { font-size: clamp(52px, 15vw, 72px); } }

/* v20 — lighter display font everywhere except the Anton page titles */
:root { --font-display: "Fredoka", "Nunito", sans-serif; }
.card h4, .book-card h4, .g-item .cap b, .t-card h4, .lightbox-box .info h4, .hero-side h3,
.step-pill, .calendar b, .cover-art .ct, .buy-box > b, .ob h5, .stat b, .date-badge,
.mk-oval b { font-weight: 600; letter-spacing: .2px; }
.step-pill { text-shadow: none; }
.pack-title, .edu-year, .mk-aisle-no, .mk-dome { letter-spacing: .3px; }
.mk-oval b, .mk-oval2 b { font-weight: 700; }

/* ==========================================================
   v21 — "cool portfolio" hero titles
   Poppins ExtraBold lowercase, blue with thick white sticker
   outline, star/flower accents, serif kicker, red ribbon tags.
   ========================================================== */
.hero-title.cool { position: relative; padding-top: 4px; }
.kicker {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: "Instrument Serif", Georgia, serif; font-size: clamp(22px, 2.4vw, 34px); line-height: 1;
  color: #fff; letter-spacing: -.3px; margin: 0 0 6px 6px;
  text-shadow: 0 2px 8px rgba(40, 40, 120, .35);
}
.kicker span + span { padding-left: 2.6em; }
.cool-title {
  font-family: "Poppins", sans-serif; font-weight: 800; text-transform: lowercase;
  font-size: clamp(58px, 8vw, 118px); line-height: .92; letter-spacing: -.045em;
  color: #2f63d6;
  -webkit-text-stroke: .15em #fff; paint-order: stroke fill;
  filter: drop-shadow(0 6px 10px rgba(30, 40, 110, .3));
  margin: 0;
}
.cool-title .cw { display: flex; align-items: center; white-space: nowrap; }
.cool-title .cw2 { padding-left: .35em; margin-top: .02em; }
.cool-title .ac { flex: none; display: inline-block; }
.ac-burst { width: .82em; height: .82em; margin-left: .08em; translate: 0 -.12em; animation: spin 14s linear infinite; }
.ac-star { width: .62em; height: .62em; margin-right: .04em; rotate: -14deg; translate: 0 .04em; }
.ac-flower { width: .48em; height: .48em; margin-left: .06em; translate: 0 .28em; animation: fl-pulse 4s ease-in-out infinite; }
.ribbons { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 14px 0 0 10px; }
.ribbons span {
  font-family: "Instrument Serif", Georgia, serif; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.1;
  color: #fff; background: #e9474d; padding: 4px 14px 5px;
  border: 2px solid #fff; box-shadow: 0 6px 12px -6px rgba(120, 20, 30, .5);
  rotate: -3deg;
}
.ribbons span + span { margin-left: 2.2em; rotate: -2deg; }
.hero-inner { align-items: start; }
@media (max-width: 760px) {
  .cool-title { font-size: clamp(50px, 14.5vw, 66px); }
  .kicker { font-size: 21px; }
  .ribbons span { font-size: 17px; }
  .ribbons span + span { margin-left: 1em; }
}
@media (prefers-reduced-motion: reduce) { .ac-burst, .ac-flower { animation: none; } }
.hero-title.cool h1.cool-title {
  font-family: "Poppins", sans-serif; font-weight: 800; text-transform: lowercase;
  font-size: clamp(58px, 7.6vw, 112px); line-height: .95; letter-spacing: -.045em;
  color: #2f63d6; -webkit-text-stroke: .15em #fff; paint-order: stroke fill;
  filter: drop-shadow(0 6px 10px rgba(30, 40, 110, .3));
}
@media (max-width: 760px) { .hero-title.cool h1.cool-title { font-size: clamp(48px, 13.5vw, 62px); } }

/* ==========================================================
   v22 — RED / BLUE / PINK THEME
   Palette tokens + per-page themes
   ========================================================== */
:root {
  --red: #e63946; --red-d: #b51f2c; --red-l: #ff9aa2;
  --blue: #2b59d1; --blue-d: #1b3a94; --blue-l: #9fb8ff; --blue-xl: #e3ebff;
  --pink: #ff5c9a; --pink-d: #d93a78; --pink-l: #ffb3cf; --pink-xl: #fff0f6;
  --cream: #fbf7f1;
  --font-hand: "Gochi Hand", "Comic Sans MS", cursive;
  --font-chunk: "Lilita One", "Fredoka", sans-serif;
}

/* ---------- ABOUT: Dufan tent + scrapbook ---------- */
.tent-sec {
  position: relative; padding: 150px 0 120px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(90, 0, 20, .35) 100%),
    repeating-linear-gradient(90deg, #e63946 0 64px, #fff4f6 64px 128px);
}
.tent-sec::before { /* scalloped blue valance */
  content: ""; position: absolute; inset: 0 0 auto; height: 74px; z-index: 1;
  background:
    radial-gradient(circle at 32px 0, #1b3a94 31px, #fff 32px 37px, transparent 38px) 0 30px / 64px 40px repeat-x,
    linear-gradient(#1b3a94 0 30px, transparent 30px);
  filter: drop-shadow(0 8px 10px rgba(30, 10, 60, .35));
}
.tent-lights { position: absolute; left: 0; right: 0; top: 66px; height: 60px; z-index: 2; pointer-events: none; }
.tent-lights svg { width: 100%; height: 100%; display: block; }
.tent-lights .bulb { animation: twinkle 1.6s ease-in-out infinite alternate; }
.tent-lights .bulb:nth-child(3n) { animation-delay: -.5s; } .tent-lights .bulb:nth-child(3n+1) { animation-delay: -1s; }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
.tent-sec .title-pink { position: relative; z-index: 3; margin-bottom: 40px; }
.tent-deco { position: absolute; z-index: 0; pointer-events: none; }
.tent-deco svg { width: 100%; height: auto; display: block; }

.sb {
  position: relative; z-index: 2; padding: 20px; border-radius: 18px;
  background: linear-gradient(135deg, #2b59d1, #1b3a94);
  box-shadow: 0 0 0 4px #13296c, 0 40px 70px -20px rgba(20, 10, 60, .6);
}
.sb::before { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(255, 255, 255, .35); border-radius: 12px; pointer-events: none; }
.sb-paper {
  position: relative; border-radius: 6px; padding: 96px 64px 70px;
  background:
    linear-gradient(90deg, transparent 48.6%, rgba(80, 60, 30, .07) 49.6%, rgba(80, 60, 30, .16) 50%, rgba(80, 60, 30, .07) 50.4%, transparent 51.4%),
    radial-gradient(140% 60% at 50% 0%, #fffdf9, var(--cream) 60%, #f1e9dd);
  box-shadow: 0 0 0 1px #e6dccd, 5px 5px 0 -1px #f4eee5, 5px 5px 0 0 #d9cebd, 10px 10px 0 -1px #f4eee5, 10px 10px 0 0 #cfc3b0;
  color: #3a3d63;
}

/* Handwriting & ovals */
.sb-hand { font-family: var(--font-hand); font-size: 26px; line-height: 1.05; color: var(--blue); }
.sb-hand.red { color: var(--red); }
.sb-oval {
  display: inline-block; position: relative; z-index: 1;
  font-family: var(--font-chunk); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .5px; text-transform: uppercase; line-height: 1;
  padding: 16px 38px 14px; border-radius: 50%; rotate: -4deg; margin: 0 0 22px 6px;
  color: var(--o-t); background: var(--o-bg);
  box-shadow: inset 0 0 0 4px var(--o-bg), inset 0 0 0 8px var(--o-ring), 0 0 0 3px #1d1f45, 6px 8px 0 #1d1f45;
}
.sb-oval.o-pink { --o-bg: #ffc2da; --o-ring: #2b59d1; --o-t: #1b3a94; }
.sb-oval.o-red { --o-bg: #e63946; --o-ring: #2b59d1; --o-t: #ffd6e5; }
.sb-oval.o-blue { --o-bg: #2b59d1; --o-ring: #ff8fbf; --o-t: #ffd6e5; }
.sb-tape {
  position: absolute; left: 50%; top: -14px; width: 92px; height: 26px; translate: -50% 0; rotate: -4deg; z-index: 3;
  background: rgba(255, 179, 207, .75); clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%);
}

/* Tickets + envelope over the top edge */
.sb-tickets { position: absolute; left: 40px; top: -46px; display: flex; gap: 14px; z-index: 4; }
.sb-ticket {
  width: 150px; padding: 14px 14px 12px 22px; position: relative; text-align: left;
  background: #fff; color: var(--red); rotate: -6deg; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .4);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) , linear-gradient(#000, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  border-left: 8px solid var(--red);
}
.sb-ticket.alt { rotate: 4deg; color: var(--blue); border-color: var(--blue); margin-top: 14px; }
.sb-ticket small { display: block; font: 800 10px var(--font-body); letter-spacing: 2px; opacity: .8; }
.sb-ticket b { display: block; font-family: var(--font-chunk); font-weight: 400; font-size: 26px; line-height: .95; margin: 4px 0; }
.sb-ticket span { font-family: var(--font-hand); font-size: 17px; }
.sb-envelope { position: absolute; right: 36px; top: -60px; width: 340px; height: 190px; z-index: 4; rotate: 3deg; }
.sb-envelope::before { content: ""; position: absolute; inset: 40px 0 0; background: #f2c6d6; border-radius: 4px; box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .4); }
.sb-letter {
  position: absolute; left: 22px; right: 22px; top: 0; padding: 16px 18px 40px; rotate: -4deg;
  background: #fffaf0; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); font-size: 15px; color: #3a3d63;
}
.sb-letter p { margin: 0 0 2px; word-break: break-word; }
.sb-letter .sb-hand { font-size: 24px; margin-top: 8px; display: flex; align-items: flex-end; gap: 4px; }
.sb-arrow { width: 44px; }
.sb-env-front { position: absolute; inset: 96px 0 0; background: linear-gradient(160deg, #ffb3cf, #ff8fbf); clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); border-radius: 0 0 4px 4px; }

/* Hello row */
.sb-hello { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; margin-bottom: 70px; }
.sb-photos { position: relative; min-height: 470px; }
.sb-gridpaper {
  position: absolute; left: 4%; top: 26px; width: 74%; height: 88%; rotate: -5deg;
  background: #fff0f6; background-image: linear-gradient(#ffc2da 1px, transparent 1px), linear-gradient(90deg, #ffc2da 1px, transparent 1px); background-size: 18px 18px;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .3);
}
.sb-binder { position: absolute; left: 30%; bottom: -8px; width: 80px; z-index: 5; rotate: 4deg; }
.sb-polaroid { position: absolute; margin: 0; background: #fff; padding: 12px 12px 40px; box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .45); }
.sb-polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; display: block; }
.sb-polaroid.main { left: 13%; top: 0; width: 56%; rotate: -3deg; z-index: 3; }
.sb-polaroid.mini { width: 34%; padding: 8px 8px 24px; z-index: 2; }
.sb-polaroid.mini.m0 { right: 0; top: 30px; rotate: 8deg; }
.sb-polaroid.mini.m1 { right: 6%; bottom: 10px; rotate: -7deg; z-index: 4; }
.sb-pin { position: absolute; left: 50%; top: -30px; width: 46px; translate: -50% 0; z-index: 4; }
.sb-clip { position: absolute; right: 18px; top: -24px; width: 22px; z-index: 4; rotate: 10deg; }
.sb-doodle { position: absolute; width: 54px; z-index: 5; }
.sb-doodle.d0 { left: 0; top: 46%; rotate: -16deg; }
.sb-doodle.d1 { left: 58%; top: 6px; width: 40px; rotate: 18deg; }
.sb-doodle.d2 { right: 30%; bottom: 0; width: 46px; }
.sb-sticky { position: absolute; left: 2%; bottom: 14px; z-index: 5; rotate: -8deg; background: #ff8fbf; color: #fff; font-family: var(--font-hand); font-size: 22px; padding: 8px 16px; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .4); }

.sb-intro { position: relative; }
.sb-scribble { position: absolute; left: -16%; top: -4%; width: 62%; z-index: 0; opacity: .9; rotate: -8deg; pointer-events: none; }
.sb-intro > * { position: relative; z-index: 1; }
.sb-hi { font-family: var(--font-hand); font-size: clamp(34px, 3.6vw, 48px); color: var(--blue); line-height: 1; margin: 0 0 6px; }
.sb-hi b { font-family: var(--font-chunk); font-weight: 400; color: var(--blue-d); letter-spacing: .5px; }
.sb-callme { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.sb-callme .sb-hand { font-size: clamp(30px, 3vw, 42px); line-height: .95; }
.sb-big { font-family: var(--font-chunk); font-size: clamp(64px, 8vw, 116px); line-height: .86; color: var(--red); letter-spacing: 1px; text-shadow: 4px 4px 0 #ffc2da; }
.sb-lead { font-size: 15.5px; line-height: 1.75; text-align: justify; margin: 0 0 12px; }

/* Blocks */
.sb-block { position: relative; margin-bottom: 64px; }
.sb-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sb-note {
  position: relative; padding: 30px 22px 24px; background: var(--n); rotate: var(--r, -1.5deg);
  box-shadow: 0 18px 26px -16px rgba(0, 0, 0, .45); color: #1d2a66;
}
.sb-note.n0 { --n: #ffd0e2; --r: -2deg; } .sb-note.n1 { --n: #d6e2ff; --r: 1.5deg; } .sb-note.n2 { --n: #ffd9d6; --r: -1deg; }
.sb-note::after { content: ""; position: absolute; right: 0; bottom: 0; border: 14px solid; border-color: rgba(0, 0, 0, .08) var(--cream) var(--cream) rgba(0, 0, 0, .08); }
.sb-note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sb-note b { font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .3px; }
.sb-note em { font-style: normal; font-weight: 700; color: var(--red); font-size: 13px; }
.sb-note span { display: block; font-family: var(--font-hand); font-size: 18px; color: var(--blue); line-height: 1.15; margin: 2px 0; }
.sb-note small { display: block; font-size: 13px; line-height: 1.5; color: #4a4e78; }

.sb-two { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; }
.sb-edu { display: grid; gap: 20px; }
.sb-school h4 { font: 800 16px var(--font-body); text-transform: uppercase; color: #1d2a66; letter-spacing: .3px; margin: 0; }
.sb-school h4 em { font-style: normal; color: var(--red); font-size: 14px; }
.sb-major { font-family: var(--font-hand); font-size: 19px; color: var(--blue); margin: 2px 0 6px; }
.sb-school ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.sb-school li::marker { content: "★ "; color: var(--pink); }

.sb-tlabels { display: flex; flex-wrap: wrap; gap: 16px 14px; margin-bottom: 34px; }
.sb-tlabel {
  display: inline-block; font-family: var(--font-chunk); font-size: 17px; letter-spacing: .4px; text-transform: uppercase;
  padding: 12px 20px 10px; rotate: var(--r, -2deg); color: var(--tt); background: var(--tb);
  clip-path: polygon(0 4%, 4% 0, 12% 6%, 22% 1%, 36% 5%, 52% 0, 66% 4%, 80% 0, 92% 5%, 100% 1%, 97% 30%, 100% 52%, 96% 74%, 100% 98%, 88% 94%, 74% 100%, 58% 95%, 42% 100%, 28% 95%, 14% 100%, 3% 96%, 0 72%, 3% 50%, 0 26%);
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .18));
  background-image: linear-gradient(100deg, rgba(255, 255, 255, .22), transparent 40%, rgba(0, 0, 0, .06));
  background-color: var(--tb);
}
.sb-tlabel.sm { font-size: 14px; padding: 9px 14px 8px; }
.t-blue { --tb: #2b59d1; --tt: #ffd6e5; } .t-pink { --tb: #ff8fbf; --tt: #1b3a94; }
.t-red { --tb: #e63946; --tt: #fff; } .t-sky { --tb: #a9c2ff; --tt: #b51f2c; }

.sb-quote { position: relative; background: #fff; padding: 26px 24px 20px; rotate: 1.5deg; box-shadow: 0 16px 24px -14px rgba(0, 0, 0, .4); background-image: repeating-linear-gradient(transparent 0 27px, #ffd0e2 27px 28px); }
.sb-quote .sb-hand { color: var(--red); font-size: 28px; margin: 0 0 6px; }
.sb-quote blockquote { margin: 0; font-size: 14.5px; line-height: 1.95; color: #3a3d63; }

.sb-sws { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; }
.sb-sw:last-child { grid-column: 1 / -1; }
.sb-sw .sb-hand { font-size: 24px; margin: 0 0 10px; }
.sb-sw-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sb-app { width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sb-app i {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 3px var(--blue), 4px 5px 0 var(--blue-d);
}
.sb-app:nth-child(3n+2) i { box-shadow: inset 0 0 0 3px var(--pink), 4px 5px 0 var(--pink-d); }
.sb-app:nth-child(3n) i { box-shadow: inset 0 0 0 3px var(--red), 4px 5px 0 var(--red-d); }
.sb-app img { width: 34px; height: 34px; object-fit: contain; }
.sb-app b { font-size: 11.5px; font-weight: 800; line-height: 1.2; color: #1d2a66; }

.sb-cert { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; margin-bottom: 0; }
.sb-cert .sb-oval { margin: 0; }
.sb-cert .sb-lead { margin-bottom: 16px; }

@media (max-width: 1020px) {
  .sb-paper { padding: 110px 34px 56px; }
  .sb-notes { grid-template-columns: 1fr 1fr; }
  .sb-sws { grid-template-columns: 1fr 1fr; }
  .sb-two { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tent-sec { padding: 120px 0 80px; background: radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(90, 0, 20, .35) 100%), repeating-linear-gradient(90deg, #e63946 0 40px, #fff4f6 40px 80px); }
  .sb { padding: 10px; }
  .sb-paper { padding: 150px 18px 40px; background: radial-gradient(140% 60% at 50% 0%, #fffdf9, var(--cream) 60%, #f1e9dd); }
  .sb-tickets { left: 10px; top: -30px; }
  .sb-ticket { width: 120px; padding: 10px 10px 10px 18px; }
  .sb-ticket b { font-size: 20px; }
  .sb-envelope { right: 6px; top: 70px; width: 210px; height: 120px; rotate: 4deg; }
  .sb-envelope::before { inset: 30px 0 0; }
  .sb-letter { left: 12px; right: 12px; padding: 10px 12px 26px; font-size: 11.5px; }
  .sb-letter .sb-hand { font-size: 18px; }
  .sb-env-front { inset: 70px 0 0; }
  .sb-hello { grid-template-columns: 1fr; gap: 30px; margin-top: 70px; }
  .sb-photos { min-height: 380px; }
  .sb-notes, .sb-sws { grid-template-columns: 1fr; }
  .sb-cert { grid-template-columns: 1fr; }
  .sb-lead { text-align: left; }
}
.sb-paper { padding-top: 70px; }
.sb-hello { margin-top: 10px; }
@media (max-width: 760px) {
  .sb-paper { padding-top: 250px; }
  .sb-envelope { top: 110px; right: auto; left: 50%; translate: -50% 0; width: 270px; height: 130px; rotate: -2deg; }
  .sb-hello { margin-top: 0; }
  .sb-scribble { left: auto; right: -10%; top: -2%; width: 46%; }
}
@media (max-width: 760px) {
  .sb-paper { box-shadow: 0 0 0 1px #e6dccd, 4px 4px 0 -1px #f4eee5, 4px 4px 0 0 #d9cebd; margin-right: 4px; }
  .sb-envelope { height: 150px; }
  .sb-env-front { inset: 98px 0 0; }
  .sb-scribble { width: 34%; right: -4%; top: -40px; }
}

/* ---------- Per-page hero backdrops ---------- */
body[data-page="buku"] .hero { background: linear-gradient(180deg, #1b3a94 0%, #3c4fc0 40%, #b85c9c 75%, #ff9cc4 100%); }
body[data-page="desain"] .hero { background: linear-gradient(180deg, #ffd6e5 0%, #ffb3cf 45%, #ff8fbf 100%); }
body[data-page="prestasi"] .hero { background: radial-gradient(70% 90% at 50% 10%, #3a56c9 0%, #1b3a94 55%, #13296c 100%); }
body[data-page="buku"] .hero-glow, body[data-page="prestasi"] .hero-glow { opacity: .35; }
body[data-page="buku"] .scene, body[data-page="desain"] .scene, body[data-page="prestasi"] .scene { height: 100%; }
body[data-page="desain"] .kicker, body[data-page="desain"] .hero-side { }
body[data-page="desain"] .kicker { color: #1b3a94; text-shadow: 0 2px 0 #fff; }
.fly-book { animation: flyBook 5s ease-in-out infinite; }
@keyframes flyBook { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(14px, -18px) rotate(4deg); } }
.lamp-sway { animation: lampSway 6s ease-in-out infinite; }
@keyframes lampSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.conf { animation: confFall 4s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes confFall { from { translate: 0 -6px; } to { translate: 0 10px; } }
.beam { transform: rotate(var(--rot)); animation: beamSwing 7s ease-in-out infinite alternate; }
@keyframes beamSwing { from { transform: rotate(calc(var(--rot) - 6deg)); } to { transform: rotate(calc(var(--rot) + 6deg)); } }
@media (prefers-reduced-motion: reduce) { .fly-book, .lamp-sway, .conf, .beam { animation: none; } }

/* ---------- BUKU: library card ---------- */
.libcard-sec {
  position: relative; padding: 90px 0 100px;
  background:
    linear-gradient(transparent calc(100% - 120px), #7a3f2a calc(100% - 120px), #7a3f2a calc(100% - 112px), #a35a3c calc(100% - 112px)),
    repeating-linear-gradient(90deg, #ffe3ee 0 34px, #ffd0e2 34px 38px, #ffe3ee 38px 72px);
}
.libcard-sec .title-pink { margin-bottom: 40px; }
.libcard {
  position: relative; max-width: 760px; margin: 0 auto; padding: 34px 44px 40px; rotate: -1deg;
  background: #fffaf0; color: #2b2d5c; border-radius: 6px;
  background-image: linear-gradient(90deg, transparent 72px, #ff9aa2 72px 74px, transparent 74px);
  box-shadow: 0 30px 50px -24px rgba(60, 20, 40, .5), 0 0 0 1px #eadfca;
}
.lc-hole { position: absolute; left: 50%; bottom: 14px; width: 26px; height: 26px; border-radius: 50%; translate: -50% 0; background: #ffd0e2; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2); }
.lc-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px double var(--red); padding: 0 0 12px 46px; margin-bottom: 6px; }
.lc-head small { display: block; font: 800 12px var(--font-body); letter-spacing: 3px; color: var(--red); }
.lc-head b { font-family: var(--font-chunk); font-weight: 400; font-size: clamp(24px, 3vw, 34px); color: var(--blue-d); line-height: 1.1; }
.lc-no { font-family: var(--font-hand); font-size: 22px; color: var(--red); }
.lc-row { display: grid; grid-template-columns: 46px 1fr 130px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1.5px solid #c9d6ff; }
.lc-row > span { font-family: var(--font-hand); font-size: 26px; color: var(--blue); }
.lc-row p { margin: 0; font-size: 15px; line-height: 1.6; }
.lc-th { padding: 6px 0; font: 800 11px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.lc-th span { font: inherit !important; color: inherit !important; }
.lc-stamp {
  justify-self: center; font-style: normal; font-family: var(--font-chunk); font-size: 17px; letter-spacing: 1px;
  padding: 6px 12px; border: 3px solid currentColor; border-radius: 6px; rotate: -10deg; opacity: .85;
  mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .55) 75%);
}
.lc-stamp.s1 { color: var(--blue); } .lc-stamp.s2 { color: var(--pink-d); rotate: 6deg; } .lc-stamp.s3 { color: var(--red); rotate: -4deg; }
.lc-seal {
  position: absolute; right: -40px; bottom: -44px; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center;
  color: var(--blue); border: 4px solid var(--blue); outline: 2px dashed var(--blue); outline-offset: -12px; rotate: 14deg;
  font: 800 11px/1.5 var(--font-body); letter-spacing: 1.5px; text-align: center; background: rgba(255, 255, 255, .6); opacity: .9;
}
.lc-sign { margin: 22px 0 0 62px; font-family: var(--font-hand); font-size: 24px; color: var(--blue); }
.lc-sign em { color: var(--red); font-style: normal; }

/* ---------- BUKU: wooden bookcase collection ---------- */
.lib-sec {
  position: relative; padding: 90px 0 110px; overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 143, 191, .25), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #1b3a94, #13296c);
}
.lib-sec .title-3d { text-align: center; }
.lib-sub { text-align: center; color: #ffd6e5; font-weight: 700; margin: 10px 0 34px; }
.bookcase2 {
  position: relative; padding: 70px 34px 40px; border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, #4a2433, #3b1f2e);
  box-shadow: inset 0 0 0 18px #8f4c33, inset 0 0 0 22px #6d3624, inset 0 30px 40px -10px rgba(0, 0, 0, .5), 0 40px 60px -24px rgba(0, 0, 0, .7);
}
.bc-crown { position: absolute; left: 50%; top: -26px; translate: -50% 0; padding: 10px 38px; background: #a35a3c; border-radius: 12px 12px 4px 4px; box-shadow: 0 4px 0 #6d3624; }
.bc-crown span { display: block; font-family: var(--font-hand); font-size: 24px; color: #fff3e0; padding: 2px 18px; border: 2px solid #ffd6e5; border-radius: 8px; background: #7a3f2a; }
.lib-pills { justify-content: center; margin-bottom: 28px; }
.lib-pills .pill { background: #fffaf0; color: var(--blue-d); box-shadow: 0 4px 0 #c9b79a; border-radius: 6px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); padding-left: 22px; }
.lib-pills .pill.active { background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--red-d); }
.lib-sec .shelf-grid { gap: 0 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.lib-sec .book-card { position: relative; padding: 18px 8px 26px; }
.lib-sec .book-card::after { /* plank */
  content: ""; position: absolute; left: -12px; right: -12px; top: 284px; height: 18px;
  background: linear-gradient(#c97a55 0 4px, #a35a3c 4px 14px, #6d3624 14px); box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .6);
}
.lib-sec .book-stage { height: 266px; margin-bottom: 30px; align-items: end; }
.lib-sec .book-shadow { display: none; }
.lib-sec .book-card .meta { background: #fffaf0; padding: 10px 10px 12px; border-radius: 4px; position: relative; margin: 0 6px; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); }
.lib-sec .book-card .meta::before { content: ""; position: absolute; left: 50%; top: -6px; width: 30px; height: 12px; translate: -50% 0; background: rgba(255, 143, 191, .8); }
.lib-sec .book-card .genre { background: var(--red); }
.lib-sec .book-card h4 { color: var(--blue-d); font-size: 18px; }
.lib-sec .book-card .hint { color: #8a7a6a; }

@media (max-width: 760px) {
  .libcard { padding: 26px 18px 60px; background-image: none; rotate: 0deg; }
  .lc-head { padding-left: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
  .lc-row { grid-template-columns: 34px 1fr; }
  .lc-row .lc-stamp { grid-column: 2; justify-self: start; font-size: 14px; }
  .lc-th span:last-child { display: none; }
  .lc-seal { right: -8px; bottom: -40px; width: 104px; height: 104px; font-size: 9px; }
  .lc-sign { margin-left: 0; }
  .bookcase2 { padding: 64px 16px 30px; }
  .lib-sec .shelf-grid { grid-template-columns: 1fr 1fr; }
  .lib-sec .book-stage { height: 220px; }
  .lib-sec .book-card::after { top: 230px; }
  .lib-sec .book3d { --w: 120px; }
}

/* ---------- DESAIN: Y2K market ---------- */
.y2k-intro {
  position: relative; padding: 90px 0 100px; overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .5) 0 2px, transparent 3px) 0 0 / 70px 70px,
    conic-gradient(#2b59d1 25%, #3b69e0 0 50%, #2b59d1 0 75%, #3b69e0 0) 0 0 / 80px 80px;
}
.y2k-grid { display: grid; grid-template-columns: 1fr 440px; gap: 50px; align-items: center; }
.y2k-left .title-pink { text-align: left; margin: 14px 0 20px; }
.y2k-chip {
  display: inline-block; font-family: var(--font-chunk); font-size: 18px; letter-spacing: 2px; padding: 10px 22px; border-radius: 99px;
  color: #1b3a94; background: linear-gradient(180deg, #fff 0%, #dfe6f5 45%, #a9b7d6 55%, #f4f7ff 100%);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ff8fbf, 0 10px 20px -6px rgba(0, 0, 0, .4);
}
.y2k-lead { color: #fff; font-size: 16px; line-height: 1.75; max-width: 520px; font-weight: 600; }
.y2k-stickers { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.y2k-stickers span { font-family: var(--font-hand); font-size: 22px; padding: 8px 18px; border-radius: 99px; box-shadow: 0 6px 0 rgba(0, 0, 0, .2); }
.y2k-stickers .st1 { background: #ff8fbf; color: #fff; rotate: -6deg; }
.y2k-stickers .st2 { background: #fff; color: var(--red); rotate: 4deg; border: 3px dashed var(--red); }
.y2k-stickers .st3 { background: var(--red); color: #fff; rotate: -3deg; }

.receipt {
  position: relative; background: #fff; color: #1d1f45; padding: 34px 30px 30px; rotate: 2.5deg;
  font-family: "Courier New", monospace; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .55);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 51% repeat-x, linear-gradient(#000 0 0) top / 100% 50% no-repeat;
}
.receipt::before { content: ""; position: absolute; left: -16px; right: -16px; top: 54px; height: 26px; background: var(--red); rotate: -3deg; box-shadow: 0 4px 8px rgba(0, 0, 0, .25); z-index: 0; }
.rc-shop { position: relative; z-index: 1; font-family: var(--font-hand); font-size: 54px; line-height: 1; text-align: center; margin: 0; color: #111; background: #fff; display: table; margin-inline: auto; padding: 0 12px; }
.rc-handle { text-align: center; font-family: var(--font-hand); font-size: 24px; margin: 4px 0 18px; }
.rc-th, .rc-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: baseline; }
.rc-th { font-size: 14px; font-weight: 700; border-bottom: 2px solid #1b3a94; padding-bottom: 6px; margin-bottom: 6px; }
.rc-row { width: 100%; text-align: left; font-family: inherit; font-size: 15px; padding: 7px 4px; border-radius: 4px; transition: background .2s; }
.rc-row span:nth-child(2) { font-weight: 700; }
.rc-row span:last-child { font-size: 13px; color: var(--red); }
.rc-row:hover { background: #ffe3ee; }
.rc-total { text-align: center; font-weight: 700; margin: 12px 0 10px; padding-top: 10px; border-top: 2px solid #1b3a94; }
.rc-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font-size: 13px; padding-bottom: 18px; }
.rc-foot p { margin: 0; line-height: 1.5; }
.rc-code .mk-barcode { width: 130px; display: block; }

/* aisle sign used above category titles */
.aisle-sign {
  display: table; margin: 0 auto 10px; font-family: var(--font-chunk); font-size: 15px; letter-spacing: 3px; padding: 8px 22px;
  color: #fff; background: var(--blue-d); border-radius: 8px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--red), 0 8px 14px -4px rgba(0, 0, 0, .35);
  position: relative;
}
.aisle-sign::before, .aisle-sign::after { content: ""; position: absolute; bottom: 100%; width: 2px; height: 30px; background: #9aa3b5; }
.aisle-sign::before { left: 20%; } .aisle-sign::after { right: 20%; }

/* grid lorongs (Banner, Feed) */
.y2k-sec { position: relative; padding-top: 110px !important; background: radial-gradient(circle, #ffd0e2 2px, transparent 2.5px) 0 0 / 26px 26px, #fff0f6 !important; }
.y2k-sec.alt { background: repeating-linear-gradient(45deg, #e3ebff 0 18px, #f2f6ff 18px 36px) !important; }
.y2k-sec .pack-title {
  display: table; margin: 34px auto 18px; padding: 8px 26px 8px 34px; color: #fff; background: var(--red); font-weight: 800;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); border-radius: 0 6px 6px 0; box-shadow: none;
}
.y2k-sec .g-item { border-radius: 14px; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--blue-l), 0 18px 26px -14px rgba(27, 58, 148, .5); }
.y2k-sec .g-item .cap { background: #fff; }
.y2k-sec .g-item .cap span { background: var(--pink); color: #fff; }

/* certificates: frames on a wall, horizontal scroll */
.frame-sec {
  position: relative; padding: 110px 0 90px; overflow: hidden;
  background:
    linear-gradient(transparent calc(100% - 90px), #fff calc(100% - 90px) calc(100% - 84px), #e3ebff calc(100% - 84px)),
    repeating-linear-gradient(90deg, #ffe3ee 0 40px, #fff4f8 40px 44px, #ffe3ee 44px 80px, #ffd0e2 80px 84px);
}
.frame-rail { position: absolute; left: 0; right: 0; top: 330px; height: 12px; background: linear-gradient(#c97a55, #7a3f2a); box-shadow: 0 4px 6px rgba(0, 0, 0, .2); }
.frame-wrap { position: relative; }
.frame-track {
  display: flex; gap: 46px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 60px max(24px, calc((100vw - 1180px) / 2)) 40px;
  scrollbar-width: thin; scrollbar-color: var(--pink) transparent;
}
.frame-track::-webkit-scrollbar { height: 8px; } .frame-track::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 9px; }
.frame {
  flex: none; width: 340px; scroll-snap-align: center; position: relative; padding: 20px; rotate: var(--tilt);
  background: var(--f1); border-radius: 4px; transition: rotate .3s, transform .3s;
  box-shadow: inset 0 0 0 4px var(--f2), inset 0 0 0 7px rgba(255, 255, 255, .5), inset 0 0 0 10px var(--f2), 0 22px 30px -14px rgba(60, 10, 30, .6);
}
.frame:hover { rotate: 0deg; transform: translateY(-6px); }
.frame.f-red { --f1: #e63946; --f2: #b51f2c; } .frame.f-blue { --f1: #2b59d1; --f2: #1b3a94; } .frame.f-pink { --f1: #ff8fbf; --f2: #d93a78; }
.frame-wire { position: absolute; left: 50%; top: -46px; width: 120px; height: 50px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), #8a8fb8 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1.5px)) left / 50% 100% no-repeat,
              linear-gradient(to top left, transparent calc(50% - 1.5px), #8a8fb8 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1.5px)) right / 50% 100% no-repeat; }
.frame-wire::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; translate: -50% 0; border-radius: 50%; background: #c7a26a; box-shadow: 0 2px 2px rgba(0, 0, 0, .3); }
.frame-in { display: block; background: #fffaf0; padding: 14px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .25); }
.frame-in img { width: 100%; aspect-ratio: 1.414; object-fit: contain; background: #fff; }
.frame-plate { display: block; margin: 12px auto 0; width: fit-content; max-width: 100%; padding: 4px 14px; font-size: 12px; font-weight: 800; color: #5a3a10; background: linear-gradient(180deg, #f6dfa4, #d9b25e); border-radius: 3px; }
.frame-nav { position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--red); box-shadow: 0 4px 0 var(--red), 0 10px 20px -6px rgba(0, 0, 0, .35); translate: 0 -50%; }
.frame-nav svg { width: 22px; } .frame-nav.prev { left: 16px; } .frame-nav.next { right: 16px; }

/* Buku Menu on a red gingham table */
.menu-sec {
  background-color: #fff4f6 !important;
  background-image: linear-gradient(90deg, rgba(230, 57, 70, .55) 50%, transparent 50%), linear-gradient(rgba(230, 57, 70, .55) 50%, transparent 50%) !important;
  background-size: 54px 54px !important;
}
.menu-sec .picnic-sub { background: #fff; color: var(--red-d); }
.fb-count { background: var(--blue-d); }
.fb-btn { color: var(--red); box-shadow: 0 4px 0 var(--red-d); }
.fb-zoom { background: var(--blue); color: #fff; box-shadow: 0 4px 0 var(--blue-d); }

@media (max-width: 1020px) { .y2k-grid { grid-template-columns: 1fr; } .receipt { max-width: 440px; margin: 0 auto; } }
@media (max-width: 760px) {
  .y2k-left .title-pink { text-align: center; }
  .y2k-left { text-align: center; } .y2k-stickers { justify-content: center; } .y2k-lead { margin-inline: auto; }
  .receipt { padding: 28px 18px 24px; rotate: 1deg; }
  .rc-shop { font-size: 44px; }
  .rc-row { font-size: 13px; grid-template-columns: 28px 1fr auto; }
  .frame { width: 260px; padding: 14px; }
  .frame-nav { display: none; }
  .frame-rail { top: 300px; }
}

/* ---------- PRESTASI: carnival awards ---------- */
.carnival-sec {
  position: relative; padding-top: 120px !important; overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, #ff8fbf 0 3px, transparent 3.5px) 0 0 / 120px 120px,
    radial-gradient(circle at 70% 60%, #2b59d1 0 2.5px, transparent 3px) 0 0 / 140px 140px,
    radial-gradient(circle at 45% 80%, #e63946 0 2.5px, transparent 3px) 0 0 / 100px 100px,
    repeating-linear-gradient(135deg, #fff4f8 0 26px, #ffe9f1 26px 52px);
}
.carnival-sec::before { /* bunting */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px;
  background:
    conic-gradient(from 150deg at 50% 100%, transparent 0, transparent 0) ,
    linear-gradient(#1b3a94 0 6px, transparent 6px);
}
.carnival-sec::after {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 40px;
  background:
    linear-gradient(to bottom right, #e63946 50%, transparent 50%) 0 0 / 30px 40px,
    linear-gradient(to bottom left, #e63946 50%, transparent 50%) 30px 0 / 30px 40px;
  background-repeat: repeat-x; background-size: 30px 40px, 30px 40px;
  -webkit-mask: linear-gradient(90deg, #000 0 60px, transparent 60px 90px) 0 0 / 90px 100%;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .2));
}
.carnival-sec .timeline::before { width: 10px; background: repeating-linear-gradient(180deg, #e63946 0 18px, #fff 18px 26px, #2b59d1 26px 44px, #fff 44px 52px); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0, 0, 0, .15); }
.carnival-sec .t-item::after { background: #ffd6e5; box-shadow: 0 0 0 3px var(--red), 0 0 0 7px #fff; }
.carnival-sec .t-card { border-top: 8px solid var(--bc, var(--red)); border-radius: 18px; position: relative; }
.carnival-sec .t-item:nth-child(3n+2) .t-card { --bc: var(--blue); }
.carnival-sec .t-item:nth-child(3n) .t-card { --bc: var(--pink); }
.carnival-sec .t-card::before { /* ticket notches */
  content: ""; position: absolute; top: 50%; left: -11px; right: -11px; height: 22px; translate: 0 -50%; pointer-events: none;
  background: radial-gradient(circle at 0 50%, #ffeef4 10px, transparent 11px), radial-gradient(circle at 100% 50%, #ffeef4 10px, transparent 11px);
}
.stats .stat { border-top: 6px solid var(--red); position: relative; }
.stats .stat:nth-child(2) { border-color: var(--pink); } .stats .stat:nth-child(3) { border-color: var(--blue); }
.stats .stat::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 26px; height: 22px; translate: -50% 0; background: inherit; border-top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 60%, 0 100%); background: var(--red); }
.stats .stat:nth-child(2)::after { background: var(--pink); } .stats .stat:nth-child(3)::after { background: var(--blue); } .stats .stat:nth-child(4)::after { background: var(--blue-d); }
.stat:nth-child(3) b { color: var(--blue-d); } .stat:nth-child(4) b { color: var(--red); }
.lemari-sec {
  position: relative;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, .25), transparent 70%),
    repeating-linear-gradient(90deg, #1b3a94 0 50px, #2346a8 50px 100px);
}
.lemari-sec .picnic-sub { background: #fff; }
.lemari { background: linear-gradient(180deg, #e63946, #b51f2c); box-shadow: inset 0 0 0 10px #c42a37, inset 0 0 0 14px #ffd6e5, 0 24px 40px -18px rgba(0, 0, 0, .6); }
@media (max-width: 760px) { .carnival-sec .t-card::before { display: none; } }

/* ==========================================================
   v23 — smooth section transitions, colourful props, contrast
   ========================================================== */
/* Wavy overlapping top edge between stacked sections */
section.blend {
  position: relative; z-index: 1; margin-top: -46px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V26C60-6 180 58 240 26v22z'/%3E%3C/svg%3E") 0 0 / 240px 48px repeat-x,
                linear-gradient(#000 0 0) 0 46px / 100% calc(100% - 46px) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V26C60-6 180 58 240 26v22z'/%3E%3C/svg%3E") 0 0 / 240px 48px repeat-x,
                linear-gradient(#000 0 0) 0 46px / 100% calc(100% - 46px) no-repeat;
}
section.blend.picnic, section.blend.menu-sec, section.blend.frame-sec, section.blend.library { padding-top: 96px; }

/* Picnic grass back to green (supporting element, not UI) */
.picnic {
  background-color: #7cc95a;
  background-image: radial-gradient(#9ad978 1.4px, transparent 2px), radial-gradient(#62b146 1.4px, transparent 2px);
  background-size: 14px 14px, 19px 19px; background-position: 0 0, 7px 9px;
}

/* Contrast: deeper pink/red wherever text sits on them or uses them */
:root { --pink: #d92668; --pink-d: #a3134c; --red: #d42a38; --red-d: #9e1622; }
.btn-pink { background: var(--pink); box-shadow: 0 6px 0 var(--pink-d), 0 14px 24px -8px rgba(217, 38, 104, .55); }
.btn-pink:hover { background: #e3357a; }
.pill.active { background: var(--pink); box-shadow: 0 4px 0 var(--pink-d); }
.sb-sticky, .y2k-stickers .st1 { background: var(--pink); }
.sb-note em { color: var(--red-d); }
.sb-note span { color: var(--blue-d); }
.lib-sec .book-card .hint { color: #6b5b4b; }
.sb-ticket { color: var(--red-d); border-color: var(--red); }
.sb-ticket.alt { color: var(--blue-d); }
.rc-row span:last-child { color: var(--red-d); }
.y2k-stickers .st2 { color: var(--red-d); border-color: var(--red-d); }
.y2k-lead { text-shadow: 0 2px 6px rgba(10, 20, 70, .6); }
.t-card .kat { color: var(--pink); }
/* Desain Mart: yellow price tags & sign (supermarket feel) */
.mk-tag { background: #ffd84a; }
.mk-dome { border-color: #ffd84a; color: #ffd84a; }
.mk-oval2 b, .mk-oval b { color: #ffd84a; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }