/* ============================================
   PT Geo Digital Keeasindo
   Design system: "Editorial Tech"
   ============================================ */

/* === Tokens === */
:root {
    --bone:       #F5F1E8;
    --bone-2:     #EBE4D3;
    --charcoal:   #1A1A1A;
    --charcoal-2: #2A2A2A;
    --orange:     #D24A1F;
    --orange-2:   #B63D17;
    --forest:     #2B3A2E;
    --sand:       #9A8F7A;
    --rule:       #1A1A1A;

    --font-display: 'Fraunces', 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

    --radius: 0;          /* koran tanpa-radius */
    --radius-soft: 4px;  /* tag & badge */
    --content-max: 1200px;
}

/* === Reset & base === */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bone);
    color: var(--charcoal);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-image:
        linear-gradient(to right, rgba(26,26,26,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26,26,26,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
}

a {
    color: var(--orange);
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "opsz" 144, "SOFT" 0;
    letter-spacing: -0.02em;
    color: var(--charcoal);
    line-height: 1.05;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.5rem, 6vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.mono { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.02em; }
.serif { font-family: var(--font-display); }
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--charcoal);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}
.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--charcoal);
    display: inline-block;
}

/* === Container === */
.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* === Top bar (mono) === */
.top-bar {
    background: var(--charcoal);
    color: var(--bone);
    padding: 8px 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--charcoal);
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.top-bar a {
    color: var(--bone);
    text-decoration: none;
    border-bottom: 1px dotted rgba(245,241,232,0.4);
}
.top-bar a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.top-bar .sep { color: var(--sand); margin: 0 0.5em; }

/* === Navigation === */
.navbar {
    background: var(--bone);
    border-bottom: 1px solid var(--charcoal);
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(6px);
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.navbar-brand {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--charcoal) !important;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.navbar-brand .mark {
    width: 56px;
    height: 56px;
    background: var(--charcoal);
    color: var(--bone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
}
.navbar-brand .navbar-logo-img {
    height: 56px;
    width: auto;
    display: block;
    object-fit: contain;
}
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar-toggler {
    display: none;
    background: transparent;
    border: 1px solid var(--charcoal);
    padding: 10px 12px;
    cursor: pointer;
    line-height: 0;
    border-radius: 0;
    transition: background .15s, border-color .15s;
}
.navbar-toggler:hover {
    background: var(--charcoal);
}
.navbar-toggler:hover .navbar-toggler-icon,
.navbar-toggler:hover .navbar-toggler-icon::before,
.navbar-toggler:hover .navbar-toggler-icon::after {
    background: var(--bone);
}
.navbar-toggler-icon {
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--charcoal);
    position: relative;
    vertical-align: middle;
    transition: background .15s;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--charcoal);
}
.navbar-toggler-icon::before { top: -7px; }
.navbar-toggler-icon::after  { top: 7px; }
.navbar-nav a {
    color: var(--charcoal);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 8px 14px;
    position: relative;
    text-decoration: none;
}
.navbar-nav a:hover,
.navbar-nav a.active {
    color: var(--orange);
}
.navbar-nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 1px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.navbar-nav a:hover::after { transform: scaleX(1); }
.navbar-nav .cart-count {
    background: var(--orange);
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 999px;
}
.navbar-nav .cart-count {
    background: var(--orange);
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 999px;
}
.navbar-toggler.active .navbar-toggler-icon { background: transparent; }
.navbar-toggler.active .navbar-toggler-icon::before { top: 0; transform: rotate(45deg); }
.navbar-toggler.active .navbar-toggler-icon::after  { top: 0; transform: rotate(-45deg); }

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 14px 24px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1;
}
.btn-primary {
    background: var(--orange);
    color: var(--bone);
    border-color: var(--orange);
}
.btn-primary:hover {
    background: var(--orange-2);
    border-color: var(--orange-2);
    color: var(--bone);
    text-decoration: none;
}
.btn-outline {
    background: transparent;
    color: var(--charcoal);
    border-color: var(--charcoal);
}
.btn-outline:hover {
    background: var(--charcoal);
    color: var(--bone);
    text-decoration: none;
}
.btn-ghost {
    background: transparent;
    color: var(--charcoal);
    border-color: transparent;
    padding: 10px 0;
}
.btn-ghost:hover { color: var(--orange); text-decoration: none; }
.btn .arrow {
    transition: transform 0.2s ease;
}
.btn:hover .arrow { transform: translateX(4px); }

/* === Hero — "ticket split" === */
.hero {
    padding: 80px 0 96px;
    position: relative;
    border-bottom: 1px solid var(--charcoal);
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--charcoal);
}
.hero::before { top: 8px; opacity: 0.15; }
.hero::after  { bottom: 8px; opacity: 0.15; }

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.hero-content .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 32px;
}
.hero-content .badge::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--orange);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.4); }
}

.hero h1 {
    margin-bottom: 24px;
    font-weight: 400;
}
.hero h1 em {
    font-style: italic;
    color: var(--orange);
    font-weight: 500;
}
.hero .lead {
    font-size: 1.125rem;
    color: var(--charcoal-2);
    max-width: 38ch;
    margin-bottom: 48px;
    line-height: 1.6;
}
.hero .price-tag {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 32px;
    padding: 20px 0;
    border-top: 1px solid var(--charcoal);
    border-bottom: 1px solid var(--charcoal);
}
.hero .price-tag .label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--charcoal);
    width: 80px;
    align-self: center;
}
.hero .price-tag .currency {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--sand);
    margin-bottom: 6px;
}
.hero .price-tag .amount {
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1;
    letter-spacing: -0.02em;
}
.hero .cta-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

/* Ticket kanan — kartu monogram dengan grid koordinat */
.hero-ticket {
    background: var(--bone);
    border: 1px solid var(--charcoal);
    padding: 32px;
    position: relative;
    aspect-ratio: 1 / 1.05;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hero-ticket::before,
.hero-ticket::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--bone);
    border: 1px solid var(--charcoal);
    border-radius: 50%;
}
.hero-ticket::before { top: -9px; left: 50%; transform: translateX(-50%); }
.hero-ticket::after  { bottom: -9px; left: 50%; transform: translateX(-50%); }

.hero-ticket .ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--charcoal);
}
.hero-ticket .ticket-header .dot {
    width: 6px;
    height: 6px;
    background: var(--orange);
    display: inline-block;
    margin-right: 6px;
}

.hero-ticket .monogram {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.hero-ticket .monogram::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(26,26,26,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26,26,26,0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    z-index: 0;
}
.hero-ticket .monogram .coords {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--sand);
    position: absolute;
    z-index: 1;
}
.hero-ticket .monogram .coords.tl { top: 0; left: 0; }
.hero-ticket .monogram .coords.tr { top: 0; right: 0; }
.hero-ticket .monogram .coords.bl { bottom: 0; left: 0; }
.hero-ticket .monogram .coords.br { bottom: 0; right: 0; }

.hero-ticket .stamp {
    width: 130px;
    height: 130px;
    border: 2px solid var(--orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    z-index: 2;
    position: relative;
    transform: rotate(-8deg);
}
.hero-ticket .stamp::before {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px dashed var(--orange);
    border-radius: 50%;
}
.hero-ticket .stamp::after {
    content: "EST. JAKARTA · 2020 · STUDIO DIGITAL · ";
    position: absolute;
    inset: -28px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    color: var(--orange);
    animation: rotate 18s linear infinite;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.hero-ticket .ticket-footer {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--sand);
}

/* === Section header umum === */
.section {
    padding: 80px 0;
    border-bottom: 1px solid var(--charcoal);
}
.section.alt { background: var(--bone-2); }
.section h2 {
    margin-bottom: 16px;
}
.section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.section .section-header .lead {
    max-width: 50ch;
    color: var(--charcoal-2);
    margin: 0;
}

/* === Stats strip === */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--charcoal);
    border-bottom: 1px solid var(--charcoal);
}
.stat {
    padding: 32px 24px;
    border-right: 1px solid var(--charcoal);
    position: relative;
}
.stat:last-child { border-right: none; }
.stat .num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--sand);
    margin-bottom: 12px;
}
.stat .value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1;
    color: var(--charcoal);
}
.stat .label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--charcoal-2);
    margin-top: 8px;
}

/* === Categories === */
.cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--charcoal);
    border-left: 1px solid var(--charcoal);
}
.cat {
    padding: 32px 24px;
    border-right: 1px solid var(--charcoal);
    border-bottom: 1px solid var(--charcoal);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: var(--charcoal);
    transition: background 0.2s ease;
    min-height: 160px;
    justify-content: space-between;
}
.cat:hover {
    background: var(--charcoal);
    color: var(--bone);
    text-decoration: none;
}
.cat:hover .cat-num { color: var(--orange); }
.cat .cat-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--sand);
}
.cat .cat-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 500;
}
.cat .cat-arrow {
    align-self: flex-end;
    font-family: var(--font-mono);
    font-size: 1rem;
    transition: transform 0.2s ease;
}
.cat:hover .cat-arrow { transform: translate(4px, -4px); color: var(--orange); }

/* === Product grid · marketplace style === */
.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.product {
    background: var(--bone);
    border: 1px solid var(--charcoal);
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    cursor: pointer;
    overflow: hidden;
}

/* Overlay link menangkap klik di seluruh card */
.product .p-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999em;
    overflow: hidden;
}
.product .p-actions,
.product .p-actions * {
    position: relative;
    z-index: 2;
}
.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 0 -4px var(--orange), 0 16px 32px -8px rgba(26,26,26,0.12);
    border-color: var(--charcoal);
}
.product:focus-within {
    outline: 2px solid var(--orange);
    outline-offset: 4px;
}
.product:hover .p-image img,
.product:hover .p-image .placeholder {
    transform: scale(1.04);
}
.product:hover .p-image .p-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.product:hover .p-link .arrow {
    transform: translateX(4px);
}

/* Image */
.product .p-image {
    aspect-ratio: 4 / 3;
    background: var(--bone-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--bone-2);
    overflow: hidden;
    position: relative;
}
.product .p-image img,
.product .p-image .placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.product .p-image .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 4rem;
    font-style: italic;
    color: var(--sand);
}

/* Hover action overlay */
.product .p-image .p-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    display: flex;
    gap: 8px;
    background: linear-gradient(to top, rgba(26,26,26,0.85) 0%, rgba(26,26,26,0) 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.product .p-image .p-actions a,
.product .p-image .p-actions button {
    flex: 1;
    padding: 10px;
    background: var(--bone);
    color: var(--charcoal);
    border: 1px solid var(--bone);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.product .p-image .p-actions a:hover,
.product .p-image .p-actions button:hover {
    background: var(--orange);
    color: var(--bone);
    border-color: var(--orange);
}

/* Body */
.product .p-body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Category eyebrow */
.product .p-cat {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sand);
    display: flex;
    align-items: center;
    gap: 8px;
}
.product .p-cat .sku { color: var(--charcoal); opacity: 0.6; }
.product .p-cat::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--orange);
    display: inline-block;
}

/* Title */
.product .p-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--charcoal);
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Description */
.product .p-desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--sand);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

/* Footer */
.product .p-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--bone-2);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}
.product .p-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.product .p-price .label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sand);
}
.product .p-price .amount {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--orange);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.product .p-link {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--charcoal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--charcoal);
    padding-bottom: 2px;
    transition: border-color .15s;
}
.product .p-link:hover { border-color: var(--orange); color: var(--orange); text-decoration: none; }
.product .p-link .arrow { transition: transform .2s; display: inline-block; }

/* Category filter chip */
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bone);
    color: var(--charcoal);
    border: 1px solid var(--charcoal);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.cat-chip:hover {
    background: var(--bone-2);
    color: var(--orange);
    text-decoration: none;
}
.cat-chip.is-on {
    background: var(--charcoal);
    color: var(--bone);
    border-color: var(--charcoal);
}
.cat-chip .count {
    background: var(--bone-2);
    color: var(--charcoal);
    padding: 1px 6px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    letter-spacing: 0;
}
.cat-chip.is-on .count {
    background: var(--orange);
    color: var(--bone);
}
/* === Detail produk ============================================
   Layout e-commerce modern: sticky gallery + buy box, trust strip,
   deskripsi dua kolom, spec list, related products, mobile CTA.
   ============================================================ */

/* === Product gallery badge (multi-image indicator) === */
.p-image-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(26,26,26,0.85);
    color: var(--bone);
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* === Contact page · numbered info list === */
.contact-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    padding: 16px 28px;
    border-top: 1px solid var(--bone-2);
    align-items: flex-start;
}
.contact-item:first-child { border-top: none; }
.contact-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--orange);
    letter-spacing: 0.1em;
    padding-top: 2px;
    line-height: 1.4;
    font-weight: 700;
}
.contact-item-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.contact-item-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sand);
}
.contact-item-value {
    font-size: 0.95rem;
    color: var(--charcoal);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.contact-link {
    color: var(--charcoal);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s, color .15s;
    display: inline;
}
.contact-link:hover {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

/* Legal rows */
.contact-legal-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--bone-2);
}
.contact-legal-row:last-child { border-bottom: none; }
.contact-legal-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sand);
}
.contact-legal-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--charcoal);
    letter-spacing: 0.05em;
}

/* Jam operasional */
.contact-hours {
    margin-top: 16px;
    padding: 20px 24px;
    background: var(--bone-2);
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.contact-hours-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--bone);
    border: 1px solid var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--charcoal);
}
.contact-hours-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.contact-hours-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(26,26,26,0.08);
}
.contact-hours-list > div:last-child { border-bottom: none; }
.contact-hours-list span { color: var(--sand); letter-spacing: 0.05em; }
.contact-hours-list strong { color: var(--charcoal); font-weight: 600; letter-spacing: 0.02em; }
.contact-hours-list .is-off { color: var(--sand); font-weight: 400; font-style: italic; }

/* Contact grid responsive */
@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

.pd-wrap {
    padding: 32px 0 80px;
}

/* Breadcrumb ringkas (di luar hero) */
.pd-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sand);
    margin-bottom: 32px;
}
.pd-crumb a {
    color: var(--sand);
    text-decoration: none;
    transition: color .15s;
}
.pd-crumb a:hover { color: var(--orange); }
.pd-crumb .sep { opacity: 0.4; }
.pd-crumb .current { color: var(--charcoal); }

/* Grid utama */
.pd-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* ============ Gallery ============ */
.pd-gallery {
    position: sticky;
    top: 24px;
}
.pd-gallery-frame {
    aspect-ratio: 4 / 3;
    background: var(--bone-2);
    border: 1px solid var(--charcoal);
    overflow: hidden;
    position: relative;
}
.pd-gallery-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pd-gallery-frame .placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 5rem;
    font-style: italic;
    color: var(--sand);
    background: var(--bone-2);
}
.pd-gallery-badges {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}
.pd-gallery-tag {
    background: var(--orange);
    color: var(--bone);
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.pd-gallery-thumbs {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.pd-gallery-thumb {
    aspect-ratio: 1;
    background: var(--bone-2);
    border: 1px solid var(--charcoal);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--sand);
}
.pd-gallery-thumb:hover,
.pd-gallery-thumb.is-on {
    border-color: var(--orange);
}
.pd-gallery-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}

/* ============ Buy box ============ */
.pd-buybox {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.pd-category {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pd-category::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--orange);
}
.pd-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--charcoal);
    margin: 0;
}
.pd-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--sand);
    letter-spacing: 0.05em;
    flex-wrap: wrap;
}
.pd-meta .sku {
    padding: 4px 10px;
    border: 1px solid var(--bone-2);
    background: var(--bone-2);
    color: var(--charcoal);
    letter-spacing: 0.1em;
}
.pd-meta .stock { display: inline-flex; align-items: center; gap: 6px; }
.pd-meta .stock .dot {
    width: 6px; height: 6px;
    background: var(--forest);
    display: inline-block;
}

.pd-price-block {
    padding: 24px 0;
    border-top: 1px solid var(--bone-2);
    border-bottom: 1px solid var(--bone-2);
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}
.pd-price {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
    color: var(--charcoal);
    font-weight: 500;
    letter-spacing: -0.02em;
}
.pd-price-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sand);
}
.pd-tax-note {
    width: 100%;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--sand);
    letter-spacing: 0.05em;
}

/* Qty stepper */
.pd-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--charcoal);
    width: fit-content;
}
.pd-stepper button {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--charcoal);
    font-size: 1rem;
    cursor: pointer;
    font-family: var(--font-mono);
    transition: background .15s;
}
.pd-stepper button:hover { background: var(--bone-2); }
.pd-stepper input {
    width: 60px;
    height: 44px;
    border: none;
    border-left: 1px solid var(--charcoal);
    border-right: 1px solid var(--charcoal);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--charcoal);
    background: var(--bone);
    -moz-appearance: textfield;
}
.pd-stepper input::-webkit-outer-spin-button,
.pd-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* CTA stack */
.pd-cta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: stretch;
}
.pd-cta .btn-primary {
    padding: 18px 24px;
    font-size: 0.95rem;
    justify-content: center;
}
.pd-cta .btn-outline-primary {
    padding: 18px 20px;
    justify-content: center;
}

/* Trust strip */
.pd-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--bone-2);
    border: 1px solid var(--bone-2);
    margin-top: 8px;
}
.pd-trust-item {
    background: var(--bone);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.pd-trust-item i {
    font-size: 1.1rem;
    color: var(--orange);
}
.pd-trust-item .text {
    line-height: 1.2;
}
.pd-trust-item .text strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--charcoal);
}
.pd-trust-item .text span {
    font-size: 0.8rem;
    color: var(--sand);
}

/* ============ Sections di bawah ============ */
.pd-section {
    padding-top: 80px;
    border-top: 1px solid var(--bone-2);
    margin-top: 80px;
}
.pd-section-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 32px;
}
.pd-section-head .num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--orange);
    text-transform: uppercase;
}
.pd-section-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--charcoal);
}
.pd-section-head .rule {
    flex: 1;
    height: 1px;
    background: var(--bone-2);
}

.pd-desc-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: start;
}
.pd-desc-text {
    font-size: 1.05rem;
    line-height: 1.7;
    white-space: pre-line;
    color: var(--charcoal);
}
.pd-spec {
    border: 1px solid var(--charcoal);
    padding: 32px;
}
.pd-spec h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bone-2);
}
.pd-spec ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pd-spec li {
    padding: 12px 0;
    border-bottom: 1px solid var(--bone-2);
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.pd-spec li:last-child { border-bottom: none; }
.pd-spec li::before {
    content: "✓";
    color: var(--orange);
    font-family: var(--font-mono);
    font-weight: 700;
    margin-top: 1px;
}
.pd-spec li.no-spec {
    color: var(--sand);
    font-style: italic;
    font-size: 0.9rem;
    padding: 0;
    border: none;
}
.pd-spec li.no-spec::before { content: ""; }

/* ============ Related products ============ */
.pd-related {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 24px;
}
.pd-related-card {
    border: 1px solid var(--charcoal);
    background: var(--bone);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
    display: flex;
    flex-direction: column;
}
.pd-related-card:hover { background: var(--bone-2); text-decoration: none; }
.pd-related-card .p-image {
    aspect-ratio: 4 / 3;
    background: var(--bone-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--charcoal);
    overflow: hidden;
}
.pd-related-card .p-image img {
    width: 100%; height: 100%; object-fit: cover;
}
.pd-related-card .p-image .placeholder {
    font-family: var(--font-display);
    font-size: 2rem;
    font-style: italic;
    color: var(--sand);
}
.pd-related-card .body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.pd-related-card .cat {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sand);
}
.pd-related-card h5 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--charcoal);
}
.pd-related-card .price {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--orange);
}

/* Mobile CTA fix-bottom */
.pd-mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: var(--bone);
    border-top: 1px solid var(--charcoal);
    z-index: 50;
    gap: 8px;
}
.pd-mobile-cta .btn-primary { flex: 1; justify-content: center; padding: 14px; }
.pd-mobile-cta .btn-outline-primary { padding: 14px 16px; }
.pd-mobile-cta .price {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--charcoal);
    flex-basis: 100%;
    margin: 0 0 4px;
}

@media (max-width: 1024px) {
    .pd-grid { grid-template-columns: 1fr; gap: 32px; }
    .pd-gallery { position: static; }
    .pd-related { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .pd-wrap { padding: 16px 0 120px; }
    .pd-related { grid-template-columns: repeat(2, 1fr); }
    .pd-desc-grid { grid-template-columns: 1fr; gap: 32px; }
    .pd-trust { grid-template-columns: 1fr; }
    .pd-mobile-cta { display: flex; flex-wrap: wrap; }
    .pd-section { padding-top: 48px; margin-top: 48px; }
    body.has-mobile-cta { padding-bottom: 100px; }
}

    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 4px 10px;
}

/* === Footer Pre-CTA === */
.foot-cta {
    background: var(--bone);
    padding: 0;
    margin-top: 80px;
    border-top: 1px solid var(--charcoal);
    border-bottom: 1px solid var(--charcoal);
}
.foot-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 40px 48px;
    flex-wrap: wrap;
}
.foot-cta-inner .num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--orange);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}
.foot-cta-inner h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--charcoal);
    letter-spacing: -0.02em;
}
.foot-cta-inner p {
    color: var(--sand);
    font-size: 0.95rem;
    margin: 0;
    max-width: 48ch;
}
.foot-cta-btn {
    padding: 18px 32px;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.foot-cta-btn .arrow {
    margin-left: 12px;
    display: inline-block;
    transition: transform .2s;
}
.foot-cta-btn:hover .arrow { transform: translateX(4px); }

@media (max-width: 768px) {
    .foot-cta-inner { padding: 28px 24px; flex-direction: column; align-items: flex-start; }
    .foot-cta-inner h3 { font-size: 1.5rem; }
    .foot-cta-btn { width: 100%; justify-content: center; }
}

/* === Footer · studio editorial === */
.footer {
    background: var(--charcoal);
    color: var(--bone);
    padding: 80px 0 0;
    margin-top: 0;
}

/* Grid utama */
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 64px;
    margin-bottom: 64px;
}

/* === Brand column === */
.footer-brand .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.footer-brand .brand .mark {
    width: 40px;
    height: 40px;
    background: var(--orange);
    color: var(--bone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
}
.footer-brand .brand .footer-logo-img {
    height: 80px;
    width: auto;
    display: block;
    object-fit: contain;
    background: var(--bone);
    padding: 6px 10px;
}

/* === Brand identity preview === */
.brand-preview-box {
    background: var(--bone-2);
    border: 1px solid var(--charcoal);
    padding: 32px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-preview-img {
    max-height: 80px;
    max-width: 100%;
    display: block;
    object-fit: contain;
}
.brand-preview-img-small {
    height: 24px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}
.brand-preview-fallback,
.brand-preview-fallback-inline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.brand-preview-fallback .mark-mark,
.brand-preview-fallback-inline .mark-mark {
    width: 40px;
    height: 40px;
    background: var(--orange);
    color: var(--bone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
}
.brand-preview-fallback .mark-name,
.brand-preview-fallback-inline .mark-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.brand-preview-dark {
    background: var(--charcoal);
    padding: 16px 20px;
    min-width: 180px;
}
.brand-preview-dark .brand-preview-fallback-inline {
    color: var(--bone);
}
.brand-preview-dark .mark-mark {
    background: var(--orange);
}

/* Favicon preview */
.favicon-preview-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bone-2);
    border: 1px solid var(--bone-2);
    border-bottom: 3px solid var(--charcoal);
    color: var(--charcoal);
    font-size: 0.9rem;
    max-width: 280px;
}
.favicon-preview-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.favicon-preview-bookmark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--charcoal);
    color: var(--bone);
    font-size: 0.85rem;
    border-radius: 6px 6px 0 0;
    max-width: 200px;
}
.favicon-preview-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}
.favicon-preview-img-small {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.favicon-preview-fallback {
    width: 16px;
    height: 16px;
    background: var(--charcoal);
    color: var(--bone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 2px;
    flex-shrink: 0;
}
.favicon-preview-favicon-default {
    width: 16px;
    height: 16px;
    background: var(--orange);
    color: var(--bone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 2px;
}
@media (max-width: 768px) {
    .brand-preview-box { padding: 20px; min-height: 120px; }
}
.footer-brand .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.footer-brand .brand-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--bone);
    letter-spacing: -0.01em;
}
.footer-brand .brand-tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--sand);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 2px;
}
.footer-brand .brand-desc {
    font-size: 0.95rem;
    color: var(--bone);
    opacity: 0.8;
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 42ch;
}
.footer-brand .brand-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(245,241,232,0.1);
}
.footer-brand .brand-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-brand .brand-meta-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--orange);
}
.footer-brand .brand-meta-value {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--bone);
    letter-spacing: 0.05em;
}

/* === Column heading === */
.footer h6 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--orange);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(245,241,232,0.1);
}

/* === Link list === */
.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer ul li {
    margin-bottom: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}
.footer ul li a {
    color: var(--bone);
    opacity: 0.85;
    text-decoration: none;
    transition: color .15s, opacity .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer ul li a:hover {
    color: var(--orange);
    opacity: 1;
    text-decoration: none;
}
.footer ul li a::before {
    content: "→";
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s, transform .15s;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.footer ul li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* === Kontak list (numbered grid) === */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.footer-contact li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: flex-start;
    line-height: 1.5;
}
.footer-contact .num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--orange);
    letter-spacing: 0.1em;
    flex-shrink: 0;
    line-height: 1.6;
    text-align: left;
}
.footer-contact .text,
.footer-contact a {
    font-size: 0.9rem;
    color: var(--bone);
    opacity: 0.85;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.footer-contact a:hover { color: var(--orange); opacity: 1; }
.footer-contact a {
    border-bottom: 1px solid transparent;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.footer-contact a:hover {
    border-bottom-color: var(--orange);
}
.footer-contact-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.footer-contact-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
    opacity: 0.7;
}

/* === Big statement === */
.footer-statement {
    padding: 56px 0;
    border-top: 1px solid rgba(245,241,232,0.1);
    border-bottom: 1px solid rgba(245,241,232,0.1);
    margin-bottom: 0;
}
.footer-statement .num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--orange);
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
}
.footer-statement h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.1;
    color: var(--bone);
    margin: 0 0 24px;
    letter-spacing: -0.02em;
    font-weight: 500;
}
.footer-statement .badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--bone);
    opacity: 0.7;
    letter-spacing: 0.1em;
}
.footer-statement .dot {
    width: 8px;
    height: 8px;
    background: var(--orange);
    border-radius: 50%;
    animation: pulse 1.6s infinite;
    flex-shrink: 0;
}

/* === Status bar bottom === */
.footer-bottom {
    padding: 28px 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: transparent;
}
.footer-bottom-left,
.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--bone);
    opacity: 0.7;
    letter-spacing: 0.05em;
    flex-wrap: wrap;
}
.footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(245,241,232,0.06);
    border: 1px solid rgba(245,241,232,0.1);
    color: var(--bone);
    opacity: 1;
}
.footer-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.footer-pill .dot-forest {
    background: var(--forest);
    box-shadow: 0 0 0 2px rgba(43,58,46,0.3);
    animation: pulse 1.6s infinite;
}

/* Footer responsive */
@media (max-width: 1024px) {
    .footer { padding: 64px 0 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 48px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-statement { padding: 40px 0; }
    .footer-statement h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
}
@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .footer-bottom-right { width: 100%; }
}

/* ============================================================
   FLOATING WIDGETS · WhatsApp + Live Chat CS
   ============================================================ */

/* === Floating Widgets · hanya tampil jika body TIDAK punya class widgets-hidden === */
body.widgets-hidden .wa-float,
body.widgets-hidden .cs-float {
    display: none !important;
}

.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 12px 12px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 8px 24px -4px rgba(37, 211, 102, 0.4), 0 12px 32px -8px rgba(26,26,26,0.2);
    transition: transform .2s, box-shadow .2s;
    font-family: var(--font-sans);
}
.wa-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -4px rgba(37, 211, 102, 0.5), 0 16px 40px -8px rgba(26,26,26,0.25);
    color: #fff;
    text-decoration: none;
}
.wa-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wa-icon svg { display: block; }
.wa-label {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.wa-label-top {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 2px;
}
.wa-label-bot {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem;
}
.wa-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #25D366;
    z-index: -1;
    animation: waPulse 2s infinite;
}
@keyframes waPulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* === Live chat panel (bottom-left) === */
.cs-float {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 90;
}
.cs-launcher {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: var(--charcoal);
    color: var(--bone);
    cursor: pointer;
    box-shadow: 0 8px 24px -4px rgba(26,26,26,0.4), 0 12px 32px -8px rgba(26,26,26,0.25);
    transition: transform .2s, box-shadow .2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -4px rgba(26,26,26,0.5), 0 16px 40px -8px rgba(26,26,26,0.3);
}
.cs-launcher svg { display: block; }
.cs-icon-x { display: none; }
.cs-float.is-open .cs-icon-chat { display: none; }
.cs-float.is-open .cs-icon-x { display: block; }
.cs-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--orange);
    color: var(--bone);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bone);
}

/* === Chat panel === */
.cs-panel {
    position: absolute;
    bottom: 76px;
    left: 0;
    width: 380px;
    max-width: calc(100vw - 48px);
    height: 560px;
    max-height: calc(100vh - 120px);
    background: var(--bone);
    border: 1px solid var(--charcoal);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transform-origin: bottom left;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: 0 20px 60px -12px rgba(26,26,26,0.4);
}
.cs-float.is-open .cs-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cs-panel-head {
    background: var(--charcoal);
    color: var(--bone);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--charcoal);
}
.cs-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    background: var(--orange);
    color: var(--bone);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.cs-online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #4ade80;
    border: 2px solid var(--charcoal);
    border-radius: 50%;
}
.cs-head-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}
.cs-head-text strong {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    color: var(--bone);
}
.cs-head-text span {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--sand);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cs-online-dot {
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse 1.6s infinite;
}
.cs-close {
    background: transparent;
    border: 1px solid rgba(245,241,232,0.2);
    color: var(--bone);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.cs-close:hover { background: rgba(245,241,232,0.1); }

/* Body */
.cs-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--bone);
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}
.cs-loading,
.cs-empty,
.cs-error {
    text-align: center;
    color: var(--sand);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding: 32px 16px;
}
.cs-error { color: var(--orange); }
.cs-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--bone-2);
    border-top-color: var(--orange);
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.cs-msg {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    gap: 2px;
}
.cs-msg .msg-name {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sand);
    margin-left: 4px;
    margin-bottom: 2px;
}
.cs-msg .msg-bubble {
    padding: 10px 14px;
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
    border: 1px solid var(--bone-2);
    background: var(--bone);
}
.cs-msg .msg-time {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--sand);
    letter-spacing: 0.05em;
    margin-top: 2px;
    padding: 0 4px;
}
.cs-msg.msg-cs { align-self: flex-start; }
.cs-msg.msg-cs .msg-bubble {
    background: var(--bone);
    border-color: var(--charcoal);
    border-bottom-left-radius: 0;
}
.cs-msg.msg-visitor { align-self: flex-end; align-items: flex-end; }
.cs-msg.msg-visitor .msg-bubble {
    background: var(--charcoal);
    color: var(--bone);
    border-color: var(--charcoal);
    border-bottom-right-radius: 0;
}
.cs-msg.msg-visitor .msg-time { color: var(--sand); }
.cs-msg.msg-system { align-self: center; max-width: 100%; }
.cs-msg.msg-system .msg-bubble {
    background: var(--bone-2);
    border-color: var(--bone-2);
    color: var(--sand);
    font-size: 0.8rem;
    font-style: italic;
}

/* Form */
.cs-panel-form {
    border-top: 1px solid var(--bone-2);
    padding: 12px 16px 16px;
    background: var(--bone);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-panel-form input[type="text"],
.cs-panel-form input[type="email"] {
    padding: 8px 12px;
    border: 1px solid var(--bone-2);
    background: var(--bone);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--charcoal);
    outline: none;
    transition: border-color .15s;
}
.cs-panel-form input[type="text"]:focus,
.cs-panel-form input[type="email"]:focus {
    border-color: var(--charcoal);
}
.cs-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.cs-input-row textarea {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--charcoal);
    background: var(--bone);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--charcoal);
    resize: none;
    outline: none;
    min-height: 40px;
    max-height: 120px;
    line-height: 1.4;
}
.cs-input-row textarea:focus { border-color: var(--orange); }
.cs-send {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--orange);
    color: var(--bone);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.cs-send:hover { background: var(--orange-2); }
.cs-send svg { display: block; }
.cs-foot-note {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--sand);
    letter-spacing: 0.05em;
    text-align: center;
}

/* === Mobile responsive ===
   Stack di atas konten, full-width dari bawah */
@media (max-width: 640px) {
    .wa-float {
        bottom: 16px;
        right: 16px;
        padding: 10px 14px 10px 10px;
        gap: 8px;
    }
    .wa-icon { width: 40px; height: 40px; }
    .wa-label { display: none; }

    .cs-float {
        bottom: 16px;
        left: 16px;
    }
    .cs-launcher {
        width: 52px;
        height: 52px;
    }
    .cs-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        height: calc(100vh - 60px);
        max-height: none;
        transform: translateY(100%);
        transform-origin: bottom;
        border: none;
        border-top: 1px solid var(--charcoal);
    }
    .cs-float.is-open .cs-panel {
        transform: translateY(0);
    }
    .cs-float.is-open .cs-launcher {
        transform: translateY(calc(100vh - 60px));
    }
}

/* Saat chat panel terbuka, geser konten tidak terhalang */
@media (max-width: 640px) {
    body.cs-open {
        overflow: hidden;
    }
}

/* === Card / panel === */
.card {
    background: var(--bone);
    border: 1px solid var(--charcoal);
    border-radius: 0;
    padding: 24px;
}
.card-header {
    background: var(--bone);
    border-bottom: 1px solid var(--charcoal);
    padding: 16px 24px;
    font-family: var(--font-display);
    font-size: 1.25rem;
}

/* === Forms === */
.form-control, .form-select {
    border: 1px solid var(--charcoal);
    border-radius: 0;
    background: var(--bone);
    color: var(--charcoal);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 2px rgba(210,74,31,0.15);
    outline: none;
}
.form-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--charcoal);
    margin-bottom: 6px;
}

/* === Admin · shared components === */
.adm-wrap { max-width: 1280px; margin: 0 auto; }

.adm-stat {
    background: var(--bone);
    border: 1px solid var(--charcoal);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.adm-stat::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--charcoal);
}
.adm-stat.is-orange::before { background: var(--orange); }
.adm-stat.is-forest::before { background: var(--forest); }
.adm-stat.is-sand::before   { background: var(--sand); }
.adm-stat .label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sand);
}
.adm-stat .value {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--charcoal);
    margin: 0;
}
.adm-stat .meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--sand);
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.adm-panel {
    background: var(--bone);
    border: 1px solid var(--charcoal);
    margin-bottom: 24px;
}
.adm-panel-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--charcoal);
    background: var(--bone);
}
.adm-panel-head .num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--orange);
}
.adm-panel-head h5 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--charcoal);
}
.adm-panel-head .rule {
    flex: 1;
    height: 1px;
    background: var(--bone-2);
}
.adm-panel-head .toolbar {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}
.adm-panel-body { padding: 24px; }
.adm-panel-body.tight { padding: 0; }

.adm-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--bone-2);
    background: var(--bone);
}
.adm-toolbar .filter {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 14px;
    border: 1px solid var(--charcoal);
    background: var(--bone);
    color: var(--charcoal);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.adm-toolbar .filter:hover { background: var(--charcoal); color: var(--bone); }
.adm-toolbar .filter.is-on {
    background: var(--charcoal);
    color: var(--bone);
}
.adm-toolbar .filter.is-orange { border-color: var(--orange); color: var(--orange); }
.adm-toolbar .filter.is-orange.is-on { background: var(--orange); color: var(--bone); border-color: var(--orange); }
.adm-toolbar .filter.is-forest { border-color: var(--forest); color: var(--forest); }
.adm-toolbar .filter.is-forest.is-on { background: var(--forest); color: var(--bone); border-color: var(--forest); }
.adm-toolbar .filter.is-sand { border-color: var(--sand); color: var(--sand); }
.adm-toolbar .filter.is-sand.is-on { background: var(--sand); color: var(--charcoal); border-color: var(--sand); }

.adm-dl {
    margin: 0;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 14px 24px;
    font-size: 0.95rem;
}
.adm-dl dt {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sand);
    padding-top: 2px;
}
.adm-dl dd { margin: 0; color: var(--charcoal); }
.adm-dl dd .meta { color: var(--sand); font-size: 0.85rem; }

.adm-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 20px 24px;
    background: var(--bone-2);
    border-top: 1px solid var(--charcoal);
}
.adm-actions .left { margin-right: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--sand); letter-spacing: 0.1em; text-transform: uppercase; }

.adm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.adm-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--sand);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.adm-status-toggle {
    display: flex;
    gap: 12px;
}
.adm-status-toggle label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--charcoal);
    background: var(--bone);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--charcoal);
}
.adm-status-toggle label.is-on {
    background: var(--charcoal);
    color: var(--bone);
}
.adm-status-toggle input { accent-color: var(--orange); }

@media (max-width: 768px) {
    .adm-dl { grid-template-columns: 1fr; gap: 6px 0; }
    .adm-dl dt { margin-top: 12px; }
    .adm-grid-2 { grid-template-columns: 1fr; }
    .adm-stat .value { font-size: 1.75rem; }
    .adm-panel-head { flex-wrap: wrap; }
    .adm-panel-head .toolbar { width: 100%; margin-left: 0; }
    .adm-actions { flex-wrap: wrap; }
    .adm-actions .left { width: 100%; margin: 0 0 8px; }
}

/* === Admin · Chart containers === */
.chart-shell {
    position: relative;
    width: 100%;
}
.chart-shell canvas {
    display: block;
    max-width: 100%;
}
.chart-legend {
    border-top: 1px solid var(--bone-2);
    padding-top: 16px;
}

/* ============================================================
   ADMIN SHELL · Studio Console
   Sidebar fixed di kiri, topbar tipis, area konten
   ============================================================ */

body.adm {
    background-image: none;
}

.adm-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bone);
    align-items: stretch;
}

/* === Sidebar === */
.adm-sidebar {
    background: var(--charcoal);
    color: var(--bone);
    padding: 0;
    position: sticky;
    top: 0;
    width: 260px;
    flex: 0 0 260px;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--charcoal);
    box-sizing: border-box;
    align-self: flex-start;
}
.adm-sidebar .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 24px 32px;
    text-decoration: none;
    color: var(--bone);
    border-bottom: 1px solid rgba(245,241,232,0.08);
}
.adm-sidebar .brand .mark {
    width: 32px; height: 32px;
    background: var(--orange);
    color: var(--bone);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
}
.adm-sidebar .brand .name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1;
}
.adm-sidebar .brand .sub {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sand);
    display: block;
    margin-top: 4px;
}

.adm-nav-group {
    padding: 24px 0;
}
.adm-nav-group .label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sand);
    padding: 0 24px 12px;
}
.adm-nav-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.adm-nav-group li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    color: var(--bone);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    border-left: 2px solid transparent;
    transition: background .15s, border-color .15s;
}
.adm-nav-group li a:hover {
    background: rgba(245,241,232,0.04);
}
.adm-nav-group li a.is-active {
    background: rgba(210,74,31,0.12);
    border-left-color: var(--orange);
    color: var(--bone);
}
.adm-nav-group li a i {
    font-size: 1rem;
    width: 18px;
    color: var(--sand);
}
.adm-nav-group li a.is-active i,
.adm-nav-group li a:hover i { color: var(--orange); }
.adm-nav-group li a .new {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    background: var(--orange);
    color: var(--bone);
    padding: 2px 6px;
    letter-spacing: 0.1em;
}

.adm-sidebar-foot {
    padding: 24px;
    border-top: 1px solid rgba(245,241,232,0.08);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--sand);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* === Topbar === */
.adm-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bone);
}
.adm-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 32px;
    border-bottom: 1px solid var(--bone-2);
    background: var(--bone);
    position: sticky;
    top: 0;
    z-index: 50;
}
.adm-topbar .crumb {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sand);
    display: flex;
    align-items: center;
    gap: 12px;
}
.adm-topbar .crumb b {
    color: var(--charcoal);
    font-weight: 600;
}
.adm-topbar .crumb .sep { color: var(--sand); opacity: 0.4; }
.adm-topbar .clock {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--sand);
    display: flex;
    align-items: center;
    gap: 8px;
}
.adm-topbar .clock .dot {
    width: 6px; height: 6px;
    background: var(--forest);
    border-radius: 50%;
    display: inline-block;
}
.adm-topbar .user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--charcoal);
    color: var(--charcoal);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}
.adm-topbar .user .avatar {
    width: 28px; height: 28px;
    background: var(--charcoal);
    color: var(--bone);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
}
.adm-topbar .user .meta {
    line-height: 1.2;
}
.adm-topbar .user .meta .role {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--sand);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* === Page canvas === */
.adm-canvas {
    padding: 40px 32px 80px;
    max-width: 1400px;
    width: 100%;
}

/* === Page head (title + breadcrumb) === */
.adm-head {
    margin-bottom: 32px;
}
.adm-head .num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--orange);
}
.adm-head h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 8px 0 8px;
    color: var(--charcoal);
}
.adm-head .desc {
    color: var(--sand);
    font-size: 0.95rem;
    max-width: 60ch;
    margin: 0;
}
.adm-head .actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* === Dashboard · hero + supporting stats === */
.adm-hero {
    background: var(--charcoal);
    color: var(--bone);
    padding: 40px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.adm-hero::after {
    content: "";
    position: absolute;
    right: -100px;
    top: -100px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(245,241,232,0.06);
    border-radius: 50%;
}
.adm-hero::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(245,241,232,0.06);
    border-radius: 50%;
}
.adm-hero .label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--orange);
}
.adm-hero .focal {
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--bone);
    margin: 16px 0 8px;
    letter-spacing: -0.02em;
}
.adm-hero .focal .decimal {
    font-size: 2rem;
    color: var(--sand);
}
.adm-hero .meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--sand);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.adm-hero .meta .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(245,241,232,0.15);
    color: var(--bone);
}
.adm-hero .meta .chip.is-up { color: var(--orange); border-color: var(--orange); }
.adm-hero .meta .chip.is-down { color: var(--sand); }
.adm-hero .live {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--sand);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.adm-hero .live .pulse {
    width: 8px; height: 8px;
    background: var(--orange);
    border-radius: 50%;
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.4); }
}

.adm-supports {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--charcoal);
    background: var(--bone);
    margin-bottom: 24px;
}
.adm-support {
    padding: 24px;
    border-right: 1px solid var(--bone-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.adm-support:last-child { border-right: none; }
.adm-support .label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sand);
    display: flex;
    align-items: center;
    gap: 8px;
}
.adm-support .label i { font-size: 0.85rem; }
.adm-support .value {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--charcoal);
    margin: 4px 0 0;
}
.adm-support .value.is-small { font-size: 1.5rem; }
.adm-support .meta {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--sand);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* === Sidebar collapse on mobile === */
.adm-burger {
    display: none;
    background: var(--charcoal);
    color: var(--bone);
    border: none;
    width: 40px; height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .adm-shell { gap: 0; }
    .adm-sidebar { width: 220px; flex: 0 0 220px; }
    .adm-canvas { padding: 28px 24px 64px; }
    .adm-topbar { padding: 14px 20px; }
    .adm-hero .focal { font-size: 3.5rem; }
}
@media (max-width: 768px) {
    .adm-shell { display: block; }
    .adm-sidebar {
        position: fixed;
        top: 0; left: 0;
        width: 260px;
        flex: none;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform .25s ease;
        max-height: none;
        height: 100vh;
    }
    .adm-sidebar.is-open { transform: translateX(0); }
    .adm-main { width: 100%; }
    .adm-burger { display: inline-flex; }
    .adm-backdrop {
        display: none;
        position: fixed; inset: 0;
        background: rgba(26,26,26,0.5);
        z-index: 99;
    }
    .adm-backdrop.is-open { display: block; }
    .adm-hero { padding: 28px 24px; }
    .adm-hero .focal { font-size: 2.75rem; }
    .adm-hero .focal .decimal { font-size: 1.5rem; }
    .adm-supports { grid-template-columns: repeat(2, 1fr); }
    .adm-support { border-right: 1px solid var(--bone-2); }
    .adm-support:nth-child(2n) { border-right: none; }
    .adm-support:nth-child(1), .adm-support:nth-child(2) { border-bottom: 1px solid var(--bone-2); }
    .adm-topbar .crumb { font-size: 0.65rem; }
    .adm-topbar .user .meta { display: none; }
}

/* Stat accent variants */
.adm-support.is-orange .label i { color: var(--orange); }
.adm-support.is-forest .label i { color: var(--forest); }
.adm-support.is-sand .label i   { color: var(--sand); }

/* === Product form layout === */
.pf-wrap { max-width: 960px; }
.pf-card {
    background: var(--bone);
    border: 1px solid var(--charcoal);
    padding: 0;
}
.pf-section {
    padding: 32px 36px;
    border-bottom: 1px solid var(--bone-2);
}
.pf-section:last-child {
    border-bottom: none;
}
.pf-section-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 24px;
}
.pf-section-head .num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--orange);
    text-transform: uppercase;
}
.pf-section-head h5 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--charcoal);
}
.pf-section-head .rule {
    flex: 1;
    height: 1px;
    background: var(--bone-2);
}
.pf-help {
    display: block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--sand);
    letter-spacing: 0.05em;
}
.pf-required::after {
    content: " *";
    color: var(--orange);
    font-weight: 700;
}
.pf-thumb {
    margin-top: 12px;
    padding: 8px;
    border: 1px solid var(--bone-2);
    background: var(--bone);
    display: inline-block;
}
.pf-thumb img {
    display: block;
    max-height: 96px;
    width: auto;
}
.pf-thumb-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--sand);
    margin-top: 6px;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .pf-section { padding: 24px 20px; }
}

/* === Product gallery manager (admin) === */
.pf-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.pf-gallery-item {
    border: 1px solid var(--charcoal);
    background: var(--bone);
    overflow: hidden;
    transition: border-color .15s, opacity .15s;
    position: relative;
}
.pf-gallery-item.is-primary {
    border-color: var(--orange);
    border-width: 2px;
}
.pf-gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.pf-gallery-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-top: 1px solid var(--bone-2);
    background: var(--bone-2);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}
.pf-gallery-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--sand);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.pf-gallery-radio input { accent-color: var(--orange); margin: 0; }
.pf-gallery-radio span { font-size: 0.7rem; }
.pf-gallery-item.is-primary .pf-gallery-radio { color: var(--orange); font-weight: 700; }
.pf-gallery-del {
    background: transparent;
    border: 1px solid var(--sand);
    color: var(--sand);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    transition: background .15s, color .15s;
}
.pf-gallery-del:hover {
    background: var(--orange);
    color: var(--bone);
    border-color: var(--orange);
}
.pf-section-head kbd {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--bone-2);
    border: 1px solid var(--charcoal);
    border-radius: 0;
}

/* === Tables === */
.table {
    border: 1px solid var(--charcoal);
    background: var(--bone);
    margin-bottom: 0;
}
.table thead th {
    background: var(--charcoal);
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: none;
    padding: 14px 16px;
}
.table tbody td {
    border-color: var(--bone-2);
    padding: 16px;
    vertical-align: middle;
}
.table tbody tr:last-child td {
    border-bottom: none;
}

/* === Alerts === */
.alert {
    border-radius: 0;
    border: 1px solid var(--charcoal);
    background: var(--bone);
    color: var(--charcoal);
    padding: 16px 20px;
    font-family: var(--font-body);
}
.alert-success { background: var(--forest); color: var(--bone); border-color: var(--forest); }
.alert-danger  { background: var(--orange); color: var(--bone); border-color: var(--orange); }
.alert-warning { background: var(--bone-2); border-color: var(--charcoal); }
.alert-info    { background: var(--bone-2); border-color: var(--charcoal); }

/* === Badges === */
.badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 4px 10px;
    border-radius: 0;
    font-weight: 500;
    color: var(--bone);
}
.badge.bg-success,
.bg-success { background: var(--forest) !important; color: var(--bone) !important; }
.badge.bg-warning,
.bg-warning { background: var(--orange) !important; color: var(--bone) !important; }
.badge.bg-danger,
.bg-danger  { background: var(--orange) !important; color: var(--bone) !important; }
.badge.bg-secondary,
.bg-secondary { background: var(--sand) !important; color: var(--charcoal) !important; }
.badge.bg-info,
.bg-info { background: var(--charcoal) !important; color: var(--bone) !important; }
.badge.bg-primary,
.bg-primary { background: var(--charcoal) !important; color: var(--bone) !important; }

/* Override Bootstrap-ish btn utility classes agar konsisten dengan design system */
.btn.btn-primary,
.btn.btn-success {
    background: var(--orange) !important;
    color: var(--bone) !important;
    border-color: var(--orange) !important;
}
.btn.btn-primary:hover,
.btn.btn-success:hover {
    background: var(--orange-2) !important;
    border-color: var(--orange-2) !important;
}
.btn.btn-secondary {
    background: var(--sand) !important;
    color: var(--charcoal) !important;
    border-color: var(--sand) !important;
}
.btn.btn-outline-primary {
    background: transparent !important;
    color: var(--charcoal) !important;
    border-color: var(--charcoal) !important;
}
.btn.btn-outline-primary:hover {
    background: var(--charcoal) !important;
    color: var(--bone) !important;
}
.btn.btn-outline-danger {
    background: transparent !important;
    color: var(--orange) !important;
    border-color: var(--orange) !important;
}
.btn.btn-outline-danger:hover {
    background: var(--orange) !important;
    color: var(--bone) !important;
}
.btn.btn-outline-success {
    background: transparent !important;
    color: var(--forest) !important;
    border-color: var(--forest) !important;
}
.btn.btn-outline-success:hover {
    background: var(--forest) !important;
    color: var(--bone) !important;
}
.btn.btn-outline-warning {
    background: transparent !important;
    color: var(--orange) !important;
    border-color: var(--orange) !important;
}
.btn.btn-outline-warning:hover {
    background: var(--orange) !important;
    color: var(--bone) !important;
}
.btn.btn-outline-secondary {
    background: transparent !important;
    color: var(--charcoal) !important;
    border-color: var(--charcoal) !important;
}
.btn.btn-outline-secondary:hover {
    background: var(--charcoal) !important;
    color: var(--bone) !important;
}

/* === Page hero (inner) === */
.page-hero {
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--charcoal);
}
.page-hero h1 {
    margin-bottom: 16px;
}
.page-hero .lead {
    font-size: 1.125rem;
    color: var(--charcoal-2);
    max-width: 60ch;
}

/* === CTA Strip === */
.cta-strip {
    background: var(--charcoal);
    color: var(--bone);
    padding: 80px 0;
    text-align: center;
    border-top: 1px solid var(--charcoal);
    border-bottom: 1px solid var(--charcoal);
}
.cta-strip h2 {
    color: var(--bone);
    margin-bottom: 16px;
}
.cta-strip .lead {
    color: var(--sand);
    margin-bottom: 32px;
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
}

/* === Decorative star === */
.star {
    color: var(--orange);
    font-family: var(--font-mono);
}

/* === Main spacing === */
.main-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* === Responsive === */
@media (max-width: 992px) {
    .hero .container { grid-template-columns: 1fr; gap: 48px; }
    .hero-ticket { max-width: 480px; margin: 0 auto; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .products { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .cats { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: 1fr; }
    .stat { border-right: none; border-bottom: 1px solid var(--charcoal); }
    .stat:last-child { border-bottom: none; }
}
@media (max-width: 768px) {
    .navbar { padding: 14px 0; background: var(--bone); }
    .navbar .container {
        flex-wrap: nowrap;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .navbar-brand {
        flex: 1;
        font-size: 1.25rem;
        gap: 0.5em;
    }
    .navbar-brand .mark {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
    }
    .navbar-brand .navbar-logo-img { height: 56px; }
    .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 11px 13px;
        background: var(--bone);
        border: 1px solid var(--charcoal);
        flex-shrink: 0;
        margin-left: auto;
    }
    .navbar-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        order: 4;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--charcoal);
        background: var(--bone);
    }
    .navbar-nav.open { display: flex; }
    .navbar-nav li { width: 100%; border-top: 1px solid var(--bone-2); }
    .navbar-nav li:first-child { border-top: none; }
    .navbar-nav a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 4px;
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: -0.01em;
    }
    .navbar-nav a::after {
        content: "→";
        font-family: var(--font-mono);
        font-size: 0.9rem;
        color: var(--sand);
        transition: transform .2s;
    }
    .navbar-nav a:hover::after,
    .navbar-nav a.active::after {
        color: var(--orange);
        transform: translateX(4px);
    }
}
@media (max-width: 640px) {
    .top-bar .container { font-size: 0.7rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .hero { padding: 48px 0; }
    .product { padding: 0; }
    .product .p-body { padding: 14px 14px 16px; gap: 8px; }
    .product .p-cat { font-size: 0.6rem; gap: 6px; }
    .product .p-cat .sku { display: none; }
    .product .p-name { font-size: 1rem; line-height: 1.2; }
    .product .p-desc { font-size: 0.78rem; min-height: 0; -webkit-line-clamp: 2; }
    .product .p-footer { padding-top: 12px; gap: 8px; }
    .product .p-price .label { font-size: 0.6rem; }
    .product .p-price .amount { font-size: 1rem; }
    .product .p-link { font-size: 0.65rem; padding-bottom: 1px; }
    .product .p-image .p-actions { display: none; }
    .product .p-image .p-tag { padding: 3px 8px; font-size: 0.6rem; }
    .section { padding: 48px 0; }
    .hero-ticket { padding: 24px; }
    .hero-ticket .stamp { width: 100px; height: 100px; font-size: 1.25rem; }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Pause slow stamp rotation on small viewports to avoid feeling dizzy
   dan supaya teks ring tidak terlihat "memutar cepat" karena container kecil */
@media (max-width: 640px) {
    .hero-ticket .stamp::after {
        animation-duration: 60s; /* sangat lambat di mobile */
        animation-play-state: paused; /* hentikan total, hemat CPU */
    }
    .hero-ticket:hover .stamp::after {
        animation-play-state: running; /* jalan lagi saat hover (opsional) */
    }
}