/*
Theme Name: Ginjalpedia
Theme URI: https://ginjalpedia.org/
Description: Child theme of Hello Elementor for Ginjalpedia. Article, category and search layouts, plus SEO/GEO structured data.
Author: WIZ
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: ginjalpedia
*/

/* ---------- Tokens (from the logo + design canvas) ---------- */
:root {
  --gp-navy: #161F33;
  --gp-navy-700: #2A3756;
  --gp-ink-2: #3B4660;
  --gp-muted: #5A6478;
  --gp-line: #DCE1EA;
  --gp-mist: #F3F5F9;
  --gp-paper: #FFFFFF;
  --gp-coral: #F07F62;
  --gp-coral-ink: #A63F26;
  --gp-coral-soft: #FDE9E3;
  --gp-green: #17806F;
  --gp-green-ink: #0F5E51;
  --gp-green-soft: #DFF2EE;
  --gp-amber-soft: #FFF1D6;
  --gp-amber: #8A5300;
  --gp-amber-ink: #3D2600;
  --gp-on-navy: #C9D0DE;
  --gp-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gp-radius: 16px;
  --gp-gutter: 16px;
}
@media (min-width: 768px) { :root { --gp-gutter: 24px; } }

body {
  font-family: var(--gp-font);
  color: var(--gp-navy);
  background: var(--gp-paper);
  -webkit-font-smoothing: antialiased;
}
body a { color: var(--gp-navy); }
body a:hover, body a:focus { color: var(--gp-coral-ink); }
:focus-visible { outline: 3px solid var(--gp-coral); outline-offset: 2px; }

/* ---------- Layout ---------- */
.gp { font-family: var(--gp-font); color: var(--gp-navy); }
.gp *, .gp *::before, .gp *::after { box-sizing: border-box; }
.gp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gp-gutter); }
.gp-wrap--article { max-width: 760px; }
.gp-muted { color: var(--gp-muted); }
.gp-small { font-size: 13px; line-height: 1.6; }
.gp-eyebrow {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.gp-kicker { font-size: 12px; font-weight: 700; color: var(--gp-coral-ink); }
.gp-icon { flex: none; }

/* ---------- Buttons, chips ---------- */
.gp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 1.5px solid var(--gp-navy); border-radius: 14px; background: var(--gp-navy); color: #fff;
  font: 700 16px var(--gp-font); text-decoration: none; cursor: pointer;
}
.gp-btn:hover, .gp-btn:focus { background: var(--gp-navy-700); color: #fff; }
.gp-btn--outline { background: #fff; color: var(--gp-navy); }
.gp-btn--outline:hover, .gp-btn--outline:focus { background: var(--gp-mist); color: var(--gp-navy); }
.gp-btn--coral { background: var(--gp-coral); border-color: var(--gp-coral); color: var(--gp-navy); }
.gp-linkbtn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--gp-muted); font: 600 15px var(--gp-font); cursor: pointer; text-align: left; }

.gp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-chips--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .gp-chips--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gp-chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding: 16px var(--gp-gutter) 4px; max-width: 1200px; margin: 0 auto; scrollbar-width: none; }
.gp-chip {
  display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--gp-line); border-radius: 999px; background: #fff; color: var(--gp-navy);
  font: 600 15px var(--gp-font); text-decoration: none; cursor: pointer;
}
.gp-chip:hover { border-color: var(--gp-navy); color: var(--gp-navy); }
.gp-chip.is-active { background: var(--gp-navy); border-color: var(--gp-navy); color: #fff; }
.gp-chip--tile { min-height: 56px; padding: 10px 14px; border-radius: 14px; }
.gp-chip--green { border: 0; background: var(--gp-green-soft); color: var(--gp-green-ink); }

/* ---------- Search ---------- */
.gp-search-wrap { max-width: 640px; }
.gp-search label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.gp-search__box {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 6px 0 16px;
  border: 2px solid var(--gp-navy); border-radius: 16px; background: #fff;
}
.gp-search__box input[type=search] {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; padding: 0; background: transparent;
  font: 500 16px var(--gp-font); color: var(--gp-navy);
}
.gp-search__box button {
  height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--gp-navy); color: #fff;
  font: 700 15px var(--gp-font); cursor: pointer;
}
.gp-search__box:focus-within { outline: 3px solid var(--gp-coral); outline-offset: 2px; }

/* ---------- Cards and rows ---------- */
.gp-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.gp-cards > * { flex: 0 0 220px; scroll-snap-align: start; }
@media (min-width: 900px) {
  .gp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow: visible; }
}
.gp-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff;
  border: 1px solid var(--gp-line); text-decoration: none; color: var(--gp-navy);
}
.gp-card__media { display: block; height: 150px; background: var(--gp-navy-700); }
.gp-card__img { width: 100%; height: 100%; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; }
.gp-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 16px; }
.gp-card__body strong { font-size: 15px; line-height: 1.35; }

.gp-thumb--empty { background: var(--gp-navy-700); color: #fff; display: flex; align-items: center; justify-content: center; }

.gp-list { display: flex; flex-direction: column; }
.gp-row {
  display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--gp-line);
  text-decoration: none; color: var(--gp-navy);
}
.gp-row:last-child { border-bottom: 0; }
.gp-row__thumb { flex: 0 0 72px; width: 72px; height: 96px; border-radius: 12px; object-fit: cover; }
.gp-row__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gp-row__body strong { font-size: 16px; line-height: 1.35; }
.gp-row__excerpt { font-size: 14px; line-height: 1.5; color: var(--gp-muted); }
.gp-list-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 0 8px; }
.gp-list-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.gp-list-link {
  display: flex; align-items: center; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--gp-line);
  border-radius: 14px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--gp-navy);
}

/* ---------- Boxes ---------- */
.gp-answer, .gp-alert, .gp-coralbox {
  display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; padding: 18px; border-radius: var(--gp-radius);
}
.gp-answer { background: var(--gp-green-soft); }
.gp-answer .gp-eyebrow { color: var(--gp-green-ink); }
.gp-answer p { margin: 0; font-size: 17px; line-height: 1.6; }
.gp-answer a { font-weight: 700; color: var(--gp-green-ink); }
.gp-alert { background: var(--gp-amber-soft); color: var(--gp-amber-ink); }
.gp-alert h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--gp-amber-ink); }
.gp-alert .gp-eyebrow { color: var(--gp-amber); }
.gp-alert ul { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.65; }
.gp-alert--igd h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gp-amber); }
.gp-coralbox { background: var(--gp-coral-soft); }

/* ---------- Breadcrumb ---------- */
.gp-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 16px; font-size: 13px; color: var(--gp-muted); }
.gp-breadcrumb a { color: var(--gp-muted); }
.gp-breadcrumb--light, .gp-breadcrumb--light a { color: var(--gp-on-navy); padding-top: 0; }

/* ---------- Article ---------- */
.gp-article__head { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.gp-article h1, .gp-hub h1 {
  margin: 0; font-size: clamp(28px, 6vw, 44px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em;
}
.gp-byline { display: flex; gap: 12px; align-items: center; font-size: 13px; line-height: 1.45; }
.gp-byline__mark { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--gp-mist); display: flex; align-items: center; justify-content: center; }
.gp-byline__mark::before { content: ''; width: 22px; height: 18px; border-radius: 60% 40% 55% 45%; background: var(--gp-navy); }
.gp-byline a { text-decoration: none; }
.gp-byline__text { display: flex; flex-direction: column; gap: 2px; }
.gp-byline a { font-weight: 700; }

.gp-points h2 { margin: 24px 0 10px; font-size: 18px; font-weight: 800; }
.gp-points ul { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.65; color: var(--gp-navy-700); }

.gp-video { margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; }
.gp-video__facade, .gp-video__frame {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 420px;
  aspect-ratio: 9 / 16; max-height: 640px; margin: 0 auto; padding: 0; border: 0; border-radius: 18px;
  overflow: hidden; background: var(--gp-navy-700); cursor: pointer;
}
.gp-video__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-video__play {
  position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 50%; background: rgba(22, 31, 51, .6); color: #fff;
}
.gp-video__play .gp-icon { width: 26px; height: 26px; }
.gp-video figcaption { font-style: normal; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--gp-muted); }
.gp-video figcaption a { flex: none; font-weight: 700; color: var(--gp-coral-ink); }

.gp-toc {
  display: flex; flex-direction: column; gap: 2px; margin: 24px 0 0; padding: 14px 16px;
  border: 1.5px solid var(--gp-line); border-radius: var(--gp-radius); font-size: 15px;
}
.gp-toc .gp-eyebrow { color: var(--gp-muted); margin-bottom: 4px; }
.gp-toc a { display: flex; align-items: center; min-height: 36px; }

.gp-prose { font-size: 17px; line-height: 1.7; color: var(--gp-navy-700); }
.gp-prose h2 { margin: 32px 0 8px; font-size: 22px; line-height: 1.3; font-weight: 800; color: var(--gp-navy); scroll-margin-top: 80px; }
.gp-prose h3 { margin: 24px 0 6px; font-size: 18px; font-weight: 800; color: var(--gp-navy); }
.gp-prose p { margin: 0 0 14px; }
.gp-prose ul, .gp-prose ol { padding-left: 22px; margin: 0 0 14px; }
.gp-prose a { color: var(--gp-coral-ink); }

.gp-faq { margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.gp-faq h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.gp-faq details { border: 1.5px solid var(--gp-line); border-radius: 14px; padding: 14px 16px; }
.gp-faq summary { min-height: 28px; font-size: 16px; font-weight: 700; cursor: pointer; }
.gp-faq p { margin: 10px 0 0; font-size: 16px; line-height: 1.65; color: var(--gp-navy-700); }

.gp-refs { margin: 28px 0 0; font-size: 13px; line-height: 1.6; color: var(--gp-muted); }
.gp-refs h2 { margin: 0 0 6px; font-size: 13px; color: var(--gp-navy); }
.gp-refs ol { margin: 0; padding-left: 20px; }

.gp-disclaimer { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 32px; font-size: 13px; line-height: 1.6; color: var(--gp-muted); }
.gp-disclaimer p { margin: 0; }
.gp-disclaimer a { font-weight: 700; color: var(--gp-coral-ink); }

.gp-related { background: var(--gp-mist); padding: 24px 0 32px; }
.gp-related .gp-wrap { max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.gp-related h2 { margin: 0; font-size: 18px; font-weight: 800; }
.gp-related__item {
  display: flex; align-items: center; min-height: 56px; padding: 12px 16px; border-radius: 14px; background: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none;
}

/* ---------- Article: summary, questions, history ---------- */
.gp-article__head .gp-kicker { font-size: 13px; letter-spacing: .02em; }
.gp-summary { margin: 20px 0 0; padding: 18px 18px 6px; border-radius: var(--gp-radius); background: var(--gp-mist); }
.gp-summary .gp-eyebrow { color: var(--gp-muted); margin-bottom: 8px; }
.gp-summary__lead { margin: 0 0 12px; font-size: 18px; line-height: 1.6; font-weight: 600; color: var(--gp-navy); }
.gp-summary ul { margin: 0 0 12px; padding-left: 20px; font-size: 16px; line-height: 1.65; color: var(--gp-navy-700); }
.gp-questions { margin: 28px 0 0; display: flex; flex-direction: column; gap: 8px; }
.gp-questions h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.gp-questions .gp-list-link { justify-content: space-between; gap: 12px; }
.gp-history ul { margin: 0; padding: 0; list-style: none; }
.gp-related h3.gp-eyebrow { margin: 14px 0 2px; color: var(--gp-muted); }

/* ---------- Content type, evidence, citations, research and case boxes ---------- */
.gp-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gp-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.gp-badge--panduan { background: var(--gp-mist); color: var(--gp-navy); }
.gp-badge--riset-terbaru { background: var(--gp-navy); color: #fff; }
.gp-badge--studi-kasus { background: var(--gp-green-soft); color: var(--gp-green-ink); }
.gp-badge--tanya-jawab { background: var(--gp-coral-soft); color: var(--gp-coral-ink); }
.gp-badge--evidence { background: #fff; color: var(--gp-ink-2); border: 1.5px solid var(--gp-line); }
.gp-labels__chapter { font-size: 13px; font-weight: 700; color: var(--gp-coral-ink); }
.gp-cite { font-size: .7em; line-height: 0; margin-left: 1px; }
.gp-cite a { font-weight: 700; text-decoration: none; color: var(--gp-coral-ink); }
.gp-prose a { text-decoration: underline; text-underline-offset: 2px; }
.gp-refs li { margin-bottom: 6px; }
.gp-refs li:target { background: var(--gp-coral-soft); border-radius: 6px; }
.gp-refs a { font-weight: 700; color: var(--gp-coral-ink); white-space: nowrap; }
.gp-new { margin: 20px 0 0; padding: 18px; border-radius: var(--gp-radius); background: var(--gp-navy); color: #fff; }
.gp-new .gp-eyebrow { color: var(--gp-coral); margin-bottom: 8px; }
.gp-new ul { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.65; }
.gp-new .gp-cite a { color: var(--gp-coral); }
.gp-study { margin: 20px 0 0; padding: 18px; border: 1.5px solid var(--gp-line); border-radius: var(--gp-radius); }
.gp-study h2 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.gp-study dl { margin: 0; display: grid; gap: 8px; }
.gp-study dl div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 14px; line-height: 1.5; }
.gp-study dt { font-weight: 700; color: var(--gp-muted); }
.gp-study dd { margin: 0; }
.gp-casenote { margin: 20px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--gp-green-soft); font-size: 14px; line-height: 1.6; color: var(--gp-green-ink); }
.gp-casenote p { margin: 4px 0 0; color: var(--gp-navy-700); }

/* ---------- Pusat informasi (category hub) ---------- */
.gp-hub__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gp-coral); }
.gp-guide-nav .gp-chip { gap: 8px; }
.gp-guide-nav__n {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gp-navy); color: #fff; font-size: 12px; font-weight: 800;
}
.gp-guide { padding: 28px 0 4px; border-bottom: 1px solid var(--gp-line); scroll-margin-top: 80px; }
.gp-guide:last-child { border-bottom: 0; padding-bottom: 32px; }
.gp-guide__count { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gp-coral-ink); }
.gp-guide h2 { margin: 4px 0 4px; font-size: 22px; font-weight: 800; }
.gp-guide__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--gp-coral-ink); }

/* ---------- Category hub ---------- */
.gp-hub { background: var(--gp-navy); color: #fff; padding: 20px 0 28px; }
.gp-hub .gp-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.gp-hub h1 { color: #fff; }
.gp-hub__intro { margin: 0; font-size: 16px; line-height: 1.6; color: #E6EAF2; }
.gp-hub .gp-search label { color: #fff; position: absolute; left: -9999px; }
.gp-hub .gp-search__box { border-color: #fff; }
.gp-pagination { padding: 16px 0 40px; }
.gp-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--gp-line); border-radius: 12px; text-decoration: none; font-weight: 700;
}
.gp-pagination .page-numbers.current { background: var(--gp-navy); border-color: var(--gp-navy); color: #fff; }
.gp-empty { padding: 32px 0; display: flex; flex-direction: column; gap: 12px; }
.gp-empty h2 { margin: 0; font-size: 20px; }

/* ---------- Home sections (used by the Elementor templates' HTML widgets) ---------- */
/* Our sections own their spacing; drop Elementor's default gap under widgets that hold them. */
.elementor-widget:has(> .elementor-widget-container > .gp),
.elementor-widget:has(> .gp) { margin-bottom: 0 !important; margin-block-end: 0 !important; }
.e-con:has(.gp), .elementor-section:has(.gp) .elementor-widget-wrap { --kit-widget-spacing: 0px; --widgets-spacing: 0px; gap: 0; }
.gp-section__head a { white-space: nowrap; }
.gp-section { display: flow-root; padding: 28px 0; } /* flow-root: child margins stay inside the coloured band */
.gp-section .gp-coralbox, .gp-section .gp-answer { margin-top: 0; }
.gp-section--mist { background: var(--gp-mist); }
.gp-section--top { padding-bottom: 0; }
.gp-section--bottom { padding-top: 0; }
.gp-section--bottom.gp-section--topspace { padding-top: 32px; padding-bottom: 36px; }
.gp-section h2.gp-h2 { margin: 0 0 14px; font-size: clamp(20px, 3vw, 26px); font-weight: 800; }
.gp-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.gp-section__head h2 { margin: 0; }
.gp-section__head a { font-size: 14px; font-weight: 700; }
.gp-hero h1 { margin: 0; font-size: clamp(30px, 5.5vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; max-width: 680px; }
.gp-hero p { margin: 12px 0 20px; font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--gp-ink-2); max-width: 600px; }
.gp-persona { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 768px) { .gp-persona { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gp-persona a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 64px; padding: 14px 16px;
  border-radius: 16px; background: #fff; border: 1.5px solid var(--gp-line); text-decoration: none; color: var(--gp-navy);
}
.gp-persona strong { font-size: 16px; }
.gp-persona span { font-size: 13px; color: var(--gp-muted); }
.gp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .gp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gp-tile {
  display: flex; flex-direction: column; justify-content: space-between; height: 96px; padding: 14px;
  border-radius: 16px; background: var(--gp-navy); color: #fff; text-decoration: none; font-weight: 700;
}
@media (min-width: 768px) { .gp-tile { height: 120px; padding: 18px; font-size: 17px; } }
.gp-tile:hover, .gp-tile:focus { background: var(--gp-navy-700); color: #fff; }
.gp-tile::before { content: ''; width: 22px; height: 18px; border-radius: 60% 40% 55% 45%; background: var(--gp-coral); }
.gp-rows { display: flex; flex-direction: column; border: 1.5px solid var(--gp-line); border-radius: 16px; overflow: hidden; }
.gp-rows a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 12px 16px;
  border-bottom: 1px solid var(--gp-line); text-decoration: none; color: var(--gp-navy);
}
.gp-rows a:last-child { border-bottom: 0; }
.gp-rows strong { font-size: 16px; }
.gp-rows span { font-size: 13px; color: var(--gp-muted); }
.gp-editorial { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px; background: var(--gp-navy); color: #fff; }
.gp-editorial strong { font-size: 16px; }
.gp-editorial p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gp-on-navy); }
.gp-editorial p.gp-small { font-size: 13px; }
.gp-editorial a { font-size: 13px; font-weight: 700; color: var(--gp-coral); }
.gp-editorial a:hover { color: #fff; }
@media (min-width: 900px) { .gp-editorial { max-width: 760px; } }

/* ---------- Placeholder thumbnails (until articles have images) ---------- */
.gp-thumb--empty { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gp-thumb--ginjal { background: var(--gp-navy-700); }
.gp-thumb--penyebab-utama { background: var(--gp-coral-ink); }
.gp-thumb--kesehatan-umum { background: var(--gp-green-ink); }
.gp-thumb__bean { position: absolute; right: -12%; bottom: -18%; width: 62%; aspect-ratio: 1.25; border-radius: 60% 40% 55% 45%; background: rgba(255,255,255,.12); }
.gp-thumb--ginjal .gp-thumb__bean { background: rgba(240,127,98,.35); }
.gp-thumb__play { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; }

/* ---------- Homepage: article-first ---------- */
.gp-metaline { font-size: 13px; color: var(--gp-muted); }
.gp-hometop { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .gp-hometop { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; } }
.gp-hometop .gp-eyebrow { margin-bottom: 12px; color: var(--gp-coral-ink); }
.gp-feature { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--gp-navy); }
.gp-feature__media { display: block; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; }
.gp-feature__img { width: 100%; height: 100%; object-fit: cover; }
.gp-feature__body { display: flex; flex-direction: column; gap: 8px; }
.gp-feature__title { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.gp-feature:hover .gp-feature__title { color: var(--gp-coral-ink); }
.gp-feature__summary { font-size: 16px; line-height: 1.6; color: var(--gp-ink-2); }
.gp-compacts, .gp-popular { display: flex; flex-direction: column; }
.gp-compact { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gp-line); text-decoration: none; color: var(--gp-navy); }
.gp-compact:first-child { padding-top: 0; }
.gp-compact:last-child { border-bottom: 0; }
.gp-compact__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.gp-compact__thumb { flex: 0 0 72px; width: 72px; height: 72px; margin-left: auto; border-radius: 12px; object-fit: cover; }
.gp-compact__thumb .gp-thumb__play { width: 28px; height: 28px; }
.gp-compact strong { font-size: 16px; line-height: 1.35; }
.gp-compact:hover strong { color: var(--gp-coral-ink); }
.gp-compact__n { flex: 0 0 36px; font-size: 30px; line-height: 1; font-weight: 800; color: var(--gp-coral); }
@media (min-width: 900px) { .gp-popular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } .gp-popular .gp-compact:first-child { padding-top: 14px; } }
.gp-jeniscols { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .gp-jeniscols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
.gp-jeniscol h3 { margin: 0 0 10px; }
.gp-hubcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.gp-hubcard { display: flex; flex-direction: column; padding: 18px 18px 14px; border: 1.5px solid var(--gp-line); border-top: 5px solid var(--gp-navy); border-radius: 18px; background: #fff; }
.gp-hubcard--penyebab-utama { border-top-color: var(--gp-coral); }
.gp-hubcard--kesehatan-umum { border-top-color: var(--gp-green); }
.gp-hubcard header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.gp-hubcard__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gp-muted); }
.gp-hubcard h3 { margin: 0; font-size: 20px; font-weight: 800; }
.gp-hubcard h3 a { text-decoration: none; }
.gp-hubcard__count { font-size: 13px; color: var(--gp-muted); }
.gp-hubcard ul { margin: 0; padding: 0; list-style: none; }
.gp-hubcard li a { display: flex; align-items: center; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--gp-line); font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.gp-hubcard__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--gp-coral-ink); }
.gp-homesearch h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.gp-homesearch p { margin: 0 0 16px; font-size: 15px; color: var(--gp-ink-2); }

/* ---------- Article search (/cari/) ---------- */
.gp-cari { display: flex; flex-direction: column; gap: 12px; }
.gp-cari__scope { margin: 0; font-size: 14px; color: var(--gp-ink-2); }
.gp-cari__status { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--gp-muted); }
.gp-cari__results mark { background: var(--gp-coral-soft); color: inherit; padding: 0 2px; border-radius: 3px; }
.gp-cari__empty p { margin: 0 0 10px; font-size: 15px; color: var(--gp-ink-2); }
.gp-cari__empty[hidden] { display: none; }

/* ---------- Kelas page ---------- */
.gp-kelas__group { padding-top: 24px; scroll-margin-top: 80px; }
.gp-kelas__group:first-child { padding-top: 0; }
.gp-kelas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.gp-kelas__card { display: flex; gap: 14px; padding: 12px; border: 1.5px solid var(--gp-line); border-radius: 18px; background: #fff; }
.gp-kelas__card img { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.gp-kelas__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gp-kelas__body h3 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 800; }
.gp-kelas__sub { font-size: 13px; color: var(--gp-muted); }
.gp-kelas__buy { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gp-kelas__buy strong { font-size: 15px; }
.gp-kelas__buy .gp-btn { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.gp-hero + .gp-chips { margin-top: -4px; }
.gp-note { display: flex; flex-direction: column; gap: 6px; margin: 28px 0 12px; padding: 18px; border-radius: 16px; background: var(--gp-mist); font-size: 14px; line-height: 1.6; color: var(--gp-ink-2); }
.gp-note strong { color: var(--gp-navy); font-size: 15px; }

/* ---------- Header / footer (Elementor HFE templates) ---------- */
.gp-header { border-bottom: 1px solid var(--gp-line); background: #fff; }
.gp-header .gp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.gp-header__logo img { display: block; height: 40px; width: auto; }
.gp-header nav { display: none; gap: 4px; }
.gp-header nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 600; text-decoration: none; }
.gp-header nav { margin-left: auto; }
.gp-header__actions { display: flex; align-items: center; gap: 4px; }
.gp-header__search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--gp-line); border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--gp-navy); }
.gp-header__search:hover, .gp-header__search:focus { border-color: var(--gp-navy); }
.gp-header__menu { display: flex; }
.gp-header__menu summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; list-style: none; }
.gp-header__menu summary::-webkit-details-marker { display: none; }
.gp-header__menu[open] .gp-header__drawer { display: flex; }
.gp-header__drawer {
  display: none; position: absolute; left: 0; right: 0; top: 64px; z-index: 50; flex-direction: column;
  padding: 8px var(--gp-gutter) 16px; background: #fff; border-bottom: 1px solid var(--gp-line); box-shadow: 0 12px 24px rgba(22,31,51,.08);
}
.gp-header__drawer a { display: flex; align-items: center; min-height: 48px; font-size: 16px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--gp-line); }
.gp-header { position: relative; }
@media (min-width: 900px) {
  .gp-header nav { display: flex; }
  .gp-header__menu { display: none; }
  .gp-header__logo img { height: 48px; }
  .gp-header .gp-wrap { min-height: 76px; }
}
.gp-footer { background: var(--gp-navy-700); color: var(--gp-on-navy); padding: 32px 0 40px; font-size: 14px; line-height: 1.6; }
.gp-footer .gp-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.gp-footer p { margin: 0; max-width: 460px; }
.gp-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 4px 24px; }
.gp-footer nav a { display: flex; align-items: center; min-height: 36px; color: #fff; }
.gp-footer small { flex-basis: 100%; font-size: 12px; }

/* ---------- Article images ---------- */
.gp-hero { margin: 22px 0 0; }
.gp-hero__img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 18px; background: var(--gp-mist, #f3f5f9); }
.gp-hero__credit { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--gp-muted, #5b6577); }
.gp-hero__credit a { color: inherit; }
.gp-hubcard--img { padding-top: 0; overflow: hidden; }
.gp-hubcard__media { display: block; margin: 0 -18px 14px; aspect-ratio: 16 / 7; overflow: hidden; background: var(--gp-mist, #f3f5f9); }
.gp-hubcard__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Topics ---------- */
.gp-topics { margin: 28px 0 0; }
.gp-topics .gp-eyebrow { margin: 0 0 10px; }
.gp-chips--topics { margin: 4px 0 8px; }
.gp-footer .gp-footer__sections { flex-basis: 100%; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.15); font-weight: 600; }

/* ---------- Tables in articles (normal values) ---------- */
.gp-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 16px 0 20px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.gp-prose th, .gp-prose td { padding: 10px 12px; border-bottom: 1px solid var(--gp-line); text-align: left; vertical-align: top; }
.gp-prose thead th { background: var(--gp-mist); font-weight: 700; color: var(--gp-navy); white-space: nowrap; }
.gp-prose tbody tr:last-child td { border-bottom: 0; }