/* Arah C · Kaca dan gradasi: kartu tembus pandang di atas latar navy-koral yang bergerak pelan. */
[data-arah="c"] {
  --latar: #f1f2f9; --kartu: rgba(255, 255, 255, .66); --kartu-2: rgba(255, 255, 255, .55); --teks: #141a33; --redup: #555c78;
  --garis: rgba(31, 47, 107, .09); --garis-kuat: rgba(31, 47, 107, .18); --abu-latar: rgba(31, 47, 107, .07);
  --kepala-kaca: rgba(255, 255, 255, .5); --kepala-latar: rgba(255, 255, 255, .94);
  --sudut-b: 20px; --celah-widget: 20px; --lebar-isi: 1300px;
}
[data-arah="c"] body { background: #f1f2f9; }
[data-arah="c"] body::before, [data-arah="c"] body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: .8; }
[data-arah="c"] body::before { width: 62vw; height: 62vw; left: -18vw; top: -26vw; background: radial-gradient(circle, #c9d2fb 0%, rgba(201, 210, 251, 0) 68%); animation: awan-a 26s ease-in-out infinite alternate; }
[data-arah="c"] body::after { width: 56vw; height: 56vw; right: -16vw; top: 6vh; background: radial-gradient(circle, #ffd0d8 0%, rgba(255, 208, 216, 0) 68%); animation: awan-b 32s ease-in-out infinite alternate; }
@keyframes awan-a { to { transform: translate(14vw, 16vh) scale(1.1); } }
@keyframes awan-b { to { transform: translate(-12vw, 30vh) scale(.92); } }
[data-arah="c"] .kepala { box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(31, 47, 107, .06); }
[data-arah="c"] .kepala.panel-buka { background: rgba(255, 255, 255, .96); }
[data-arah="c"] .panel-menu { background: rgba(255, 255, 255, .96); }
[data-arah="c"] .baru-kapsul { background: linear-gradient(120deg, #1f2f6b, #3d4fa3 60%, #c94a68); box-shadow: 0 6px 16px rgba(31, 47, 107, .25); }
[data-arah="c"] .baru-kapsul:hover { background: linear-gradient(120deg, #233579, #4659b3 60%, #d8546f); }
[data-arah="c"] .tombol { border-radius: 12px; }
[data-arah="c"] .tombol:not(.tombol-utama):not(.tombol-hantu) { background: rgba(255, 255, 255, .6); border-color: rgba(31, 47, 107, .12); }
[data-arah="c"] .tombol-utama { background: linear-gradient(120deg, #1f2f6b, #34489a); box-shadow: 0 6px 16px rgba(31, 47, 107, .25); }

[data-arah="c"] .sapa-v2 { margin: 18px 0 24px; }
[data-arah="c"] .sapa-v2 h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 760; letter-spacing: -.035em; line-height: 1.1; max-width: 980px; text-wrap: balance; }
[data-arah="c"] .sapa-nama { background: linear-gradient(95deg, #1f2f6b 0%, #4a4fa6 45%, #e2566f 90%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: kilap-teks 8s ease-in-out infinite alternate; }
@keyframes kilap-teks { to { background-position: 100% 0; } }
[data-arah="c"] .sapa-ringkas { color: var(--redup); font-weight: 650; }

[data-arah="c"] .widget { background: var(--kartu); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 32px rgba(31, 47, 107, .08); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
[data-arah="c"] .widget::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 45%); transition: opacity 400ms ease; }
[data-arah="c"] .widget.miring::before { opacity: 1; }
.js[data-arah="c"] .widget { transform: translateY(24px) scale(.97); filter: blur(6px); }
.js[data-arah="c"] .widget.terlihat { filter: none; transform: none; transition: opacity 600ms ease calc(var(--urut, 0) * 80ms), transform 800ms cubic-bezier(.16, 1, .3, 1) calc(var(--urut, 0) * 80ms), filter 600ms ease calc(var(--urut, 0) * 80ms), box-shadow 400ms; }
.js[data-arah="c"] .widget.terlihat.miring { transform: perspective(1100px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-2px); transition: transform 180ms ease-out, box-shadow 400ms; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 22px 48px rgba(31, 47, 107, .14); }
[data-arah="c"] .widget-kepala h2 { font-size: 17px; }
[data-arah="c"] .widget-hitung { background: rgba(31, 47, 107, .08); color: #1f2f6b; }

[data-arah="c"] .jw-fokus { position: relative; margin: 2px 12px 14px; padding: 20px 22px 22px; border-radius: 16px; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #1f2f6b 0%, #34489a 50%, #d9546d 120%); box-shadow: 0 14px 30px rgba(31, 47, 107, .28); border: 0 !important; }
[data-arah="c"] .jw-fokus::after { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; right: -80px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 135, 150, .55), transparent 65%); animation: denyut-cahaya 5s ease-in-out infinite alternate; }
@keyframes denyut-cahaya { to { transform: translate(-30px, 30px) scale(1.2); } }
[data-arah="c"] .jw-fokus p { color: rgba(255, 255, 255, .8); }
[data-arah="c"] .jw-fokus .jw-label { color: #ffc2cb; }
[data-arah="c"] .jw-fokus .jw-label::before { background: #ff8796; }
[data-arah="c"] .jw-fokus .tombol { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; }
[data-arah="c"] .jw-fokus .tombol:hover { background: rgba(255, 255, 255, .24); color: #fff; }
[data-arah="c"] .jw-fokus .tombol-utama { background: #fff; color: #1f2f6b; box-shadow: none; }
[data-arah="c"] .jw-fokus .tombol-hantu { background: transparent; border-color: transparent; }
[data-arah="c"] .jw-jam-besar { font-size: 72px; }
[data-arah="c"] .jw-sekarang { border-top-color: #ec5f73; box-shadow: 0 0 10px rgba(236, 95, 115, .6); }
[data-arah="c"] .sel { border-radius: 8px; min-width: 0; padding: 0 10px; height: 24px; background: rgba(143, 149, 171, .18); color: #4b5065; font-weight: 650; }
[data-arah="c"] .sel.hijau { background: rgba(23, 138, 79, .14); color: #0f6b3a; }
[data-arah="c"] .sel.kuning { background: rgba(240, 167, 58, .2); color: #7a4b00; }
[data-arah="c"] .sel.merah { background: linear-gradient(120deg, #ec5f73, #d23b53); color: #fff; }
[data-arah="c"] .sel.kosong { background: transparent; box-shadow: none; }
[data-arah="c"] .sc-angka { background: linear-gradient(95deg, #1f2f6b, #e2566f); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 64px; }
[data-arah="c"] .sc-bar i { background: linear-gradient(90deg, #1f2f6b, #ec5f73); }
[data-arah="c"] .lw-bateri { height: 12px; border-radius: 12px; }
[data-arah="c"] .bt-hari { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .8); border-radius: 14px; }
[data-arah="c"] .bt-hari::before { width: 100%; height: 3px; bottom: auto; }
[data-arah="c"] .tugas li.lewat { background: linear-gradient(90deg, rgba(236, 95, 115, .12), transparent); }