/* BACA */
.topik-filter{display:flex;gap:7px;padding:0 16px 10px;overflow-x:auto;scrollbar-width:none}
.topik-filter::-webkit-scrollbar{display:none}
.topik-chip{flex-shrink:0;padding:6px 13px;border-radius:100px;font-size:12px;font-family:'Poppins',sans-serif;border:1.5px solid var(--gray-mid);background:var(--white);color:var(--midnight);cursor:pointer;transition:all .2s;font-weight:500}
.topik-chip.active{background:linear-gradient(90deg,var(--electric),var(--cyan));color:#fff;border-color:var(--electric)}
.baca-list{padding:0 16px;display:flex;flex-direction:column;gap:10px}

/* Section header + "Lihat semua" link (dummy visual pakai ini di beberapa section) */
.produk-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.section-see-all{font-size:11.5px;font-weight:600;color:var(--electric);cursor:pointer;white-space:nowrap}

/* Page header khusus Baca dibuat lebih compact — scoped ke #page-baca aja,
   .page-header dipakai bareng halaman lain (base.css) jadi TIDAK diubah global. */
#page-baca .page-header{padding:13px 16px 6px}
#page-baca .page-header h2{font-size:16px}
#page-baca .page-header p{font-size:10.5px;line-height:1.4}

/* Ringkasan Hari Ini — sekarang gambaran besar KENAPA topik-topik hari ini
   dikumpulkan (item type 'ringkasan-harian' dari AI), BUKAN lagi echo dari
   artikel pertama — itu tugasnya Hero Artikel di bawah, dengan framing beda.
   Override ringan di atas .ai-summary-card yang di-share sama halaman Produk
   (base class TIDAK diubah, cuma ditambah modifier). */
.ai-summary-card.baca-ringkasan-card{margin:0 16px 12px;padding:14px 15px 13px}
.ringkasan-fokus{display:inline-flex;align-items:center;gap:5px;background:rgba(15,111,255,.1);border-radius:100px;padding:4px 10px;font-size:10px;font-weight:700;color:var(--deep);margin-bottom:9px}
.ai-summary-body-text{font-size:12.5px;color:var(--midnight);line-height:1.65;margin-bottom:4px}

/* Hero Artikel — accent bar tipis (BUKAN banner ilustrasi full-block, biar gak
   makan tempat/distract) tapi tetap kelihatan warnanya. Teaser di sini SPESIFIK
   ke artikel ini, sengaja beda framing dari Ringkasan Hari Ini di atas. */
.hero-artikel-card{margin:0 16px 14px;background:var(--white);border-radius:18px;box-shadow:var(--shadow2);overflow:hidden;animation:fadeUp .4s ease}
.hero-artikel-accent{height:6px;background:linear-gradient(90deg,var(--electric),var(--cyan))}
.hero-artikel-photo{width:100%;height:140px;object-fit:cover;display:block}
.hero-artikel-body{padding:14px 16px 16px}
.hero-artikel-badges{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.hero-artikel-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;background:var(--gray-bg);color:var(--electric)}
.hero-artikel-readtime{font-size:10.5px;color:var(--gray-text)}
.hero-artikel-title{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;color:var(--navy);line-height:1.35;margin-bottom:6px}
.hero-artikel-desc{font-size:12.5px;color:var(--gray-text);line-height:1.6;margin-bottom:10px}
.hero-artikel-actions{display:flex;gap:8px}
.hero-artikel-cta{flex:1;background:linear-gradient(90deg,var(--electric),var(--cyan));color:#fff;border:none;border-radius:100px;padding:12px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif}
.hero-artikel-ai{flex-shrink:0;background:var(--white);border:1.5px solid var(--gray-mid);color:var(--midnight);border-radius:100px;padding:12px 16px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif;white-space:nowrap}

/* Artikel Terkait — grid compact 2 kolom, accent bar kecil (bukan icon block
   gede) + kategori + waktu + judul saja */
.baca-more-grid{padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.support-card{background:var(--white);border-radius:14px;padding:0;box-shadow:var(--shadow);cursor:default;overflow:hidden}
.support-accent{height:4px;background:linear-gradient(90deg,var(--electric),var(--cyan))}
.support-card-body{padding:0 12px 11px}
.support-meta{padding-top:9px;font-size:9.5px;color:var(--electric);font-weight:600;margin-bottom:4px}
.support-title{font-size:12px;font-weight:700;color:var(--midnight);line-height:1.35;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.support-desc{font-size:11px;color:var(--gray-text);line-height:1.5;margin-bottom:7px}
.support-expand-btn{width:100%;background:var(--gray-bg);border:none;border-radius:100px;padding:7px;font-size:10.5px;font-weight:700;color:var(--electric);cursor:pointer;font-family:'Poppins',sans-serif}
.support-expand-btn:active{transform:scale(.96)}

/* Berita Terkini — HARUS terasa dinamis (bukan daftar statis),
   makanya dikasih note kecil di atas + horizontal scroll card, bukan list vertikal biasa */
/* Berita Terkini — SEKARANG section besar & berdiri sendiri (bukan pelengkap
   kecil lagi), preview sampai 5 artikel, layout list vertikal (bukan horizontal
   scroll kecil) biar porsi visualnya sesuai posisinya yang lebih penting. */
.berita-head h3{font-size:16px}
.internet-note{margin:0 16px 12px;font-size:12px;color:var(--gray-text);line-height:1.5}
.internet-note b{color:var(--electric)}
.internet-list{display:flex;flex-direction:column;gap:10px;padding:0 16px 18px}
.internet-card{width:100%;background:var(--white);border-radius:16px;padding:14px 15px;box-shadow:var(--shadow2);display:flex;flex-direction:column;gap:9px}
.internet-card-source{font-size:10px;font-weight:700;color:var(--electric);text-transform:uppercase;letter-spacing:.2px}
.internet-card-title{font-size:13.5px;font-weight:700;color:var(--midnight);line-height:1.4}
.internet-card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid var(--gray-bg);padding-top:9px}
.internet-card-date{font-size:10.5px;color:var(--gray-text)}
.internet-card-btn{color:var(--electric);font-weight:700;font-size:12px;text-decoration:none}

/* Inspirasi & Humor — dipindah naik, jadi dikecilin porsinya (ringkas aja) */
.inspirasi-senyum-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px;margin-bottom:10px;align-items:start}

/* Yang Bisa Bapak Lakukan Hari Ini — checklist actionable */
.action-list{padding:0 16px;margin-bottom:12px}
.action-card{background:linear-gradient(135deg,#eef9f0,#e6f6ea);border:1px solid #cdedd4;border-radius:16px;padding:6px 14px;overflow:hidden}
.action-card-photo{width:calc(100% + 28px);margin:-6px -14px 8px;height:110px;object-fit:cover;display:block}
.action-item{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.04)}
.action-item:last-child{border-bottom:none}
.action-check{flex-shrink:0;font-size:14px;line-height:1.4}
.action-text{font-size:12.5px;color:var(--midnight);line-height:1.45;font-weight:500}

/* Inspirasi Ayah + Senyum Bapak — dua kolom berdampingan (sesuai dummy visual),
   TAPI dengan gaya visual yang SENGAJA beda total satu sama lain */

/* Inspirasi Ayah — "Quote of the Day": minimalis, tipografi besar, whitespace
   lega. JANGAN terlihat seperti card artikel biasa. */
.quote-of-day{background:linear-gradient(135deg,#eef3ff,#e4ecff);border-radius:14px;padding:12px 12px;text-align:left;min-height:88px;display:flex;flex-direction:column}
.quote-mark{font-family:'Sora',sans-serif;font-size:24px;color:var(--electric);opacity:.4;line-height:1;margin-bottom:2px}
.quote-of-day-text{font-family:'Sora',sans-serif;font-size:12px;font-weight:700;color:var(--navy);line-height:1.4;flex:1}
.quote-of-day-author{font-size:10px;color:var(--gray-text);margin-top:6px}

/* Senyum Bapak — format chat, ringan & playful, beda total dari Inspirasi */
.senyum-chat{display:flex;flex-direction:column;gap:8px;margin:0 16px;background:var(--white);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.chat-bubble{font-size:12.5px;line-height:1.45;padding:9px 13px;border-radius:14px;max-width:82%}
.chat-bubble-kid{align-self:flex-start;background:var(--gray-bg);color:var(--midnight);border-bottom-left-radius:4px}
.chat-bubble-dad{align-self:flex-end;background:linear-gradient(90deg,var(--electric),var(--cyan));color:#fff;border-bottom-right-radius:4px}

/* Sedang Ramai — trending topic chips, klik untuk cari */
.topik-filter.no-scroll{overflow-x:visible;flex-wrap:wrap}
.topik-filter.no-scroll .topik-chip{flex:1;text-align:center;white-space:nowrap}
.produk-search-clear{background:none;border:none;color:var(--gray-text);font-size:15px;cursor:pointer;padding:4px 2px}
.produk-search-clear.hidden{display:none}

/* FAQ — accordion sederhana */
.baca-faq-list{padding:0 16px 16px;display:flex;flex-direction:column;gap:6px}
.baca-faq-item{background:var(--white);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.baca-faq-q{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px;font-size:12px;font-weight:600;color:var(--midnight);cursor:pointer;line-height:1.35}
.baca-faq-q .arrow{color:var(--electric);flex-shrink:0;font-size:12px}
.baca-faq-a{padding:0 13px 11px;font-size:11.5px;color:var(--gray-text);line-height:1.5}
.faq-ask-ai{display:block;margin-top:8px;background:none;border:none;padding:0;color:var(--electric);font-weight:700;font-size:11px;cursor:pointer;font-family:'Poppins',sans-serif}

@media (max-width:380px){
  .baca-more-grid{grid-template-columns:1fr}
  .inspirasi-senyum-row{grid-template-columns:1fr}
}

/* ══════════ DNA Nearby/Produk rework ══════════ */

/* Ringkasan Hari Ini — tambahan baris "hari ini Bapak akan dapat" (dihitung
   dari section yang beneran ada, bukan angka statis) + estimasi baca. */
.ringkasan-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ringkasan-meta-pill{font-size:9.5px;font-weight:600;color:var(--gray-text);background:var(--gray-bg);border-radius:100px;padding:4px 9px}
.ringkasan-more-link{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;color:var(--electric);cursor:pointer}

/* Insight Hari Ini — dipromosikan ke atas (langsung di bawah Ringkasan),
   dari item 'quote' yang sama tapi framing beda: bukan "quote inspiratif"
   generik, tapi 1 insight actionable + tombol "Kenapa?" yang buka Hero. */
.insight-card{margin:0 16px 14px;background:linear-gradient(135deg,#eef3ff,#e4ecff);border-radius:16px;padding:15px 16px}
.insight-eyebrow{font-size:10.5px;font-weight:700;color:var(--electric);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.insight-text{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:var(--navy);line-height:1.45;margin-bottom:10px}
.insight-why-btn{background:var(--white);border:none;border-radius:100px;padding:8px 14px;font-size:11.5px;font-weight:700;color:var(--electric);cursor:pointer;font-family:'Poppins',sans-serif;box-shadow:var(--shadow)}

/* Dipilih Karena — checklist kecil di dalam Hero Artikel, alasan AI milih
   artikel ini (bukan cuma kenapaPenting 1 kalimat lagi) */
.dipilih-karena{margin:2px 0 12px;display:flex;flex-direction:column;gap:4px}
.dipilih-karena-label{font-size:10px;font-weight:700;color:var(--gray-text);margin-bottom:3px}
.dipilih-karena-item{font-size:11.5px;color:var(--midnight);padding-left:18px;position:relative;line-height:1.5}
.dipilih-karena-item::before{content:'✓';position:absolute;left:0;color:var(--electric);font-weight:800}

/* Langkah Nyata — checkbox BENERAN bisa dicentang & persist per-hari
   (reset besok), bukan cuma ikon statis lagi */
.action-item{cursor:pointer}
.action-checkbox{flex-shrink:0;width:18px;height:18px;border-radius:6px;border:2px solid var(--electric);display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;margin-top:1px;transition:background .15s}
.action-checkbox.checked{background:var(--electric)}
.action-item.checked .action-text{color:var(--gray-text);text-decoration:line-through;text-decoration-color:var(--gray-mid)}
.action-progress-note{font-size:10px;color:var(--gray-text);text-align:right;padding:2px 0 0}

/* Nearby Terkait — clone konsep Nearby, horizontal scroll, dari kategori
   yang AI derive dari topik artikel (nearbyCategory) */
.nearby-terkait-row{display:flex;gap:10px;overflow-x:auto;padding:0 16px 4px;scrollbar-width:none}
.nearby-terkait-row::-webkit-scrollbar{display:none}
.nearby-terkait-card{flex-shrink:0;width:150px;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer}
.nearby-terkait-img{width:100%;height:80px;object-fit:cover;background:var(--gray-bg);display:flex;align-items:center;justify-content:center;font-size:26px}
.nearby-terkait-body{padding:9px 11px 11px}
.nearby-terkait-name{font-size:11.5px;font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:29px}
.nearby-terkait-meta{font-size:10px;color:var(--gray-text)}
.nearby-terkait-empty{padding:0 16px;font-size:11.5px;color:var(--gray-text)}
.nearby-terkait-locbtn{margin:0 16px 12px;background:var(--gray-bg);border:none;border-radius:100px;padding:9px 14px;font-size:11.5px;font-weight:700;color:var(--electric);cursor:pointer;font-family:'Poppins',sans-serif;display:inline-flex;align-items:center;gap:6px}