/* tb-warm.css — tema hangat elegan khusus landing ThemeBox. */
:root{
  --tb-cream:#fdf8f2;
  --tb-ivory:#fffdf9;
  --tb-ink:#3d3229;
  --tb-muted:#8a7a6a;
  --tb-gold:#c9a227;
  --tb-gold-soft:#e8d5a3;
  --tb-rose:#c4707e;
  --tb-line:#e8ddd0;
  --tb-card:#ffffff;
  --tb-shadow:0 4px 24px rgba(160,120,60,.08);
}
body.tb-warm{
  background:var(--tb-cream);
  color:var(--tb-ink);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  margin:0;
}
body.tb-warm h1,body.tb-warm h2,body.tb-warm h3{
  font-family:Georgia,"Playfair Display","Times New Roman",serif;
  font-weight:600;color:var(--tb-ink);font-style:normal;
}
/* nav */
.tb-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(253,248,242,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--tb-line);
}
.tb-nav-inner{
  max-width:1100px;margin:0 auto;padding:.9rem 1.2rem;
  display:flex;align-items:center;justify-content:space-between;
}
.tb-logo{font-family:Georgia,serif;font-size:1.25rem;color:var(--tb-ink);text-decoration:none}
.tb-logo b{color:var(--tb-gold)}
.tb-nav .links{display:flex;gap:1.4rem}
.tb-nav .links a{color:var(--tb-muted);text-decoration:none;font-size:.88rem}
.tb-nav .links a:hover{color:var(--tb-gold)}
.tb-burger{display:none;background:none;border:1px solid var(--tb-line);border-radius:8px;
  font-size:1.2rem;padding:.3rem .7rem;color:var(--tb-ink);cursor:pointer}
/* hero */
.tb-hero{
  text-align:center;padding:4rem 1.2rem 3rem;
  background:linear-gradient(180deg,#fdf8f2 0%,#f9f0e3 100%);
}
.tb-hero .kicker{
  display:inline-block;font-size:.78rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--tb-gold);margin-bottom:1rem;
}
.tb-hero h1{font-size:2.4rem;line-height:1.25;margin:0 0 1rem;max-width:640px;margin-left:auto;margin-right:auto}
.tb-hero h1 em{color:var(--tb-gold);font-style:normal}
.tb-hero .lead{
  color:var(--tb-muted);font-size:1.05rem;line-height:1.9;max-width:600px;margin:0 auto;
  font-style:italic;position:relative;padding:0 1rem;
  animation:tbFadeUp 1.2s ease .3s both;
}
.tb-hero .lead::before,.tb-hero .lead::after{
  content:"❦";display:block;color:var(--tb-gold-soft);font-size:1.2rem;
  font-style:normal;margin:.6rem 0;opacity:.7;
}
.tb-hero .kicker{animation:tbFadeUp .8s ease both}
.tb-hero h1{animation:tbFadeUp 1s ease .15s both}
.tb-hero .tb-cta-big{animation:tbFadeUp 1.4s ease .45s both}
@keyframes tbFadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
/* sections */
.tb-section{max-width:1100px;margin:0 auto;padding:2.5rem 1.2rem}
.tb-section h2{text-align:center;font-size:1.7rem;margin:0 0 .6rem}
.tb-section .sub{text-align:center;color:var(--tb-muted);margin:0 0 1.8rem;font-size:.95rem}
/* kategori chips */
.tb-chips{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.tb-chip{
  padding:.55rem 1.2rem;border-radius:999px;border:1px solid var(--tb-line);
  background:var(--tb-ivory);color:var(--tb-muted);font-size:.86rem;cursor:pointer;
  transition:all .2s;
}
.tb-chip:hover{border-color:var(--tb-gold);color:var(--tb-gold)}
.tb-chip.active{background:var(--tb-gold);border-color:var(--tb-gold);color:#fff}
/* katalog grid */
.tb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.tb-card{
  background:var(--tb-card);border:1px solid var(--tb-line);border-radius:14px;
  overflow:hidden;box-shadow:var(--tb-shadow);transition:transform .25s,box-shadow .25s;
}
.tb-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(160,120,60,.14)}
.tb-card img{width:100%;height:220px;object-fit:cover;display:block}
.tb-card-body{padding:1rem 1.1rem}
.tb-card-body h3{font-size:1rem;margin:0 0 .3rem}
.tb-card-body .price{color:var(--tb-gold);font-weight:700;font-size:.95rem}
.tb-card-actions{display:flex;gap:.6rem;margin-top:.8rem}
.tb-btn{
  flex:1;text-align:center;padding:.6rem;border-radius:8px;font-size:.84rem;
  text-decoration:none;transition:all .2s;cursor:pointer;border:1px solid transparent;
}
.tb-btn-demo{background:var(--tb-ivory);border-color:var(--tb-line);color:var(--tb-ink)}
.tb-btn-demo:hover{border-color:var(--tb-gold);color:var(--tb-gold)}
.tb-btn-order{background:var(--tb-gold);color:#fff}
.tb-btn-order:hover{background:#b08d1f}
/* harga */
.tb-harga{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.tb-tier{
  background:var(--tb-card);border:1px solid var(--tb-line);border-radius:14px;
  padding:1.6rem 1.3rem;text-align:center;box-shadow:var(--tb-shadow);position:relative;
}
.tb-tier.hot{border:2px solid var(--tb-gold);transform:scale(1.03)}
.tb-tier .badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--tb-gold);color:#fff;font-size:.72rem;padding:.25rem .9rem;border-radius:999px;
  letter-spacing:1px;
}
.tb-tier h3{font-size:1.1rem;margin:0 0 .4rem}
.tb-tier .amount{font-size:1.8rem;color:var(--tb-gold);font-weight:700;margin:.6rem 0}
.tb-tier ul{list-style:none;padding:0;margin:1rem 0;text-align:left;font-size:.88rem;color:var(--tb-muted);line-height:2}
.tb-tier ul li::before{content:"✓ ";color:var(--tb-gold)}
/* faq */
.tb-faq{max-width:680px;margin:0 auto}
.tb-qa{border:1px solid var(--tb-line);border-radius:10px;margin-bottom:.7rem;background:var(--tb-card);overflow:hidden}
.tb-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:1rem 1.2rem;font-size:.95rem;color:var(--tb-ink);font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
}
.tb-q::after{content:"+";color:var(--tb-gold);font-size:1.3rem}
.tb-qa.open .tb-q::after{content:"−"}
.tb-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.tb-qa.open .tb-a{max-height:300px}
.tb-a p{padding:0 1.2rem 1rem;margin:0;color:var(--tb-muted);font-size:.9rem;line-height:1.7}
/* testimoni compact */
.tb-testi{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory}
.tb-testi-card{
  flex:0 0 280px;background:var(--tb-card);border:1px solid var(--tb-line);
  border-radius:12px;padding:1.2rem;scroll-snap-align:start;box-shadow:var(--tb-shadow);
}
.tb-testi-card .stars{color:var(--tb-gold);margin-bottom:.5rem;letter-spacing:2px}
.tb-testi-card p{font-size:.88rem;color:var(--tb-muted);line-height:1.65;margin:0 0 .7rem;font-style:italic}
.tb-testi-card b{font-size:.84rem;color:var(--tb-ink)}
/* slideshow testimoni */
.tb-slideshow{max-width:560px;margin:0 auto;text-align:center}
.tb-slide-card{
  background:var(--tb-card);border:1px solid var(--tb-line);border-radius:16px;
  padding:2rem 1.8rem;box-shadow:var(--tb-shadow);min-height:180px;
  display:flex;flex-direction:column;justify-content:center;
  transition:opacity .4s ease;
}
.tb-slide-card.fade{opacity:0}
.tb-slide-card .stars{color:var(--tb-gold);letter-spacing:3px;margin-bottom:.8rem;font-size:1.1rem}
.tb-slide-card p{font-size:1rem;color:var(--tb-muted);line-height:1.7;margin:0 0 1rem;font-style:italic}
.tb-slide-card b{color:var(--tb-ink);font-size:.9rem}
.tb-slide-dots{display:flex;gap:.4rem;justify-content:center;margin-top:1rem}
.tb-dot{width:8px;height:8px;border-radius:50%;background:var(--tb-line);cursor:pointer;transition:all .3s}
.tb-dot.active{background:var(--tb-gold);width:24px;border-radius:4px}
/* cta */
.tb-cta{
  text-align:center;padding:3rem 1.2rem;
  background:linear-gradient(135deg,#f9f0e3,#fdf8f2);
  border-top:1px solid var(--tb-line);
}
.tb-cta h2{font-size:1.8rem;margin:0 0 .8rem}
.tb-cta p{color:var(--tb-muted);margin:0 0 1.5rem}
.tb-cta-big{
  display:inline-block;background:var(--tb-gold);color:#fff;text-decoration:none;
  padding:1rem 2.5rem;border-radius:999px;font-size:1rem;font-weight:600;
  box-shadow:0 8px 24px rgba(201,162,39,.3);transition:all .25s;
}
.tb-cta-big:hover{background:#b08d1f;transform:translateY(-2px);box-shadow:0 12px 32px rgba(201,162,39,.4)}
/* wa float */
.tb-wa{
  position:fixed;bottom:1.2rem;right:1.2rem;z-index:60;
  width:52px;height:52px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(37,211,102,.4);transition:transform .2s;
}
.tb-wa:hover{transform:scale(1.1)}
.tb-wa svg{width:28px;height:28px}
/* kategori cards cantik */
.tb-cat-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:1.2rem;max-width:1080px;margin:0 auto}
.tb-cat-card{
  position:relative;display:block;text-decoration:none;text-align:center;
  background:var(--tb-card);border:1px solid var(--tb-line);border-radius:18px;
  padding:2rem 1.2rem 1.6rem;box-shadow:var(--tb-shadow);
  transition:transform .3s,box-shadow .3s;overflow:hidden;
}
.tb-cat-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--cat-accent),transparent);
}
.tb-cat-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(160,120,60,.16)}
.tb-cat-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;font-size:2.2rem;margin-bottom:1rem;
  background:color-mix(in srgb,var(--cat-accent) 12%,#fff);
  transition:transform .3s;
}
.tb-cat-card:hover .tb-cat-icon{transform:scale(1.12) rotate(-6deg)}
.tb-cat-card h3{
  font-size:1.25rem;margin:0 0 .9rem;
  background:linear-gradient(135deg,var(--cat-accent),var(--tb-ink));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:.5px;
}
.tb-cat-card p{color:var(--tb-muted);font-size:.87rem;line-height:1.6;margin:0 0 .9rem;min-height:2.8em}
.tb-cat-count{
  display:inline-block;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--cat-accent);border:1px solid var(--cat-accent);border-radius:999px;
  padding:.25rem .9rem;margin-bottom:1rem;
}
.tb-cat-arrow{
  display:block;font-size:.88rem;font-weight:600;color:var(--cat-accent);
  transition:transform .25s;
}
.tb-cat-card:hover .tb-cat-arrow{transform:translateX(4px)}
@media(max-width:768px){.tb-cat-grid{grid-template-columns:repeat(2,1fr);gap:.9rem}}
@media(max-width:480px){
  .tb-cat-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .tb-cat-card{padding:1.2rem .7rem 1rem}
  .tb-cat-icon{width:52px;height:52px;font-size:1.6rem}
  .tb-cat-card h3{font-size:.95rem}
  .tb-cat-card p{font-size:.75rem;min-height:0}
  .tb-cat-count{font-size:.62rem;padding:.2rem .6rem}
}
/* responsive */
@media(max-width:768px){
  .tb-nav .links{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--tb-ivory);flex-direction:column;padding:1rem 1.2rem;
    border-bottom:1px solid var(--tb-line);gap:.8rem}
  .tb-nav .links.open{display:flex}
  .tb-burger{display:block}
  .tb-hero h1{font-size:1.7rem}
  .tb-grid{grid-template-columns:repeat(2,1fr);gap:.9rem}
  .tb-harga{grid-template-columns:1fr;max-width:380px;margin:0 auto}
  .tb-tier.hot{transform:none}
}
@media(max-width:480px){
  .tb-grid{grid-template-columns:1fr}
  .tb-hero{padding:2.5rem 1rem 2rem}
}