/* Template Kopi & Roastery: gelap espresso, teks krem, aksen karamel, serif miring untuk aksen — hangat & premium. */
:root{--latar:#15100D;--latar-2:#1D1612;--permukaan:#241B16;--teks:#F3E9DC;--teks-2:#D8C9B8;--teks-3:#B9A794;--garis:#3A2D25;
  --utama:#E0A066;--utama-tua:#C98745;--utama-muda:#3A2A1E;--pada-utama:#1A120E;--aksen:#E0A066;--gelap:#0F0B09;--pada-gelap:#CDBCA9;
  --radius:16px;--radius-kecil:10px;--bayang:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.6)}
body{background:var(--latar)}
a{color:var(--utama)}
.serif{font-family:var(--font-aksen);font-style:italic;font-weight:600;color:var(--utama)}
h1,h2,h3{color:var(--teks)}
.kp-label{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--utama);margin-bottom:12px}
.kp-label::before{content:"";width:26px;height:1.5px;background:currentColor}
.kepala-bag.tengah .kp-label{justify-content:center}
.kp-tautan{font-weight:700;text-decoration:none;color:var(--utama)}
.kp-tautan:hover{text-decoration:underline;text-underline-offset:4px}

/* Header transparan gelap */
.kepala{background:rgba(21,16,13,.86);border-bottom:1px solid rgba(255,255,255,.06)}
.kepala .merek{color:var(--teks);font-family:var(--font-aksen);font-style:italic;font-weight:600;font-size:22px}
.menu a{color:var(--teks-2)}
.menu a:hover,.menu a[aria-current]{background:rgba(224,160,102,.12);color:var(--teks)}
.kepala .btn-wa{background:var(--utama);color:var(--pada-utama)}
.kepala .burger{background:transparent;color:var(--teks);border-color:var(--garis)}
.menu-hp{background:var(--latar-2)}
.menu-hp a{color:var(--teks);border-color:var(--garis)}
.bahasa{background:transparent;border-color:var(--garis)}
.bahasa button{color:var(--teks-2)}
.btn-utama,.btn-wa{background:var(--utama);color:var(--pada-utama)}
.btn-utama:hover{background:var(--utama-tua)}
.btn-garis{color:var(--teks);border-color:var(--garis)}

/* Hero penuh */
.kp-hero{position:relative;min-height:clamp(560px,88vh,820px);display:flex;align-items:center;background:var(--gelap) var(--bg,none) center/cover no-repeat;overflow:hidden}
.kp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,11,9,.92) 0%,rgba(15,11,9,.7) 45%,rgba(15,11,9,.35) 100%),linear-gradient(0deg,var(--latar) 0%,rgba(21,16,13,0) 28%)}
.kp-hero .wrap{position:relative;width:100%}
.kp-alis{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--utama);border:1px solid rgba(224,160,102,.45);border-radius:999px;padding:7px 14px;margin-bottom:20px}
.kp-hero h1{font-size:clamp(38px,6.2vw,76px);line-height:1.04;letter-spacing:-.025em;max-width:820px;margin:0 0 18px}
.kp-hero p{font-size:18px;line-height:1.65;color:var(--teks-2);max-width:560px;margin:0 0 28px}
.kp-aksi{display:flex;flex-wrap:wrap;gap:12px}
.kp-btn{background:var(--utama);color:var(--pada-utama);min-height:50px;padding:0 26px;font-size:15.5px}
.kp-btn:hover{background:#ECB27E;color:var(--pada-utama)}
.kp-btn-garis{border:1.5px solid rgba(243,233,220,.5);color:var(--teks);min-height:50px;padding:0 24px;font-size:15.5px;background:transparent}
.kp-btn-garis:hover{border-color:var(--teks);color:var(--teks)}
.kp-poin{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:30px 0 0;padding:0;color:var(--teks-2);font-size:14.5px}
.kp-poin li::before{content:"✦";color:var(--utama);margin-right:8px}
.kp-gulir{position:absolute;left:50%;bottom:26px;width:22px;height:36px;border:1.5px solid rgba(243,233,220,.45);border-radius:12px;transform:translateX(-50%)}
.kp-gulir::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--utama);transform:translateX(-50%);animation:kp-gulir 1.8s ease-in-out infinite}
@keyframes kp-gulir{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* Tentang + angka */
.kp-tentang .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.kp-tentang h2{font-size:clamp(30px,4vw,48px);line-height:1.12;margin:0 0 18px}
.kp-tentang p{color:var(--teks-2);font-size:17px;max-width:560px}
.kp-angka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:30px 0 26px;padding:24px 0;border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.kp-angka dt{font-family:var(--font-aksen);font-style:italic;font-weight:600;font-size:clamp(30px,3.6vw,42px);color:var(--utama);line-height:1}
.kp-angka dd{margin:8px 0 0;color:var(--teks-3);font-size:14px}
.kp-tentang-foto{margin:0;border-radius:200px 200px var(--radius) var(--radius);overflow:hidden;aspect-ratio:5/6;box-shadow:var(--bayang)}
.kp-tentang-foto img{width:100%;height:100%;object-fit:cover}

/* Alur proses */
.kp-proses{background:var(--latar-2)}
.kp-langkah{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0;counter-reset:l}
.kp-langkah li{position:relative;background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius);padding:26px 22px 24px}
.kp-langkah li:not(:last-child)::after{content:"";position:absolute;top:44px;right:-19px;width:20px;height:1.5px;background:var(--utama);opacity:.6}
.kp-no{position:absolute;top:18px;right:20px;font-family:var(--font-aksen);font-style:italic;font-size:26px;color:rgba(224,160,102,.4)}
.kp-ikon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--utama-muda);color:var(--utama);margin-bottom:16px}
.kp-ikon .ico{width:24px;height:24px}
.kp-langkah h3{font-size:18px;margin:0 0 8px}
.kp-langkah p{font-size:14.5px;color:var(--teks-2);margin:0}

/* Produk */
.kp-kisi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.kp-kartu{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.kp-kartu:hover{transform:translateY(-4px);border-color:rgba(224,160,102,.5)}
.kp-kartu-gbr{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--latar-2)}
.kp-kartu-gbr img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kp-kartu:hover .kp-kartu-gbr img{transform:scale(1.06)}
.kp-pita{position:absolute;left:14px;top:14px;background:rgba(21,16,13,.78);color:var(--teks);font-size:12px;font-weight:700;letter-spacing:.04em;padding:6px 11px;border-radius:999px;backdrop-filter:blur(6px)}
.kp-kartu-isi{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.kp-kartu h3{font-size:20px;margin:0}
.kp-kartu h3 a{color:var(--teks);text-decoration:none}
.kp-rasa{font-family:var(--font-aksen);font-style:italic;color:var(--teks-2);margin:0;font-size:16px}
.kp-sangrai{font-size:13.5px;color:var(--teks-3);margin:0}.kp-sangrai b{color:var(--teks-2)}
.kp-kartu-bawah{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--garis)}
.kp-harga{margin:0}.kp-harga b{font-size:20px;color:var(--teks)}.kp-harga span{font-size:13px;color:var(--teks-3);margin-left:4px}
.kp-pesan{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;background:var(--utama);color:var(--pada-utama);font-weight:700;font-size:14px;text-decoration:none}
.kp-pesan:hover{background:#ECB27E;color:var(--pada-utama)}

/* Sertifikasi & penghargaan */
.kp-serti{background:linear-gradient(180deg,var(--latar),var(--latar-2))}
.kp-serti .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.kp-serti h2{font-size:clamp(28px,3.6vw,42px);margin:0 0 22px}
.kp-lencana{display:flex;flex-wrap:wrap;gap:12px}
.kp-lencana span{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid rgba(224,160,102,.4);border-radius:999px;background:rgba(224,160,102,.08)}
.kp-lencana .ico{width:20px;height:20px;color:var(--utama)}
.kp-lencana b{font-size:15px;letter-spacing:.04em}
.kp-prestasi{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kp-prestasi li{display:flex;gap:14px;align-items:flex-start;background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--radius-kecil);padding:16px 18px}
.kp-prestasi .ico{width:22px;height:22px;color:var(--utama);flex:none;margin-top:2px}
.kp-prestasi b{display:block;font-size:16px}
.kp-prestasi small{color:var(--teks-3);font-size:13.5px}

/* Galeri mosaik */
.kp-mosaik{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:14px}
.kp-mosaik figure{position:relative;margin:0;border-radius:var(--radius-kecil);overflow:hidden}
.kp-mosaik figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.kp-mosaik figure:nth-child(4),.kp-mosaik figure:nth-child(5),.kp-mosaik figure:nth-child(6){grid-column:span 2}
.kp-mosaik img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kp-mosaik figure:hover img{transform:scale(1.05)}
.kp-mosaik figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 12px;background:linear-gradient(180deg,transparent,rgba(15,11,9,.85));color:var(--teks);font-size:14px;font-weight:600}

/* Testimoni & FAQ bawaan, versi gelap */
.bag-alt{background:var(--latar-2)}
.testi{background:var(--permukaan);border-color:var(--garis)}
.testi blockquote{color:var(--teks-2);font-family:var(--font-aksen);font-style:italic;font-size:17px}
.testi .bintang{color:var(--utama)}
.faq details{background:var(--permukaan);border-color:var(--garis)}
.faq summary{color:var(--teks)}
.faq .jawab{color:var(--teks-2)}
.alis{color:var(--utama)}

/* Artikel */
.kp-kepala-baris{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:none}
.kp-artikel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.kp-artikel-item{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--teks)}
.kp-artikel-gbr{display:block;aspect-ratio:16/10;border-radius:var(--radius-kecil);overflow:hidden;background:var(--latar-2)}
.kp-artikel-gbr img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kp-artikel-item:hover img{transform:scale(1.05)}
.kp-artikel-item small{color:var(--teks-3);font-size:13px;margin-top:6px}
.kp-artikel-item b{font-size:19px;line-height:1.35}
.kp-artikel-item:hover b{color:var(--utama)}

/* Ajakan */
.kp-ajakan{position:relative;text-align:center;padding:110px 0;background:var(--gelap) var(--bg,none) center/cover no-repeat}
.kp-ajakan::before{content:"";position:absolute;inset:0;background:rgba(15,11,9,.82)}
.kp-ajakan .wrap{position:relative;max-width:760px}
.kp-ajakan h2{font-size:clamp(30px,4.4vw,52px);line-height:1.12;margin:0 0 16px}
.kp-ajakan p{color:var(--teks-2);font-size:17px;margin:0 auto 28px;max-width:600px}

/* Footer & halaman dalam */
.kaki{background:var(--gelap);color:var(--pada-gelap)}
.kartu{background:var(--permukaan);border-color:var(--garis)}
.kartu h3{color:var(--teks)}
.kartu p{color:var(--teks-2)}
.judul-hal,.kepala-hal{background:var(--latar-2)}
.prosa{color:var(--teks-2)}
.prosa h2,.prosa h3,.prosa strong{color:var(--teks)}
input,textarea,select{background:var(--permukaan);color:var(--teks);border-color:var(--garis)}

@media (max-width:1024px){
  .kp-langkah{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kp-langkah li::after{display:none}
  .kp-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kp-mosaik{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px}
  .kp-mosaik figure:nth-child(4),.kp-mosaik figure:nth-child(5){grid-column:span 1}
}
@media (max-width:760px){
  .kp-hero{min-height:620px;align-items:flex-end;padding-bottom:70px}
  .kp-hero::before{background:linear-gradient(0deg,rgba(15,11,9,.96) 10%,rgba(15,11,9,.55) 60%,rgba(15,11,9,.35))}
  .kp-hero p{font-size:16.5px}
  .kp-gulir{display:none}
  .kp-tentang .wrap,.kp-serti .wrap{grid-template-columns:minmax(0,1fr);gap:30px}
  .kp-tentang-foto{max-width:360px;justify-self:center;width:100%}
  .kp-angka{gap:10px}
  .kp-langkah,.kp-kisi,.kp-artikel{grid-template-columns:minmax(0,1fr)}
  .kp-kartu-gbr{aspect-ratio:4/3}
  .kp-langkah{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kp-langkah li{padding:18px 16px}
  .kp-langkah p{font-size:13.5px}
  .kp-mosaik{grid-auto-rows:150px}
  .kp-mosaik figure:nth-child(1){grid-column:span 2;grid-row:span 2}
  .kp-kepala-baris{flex-direction:column;align-items:flex-start}
  .kp-ajakan{padding:80px 0}
}
@media (prefers-reduced-motion:reduce){.kp-gulir::after{animation:none}}