/* ================================================================
   Tanggal Baik — Stylesheet
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Crimson+Pro:wght@300;400;500&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --coklat-tua  : #3d1f0a;
  --coklat      : #6b3a1f;
  --coklat-muda : #9c6b3c;
  --emas        : #c9a84c;
  --emas-muda   : #e8d08a;
  --krem        : #f5edd6;
  --krem-muda   : #fdf7eb;
  --hijau       : #2d5a27;
  --merah       : #8b1a1a;
  --putih       : #ffffff;
  --shadow-sm   : 0 2px 8px rgba(61,31,10,.08);
  --shadow-md   : 0 4px 20px rgba(61,31,10,.14);
  --shadow-lg   : 0 8px 40px rgba(61,31,10,.18);
  --radius      : 12px;
  --radius-sm   : 8px;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: 'Crimson Pro', Georgia, serif;
  background: var(--krem-muda);
  color: var(--coklat-tua);
  line-height: 1.7;
  min-height: 100vh;
}

img { max-width:100%; height:auto; display:block; }

a {
  color: var(--coklat);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--emas); }

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
  color: var(--coklat-tua);
}
h1 { font-size: clamp(2rem, 6vw, 3.5rem); font-weight:700; }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight:600; }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight:600; }
h4 { font-size: 1.1rem; font-weight:600; }

p { margin-bottom: .75rem; }
p:last-child { margin-bottom:0; }

/* ── Layout ────────────────────────────────────────────────── */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-wide {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  background: linear-gradient(180deg, var(--coklat-tua) 0%, #5a2c10 100%);
  padding: 48px 24px 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.site-header::before,
.site-header::after {
  content: '';
  position: absolute;
  left:0; right:0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--emas), var(--emas-muda), var(--emas), transparent);
}
.site-header::before { top:0; }
.site-header::after  { bottom:0; }

.header-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: .8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--emas-muda);
  opacity: .8;
  margin-bottom: 12px;
}

.header-title {
  color: var(--krem-muda);
  margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}

.header-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--emas-muda);
  font-style: italic;
  max-width: 500px;
  margin: 0 auto;
  opacity: .9;
}

/* ── Navigation ────────────────────────────────────────────── */
.site-nav {
  background: var(--coklat-tua);
  border-bottom: 2px solid var(--emas);
}

.site-nav ul {
  display: flex;
  list-style: none;
  gap: 4px;
  justify-content: center;
  padding: 8px 20px;
  max-width: 800px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.site-nav a {
  display: block;
  padding: 8px 16px;
  color: var(--emas-muda);
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: .95rem;
  letter-spacing: .5px;
  border-radius: var(--radius-sm);
  transition: background .2s;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: rgba(201,168,76,.2);
  color: var(--emas);
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb {
  padding: 12px 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: .85rem;
  color: var(--coklat-muda);
}
.breadcrumb a { color: var(--coklat-muda); text-decoration:none; }
.breadcrumb a:hover { color: var(--emas); }
.breadcrumb span { margin: 0 6px; opacity:.5; }

/* ── Main ──────────────────────────────────────────────────── */
.site-main {
  padding: 40px 0 80px;
}

/* ── Card ──────────────────────────────────────────────────── */
.card {
  background: var(--krem-muda);
  border: 1px solid rgba(201,168,76,.3);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--shadow-sm);
}

/* ── Tabs ──────────────────────────────────────────────────── */
.tabs-nav {
  display: flex;
  border-bottom: 2px solid var(--emas);
  margin-bottom: 28px;
  gap: 2px;
}

.tab-btn {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: transparent;
  color: var(--coklat-muda);
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tab-btn:hover { background: rgba(201,168,76,.1); color: var(--coklat-tua); }
.tab-btn.active {
  background: var(--coklat-tua);
  color: var(--emas-muda);
  font-weight: 600;
}

.tab-panel { display:block; }
.tab-panel.hidden { display:none; }

/* ── Form elements ─────────────────────────────────────────── */
.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: .75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--coklat-muda);
  margin-bottom: 8px;
}

input[type="date"],
select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--emas);
  border-radius: var(--radius-sm);
  background: var(--krem);
  color: var(--coklat-tua);
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  outline: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

input[type="date"]:focus,
select:focus {
  border-color: var(--coklat);
  box-shadow: 0 0 0 3px rgba(201,168,76,.2);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width:500px) { .form-row { grid-template-columns:1fr; } }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 32px;
  background: linear-gradient(135deg, var(--coklat-tua), var(--coklat));
  color: var(--krem-muda);
  border: 1px solid var(--emas);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  letter-spacing: .5px;
  transition: opacity .2s, transform .1s;
  text-decoration: none;
}
.btn-primary:hover { opacity:.85; color: var(--emas-muda); }
.btn-primary:active { transform: scale(.98); }

.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: 'Crimson Pro', serif;
  font-size: .95rem;
  font-weight: 500;
  transition: opacity .2s;
}
.btn-wa:hover { opacity:.88; }

/* ── Divider ───────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--emas));
}
.divider::after { background: linear-gradient(to left, transparent, var(--emas)); }
.divider span { color: var(--emas); font-size: .85rem; }

/* ── Hasil Card ────────────────────────────────────────────── */
#result-cek,
#result-cari { display:none; margin-top: 28px; }

.hasil-card {
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid rgba(201,168,76,.4);
  animation: fadeUp .4s ease;
}
.hasil-card.baik    { background: linear-gradient(135deg, #e8f5e9, #f2faf2); border-color:#81c784; }
.hasil-card.hindari { background: linear-gradient(135deg, #fdecea, #fef6f5); border-color:#e57373; }
.hasil-card.cukup   { background: linear-gradient(135deg, var(--krem), var(--krem-muda)); }
.hasil-card.netral  { background: var(--krem-muda); }

.hasil-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.hasil-tanggal {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--coklat-muda);
  font-style: italic;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  font-family: 'Crimson Pro', serif;
  font-size: .9rem;
  font-weight: 500;
}
.status-baik    { background:#e8f5e9; color:var(--hijau);    border:1px solid var(--hijau); }
.status-hindari { background:#fdecea; color:var(--merah);    border:1px solid var(--merah); }
.status-cukup   { background:#fff8e1; color:var(--coklat);   border:1px solid var(--emas); }
.status-netral  { background:#f5f5f5; color:#666;            border:1px solid #ddd; }

/* Weton chips */
.weton-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

.weton-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, var(--coklat-tua), var(--coklat));
  color: var(--krem-muda);
  border-radius: var(--radius);
  padding: 14px 24px;
  min-width: 90px;
  box-shadow: var(--shadow-md);
}

.weton-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--emas-muda);
  margin-bottom: 6px;
}

.weton-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.hasil-keterangan {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--coklat-tua);
  line-height: 1.8;
  margin: 0 0 8px;
}

.hasil-actions {
  text-align: center;
  margin-top: 20px;
}

/* ── Cari bulan list ───────────────────────────────────────── */
.cari-summary {
  text-align: center;
  margin-bottom: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--coklat-muda);
}

.hari-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hari-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--krem);
  border: 1px solid rgba(201,168,76,.3);
  border-radius: var(--radius);
  padding: 14px 18px;
  animation: fadeUp .3s ease both;
}

.hari-tanggal-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  height: 52px;
  background: linear-gradient(135deg, var(--coklat-tua), var(--coklat));
  color: var(--emas-muda);
  border-radius: 10px;
  justify-content: center;
}

.chip-tgl { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:700; line-height:1.1; }
.chip-bln { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; }

.hari-detail { flex:1; }
.hari-weton  { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1rem; color:var(--coklat-tua); }
.hari-neptu  { font-size:.85rem; color:var(--coklat-muda); font-weight:400; margin-left:6px; }
.hari-ket    { font-size:.9rem; color:var(--coklat); font-style:italic; margin-top:2px; font-family:'Cormorant Garamond',serif; }
.hari-ok     { color:var(--hijau); font-size:1.2rem; font-weight:700; }

.empty-state {
  text-align:center;
  padding:40px 20px;
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;
  color:var(--coklat-muda);
  font-style:italic;
}
.empty-hint { font-size:.9rem; margin-top:8px; }

/* ── AdSense slots ─────────────────────────────────────────── */
.ad-slot {
  background: var(--krem);
  border: 1px dashed rgba(201,168,76,.5);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  color: var(--coklat-muda);
  font-family: 'Cormorant Garamond', serif;
  font-size: .85rem;
  letter-spacing: 1px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
}

/* ── Article / SEO content ─────────────────────────────────── */
.article-section {
  margin-top: 48px;
}

.article-section h2 {
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201,168,76,.3);
}

.article-section h3 {
  font-size: 1.2rem;
  margin: 24px 0 10px;
  color: var(--coklat);
}

.article-section p,
.article-section li {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--coklat);
  line-height: 1.85;
}

.article-section ul,
.article-section ol {
  padding-left: 24px;
  margin-bottom: 16px;
}
.article-section li { margin-bottom: 6px; }

/* ── FAQ Section ───────────────────────────────────────────── */
.faq-section {
  margin-top: 48px;
}

.faq-item {
  border: 1px solid rgba(201,168,76,.3);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--krem-muda);
}

.faq-question {
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--coklat-tua);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: background .2s;
}
.faq-question:hover { background: var(--krem); }
.faq-question::after { content:'＋'; color:var(--emas); font-size:1.1rem; flex-shrink:0; transition:transform .2s; }
.faq-question.open::after { transform:rotate(45deg); }

.faq-answer {
  display: none;
  padding: 0 20px 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--coklat);
  line-height: 1.8;
  border-top: 1px solid rgba(201,168,76,.2);
}
.faq-answer.open { display:block; }

/* ── Category links ────────────────────────────────────────── */
.kat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.kat-card {
  background: var(--krem);
  border: 1px solid rgba(201,168,76,.4);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  text-decoration: none;
  color: var(--coklat-tua);
  transition: all .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.kat-card:hover {
  background: var(--coklat-tua);
  color: var(--emas-muda);
  border-color: var(--emas);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kat-card-icon { font-size: 2rem; }
.kat-card-label { font-family:'Cormorant Garamond',serif; font-size:.95rem; font-weight:600; }

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  background: var(--coklat-tua);
  color: var(--emas-muda);
  padding: 40px 24px 32px;
}

.footer-inner {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px;
}

.footer-brand { font-family:'Playfair Display',serif; }
.footer-brand h2 { color:var(--emas); font-size:1.4rem; margin-bottom:8px; }
.footer-brand p  { font-family:'Cormorant Garamond',serif; font-size:.9rem; opacity:.7; line-height:1.7; }

.footer-links h3 { color:var(--emas); font-size:.75rem; letter-spacing:3px; text-transform:uppercase; font-family:'Cormorant Garamond',serif; margin-bottom:12px; }
.footer-links ul { list-style:none; }
.footer-links li { margin-bottom:8px; }
.footer-links a  { color:var(--emas-muda); opacity:.7; text-decoration:none; font-family:'Cormorant Garamond',serif; font-size:.95rem; transition:opacity .2s; }
.footer-links a:hover { opacity:1; color:var(--emas); }

.footer-bottom {
  max-width:800px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(201,168,76,.2);
  text-align: center;
  font-family:'Cormorant Garamond',serif;
  font-size:.85rem;
  opacity:.5;
  color: var(--emas-muda);
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar        { width:6px; }
::-webkit-scrollbar-track  { background:var(--krem); }
::-webkit-scrollbar-thumb  { background:var(--emas); border-radius:3px; }
::selection { background:var(--emas-muda); color:var(--coklat-tua); }

/* ── Utilities ─────────────────────────────────────────────── */
.text-center  { text-align:center; }
.mt-sm { margin-top:12px; }
.mt-md { margin-top:24px; }
.mt-lg { margin-top:40px; }
.mb-sm { margin-bottom:12px; }
.mb-md { margin-bottom:24px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:600px) {
  .site-header   { padding:36px 20px 40px; }
  .card          { padding:20px 16px; }
  .hasil-card    { padding:20px; }
  .weton-chip    { min-width:76px; padding:12px 16px; }
  .weton-value   { font-size:1.25rem; }
  .tabs-nav      { overflow-x:auto; }
  .tab-btn       { font-size:.9rem; padding:10px 6px; white-space:nowrap; }
  .footer-inner  { grid-template-columns:1fr; gap:24px; }
}