/* ==========================================================
   udasurya — gaya isi artikel (dipakai di situs & editor admin)
   ========================================================== */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/newsreader-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('../fonts/newsreader-latin-wght-italic.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-latin-wght-normal.woff2') format('woff2'); }

.uda-content {
  --ink: #2a221b;
  --ink-strong: #1b140e;
  --muted: #6f6254;
  --line: #e7dcc9;
  --accent: #a8541a;
  font-family: Newsreader, Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--ink);
  overflow-wrap: break-word;
}
.uda-content::after { content: ""; display: table; clear: both; }
.uda-content > * + * { margin-top: 1.1em; }
.uda-content p { margin: 0; }
.uda-content p + p { margin-top: 1.1em; }
.uda-content h2, .uda-content h3, .uda-content h4 {
  font-family: Fraunces, Georgia, serif; color: var(--ink-strong); line-height: 1.2; letter-spacing: -0.01em; margin: 1.8em 0 0.2em; scroll-margin-top: 90px;
}
.uda-content h2 { font-size: 1.75em; font-weight: 650; }
.uda-content h3 { font-size: 1.35em; font-weight: 650; }
.uda-content h4 { font-size: 1.1em; font-weight: 700; }
.uda-content a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.uda-content a:hover { color: #7c3a0e; }
.uda-content strong, .uda-content b { font-weight: 650; color: var(--ink-strong); }
.uda-content mark { padding: 0 .15em; border-radius: 2px; }
.uda-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; background: #f3ebdd; padding: .1em .35em; border-radius: 4px; }
.uda-content pre { background: #2a221b; color: #f6efe3; padding: 1em 1.2em; border-radius: 8px; overflow-x: auto; font-size: .85em; line-height: 1.6; }
.uda-content pre code { background: none; padding: 0; color: inherit; font-size: 1em; }
.uda-content ul, .uda-content ol { padding-left: 1.4em; }
.uda-content li + li { margin-top: .35em; }
.uda-content li p { margin: 0; }
.uda-content blockquote {
  margin-left: 0; margin-right: 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid #d8a466;
  font-family: Fraunces, Georgia, serif; font-style: italic; font-size: 1.2em; line-height: 1.5; color: var(--ink-strong);
}
.uda-content hr { border: 0; height: 1px; background: var(--line); margin: 2.2em auto; width: 40%; }
.uda-content img { max-width: 100%; height: auto; display: block; }

/* Tabel */
.uda-content table { width: 100%; border-collapse: collapse; font-family: Figtree, system-ui, sans-serif; font-size: .8em; line-height: 1.5; display: block; overflow-x: auto; }
.uda-content th, .uda-content td { border: 1px solid var(--line); padding: .55em .8em; text-align: left; vertical-align: top; min-width: 80px; }
.uda-content th { background: #f6efe2; font-weight: 700; }
.uda-content td p, .uda-content th p { margin: 0; }

/* Gambar berketerangan */
.uda-figure { margin-left: auto; margin-right: auto; }
.uda-figure img { border-radius: 6px; width: 100%; }
.uda-figure figcaption { font-family: Figtree, system-ui, sans-serif; font-size: .7em; line-height: 1.5; color: var(--muted); text-align: center; margin-top: .6em; }
.uda-figure.w-full { width: 100%; }
.uda-figure.w-wide { width: 100%; }
.uda-figure.w-medium { width: 70%; }
.uda-figure.w-small { width: 45%; }
.uda-figure.a-left { float: left; margin: .3em 1.4em .8em 0; }
.uda-figure.a-right { float: right; margin: .3em 0 .8em 1.4em; }
.uda-figure.a-left.w-full, .uda-figure.a-right.w-full, .uda-figure.a-left.w-wide, .uda-figure.a-right.w-wide { float: none; margin-left: auto; margin-right: auto; }

/* Galeri */
.uda-gallery { display: grid; gap: .6em; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uda-gallery[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uda-gallery[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uda-gallery figure { margin: 0; }
.uda-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }

/* Kolom */
.uda-cols { display: grid; gap: 1.6em; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uda-cols[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uda-col > * + * { margin-top: .9em; }
.uda-col > :first-child { margin-top: 0; }

/* Kotak catatan */
.uda-callout { padding: 1em 1.3em; border-radius: 10px; background: #f6efe2; border: 1px solid #e8dac2; font-family: Figtree, system-ui, sans-serif; font-size: .85em; line-height: 1.65; }
.uda-callout.tone-info { background: #e8f3fa; border-color: #c6e0f0; }
.uda-callout.tone-success { background: #eaf6ec; border-color: #c9e8cf; }
.uda-callout.tone-warn { background: #fdf5d8; border-color: #f1e0a0; }
.uda-callout > * + * { margin-top: .7em; }
.uda-callout > :first-child { margin-top: 0; }

/* Tombol */
.uda-btn-wrap.a-center { text-align: center; }
.uda-btn-wrap.a-right { text-align: right; }
.uda-content .uda-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.4em; border-radius: 10px; font-family: Figtree, system-ui, sans-serif; font-size: .8em; font-weight: 750; text-decoration: none; }
.uda-content .uda-btn-primary { background: #a8541a; color: #fff; }
.uda-content .uda-btn-primary:hover { background: #8a4314; color: #fff; }
.uda-content .uda-btn-outline { border: 2px solid #a8541a; color: #a8541a; }

/* Video YouTube ringan */
.uda-yt { position: relative; aspect-ratio: 16 / 9; background: #111; border-radius: 8px; overflow: hidden; cursor: pointer; }
.uda-yt img, .uda-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.uda-yt-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; margin: -25px 0 0 -36px; border: 0; border-radius: 14px; background: rgba(215, 38, 61, .92); cursor: pointer; }
.uda-yt-play::before { content: ""; position: absolute; left: 29px; top: 15px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.uda-content div[data-youtube-video] { aspect-ratio: 16 / 9; }
.uda-content div[data-youtube-video] iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; }

/* Iklan */
.uda-ad { margin: 2em 0; text-align: center; clear: both; }
.uda-ad-label { display: block; font-family: Figtree, system-ui, sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9a8b78; margin-bottom: .4em; }

@media (max-width: 640px) {
  .uda-content { font-size: 1.125rem; line-height: 1.7; }
  .uda-cols, .uda-cols[data-cols="3"] { grid-template-columns: 1fr; }
  .uda-figure.w-medium, .uda-figure.w-small { width: 100%; }
  .uda-figure.a-left, .uda-figure.a-right { float: none; margin: 0 auto; }
  .uda-gallery, .uda-gallery[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}