/* =========================================================
   Desa Bedana — stylesheet
   Palette:
     --kopi     : #3B2A20  (dark roast espresso)
     --kopi-2   : #5C4130  (medium roast)
     --karamel  : #C97B3E  (caramel amber)
     --madu     : #E0A22C  (honey gold)
     --sage     : #7C9473  (hillside sage)
     --krem     : #F7EFE1  (cream parchment)
     --tinta    : #241A12
   Type: Bitter (display slab-serif) + Work Sans (body)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@500;600;700;800&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --kopi:#3B2A20;
  --kopi-2:#5C4130;
  --karamel:#C97B3E;
  --madu:#E0A22C;
  --sage:#7C9473;
  --krem:#F7EFE1;
  --krem-2:#EFE2C8;
  --tinta:#241A12;
  --garis:#E1D2B0;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--krem);color:var(--tinta);
  font-family:'Work Sans',sans-serif;line-height:1.65;
}
h1,h2,h3{
  font-family:'Bitter',serif;font-weight:700;margin:0 0 .4em;letter-spacing:-.01em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1140px;margin:0 auto;padding:0 24px;}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--karamel);}

/* Signature motif: layered mountain contour ridges */
.ridge-motif{position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;}
.ridge-motif svg{width:100%;height:100%;display:block;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:var(--krem);border-bottom:1px solid var(--garis);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
.brand{display:flex;align-items:center;gap:10px;font-size:1.12rem;}
.brand img{width:36px;height:36px;border-radius:9px;}
.brand-sub{
  display:block;font-family:'Work Sans',sans-serif;font-weight:600;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--karamel);
}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-weight:600;font-size:.9rem;}
.nav-links a{position:relative;padding:4px 0;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--karamel);transition:width .25s ease;}
.nav-links a:hover::after{width:100%;}
.nav-toggle{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--kopi);}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--kopi);color:var(--krem);padding:100px 0 130px;
}
.hero .container{position:relative;z-index:2;}
.hero h1{font-size:clamp(2.3rem,5vw,3.8rem);color:var(--krem);max-width:15ch;line-height:1.08;}
.hero h1 em{font-style:italic;color:var(--madu);}
.hero p{max-width:52ch;color:#DCCBB0;font-size:1.06rem;margin-bottom:28px;}
.btn{
  display:inline-block;background:var(--madu);color:var(--kopi);padding:13px 26px;border-radius:30px;
  font-weight:700;font-size:.94rem;transition:transform .2s ease, background .2s ease;
}
.btn:hover{background:#EFB852;transform:translateY(-2px);}
.btn-outline{
  display:inline-block;margin-left:12px;padding:12px 24px;border-radius:30px;
  border:1px solid rgba(247,239,225,.4);color:var(--krem);font-weight:600;font-size:.94rem;
}
.btn-outline:hover{border-color:var(--madu);color:var(--madu);}
.hero-stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:44px;padding-top:26px;border-top:1px solid rgba(247,239,225,.2);}
.hero-stats div strong{display:block;font-family:'Bitter',serif;font-size:1.8rem;color:var(--madu);}
.hero-stats div span{font-size:.76rem;color:#C9B89C;text-transform:uppercase;letter-spacing:.05em;}

/* ---------- Section shells ---------- */
section{padding:80px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:38px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);}
.section-head p{max-width:46ch;color:#5C4F3D;margin:0;}

/* ---------- Potensi cards ---------- */
.potensi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}
.potensi-card{
  background:#fff;border:1px solid var(--garis);border-radius:14px;padding:26px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.potensi-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(59,42,32,.12);}
.potensi-card h3{font-size:1.12rem;}
.potensi-card p{color:#5C4F3D;font-size:.93rem;margin:0;}

/* ---------- Artikel (dengan gambar) ---------- */
.artikel-bg{background:var(--krem-2);}
.artikel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;}
.artikel-card{
  background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--garis);
  display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease;
}
.artikel-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(59,42,32,.14);}
.artikel-thumb{aspect-ratio:16/10;overflow:hidden;}
.artikel-thumb img{width:100%;height:100%;object-fit:cover;}
.artikel-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}
.tag-kategori{
  display:inline-block;background:var(--sage);color:#fff;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:20px;margin-bottom:10px;width:fit-content;
}
.artikel-body h3{font-size:1.1rem;line-height:1.35;}
.artikel-body p{color:#5C4F3D;font-size:.9rem;margin:0;}
.artikel-meta{margin-top:auto;padding-top:14px;font-size:.76rem;color:#8A7A5F;}

/* ---------- Profil desa ---------- */
.profil{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.profil-art{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 20px 40px rgba(59,42,32,.15);}
.profil-art img{width:100%;height:100%;object-fit:cover;}
.profil-text p{color:#4A3F2E;}
.fakta-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;}
.fakta-list li{
  display:flex;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--garis);
  border-radius:10px;font-size:.92rem;
}
.fakta-list b{color:var(--kopi);min-width:130px;display:inline-block;}

/* ---------- Layanan ---------- */
.layanan-bg{background:var(--sage);color:#fff;position:relative;overflow:hidden;}
.layanan-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:rgba(255,255,255,.2);border-radius:14px;overflow:hidden;
}
.layanan-item{background:var(--sage);padding:28px 24px;}
.layanan-item h3{color:var(--madu);font-size:1.05rem;font-family:'Bitter',serif;margin-bottom:8px;}
.layanan-item p{color:#EAF0E5;font-size:.9rem;margin:0;}

/* ---------- Galeri ---------- */
.galeri-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:130px;gap:12px;}
.galeri-grid div{border-radius:12px;background:linear-gradient(135deg,var(--karamel),var(--kopi-2));}
.galeri-grid div:nth-child(2n){background:linear-gradient(135deg,var(--madu),var(--karamel));}
.galeri-grid div:first-child{grid-row:span 2;grid-column:span 2;}

/* ---------- CTA ---------- */
.cta{
  background:var(--madu);border-radius:20px;padding:52px;display:flex;justify-content:space-between;
  align-items:center;gap:24px;flex-wrap:wrap;
}
.cta h2{font-size:1.7rem;max-width:20ch;margin:0;color:var(--kopi);}
.cta-form{display:flex;gap:10px;flex-wrap:wrap;}
.cta-form input{padding:13px 16px;border-radius:30px;border:1px solid rgba(59,42,32,.2);min-width:230px;font-family:'Work Sans',sans-serif;}
.cta-form button{background:var(--kopi);color:var(--krem);border:0;padding:13px 24px;border-radius:30px;font-weight:700;cursor:pointer;}

/* ---------- Footer ---------- */
footer{background:var(--kopi);color:#C9B89C;padding:56px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
.footer-grid h4{color:var(--krem);font-family:'Work Sans',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9rem;}
.footer-grid ul a:hover{color:var(--madu);}
.footer-brand p{max-width:34ch;font-size:.9rem;}
.footer-bottom{border-top:1px solid rgba(201,184,156,.15);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;}

/* ---------- Article single page ---------- */
.artikel-single{max-width:760px;margin:0 auto;padding:56px 24px 90px;}
.artikel-single .tag-kategori{margin-bottom:16px;}
.artikel-single h1{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.25;}
.artikel-single .meta-line{color:#8A7A5F;font-size:.85rem;margin-bottom:26px;}
.artikel-single .cover{width:100%;border-radius:14px;overflow:hidden;margin-bottom:30px;}
.artikel-single .cover img{width:100%;display:block;}
.artikel-single p{font-size:1.02rem;color:#3A2E1F;margin-bottom:20px;}
.artikel-single h2{font-size:1.3rem;margin-top:36px;}
.breadcrumb{font-size:.82rem;color:#8A7A5F;margin-bottom:18px;}
.breadcrumb a:hover{color:var(--karamel);}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .profil{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:var(--krem);flex-direction:column;
    padding:18px 24px 26px;border-bottom:1px solid var(--garis);display:none;gap:16px;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .hero{padding:64px 0 90px;}
  .galeri-grid{grid-template-columns:repeat(2,1fr);}
  .cta{padding:34px 24px;}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:56px 0;}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}*{transition:none !important;}}
:focus-visible{outline:3px solid var(--karamel);outline-offset:2px;}