@import url("../fonts/fonts.css");

/* ============================================================
   RUANG TUMBUH — sistem desain
   Bunda · Guru · Penulis
   ============================================================ */

/* --- 1. Token ------------------------------------------------ */
:root {
  --rt-clay: #e07a5f;
  --rt-clay-600: #c9603f;
  --rt-clay-100: #fbe6de;
  --rt-sage: #7c9a80;
  --rt-sage-600: #5f7d66;
  --rt-sage-100: #e3ece3;
  --rt-honey: #e9b949;
  --rt-honey-100: #fbeecd;
  --rt-berry: #b5586e;
  --rt-berry-100: #f6e2e7;
  --rt-sky: #7ba8c4;
  --rt-sky-100: #e2edf3;

  --rt-ink: #362f2b;
  --rt-ink-soft: #6f615a;
  --rt-cream: #fffbf6;
  --rt-sand: #f7eee4;
  --rt-sand-2: #f1e3d4;
  --rt-line: #e8d9c8;
  --rt-card: #ffffff;
  --rt-shadow-hue: 94 63 45;

  --rt-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --rt-font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rt-font-hand: "Caveat", "Segoe Script", cursive;

  --rt-fs-hero: clamp(2.55rem, 5.6vw, 4.5rem);
  --rt-fs-h1: clamp(2.05rem, 4.2vw, 3.2rem);
  --rt-fs-h2: clamp(1.75rem, 3.2vw, 2.55rem);
  --rt-fs-h3: clamp(1.2rem, 1.9vw, 1.55rem);
  --rt-fs-lead: clamp(1.05rem, 1.4vw, 1.2rem);

  --rt-r-sm: 10px;
  --rt-r: 18px;
  --rt-r-lg: 28px;
  --rt-r-xl: 40px;

  --rt-sh-1: 0 2px 8px rgb(var(--rt-shadow-hue) / 0.06), 0 10px 24px -12px rgb(var(--rt-shadow-hue) / 0.14);
  --rt-sh-2: 0 4px 14px rgb(var(--rt-shadow-hue) / 0.08), 0 22px 44px -20px rgb(var(--rt-shadow-hue) / 0.2);
  --rt-sh-3: 0 8px 22px rgb(var(--rt-shadow-hue) / 0.1), 0 36px 64px -28px rgb(var(--rt-shadow-hue) / 0.26);

  --rt-wrap: 1200px;
  --rt-wrap-narrow: 760px;
  --rt-gut: clamp(1.1rem, 4vw, 2.5rem);
  --rt-section: clamp(3.6rem, 7vw, 6.5rem);

  --rt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rt-header-h: 72px;
}

:root[data-theme="dark"] {
  --rt-clay: #ef9a7d;
  --rt-clay-600: #f4b39c;
  --rt-clay-100: #4a2c22;
  --rt-sage: #9dbda1;
  --rt-sage-600: #b3ceb6;
  --rt-sage-100: #2b3a2e;
  --rt-honey: #f0c766;
  --rt-honey-100: #463619;
  --rt-berry: #dd8a9d;
  --rt-berry-100: #452531;
  --rt-sky: #9cc3da;
  --rt-sky-100: #24343d;

  --rt-ink: #f4eae1;
  --rt-ink-soft: #b6a49a;
  --rt-cream: #1d1917;
  --rt-sand: #262020;
  --rt-sand-2: #2f2725;
  --rt-line: #3e3330;
  --rt-card: #2a2321;
  --rt-shadow-hue: 0 0 0;
  --rt-sh-1: 0 2px 8px rgb(0 0 0 / 0.3);
  --rt-sh-2: 0 10px 30px -12px rgb(0 0 0 / 0.55);
  --rt-sh-3: 0 20px 50px -20px rgb(0 0 0 / 0.65);
}

/* --- 2. Dasar ------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--rt-cream);
  color: var(--rt-ink);
  font-family: var(--rt-font-body);
  font-size: 1rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-radius: inherit; }

a { color: var(--rt-clay-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rt-clay); }

:focus-visible {
  outline: 3px solid var(--rt-clay);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--rt-font-display);
  font-variation-settings: "SOFT" 36, "WONK" 1, "opsz" 96;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--rt-ink);
  text-wrap: balance;
}
h1 { font-size: var(--rt-fs-h1); }
h2 { font-size: var(--rt-fs-h2); }
h3 { font-size: var(--rt-fs-h3); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--rt-honey); color: #2c2523; }

/* --- 3. Utilitas --------------------------------------------- */
.rt-wrap { width: 100%; max-width: var(--rt-wrap); margin-inline: auto; padding-inline: var(--rt-gut); }
.rt-wrap--narrow { max-width: var(--rt-wrap-narrow); }
.rt-section { padding-block: var(--rt-section); position: relative; }
.rt-sand { background: var(--rt-sand); }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.rt-skip {
  position: absolute; left: 50%; top: 0; translate: -50% -150%;
  z-index: 999; background: var(--rt-clay); color: #fff;
  padding: 0.7rem 1.3rem; border-radius: 0 0 var(--rt-r) var(--rt-r);
  font-weight: 600; text-decoration: none; transition: translate 0.25s var(--rt-ease);
}
.rt-skip:focus { translate: -50% 0; color: #fff; }

/* Aksen tulisan tangan */
.rt-hand {
  font-family: var(--rt-font-hand);
  font-size: 1.45em;
  line-height: 1.2;
  color: var(--rt-clay);
  font-weight: 600;
}

/* Kapital kecil label */
.rt-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rt-sage-600);
}
.rt-eyebrow .rt-svg { color: var(--rt-honey); }

/* Judul yang disorot */
.rt-mark { position: relative; display: inline-block; white-space: nowrap; }
.rt-mark > .rt-underline {
  position: absolute; left: -2%; right: -2%; bottom: -0.32em;
  width: 104%; height: 0.42em; color: var(--rt-honey); z-index: -1;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: rt-draw 1.1s var(--rt-ease) 0.35s forwards;
}
.rt-mark > .rt-scribble {
  position: absolute; inset: -28% -7% -26%; width: 114%; height: 154%;
  color: var(--rt-clay); z-index: -1; opacity: 0.75;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: rt-draw 1.4s var(--rt-ease) 0.4s forwards;
}
@keyframes rt-draw { to { stroke-dashoffset: 0; } }

/* Tekstur */
.rt-dotgrid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, var(--rt-line) 1.4px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
  opacity: 0.75;
}

/* Kertas bergaris ala buku tulis */
.rt-notebook {
  position: relative;
  background-color: var(--rt-card);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 31px,
    color-mix(in srgb, var(--rt-sky) 32%, transparent) 31px 32px
  );
}
.rt-notebook::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: clamp(22px, 6%, 62px);
  width: 2px; background: color-mix(in srgb, var(--rt-clay) 48%, transparent);
}
.rt-notebook-holes {
  position: absolute; left: clamp(8px, 2.2%, 22px); top: 8%; bottom: 8%;
  display: flex; flex-direction: column; justify-content: space-evenly; gap: 1rem;
}
.rt-notebook-holes i {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--rt-cream);
  box-shadow: inset 0 1px 3px rgb(var(--rt-shadow-hue) / 0.25);
}

/* Washi tape */
.rt-tape {
  position: absolute; z-index: 3; width: 104px; height: 28px;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--rt-honey) 62%, transparent) 0 7px,
    color-mix(in srgb, var(--rt-honey) 38%, transparent) 7px 14px
  );
  box-shadow: 0 1px 4px rgb(var(--rt-shadow-hue) / 0.16);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%);
}
.rt-tape--tl { top: -13px; left: -18px; rotate: -8deg; }
.rt-tape--tr { top: -13px; right: -18px; rotate: 7deg; }
.rt-tape--bl { bottom: -13px; left: -16px; rotate: 6deg; }
.rt-tape--sage { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--rt-sage) 58%, transparent) 0 7px, color-mix(in srgb, var(--rt-sage) 34%, transparent) 7px 14px); }
.rt-tape--clay { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--rt-clay) 54%, transparent) 0 7px, color-mix(in srgb, var(--rt-clay) 30%, transparent) 7px 14px); }

/* Blob & doodle melayang */
.rt-blob { position: absolute; z-index: 0; pointer-events: none; }
.rt-floaties { position: absolute; inset: -6% -8%; pointer-events: none; z-index: 4; }
.rt-floatie {
  position: absolute; display: block;
  animation: rt-float 6.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes rt-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-13px) rotate(7deg); }
}
.rt-f--tl { top: 2%; left: -1%; color: var(--rt-honey); }
.rt-f--tr { top: 6%; right: 1%; color: var(--rt-clay); }
.rt-f--ml { top: 46%; left: -6%; color: var(--rt-sage); }
.rt-f--mr { top: 38%; right: -5%; color: var(--rt-berry); }
.rt-f--bl { bottom: 6%; left: 4%; color: var(--rt-sky); }
.rt-f--br { bottom: 2%; right: 3%; color: var(--rt-sage); }

/* Pembatas gelombang */
.rt-wave-divider { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; pointer-events: none; }
.rt-wave-divider svg { width: 100%; height: clamp(40px, 5vw, 84px); display: block; }
.rt-wave-divider.is-flipped { bottom: auto; top: -1px; rotate: 180deg; }

/* --- 4. Tombol ----------------------------------------------- */
.rt-btn {
  --btn-bg: var(--rt-clay);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bg); border-radius: 999px;
  font-family: var(--rt-font-body); font-size: 0.97rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--btn-bg) 80%, transparent);
  transition: transform 0.28s var(--rt-ease), box-shadow 0.28s var(--rt-ease), background 0.2s;
}
.rt-btn:hover {
  color: var(--btn-fg);
  transform: translateY(-3px) rotate(-0.6deg);
  box-shadow: 0 16px 28px -12px color-mix(in srgb, var(--btn-bg) 85%, transparent);
}
.rt-btn .rt-svg { transition: translate 0.25s var(--rt-ease); }
.rt-btn:hover .rt-svg { translate: 3px 0; }
.rt-btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--rt-ink);
  border-color: var(--rt-ink); box-shadow: none;
}
.rt-btn--ghost:hover { background: var(--rt-ink); --btn-fg: var(--rt-cream); color: var(--rt-cream); }
.rt-btn--sage { --btn-bg: var(--rt-sage-600); }
.rt-btn--sm { padding: 0.6rem 1.15rem; font-size: 0.87rem; }

/* --- 5. Pil kategori ----------------------------------------- */
.rt-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.32rem 0.85rem;
  background: var(--pill-bg, var(--rt-clay-100));
  color: var(--pill-fg, var(--rt-clay-600));
  border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em;
  text-decoration: none; text-transform: uppercase;
  transition: transform 0.22s var(--rt-ease);
}
a.rt-pill:hover { transform: translateY(-2px) rotate(-1.5deg); color: var(--pill-fg, var(--rt-clay-600)); }
.rt-tone-1 { --pill-bg: var(--rt-clay-100); --pill-fg: var(--rt-clay-600); --tone: var(--rt-clay); }
.rt-tone-2 { --pill-bg: var(--rt-sage-100); --pill-fg: var(--rt-sage-600); --tone: var(--rt-sage); }
.rt-tone-3 { --pill-bg: var(--rt-honey-100); --pill-fg: #9a7413; --tone: var(--rt-honey); }
.rt-tone-4 { --pill-bg: var(--rt-berry-100); --pill-fg: var(--rt-berry); --tone: var(--rt-berry); }
.rt-tone-5 { --pill-bg: var(--rt-sky-100); --pill-fg: #4c7e9c; --tone: var(--rt-sky); }
:root[data-theme="dark"] .rt-tone-3 { --pill-fg: var(--rt-honey); }
:root[data-theme="dark"] .rt-tone-5 { --pill-fg: var(--rt-sky); }

/* --- 6. Header ----------------------------------------------- */
.rt-header {
  position: relative; z-index: 40;
  padding-block: 1.4rem 0;
  background: var(--rt-cream);
}
.rt-header__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* Logo vertikal: foto + nama + tagline */
.rt-logo {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.45rem;
  text-decoration: none; color: inherit; position: relative;
}
.rt-logo__frame {
  display: block; flex: none;
  position: relative; width: var(--logo-size, 74px); aspect-ratio: 1;
  border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, var(--rt-honey), var(--rt-clay), var(--rt-berry), var(--rt-sage), var(--rt-honey));
  transition: transform 0.45s var(--rt-ease);
}
.rt-logo__frame img,
.rt-logo__frame .rt-logo__fallback {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--rt-cream); background: var(--rt-sand-2);
}
.rt-logo__fallback { display: grid; place-items: center; color: var(--rt-clay); }
.rt-logo:hover .rt-logo__frame { transform: rotate(-5deg) scale(1.05); }
.rt-logo__leaf {
  position: absolute; top: -8px; right: -10px; color: var(--rt-sage);
  animation: rt-float 5s ease-in-out infinite;
}
.rt-logo__text { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; }
.rt-logo__name {
  display: block;
  font-family: var(--rt-font-display);
  font-variation-settings: "SOFT" 44, "WONK" 1, "opsz" 120;
  font-size: var(--logo-name, 1.42rem); font-weight: 600; line-height: 1.05;
  letter-spacing: -0.02em; text-align: center; color: var(--rt-ink);
}
.rt-logo__tag {
  display: block;
  font-family: var(--rt-font-hand); font-size: var(--logo-tag, 1.02rem);
  color: var(--rt-clay); letter-spacing: 0.02em; line-height: 1.1;
}
.rt-logo--row { flex-direction: row; gap: 0.7rem; align-items: center; }
.rt-logo--row .rt-logo__text { align-items: flex-start; }
.rt-logo--row .rt-logo__frame { --logo-size: 42px; }
.rt-logo--row .rt-logo__text { text-align: left; }
.rt-logo--row .rt-logo__name { font-size: 1.08rem; text-align: left; }
.rt-logo--row .rt-logo__tag { font-size: 0.92rem; }
.rt-logo--row .rt-logo__leaf { display: none; }

/* Navigasi */
.rt-nav { width: 100%; border-top: 1.5px dashed var(--rt-line); margin-top: 0.3rem; }
.rt-nav__list {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(0.6rem, 2.4vw, 2rem); margin: 0; padding: 0.75rem 0 0.9rem;
}
.rt-nav__list a {
  position: relative; display: block; padding: 0.25rem 0.1rem;
  color: var(--rt-ink); font-size: 0.95rem; font-weight: 600; text-decoration: none;
}
.rt-nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--rt-clay); border-radius: 2px;
  scale: 0 1; transform-origin: left; transition: scale 0.3s var(--rt-ease);
}
.rt-nav__list a:hover::after,
.rt-nav__list .current-menu-item > a::after { scale: 1 1; }
.rt-nav__list .current-menu-item > a { color: var(--rt-clay-600); }
.rt-nav__list .sub-menu {
  position: absolute; list-style: none; margin: 0; padding: 0.5rem;
  background: var(--rt-card); border: 1.5px solid var(--rt-line);
  border-radius: var(--rt-r); box-shadow: var(--rt-sh-2);
  min-width: 190px; opacity: 0; visibility: hidden; translate: 0 8px;
  transition: all 0.25s var(--rt-ease); z-index: 5;
}
.rt-nav__list li { position: relative; }
.rt-nav__list li:hover > .sub-menu,
.rt-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; translate: 0 0; }
.rt-nav__list .sub-menu a { padding: 0.5rem 0.7rem; border-radius: var(--rt-r-sm); }
.rt-nav__list .sub-menu a:hover { background: var(--rt-sand); }
.rt-nav__list .sub-menu a::after { display: none; }

.rt-header__tools { display: flex; align-items: center; gap: 0.4rem; }
.rt-iconbtn {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1.5px solid var(--rt-line); border-radius: 50%;
  background: var(--rt-card); color: var(--rt-ink); cursor: pointer;
  transition: all 0.25s var(--rt-ease);
}
.rt-iconbtn:hover { background: var(--rt-clay); color: #fff; border-color: var(--rt-clay); transform: rotate(-8deg); }

/* Bar lengket saat scroll */
.rt-sticky {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem var(--rt-gut);
  background: color-mix(in srgb, var(--rt-cream) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1.5px solid var(--rt-line);
  translate: 0 -110%; transition: translate 0.4s var(--rt-ease);
}
.rt-sticky.is-on { translate: 0 0; }
.rt-sticky__nav { display: none; gap: 1.4rem; }
.rt-sticky__nav a { color: var(--rt-ink); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.rt-sticky__nav a:hover { color: var(--rt-clay); }
@media (min-width: 900px) { .rt-sticky__nav { display: flex; } }

/* Menu mobile */
.rt-burger { display: inline-grid; }
@media (min-width: 900px) { .rt-burger { display: none; } .rt-nav { display: block; } }
@media (max-width: 899px) {
  .rt-nav { display: none; }
  .rt-header__inner { flex-direction: row; justify-content: space-between; }
  .rt-logo { flex-direction: row; gap: 0.6rem; }
  .rt-logo .rt-logo__frame { --logo-size: 46px; }
  .rt-logo .rt-logo__text { align-items: flex-start; }
  .rt-logo .rt-logo__name { font-size: 1.05rem; text-align: left; }
  .rt-logo .rt-logo__tag { font-size: 0.9rem; }
  .rt-logo__leaf { display: none; }
}

.rt-drawer {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: var(--rt-cream);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--rt-ease), visibility 0.3s;
}
.rt-drawer.is-open { opacity: 1; visibility: visible; }
.rt-drawer__close { position: absolute; top: 1.2rem; right: var(--rt-gut); }
.rt-drawer__list { list-style: none; margin: 0; padding: 0; text-align: center; }
.rt-drawer__list a {
  display: block; padding: 0.5rem 1rem; text-decoration: none; color: var(--rt-ink);
  font-family: var(--rt-font-display); font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 600;
}
.rt-drawer__list a:hover { color: var(--rt-clay); }
.rt-drawer__list .sub-menu { list-style: none; padding: 0; }
.rt-drawer__list .sub-menu a { font-size: 1.1rem; font-family: var(--rt-font-body); color: var(--rt-ink-soft); }
.rt-drawer__deco { position: absolute; inset: 0; pointer-events: none; }

/* --- 7. Hero ------------------------------------------------- */
.rt-hero { position: relative; overflow: hidden; padding-block: clamp(2.2rem, 5vw, 4.4rem) clamp(5rem, 9vw, 8rem); }
.rt-hero__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.rt-hero__bg .rt-blob:nth-child(1) { width: 640px; top: -280px; right: -200px; color: color-mix(in srgb, var(--rt-honey) 26%, transparent); }
.rt-hero__bg .rt-blob:nth-child(2) { width: 520px; bottom: -260px; left: -220px; color: color-mix(in srgb, var(--rt-sage) 22%, transparent); }
.rt-hero__grid {
  position: relative; z-index: 2;
  display: grid; gap: clamp(2.4rem, 5vw, 4rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .rt-hero__grid { grid-template-columns: 1.08fr 0.92fr; } }

.rt-hero__eyebrow { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.rt-hero__eyebrow .rt-hand { font-size: 1.75rem; }
.rt-hero__eyebrow .rt-svg { color: var(--rt-honey); animation: rt-wiggle 3s ease-in-out infinite; }
@keyframes rt-wiggle { 0%, 100% { rotate: -8deg; } 50% { rotate: 10deg; } }

.rt-hero__title {
  font-size: var(--rt-fs-hero);
  font-variation-settings: "SOFT" 52, "WONK" 1, "opsz" 144;
  line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 1.1rem;
}
.rt-hero__lead {
  font-size: var(--rt-fs-lead); color: var(--rt-ink-soft);
  max-width: 46ch; margin-bottom: 1.8rem;
}
.rt-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.1rem; }
.rt-hero__facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem;
  font-size: 0.9rem; color: var(--rt-ink-soft);
}
.rt-hero__facts b { font-family: var(--rt-font-display); font-size: 1.22rem; color: var(--rt-ink); font-variation-settings: "SOFT" 40, "WONK" 1; }
.rt-hero__facts .rt-svg { color: var(--rt-sage); }
.rt-hero__fact { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Portrait */
.rt-hero__media { position: relative; justify-self: center; width: min(100%, 420px); }
.rt-hero__arch {
  position: relative; z-index: 2; aspect-ratio: 4 / 5;
  border-radius: 999px 999px 30px 30px; overflow: hidden;
  border: 8px solid var(--rt-card);
  box-shadow: var(--rt-sh-3);
  rotate: -1.6deg;
}
.rt-hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.rt-hero__media .rt-blob { width: 118%; z-index: 0; top: 6%; left: -12%; color: color-mix(in srgb, var(--rt-sage) 34%, transparent); }
.rt-badge {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.95rem;
  background: var(--rt-card); border: 1.5px solid var(--rt-line);
  border-radius: 999px; box-shadow: var(--rt-sh-2);
  font-family: var(--rt-font-hand); font-size: 1.12rem; line-height: 1.1; color: var(--rt-ink);
  white-space: nowrap;
}
.rt-badge .rt-svg { flex: none; }
.rt-badge--a { left: -6%; bottom: 13%; rotate: -4deg; }
.rt-badge--a .rt-svg { color: var(--rt-clay); }
.rt-badge--b { right: -7%; top: 9%; rotate: 5deg; }
.rt-badge--b .rt-svg { color: var(--rt-sage); }
@media (max-width: 520px) {
  .rt-badge { font-size: 1rem; padding: 0.5rem 0.8rem; }
  .rt-badge--a { left: -2%; } .rt-badge--b { right: -2%; }
}

.rt-scrollcue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem;
  margin-top: 2.6rem; color: var(--rt-ink-soft); font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
}
.rt-scrollcue .rt-svg { animation: rt-bob 2s ease-in-out infinite; color: var(--rt-clay); }
@keyframes rt-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }

/* --- 8. Judul section ---------------------------------------- */
.rt-head { margin-bottom: clamp(2rem, 3.6vw, 3rem); position: relative; z-index: 2; }
.rt-head--center { text-align: center; }
.rt-head--center .rt-eyebrow { justify-content: center; }
.rt-head__title { font-size: var(--rt-fs-h2); margin-bottom: 0.35rem; }
.rt-head__sub { color: var(--rt-ink-soft); max-width: 56ch; margin: 0; }
.rt-head--center .rt-head__sub { margin-inline: auto; }
.rt-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.rt-head--split .rt-head__sub { max-width: 44ch; }

/* --- 9. Pilar ------------------------------------------------ */
.rt-pillars { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rt-pillar {
  position: relative; padding: 2rem 1.6rem 1.7rem; text-align: center;
  background: var(--rt-card); border: 1.5px solid var(--rt-line);
  border-radius: var(--rt-r-lg); box-shadow: var(--rt-sh-1);
  transition: transform 0.35s var(--rt-ease), box-shadow 0.35s var(--rt-ease);
}
.rt-pillar:nth-child(2) { rotate: 0.8deg; }
.rt-pillar:nth-child(3) { rotate: -0.7deg; }
.rt-pillar:hover { transform: translateY(-8px) rotate(0deg); box-shadow: var(--rt-sh-2); }
.rt-pillar__ico {
  position: relative; display: grid; place-items: center;
  width: 76px; height: 76px; margin: 0 auto 1.1rem; color: var(--tone, var(--rt-clay));
}
.rt-pillar__ico .rt-blob { inset: 0; width: 100%; color: color-mix(in srgb, var(--tone, var(--rt-clay)) 20%, transparent); }
.rt-pillar__ico .rt-svg { position: relative; z-index: 2; }
.rt-pillar:hover .rt-pillar__ico .rt-svg { animation: rt-wiggle 0.7s ease-in-out; }
.rt-pillar h3 { margin-bottom: 0.4rem; }
.rt-pillar p { color: var(--rt-ink-soft); font-size: 0.94rem; margin: 0; }

/* --- 10. Kartu artikel --------------------------------------- */
.rt-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--rt-card); border: 1.5px solid var(--rt-line);
  border-radius: var(--rt-r-lg); overflow: hidden;
  box-shadow: var(--rt-sh-1);
  transition: transform 0.38s var(--rt-ease), box-shadow 0.38s var(--rt-ease), border-color 0.3s;
}
.rt-card:hover { transform: translateY(-7px); box-shadow: var(--rt-sh-2); border-color: color-mix(in srgb, var(--tone, var(--rt-clay)) 42%, var(--rt-line)); }
.rt-card__media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rt-sand-2); }
.rt-card__link { display: block; width: 100%; height: 100%; }
.rt-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: scale 0.7s var(--rt-ease); }
.rt-card:hover .rt-card__media img { scale: 1.06; }
.rt-card__media .rt-pill { position: absolute; left: 0.9rem; top: 0.9rem; z-index: 2; box-shadow: var(--rt-sh-1); background: var(--rt-card); }
.rt-card__body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.25rem 1.35rem 1.45rem; flex: 1; }
.rt-card__title { font-size: 1.24rem; margin: 0; line-height: 1.22; }
.rt-card__title a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--tone, var(--rt-clay)), var(--tone, var(--rt-clay))); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.35s var(--rt-ease); }
.rt-card:hover .rt-card__title a { background-size: 100% 2px; }
.rt-card__excerpt { color: var(--rt-ink-soft); font-size: 0.93rem; margin: 0; }
.rt-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem;
  font-size: 0.8rem; color: var(--rt-ink-soft); margin-top: auto; padding-top: 0.3rem;
}
.rt-meta .rt-svg { color: var(--tone, var(--rt-sage)); }
.rt-meta span { display: inline-flex; align-items: center; gap: 0.32rem; }
.rt-meta .rt-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--rt-line); }

/* Kartu unggulan */
.rt-feature { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .rt-feature { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.rt-feature__main .rt-card__media { aspect-ratio: 16 / 11; }
.rt-feature__main .rt-card__title { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.rt-feature__main .rt-card__body { padding: 1.6rem 1.7rem 1.8rem; }
.rt-feature__side { display: grid; gap: 1rem; }
.rt-mini {
  display: grid; grid-template-columns: 104px 1fr; gap: 1rem; align-items: center;
  padding: 0.75rem; background: var(--rt-card);
  border: 1.5px solid var(--rt-line); border-radius: var(--rt-r);
  transition: transform 0.3s var(--rt-ease), border-color 0.3s;
}
.rt-mini:hover { transform: translateX(5px); border-color: color-mix(in srgb, var(--tone, var(--rt-clay)) 45%, var(--rt-line)); }
.rt-mini__media { aspect-ratio: 1; border-radius: var(--rt-r-sm); overflow: hidden; background: var(--rt-sand-2); }
.rt-mini__media img { width: 100%; height: 100%; object-fit: cover; }
.rt-mini h3 { font-size: 1.02rem; margin: 0 0 0.3rem; line-height: 1.25; }
.rt-mini h3 a { color: inherit; text-decoration: none; }
.rt-mini h3 a:hover { color: var(--rt-clay-600); }

/* Grid artikel */
.rt-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); }

/* --- 11. Dari Kelas (kertas buku tulis) ---------------------- */
.rt-class { position: relative; }
.rt-class__paper {
  position: relative; overflow: hidden;
  border: 1.5px solid var(--rt-line); border-radius: var(--rt-r-lg);
  box-shadow: var(--rt-sh-2);
  padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.6rem, 4vw, 3rem) clamp(2.2rem, 4.5vw, 3.4rem) clamp(3.4rem, 9%, 5.6rem);
}
.rt-class__head { margin-bottom: 1.8rem; }
.rt-class__head .rt-hand { font-size: clamp(2.2rem, 5vw, 3.2rem); display: block; line-height: 1; }
.rt-class__head p { color: var(--rt-ink-soft); margin: 0.4rem 0 0; max-width: 48ch; }
.rt-lessons { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.rt-lesson {
  position: relative; padding: 1.4rem 1.3rem 1.5rem;
  background: var(--rt-cream); border: 1.5px solid var(--rt-line);
  border-radius: var(--rt-r); box-shadow: var(--rt-sh-1);
  transition: transform 0.35s var(--rt-ease), box-shadow 0.35s var(--rt-ease);
}
.rt-lesson:nth-child(1) { rotate: -1.1deg; }
.rt-lesson:nth-child(2) { rotate: 0.7deg; }
.rt-lesson:nth-child(3) { rotate: -0.5deg; }
.rt-lesson:hover { transform: translateY(-6px) rotate(0deg); box-shadow: var(--rt-sh-2); }
.rt-lesson__no {
  position: absolute; top: -14px; left: 1.1rem;
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--tone, var(--rt-clay)); color: #fff; border-radius: 50%;
  font-family: var(--rt-font-display); font-weight: 700; font-size: 1rem;
  box-shadow: var(--rt-sh-1);
}
.rt-lesson h3 { font-size: 1.12rem; margin: 0.5rem 0 0.4rem; }
.rt-lesson p { font-size: 0.92rem; color: var(--rt-ink-soft); margin: 0; }
.rt-lesson__clip { position: absolute; top: -10px; right: 12px; color: var(--rt-sage); rotate: 18deg; }

/* --- 12. Kategori -------------------------------------------- */
.rt-cats { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rt-cat {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.7rem 1.4rem 1.5rem; text-decoration: none;
  background: color-mix(in srgb, var(--tone) 13%, var(--rt-card));
  border: 1.5px solid color-mix(in srgb, var(--tone) 28%, transparent);
  border-radius: var(--rt-r-lg); color: var(--rt-ink);
  transition: transform 0.35s var(--rt-ease), box-shadow 0.35s var(--rt-ease);
}
.rt-cat:hover { transform: translateY(-7px) rotate(-1deg); box-shadow: var(--rt-sh-2); color: var(--rt-ink); }
.rt-cat__ico { display: block; color: var(--tone); margin-bottom: 0.6rem; }
.rt-cat:hover .rt-cat__ico { animation: rt-wiggle 0.7s ease-in-out; }
.rt-cat__name { display: block; font-family: var(--rt-font-display); font-variation-settings: "SOFT" 40, "WONK" 1; font-size: 1.2rem; font-weight: 600; }
.rt-cat__count { display: block; font-size: 0.82rem; color: var(--rt-ink-soft); }
.rt-cat__deco { position: absolute; right: -18px; bottom: -20px; color: color-mix(in srgb, var(--tone) 22%, transparent); z-index: -1; }

/* --- 13. Linimasa -------------------------------------------- */
.rt-timeline { position: relative; display: grid; gap: 1.6rem; }
.rt-timeline::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 19px;
  border-left: 2.5px dashed color-mix(in srgb, var(--rt-clay) 45%, transparent);
}
.rt-tl { position: relative; padding-left: 3.6rem; }
.rt-tl__dot {
  position: absolute; left: 0; top: 2px; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--rt-card); border: 2px solid var(--tone, var(--rt-clay));
  color: var(--tone, var(--rt-clay)); box-shadow: var(--rt-sh-1);
}
.rt-tl__year { display: block; font-family: var(--rt-font-hand); font-size: 1.35rem; color: var(--tone, var(--rt-clay)); line-height: 1; }
.rt-tl h3 { font-size: 1.1rem; margin: 0.15rem 0 0.3rem; }
.rt-tl p { font-size: 0.93rem; color: var(--rt-ink-soft); margin: 0; }
@media (min-width: 880px) {
  .rt-timeline { grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .rt-timeline::before { left: 50%; translate: -50% 0; }
  .rt-tl { padding-left: 0; padding-right: 3rem; text-align: right; }
  .rt-tl__dot { left: auto; right: calc(-2rem - 20px); }
  .rt-tl:nth-child(even) { grid-column: 2; padding-left: 3rem; padding-right: 0; text-align: left; margin-top: 3.5rem; }
  .rt-tl:nth-child(even) .rt-tl__dot { right: auto; left: calc(-2rem - 20px); }
}

/* --- 14. Kutipan --------------------------------------------- */
.rt-quote { position: relative; text-align: center; }
.rt-quote__mark { display: block; color: color-mix(in srgb, var(--rt-clay) 22%, transparent); margin-bottom: -1.2rem; }
.rt-quote__mark .rt-svg { margin-inline: auto; }
.rt-quote blockquote {
  margin: 0 auto; max-width: 22ch;
  font-family: var(--rt-font-display);
  font-variation-settings: "SOFT" 52, "WONK" 1, "opsz" 144;
  font-size: clamp(1.55rem, 3.6vw, 2.7rem); font-weight: 500; line-height: 1.22;
  letter-spacing: -0.02em; text-wrap: balance;
}
.rt-quote__by { margin-top: 1.2rem; font-family: var(--rt-font-hand); font-size: 1.35rem; color: var(--rt-clay); }

/* --- 15. Galeri scrapbook ------------------------------------ */
.rt-scrap { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rt-scrap figure {
  position: relative; margin: 0; padding: 0.55rem 0.55rem 1.9rem;
  background: var(--rt-card); border: 1px solid var(--rt-line);
  border-radius: 6px; box-shadow: var(--rt-sh-1);
  transition: transform 0.35s var(--rt-ease), box-shadow 0.35s var(--rt-ease);
}
.rt-scrap figure:nth-child(odd) { rotate: -2.2deg; }
.rt-scrap figure:nth-child(even) { rotate: 1.8deg; }
.rt-scrap figure:nth-child(3n) { rotate: 2.6deg; }
.rt-scrap figure:hover { transform: translateY(-8px) scale(1.03); rotate: 0deg; box-shadow: var(--rt-sh-3); z-index: 3; }
.rt-scrap img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.rt-scrap figcaption {
  position: absolute; left: 0; right: 0; bottom: 0.45rem; text-align: center;
  font-family: var(--rt-font-hand); font-size: 1.05rem; color: var(--rt-ink-soft);
}

/* --- 16. Newsletter ------------------------------------------ */
.rt-news {
  position: relative; overflow: hidden;
  padding: clamp(2.4rem, 5vw, 3.8rem) clamp(1.5rem, 5vw, 3.4rem);
  border-radius: var(--rt-r-xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rt-clay) 16%, var(--rt-card)), color-mix(in srgb, var(--rt-sage) 18%, var(--rt-card)));
  border: 1.5px solid var(--rt-line);
  box-shadow: var(--rt-sh-2);
  text-align: center;
}
.rt-news__plane { position: absolute; top: 12%; right: 6%; color: var(--rt-clay); opacity: 0.5; animation: rt-float 7s ease-in-out infinite; }
.rt-news__trail { position: absolute; top: 16%; right: 12%; width: 160px; color: color-mix(in srgb, var(--rt-clay) 40%, transparent); }
.rt-news h2 { margin-bottom: 0.4rem; }
.rt-news p { color: var(--rt-ink-soft); max-width: 46ch; margin: 0 auto 1.5rem; }
.rt-news form { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; }
.rt-input {
  flex: 1 1 240px; max-width: 340px;
  padding: 0.85rem 1.2rem; font: inherit; font-size: 0.95rem;
  color: var(--rt-ink); background: var(--rt-card);
  border: 1.5px solid var(--rt-line); border-radius: 999px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.rt-input:focus { outline: none; border-color: var(--rt-clay); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rt-clay) 20%, transparent); }
.rt-input::placeholder { color: color-mix(in srgb, var(--rt-ink-soft) 75%, transparent); }
.rt-news small { display: block; margin-top: 0.9rem; font-size: 0.8rem; color: var(--rt-ink-soft); }

/* --- 17. Artikel --------------------------------------------- */
.rt-progress {
  position: fixed; top: 0; left: 0; z-index: 70; height: 4px; width: 0%;
  background: linear-gradient(90deg, var(--rt-honey), var(--rt-clay));
  border-radius: 0 4px 4px 0; transition: width 0.12s linear;
}
.rt-post-hero { position: relative; padding-block: clamp(2rem, 4vw, 3.4rem) 0; text-align: center; }
.rt-post-hero .rt-pill { margin-bottom: 0.9rem; }
.rt-post-hero h1 { font-size: var(--rt-fs-h1); font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144; max-width: 20ch; margin-inline: auto; }
.rt-post-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.9rem; margin-top: 1rem; color: var(--rt-ink-soft); font-size: 0.88rem; }
.rt-post-hero__meta .rt-svg { color: var(--rt-sage); }
.rt-post-cover {
  position: relative; margin: clamp(1.8rem, 4vw, 2.8rem) auto 0; max-width: 1000px;
  border-radius: var(--rt-r-lg); overflow: hidden; border: 8px solid var(--rt-card);
  box-shadow: var(--rt-sh-3);
}
.rt-post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.rt-prose { font-size: 1.06rem; line-height: 1.82; color: var(--rt-ink); }
.rt-prose > * + * { margin-top: 1.15em; }
.rt-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2.2em; }
.rt-prose h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-top: 1.8em; }
.rt-prose > p:first-of-type::first-letter {
  float: left; font-family: var(--rt-font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  font-size: 3.5em; line-height: 0.82; padding: 0.08em 0.12em 0 0;
  color: var(--rt-clay);
}
.rt-prose a { color: var(--rt-clay-600); text-decoration-color: color-mix(in srgb, var(--rt-clay) 45%, transparent); }
.rt-prose blockquote {
  margin: 2em 0; padding: 1.4rem 1.6rem 1.4rem 3.4rem; position: relative;
  background: var(--rt-sand); border-radius: var(--rt-r);
  border-left: 4px solid var(--rt-clay);
  font-family: var(--rt-font-display); font-size: 1.2rem; font-style: italic;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}
.rt-prose blockquote::before {
  content: "“"; position: absolute; left: 1rem; top: 0.2em;
  font-family: var(--rt-font-display); font-size: 3rem; line-height: 1;
  color: color-mix(in srgb, var(--rt-clay) 50%, transparent);
}
.rt-prose blockquote p:last-child { margin-bottom: 0; }
.rt-prose img, .rt-prose figure img { border-radius: var(--rt-r); box-shadow: var(--rt-sh-1); }
.rt-prose figure { margin: 2em 0; }
.rt-prose figcaption { margin-top: 0.7rem; text-align: center; font-family: var(--rt-font-hand); font-size: 1.1rem; color: var(--rt-ink-soft); }
.rt-prose ul, .rt-prose ol { padding-left: 1.3rem; }
.rt-prose li { margin-bottom: 0.5em; }
.rt-prose ul { list-style: none; padding-left: 0; }
.rt-prose ul li { position: relative; padding-left: 1.7rem; }
.rt-prose ul li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.72em;
  width: 9px; height: 9px; border-radius: 50% 50% 50% 2px;
  background: var(--rt-sage); rotate: -12deg;
}
.rt-prose code { background: var(--rt-sand-2); padding: 0.15em 0.4em; border-radius: 5px; font-size: 0.9em; }
.rt-prose pre { background: var(--rt-ink); color: var(--rt-cream); padding: 1.2rem; border-radius: var(--rt-r); overflow-x: auto; }
.rt-prose pre code { background: none; color: inherit; }
.rt-prose hr { border: 0; height: 24px; margin: 2.6em auto; width: 140px; background: center/contain no-repeat; }
.rt-prose table { width: 100%; border-collapse: collapse; }
.rt-prose th, .rt-prose td { padding: 0.7rem 0.9rem; border-bottom: 1.5px solid var(--rt-line); text-align: left; }
.rt-prose th { font-weight: 700; background: var(--rt-sand); }

.rt-divider-doodle { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 2.6rem 0; color: var(--rt-line); }
.rt-divider-doodle .rt-svg { color: var(--rt-clay); opacity: 0.6; }
.rt-divider-doodle::before, .rt-divider-doodle::after { content: ""; height: 2px; width: 60px; background: currentColor; border-radius: 2px; }

.rt-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.4rem; }
.rt-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.6rem; }
.rt-share__label { font-family: var(--rt-font-hand); font-size: 1.2rem; color: var(--rt-ink-soft); margin-right: 0.2rem; }

.rt-author {
  position: relative; display: grid; gap: 1.2rem; align-items: center;
  grid-template-columns: 1fr; text-align: center;
  margin-top: 3rem; padding: 2rem 1.6rem;
  background: var(--rt-sand); border-radius: var(--rt-r-lg);
  border: 1.5px solid var(--rt-line);
}
@media (min-width: 640px) { .rt-author { grid-template-columns: auto 1fr; text-align: left; padding: 2rem 2.2rem; } }
.rt-author__pic { width: 96px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--rt-card); box-shadow: var(--rt-sh-1); margin-inline: auto; }
.rt-author__pic img { width: 100%; height: 100%; object-fit: cover; }
.rt-author h3 { margin: 0 0 0.2rem; font-size: 1.25rem; }
.rt-author .rt-hand { font-size: 1.2rem; display: block; margin-bottom: 0.5rem; }
.rt-author p { color: var(--rt-ink-soft); font-size: 0.95rem; margin: 0; }

.rt-postnav { display: grid; gap: 1rem; margin-top: 2.6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rt-postnav { grid-template-columns: 1fr 1fr; } }
.rt-postnav a {
  display: flex; align-items: center; gap: 0.8rem; padding: 1.1rem 1.3rem;
  background: var(--rt-card); border: 1.5px solid var(--rt-line);
  border-radius: var(--rt-r); text-decoration: none; color: var(--rt-ink);
  transition: transform 0.3s var(--rt-ease), border-color 0.3s;
}
.rt-postnav a:hover { transform: translateY(-4px); border-color: var(--rt-clay); }
.rt-postnav .is-next { text-align: right; flex-direction: row-reverse; }
.rt-postnav small { display: block; font-family: var(--rt-font-hand); font-size: 1.05rem; color: var(--rt-clay); }
.rt-postnav strong { font-family: var(--rt-font-display); font-weight: 600; font-size: 1rem; line-height: 1.3; font-variation-settings: "SOFT" 40, "WONK" 1; }

/* --- 18. Komentar -------------------------------------------- */
.rt-comments { margin-top: 3.2rem; }
.rt-comments__list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.1rem; }
.rt-comments__list .children { list-style: none; margin: 1.1rem 0 0 clamp(1rem, 4vw, 2.6rem); padding: 0; display: grid; gap: 1.1rem; }
.rt-comment {
  position: relative; padding: 1.3rem 1.4rem;
  background: var(--rt-card); border: 1.5px solid var(--rt-line);
  border-radius: var(--rt-r); box-shadow: var(--rt-sh-1);
}
.rt-comment__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.rt-comment__head img { width: 44px; height: 44px; border-radius: 50%; }
.rt-comment__name { font-family: var(--rt-font-display); font-weight: 600; font-variation-settings: "SOFT" 40, "WONK" 1; }
.rt-comment__date { font-size: 0.8rem; color: var(--rt-ink-soft); }
.rt-comment .comment-reply-link { font-size: 0.82rem; font-weight: 700; color: var(--rt-clay-600); text-decoration: none; }
.rt-form { display: grid; gap: 0.9rem; }
.rt-form textarea, .rt-form input[type="text"], .rt-form input[type="email"], .rt-form input[type="url"] {
  width: 100%; padding: 0.85rem 1.1rem; font: inherit; font-size: 0.95rem;
  color: var(--rt-ink); background: var(--rt-card);
  border: 1.5px solid var(--rt-line); border-radius: var(--rt-r);
}
.rt-form textarea:focus, .rt-form input:focus { outline: none; border-color: var(--rt-clay); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rt-clay) 18%, transparent); }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; }
.comment-form-cookies-consent label { color: var(--rt-ink-soft); }
.form-submit { margin: 0; }
.form-submit input { all: unset; }
.form-submit .submit {
  display: inline-flex; padding: 0.85rem 1.7rem; background: var(--rt-clay); color: #fff;
  border-radius: 999px; font-weight: 700; cursor: pointer; font-size: 0.95rem;
  box-shadow: 0 8px 18px -10px var(--rt-clay); transition: transform 0.25s var(--rt-ease);
}
.form-submit .submit:hover { transform: translateY(-3px); }

/* --- 19. Arsip & paginasi ------------------------------------ */
.rt-archive-hero { position: relative; text-align: center; padding-block: clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 3vw, 2.6rem); }
.rt-archive-hero h1 { font-size: var(--rt-fs-h1); }
.rt-archive-hero p { color: var(--rt-ink-soft); max-width: 54ch; margin: 0.6rem auto 0; }

.rt-pagination { display: flex; justify-content: center; gap: 0.45rem; margin-top: 3rem; flex-wrap: wrap; }
.rt-pagination .page-numbers {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 0.8rem;
  background: var(--rt-card); border: 1.5px solid var(--rt-line); border-radius: 999px;
  color: var(--rt-ink); text-decoration: none; font-weight: 600; font-size: 0.92rem;
  transition: all 0.25s var(--rt-ease);
}
.rt-pagination .page-numbers:hover { border-color: var(--rt-clay); transform: translateY(-3px); }
.rt-pagination .current { background: var(--rt-clay); border-color: var(--rt-clay); color: #fff; }

.rt-empty { text-align: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.rt-empty .rt-svg { color: var(--rt-sage); margin-bottom: 1rem; }

/* --- 20. Sidebar / widget ------------------------------------ */
.rt-layout { display: grid; gap: clamp(2rem, 4vw, 3.4rem); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .rt-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 310px; } }
.rt-widget {
  padding: 1.5rem 1.4rem; background: var(--rt-card);
  border: 1.5px solid var(--rt-line); border-radius: var(--rt-r-lg); box-shadow: var(--rt-sh-1);
}
.rt-widget + .rt-widget { margin-top: 1.3rem; }
.rt-widget .widget-title, .rt-widget h2 { font-size: 1.12rem; margin-bottom: 0.9rem; }
.rt-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.rt-widget li a { color: var(--rt-ink); text-decoration: none; font-size: 0.94rem; }
.rt-widget li a:hover { color: var(--rt-clay-600); }

/* --- 21. 404 ------------------------------------------------- */
.rt-404 { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); position: relative; }
.rt-404__num {
  font-family: var(--rt-font-display); font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 144;
  font-size: clamp(6rem, 20vw, 12rem); line-height: 0.9; color: var(--rt-clay);
  margin-bottom: 0.4rem;
}

/* --- 22. Footer ---------------------------------------------- */
.rt-footer { position: relative; background: var(--rt-sand); padding-top: clamp(3rem, 6vw, 5rem); margin-top: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.rt-footer__grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .rt-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.rt-footer__about p { color: var(--rt-ink-soft); font-size: 0.94rem; max-width: 36ch; margin-top: 1rem; }
.rt-footer h3 { font-size: 1.05rem; margin-bottom: 0.9rem; }
.rt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.rt-footer ul a { color: var(--rt-ink-soft); text-decoration: none; font-size: 0.94rem; }
.rt-footer ul a:hover { color: var(--rt-clay-600); }
.rt-socials { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; }
.rt-socials a {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--rt-card); border: 1.5px solid var(--rt-line); border-radius: 50%;
  color: var(--rt-ink); transition: all 0.28s var(--rt-ease);
}
.rt-socials a:hover { background: var(--rt-clay); border-color: var(--rt-clay); color: #fff; transform: translateY(-4px) rotate(-8deg); }
.rt-footer__bottom {
  margin-top: clamp(2.2rem, 4vw, 3.2rem); padding-block: 1.4rem;
  border-top: 1.5px dashed var(--rt-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem;
  font-size: 0.85rem; color: var(--rt-ink-soft);
}
.rt-footer__bottom .rt-hand { font-size: 1.2rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.rt-footer__bottom .rt-hand .rt-svg { color: var(--rt-clay); }
.rt-footer__deco { position: absolute; left: 2%; bottom: 0; color: color-mix(in srgb, var(--rt-sage) 28%, transparent); pointer-events: none; }

/* --- 23. Animasi masuk --------------------------------------- */
.rt-js .rt-reveal { opacity: 0; translate: 0 26px; transition: opacity 0.7s var(--rt-ease), translate 0.7s var(--rt-ease); }
.rt-js .rt-reveal.is-in { opacity: 1; translate: 0 0; }
.rt-reveal:nth-child(2) { transition-delay: 0.08s; }
.rt-reveal:nth-child(3) { transition-delay: 0.16s; }
.rt-reveal:nth-child(4) { transition-delay: 0.24s; }
.rt-reveal:nth-child(5) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rt-js .rt-reveal, .rt-reveal { opacity: 1 !important; translate: none !important; }
  .rt-mark > .rt-underline, .rt-mark > .rt-scribble { stroke-dashoffset: 0; }
}

/* --- 24. Blok WordPress -------------------------------------- */
.wp-block-image figcaption { font-family: var(--rt-font-hand); font-size: 1.08rem; color: var(--rt-ink-soft); text-align: center; }
.wp-block-pullquote { border-top: 3px solid var(--rt-clay); border-bottom: 3px solid var(--rt-clay); padding: 1.6rem 0; }
.wp-block-button__link { border-radius: 999px; font-weight: 700; }
.wp-block-separator { border-color: var(--rt-line); }
.alignwide { width: min(1060px, 100%); margin-inline: auto; }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); }
.sticky .rt-card { border-color: var(--rt-honey); }

/* --- 25. Pelengkap ------------------------------------------- */
.rt-main { display: block; min-height: 40vh; }
.rt-logo-wrap { display: inline-block; }
.rt-header__inner { position: relative; width: 100%; }

/* Tombol kanan atas pada header */
.rt-header__tools--abs { position: absolute; right: 0; top: 0; }
@media (max-width: 899px) { .rt-header__tools--abs { position: static; } }

/* Ikon matahari / bulan bergantian */
.rt-theme-toggle { position: relative; }
.rt-theme-toggle .rt-svg { transition: opacity 0.25s, rotate 0.35s var(--rt-ease); }
.rt-theme-toggle .rt-ico-moon { position: absolute; opacity: 0; rotate: -45deg; }
:root[data-theme="dark"] .rt-theme-toggle .rt-ico-sun { opacity: 0; rotate: 45deg; }
:root[data-theme="dark"] .rt-theme-toggle .rt-ico-moon { opacity: 1; rotate: 0deg; }

/* Sorotan judul harus punya konteks tumpukan sendiri */
.rt-mark { position: relative; z-index: 0; isolation: isolate; }

/* Form pencarian */
.rt-searchform { display: flex; gap: 0.5rem; align-items: center; }
.rt-searchform .rt-input { flex: 1; max-width: none; }
.rt-searchform .rt-iconbtn { flex: none; }

/* Tombol salin tautan */
.rt-copy { position: relative; }
.rt-copy.is-copied { background: var(--rt-sage-600); color: #fff; border-color: var(--rt-sage-600); }
.rt-copy.is-copied::after {
  content: "tersalin!"; position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0;
  background: var(--rt-ink); color: var(--rt-cream); padding: 0.25rem 0.6rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}

/* Sidebar menempel saat digulir */
@media (min-width: 1000px) { .rt-sidebar { position: sticky; top: 92px; align-self: start; } }

/* Menu footer dari wp_nav_menu */
.rt-footer .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

/* Pil pada kepala artikel */
.rt-post-hero .rt-pill { display: inline-flex; }
.rt-head__after { flex: none; }
.rt-comment__body { font-size: 0.96rem; }
.rt-comment__body p:last-child { margin-bottom: 0.6rem; }
.rt-comments .rt-head { margin-bottom: 1.4rem; }
.comment-respond { margin-top: 2rem; }
.comment-respond .comment-reply-title { font-family: var(--rt-font-display); font-size: 1.3rem; font-variation-settings: "SOFT" 40, "WONK" 1; }
.comment-respond .comment-reply-title small { font-size: 0.85rem; font-family: var(--rt-font-body); margin-left: 0.6rem; }
.comment-form-author, .comment-form-email, .comment-form-url { margin: 0; }
@media (min-width: 640px) {
  .rt-form { grid-template-columns: 1fr 1fr; }
  .comment-form-comment, .comment-form-cookies-consent, .form-submit, .comment-notes { grid-column: 1 / -1; }
}

/* Widget kalender & pencarian bawaan */
.rt-widget .rt-searchform { margin: 0; }
.rt-widget select { width: 100%; padding: 0.6rem 0.8rem; border: 1.5px solid var(--rt-line); border-radius: var(--rt-r-sm); background: var(--rt-card); color: var(--rt-ink); font: inherit; }

/* Gambar unggulan pada halaman statis */
.rt-page .rt-post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Perbaikan kecil pada layar sangat kecil */
@media (max-width: 420px) {
  .rt-hero__facts { font-size: 0.84rem; gap: 0.5rem 0.8rem; }
  .rt-mini { grid-template-columns: 84px 1fr; }
}

/* Blob lebih redup saat mode gelap supaya tidak mendominasi */
:root[data-theme="dark"] .rt-hero__bg .rt-blob { opacity: 0.45; }
:root[data-theme="dark"] .rt-hero__media .rt-blob { opacity: 0.5; }