/* ============================================
   TEMONJO - HALAMAN /feature
   Layer di atas landing/styles.css.
   Berisi: section khusus halaman fitur, mockup
   CSS (tanpa screenshot), dan tema night.
   ============================================ */

/* --- Tema night: override token warna --- */
:root { color-scheme: light; }

[data-theme="night"] {
  color-scheme: dark;
  --bg:           #09090B;
  --bg-subtle:    #0E0E11;
  --bg-muted:     #18181B;
  --bg-hover:     #1F1F23;

  --fg:           #FAFAFA;
  --fg-default:   #E4E4E7;
  --fg-muted:     #A1A1AA;
  --fg-subtle:    #6B6B74;

  --border:       #232327;
  --border-hover: #3F3F46;

  --accent:        #2DD4DA;
  --accent-hover:  #5EE6ED;
  --accent-light:  rgba(45, 212, 218, 0.10);
  --accent-border: rgba(45, 212, 218, 0.35);

  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4);
  --shadow-md: 0 2px 8px -2px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px -4px rgba(0,0,0,0.6);
}

/* Bagian yang warnanya hardcoded di styles.css */
[data-theme="night"] .navbar { background: rgba(9, 9, 11, 0.92); }
[data-theme="night"] .browser-frame { box-shadow: var(--shadow-lg); }

/* Transisi halus saat ganti tema */
body, .navbar, .fitur-group, .fitur-chip, .pillar-item {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* --- Tombol ganti tema di navbar --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--border-hover); background: var(--bg-muted); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="night"] .theme-toggle .icon-sun { display: block; }
[data-theme="night"] .theme-toggle .icon-moon { display: none; }

/* --- Hero halaman fitur: terpusat --- */
.feat-hero { padding: 72px 0 64px; border-bottom: 1px solid var(--border); text-align: center; }
.feat-hero h1 { font-size: 2.75rem; max-width: 760px; margin: 0 auto 20px; }
.feat-hero h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.feat-hero .hero-sub { margin: 0 auto 32px; max-width: 620px; }
.feat-hero .hero-cta { justify-content: center; }
.feat-hero .hero-meta { justify-content: center; }

/* --- Pilar (prinsip produk) --- */
.pillar { background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pillar-item {
  padding: 24px 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.pillar-index {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg-subtle);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.pillar-item h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.pillar-item p { font-size: 0.875rem; line-height: 1.6; }

/* --- Deep dive per kategori --- */
.deep-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.deep-row:last-of-type { border-bottom: 0; }
.deep-row.flip .deep-text { order: 2; }
.deep-row.flip .deep-visual { order: 1; }

.deep-num {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-subtle);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.deep-text h2 { font-size: 1.75rem; margin-bottom: 14px; }
.deep-text > p { font-size: 1rem; line-height: 1.65; margin-bottom: 26px; }

.feat-check {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.feat-check li {
  position: relative;
  padding-left: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-default);
  line-height: 1.5;
}
.feat-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}

.deep-visual .browser-frame { max-width: 480px; margin: 0 auto; }
.deep-row.flip .deep-visual .browser-frame { margin: 0 auto; }
.deep-caption {
  margin-top: 12px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--fg-subtle);
}

/* --- Mockup: daftar produk --- */
.mock-list { display: flex; flex-direction: column; gap: 10px; }
.mock-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.mock-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mock-thumb svg { width: 16px; height: 16px; color: var(--fg-muted); }
.mock-product-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mock-product-body .block-line { height: 7px; }
.mock-badge {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.mock-badge.digital { color: var(--accent); border-color: var(--accent-border); background: var(--accent-light); }
.mock-badge.fisik { color: var(--success); border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); }

/* --- Mockup: papan integrasi --- */
.mock-board { display: flex; flex-direction: column; gap: 12px; }
.mock-board-row { display: flex; align-items: flex-start; gap: 12px; }
.mock-board-label {
  width: 84px;
  flex-shrink: 0;
  padding-top: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-subtle);
}
.mock-board-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mock-chip {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg-default);
}
.mock-chip.accent { color: var(--accent); border-color: var(--accent-border); background: var(--accent-light); }

/* --- Mockup: toko --- */
.mock-store-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.mock-tile {
  aspect-ratio: 1;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.mock-store-foot { display: flex; gap: 8px; }
.mock-store-foot .block-line { height: 8px; }

/* --- Mockup: statistik --- */
.mock-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 110px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 10px;
}
.mock-bar { flex: 1; border-radius: 3px 3px 0 0; background: var(--border); }
.mock-bar.hot { background: var(--accent); }
.mock-events { display: flex; flex-direction: column; gap: 6px; }
.mock-event {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  color: var(--fg-muted);
}
.mock-event .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mock-event .dot.pv { background: var(--fg-subtle); }
.mock-event .dot.ic { background: var(--accent); }
.mock-event .dot.buy { background: var(--success); }
.mock-event .block-line { height: 7px; }

/* --- Mockup: revisi AI --- */
.mock-ai-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mock-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mock-ai-code {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  font-size: 0.6875rem;
  color: var(--fg-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 8px;
}
.mock-ai-status {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-full);
  padding: 3px 9px;
}
.mock-ai-diff { display: flex; flex-direction: column; gap: 6px; }
.mock-diff-line {
  height: 7px;
  border-radius: 3px;
  background: var(--bg-muted);
}
.mock-diff-line.add { background: rgba(16,185,129,0.35); }
.mock-diff-line.del { background: rgba(239,68,68,0.30); }
.mock-ai-actions { display: flex; gap: 8px; margin-top: 2px; }
.mock-ai-btn {
  flex: 1;
  height: 26px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-muted);
}
.mock-ai-btn.ok { background: var(--fg); border-color: var(--fg); }

/* --- Indeks semua fitur (pakai gaya fitur-group homepage) --- */
.index-section { background: var(--bg-subtle); border-top: 1px solid var(--border); }
.index-note {
  margin-top: 20px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--fg-subtle);
}
.index-note a { color: var(--accent); text-decoration: none; }
.index-note a:hover { color: var(--accent-hover); }
.fitur-chip.plain { padding: 7px 12px; }
.fitur-chip.plain::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 968px) {
  .feat-hero h1 { font-size: 2.125rem; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }

  .deep-row { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
  .deep-row.flip .deep-text { order: 1; }
  .deep-row.flip .deep-visual { order: 2; }
  .deep-visual .browser-frame { max-width: 560px; }
}

@media (max-width: 640px) {
  .feat-hero { padding: 48px 0; }
  .feat-hero h1 { font-size: 1.75rem; }
  .deep-text h2 { font-size: 1.375rem; }
  .pillar-grid { grid-template-columns: 1fr; }
  .feat-check { grid-template-columns: 1fr; }
  .mock-board-label { width: 64px; }
}