body {
    font-family: 'Bangers', cursive;
    background-color: #FDFCEE; /* Old comic paper color */
    color: #1F2937;
    /* overflow-x: hidden; <-- DIHAPUS! Ini menyembunyikan masalah, bukan memperbaikinya. */
}

.font-bangers {
    font-family: 'Bangers', cursive;
    letter-spacing: 2px;
}

.comic-box {
    border: 4px solid black;
    box-shadow: 8px 8px 0px black;
    transition: all 0.2s ease-in-out;
}
.comic-box:hover {
    box-shadow: 10px 10px 0px #F8C500; /* Superman Yellow */
    transform: translate(-3px, -3px);
}

/* Text stroke yang lebih responsif */
.text-stroke-white { 
    -webkit-text-stroke: 2px white; text-stroke: 2px white; 
}
@media (min-width: 768px) {
    .text-stroke-white { -webkit-text-stroke: 3px white; text-stroke: 3px white; }
}

.text-stroke-black { 
    -webkit-text-stroke: 2px black; text-stroke: 2px black; 
}
@media (min-width: 768px) {
    .text-stroke-black { -webkit-text-stroke: 3px black; text-stroke: 3px black; }
}

/* Latar belakang Halftone Dots yang lebih besar untuk Parallax */
.halftone-bg-large {
    background-image: radial-gradient(circle, rgba(0,0,0,0.08) 3px, transparent 3px);
    background-size: 25px 25px;
    will-change: transform; /* Optimasi untuk parallax */
}

section {
    position: relative;
}

/* Styling untuk Sticky Carousel */
#how-to-buy-sticky-container { height: 300vh; }
#how-to-buy-carousel {
    position: sticky; top: 0; height: 100vh;
    overflow: hidden; display: flex; flex-direction: column; justify-content: center;
}
.cards-track { display: flex; will-change: transform; }
/* Padding disesuaikan agar tidak terlalu lebar di mobile */
.card-container { flex: 0 0 90vw; max-width: 500px; padding: 0 1rem; }
@media (min-width: 640px) {
    .card-container { flex: 0 0 80vw; padding: 0 2rem; }
}


/* Styling untuk Animasi Buku */
#book-section { perspective: 2000px; }
.book {
    width: 90vw; max-width: 800px; /* Lebar disesuaikan */
    height: 55vh; max-height: 500px; /* Tinggi disesuaikan */
    position: relative; transform-style: preserve-3d; cursor: pointer;
}
.book-cover {
    position: absolute; width: 100%; height: 100%;
    background-color: #DA291C; /* Superman Red */
    transform-origin: left;
    display: flex; align-items: center; justify-content: center;
    backface-visibility: hidden;
}
.book-notification {
    transition: opacity 0.5s;
}
.book-inner {
    position: absolute; width: 100%; height: 100%;
    background: #111827;
    transform: rotateY(0deg);
    display: flex; align-items: center; justify-content: center;
}
.book-inner iframe { width: 98%; height: 98%; } /* Padding kecil untuk iframe di dalam buku */

/* Custom CSS for Sticker Gallery */
.sticker-grid-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid black; /* Comic box border */
    box-shadow: 6px 6px 0px black; /* Comic box shadow */
    transition: all 0.2s ease-in-out;
}
.sticker-grid-item:hover {
    box-shadow: 8px 8px 0px #00529B; /* Blue shadow on hover */
    transform: translate(-2px, -2px);
}
.sticker-grid-item img {
    transition: transform 0.3s ease-in-out;
}
.sticker-grid-item:hover img {
    transform: scale(1.1); /* Slight zoom on sticker */
}

/* Styling untuk Running Text Ribbon */
#running-text-ribbon, .running-text-ribbon {
    border-bottom: solid black 12px;
    /* z-index diatur langsung di HTML dengan Tailwind */
}

#running-text-ribbon .ribbon-content, .running-text-ribbon .ribbon-content {
    animation: scroll-left 30s linear infinite;
}

#running-text-ribbon .ribbon-content:hover, .running-text-ribbon .ribbon-content:hover {
    animation-play-state: paused;
}

/* Keyframe animation for continuous scrolling Left */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Menggulir setengah konten agar loop mulus */
}

/* Custom CSS for Navbar Enhancements */
.nav-link .nav-underline {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: #F8C500;
    transition: width 0.3s ease-in-out;
}
.nav-link:hover .nav-underline {
    width: 100%;
}

.comic-box-sm {
    border: 3px solid black;
    box-shadow: 6px 6px 0px black;
}
.comic-box-sm:hover {
    box-shadow: 8px 8px 0px #F8C500;
    transform: translate(-1px, -1px);
}
.comic-box-sm:active {
    box-shadow: 4px 4px 0px black;
    transform: translate(2px, 2px);
}

/* Definisi BARU untuk animasi getar (hanya translasi) */
@keyframes shake-simple {
  0%   { transform: translate(1px, 1px); }
  25%  { transform: translate(-2px, 2px); }
  50%  { transform: translate(2px, -2px); }
  75%  { transform: translate(-2px, -2px); }
  100% { transform: translate(1px, 1px); }
}

/* Atur pemicu hover untuk menggunakan animasi baru */
.shake-on-hover:hover {
  animation: shake-simple 0.3s infinite; /* Dibuat lebih cepat agar lebih terasa seperti getaran */
}