/* Warta page. Shell comes from site.css. */
.warta { padding-top: 36px; }
.warta .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* Front: lead story + aside */
.depan { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--tinta); }
@media (max-width: 900px) { .depan { grid-template-columns: minmax(0, 1fr); } }
.utama { gap: 18px; }
.utama .bingkai { aspect-ratio: 16 / 9; }
.tag-utama { background: var(--merah); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; }
.utama .bingkai .tag-utama { position: absolute; top: 16px; left: 16px; }
.utama > .tag-utama { align-self: flex-start; }
.utama h2 { margin: 0; font: 500 clamp(32px, 4.2vw, 54px)/1.02 var(--serif); letter-spacing: -.018em; text-wrap: balance; overflow-wrap: break-word; }
.utama p.ringkas { margin: 0; font-size: 18px; line-height: 1.6; color: var(--abu-teks); max-width: 62ch; text-wrap: pretty; }

.samping { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.terbaru h2 { margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--tinta); color: var(--abu-meta); font-weight: 400; }
.terbaru ol { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.terbaru li { counter-increment: n; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--garis); }
.terbaru li::before { content: counter(n); font: italic 400 26px/1 var(--serif); color: var(--merah); }
.terbaru .cerita { gap: 4px; }
.terbaru h3 { margin: 0; font: 500 18px/1.25 var(--serif); }
.terbaru time { font-size: 12.5px; color: var(--abu-meta); }

/* All stories */
.semua { padding-top: 40px; display: flex; flex-direction: column; gap: 28px; }
.semua-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; }
.semua-kepala h2 { margin: 0; font: 500 40px/1 var(--serif); letter-spacing: -.015em; }
.saring { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font-size: 13.5px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--tinta); border-radius: 999px; background: transparent; cursor: pointer; white-space: nowrap; }
.chips button:hover { color: var(--merah); border-color: var(--merah); }
.chips button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cari { font-size: 14px; padding: 8px 14px; border: 1px solid var(--garis-input); border-radius: 999px; background: var(--input); width: 200px; }
.cari::placeholder { color: var(--abu-placeholder); }
.cari:focus { outline: none; border-color: var(--merah); box-shadow: 0 0 0 1px var(--merah); }
@media (max-width: 480px) { .saring, .cari { width: 100%; } }

.kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px 32px; }
.kartu { gap: 12px; padding-top: 16px; border-top: 1px solid var(--tinta); }
.kartu .bingkai { aspect-ratio: 4 / 3; }
.kartu .meta { font-size: 11px; gap: 4px 12px; }
.kartu h3 { margin: 0; font: 500 25px/1.12 var(--serif); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; }
.kartu p.ringkas { margin: 0; font-size: 15px; color: var(--abu-teks); text-wrap: pretty; }
.kosong { margin: 0; padding: 40px 0; color: var(--abu-meta); font-size: 17px; }

/* Reader drawer */
body:has(.baca[open]) { overflow: hidden; }
.baca { margin: 0 0 0 auto; padding: 0; border: 0; width: min(680px, 100%); max-width: 100%; height: 100%; max-height: 100%; background: var(--kertas); color: var(--tinta); box-shadow: -20px 0 60px rgba(0, 0, 0, .2); }
.baca::backdrop { background: rgba(28, 25, 23, .55); }
.baca-isi { min-height: 100%; padding: 32px clamp(22px, 5vw, 56px) 64px; display: flex; flex-direction: column; gap: 20px; }
.tutup { align-self: flex-end; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: none; border: 1px solid var(--tinta); padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.tutup:hover { background: var(--tinta); color: #fff; }
.baca h2 { margin: 0; font: 500 clamp(32px, 4vw, 44px)/1.05 var(--serif); letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; }
.baca .bingkai { aspect-ratio: 16 / 9; }
.baca iframe { border: 0; }
.baca-teks p { margin: 0 0 1em; font: 400 19px/1.65 var(--serif); color: var(--abu-teks); text-wrap: pretty; }
.baca-teks p:first-child { font-size: 21px; line-height: 1.55; color: var(--tinta); }

/* One column: Terbaru would only repeat the stories listed right below it. */
@media (max-width: 900px) { .terbaru { display: none; } }
/* Tablets and phones: compact story rows (thumbnail beside the text), in two columns while they fit. */
@media (max-width: 900px) {
  .kisi { gap: 0 32px; }
  .kartu { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 14px; align-content: start; padding-block: 16px; }
  .kartu > * { grid-column: 2; }
  .kartu .bingkai { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 4 / 5; align-self: start; }
  .kartu:not(:has(.bingkai)) { grid-template-columns: minmax(0, 1fr); }
  .kartu:not(:has(.bingkai)) > * { grid-column: 1; }
  .kartu h3 { font-size: 20px; line-height: 1.18; }
  .kartu p.ringkas { font-size: 14px; line-height: 1.45; }
}
/* Phones */
@media (max-width: 600px) {
  .warta { padding-top: 24px; }
  .depan { gap: 28px; padding-bottom: 32px; }
  .utama { gap: 14px; }
  .ibadah .jam { font-size: 56px; }
  .semua { padding-top: 32px; gap: 20px; }
  .semua-kepala h2 { font-size: 34px; }
  .cerita:has(a:focus-visible) { outline-offset: 2px; }
}