/* ===================================================================
   PasKurma.id — Design tokens
   Palet terinspirasi dari kurma: karamel gelap, coklat espresso,
   krem parchment, dan hijau pelepah kurma sebagai aksen sekunder.
   =================================================================== */
:root{
  --espresso: #2b1d14;
  --espresso-2: #3d2a1c;
  --caramel: #b8722e;
  --caramel-light: #d99b52;
  --parchment: #f6ede0;
  --parchment-2: #efe1cc;
  --palm: #5c6d4f;
  --ink: #241811;
  --paper: #fffaf3;
  --line: rgba(43,29,20,0.14);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- Utility: date-string divider (signature element) ---------- */
.kurma-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 auto;
  padding:6px 0;
}
.kurma-divider .strand{
  width:60px;height:1px;background:var(--line);
}
.kurma-divider .seed{
  width:9px;height:13px;border-radius:60% 60% 55% 55%;
  background:var(--caramel);
  box-shadow: 18px 2px 0 -1px var(--caramel-light),
              36px -1px 0 -1px var(--caramel),
              -18px 2px 0 -1px var(--caramel-light),
              -36px -1px 0 -1px var(--caramel);
}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--espresso);
  color:var(--parchment-2);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
}
.topbar .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 24px;
}
.topbar .date{opacity:.75;}
.topbar .ticker{display:flex;gap:18px;overflow:hidden;}
.topbar .ticker span{color:var(--caramel-light);}

/* ---------- Header / masthead ---------- */
.masthead{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:26px 0 0;
}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:46px;height:46px;}
.brand .name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:34px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.brand .name em{font-style:normal;color:var(--caramel);}
.brand .tagline{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--palm);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:2px;
}
.masthead-right{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--espresso-2);
  text-align:right;
  line-height:1.7;
}

/* ---------- Nav ---------- */
nav.mainnav{
  background:var(--espresso);
  margin-top:22px;
}
nav.mainnav .wrap{
  display:flex;gap:2px;flex-wrap:wrap;
}
nav.mainnav a{
  color:var(--parchment-2);
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  padding:14px 18px;
  border-right:1px solid rgba(255,255,255,.08);
  transition:background .15s ease, color .15s ease;
}
nav.mainnav a:hover, nav.mainnav a.active{
  background:var(--caramel);
  color:var(--espresso);
}

/* ---------- Hero ---------- */
.hero{
  background:var(--espresso);
  color:var(--parchment);
  padding:56px 0 64px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 8% 20%, rgba(184,114,46,.18), transparent 40%),
    radial-gradient(circle at 92% 80%, rgba(92,109,79,.18), transparent 40%);
  pointer-events:none;
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;}
.hero .eyebrow{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--caramel-light);
  margin-bottom:14px;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(32px,4.2vw,54px);
  line-height:1.05;
  margin:0 0 18px;
  font-weight:600;
}
.hero p.lead{
  font-size:17px;
  color:var(--parchment-2);
  max-width:52ch;
  margin:0 0 22px;
}
.hero .meta{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--caramel-light);
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.hero-img-wrap{position:relative;border:1px solid rgba(255,255,255,.14);}
.hero-img-wrap img{width:100%;height:100%;object-fit:cover;filter:saturate(0.92) contrast(1.02);}
.hero-side{display:flex;flex-direction:column;gap:18px;}
.hero-side .side-card{
  border:1px solid rgba(255,255,255,.14);
  padding:16px;
}
.hero-side .side-card .k{
  font-family:var(--font-mono);font-size:11px;color:var(--caramel-light);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;display:block;
}
.hero-side .side-card h3{
  font-family:var(--font-display);font-size:17px;margin:0 0 4px;font-weight:600;
}
.hero-side .side-card p{font-size:13px;color:var(--parchment-2);margin:0;}

/* ---------- Section headers ---------- */
.section{padding:52px 0;}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--ink);
  padding-bottom:10px;margin-bottom:28px;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:26px;font-weight:700;margin:0;
}
.section-head .see-all{
  font-family:var(--font-mono);font-size:12px;color:var(--caramel);
  border-bottom:1px solid var(--caramel);
}

/* ---------- Article grid & cards ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(43,29,20,.12);}
.card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--parchment-2);}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.card .cat{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--caramel);
}
.card h3{
  font-family:var(--font-display);font-size:19px;line-height:1.28;margin:0;font-weight:600;
}
.card p.excerpt{font-size:13.5px;color:#5a4d40;margin:0;flex:1;}
.card .byline{
  font-family:var(--font-mono);font-size:11px;color:#8a7c6c;
  border-top:1px dashed var(--line);padding-top:10px;margin-top:4px;
  display:flex;justify-content:space-between;
}

/* ---------- Featured split (kategori kurma khusus) ---------- */
.feature-split{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);
  background:var(--parchment);
}
.feature-split .imgcol{aspect-ratio:1/1;overflow:hidden;}
.feature-split .imgcol img{width:100%;height:100%;object-fit:cover;}
.feature-split .txtcol{padding:40px;display:flex;flex-direction:column;justify-content:center;}
.feature-split .k{font-family:var(--font-mono);font-size:11px;color:var(--palm);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.feature-split h3{font-family:var(--font-display);font-size:26px;margin:0 0 12px;font-weight:700;}
.feature-split p{font-size:14.5px;color:#5a4d40;margin:0 0 18px;}
.btn{
  display:inline-block;
  font-family:var(--font-mono);font-size:12.5px;
  background:var(--ink);color:var(--paper);
  padding:11px 20px;
  align-self:flex-start;
}
.btn:hover{background:var(--caramel);}

/* ---------- Newsletter ---------- */
.newsletter{
  background:var(--palm);color:var(--parchment);
  padding:40px 0;
}
.newsletter .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.newsletter h3{font-family:var(--font-display);font-size:22px;margin:0 0 4px;}
.newsletter p{margin:0;font-size:13.5px;color:rgba(255,255,255,.8);}
.newsletter form{display:flex;gap:0;}
.newsletter input{
  font-family:var(--font-body);font-size:13.5px;padding:11px 14px;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);
  color:#fff;min-width:220px;
}
.newsletter input::placeholder{color:rgba(255,255,255,.6);}
.newsletter button{
  font-family:var(--font-mono);font-size:12.5px;
  background:var(--caramel);color:var(--espresso);border:none;
  padding:0 20px;cursor:pointer;font-weight:700;
}

/* ---------- Footer ---------- */
footer{background:var(--espresso);color:var(--parchment-2);padding:48px 0 24px;}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;}
footer h4{
  font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--caramel-light);margin:0 0 14px;
}
footer .brand-foot{font-family:var(--font-display);font-size:22px;color:#fff;margin-bottom:10px;}
footer p{font-size:13px;color:rgba(246,237,224,.65);max-width:38ch;}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
footer a{font-size:13px;color:rgba(246,237,224,.8);}
footer a:hover{color:var(--caramel-light);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:36px;padding-top:20px;
  font-family:var(--font-mono);font-size:11.5px;color:rgba(246,237,224,.5);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}

/* ---------- Article page ---------- */
.article-hero{background:var(--espresso);color:var(--parchment);padding:44px 0;}
.article-hero .cat{font-family:var(--font-mono);font-size:12px;color:var(--caramel-light);text-transform:uppercase;letter-spacing:.08em;}
.article-hero h1{font-family:var(--font-display);font-size:clamp(28px,3.6vw,42px);margin:14px 0;font-weight:600;line-height:1.15;}
.article-meta{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--parchment-2);
  padding-top:14px;border-top:1px solid rgba(255,255,255,.14);margin-top:18px;
}
.author-chip{display:flex;align-items:center;gap:10px;}
.author-chip img{width:38px;height:38px;border-radius:50%;object-fit:cover;}
.author-chip .name{color:#fff;font-weight:600;}

.article-body-wrap{max-width:760px;margin:0 auto;padding:48px 24px 60px;}
.article-body-wrap .cover{margin-bottom:32px;border:1px solid var(--line);}
.article-body-wrap .cover img{width:100%;}
.article-body-wrap .caption{font-family:var(--font-mono);font-size:11.5px;color:#8a7c6c;margin-top:8px;}
.prose{font-size:17px;line-height:1.8;color:#332619;}
.prose p{margin:0 0 20px;}
.prose h2{font-family:var(--font-display);font-size:24px;margin:36px 0 14px;font-weight:700;}
.prose blockquote{
  border-left:3px solid var(--caramel);
  margin:28px 0;padding:4px 22px;
  font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--espresso-2);
}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px;}
.tags a{
  font-family:var(--font-mono);font-size:11.5px;
  border:1px solid var(--line);padding:6px 12px;color:#5a4d40;
}
.author-box{
  margin-top:44px;padding:24px;background:var(--parchment);border:1px solid var(--line);
  display:flex;gap:16px;
}
.author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.author-box .role{font-family:var(--font-mono);font-size:11px;color:var(--caramel);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.author-box h4{font-family:var(--font-display);margin:0 0 6px;font-size:18px;}
.author-box p{font-size:13.5px;color:#5a4d40;margin:0;}

.related-strip{background:var(--parchment);padding:48px 0 56px;border-top:1px solid var(--line);}

/* ---------- Blog index ---------- */
.blog-head{background:var(--espresso);color:var(--parchment);padding:52px 0 40px;}
.blog-head h1{font-family:var(--font-display);font-size:38px;margin:0 0 10px;}
.blog-head p{color:var(--parchment-2);max-width:56ch;font-size:15px;}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 0;}
.filters a{
  font-family:var(--font-mono);font-size:12px;
  border:1px solid rgba(255,255,255,.25);color:var(--parchment-2);
  padding:8px 14px;
}
.filters a.active, .filters a:hover{background:var(--caramel);border-color:var(--caramel);color:var(--espresso);}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .feature-split{grid-template-columns:1fr;}
  footer .wrap{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr;}
  .masthead .wrap{flex-direction:column;align-items:flex-start;gap:12px;}
  .masthead-right{text-align:left;}
  footer .wrap{grid-template-columns:1fr;}
  .newsletter .wrap{flex-direction:column;align-items:flex-start;}
}