/* ============================================================
   Kedai Emas Naufal - kedaiemasnaufal.com
   White / Black / Gold identity layered over Bootstrap 5.
   Fonts: Marcellus (display) + Figtree (body) via Google Fonts.
   ============================================================ */

:root {
  --ken-ivory: #fdfbf6;
  --ken-black: #141210;
  --ken-ink: #2b2820;
  --ken-gold: #c9a227;
  --ken-gold-deep: #8a6a1f;
  --ken-gold-light: #e8c86a;
  --ken-stone: #6b655c;
  --ken-line: rgba(201, 162, 39, .35);
  --ken-display: "Marcellus", Georgia, serif;
  --ken-body: "Figtree", "Segoe UI", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ken-ivory);
  color: var(--ken-ink);
  font-family: var(--ken-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .ken-display { font-family: var(--ken-display); letter-spacing: .01em; }

img { max-width: 100%; height: auto; }

.ken-gold-text {
  background: linear-gradient(100deg, var(--ken-gold-deep), var(--ken-gold-light) 55%, var(--ken-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Price ticker (signature element) ---------- */
.ken-ticker {
  background: var(--ken-black);
  color: var(--ken-gold-light);
  font-size: .85rem;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--ken-line);
}
.ken-ticker__track {
  display: inline-block;
  padding-block: .45rem;
  animation: ken-marquee 28s linear infinite;
}
.ken-ticker__item { margin-inline: 1.6rem; }
.ken-ticker__item strong { color: #fff; font-variant-numeric: tabular-nums; }
@keyframes ken-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ken-ticker__track { animation: none; }
  .ken-ticker { white-space: normal; }
}

/* ---------- Navbar ---------- */
.ken-nav { background: var(--ken-ivory); border-bottom: 1px solid var(--ken-line); }
.ken-nav .navbar-brand { font-family: var(--ken-display); font-size: 1.35rem; color: var(--ken-black); }
.ken-nav .nav-link { color: var(--ken-ink); font-size: .95rem; }
.ken-nav .nav-link:hover, .ken-nav .nav-link:focus { color: var(--ken-gold-deep); }
.ken-nav .nav-link.active { color: var(--ken-gold-deep); font-weight: 600; }

/* ---------- Hero ---------- */
.ken-hero {
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(201, 162, 39, .16), transparent 60%),
    linear-gradient(180deg, #fffdf8, var(--ken-ivory));
  border-bottom: 1px solid var(--ken-line);
  /* Fit inside the first screen: viewport minus ticker (~34px) + navbar (~62px) */
  min-height: calc(100svh - 96px);
  max-height: calc(100svh - 96px);
  display: flex;
  align-items: center;
  padding-block: 1.5rem;
  overflow: hidden;
}
.ken-hero h1 { font-size: clamp(1.6rem, 3.6vw, 2.9rem); color: var(--ken-black); }
.ken-hero .lead { color: var(--ken-stone); max-width: 34rem; font-size: clamp(.95rem, 1.4vw, 1.15rem); }

.ken-eyebrow {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ken-gold-deep);
}

/* Hero price card - values filled by AJAX every load */
.ken-price-card {
  background: var(--ken-black);
  color: #f5ecd7;
  border: 1px solid var(--ken-line);
  border-radius: .75rem;
  box-shadow: 0 20px 45px rgba(20, 18, 16, .18);
}
.ken-price-card__date { color: var(--ken-gold-light); font-size: .85rem; letter-spacing: .08em; }
.ken-price-card table { color: inherit; margin: 0; }
.ken-price-card td, .ken-price-card th {
  background: transparent;
  color: inherit;
  border-color: rgba(255, 255, 255, .08);
  font-variant-numeric: tabular-nums;
}
.ken-price-card .ken-buy { color: var(--ken-gold-light); }

/* Hero slider - image is cropped to a wide frame that always fits on screen */
.ken-hero-slider .carousel-item img {
  border-radius: .75rem;
  width: 100%;
  height: clamp(240px, 62svh, 520px);
  object-fit: cover;
  object-position: center;
}
.ken-hero-slider .carousel-caption {
  background: rgba(20, 18, 16, .72);
  border: 1px solid var(--ken-line);
  border-radius: .5rem;
  padding: .6rem 1rem;
}

/* ---------- Sections ---------- */
.ken-section { padding-block: 4.5rem; }
.ken-section--dark { background: var(--ken-black); color: #f5ecd7; }
.ken-section--dark h2 { color: #fff; }
.ken-section h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.ken-rule {
  width: 64px; height: 2px; border: 0;
  background: linear-gradient(90deg, var(--ken-gold-deep), var(--ken-gold-light));
  opacity: 1; margin: .9rem 0 1.4rem;
}

/* ---------- Product cards ---------- */
.ken-product { border: 1px solid var(--ken-line); border-radius: .75rem; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.ken-product:hover { box-shadow: 0 16px 34px rgba(20, 18, 16, .12); transform: translateY(-3px); }
.ken-product img { border-radius: .75rem .75rem 0 0; aspect-ratio: 1 / 1; object-fit: cover; }
.ken-product .card-title { font-family: var(--ken-display); font-size: 1.05rem; }
.ken-product .ken-meta { color: var(--ken-stone); font-size: .82rem; }
.ken-product .ken-price { color: var(--ken-gold-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.ken-thumbs img { width: 44px; height: 44px; object-fit: cover; border-radius: .35rem; border: 1px solid var(--ken-line); }

/* ---------- Buttons ---------- */
.btn-ken {
  background: linear-gradient(100deg, var(--ken-gold-deep), var(--ken-gold) 60%, var(--ken-gold-light));
  color: var(--ken-black);
  border: 0; font-weight: 600;
}
.btn-ken:hover, .btn-ken:focus { filter: brightness(1.07); color: var(--ken-black); }
.btn-outline-ken { border: 1px solid var(--ken-gold-deep); color: var(--ken-gold-deep); }
.btn-outline-ken:hover { background: var(--ken-gold-deep); color: #fff; }

/* ---------- Popup modal ---------- */
.ken-popup .modal-content { background: var(--ken-black); border: 1px solid var(--ken-line); border-radius: .75rem; }
.ken-popup .btn-close { filter: invert(1); opacity: .9; }
.ken-popup__badge {
  position: absolute; top: .9rem; left: .9rem; z-index: 5;
  background: rgba(20, 18, 16, .85);
  border: 1px solid var(--ken-line);
  color: var(--ken-gold-light);
  font-size: .78rem; letter-spacing: .06em;
  padding: .3rem .7rem; border-radius: 2rem;
}
.ken-popup__price {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  background: linear-gradient(0deg, rgba(20, 18, 16, .92), rgba(20, 18, 16, 0));
  color: #fff; text-align: center; padding: 1.4rem 1rem .9rem;
}
.ken-popup__price strong { color: var(--ken-gold-light); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.ken-popup .carousel-item img {
  border-radius: .75rem .75rem 0 0;
  width: 100%;
  max-height: 66svh;          /* poster always fully visible with close button on screen */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.ken-popup .modal-dialog { max-width: min(440px, 92vw); }

/* ---------- Footer ---------- */
.ken-footer { background: var(--ken-black); color: #cfc8ba; font-size: .9rem; }
.ken-footer a { color: var(--ken-gold-light); text-decoration: none; }
.ken-footer a:hover { text-decoration: underline; }

/* ---------- Keep every section inside the visible frame ---------- */
@media (max-width: 991.98px) {
  .ken-hero {
    min-height: 0;
    max-height: none;          /* on mobile the hero stacks: text first, slider below */
    padding-block: 2rem;
  }
  .ken-hero-slider .carousel-item img { height: clamp(200px, 42svh, 360px); }
  .ken-section { padding-block: 3rem; }
}
@media (max-width: 575.98px) {
  .ken-hero .btn-lg { padding: .5rem 1rem; font-size: 1rem; }
  .ken-section { padding-block: 2.25rem; }
  .ken-popup .carousel-item img { max-height: 58svh; }
}
/* Very short screens (small laptops, landscape phones) */
@media (max-height: 640px) {
  .ken-hero { min-height: 0; max-height: none; }
  .ken-hero-slider .carousel-item img { height: clamp(180px, 48svh, 320px); }
}

/* ---------- Subsection headings & new blocks ---------- */
.ken-h3 {
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--ken-gold-deep);
  text-transform: uppercase;
  border-left: 3px solid var(--ken-gold);
  padding-left: .7rem;
  margin-bottom: 1rem;
}
.ken-section--dark .ken-h3 { color: var(--ken-gold-light); }

.ken-card-title { font-family: var(--ken-display); font-size: 1.02rem; color: var(--ken-black); }

.ken-note { color: var(--ken-gold-light); font-size: .85rem; }

.ken-bar__img { width: 84px; height: 84px; object-fit: cover; border-radius: .5rem; border: 1px solid var(--ken-line); }

.ken-tile {
  border: 1px solid var(--ken-line);
  border-radius: .6rem;
  padding: 1.25rem;
  background: #fff;
}
.ken-section--dark .ken-tile { background: rgba(255, 255, 255, .04); }
.ken-tile__title {
  font-family: var(--ken-display);
  font-size: 1.1rem;
  color: var(--ken-gold-deep);
  margin-bottom: .4rem;
}
.ken-section--dark .ken-tile__title, .ken-section--sell .ken-tile__title { color: var(--ken-gold-light); }

.ken-badge {
  border: 1px solid var(--ken-gold-deep);
  border-radius: 2rem;
  color: var(--ken-gold-deep);
  text-align: center;
  padding: .65rem .9rem;
  font-size: .88rem;
  letter-spacing: .03em;
}

.ken-quote {
  border: 1px solid var(--ken-line);
  border-radius: .6rem;
  padding: 1.25rem;
  margin: 0;
  background: #fff;
}
.ken-section--dark .ken-quote { background: rgba(255, 255, 255, .04); }
.ken-section--dark .ken-badge { color: var(--ken-gold-light); }
.ken-quote blockquote { font-family: var(--ken-display); font-size: 1rem; margin-bottom: .6rem; }
.ken-quote figcaption { color: var(--ken-gold-deep); font-size: .85rem; }
.ken-section--dark .ken-quote figcaption { color: var(--ken-gold-light); }

.ken-hours td { background: transparent; }

.ken-wa {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1040;
  background: #1fae54;
  color: #fff;
  font-weight: 600;
  padding: .6rem 1.1rem;
  border-radius: 2rem;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.ken-wa:hover, .ken-wa:focus { background: #178f45; color: #fff; }

/* ---------- About section ---------- */
.ken-section--about {
  background: linear-gradient(180deg, #f8f4ea, var(--ken-ivory));
  border-top: 1px solid var(--ken-line);
  border-bottom: 1px solid var(--ken-line);
}
.ken-shop-photo {
  border: 1px solid var(--ken-line);
  border-radius: .75rem;
  padding: .5rem;
  background: #fff;
  box-shadow: 0 18px 40px rgba(20, 18, 16, .12);
}
.ken-shop-photo img { border-radius: .5rem; width: 100%; object-fit: cover; }
.ken-about-list li {
  border: 1px solid var(--ken-gold-deep);
  color: var(--ken-gold-deep);
  border-radius: 2rem;
  padding: .4rem .9rem;
  font-size: .85rem;
  letter-spacing: .02em;
}

/* ---------- Rating badge & contact details ---------- */
.ken-rating {
  display: inline-block;
  border: 1px solid var(--ken-gold-deep);
  border-radius: 2rem;
  padding: .35rem .95rem;
  color: var(--ken-gold-deep);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  background: rgba(201, 162, 39, .07);
}
.ken-rating:hover, .ken-rating:focus { background: var(--ken-gold-deep); color: #fff; }

.ken-address { font-style: normal; line-height: 1.6; margin-bottom: .75rem; }
.ken-tel { color: var(--ken-gold-deep); font-weight: 600; text-decoration: none; }
.ken-tel:hover { text-decoration: underline; }
.ken-footer__contact { font-size: .82rem; color: #a49b8a; }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ken-gold);
  outline-offset: 2px;
}

/* ---------- Sell Your Gold flagship section ---------- */
.ken-section--sell {
  background:
    radial-gradient(900px 420px at 10% 110%, rgba(201, 162, 39, .22), transparent 60%),
    var(--ken-black);
  color: #f5ecd7;
  border-block: 1px solid var(--ken-line);
}
.ken-section--sell h2 { color: #fff; }
.ken-section--sell .lead { color: #d9d2c2; }
.ken-sell-price { border-left: 3px solid var(--ken-gold); padding-left: 1rem; }
.ken-sell-price__big strong {
  font-family: var(--ken-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--ken-gold-light);
  font-variant-numeric: tabular-nums;
}
.ken-sell-price__big span { color: #d9d2c2; }
.ken-step {
  border: 1px solid var(--ken-line);
  border-radius: .6rem;
  padding: 1.1rem;
  background: rgba(255, 255, 255, .04);
}

.ken-nav-sell { color: var(--ken-gold-deep) !important; font-weight: 700; }

/* ---------- Category chips ---------- */
.ken-chips a {
  border: 1px solid var(--ken-gold-deep);
  border-radius: 2rem;
  color: var(--ken-gold-deep);
  padding: .35rem .95rem;
  font-size: .88rem;
  text-decoration: none;
}
.ken-chips a:hover, .ken-chips a:focus { background: var(--ken-gold-deep); color: #fff; }

/* ---------- Anti-scam running message ---------- */
.ken-scam {
  background: #fdf6ec;
  border-block: 1px solid var(--ken-line);
  padding-block: .9rem;
  font-size: .88rem;
  color: var(--ken-ink);
}
.ken-scam__title {
  font-weight: 700;
  color: #8a3a1f;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.ken-scam__viewport { overflow: hidden; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.ken-scam__track { display: inline-block; animation: ken-marquee 35s linear infinite; }
.ken-scam__track span { margin-right: 4rem; }
.ken-scam:hover .ken-scam__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ken-scam__track { animation: none; }
  .ken-scam__viewport { white-space: normal; }
  .ken-scam__track span + span { display: none; }
}

/* ---------- Footer columns ---------- */
.ken-footer .navbar-brand { font-family: var(--ken-display); color: #fff; font-size: 1.2rem; }
.ken-footer__head { color: var(--ken-gold-light); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .6rem; }
.ken-footer__list li { margin-bottom: .35rem; }
.ken-footer__legal { border-color: rgba(255, 255, 255, .12) !important; font-size: .82rem; color: #a49b8a; }


/* ---------- Dark-section readability overrides ---------- */
.ken-section--dark .ken-eyebrow, .ken-section--sell .ken-eyebrow { color: var(--ken-gold-light); }
.ken-section--dark .ken-chips a { border-color: var(--ken-gold-light); color: var(--ken-gold-light); }
.ken-section--dark .ken-chips a:hover, .ken-section--dark .ken-chips a:focus { background: var(--ken-gold-light); color: var(--ken-black); }
.ken-section--dark .btn-outline-ken { border-color: var(--ken-gold-light); color: var(--ken-gold-light); }
.ken-section--dark .btn-outline-ken:hover { background: var(--ken-gold-light); color: var(--ken-black); }
.ken-section--dark .ken-tel { color: var(--ken-gold-light); }
.ken-section--dark .ken-rating { border-color: var(--ken-gold-light); color: var(--ken-gold-light); background: rgba(232, 200, 106, .08); }
.ken-section--dark .ken-rating:hover, .ken-section--dark .ken-rating:focus { background: var(--ken-gold-light); color: var(--ken-black); }
.ken-section--dark .ken-hours td { color: inherit; border-color: rgba(255, 255, 255, .15); }
.ken-section--dark .ken-card-title { color: var(--ken-black); }

/* ---------- Gold value calculator ---------- */
.ken-calc {
  border: 1px solid var(--ken-gold-deep);
  border-radius: .75rem;
  background: var(--ken-black);
  box-shadow: 0 20px 45px rgba(20, 18, 16, .16);
}
.ken-calc__title { font-family: var(--ken-display); font-size: 1.25rem; color: #fff; }
.ken-calc .form-label { color: #d9d2c2; font-size: .85rem; margin-bottom: .35rem; }
.ken-calc .form-control, .ken-calc .form-select {
  background: var(--ken-black);
  border: 1px solid var(--ken-line);
  color: #fff;
}
.ken-calc .form-control:focus, .ken-calc .form-select:focus {
  border-color: var(--ken-gold);
  box-shadow: 0 0 0 .2rem rgba(201, 162, 39, .25);
  background: var(--ken-black);
  color: #fff;
}
.ken-calc .form-control::placeholder { color: #6b655c; }
.ken-calc__value {
  font-family: var(--ken-display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--ken-gold-light);
  font-variant-numeric: tabular-nums;
}
.ken-calc__note { color: #a49b8a; font-size: .8rem; max-width: 34rem; }

/* ---------- 30-day trend chart ---------- */
.ken-chart {
  border: 1px solid var(--ken-line);
  border-radius: .75rem;
  background: #fff;
}
.ken-chart__svg { width: 100%; height: auto; display: block; }
.ken-chart__svg text { font-family: var(--ken-body); font-size: 12px; fill: var(--ken-stone); }
.ken-chart__svg .ken-chart__legend { fill: var(--ken-ink); }
.ken-chart__svg .ken-chart__val { fill: #8a6a1f; font-weight: 700; }
.ken-chart__svg .ken-chart__val--buy { fill: #c9a227; }
.ken-chart__svg .ken-chart__hi, .ken-chart__svg .ken-chart__lo { fill: var(--ken-stone); }
.ken-chart__note { color: var(--ken-stone); font-size: .8rem; margin-top: .5rem; }

/* ---------- Turkish New Design carousel ---------- */
.ken-turk { position: relative; }
.ken-turk__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .25rem .25rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ken-gold-deep) transparent;
}
.ken-turk__card {
  flex: 0 0 240px;
  scroll-snap-align: start;
}
.ken-turk__btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ken-gold-deep);
  background: #fff;
  color: var(--ken-gold-deep);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(20, 18, 16, .15);
}
.ken-turk__btn:hover { background: var(--ken-gold-deep); color: #fff; }
.ken-turk__btn--prev { left: -8px; }
.ken-turk__btn--next { right: -8px; }
@media (max-width: 575.98px) {
  .ken-turk__card { flex-basis: 200px; }
  .ken-turk__btn { display: none; }   /* phones swipe natively */
}

/* ---------- Product pages ---------- */
.ken-page-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.ken-plain-link { color: inherit; text-decoration: none; }
.ken-plain-link:hover { color: var(--ken-gold-deep); }
.ken-chips a.is-active { background: var(--ken-gold-deep); color: #fff; }
.ken-back { color: var(--ken-gold-deep); text-decoration: none; font-weight: 600; }
.ken-back:hover { text-decoration: underline; }
.ken-gal { border: 1px solid var(--ken-line); border-radius: .75rem; padding: .5rem; background: #fff; margin: 0; }
.ken-gal img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .5rem; }
.ken-gal__thumb { padding: 0; border: 2px solid transparent; border-radius: .5rem; background: none; }
.ken-gal__thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--ken-line); }
.ken-gal__thumb.is-active { border-color: var(--ken-gold); }
.ken-detail-price { font-family: var(--ken-display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--ken-gold-deep); font-variant-numeric: tabular-nums; }
.ken-spec td { padding-block: .55rem; }
.ken-spec__total td { font-weight: 700; color: var(--ken-gold-deep); border-top: 2px solid var(--ken-line); }