/* =======================================================
   MALANG FLORIST GROUP — Shared Theme
   Palette: Gold · Deep Rose-Red · Cream · Charcoal
======================================================= */

:root{
  --cream:#fbf7ef;
  --cream-2:#f6efe1;
  --gold:#c9a24b;
  --gold-dark:#a17c2f;
  --gold-light:#e7cd86;
  --rose:#8e1b2e;
  --rose-2:#b3243b;
  --rose-dark:#6d1322;
  --ink:#1c1413;
  --ink-soft:#5b4f48;
  --line:#e9ddc6;
}

*{ scroll-behavior:smooth; box-sizing:border-box; }

body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background-color:var(--cream);
  /* subtle botanical flower-sketch background */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23c9a24b' stroke-width='1.1' stroke-linecap='round' opacity='0.16'%3E%3Cg transform='translate(40 46)'%3E%3Ccircle cx='0' cy='0' r='9'/%3E%3Ccircle cx='0' cy='0' r='5'/%3E%3Cpath d='M0 9 q-9 10 -3 24 M0 9 q9 10 3 24'/%3E%3Cpath d='M0 33 C-18 30 -26 16 -22 4 M0 33 C18 30 26 16 22 4'/%3E%3C/g%3E%3Cg transform='translate(196 30) rotate(18)'%3E%3Cpath d='M0 0 C14 -6 30 4 30 4 C30 4 14 12 0 6 Z'/%3E%3Cpath d='M0 0 C14 6 30 -4 30 -4 C30 -4 14 -12 0 -6 Z'/%3E%3Cpath d='M0 -8 L0 18'/%3E%3C/g%3E%3Cg transform='translate(220 180)'%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Ccircle cx='0' cy='0' r='4'/%3E%3Cpath d='M0 8 q-10 9 -4 22 M0 8 q10 9 4 22'/%3E%3C/g%3E%3Cg transform='translate(70 196) rotate(-12)'%3E%3Cpath d='M0 0 C12 -6 26 3 26 3 C26 3 12 11 0 5 Z'/%3E%3Cpath d='M0 0 L0 22'/%3E%3Cpath d='M0 -6 C-12 -10 -24 -2 -24 -2'/%3E%3C/g%3E%3Cpath d='M120 110 q20 -16 44 -6 M132 100 q4 14 -6 26'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
.font-serif{ font-family:'Playfair Display',serif; }
.text-gold{ color:var(--gold-dark); }
.text-rose{ color:var(--rose); }

.gold-gradient-text{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 45%,var(--gold-dark));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* gold hairline divider */
.gold-rule{
  display:inline-block; height:1px; width:46px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.eyebrow{
  color:var(--gold-dark); font-size:10px; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase;
}

/* ---------- Logo ---------- */
.mfg-logo{ height:46px; width:auto; display:block; }
@media (min-width:768px){ .mfg-logo{ height:54px; } }
.mfg-logo--footer{ height:54px; }

/* ---------- Header (black · gold · white) ---------- */
#site-header{
  transition:all .3s ease;
  background:rgba(18,14,12,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,162,75,.32) !important;
}
#site-header.scrolled{
  background:rgba(14,10,9,.97); backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  border-bottom-color:rgba(201,162,75,.5) !important;
}
/* light hamburger on dark header */
#site-header button[aria-label="Menu"]{ color:var(--gold-light) !important; }

.nav-link{ position:relative; color:#f1e8d6; font-weight:600; transition:color .25s ease; }
.nav-link:hover,.nav-link.active{ color:var(--gold-light); }
.nav-link::after{
  content:''; position:absolute; bottom:-6px; left:0; width:0; height:2px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold)); transition:width .3s ease;
}
.nav-link:hover::after,.nav-link.active::after{ width:100%; }

/* mobile dropdown panel → dark to match */
#mobile-nav{ background:rgba(18,14,12,.98) !important; border-top-color:rgba(201,162,75,.3) !important; }
#mobile-nav a{ color:#f1e8d6 !important; }
#mobile-nav a:hover{ background:rgba(201,162,75,.14) !important; color:var(--gold-light) !important; }

/* ---------- Buttons ---------- */
.btn-rose{
  background:linear-gradient(135deg,var(--rose-2),var(--rose));
  color:#fff; font-weight:700; border-radius:9999px;
  box-shadow:0 12px 26px -10px rgba(142,27,46,.6);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-rose:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 18px 34px -12px rgba(142,27,46,.7); }

.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-dark));
  color:#3a2a08; font-weight:800; border-radius:9999px;
  box-shadow:0 12px 26px -12px rgba(161,124,47,.7);
  transition:transform .25s ease, filter .25s ease;
}
.btn-gold:hover{ transform:translateY(-2px); filter:brightness(1.05); }

.btn-outline{
  border:1.5px solid var(--gold); color:var(--rose); background:transparent;
  font-weight:700; border-radius:9999px; transition:all .25s ease;
}
.btn-outline:hover{ background:var(--rose); border-color:var(--rose); color:#fff; }

/* ---------- Framed product card (modern) ---------- */
.frame-card{
  background:#fff;
  border-radius:22px; padding:8px;
  box-shadow:0 10px 30px -18px rgba(28,20,19,.35);
  border:1px solid var(--line);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.frame-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -26px rgba(142,27,46,.4); }

.frame-inner{
  position:relative; overflow:hidden; border-radius:16px;
  aspect-ratio:1/1;
  background:linear-gradient(180deg,#fcfaf5 0%,#f4eddd 100%);
  border:1px solid rgba(201,162,75,.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
/* show the WHOLE board, centered & uniform — no cropping */
.frame-inner img{
  width:100%; height:100%; object-fit:contain; padding:10px 10px 54px;
  transition:transform .6s cubic-bezier(.4,0,.2,1); display:block;
  filter:drop-shadow(0 8px 16px rgba(28,20,19,.12));
}
.frame-card:hover .frame-inner img{ transform:scale(1.04); }

/* per-product caption banner — FIXED size (uniform, admin-fillable) */
.prod-caption{
  position:absolute; left:9px; right:9px; bottom:9px; z-index:3;
  height:38px;                         /* ukuran tetap, tidak ikut panjang teks */
  background:linear-gradient(135deg,rgba(28,20,19,.93),rgba(14,10,9,.93));
  border:1px solid rgba(201,162,75,.45);
  border-radius:10px; padding:0 11px;
  display:flex; align-items:center; gap:7px;
  backdrop-filter:blur(4px);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.55);
  transition:opacity .3s ease; overflow:hidden;
}
.prod-caption .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-light); flex:none; box-shadow:0 0 0 3px rgba(201,162,75,.18); }
.prod-caption span{
  font-size:10px; font-weight:700; letter-spacing:.01em; color:#f1e8d6; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.frame-card:hover .prod-caption{ opacity:0; }

/* gold corner ticks — refined modern accent */
.frame-inner::before,.frame-inner::after{
  content:''; position:absolute; width:16px; height:16px; z-index:3; pointer-events:none;
  border-color:var(--gold); border-style:solid; border-width:0; border-radius:1px;
}
.frame-inner::before{ top:10px; left:10px; border-top-width:2px; border-left-width:2px; }
.frame-inner::after{ bottom:10px; right:10px; border-bottom-width:2px; border-right-width:2px; }

.prod-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top,rgba(28,20,19,.6),transparent 55%);
  display:flex; align-items:flex-end; padding:12px;
  opacity:0; transition:opacity .3s ease;
}
.frame-card:hover .prod-overlay{ opacity:1; }

.ribbon-mfg{
  position:absolute; top:10px; right:10px; z-index:3;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff; font-size:8px; font-weight:900; letter-spacing:.08em;
  padding:2px 8px; border-radius:9999px; box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* ---------- Section heading flourish ---------- */
.heading-flourish{ display:flex; align-items:center; justify-content:center; gap:14px; }
.heading-flourish svg{ width:22px; height:22px; color:var(--gold); }

/* ---------- Cards / surfaces ---------- */
.surface{ background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:18px; }

/* ---------- Price card ---------- */
.price-card{ transition:transform .3s ease, box-shadow .3s ease; }
.price-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -22px rgba(142,27,46,.35); }

/* ---------- Price table (black · gold · white) ---------- */
.price-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 18px 44px -26px rgba(28,20,19,.5);
  border:1px solid var(--line);
}
.price-table thead th{
  background:linear-gradient(135deg,#1c1413,#0e0a09);
  color:var(--gold-light); font-weight:800;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 16px; text-align:left;
}
.price-table thead th + th{ text-align:right; }
.price-table thead th.col-besar{ color:#fff; }
.price-table tbody td{ padding:13px 16px; border-top:1px solid var(--line); font-size:14px; vertical-align:middle; }
.price-table tbody tr:nth-child(even){ background:var(--cream); }
.price-table tbody tr:hover{ background:#f6efe1; }
.price-table .tipe{ font-weight:700; color:var(--ink); }
.price-table .tipe small{ display:block; font-weight:500; color:var(--ink-soft); font-size:11px; margin-top:2px; }
.price-table .harga{ text-align:right; font-weight:800; color:var(--gold-dark); white-space:nowrap; }
.price-table .harga.besar{ color:var(--rose); }
.price-table tr.row-pop{ box-shadow:inset 3px 0 0 var(--gold); }
.price-table .tag-pop{
  display:inline-block; margin-left:8px; font-size:8px; font-weight:900; letter-spacing:.06em;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff;
  padding:2px 7px; border-radius:9999px; vertical-align:middle;
}

/* ---------- Category filter ---------- */
.cat-btn{ border:1.5px solid var(--line); color:var(--ink-soft); background:rgba(255,255,255,.7); transition:all .2s ease; }
.cat-btn.active{ background:var(--rose); color:#fff; border-color:var(--rose); }
.cat-btn:hover:not(.active){ border-color:var(--gold); color:var(--rose); }

/* ---------- FAQ ---------- */
.faq-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-body.open{ max-height:340px; }
.faq-icon{ transition:transform .3s ease; }
.faq-icon.open{ transform:rotate(45deg); }

/* ---------- Hero slider ---------- */
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease-in-out; }
.hero-slide.active{ opacity:1; }

/* ---------- Hero text (responsive + rotator) ---------- */
.hero-h1{
  font-size:clamp(2.5rem, 4vw + 1.6rem, 4.6rem) !important;
  line-height:1.05 !important;
  letter-spacing:-.01em;
}
.hero-sub{ font-size:clamp(.95rem, .5vw + .85rem, 1.12rem); }
@media (max-width:380px){ .hero-h1{ font-size:2.15rem !important; } }
/* smooth fade/slide when headline rotates */
.hero-fade{ transition:opacity .55s ease, transform .55s ease; will-change:opacity,transform; }
.hero-fade.out{ opacity:0; transform:translateY(16px); }
/* title size presets (admin) */
.hero-size-sedang .hero-h1{ font-size:clamp(2.2rem, 3.4vw + 1.4rem, 3.8rem) !important; }
.hero-size-sangat-besar .hero-h1{ font-size:clamp(2.7rem, 5vw + 1.7rem, 5.4rem) !important; }

/* No.1 medal badge + eyebrow */
.hero-badge-row{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(16px,2.2vw,24px); }
.hero-medal{
  width:clamp(40px,3.6vw,48px); height:clamp(40px,3.6vw,48px); flex:none; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #f9edc8, #c9a24b 72%);
  display:flex; align-items:center; justify-content:center; color:#5a4209;
  box-shadow:0 8px 22px rgba(201,162,75,.5); border:2px solid rgba(255,255,255,.9); position:relative;
}
.hero-medal svg{ width:54%; height:54%; }
.hero-medal::after{ content:''; position:absolute; inset:-5px; border-radius:50%; border:1px dashed rgba(255,255,255,.4); }
.hero-medal-img{ height:clamp(52px,5vw,68px); width:auto; flex:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.hero-eyebrow{ color:#f1d9a3; font-size:clamp(10px,.5vw+.55rem,12px); font-weight:900; letter-spacing:.16em; text-transform:uppercase; line-height:1.3; }
/* proporsi teks hero */
#hero-title.hero-h1{ margin-bottom:clamp(14px,1.8vw,22px); }
.hero-sub{ margin-bottom:clamp(22px,3vw,34px); max-width:34rem; }
@media (max-width:480px){ .hero-eyebrow{ letter-spacing:.1em; } }

/* ---------- Marquee ---------- */
@keyframes marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
.animate-marquee{ animation:marquee 65s linear infinite; }
.animate-marquee:hover{ animation-play-state:paused; }

/* ---------- Floating WA ---------- */
@keyframes wa-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 50%{ box-shadow:0 0 0 12px rgba(37,211,102,0);} }
#float-wa{ animation:wa-pulse 2.6s ease-in-out infinite; }

/* ---------- Modal ---------- */
#order-modal,#detail-modal{ transition:opacity .25s ease; }
#order-modal.hidden,#detail-modal.hidden{ display:none !important; }

/* modal entrance animation */
@keyframes modal-pop{ from{ opacity:0; transform:translateY(24px) scale(.97); } to{ opacity:1; transform:none; } }
.modal-panel{ animation:modal-pop .32s cubic-bezier(.22,1,.36,1); }

/* ===== Modern form fields ===== */
.ff-group{ margin-bottom:16px; }
.ff-label{ display:block; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#6b5b52; margin-bottom:7px; }
.ff-label .req{ color:var(--rose); }
.ff-input{
  width:100%; padding:13px 14px; font-size:14px; color:var(--ink);
  background:#faf7f1; border:1.5px solid #e7ddca; border-radius:13px;
  outline:none; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  font-family:inherit;
}
.ff-input::placeholder{ color:#b3a796; }
.ff-input:focus{ border-color:var(--gold); background:#fff; box-shadow:0 0 0 4px rgba(201,162,75,.16); }
textarea.ff-input{ resize:none; line-height:1.5; }
select.ff-input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238e1b2e' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }

/* aside (desktop branding panel) */
.order-aside{ background:linear-gradient(160deg,#8e1b2e 0%,#5c1320 100%); position:relative; overflow:hidden; }
.order-aside::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0%, rgba(201,162,75,.22), transparent 60%); pointer-events:none; }
.order-benefit{ display:flex; align-items:center; gap:11px; color:#fbeede; font-size:13px; font-weight:600; }
.order-benefit .ico{ width:34px; height:34px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; background:rgba(255,255,255,.12); border:1px solid rgba(201,162,75,.4); }

/* ===== Product detail modal ===== */
.pd-stage{ background:linear-gradient(180deg,#fcfaf5 0%,#f1e9d8 100%); position:relative; }
.pd-stage img{ width:100%; height:100%; object-fit:contain; padding:22px; filter:drop-shadow(0 12px 22px rgba(28,20,19,.16)); }
.pd-cat{ display:inline-block; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dark); background:rgba(201,162,75,.14); border:1px solid rgba(201,162,75,.4); padding:4px 11px; border-radius:9999px; }
.pd-spec{ display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line); }
.pd-spec .ico{ width:34px; height:34px; flex:none; border-radius:10px; background:var(--cream); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:15px; }
.pd-spec b{ display:block; font-size:13px; color:var(--ink); }
.pd-spec span{ font-size:12px; color:var(--ink-soft); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--cream-2); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--gold),var(--rose)); border-radius:9px; }