/* SLOT235 / "Midnight Gold" — desain baru dari tata letak etalase dasar.
   Semua gambar promosi selalu menggunakan object-fit: contain. */
:root {
  --wine:#1b1a14;--wine2:#292519;--red:#b88825;--reddeep:#80601e;
  --orange:#cc951d;--gold:#d7ac4d;--pale:#fff8e6;--cream:#fffdfa;
  --ink:#21241e;--mute:#6b6b61;--stroke:#e8dfcb;
  --shadow:0 16px 40px rgba(45,39,25,.07);--radius:20px;--footer-h:82px;
}
html {scroll-padding-top:95px}
body {background:#f7f6f0;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.68}
a:hover {color:#9a6b14}
:focus-visible {outline:3px solid #c69d36;outline-offset:3px}
.shell {max-width:1320px}
h1,h2,h3 {letter-spacing:-.035em}
h1 {font-size:clamp(2.1rem,3.5vw,3.65rem);line-height:1.13}
h2 {font-size:clamp(1.5rem,2.5vw,2.4rem)}
.notice-top {background:#0f110f;color:#e9c879;border-bottom:1px solid #514020}
.notice-top .shell {min-height:37px}
.notice-top a {color:#ffdf8e}
.site-header {background:#191c19;border-bottom:1px solid #6c5628;box-shadow:0 7px 25px rgba(0,0,0,.13)}
.header-primary {grid-template-columns:218px minmax(180px,1fr) auto;gap:24px;min-height:99px}
.brand {width:212px;height:74px}
.brand img {height:64px;max-height:64px;width:210px;max-width:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 8px rgba(226,190,89,.22))}
.site-search {background:#fffcf2;border:1px solid #907444;border-radius:999px;height:50px}
.site-search span {color:#9a772f}
.site-search button {background:#bd902e;color:#181810;padding:0 24px}
.site-search button:hover {background:#e8c66d}
.header-actions .button {white-space:nowrap}
.button {border-radius:999px;font-weight:800;min-height:44px;box-shadow:none}
.button-red,.button-gold {background:linear-gradient(120deg,#e6ca7a,#bb8929 70%,#f4d98a);color:#191609;border-color:#f2d17a;box-shadow:0 6px 18px rgba(174,119,28,.16)}
.button-red:hover,.button-gold:hover {background:linear-gradient(120deg,#ffe9ab,#d7a748);color:#17160b}
.button-outline {border:1px solid #947337;background:transparent;color:#efcc77}
.button-outline:hover {color:#ffe8ad;background:rgba(211,163,66,.10)}
.button-soft {background:#fff6e0;color:#735319;border-color:#ead29c}
.main-nav {background:#20231d;border-top:1px solid #3c3d2e;box-shadow:none}
.nav-inner {gap:27px;min-height:51px}
.nav-inner a {font-size:.84rem;color:#e9e3d3;text-transform:uppercase;letter-spacing:.055em}
.nav-inner a:hover,.nav-inner a[aria-current=page] {color:#f7cf76}
.nav-inner a[aria-current=page]::after {background:#e5b64b}
.ticker {background:linear-gradient(100deg,#92702d,#c9a34b,#836123);color:#15150f}
.ticker .shell {min-height:35px}
.ticker strong {color:#18160f}
.main {padding-top:24px}
.crumb {color:#757366;margin-bottom:18px}
.crumb a {color:#94670d}
.eyebrow {color:#9b721f;letter-spacing:.14em}
.card {border-color:#e8e0cd;border-radius:var(--radius);background:#fffefb;box-shadow:var(--shadow)}
.hero-shop {grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px;align-items:stretch}
.hero-shop .gallery {order:2;background:#fffdf5;padding:18px;box-shadow:0 20px 58px rgba(52,44,24,.11)}
.hero-shop .shop-details {order:1;position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% -10%,rgba(203,154,56,.26),transparent 46%),linear-gradient(150deg,#20251e,#171a15 72%);border:1px solid #6e5727;color:#f8eed3;padding:32px 34px}
.shop-details::after {content:"";position:absolute;right:-80px;bottom:-130px;width:340px;height:340px;border-radius:50%;border:1px solid rgba(213,173,69,.20);pointer-events:none}
.shop-details .tag {background:#d3a94e;color:#17170f;border:0}
.shop-details h1 {color:#f6df9e;margin-top:17px;max-width:14ch}
.shop-details .lead {color:#ded7c1;max-width:57ch;font-size:.99rem}
.shop-meta {border-top:1px solid #615230;border-bottom:1px solid #615230;gap:9px}
.shop-meta div {color:#cebf97}
.shop-meta strong {color:#fff4d5;font-size:.93rem}
.shop-details .shop-actions {grid-template-columns:1fr 1fr;gap:10px}
.shop-actions .button {border-radius:13px;min-height:48px;padding:12px}
.shop-details .button-outline {color:#ead297;background:#22241f;border-color:#9b8346}
.shop-details .button-soft {color:#302313}
.shop-note {color:#d2c7a6;background:#302c22;border:1px solid #51472e;border-radius:13px;padding:13px;font-size:.78rem}
.gallery-main {background:#f7f3e6;border:1px solid #ead9ad;border-radius:18px}
.gallery-main img,.gallery-thumbs img,.page-visual img,.feature-card img {object-fit:contain!important}
.thumb {border:2px solid transparent;background:#f5efe0;border-radius:12px;overflow:hidden}
.thumb:hover,.thumb[aria-pressed=true] {border-color:#be8b25;box-shadow:0 0 0 2px #f2e0ad}
.gallery .status {font-size:.78rem;color:#807864}
.quick-categories {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:2px 0 22px}
.quick-categories a {display:flex;align-items:center;gap:10px;justify-content:center;min-width:0;border:1px solid #e2d5b7;border-radius:13px;padding:12px 7px;background:#fffdf6;font-size:.79rem;font-weight:800;color:#4b4331;box-shadow:0 6px 20px rgba(63,48,19,.035);transition:transform .15s,border-color .15s}
.quick-categories a:hover {transform:translateY(-2px);border-color:#c29c47;color:#8c6421}
.quick-categories .qc-icon {font-size:1.3rem;line-height:1}
.highlights {margin-top:22px}
.highlight {border:1px solid #e7dcc3;background:#fffdf7;border-radius:15px;box-shadow:0 5px 17px rgba(55,46,23,.035)}
.hi-icon {background:#fbedd0;color:#735418}
.section-head {margin:44px 0 19px}
.section-head h2 {color:#27271f}
.section-head>a,.blog-card a {color:#91671d}
.section-head .eyebrow {font-size:.7rem}
.feature-card {padding:11px;transition:transform .15s ease,box-shadow .15s ease}
.feature-card:hover {transform:translateY(-3px);box-shadow:0 18px 35px rgba(54,43,18,.11)}
.feature-card .cover {aspect-ratio:1.4;border:1px solid #e8dab7;background:#f6f2e8;border-radius:13px}
.feature-card .inside {padding:17px 10px 10px}
.feature-card .inside h3 {color:#2d2c23;font-size:1.15rem}
.tag {color:#8c6722;border:1px solid #eee0bc;background:#fff5d9}
.mini-btn {color:#5f4f30;border-color:#e4d6b8;border-radius:10px;background:#fffdf6}
.mini-btn.fill {background:#25291f;color:#f7e6bd;border:1px solid #303324}
.mini-btn.fill:hover {background:#3b412d;color:#fff2d2}
.mini-btn[aria-pressed=true] {background:#f3e4ba;color:#503c0e}
.blog-card {border-top:3px solid #bd902f}
.number-card {border:1px solid #e4d6bb}
.number-card .n {color:#c0912e}
.hero-page {background:linear-gradient(115deg,#faf3dd,#fffefa 67%);border:1px solid #e8dabb;border-radius:20px;padding:30px 38px;grid-template-columns:minmax(0,1fr) 280px}
.hero-page h1 {color:#25291e;font-size:clamp(2rem,3.4vw,3.15rem)}
.hero-page p {color:#686657}
.hero-page .page-visual {background:#f5eddb;border-color:#ddca9f}
.topical span {background:#f3e4bf;color:#70541f;border-color:#e9d7a8}
.content-split {gap:23px}
.article-main {padding:30px 34px}
.article-main h2 {color:#24291f;border-bottom-color:#ebe3cf}
.article-main p {color:#53564f}
.side-panel {background:#fffaf0;border-color:#e7d8b4}
.side-panel .button-outline {color:#77581d;border-color:#c2a15d;background:#fff9ee}
.link-list a:hover {color:#936d23}
.callout {background:#fbf3dd;color:#4c493c;border-left-color:#c49c39}
.faq-card {border-color:#e9ddc2}
.faq-card summary {color:#292b22}
.faq-card details[open] {background:#fdf8ec}
.list-toolbar {border-color:#e9ddc2}
.list-toolbar input {background:#fffefa}
.section-band {background:radial-gradient(circle at 2% 10%,#4c4024,#1c241e 60%,#181b17);border:1px solid #837047;border-radius:20px}
.section-band .eyebrow {color:#f3d58c!important}
.section-band p {color:#ded3b7}
.section-band .button-outline {color:#f6db93;background:transparent;border-color:#ab8c48}
.site-footer {background:#181c17;color:#d7d6c8}
.site-footer h3 {color:#f4de9b}
.site-footer a:hover {color:#ffda82}
.footer-bottom {border-top-color:#44483d}
.bottom-dock {background:linear-gradient(100deg,#11160f,#25281c,#11160f);border-top:2px solid #c99b39;height:var(--footer-h);box-shadow:0 -8px 24px rgba(0,0,0,.22)}
.dock-inner {grid-template-columns:repeat(6,minmax(0,1fr));max-width:900px;gap:6px;padding:7px 10px}
.dock-link {color:#e9dfc7;gap:4px;font-size:.72rem;font-weight:800;border-radius:10px}
.dock-link:hover {background:#ffffff14;color:#fff1c6}
.dock-link.cta {background:linear-gradient(145deg,#efd17f,#bb8829);color:#211a0b}
.dock-link .dock-icon {font-size:1.3rem}
.compare-tray {background:#25291e;color:#fff5df;border:1px solid #ad8738}
.compare-tray .chip {background:#38392d}
.modal {border:1px solid #cfb676;border-radius:18px;box-shadow:0 25px 80px rgba(0,0,0,.24)}
@media(max-width:1030px) {
  .header-primary {grid-template-columns:175px minmax(200px,1fr);gap:14px;padding-top:10px;padding-bottom:10px}
  .brand {width:175px}.brand img {width:175px}
  .header-actions {grid-column:1/-1;justify-content:flex-end}
  .quick-categories {grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-shop {gap:16px}
  .shop-details h1 {font-size:clamp(1.85rem,4vw,3.1rem)}
  .shop-details .shop-actions {grid-template-columns:1fr 1fr}
  .hero-shop .shop-details {padding:25px}
}
@media(max-width:760px) {
  :root {--footer-h:77px}
  .shell {padding-left:15px;padding-right:15px}
  .header-primary {grid-template-columns:116px minmax(0,1fr);min-height:70px;gap:9px}
  .brand {width:115px;height:50px}
  .brand img {width:115px;max-height:46px;height:46px}
  .site-search {height:41px}
  .site-search button {padding:0 11px;font-size:.75rem}
  .header-actions {grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .header-actions .button {padding:9px 10px;font-size:.76rem;min-height:40px}
  .nav-inner {gap:22px;min-height:43px}
  .nav-inner a {font-size:.75rem}
  .quick-categories {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:15px}
  .quick-categories a {flex-direction:column;gap:3px;padding:9px 4px;font-size:.67rem;text-align:center}
  .quick-categories .qc-icon {font-size:1.4rem}
  .hero-shop {display:flex;flex-direction:column}
  .hero-shop .gallery {order:1;padding:10px}
  .hero-shop .shop-details {order:2;padding:23px}
  .shop-details h1 {font-size:clamp(1.85rem,6vw,2.4rem);max-width:100%}
  .shop-details .shop-actions {grid-template-columns:1fr 1fr}
  .shop-actions .button {font-size:.78rem;padding:10px 8px;min-height:46px}
  .gallery-main {aspect-ratio:1/1}
  .category-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-card .cover {aspect-ratio:1.3}
  .feature-card .inside {padding:12px 7px}
  .hero-page {grid-template-columns:1fr;padding:25px}
  .content-split {grid-template-columns:1fr}
  .article-main {padding:24px}
  .footer-grid {grid-template-columns:1fr 1fr}
  .dock-inner {gap:3px;padding:5px 4px}
  .dock-link {font-size:.61rem;gap:2px}
  .dock-link .dock-icon {font-size:1.21rem}
}
@media(max-width:460px) {
  .header-primary {grid-template-columns:100px minmax(0,1fr)}
  .brand,.brand img {width:99px}
  .site-search span {padding:0 6px}
  .site-search button {padding:0 7px;font-size:.72rem}
  .quick-categories {grid-template-columns:repeat(3,minmax(0,1fr))}
  .shop-details .shop-actions {grid-template-columns:1fr 1fr}
  .shop-details h1 {font-size:1.92rem}
  .shop-meta {grid-template-columns:1fr 1fr}
  .category-grid,.grid-articles {grid-template-columns:1fr}
  .feature-card .cover {aspect-ratio:1.62}
  .feature-card .inside {padding:13px 10px}
  .highlights {grid-template-columns:1fr 1fr}
  .highlight {padding:12px}
  .dock-link {font-size:.54rem;letter-spacing:-.01em}
  .dock-link .dock-icon {font-size:1.13rem}
  .article-main {padding:20px}
}
@media(max-width:340px) {
  .header-primary {grid-template-columns:88px minmax(0,1fr)}
  .brand,.brand img {width:86px}
  .site-search input {font-size:.69rem}
  .shop-details .shop-actions {grid-template-columns:1fr}
  .dock-inner {gap:0;padding:4px 1px}
  .dock-link {font-size:.51rem}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Native mobile directory: accessible without JavaScript. */
.mobile-menu{display:none;background:#191c19;color:#f9df99}
.mobile-menu summary{cursor:pointer;list-style:none;padding:9px 0 10px;font-size:.82rem;font-weight:750}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary::after{content:"⌄";float:right}
.mobile-menu[open] summary::after{content:"⌃"}
.mobile-menu-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:5px 0 14px}
.mobile-menu-links a{display:block;padding:7px 11px;border:1px solid #69542c;border-radius:8px;color:#fff4d0;font-size:.81rem}
.mobile-menu-links a:hover,.mobile-menu-links a:focus-visible{background:#3b3825;color:#fff}
@media(max-width:760px){.mobile-menu{display:block}}