/* Aturan dasar sobatGSM, dimuat oleh SELURUH halaman.
 *
 * Isinya hanya aturan yang identik di ketiga belas halaman, sehingga
 * memindahkannya ke sini dijamin tidak mengubah tampilan halaman mana pun.
 *
 * Yang sengaja tidak ada di sini:
 * - Blok :root dan html[data-theme="dark"]. Palet warna tiap halaman berbeda
 *   dan itu memang disengaja, jadi tetap tinggal di halamannya masing-masing.
 * - Kerangka admin (sidebar, topbar). Ada di admin.css.
 *
 * Berkas ini dimuat sebelum gaya di dalam halaman, sehingga gaya khusus
 * halaman selalu menang bila ada yang bertabrakan.
 */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

.theme-btn { position: relative; flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid var(--border); background: var(--surface); border-radius: 8px; color: var(--text); cursor: pointer; }

.theme-btn:hover { background: var(--surface-2); }

.theme-btn input { position: absolute; inset: -1px; margin: 0; opacity: 0; cursor: pointer; }

.theme-btn .ic-sun { display: none; }

.theme-btn input:checked ~ .ic-sun { display: block; }

.theme-btn input:checked ~ .ic-moon { display: none; }

.theme-btn:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }

@property --theme-wash-radius { syntax: "<length>"; inherits: true; initial-value: 0; }

html[data-theme-wash]::view-transition-old(root) { mix-blend-mode: normal; animation: none; z-index: 0; }

html[data-theme-wash]::view-transition-new(root) {
    mix-blend-mode: normal; animation: none; z-index: 1;
    -webkit-mask-image: radial-gradient(circle at var(--theme-wash-x) var(--theme-wash-y), #000 calc(var(--theme-wash-radius) * .7), transparent var(--theme-wash-radius));
    mask-image: radial-gradient(circle at var(--theme-wash-x) var(--theme-wash-y), #000 calc(var(--theme-wash-radius) * .7), transparent var(--theme-wash-radius));
  }