:root{
  --indigo:#1b2a5e;      /* nila / indigo tua */
  --indigo-deep:#111b44;
  --soga:#6b3f22;        /* coklat soga */
  --soga-dark:#4a2a14;
  --gold:#d9b23f;        /* emas */
  --gold-soft:#f1dd9a;
  --red:#a3301f;         /* merah bata, aksen secukupnya */
  --cream:#fbf5e6;       /* krem kertas */
  --cream-2:#f3e9d0;
  --ink:#2a2018;
  --muted:#5a4a3b;
  --kawung-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23e2c25a' stroke-opacity='0.55' stroke-width='1.4'%3E%3Cellipse cx='24' cy='10' rx='5.5' ry='10'/%3E%3Cellipse cx='24' cy='38' rx='5.5' ry='10'/%3E%3Cellipse cx='10' cy='24' rx='10' ry='5.5'/%3E%3Cellipse cx='38' cy='24' rx='10' ry='5.5'/%3E%3Ccircle cx='24' cy='24' r='2.4' fill='%23e2c25a' fill-opacity='0.55'/%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='48' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='48' r='2.4'/%3E%3Ccircle cx='48' cy='48' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --kawung-gold-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23e2c25a' stroke-opacity='0.22' stroke-width='1.4'%3E%3Cellipse cx='24' cy='10' rx='5.5' ry='10'/%3E%3Cellipse cx='24' cy='38' rx='5.5' ry='10'/%3E%3Cellipse cx='10' cy='24' rx='10' ry='5.5'/%3E%3Cellipse cx='38' cy='24' rx='10' ry='5.5'/%3E%3Ccircle cx='24' cy='24' r='2.4' fill='%23e2c25a' fill-opacity='0.22'/%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='48' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='48' r='2.4'/%3E%3Ccircle cx='48' cy='48' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --kawung-soga:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%237a4a2a' stroke-opacity='0.14' stroke-width='1.4'%3E%3Cellipse cx='24' cy='10' rx='5.5' ry='10'/%3E%3Cellipse cx='24' cy='38' rx='5.5' ry='10'/%3E%3Cellipse cx='10' cy='24' rx='10' ry='5.5'/%3E%3Cellipse cx='38' cy='24' rx='10' ry='5.5'/%3E%3Ccircle cx='24' cy='24' r='2.4' fill='%237a4a2a' fill-opacity='0.14'/%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='48' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='48' r='2.4'/%3E%3Ccircle cx='48' cy='48' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.65;color:var(--ink);background:var(--cream)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.25}
img{max-width:100%;height:auto}
a{color:var(--indigo)}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.container{width:min(1100px,92%);margin:0 auto}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#111;padding:.6rem 1rem;z-index:20}
.skip:focus{left:0}

/* ---- batik kawung bands ---- */
.batik-band{height:26px;background-color:var(--soga-dark);background-image:var(--kawung-gold);background-size:26px 26px;border-top:2px solid var(--gold);border-bottom:2px solid var(--gold)}
.batik-divider{height:20px;margin:40px 0 8px;background-color:var(--indigo);background-image:var(--kawung-gold);background-size:20px 20px;border-radius:3px;box-shadow:0 0 0 2px var(--cream),0 0 0 3px var(--gold)}

/* ---- header ---- */
header.site{background-color:var(--indigo);background-image:var(--kawung-gold-soft);background-size:48px 48px;color:#fff;text-align:center;padding:1.4rem 0 1.2rem}
header.site .logo-wrap{display:inline-block;background:#fff;padding:6px 10px;border-radius:6px;border:2px solid var(--gold)}
header.site h1{margin:.7rem auto .3rem;font-size:clamp(1.35rem,3.4vw,1.9rem);max-width:30ch;text-wrap:balance}
header.site .tagline{margin:0 0 .9rem;color:var(--gold-soft);font-style:italic}
nav.primary{background:var(--indigo-deep);border-bottom:3px solid var(--red)}
nav.primary ul{list-style:none;margin:0 auto;padding:.4rem 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem .3rem;width:min(1100px,96%)}
nav.primary a{display:block;padding:.55rem .9rem;color:#fff;text-decoration:none;font-weight:600;border-radius:4px}
nav.primary a:hover{background:rgba(255,255,255,.14);text-decoration:underline}
nav.primary a.shop{background:var(--gold);color:#1a1405}
nav.primary a.shop:hover{background:#ecc653}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;align-items:center;margin:32px 0;padding:30px;background:var(--cream-2);border:1px solid #d9c79c;border-radius:10px;position:relative}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:10px;border-radius:10px 10px 0 0;background-color:var(--soga);background-image:var(--kawung-gold);background-size:14px 14px}
.hero h2{margin:.5rem 0 .6rem;font-size:clamp(1.5rem,3.6vw,2.1rem);color:var(--indigo)}
.hero p{margin:0 0 .9rem;color:var(--muted)}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--red);padding:.2rem .65rem;border-radius:999px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:.4rem}
.btn{display:inline-block;padding:.8rem 1.25rem;border-radius:6px;text-decoration:none;font-weight:700;border:2px solid transparent}
.btn-primary{background:var(--indigo);color:#fff}
.btn-primary:hover{background:var(--indigo-deep)}
.btn-gold{background:var(--gold);color:#1a1405;border-color:#a98618}
.btn-gold:hover{background:#ecc653}
.btn-ghost{background:#fff;color:var(--indigo);border-color:var(--indigo)}
.btn-ghost:hover{background:#eef0fa}

/* ---- all products photo block ---- */
a.all-products{display:block;position:relative;border-radius:10px;overflow:hidden;background:#fff;text-decoration:none;border:3px solid var(--soga);box-shadow:0 0 0 3px var(--gold),0 8px 20px rgba(42,32,24,.25)}
a.all-products img{display:block;width:100%;height:auto}
a.all-products>span{display:block;text-align:center;background-color:var(--indigo);background-image:var(--kawung-gold-soft);background-size:36px 36px;color:#fff;font-weight:700;font-size:1.05rem;padding:.7rem 1rem;border-top:3px solid var(--gold)}
a.all-products:hover>span{background-color:var(--indigo-deep);text-decoration:underline}

/* ---- sections ---- */
h2.section-title{text-align:center;color:var(--indigo);margin:34px 0 6px;font-size:1.65rem}
p.section-sub{text-align:center;color:var(--muted);margin:0 auto 22px;max-width:70ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fffdf7;border:1px solid #d9c79c;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 3px 10px rgba(74,42,20,.12)}
.card.featured{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 3px 10px rgba(74,42,20,.15)}
.card-media{background-color:var(--cream-2);background-image:var(--kawung-soga);background-size:48px 48px;border-bottom:4px solid var(--soga);padding:12px}
.card-media img{display:block;margin:0 auto;height:210px;width:auto;object-fit:contain;background:#fff;border-radius:6px}
.card-info{padding:18px;display:flex;flex-direction:column;flex:1}
.card-info h3{margin:.2rem 0 .5rem;color:var(--indigo);font-size:1.2rem}
.card-info p{margin:0 0 .7rem;color:var(--muted);font-size:.95rem}
.card-info ul{margin:0 0 1rem;padding-left:1.1rem;color:var(--muted);font-size:.92rem}
.card-info .btn{margin-top:auto;align-self:flex-start}
.badge{display:inline-block;align-self:flex-start;background:var(--gold);color:#1a1405;font-weight:700;font-size:.75rem;padding:.15rem .65rem;border-radius:999px}

.panel{background:var(--cream-2);border:1px solid #d9c79c;border-left:6px solid var(--red);border-radius:8px;padding:22px 26px;margin:26px 0}
.panel h2{margin:0 0 .5rem;color:var(--indigo);font-size:1.35rem}
.panel p,.panel li{color:var(--muted)}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:26px 0;padding:0;list-style:none}
.trust li{background:var(--indigo);color:#fff;font-weight:600;padding:.6rem 1.1rem;border-radius:999px;border:2px solid var(--gold)}

/* ---- video (click to load) ---- */
.video{max-width:760px;margin:0 auto}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--indigo-deep),var(--soga-dark));border:3px solid var(--soga);border-radius:10px;overflow:hidden;box-shadow:0 0 0 3px var(--gold)}
.video-frame::before{content:"";position:absolute;inset:0;background-image:var(--kawung-gold-soft);background-size:56px 56px;opacity:.9}
.video-frame button{position:absolute;inset:0;width:100%;border:0;background:transparent;color:#fff;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem}
.video-frame .play{width:76px;height:76px;border-radius:50%;background:var(--gold);display:grid;place-items:center;border:3px solid #fff}
.video-frame .play::after{content:"";margin-left:6px;border-left:24px solid var(--indigo-deep);border-top:15px solid transparent;border-bottom:15px solid transparent}
.video-frame .label{background:rgba(17,27,68,.85);padding:.35rem .9rem;border-radius:6px;font-weight:600}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-caption{text-align:center;font-style:italic;color:var(--muted);margin:.7rem 0 0;font-size:.95rem}

.thanks{margin:30px auto 6px;max-width:62ch;text-align:center;font-family:Georgia,serif;font-style:italic;color:var(--soga-dark);border-top:1px dashed var(--soga);border-bottom:1px dashed var(--soga);padding:.8rem 1rem}
.disclaimer{font-size:.85rem;color:#4e4034;text-align:center;margin:20px 0 8px}
.nap{font-size:.9rem;color:var(--muted);text-align:center;margin:10px 0}

footer.site{margin-top:0;background-color:var(--soga-dark);color:#fff;text-align:center;padding:0 0 22px}
footer.site .inner{padding-top:20px}
footer.site a{color:var(--gold-soft)}
footer.site p{margin:.35rem 0}
footer.site .small{font-size:.82rem;color:#e6dcc9}

@media (max-width:900px){.grid{grid-template-columns:1fr}.hero{grid-template-columns:1fr;padding:26px 18px 22px}.card-media img{height:190px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ================= additions for inner pages (v1) ================= */
nav.primary a[aria-current="page"]{background:rgba(255,255,255,.18);box-shadow:inset 0 -3px 0 var(--gold)}
header.site .brand{margin:.7rem auto .3rem;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:clamp(1.25rem,3.2vw,1.7rem)}
header.site .brand a{color:#fff;text-decoration:none}

/* neutral batik placeholder for product pack shots (until Indonesia images are saved) */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;background-color:var(--indigo);background-image:var(--kawung-gold);background-size:34px 34px;border-radius:6px;border:2px solid var(--gold);color:#fff;font-family:Georgia,serif;font-weight:700;padding:14px}
.ph b{display:block;background:rgba(17,27,68,.88);padding:.45rem .8rem;border-radius:6px;font-size:1.02rem;line-height:1.3;max-width:90%}
.card-media .ph{height:210px}
.ph-wide{aspect-ratio:2/1;border:0;border-radius:0;font-size:1.3rem}
.ph-wide b{font-size:1.2rem}

/* inner pages */
.page-head{margin:30px 0 8px;text-align:center}
.page-head h1{margin:.2rem 0 .4rem;color:var(--indigo);font-size:clamp(1.55rem,4vw,2.2rem)}
.page-head p{margin:0 auto;max-width:68ch;color:var(--muted)}
.crumbs{font-size:.88rem;color:var(--muted);text-align:center;margin:16px 0 0}
.crumbs a{color:var(--soga)}
.cat-title{margin:34px 0 4px;color:var(--soga-dark);font-size:1.35rem;border-bottom:3px double var(--gold);padding-bottom:.25rem}
.cat-note{margin:0 0 16px;color:var(--muted);font-size:.95rem}
.grid.grid-4{grid-template-columns:repeat(4,1fr)}
.grid.grid-4 .card-info h3{font-size:1.08rem}
.card-info .more{margin-top:auto;align-self:flex-start;font-weight:700;color:var(--indigo)}
.note{background:#fff8e1;border:1px solid #e3cf8a;border-radius:8px;padding:12px 16px;margin:20px 0;font-size:.93rem;color:#4a3b1c}
.prose{max-width:78ch;margin:0 auto}
.prose h2{color:var(--indigo);margin:1.6rem 0 .4rem;font-size:1.35rem}
.prose p,.prose li{color:var(--ink)}
.steps{counter-reset:s;list-style:none;padding:0;margin:18px 0}
.steps li{counter-increment:s;position:relative;background:#fffdf7;border:1px solid #d9c79c;border-left:6px solid var(--soga);border-radius:8px;padding:14px 16px 14px 62px;margin:12px 0}
.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:34px;height:34px;border-radius:50%;background:var(--indigo);color:var(--gold-soft);border:2px solid var(--gold);display:grid;place-items:center;font-weight:700;font-family:Georgia,serif}
.steps li strong{color:var(--indigo)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}
.two-col .panel{margin:0}
details.qa{background:#fffdf7;border:1px solid #d9c79c;border-radius:8px;margin:10px 0;padding:0}
details.qa summary{cursor:pointer;padding:14px 18px;font-weight:700;color:var(--indigo);list-style:none;position:relative;padding-right:46px}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";position:absolute;right:18px;top:10px;font-size:1.5rem;color:var(--soga)}
details.qa[open] summary::after{content:"\2212"}
details.qa .a{padding:0 18px 14px;color:var(--muted)}
.timeline{list-style:none;margin:20px 0;padding:0 0 0 22px;border-left:4px double var(--gold)}
.timeline li{position:relative;margin:0 0 20px;padding:12px 16px;background:#fffdf7;border:1px dashed var(--soga);border-radius:8px}
.timeline li::before{content:"";position:absolute;left:-33px;top:16px;width:18px;height:18px;border-radius:50%;background:var(--indigo);border:3px solid var(--gold)}
.timeline .when{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--soga);color:#fff;border-radius:999px;padding:.1rem .65rem;margin-bottom:.3rem}
.timeline h3{margin:.1rem 0 .3rem;color:var(--indigo);font-size:1.1rem}
.timeline p{margin:0;color:var(--muted)}
.stamp{display:inline-block;transform:rotate(-2deg);border:2px dashed var(--red);color:var(--red);font-weight:700;padding:.2rem .8rem;border-radius:6px;font-size:.85rem;letter-spacing:.06em}
.big-mail{font-size:1.25rem;font-weight:700;word-break:break-all}
@media (max-width:900px){.grid.grid-4{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}
@media (max-width:520px){.grid.grid-4{grid-template-columns:1fr}.steps li{padding-left:56px}}