/* tb-kopdar.css — tema khusus halaman kategori Kopdar & Komunitas */
:root{
  --td-blush:#fff7ed;
  --td-ivory:#fffdfa;
  --td-ink:#27272a;
  --td-muted:#71717a;
  --td-pink:#ea580c;
  --td-rose:#c2410c;
  --td-gold:#d97706;
  --td-line:#fed7aa;
  --td-card:#ffffff;
  --td-shadow:0 4px 24px rgba(234,88,12,.08);
}
body.tb-kopdar{
  background:var(--td-blush);color:var(--td-ink);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;margin:0;
}
body.tb-kopdar h1,body.tb-kopdar h2,body.tb-kopdar h3{
  font-family:Georgia,"Playfair Display","Times New Roman",serif;
  font-weight:700;color:var(--td-ink);font-style:normal;
}
/* nav */
.td-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,247,237,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--td-line);
}
.td-nav-inner{
  max-width:1100px;margin:0 auto;padding:.9rem 1.2rem;
  display:flex;align-items:center;justify-content:space-between;
}
.td-logo{font-family:Georgia,serif;font-size:1.25rem;color:var(--td-ink);text-decoration:none}
.td-logo b{color:var(--td-pink)}
.td-nav .links{display:flex;gap:1.4rem}
.td-nav .links a{color:var(--td-muted);text-decoration:none;font-size:.88rem;font-weight:500}
.td-nav .links a:hover{color:var(--td-pink)}
.td-burger{display:none;background:none;border:1px solid var(--td-line);border-radius:8px;
  font-size:1.2rem;padding:.3rem .7rem;color:var(--td-ink);cursor:pointer}
/* hero */
.td-hero{
  text-align:center;padding:3.5rem 1.2rem 2.5rem;
  background:linear-gradient(180deg,#fff7ed 0%,#ffedd5 50%,#fff7ed 100%);
  position:relative;overflow:hidden;
}
.td-hero::before{
  content:"🏍️ ⚙️ 🏁 🤝 🏍️";position:absolute;top:1rem;left:0;right:0;
  color:var(--td-rose);opacity:.35;font-size:.9rem;letter-spacing:10px;
}
.td-hero .kicker{
  display:inline-block;font-size:.78rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--td-pink);margin-bottom:1rem;font-weight:700;
  animation:tdFadeUp .8s ease both;
}
.td-hero h1{
  font-size:2.3rem;line-height:1.3;margin:0 0 1rem;max-width:680px;
  margin-left:auto;margin-right:auto;
  animation:tdFadeUp 1s ease .15s both;
}
.td-hero h1 em{color:var(--td-pink);font-style:normal}
.td-hero .lead{
  color:var(--td-muted);font-size:1.02rem;line-height:1.85;max-width:620px;margin:0 auto;
  animation:tdFadeUp 1.2s ease .3s both;
}
.td-hero .lead::after{
  content:"⚡";display:block;color:var(--td-rose);font-size:1.1rem;
  font-style:normal;margin-top:.8rem;opacity:.8;
}
@keyframes tdFadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
/* theme grid */
.td-section{max-width:1100px;margin:0 auto;padding:2rem 1.2rem 3rem}
.td-section h2{text-align:center;font-size:1.6rem;margin:0 0 .4rem}
.td-section .sub{text-align:center;color:var(--td-muted);margin:0 0 1.8rem;font-size:.92rem}
.td-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.td-card{
  background:var(--td-card);border:1px solid var(--td-line);border-radius:16px;
  overflow:hidden;box-shadow:var(--td-shadow);
  transition:transform .3s,box-shadow .3s;position:relative;
}
.td-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(234,88,12,.15)}
.td-card .td-img{position:relative;overflow:hidden}
.td-card img{width:100%;height:240px;object-fit:cover;display:block;transition:transform .4s}
.td-card:hover img{transform:scale(1.05)}
.td-card .td-price{font-size:.85rem;font-weight:700;padding:.55rem .6rem;border-radius:10px;text-align:center;flex:1;min-width:80px;color:var(--td-pink)}
.td-card-body{padding:1.1rem 1.2rem 1.3rem;text-align:center}
.td-card-body h3{font-size:1.05rem;margin:0 0 .8rem}
.td-card-actions{display:flex;flex-direction:column;gap:.5rem}
.td-btn{
  text-align:center;padding:.55rem;border-radius:10px;font-size:.82rem;font-weight:600;
  text-decoration:none;transition:all .25s;cursor:pointer;
}
.td-btn-demo{background:var(--td-ivory);border:1px solid var(--td-line);color:var(--td-ink)}
.td-btn-demo:hover{border-color:var(--td-pink);color:var(--td-pink)}
.td-btn-order{background:linear-gradient(135deg,var(--td-pink),#9a3412);color:#fff;border:none;
  box-shadow:0 4px 14px rgba(234,88,12,.35)}
.td-btn-order:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(234,88,12,.45)}
/* wa float */
.td-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);
}
.td-wa svg{width:28px;height:28px}
@media(max-width:768px){
  .td-nav .links{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--td-ivory);flex-direction:column;padding:1rem 1.2rem;
    border-bottom:1px solid var(--td-line);gap:.8rem}
  .td-nav .links.open{display:flex}
  .td-burger{display:block}
  .td-hero h1{font-size:1.7rem}
  .td-grid{grid-template-columns:repeat(2,1fr);gap:.9rem}
}
@media(max-width:480px){
  .td-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .td-card img{height:170px}
  .td-card-body{padding:.8rem .7rem 1rem}
  .td-card-body h3{font-size:.88rem}
  .td-btn{font-size:.75rem;padding:.55rem .3rem}
  .td-hero{padding:2.5rem 1rem 2rem}
}