/* =========================================================
   MODERN / BENTO OVERRIDE LAYER
   Loaded last. Strips pixel texture, rounds cards, switches
   the root accent to yellow+black (bento dark-mode style).
   Does not touch HTML structure — pure CSS override.
========================================================= */

:root {
    --yellow: #FFC933;
    --yellow-soft: #FDD24A;
    --yellow-deep: #F9BE2B;
    --ink: #0D0D0D;
    --surface: #161616;
    --surface-2: #1E1E1E;
    --line: rgba(255, 255, 255, 0.08);
    --r-lg: 24px;
    --r-md: 16px;
    --r-pill: 999px;
}

/* ---------- kill pixel edge strips & grain ---------- */
.addons-intro::before,
.info-cards::before,
.blocks::before {
    display: none !important;
}

.addons-intro,
.info-cards,
.blocks {
    --edge-h: 0px !important;
    padding-top: 48px !important;
}

/* ---------- page background: flat, no texture ---------- */
body {
    background: var(--ink);
}

.info-cards {
    background: var(--ink) !important;
}

.blocks {
    background: var(--ink) !important;
}

/* ---------- popular / catalog cards: bento rounded ---------- */
.pop-card {
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line) !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    overflow: hidden;
}

.pop-card:hover {
    border-color: var(--yellow) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.pop-card-media {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;
}

.pop-card-badge {
    top: 12px;
    left: 12px;
    bottom: auto;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--yellow);
    color: var(--yellow);
    padding: 5px 12px;
    font-size: 13px;
}

.pop-card-type {
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border-bottom: none;
}

.pop-card-price,
.price-amount {
    color: var(--yellow) !important;
    text-shadow: none !important;
}

/* ---------- info cards: rounded ---------- */
.info-card {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
}

.info-card:hover {
    border-color: var(--yellow);
}

.info-card-link {
    color: var(--yellow) !important;
}

/* ---------- block items (faq/kreator/komunitas/tim) ---------- */
.block-item {
    border-radius: var(--r-lg) !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    overflow: hidden;
}

.block-item-img {
    border-radius: var(--r-md) !important;
}

/* ---------- chips / tags: full pill ---------- */
.chip-tag,
.type-pill,
.chip {
    border-radius: var(--r-pill) !important;
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
}

.chip-tag:hover,
.type-pill:hover {
    border-color: var(--yellow) !important;
}

.chip.active {
    background: var(--yellow) !important;
    border-color: var(--yellow) !important;
    color: #1a1300 !important;
}

/* ---------- price strip (detail page) stays yellow gradient but rounder ---------- */
.price-strip {
    border-radius: var(--r-lg) !important;
}

.gallery-main {
    border-radius: var(--r-lg) !important;
}

.gallery-thumbs img {
    border-radius: var(--r-md) !important;
}

.gallery-thumbs img.active {
    border-color: var(--yellow) !important;
}

.desc-panel {
    border-radius: var(--r-md) !important;
}

/* ---------- section titles: flatten the pixel drop-shadow ---------- */
.addons-title,
.blocks-title,
.popular-title {
    color: var(--yellow) !important;
    text-shadow: none !important;
}

.popular-btn,
.addons-search-field,
.addons-search-input {
    border-radius: var(--r-pill) !important;
}

.popular-btn {
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
}

.popular-btn:not(:disabled):hover {
    border-color: var(--yellow) !important;
}

/* ---------- footer: soft top radius, no hard pixel sand bar ---------- */
.site-footer {
    border-top: none !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    margin-top: 24px;
}

/* ---------- hero slider: soften corners + yellow CTA ---------- */
.slider-viewport {
    border-radius: var(--r-lg);
    overflow: hidden;
    margin: 16px;
    width: calc(100% - 32px);
}

.hero-cta {
    background: var(--yellow) !important;
    color: #1a1300 !important;
    border-radius: var(--r-pill) !important;
    /* Border & highlight satu keluarga warna (kuning) — sebelumnya hijau dari slider.css, jadi bentrok. */
    border: 2px solid var(--yellow-deep) !important;
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, .35), 0 3px 0 rgba(120, 82, 0, .35) !important;
}

.slider-btn {
    display: none !important;
}

.slider-dot.active,
.slider-dot[aria-current="true"] {
    background: var(--yellow) !important;
}

/* ---------- misc buttons ---------- */
.get-btn,
.show-more,
.breadcrumb {
    border-radius: var(--r-pill);
}

.get-btn {
    background: var(--yellow) !important;
    color: #1a1300 !important;
}

/* tombol "Lihat di Marketplace" di halaman detail */
#dMarket {
    display: inline-block;
    margin-left: auto;
    padding: 10px 18px 8px;
    font-family: "Minecraft", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: .5px;
    text-decoration: none;
}
#dMarket[hidden] { display: none; }



/* =========================================================
   PATCH 2 — more color, golden blur background, bigger text,
   smoother easing, upgraded cards, JS-driven scroll reveal.
========================================================= */

:root {
    --ease: cubic-bezier(.19, 1, .22, 1);
    --amber: #FF9F43;
    --rose: #FF6FA5;
    --mint: #4ADE80;
    --sky: #4AC3FF;
}

/* ---------- ambient golden blur background (fixed, behind everything) ---------- */
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
}

body::before {
    top: -12%;
    left: -10%;
    width: 52vw;
    height: 52vw;
    max-width: 620px;
    max-height: 620px;
    background: radial-gradient(circle, rgba(255, 201, 51, 0.28), transparent 70%);
}

body::after {
    bottom: -18%;
    right: -12%;
    width: 46vw;
    height: 46vw;
    max-width: 560px;
    max-height: 560px;
    background: radial-gradient(circle, rgba(255, 159, 67, 0.22), transparent 70%);
}

/* ---------- more color: category-tinted badges ---------- */
.pop-card-badge[data-type="Add-On"],
.chip-tag[data-type="Add-On"] { border-color: var(--yellow) !important; color: var(--yellow) !important; }
.pop-card-badge[data-type="Texture Pack"],
.chip-tag[data-type="Texture Pack"] { border-color: var(--amber) !important; color: var(--amber) !important; }
.pop-card-badge[data-type="World"],
.chip-tag[data-type="World"] { border-color: var(--mint) !important; color: var(--mint) !important; }
.pop-card-badge[data-type="Mash-Up"],
.chip-tag[data-type="Mash-Up"] { border-color: var(--amber) !important; color: var(--amber) !important; }
.pop-card-badge[data-type="Skin Pack"],
.chip-tag[data-type="Skin Pack"] { border-color: var(--rose) !important; color: var(--rose) !important; }

.footer-col-title { color: var(--yellow) !important; }

/* ---------- bigger, richer typography ---------- */
.addons-title { font-size: 46px !important; letter-spacing: 1px !important; }
.blocks-title { font-size: 36px !important; }
.popular-title { font-size: 32px !important; }
.pop-card-title { font-size: 22px !important; line-height: 1.35 !important; }
.info-card-title { font-size: 34px !important; }
.addons-text { font-size: 19px !important; line-height: 1.75 !important; }
.detail-title { font-size: 40px !important; }
.desc-panel p { font-size: 16px !important; line-height: 1.8 !important; }
.block-item-title { font-size: 22px !important; }
.block-item-text { font-size: 15.5px !important; line-height: 1.65 !important; }

.popular-title,
.addons-title {
    background: linear-gradient(90deg, var(--yellow), var(--amber));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* ---------- smoother easing on everything already transitioning ---------- */
.pop-card,
.pop-card-media img,
.info-card,
.info-card-img,
.block-item,
.chip-tag,
.type-pill,
.gallery-thumbs img,
.gallery-main img {
    transition-timing-function: var(--ease) !important;
    transition-duration: 0.45s !important;
}

/* ---------- upgraded cards: glass surface + glow ring on hover ---------- */
.pop-card,
.info-card,
.block-item {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), var(--surface) !important;
    backdrop-filter: blur(6px);
    position: relative;
}

.pop-card:hover,
.info-card:hover {
    transform: translateY(-8px) scale(1.012);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 201, 51, 0.35), 0 0 32px rgba(255, 201, 51, 0.18);
}

.block-item {
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s ease;
}

.block-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 201, 51, 0.12);
    border-color: var(--yellow) !important;
}

/* ---------- JS scroll-reveal hook: elements start hidden, JS adds .in-view ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- ripple effect container (used by enhance.js) ---------- */
.ripple-wrap {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: ripple-anim 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-anim {
    to { transform: scale(2.6); opacity: 0; }
}

/* ---------- cursor glow that follows pointer inside cards ---------- */
.pop-card, .info-card {
    --mx: 50%;
    --my: 50%;
}

.pop-card::after,
.info-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 201, 51, 0.14), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.pop-card:hover::after,
.info-card:hover::after {
    opacity: 1;
}