/* ============================================================
   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: 'Playfair Display', Georgia, 'Times New Roman', 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);
  width: 100%;
}
.ken-ticker__track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  padding-block: .45rem;
  animation: ken-marquee 28s linear infinite;
  will-change: transform;
}
.ken-ticker__item { margin-inline: 1.6rem; flex: 0 0 auto; white-space: nowrap; }
.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;
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(88svh - 76px);  /* header + margins stay on screen */
  object-fit: contain;
  background: #0d0b08;
}
/* dialog width is set dynamically by main.js to match the active poster's ratio */
.ken-popup .modal-dialog {
  max-width: min(480px, 94vw);
  transition: max-width .25s ease;
  margin-left: auto;   /* Bootstrap drops auto-centering under 576px; force it for every poster shape */
  margin-right: auto;
}

/* ---------- 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: calc(84svh - 70px); }
}
/* 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;
  justify-content: safe center;
  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); }

/* ============================================================
   New HERO design only (kd- namespace).
   Ticker and navbar are untouched - this only styles the
   <header class="kd-hero ken-hero"> block in index.php.
   All price values still use [data-price] and are refreshed
   by assets/js/main.js exactly like before.
   ============================================================ */
:root {
  --kd-cream: #fbf3e3;
  --kd-dark-brown: #1a0f05;
  --kd-gold: #b8860b;
  --kd-gold-deep: #8a5a10;
  --kd-gold-bright: #e2ac2e;
  --kd-gold-pale: #f3d98a;
  --kd-gold-line: rgba(184, 134, 11, .35);
  --kd-gold-glow: 0 0 24px rgba(226, 172, 46, .55);
  --kd-ink: #241a0f;
  --kd-ink-soft: #4a3d2c;
  --kd-radius-lg: 20px;
  --kd-shadow-card: 0 20px 40px -12px rgba(60, 40, 10, .18), 0 4px 10px -4px rgba(60, 40, 10, .10);
  --kd-shadow-soft: 0 10px 30px rgba(60, 40, 10, .10);
  --kd-font-display: 'Playfair Display', var(--ken-display), serif;
  --kd-font-script: 'Tangerine', cursive;
  --kd-font-body: 'Figtree', var(--ken-body), 'Segoe UI', system-ui, sans-serif;
  --kd-font-ui: var(--ken-body);
}

.kd-hero {
  position: relative;
  overflow: visible;
  padding: 56px 0 0;
  background: var(--kd-cream);
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  align-items: unset !important;
}
.kd-hero-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 620px) 1fr;
  align-items: stretch;
  min-height: 720px;
}
.kd-sparkle {
  position: absolute;
  color: var(--kd-gold-bright);
  opacity: .8;
  animation: kd-twinkle 3.2s ease-in-out infinite;
}
@keyframes kd-twinkle {
  0%, 100% { opacity: .25; transform: scale(.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(15deg); }
}
.kd-swirl-line { position: absolute; left: -60px; bottom: 60px; width: 620px; height: 220px; pointer-events: none; z-index: 1; }

.kd-hero-content { position: relative; z-index: 3; padding-bottom: 36px; }

.kd-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--kd-gold-line);
  background: rgba(255, 255, 255, .5);
  padding: 9px 20px;
  border-radius: 999px;
  font-family: var(--kd-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kd-gold);
  margin-bottom: 28px;
    animation: kd-fadeUp .8s ease forwards;
}
.kd-badge svg { width: 14px; height: 14px; }

.kd-hero h1.kd-hero-heading {
  font-family: var(--kd-font-display);
  font-weight: 600;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.08;
  color: var(--kd-ink);
  margin-bottom: 6px;
    animation: kd-fadeUp .9s ease .12s forwards;
}
.kd-hero-heading .kd-script {
  font-family: var(--kd-font-script);
  font-weight: 700;
  font-size: 2.05em;
  background: linear-gradient(95deg, #7a4e0c 0%, var(--kd-gold-deep) 18%, var(--kd-gold-bright) 38%, var(--kd-gold-pale) 50%, #fff6dc 56%, var(--kd-gold-pale) 62%, var(--kd-gold-bright) 76%, var(--kd-gold-deep) 92%, #7a4e0c 100%);
  background-size: 320% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  filter: drop-shadow(var(--kd-gold-glow));
  animation: kd-shimmer 4s linear infinite;
}
@keyframes kd-shimmer { 0% { background-position: 0% center; } 100% { background-position: -320% center; } }
.kd-hero-heading .kd-script svg {
  color: var(--kd-gold-bright);
  width: .45em;
  height: .45em;
  filter: drop-shadow(0 0 6px rgba(226, 172, 46, .7));
  animation: kd-twinkle 2.4s ease-in-out infinite;
}
.kd-hero-rule {
  width: 64px;
  height: 3px;
  background: var(--kd-gold);
  margin: 22px 0;
    animation: kd-fadeUp .9s ease .2s forwards;
}
.kd-hero .kd-hero-para {
  font-family: var(--kd-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--kd-ink);
  max-width: 480px;
  margin-bottom: 34px;
    animation: kd-fadeUp .9s ease .28s forwards;
}
.kd-hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 42px;
    animation: kd-fadeUp .9s ease .36s forwards;
  flex-wrap: wrap;
}
.kd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 19px 34px;
  border-radius: 8px;
  font-family: var(--kd-font-ui);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.kd-btn svg { width: 15px; height: 15px; }
.kd-btn-primary {
  background: linear-gradient(135deg, #f3d98a 0%, #e2ac2e 22%, #b8860b 55%, #8a5a10 85%, #6e4408 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow: 0 14px 30px -8px rgba(184, 134, 11, .65), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 4px rgba(0, 0, 0, .2);
}
.kd-btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}
.kd-btn-primary:hover::before { left: 140%; }
.kd-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -8px rgba(184, 134, 11, .8), inset 0 1px 0 rgba(255, 255, 255, .5); color: #fff; }
.kd-btn-secondary { background: #fff; color: var(--kd-ink); border: 1.5px solid var(--kd-gold-line); }
.kd-btn-secondary:hover { transform: translateY(-3px); border-color: var(--kd-gold); box-shadow: var(--kd-shadow-soft); color: var(--kd-ink); }

.kd-trust-row {
  display: flex;
  align-items: center;
  gap: 34px;
    animation: kd-fadeUp .9s ease .44s forwards;
  flex-wrap: wrap;
}
.kd-trust-item { display: flex; align-items: center; gap: 12px; }
.kd-trust-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--kd-gold-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kd-gold);
  flex-shrink: 0;
}
.kd-trust-icon svg { width: 18px; height: 18px; }
.kd-trust-text { font-family: var(--kd-font-ui); line-height: 1.3; }
.kd-trust-text strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--kd-ink); }
.kd-trust-text span { font-size: 12.5px; color: var(--kd-ink-soft); font-weight: 500; }

@keyframes kd-fadeUp { from { transform: translateY(22px); } to { transform: translateY(0); } }

/* ---------- Hero image ---------- */
.kd-hero-visual { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; z-index: 2; }
.kd-hero-woman-wrap {
  position: relative;
  width: min(100%, 960px);
  height: 100%;
  min-height: 620px;
  max-height: 760px;
  animation: kd-floatY 6s ease-in-out infinite;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
@keyframes kd-floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.kd-hero-woman-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  -webkit-mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
}

/* ---------- Floating price cards ---------- */
.kd-price-cards {
  position: relative;
  z-index: 4;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
  margin-top: 46px;
  padding-bottom: 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.kd-price-card {
  position: relative;
  background: linear-gradient(160deg, #fffefb 0%, #fdf8ec 100%);
  border-radius: var(--kd-radius-lg);
  border: 1px solid rgba(184, 134, 11, .16);
  box-shadow: var(--kd-shadow-card);
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    animation: kd-fadeUp .8s ease forwards;
  overflow: hidden;
}
.kd-price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--kd-gold-bright), transparent);
  opacity: .8;
}
.kd-price-card:nth-child(1) { animation-delay: .5s; }
.kd-price-card:nth-child(2) { animation-delay: .62s; }
.kd-price-card:nth-child(3) { animation-delay: .74s; }
.kd-price-card:hover { transform: translateY(-8px); border-color: rgba(184, 134, 11, .4); box-shadow: 0 28px 50px -14px rgba(60, 40, 10, .24); }
.kd-price-card-top { display: flex; align-items: center; gap: 16px; }
.kd-price-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f3d98a 0%, #e2ac2e 30%, #b8860b 65%, #8a5a10 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -4px rgba(138, 90, 16, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.kd-price-icon-circle svg { width: 22px; height: 22px; }
.kd-price-card-labels strong { display: block; font-family: var(--kd-font-ui); font-size: 15px; font-weight: 700; color: var(--kd-ink); margin-bottom: 4px; }
.kd-price-card-labels .kd-amount { font-family: var(--kd-font-ui); font-size: 21px; font-weight: 700; color: var(--kd-ink); font-variant-numeric: tabular-nums; }
.kd-price-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--kd-font-ui);
  font-size: 12px;
  color: var(--kd-ink-soft);
  font-weight: 500;
  border-top: 1px solid rgba(184, 134, 11, .14);
  padding-top: 14px;
}
.kd-price-card-foot .kd-bar { width: 34px; height: 2px; background: var(--kd-gold); display: block; margin-top: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 1366px) {
  .kd-hero-inner { grid-template-columns: minmax(400px, 560px) 1fr; min-height: 700px; }
}
@media (max-width: 1024px) {
  .kd-hero { padding: 60px 0 0; }
  .kd-hero-inner {
    padding: 0 24px;
    grid-template-columns: 1fr;
    min-height: unset;
    justify-items: center;
    text-align: center;
  }
  .kd-hero-content { padding-bottom: 20px; order: 1; }
  .kd-hero-para { margin-left: auto; margin-right: auto; }
  .kd-hero-rule { margin-left: auto; margin-right: auto; }
  .kd-hero-actions { justify-content: center; }
  .kd-trust-row { justify-content: center; row-gap: 18px; }
  .kd-hero-visual { order: 2; max-width: 560px; margin: 0 auto; height: auto; }
  .kd-hero-woman-wrap { height: auto; aspect-ratio: 4 / 4.6; min-height: unset; max-height: 520px; }
  .kd-price-cards { grid-template-columns: 1fr; margin-top: 32px; padding: 0 24px; }
}
@media (max-width: 768px) {
  .kd-hero { padding: 40px 0 0; }
  .kd-hero-inner { padding: 0 16px; }
  .kd-hero-heading { font-size: clamp(34px, 9vw, 48px); }
  .kd-hero-para { font-size: 17px; }
  .kd-btn { padding: 16px 24px; font-size: 12.5px; }
  .kd-price-cards { padding: 0 16px; margin-top: 24px; gap: 16px; }
}
@media (max-width: 480px) {
  .kd-hero-actions { flex-direction: column; align-items: stretch; }
  .kd-btn { width: 100%; }
  .kd-trust-row { gap: 14px; }
  .kd-trust-icon { width: 40px; height: 40px; }
}
@media (max-width: 320px) {
  .kd-hero-heading { font-size: 30px; }
  .kd-badge { font-size: 10px; padding: 8px 14px; }
}

/* ---------- Navbar width alignment ----------
   Make the navbar's inner container match the hero container's
   max-width (1600px) and side padding (40px), so both line up
   at the same edges. Navbar's other Bootstrap classes/behavior
   (collapse, toggler, nav-links) are untouched. */
.ken-nav > .container {
  max-width: 1600px;
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 1024px) {
  .ken-nav > .container { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 768px) {
  .ken-nav > .container { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   Fit-to-screen layer for the kd hero (desktop).
   Keeps the design exactly as-is, but sizes the hero to the
   visitor's viewport so the trust row and photo are never cut
   and nothing bleeds into the next section.
   ============================================================ */
/* the gold sweep and sparkles must never widen the page, on any device */
.kd-hero { overflow: hidden; }

@media (min-width: 1025px) {
  .kd-hero { padding-top: clamp(14px, 3.5svh, 48px); }
  .kd-hero-inner {
    min-height: 0;
    height: clamp(520px, calc(100svh - 148px), 800px);
  }
  .kd-hero-content { align-self: center; }
  .kd-hero-woman-wrap { min-height: 0; height: 100%; max-height: 100%; }
}
/* Shorter laptop screens: scale type and spacing down a notch */
@media (min-width: 1025px) and (max-height: 840px) {
  .kd-hero h1.kd-hero-heading { font-size: clamp(28px, 3vw, 44px); }
  .kd-hero .kd-hero-para { font-size: 16px; margin-bottom: 14px; }
  .kd-hero .kd-btn { padding: 12px 22px; }
  .kd-hero .kd-trust-row { gap: 20px; }
  .kd-hero .kd-trust-icon { width: 40px; height: 40px; }
  .kd-hero .ken-rating { margin-top: .25rem; }
}
/* Very short screens (small laptops around 700px tall) */
@media (min-width: 1025px) and (max-height: 720px) {
  .kd-hero h1.kd-hero-heading { font-size: clamp(26px, 2.6vw, 36px); }
  .kd-hero .kd-hero-para { font-size: 15px; margin-bottom: 10px; }
  .kd-hero .kd-badge { margin-bottom: 4px; }
}


/* ============================================================
   Horizontal overflow guard: no element may make the page
   scroll sideways on phones. clip preserves sticky navbar on
   modern browsers; hidden is the legacy fallback.
   ============================================================ */
html { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* ---------- Sell-gold flagship page layouts ---------- */
.ken-list { list-style: none; padding-left: 0; margin: 0; }
.ken-list li { position: relative; padding-left: 1.9rem; margin-bottom: .65rem; }
.ken-list li::before {
  content: "";
  position: absolute; left: 0; top: .28em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--ken-gold-deep);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.6 1.9 8.3l1.4-1.4 2.9 2.9 6.5-6.5 1.4 1.4z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.6 1.9 8.3l1.4-1.4 2.9 2.9 6.5-6.5 1.4 1.4z"/></svg>') center/contain no-repeat;
}
.ken-media img { width: 100%; border-radius: .9rem; border: 1px solid var(--ken-line); }
.ken-stat { text-align: center; border: 1px solid var(--ken-gold-deep); border-radius: .9rem; padding: 1.4rem 1rem; }
.ken-stat__num { font-family: var(--ken-display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--ken-gold-deep); }

/* ---------- Sell-price popup on jual-emas ---------- */
.ken-popup--table .modal-dialog { max-width: min(420px, 94vw); }
.ken-popup--table .modal-body { color: var(--ken-cream, #f5efe2); }
.ken-popup--table table td { background: transparent; color: inherit; border-color: rgba(255,255,255,.15); padding-block: .55rem; }

/* photo treatment on the sell page */
.ken-media--photo img { object-fit: cover; aspect-ratio: 4 / 5; max-height: 460px; box-shadow: 0 18px 44px rgba(0,0,0,.35); border: 1px solid var(--ken-gold-deep); }
.ken-section--dark .ken-media img { border-color: var(--ken-gold-deep); }

/* shop name line inside the trust heading */
.ken-brandline { display: block; font-family: var(--ken-display); font-size: clamp(1.5rem, 3.2vw, 2.2rem); color: var(--ken-gold-deep); letter-spacing: .01em; margin-bottom: .35rem; text-transform: none; }

/* ---------- Floating WhatsApp: small round icon, LEFT, jumping ---------- */
.ken-wa {
  position: fixed;
  left: 18px; right: auto; bottom: 18px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid; place-items: center;
  padding: 0; font-size: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  z-index: 1040;
  animation: kenJump 2.6s ease-in-out infinite;
}
.ken-wa:hover { color: #fff; animation-play-state: paused; transform: scale(1.08); }
@keyframes kenJump {
  0%, 20%, 100% { transform: translateY(0); }
  8%  { transform: translateY(-12px); }
  14% { transform: translateY(0); }
  17% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .ken-wa { animation: none; } }

/* ---------- Naufal Assist chatbot ---------- */
.kb-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 1040;
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, #8a6a1f, #c9a227 55%, #e8c86a);
  color: #141210; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35); cursor: pointer;
}
.kb-btn svg { width: 26px; height: 26px; }
.kb-panel {
  position: fixed; right: 14px; bottom: 84px; z-index: 1045;
  width: min(360px, calc(100vw - 28px));
  max-height: min(560px, calc(100svh - 110px));
  display: none; flex-direction: column;
  background: #1c1712; border: 1px solid #8a6a1f; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); overflow: hidden;
}
.kb-panel.is-open { display: flex; }
.kb-head { background: linear-gradient(100deg, #141210, #2a2118); color: #e8c86a; padding: .7rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.kb-head b { font-family: var(--ken-display); font-size: 1.05rem; }
.kb-head small { display: block; color: #a49b8a; font-size: .72rem; }
.kb-close { background: none; border: 0; color: #a49b8a; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.kb-msgs { flex: 1 1 auto; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; scrollbar-width: thin; }
.kb-m { max-width: 86%; padding: .55rem .75rem; border-radius: .8rem; font-size: .88rem; line-height: 1.45; color: #f0e9da; }
.kb-m.bot { background: #2a2118; border: 1px solid #3d3018; border-bottom-left-radius: .2rem; align-self: flex-start; }
.kb-m.user { background: #8a6a1f; color: #fff; border-bottom-right-radius: .2rem; align-self: flex-end; }
.kb-m table { width: 100%; font-size: .84rem; margin: .3rem 0 0; }
.kb-m td { padding: .15rem 0; border-bottom: 1px solid #3d3018; }
.kb-m td:last-child { text-align: right; color: #e8c86a; font-weight: 600; }
.kb-m a { color: #e8c86a; }
.kb-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .8rem .6rem; }
.kb-chip { border: 1px solid #8a6a1f; background: transparent; color: #e8c86a; border-radius: 999px; padding: .3rem .7rem; font-size: .78rem; cursor: pointer; }
.kb-chip:hover { background: #8a6a1f; color: #fff; }
.kb-row { display: flex; gap: .5rem; padding: .6rem .8rem; border-top: 1px solid #3d3018; }
.kb-in { flex: 1; background: #14100b; border: 1px solid #3d3018; color: #f0e9da; border-radius: .6rem; padding: .5rem .7rem; font-size: .88rem; }
.kb-send { border: 0; background: #c9a227; color: #141210; border-radius: .6rem; padding: 0 .9rem; font-weight: 700; cursor: pointer; }
@media (max-width: 575.98px) { .kb-panel { bottom: 80px; } }

/* ---------- Mobile polish pass ---------- */
/* iPhone home-bar safe areas for floating elements */
.ken-wa { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.kb-btn { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.kb-panel { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* anchor jumps (#cara, #lead, #calculator) land below the sticky navbar */
[id] { scroll-margin-top: 84px; }
/* iOS zooms any input under 16px on focus: keep chat input at 16px on phones */
@media (max-width: 575.98px) {
  .kb-in { font-size: 16px; }
  .kb-panel { width: calc(100vw - 20px); right: 10px; }
  .kb-m { max-width: 92%; }
}

/* ---------- CTA button groups: correct spacing at every width ---------- */
.ken-cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
@media (max-width: 575.98px) {
  .ken-cta .btn { flex: 1 1 100%; text-align: center; }
  /* breathing room between stacked hero content blocks on phones */
  .ken-page-title { margin-top: .25rem; }
  .ken-section { padding-block: 3rem; }
}

/* ---------- ken-sgj design system (hero background + shared styles) ---------- */
.ken-story { padding-block: 5rem; }
.ken-hero-bg { position: relative; overflow: hidden; }
.ken-hero-bg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.ken-hero-bg::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(15,12,8,.9) 0%, rgba(15,12,8,.74) 45%, rgba(15,12,8,.35) 100%); }
.ken-hero-bg .container { position: relative; z-index: 2; }
.ken-hero-bg__content { max-width: 660px; padding-block: 2.5rem; }
h2.ken-sgj, h3.ken-sgj {
  font-size: 1.15rem; letter-spacing: .04em; color: var(--ken-gold-deep);
  text-transform: uppercase; font-weight: 600;
}
.ken-section--dark h2.ken-sgj, .ken-section--dark h3.ken-sgj { color: var(--ken-gold-light); }
.ken-note-deep { font-size: .9rem; color: var(--ken-gold-deep); }
.ken-je-col { display: flex; flex-direction: column; justify-content: center; }
/* accordion themed for light sections */
.ken-accordion .accordion-item { background: #fffdf7; border: 1px solid var(--ken-gold-deep); margin-bottom: .5rem; border-radius: .5rem; overflow: hidden; }
.ken-accordion .accordion-button { background: #fffdf7; color: #2a2118; font-weight: 600; box-shadow: none; }
.ken-accordion .accordion-button:not(.collapsed) { background: var(--ken-gold); color: #141210; }
.ken-accordion .accordion-button:focus { box-shadow: none; border-color: var(--ken-gold-deep); }
.ken-accordion .accordion-body { color: #3a332a; }
@media (max-width: 575.98px) {
  .ken-story { padding-block: 3.25rem; }
  .ken-hero-bg__content { padding-block: 1.5rem; }
}

/* ---------- Blog ---------- */
.ken-article { max-width: 760px; }
.ken-article h2 { font-size: 1.35rem; color: var(--ken-gold-deep); margin-top: 2rem; margin-bottom: .6rem; }
.ken-article p { line-height: 1.75; }
.ken-article .lead { font-size: 1.1rem; }
.ken-article a { color: var(--ken-gold-deep); font-weight: 600; }
.ken-blogcard { display: block; text-decoration: none; color: inherit; background: #fffdf7; border: 1px solid var(--ken-gold-deep); border-radius: .8rem; overflow: hidden; height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.ken-blogcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.12); color: inherit; }
.ken-blogcard .ken-media img { aspect-ratio: 16/10; object-fit: cover; width: 100%; border: 0; box-shadow: none; }
.ken-blogcard__date { display: block; padding: .8rem 1rem 0; font-size: .75rem; color: var(--ken-gold-deep); letter-spacing: .05em; text-transform: uppercase; }
.ken-blogcard__title { display: block; padding: .25rem 1rem .35rem; font-family: var(--ken-display); font-size: 1.05rem; color: #2a2118; }
.ken-blogcard__desc { display: block; padding: 0 1rem 1rem; font-size: .85rem; color: #6b655c; line-height: 1.5; }

/* ============================================================
   Core Web Vitals block  (added 2026-08-13)
   Everything below exists to hold LCP, CLS and INP inside the
   green thresholds. Do not strip it out when editing the theme.
   ============================================================ */

/* CLS: the daily popup used to open a Bootstrap modal, which sets
   overflow:hidden on <body> and compensates with padding-right. On a
   desktop that reflows the whole page sideways. Reserving the gutter
   up front means opening or closing the modal shifts nothing. */
html { scrollbar-gutter: stable; }

/* CLS: <picture> is inline by default, which adds a descender gap under
   every image and changes the box the browser reserved. */
picture { display: contents; }

/* CLS: any image that somehow ships without width/height still gets a
   sane box instead of collapsing to zero and then jumping. */
img { max-width: 100%; height: auto; }
img[width][height] { height: auto; }

/* LCP + INP: stop the browser laying out and painting sections nobody
   has scrolled to yet. The intrinsic sizes are deliberate; a wrong value
   here creates scrollbar jitter, so measure before changing them. */
#collection,
#turkish,
#why-us,
#contact,
.ken-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* INP: the price ticker and the scam marquee run forever. Promoting them
   to their own compositor layer keeps that work off the main thread, and
   the paint containment stops them invalidating anything around them. */
.ken-ticker__track,
.ken-scam__track {
  will-change: transform;
  contain: layout paint;
}

/* INP: the hero float and the sparkle twinkle are decorative and run for
   the whole session. Pausing them once the user starts scrolling frees
   the main thread for the taps that actually get measured. */
body.ken-scrolled .kd-sparkle,
body.ken-scrolled .kd-hero-woman-wrap,
body.ken-scrolled .kd-hero-heading .kd-script,
body.ken-scrolled .ken-wa { animation: none; }

/* CLS: the LCP heading swaps from a system fallback to Playfair Display.
   Without matching metrics that swap reflows three lines of text. These
   two faces make the fallback occupy almost exactly the same space, so
   the swap is invisible in the layout. */
@font-face {
  font-family: 'Playfair Fallback';
  src: local('Times New Roman'), local('Georgia'), local('serif');
  size-adjust: 108%;
  ascent-override: 96%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Figtree Fallback';
  src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('sans-serif');
  size-adjust: 103%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}
:root {
  --ken-display: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  --ken-body: 'Figtree', 'Figtree Fallback', 'Segoe UI', system-ui, sans-serif;
  --kd-font-display: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  --kd-font-body: 'Figtree', 'Figtree Fallback', system-ui, sans-serif;
  --kd-font-ui: 'Figtree', 'Figtree Fallback', system-ui, sans-serif;
}

/* LCP: smooth scrolling makes anchor jumps pretty and makes long tasks
   longer. Keep it, but never for people who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}