/* ==========================================================================
   KrisanToraja — Tema "Catalog Commerce + WhatsApp Checkout"
   Palet: putih · hijau daun · hijau sage · krem · emas muda
   ========================================================================== */

:root {
  /* Tema Toraja Heritage (Maroon, Amber, Charcoal, Pearl) */
  --kt-green: #991b1b;        /* Primary: Maroon (digunakan di class green) */
  --kt-green-dark: #7f1d1d;
  --kt-green-light: #b91c1c;
  --kt-sage: #d97706;         /* Secondary: Amber */
  --kt-sage-light: #fef3c7;
  --kt-cream: #f9fafb;        /* Background: Off-white */
  --kt-cream-dark: #f3f4f6;
  --kt-gold: #f59e0b;         /* Accent: Krisan Gold */
  --kt-gold-light: #fbbf24;
  --kt-ink: #1f2937;          /* Text: Charcoal Black */
  --kt-muted: #6b7280;
  --kt-border: #e5e7eb;

  --bs-body-font-family: "Jost", system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--kt-ink);
  --bs-body-bg: #ffffff;
  --bs-primary: var(--kt-green);
  --bs-primary-rgb: 153, 27, 27; /* #991b1b */
  --bs-link-color: var(--kt-green);
  --bs-link-hover-color: var(--kt-green-dark);
  --bs-border-radius: 0.6rem;
}

/* ---------- Typografi ---------- */
body { font-family: var(--bs-body-font-family); color: var(--kt-ink); -webkit-font-smoothing: antialiased; }

.font-display { font-family: "Playfair Display", Georgia, serif; }

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Playfair Display", Georgia, serif; }

.text-gold { color: var(--kt-gold) !important; }
.text-green { color: var(--kt-green) !important; }
.text-muted-kt { color: var(--kt-muted) !important; }
.text-ink { color: var(--kt-ink) !important; }

/* ---------- Komponen ---------- */
.btn { border-radius: 999px; padding: .6rem 1.4rem; font-weight: 500; letter-spacing: .02em; }
.btn-primary { background: var(--kt-green); border-color: var(--kt-green); }
.btn-primary:hover, .btn-primary:focus { background: var(--kt-green-dark); border-color: var(--kt-green-dark); }
.btn-outline-primary { border-color: var(--kt-green); color: var(--kt-green); }
.btn-outline-primary:hover { background: var(--kt-green); border-color: var(--kt-green); color: #fff; }
.btn-gold { background: var(--kt-gold); border-color: var(--kt-gold); color: #fff; }
.btn-gold:hover { background: #b08f1f; border-color: #b08f1f; color: #fff; }
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1fb958; border-color: #1fb958; color: #fff; }
.btn-soft-green { background: var(--kt-sage-light); color: var(--kt-green-dark); border: 1px solid var(--kt-sage); }
.btn-soft-green:hover { background: var(--kt-sage); color: #fff; }

.badge-kt { border-radius: 999px; font-weight: 500; padding: .45em .9em; }
.badge-discount { background: var(--kt-gold); color: #fff; }
.badge-new { background: var(--kt-sage); color: #fff; }
.badge-soldout { background: #6c757d; color: #fff; }

.card { border: 1px solid var(--kt-border); border-radius: 1rem; box-shadow: 0 2px 12px rgba(43,43,40,.05); }

.section-title small { color: var(--kt-gold); text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }
.section-title h2 { font-weight: 700; }

/* ---------- Pengumuman (top bar) ---------- */
.announcement-bar {
  background: linear-gradient(90deg, #991b1b 0%, #b91c1c 60%, #f59e0b 160%);
  color: #fff;
  font-size: .9rem;
  padding: .55rem 0;
  position: relative;
  z-index: 1031;
}
.announcement-bar .announcement-text { font-weight: 500; padding-right: 2.2rem; }
.announcement-bar .announcement-icon { font-size: 1rem; }
.announcement-bar .announcement-close {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.85);
  font-size: .85rem;
  padding: .25rem .5rem;
}
.announcement-bar .announcement-close:hover { color: #fff; }

/* ---------- Navbar ---------- */
.navbar-kt {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229,231,235,.8);
  box-shadow: 0 2px 20px rgba(31,41,55,.06);
  padding-block: .7rem;
  transition: box-shadow .3s ease;
}
.navbar-kt .navbar-brand {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: 1.55rem;
  color: var(--kt-green);
  letter-spacing: -.01em;
  transition: opacity .2s ease;
}
.navbar-kt .navbar-brand:hover { opacity: .85; }
.navbar-kt .navbar-brand i { font-size: 1.2rem; vertical-align: -.05em; }
.navbar-kt .navbar-brand span { color: var(--kt-gold); }

/* Nav links — lebih besar dan elegan */
.navbar-kt .nav-link {
  color: var(--kt-ink);
  font-weight: 500;
  font-size: 1rem;
  padding-inline: 1rem;
  padding-block: .55rem;
  position: relative;
  transition: color .2s ease;
  letter-spacing: .01em;
}

/* Animasi underline slide-in */
.navbar-kt .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--kt-green);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.navbar-kt .nav-link:hover { color: var(--kt-green); }
.navbar-kt .nav-link:hover::after { transform: scaleX(1); }
.navbar-kt .nav-link.active { color: var(--kt-green); font-weight: 600; }
.navbar-kt .nav-link.active::after { transform: scaleX(1); }

/* Dropdown lebih bersih */
.navbar-kt .dropdown-menu {
  border: 1px solid var(--kt-border);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(31,41,55,.1);
  padding: .5rem;
  min-width: 200px;
  animation: fadeUp .2s ease;
}
.navbar-kt .dropdown-item {
  border-radius: .6rem;
  padding: .6rem 1rem;
  font-size: .95rem;
  color: var(--kt-ink);
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.navbar-kt .dropdown-item:hover { background: var(--kt-cream); color: var(--kt-green); }

.cart-badge { position: absolute; top: -4px; right: -6px; background: var(--kt-gold); color: #fff; font-size: .62rem; border-radius: 999px; padding: .15em .5em; font-weight: 700; }


/* ---------- Hero ---------- */
.hero { position: relative; min-height: 78vh; display: flex; align-items: center; background-size: cover; background-position: center; color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,41,55,.82) 0%, rgba(31,41,55,.45) 55%, rgba(31,41,55,.05) 100%); }
.hero .hero-content { position: relative; z-index: 2; max-width: 620px; padding-block: 5rem; }
.hero .hero-eyebrow { letter-spacing: .25em; text-transform: uppercase; color: var(--kt-gold-light); font-weight: 600; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700; }
.hero p { color: rgba(255,255,255,.92); font-size: 1.08rem; }

/* ---------- Kartu produk ---------- */
.product-card { overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(43,43,40,.12); }
.product-card .card-img-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--kt-cream); }
.product-card .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .card-img-wrap img { transform: scale(1.05); }
.product-card .badge-wrap { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: .4rem; flex-wrap: wrap; }
.product-card .wishlist-btn { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--kt-green); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.product-card .wishlist-btn.active { color: #e0245e; }
.product-card .card-body { padding: 1.1rem 1.2rem; }
.product-card .card-cat { font-size: .78rem; color: var(--kt-muted); text-transform: uppercase; letter-spacing: .08em; }
.product-card .card-title { font-size: 1.02rem; font-weight: 600; margin-bottom: .3rem; }
.product-card .card-title a { color: var(--kt-ink); text-decoration: none; }
.product-card .card-title a:hover { color: var(--kt-green); }

.price { color: var(--kt-green-dark); font-weight: 700; font-size: 1.1rem; }
.price-old { color: #9aa093; text-decoration: line-through; font-size: .85rem; }

/* ---------- Kategori ---------- */
.category-card { display: block; position: relative; border-radius: 1.1rem; overflow: hidden; text-decoration: none; aspect-ratio: 4/5; }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.category-card:hover img { transform: scale(1.06); }
.category-card .cat-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,41,55,0) 30%, rgba(31,41,55,.85) 100%); display: flex; align-items: flex-end; padding: 1.1rem; }
.category-card .cat-name { color: #fff; font-family: "Playfair Display", serif; font-weight: 600; font-size: 1.1rem; }
.category-card .cat-count { color: var(--kt-gold-light); font-size: .8rem; }

/* ---------- Fitur & Langkah ---------- */
.feature-icon { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; color: var(--kt-green); background: #fef2f2; box-shadow: inset 0 0 0 1px rgba(153, 27, 27, 0.08); transition: all 0.3s ease; flex-shrink: 0; }
.location-card .feature-icon { width: 46px !important; height: 46px !important; border-radius: 12px; font-size: 1.25rem !important; }
.step-number-wrapper { position: relative; z-index: 2; display: inline-block; margin-bottom: 1.5rem; }
.step-number-aesthetic { width: 72px; height: 72px; border-radius: 50%; background: #ffffff; color: var(--kt-gold); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; font-family: "Playfair Display", serif; position: relative; box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15); border: 4px solid var(--kt-sage-light); z-index: 2; transition: transform 0.3s ease; }
.step-col:hover .step-number-aesthetic { transform: scale(1.08); background: var(--kt-gold); color: #fff; border-color: var(--kt-gold-light); }
.step-number-aesthetic span { position: relative; z-index: 2; }
@media (min-width: 992px) {
  .step-col:not(:last-child) .step-number-wrapper::after { content: ""; position: absolute; top: 50%; left: calc(50% + 36px); width: calc(100% - 36px); height: 2px; background-image: linear-gradient(to right, var(--kt-gold) 50%, transparent 50%); background-size: 14px 100%; background-repeat: repeat-x; z-index: 0; opacity: 0.35; transform: translateY(-50%); }
}

/* Premium Feature Cards */
.feature-card-premium { position: relative; background: #ffffff; border-radius: 24px; padding: 2.5rem 2rem; box-shadow: 0 10px 40px rgba(0,0,0,0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--kt-border); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.feature-card-premium:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.feature-card-premium::before { content: ""; position: absolute; top: 0; left: 2rem; width: 48px; height: 4px; background: var(--kt-gold); border-radius: 0 0 4px 4px; }
.feature-card-premium .bg-number { position: absolute; top: -10px; right: 15px; font-size: 6rem; font-weight: 800; font-family: var(--bs-body-font-family); color: rgba(0,0,0,0.04); line-height: 1; z-index: 1; pointer-events: none; letter-spacing: -2px; }
.feature-card-premium .sm-number { color: var(--kt-green); font-weight: 700; font-size: 1rem; margin-bottom: 0.8rem; display: block; }
.feature-card-premium .fc-content { position: relative; z-index: 2; flex-grow: 1; display: flex; flex-direction: column; }
.feature-card-premium h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.8rem; color: var(--kt-ink); font-family: "Playfair Display", Georgia, serif; }
.feature-card-premium p { color: var(--kt-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; }
.feature-card-premium .learn-more { margin-top: auto; font-weight: 600; font-size: 0.95rem; color: var(--kt-ink); text-decoration: none; display: inline-flex; align-items: center; transition: color 0.2s ease; }
.feature-card-premium .learn-more i { transition: transform 0.2s ease; }
.feature-card-premium .learn-more:hover { color: var(--kt-green); }
.feature-card-premium .learn-more:hover i { transform: translateX(5px); }

.bg-cream { background: var(--kt-cream); }
.bg-sage-light { background: var(--kt-sage-light); }

/* ---------- Testimoni ---------- */
.testimonial-card { background: #fff; border: 1px solid var(--kt-border); border-radius: 1rem; padding: 1.6rem; height: 100%; }
.stars { color: var(--kt-gold); }
.avatar-circle { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--kt-sage); color: #fff; font-weight: 700; }
.testimonial-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kt-gold-light); }

/* ---------- Status ketersediaan ---------- */
.badge-availability { border-radius: 999px; font-weight: 600; font-size: .72rem; letter-spacing: .02em; }
.status-available { background: #dcfce7; color: #15803d; }
.status-low { background: #fff4d6; color: #9a6b00; }
.status-out { background: #fee2e2; color: #b91c1c; }
.status-preorder { background: #e0e7ff; color: #3730a3; }

/* ---------- Galeri hasil dekorasi ---------- */
.gallery-card { border: 0; border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 12px rgba(43,43,40,.06); transition: transform .25s ease, box-shadow .25s ease; }
.gallery-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(43,43,40,.12); }
.gallery-card .gallery-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--kt-cream); cursor: pointer; }
.gallery-card .gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-card:hover .gallery-img-wrap img { transform: scale(1.05); }
.gallery-card .gallery-cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--kt-green-dark); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: .3em .85em; }
.gallery-lightbox { cursor: zoom-in; }

/* ---------- Footer ---------- */
.footer-kt { background: #111827; color: rgba(255,255,255,.82); }
.footer-kt h6 { color: #fff; font-weight: 600; letter-spacing: .06em; }
.footer-kt a { color: rgba(255,255,255,.75); text-decoration: none; }
.footer-kt a:hover { color: var(--kt-gold-light); }
.footer-kt .footer-brand { font-family: "Playfair Display", serif; font-weight: 700; color: #fff; }
.footer-kt .footer-brand span { color: var(--kt-gold-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; }

/* ---------- Tombol WhatsApp mengambang ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 1030; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.7rem; box-shadow: 0 6px 18px rgba(37,211,102,.45); transition: transform .2s ease; }
.wa-float:hover { transform: scale(1.08); color: #fff; }

/* ---------- Galeri produk ---------- */
.gallery-main { aspect-ratio: 1/1; border-radius: 1.1rem; overflow: hidden; background: var(--kt-cream); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.gallery-thumbs .thumb { width: 74px; height: 74px; border-radius: .8rem; overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: .8; padding: 0; }
.gallery-thumbs .thumb.active { border-color: var(--kt-green); opacity: 1; }
.gallery-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Keranjang ---------- */
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--kt-border); border-radius: 999px; overflow: hidden; }
.cart-qty button { border: 0; background: transparent; width: 34px; height: 34px; color: var(--kt-green); font-weight: 700; }
.cart-qty input { width: 48px; text-align: center; border: 0; outline: 0; font-weight: 600; background: transparent; }

.order-summary { background: var(--kt-cream); border-radius: 1rem; padding: 1.4rem; position: sticky; top: 96px; }
.order-summary .total-line { border-top: 1px dashed #cfc9b8; padding-top: .8rem; }

/* ---------- Halaman sukses ---------- */
.success-check { width: 84px; height: 84px; border-radius: 50%; background: var(--kt-green); color: #fff; display: grid; place-items: center; font-size: 2.4rem; margin-inline: auto; }

/* ---------- Form ---------- */
.form-control, .form-select { border-radius: .65rem; border-color: var(--kt-border); padding-block: .6rem; }
.form-control:focus, .form-select:focus { border-color: var(--kt-sage); box-shadow: 0 0 0 .2rem rgba(156,175,136,.25); }
.form-label { font-weight: 500; font-size: .92rem; }
.payment-option { border: 2px solid var(--kt-border); border-radius: .9rem; padding: 1rem 1.1rem; cursor: pointer; transition: all .15s ease; }
.payment-option.active { border-color: var(--kt-green); background: var(--kt-cream); }

/* ---------- Breadcrumb ---------- */
.breadcrumb-kt { background: var(--kt-cream); border-radius: .8rem; padding: .7rem 1.1rem; font-size: .9rem; }
.breadcrumb-kt a { color: var(--kt-green); text-decoration: none; }

/* ---------- Page header ---------- */
.page-header { background: var(--kt-cream); padding-block: 3rem; border-bottom: 1px solid var(--kt-border); }
.page-header h1 { font-weight: 700; }

/* ---------- Pagination ---------- */
.pagination { --bs-pagination-color: var(--kt-green); --bs-pagination-active-bg: var(--kt-green); --bs-pagination-active-border-color: var(--kt-green); --bs-pagination-hover-color: var(--kt-green-dark); }

/* ---------- Flash ---------- */
.alert { border-radius: .8rem; }

/* ---------- Animasi ringan ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .6s ease both; }
.fade-up-1 { animation-delay: .08s; }
.fade-up-2 { animation-delay: .16s; }
.fade-up-3 { animation-delay: .24s; }
.fade-up-4 { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-up-1, .fade-up-2, .fade-up-3, .fade-up-4 { animation: none; }
  .product-card, .product-card .card-img-wrap img, .category-card img { transition: none; }
}

/* ---------- Responsif ---------- */
@media (max-width: 991.98px) {
  .navbar-kt .navbar-collapse { background: #fff; border: 1px solid var(--kt-border); border-radius: 1rem; padding: 1rem; margin-top: .6rem; }
  .hero { min-height: 60vh; }
}
@media (max-width: 575.98px) {
  .hero { min-height: 54vh; }
  .product-card .card-body { padding: .9rem; }
}