/* Gaya kartu ala macOS untuk semua halaman prototipe. Dimuat paling akhir supaya menimpa gaya halaman.
   - Font: Plus Jakarta Sans di mana-mana, termasuk jam dan angka (Bebas Neue tidak dipakai lagi).
   - Kartu: radius 16px, kaca blur yang lebih halus, bayangan berlapis seperti jendela/widget macOS. */
:root{
  --display:"Plus Jakarta Sans",system-ui,sans-serif;
  --rc:16px;
  --mac-glass:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.46));
  --mac-edge:0 0 #0000;
  --mac-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 20px -6px rgba(20,22,30,.10),0 28px 56px -18px rgba(20,22,30,.22);
  --mac-shadow-h:0 2px 4px rgba(0,0,0,.06),0 14px 30px -8px rgba(20,22,30,.16),0 40px 80px -22px rgba(20,22,30,.30);
}
:root[data-theme="dark"]{
  --mac-glass:linear-gradient(180deg,rgba(44,46,54,.62),rgba(26,28,34,.52));
  --mac-edge:0 0 #0000;
  --mac-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px -6px rgba(0,0,0,.45),0 30px 60px -18px rgba(0,0,0,.65);
  --mac-shadow-h:0 2px 4px rgba(0,0,0,.45),0 16px 34px -8px rgba(0,0,0,.55),0 44px 84px -22px rgba(0,0,0,.75);
}

/* ---------- Kartu beranda ---------- */
.tile{border-radius:var(--rc);background:var(--mac-glass);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:0;box-shadow:var(--mac-edge),var(--mac-shadow);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile:hover{box-shadow:var(--mac-edge),var(--mac-shadow-h)}
.thumbs .ph{border-radius:10px}
.tile::before{display:none}
.tile,.ro,.fr{border:0;outline:0}

/* Angka dan jam dengan Jakarta Sans: lebih rapat, tebal, angka sejajar */
.clock{font-family:var(--sans);line-height:.9}
.clock .hm{font-weight:700;letter-spacing:-.045em;font-size:clamp(50px,4.6vw,72px);font-variant-numeric:tabular-nums}
.clock .sec{font-weight:700;font-size:20px;letter-spacing:-.02em;height:1em;margin:0 0 5px 6px}
.big{font-family:var(--sans);font-weight:800;letter-spacing:-.055em;font-size:clamp(50px,4.6vw,72px);line-height:.95}
.big small{font-weight:700;letter-spacing:-.02em}
.isl .clk{font:700 15px/1 var(--sans);letter-spacing:-.01em}

/* ---------- Halaman Foto ---------- */
.fr,.fr .ph{border-radius:var(--rc)}
.fr{box-shadow:var(--mac-shadow)}
.num{font:700 18px/1 var(--sans);letter-spacing:-.02em}
.scale .rl span{font:600 11px/1 var(--sans);letter-spacing:0}
.fr .cap{font:600 12px/1 var(--sans);letter-spacing:.01em;border-radius:8px}
.ro{border-radius:var(--rc);box-shadow:var(--mac-edge),var(--mac-shadow);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}

/* ---------- Panel/tombol kecil ---------- */
.btn{border-radius:10px}
.ctl{border-radius:8px}

@media (max-width:860px){
  .clock .hm{font-size:46px}.clock .sec{font-size:17px}
  .big{font-size:48px}
}

/* Sakelar bahasa EN | ID dan ikon tema yang berputar */
.ctl.lang2{padding:0 3px;gap:2px}
.ctl.lang2 .lg{padding:3px 6px;border-radius:999px;font-size:11.5px;font-weight:700;opacity:.5;transition:background .3s,color .3s,opacity .3s}
.ctl.lang2 .lg.on{opacity:1;background:rgba(255,255,255,.16)}
:root:not([data-theme="dark"]) .ctl.lang2:not(.isl .ctl) .lg.on{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.ctl .ti{display:inline-flex}
.ctl .ti.spin{animation:ti-spin .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes ti-spin{from{transform:rotate(-120deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
.isl .ctl[data-act="theme"][data-now="light"]{color:#ffd59a}
@media (prefers-reduced-motion:reduce){.ctl .ti.spin{animation:none}}

/* ===== Palet tenang (2026-10-13): warna hanya dari foto; teks solid; satu aksen rose ===== */
:root{--accent:#a14f63}
:root[data-theme="dark"]{--accent:#f0b7c2}
.rg{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:currentColor!important;color:var(--ink)!important}
.isl .sts>span.on{background:none!important;-webkit-text-fill-color:#f2f2f4!important;color:#f2f2f4!important}
.isl .clk i{background:#f0b7c2}
/* kartu tidak lagi bersemu warna dari dalam: hanya kilau putih tipis mengikuti kursor */
.tile::after{background:radial-gradient(360px circle at var(--x,-999px) var(--y,-999px),rgba(255,255,255,.22),transparent 65%)!important}
:root[data-theme="dark"] .tile::after{background:radial-gradient(360px circle at var(--x,-999px) var(--y,-999px),rgba(255,255,255,.05),transparent 65%)!important}
.horizon{display:none!important}