/* Komponen tambahan situs publik (dulu @layer components di resources/css/app.css).
 * Utilitas Tailwind dari Play CDN dimuat sesudahnya sehingga tetap menang. Lihat 99-keputusan #34. */

/* Komponen yang di mockup ditulis di <style> inline halaman (list-berita.html, dll.). */
mark { background: #cbf7e6; color: inherit; border-radius: 3px; padding: 0 1px; }

.chip { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .8rem; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s; }
.chip:hover { border-color: #c9d6dc; color: var(--brand); }
.chip[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip .count { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-current="true"] .count { color: #a8f0d4; }

/* galeri.html: chip filter lebih tinggi, kartu album, masonry foto */
.chip-lg { height: 38px; padding: 0 .95rem; border-color: #cdd8dd; }
.chip-lg:hover { border-color: var(--brand); }
.album[aria-current="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.masonry { column-count: 1; column-gap: 14px; }
@media (min-width: 560px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; column-gap: 18px; } }
.masonry > li { break-inside: avoid; margin-bottom: 14px; }
@media (min-width: 1024px) { .masonry > li { margin-bottom: 18px; } }
.tile { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 10px; background: #dfe8eb; text-align: left; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.03); }
.tile-cap { position: absolute; inset: auto 0 0 0; padding: 2.4rem .95rem .85rem; background: linear-gradient(to top, rgba(4,29,44,.86), rgba(4,29,44,0));
  color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; transform: none; }
@media (hover: none) { .tile-cap { opacity: 1; transform: none; } }
.tile:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; }

.side-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.side-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0;
  font-size: 14px; font-weight: 600; color: var(--ink-soft); text-align: left; transition: color .15s; }
.side-row:hover, .side-row[aria-current="true"] { color: var(--brand); }
.side-row[aria-current="true"] { font-weight: 800; }

.page-btn { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .6rem; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.page-btn:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--brand); color: var(--brand); }
.page-btn[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Halaman masuk (dari <style> inline mockup/login.html; .check diganti .login-check agar tidak bentrok dengan admin.css). */
.brand-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .14; filter: grayscale(1); mix-blend-mode: luminosity; }
.login-check { width: 18px; height: 18px; accent-color: var(--brand); }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Halaman baca berita (dari <style> inline mockup/baca-berita.html). */
.breadcrumb--dark { color: var(--muted); }
.breadcrumb--dark a:hover { color: var(--brand); }
.breadcrumb--dark span[aria-hidden] { color: #b6c3c9; }
.prose-article h2 { scroll-margin-top: 96px; }
.prose-article blockquote footer { margin-top: .6em; font-size: 14px; font-weight: 500; color: var(--muted); }
.prose-article .lead { font-size: 1.1em; color: var(--ink); }
.prose-article img { border-radius: var(--radius); height: auto; }
.prose-article iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--radius); }
.toc-link { display: block; border-left: 2px solid var(--line); padding: .35rem 0 .35rem .9rem; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); transition: color .15s, border-color .15s; }
.toc-link:hover { color: var(--brand); }
.toc-link[aria-current="true"] { border-color: var(--leaf); color: var(--brand); font-weight: 800; }
.share-btn { display: inline-flex; align-items: center; gap: .5rem; height: 38px; padding: 0 .85rem; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; font-size: 13px; font-weight: 700; color: var(--ink-soft); transition: border-color .15s, color .15s; }
.share-btn:hover { border-color: var(--brand); color: var(--brand); }
.share-btn svg { width: 16px; height: 16px; }