/* ============================================
   BK PACKAGING — Premium Dark Gold Theme
   Paste ke: Appearance → Customize → Additional CSS
   ============================================ */

/* ── IMPORT FONT ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

/* ── ROOT TOKENS ── */
:root {
  --bk-ink:        #0e0c0a;
  --bk-charcoal:   #1c1a17;
  --bk-gold:       #c49a3c;
  --bk-gold-dim:   #8a6a24;
  --bk-gold-light: #e8d5a3;
  --bk-cream:      #f5f0e8;
  --bk-muted:      #7a7468;
  --bk-line:       rgba(196,154,60,0.2);
  --ff-display:    'Cormorant Garamond', serif;
  --ff-body:       'Inter', sans-serif;
}

/* ── GLOBAL RESET ── */
body {
  background: var(--bk-ink) !important;
  color: var(--bk-cream) !important;
  font-family: var(--ff-body) !important;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ── HEADER / NAVBAR ── */
.ast-primary-header-bar,
#ast-fixed-header,
.site-header,
.ast-above-header-bar,
.ast-below-header-bar,
#masthead {
  background: rgba(14,12,10,0.95) !important;
  border-bottom: 0.5px solid var(--bk-line) !important;
  backdrop-filter: blur(12px);
}

/* Logo */
.site-title a,
.ast-site-identity .site-title a {
  font-family: var(--ff-display) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--bk-gold) !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
}

/* Nav links */
.main-navigation a,
.ast-header-menu-item a,
.ast-nav-menu > li > a,
#ast-fixed-header .ast-nav-menu > li > a {
  font-family: var(--ff-body) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--bk-muted) !important;
  transition: color 0.2s !important;
}
.main-navigation a:hover,
.ast-nav-menu > li > a:hover {
  color: var(--bk-gold) !important;
}

/* ── HEADINGS ── */
h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-hero-text-widget h1 {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  color: var(--bk-cream) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em !important;
}
h1 { font-size: clamp(42px, 6vw, 80px) !important; }
h2 { font-size: clamp(28px, 4vw, 52px) !important; }
h3 { font-size: 24px !important; }

/* Italic emas untuk heading highlight */
h1 em, h2 em, h3 em {
  color: var(--bk-gold) !important;
  font-style: italic !important;
}

/* ── PARAGRAF & BODY TEXT ── */
p, li, span, td, th {
  font-family: var(--ff-body) !important;
  font-weight: 300 !important;
  color: var(--bk-cream) !important;
}
.ast-container p,
.entry-content p {
  color: var(--bk-muted) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

/* ── SECTIONS & CONTAINERS ── */
.ast-container,
.entry-content,
.site-content,
#content {
  background: transparent !important;
}

.ast-row,
section,
.elementor-section {
  background: transparent !important;
}

/* Section dengan background charcoal */
.alt-section,
.bg-dark-section,
[class*="dark-bg"] {
  background: var(--bk-charcoal) !important;
}

/* ── TOMBOL / BUTTONS ── */
.ast-button,
.button,
input[type="submit"],
.wp-block-button__link,
.elementor-button,
a.ast-button {
  background: var(--bk-gold) !important;
  color: var(--bk-ink) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--ff-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  transition: opacity 0.2s !important;
  text-decoration: none !important;
}
.ast-button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.elementor-button:hover {
  opacity: 0.85 !important;
  color: var(--bk-ink) !important;
}

/* Outline button variant */
.btn-outline,
.button.outline,
.ast-outline-button {
  background: transparent !important;
  color: var(--bk-cream) !important;
  border: 0.5px solid rgba(245,240,232,0.3) !important;
}
.btn-outline:hover {
  border-color: var(--bk-cream) !important;
}

/* ── CARDS / PRODUK ── */
.woocommerce ul.products li.product,
.ast-card,
.elementor-widget-container .elementor-image-box-wrapper,
article.post,
.ast-post-card {
  background: var(--bk-charcoal) !important;
  border: 0.5px solid var(--bk-line) !important;
  border-radius: 0 !important;
  transition: background 0.2s !important;
}
.woocommerce ul.products li.product:hover,
.ast-card:hover {
  background: rgba(196,154,60,0.06) !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title {
  font-family: var(--ff-display) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--bk-cream) !important;
}

/* Product price */
.woocommerce ul.products li.product .price,
.woocommerce .price {
  color: var(--bk-gold) !important;
  font-family: var(--ff-display) !important;
  font-size: 18px !important;
}

/* ── DIVIDER / HR ── */
hr, .ast-divider {
  border-color: var(--bk-line) !important;
  border-width: 0.5px !important;
}

/* ── GOLD EYEBROW LABEL ── */
.eyebrow,
.ast-label,
.section-label,
.wp-block-group .eyebrow,
.elementor-heading-title.eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--bk-gold) !important;
  font-family: var(--ff-body) !important;
  font-weight: 400 !important;
}

/* ── INPUT & FORM ── */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: var(--bk-charcoal) !important;
  border: 0.5px solid var(--bk-line) !important;
  border-radius: 0 !important;
  color: var(--bk-cream) !important;
  font-family: var(--ff-body) !important;
  padding: 12px 16px !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--bk-muted) !important;
}
input:focus,
textarea:focus {
  border-color: var(--bk-gold) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── FOOTER ── */
.site-footer,
.ast-footer-area,
#colophon,
.footer-widget-area,
.ast-above-footer,
.ast-below-footer {
  background: var(--bk-charcoal) !important;
  border-top: 0.5px solid var(--bk-line) !important;
  color: var(--bk-muted) !important;
}
.site-footer a,
.ast-footer-area a,
#colophon a {
  color: var(--bk-muted) !important;
  font-family: var(--ff-body) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.site-footer a:hover,
#colophon a:hover {
  color: var(--bk-gold) !important;
}
.ast-footer-copyright {
  color: var(--bk-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  border-top: 0.5px solid var(--bk-line) !important;
}

/* ── WOOCOMMERCE ── */
.woocommerce-page #content,
.woocommerce-page .site-content {
  background: var(--bk-ink) !important;
}
.woocommerce .star-rating span,
.woocommerce .star-rating::before {
  color: var(--bk-gold) !important;
}
.woocommerce a.added_to_cart,
.woocommerce .button.product_type_simple {
  background: transparent !important;
  color: var(--bk-gold) !important;
  border: 0.5px solid var(--bk-gold) !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
.woocommerce a.added_to_cart:hover,
.woocommerce .button.product_type_simple:hover {
  background: var(--bk-gold) !important;
  color: var(--bk-ink) !important;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bk-ink); }
::-webkit-scrollbar-thumb {
  background: var(--bk-gold-dim);
  border-radius: 0;
}

/* ── ELEMENTOR SPECIFIC ── */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ff-display) !important;
  color: var(--bk-cream) !important;
}
.elementor-section.elementor-section-boxed > .elementor-container {
  background: transparent !important;
}
.elementor-column-wrap,
.elementor-widget-wrap {
  background: transparent !important;
}

/* ── SELECTION HIGHLIGHT ── */
::selection {
  background: var(--bk-gold);
  color: var(--bk-ink);
}

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 28px !important; }

  .ast-primary-header-bar,
  #masthead {
    padding: 0 1.2rem !important;
  }

  .ast-mobile-header-stack,
  .ast-mobile-header-logo {
    color: var(--bk-gold) !important;
  }

  .ast-header-break-point .main-header-bar {
    background: rgba(14,12,10,0.97) !important;
  }

  .ast-mobile-menu-trigger-fill,
  .ast-mobile-menu-trigger span {
    background: var(--bk-gold) !important;
  }
}