/* =====================================================
   RAK KAYU - POSTER ADS LANDING PAGE
   Fokus: trust, urgency, checkout, tombol beli hijau.
   ===================================================== */
:root{
  --color-bg:        #F8F5EE;
  --color-bg-alt:    #EEE2CE;
  --color-surface:   #FFFFFF;
  --color-text:      #221A14;
  --color-text-muted:#6F6258;
  --color-primary:   #4A2F1D;
  --color-primary-dark:#27180F;
  --color-accent:    #D58C2E;
  --color-sale:      #D83A2E;
  --color-cart:      #16A34A;
  --color-cart-dark: #0F7A35;
  --color-success:   #25D366;
  --color-border:    #E0D1BA;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 8px 24px rgba(44, 28, 15, .10);
  --shadow-strong: 0 18px 48px rgba(36, 20, 10, .22);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  padding-bottom: 78px;
}

h1,h2,h3,.font-display{ font-family: var(--font-display); }
a{ color: var(--color-primary); }
.text-muted-custom{ color: var(--color-text-muted); }

/* ---------- Top trust strip ---------- */
.trust-strip{
  background: var(--color-primary-dark);
  color:#F8EBD7;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.01em;
}
.trust-strip i{ color:#6EE7A5; }

/* ---------- Hero poster ---------- */
.poster-band{
  padding: 3rem 0 3.8rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(238,226,206,.76) 48%, rgba(255,255,255,.88) 100%),
    repeating-linear-gradient(90deg, rgba(74,47,29,.06) 0 1px, transparent 1px 56px);
  border-bottom:1px solid var(--color-border);
}

.story-step{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:#fff;
  border:1px solid var(--color-border);
  color: var(--color-primary);
  border-radius:999px;
  padding:.45rem .85rem;
  font-size:.78rem;
  font-weight:800;
  box-shadow: var(--shadow-soft);
}
.story-step::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--color-cart);
  box-shadow:0 0 0 5px rgba(22,163,74,.13);
}

.hero-title{
  font-size: clamp(2.35rem, 5vw, 4.8rem);
  line-height:.96;
  font-weight:800;
  letter-spacing:0;
  max-width: 720px;
}
.hero-subtitle{
  color:var(--color-text-muted);
  font-size:1.06rem;
  line-height:1.65;
  max-width: 610px;
}

.poster-photo-wrap{
  position:relative;
}
.gallery-main{
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-strong);
  background:#fff;
  aspect-ratio: 1/1;
  object-fit: cover;
  border:8px solid #fff;
}
.floating-proof{
  position:absolute;
  left:18px;
  top:18px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:.55rem;
  background:#fff;
  color:var(--color-primary-dark);
  border-radius:999px;
  padding:.55rem .85rem;
  font-size:.86rem;
  font-weight:800;
  box-shadow: var(--shadow-strong);
}
.floating-proof i{ color:var(--color-cart); font-size:1.05rem; }

.gallery-thumb{
  border-radius: var(--radius-sm);
  overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: border-color .15s ease, transform .15s ease;
  background:#fff;
}
.gallery-thumb.active,.gallery-thumb:hover{
  border-color: var(--color-cart);
  transform: translateY(-1px);
}

.badge-diskon,
.badge-stok,
.badge-safe{
  border-radius:999px;
  padding:.4rem .75rem;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.76rem;
  font-weight:900;
}
.badge-diskon{ background:var(--color-sale); color:#fff; }
.badge-stok{ background:rgba(22,163,74,.12); color:var(--color-cart-dark); }
.badge-safe{ background:#fff; color:var(--color-primary); border:1px solid var(--color-border); }

.rating-stars{ color:#F3A51D; }
.trust-proof-row{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  color:var(--color-text-muted);
  font-size:.9rem;
}
.trust-proof-row > div{
  background:rgba(255,255,255,.72);
  border:1px solid var(--color-border);
  border-radius:999px;
  padding:.45rem .7rem;
}
.trust-proof-row i{ color:var(--color-cart); }

.harga-coret{
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-size:1.05rem;
}
.harga-asli{
  color: var(--color-sale);
  font-weight:900;
  font-size:2.25rem;
  font-family: var(--font-display);
  line-height:1;
}
.price-poster{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:1rem;
  width:max-content;
  max-width:100%;
  box-shadow: var(--shadow-soft);
}

.urgency-bar{
  background: rgba(216,58,46,.10);
  color: var(--color-sale);
  border:1px dashed var(--color-sale);
  border-radius: var(--radius-sm);
  font-size:.88rem;
  font-weight:800;
}

.micro-trust{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.65rem;
}
.micro-trust span{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:.7rem;
  font-size:.82rem;
  font-weight:800;
}
.micro-trust i{ color:var(--color-cart); margin-right:.25rem; }

/* ---------- CTA buttons ---------- */
.btn-beli{
  background: var(--color-cart);
  border-color: var(--color-cart);
  color:#fff;
  font-weight:900;
  border-radius: var(--radius-sm);
  box-shadow:0 12px 24px rgba(22,163,74,.22);
}
.btn-beli:hover,
.btn-beli:focus{
  background: var(--color-cart-dark);
  border-color: var(--color-cart-dark);
  color:#fff;
}
.btn-wa{
  background: var(--color-success);
  border-color: var(--color-success);
  color:#fff;
  font-weight:900;
  border-radius: var(--radius-sm);
}
.btn-wa:hover{ background:#1EBE5A; border-color:#1EBE5A; color:#fff; }

/* ---------- Story cards ---------- */
.story-scroll{
  background:#fff;
}
.poster-card{
  position:relative;
  min-height: 310px;
  height:100%;
  padding:1.35rem;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:linear-gradient(180deg,#fff 0%, #F7EFE2 100%);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.poster-card::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-34px;
  width:118px;
  height:118px;
  border-radius:999px;
  background:rgba(213,140,46,.14);
}
.poster-card h2{
  position:relative;
  font-size:2rem;
  line-height:1;
  font-weight:800;
  margin:4.6rem 0 1rem;
}
.poster-card p{
  position:relative;
  color:var(--color-text-muted);
  line-height:1.6;
  margin:0;
}
.poster-number{
  position:absolute;
  top:1.1rem;
  left:1.25rem;
  color:rgba(34,26,20,.12);
  font-size:4.2rem;
  line-height:1;
  font-family:var(--font-display);
  font-weight:800;
}
.danger-card{ background:linear-gradient(180deg,#fff 0%, #FBE4DF 100%); }
.success-card{ background:linear-gradient(180deg,#fff 0%, #E2F6EA 100%); }

/* ---------- Section titles ---------- */
.section-eyebrow{
  color: var(--color-cart-dark);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.76rem;
  font-weight:900;
}
.section-title{
  font-family: var(--font-display);
  font-weight:800;
  letter-spacing:0;
}

/* ---------- Before / After ---------- */
.before-after-section{
  background:var(--color-bg);
}
.before-after-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.before-box,
.after-box{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:1rem;
  box-shadow:var(--shadow-soft);
}
.label-pill{
  display:inline-flex;
  padding:.35rem .7rem;
  border-radius:999px;
  background:var(--color-primary-dark);
  color:#fff;
  font-weight:900;
  font-size:.78rem;
  margin-bottom:1rem;
}
.wall-visual{
  min-height:240px;
  border-radius:var(--radius-md);
  background:
    linear-gradient(90deg, rgba(74,47,29,.09) 1px, transparent 1px),
    linear-gradient(180deg, rgba(74,47,29,.09) 1px, transparent 1px),
    #F3E8D8;
  background-size:42px 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  color:var(--color-primary);
  font-size:2.1rem;
  position:relative;
  overflow:hidden;
}
.wall-visual.clutter i{
  transform: translateY(42px) rotate(-7deg);
  color:#A14C3D;
}
.wall-visual.neat{
  align-items:flex-start;
  padding-top:78px;
}
.wall-visual.neat i{
  position:relative;
  z-index:2;
  color:var(--color-cart-dark);
}
.mini-shelf{
  position:absolute;
  top:128px;
  left:16%;
  right:16%;
  height:16px;
  background:#8A5A32;
  border-radius:4px;
  box-shadow:0 12px 20px rgba(74,47,29,.18);
}
.before-box p,
.after-box p{
  color:var(--color-text-muted);
  margin:1rem 0 0;
  font-weight:700;
}

/* ---------- Trust proof ---------- */
.trust-proof-section{
  background:#fff;
}
.card-keunggulan{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:1.25rem;
  height:100%;
  box-shadow: var(--shadow-soft);
}
.card-keunggulan .icon-wrap{
  width:44px;
  height:44px;
  border-radius:12px;
  background: rgba(22,163,74,.12);
  color: var(--color-cart-dark);
  display:flex;
  align-items:center;
  justify-content:center;
}
.security-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.85rem;
}
.security-strip > div{
  background:var(--color-primary-dark);
  color:#fff;
  border-radius:var(--radius-md);
  padding:1rem;
  display:grid;
  gap:.15rem;
}
.security-strip i{ color:#6EE7A5; font-size:1.35rem; }
.security-strip strong{ font-weight:900; }
.security-strip span{ color:#EBDCC9; font-size:.86rem; }

/* ---------- Material ---------- */
.material-poster{
  background:var(--color-bg-alt);
}
.material-diagram{
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
}
.material-layer{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.85rem 0;
  border-bottom:1px dashed var(--color-border);
}
.material-layer:last-child{ border-bottom:none; }
.material-layer .swatch{
  width:38px;
  height:38px;
  border-radius:8px;
  flex:0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* ---------- Variants ---------- */
.variant-section{
  background:#fff;
}
.varian-swatch{
  width:40px;
  height:40px;
  border-radius:50%;
  border:3px solid var(--color-surface);
  outline:2px solid var(--color-border);
  cursor:pointer;
}
.varian-swatch.active{ outline:3px solid var(--color-cart); }
.btn-varian{
  border:1.5px solid var(--color-border);
  background:#fff;
  border-radius: var(--radius-sm);
  padding:.5rem .9rem;
  font-size:.88rem;
  font-weight:800;
  color: var(--color-text);
}
.btn-varian.active{
  border-color: var(--color-cart);
  background: rgba(22,163,74,.11);
  color: var(--color-cart-dark);
}
.qty-control{
  display:inline-flex;
  align-items:center;
  border:1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow:hidden;
  background:#fff;
}
.qty-control button{
  background: var(--color-bg-alt);
  border:none;
  width:40px;
  height:40px;
  font-size:1.1rem;
  color: var(--color-primary);
  font-weight:900;
}
.qty-control input{
  width:52px;
  text-align:center;
  border:none;
  background:transparent;
  font-weight:900;
}
.package-panel{
  height:100%;
  background:var(--color-primary-dark);
  color:#fff;
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.package-panel li{ margin:.35rem 0; color:#F3E8D8; }

/* ---------- Promo ---------- */
.promo-section{
  background:linear-gradient(135deg, #172012 0%, #16412B 100%);
  color:#fff;
}
.promo-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
}
.promo-panel h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem,4vw,4rem);
  line-height:.98;
  max-width:850px;
}
.promo-panel p{
  color:#D8EBDD;
  max-width:680px;
  margin:1rem 0 0;
}

/* ---------- Testimoni ---------- */
.testimonial-section{
  background:var(--color-bg-alt);
}
.card-testimoni{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:1.1rem;
  height:100%;
  box-shadow: var(--shadow-soft);
}
.avatar-initial{
  width:38px;
  height:38px;
  border-radius:50%;
  background: var(--color-primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:.9rem;
}

/* ---------- Accordion ---------- */
.accordion-item{
  border-color:var(--color-border);
}
.accordion-button:not(.collapsed){
  background: rgba(22,163,74,.10);
  color: var(--color-primary-dark);
  box-shadow:none;
}
.accordion-button:focus{ box-shadow:none; border-color: var(--color-border); }

/* ---------- Order/checkout section ---------- */
.checkout-section{
  background:var(--color-bg-alt);
}
.order-panel{
  background:#fff;
  border-radius: var(--radius-lg);
  border:1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
.summary-panel{
  position:sticky;
  top:1rem;
}
.order-summary-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.92rem;
  padding:.35rem 0;
}
.order-summary-total{
  font-family: var(--font-display);
  font-weight:900;
  font-size:1.45rem;
  color: var(--color-sale);
}
.form-control:focus,.form-select:focus{
  border-color: var(--color-cart);
  box-shadow: 0 0 0 .2rem rgba(22,163,74,.16);
}

/* ---------- Sticky bottom bar ---------- */
.sticky-cta-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1030;
  background:#fff;
  border-top:1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgba(60,40,20,.12);
  padding:.6rem .8rem;
}

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed;
  right:16px;
  bottom:92px;
  z-index:1035;
  width:52px;
  height:52px;
  border-radius:50%;
  background: var(--color-success);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow-strong);
}

/* ---------- Footer ---------- */
footer{
  background: var(--color-primary-dark);
  color: #E9DCC7;
}
footer a{ color:#E9DCC7; }

/* ---------- Utility ---------- */
.rounded-xl{ border-radius: var(--radius-lg); }
.shadow-soft{ box-shadow: var(--shadow-soft); }

@media (max-width: 991.98px){
  .poster-band{ padding-top:2rem; }
  .micro-trust,
  .security-strip,
  .before-after-grid{
    grid-template-columns:1fr;
  }
  .promo-panel{
    align-items:flex-start;
    flex-direction:column;
  }
  .summary-panel{ position:static; }
}

@media (max-width: 767.98px){
  .hero-title{ font-size:2.45rem; }
  .harga-asli{ font-size:1.85rem; }
  .wall-visual{ min-height:190px; }
  .poster-card{ min-height:250px; }
  .poster-card h2{ font-size:1.7rem; }
  .trust-proof-row > div{ width:100%; }
}
.before-after-image{
    width:100%;
    height:380px;
    object-fit:cover;
    object-position:center;
    border-radius:1rem;
}