/* =====================================================================
   CLAYMORPHISM — portal murid, guru, dan login portal (3.44.0)
   Hanya gaya permukaan; menu, fitur, dan data tidak berubah. Dimuat setelah portal.css (dan latihan.css).
   Mengikuti tema terang/gelap dan warna aksen dari tema.js. Kembali ke lama: hapus <link> clay-portal.css.

   Prinsip sama dengan dashboard admin: semua teks duduk di atas permukaan tanah liat,
   tidak ada isi yang menembus keluar kartu.
   ===================================================================== */

html {
  --cl-canvas: #e2e4ed;
  --cl-surface: #f2f3f9;
  --cl-surface-hi: #fcfcff;
  --cl-well: #d8dbe6;
  --cl-ink: 40, 44, 84;
  --cl-hi: 255, 255, 255;
  --cl-kartu: linear-gradient(150deg, #fdfdff 0%, #eef0f8 100%);
  --cl-kartu-hi: linear-gradient(150deg, #ffffff 0%, #f4f5fc 100%);
  --r-s: 18px;
  --r-m: 30px;
  --kertas: #e2e4ed;

  --clay-timbul:
    inset 5px 5px 10px rgba(var(--cl-hi), 0.98),
    inset -7px -9px 16px rgba(var(--cl-ink), 0.14),
    12px 16px 30px -12px rgba(var(--cl-ink), 0.42),
    4px 5px 10px -4px rgba(var(--cl-ink), 0.16),
    -8px -8px 18px rgba(var(--cl-hi), 0.9);
  --clay-kecil:
    inset 3px 3px 6px rgba(var(--cl-hi), 0.98),
    inset -4px -5px 10px rgba(var(--cl-ink), 0.12),
    7px 9px 16px -8px rgba(var(--cl-ink), 0.4),
    -4px -4px 9px rgba(var(--cl-hi), 0.85);
  --clay-lekuk: inset 6px 6px 12px rgba(var(--cl-ink), 0.2), inset -6px -6px 12px rgba(var(--cl-hi), 0.95);
  --clay-tekan: inset 5px 6px 12px rgba(var(--cl-ink), 0.34), inset -3px -3px 8px rgba(var(--cl-hi), 0.55);
  --clay-gelap:
    inset 4px 4px 8px rgba(255, 255, 255, 0.3),
    inset -6px -8px 16px rgba(8, 24, 40, 0.62),
    12px 16px 26px -10px rgba(8, 24, 40, 0.65),
    3px 4px 8px -3px rgba(8, 24, 40, 0.35);
  --clay-putih:
    inset 4px 4px 8px #fff,
    inset -5px -7px 14px rgba(8, 24, 40, 0.14),
    12px 16px 26px -10px rgba(8, 24, 40, 0.7);
}
html[data-tema="gelap"] {
  --cl-canvas: #16161a;
  --cl-surface: #222226;
  --cl-surface-hi: #2b2b30;
  --cl-well: #101012;
  --cl-ink: 0, 0, 0;
  --cl-hi: 255, 255, 255;
  --cl-kartu: linear-gradient(150deg, #2d2d33 0%, #212125 100%);
  --cl-kartu-hi: linear-gradient(150deg, #34343b 0%, #26262b 100%);
  --clay-timbul:
    inset 4px 4px 8px rgba(255, 255, 255, 0.11),
    inset -7px -9px 16px rgba(8, 24, 40, 0.5),
    12px 16px 30px -12px rgba(8, 24, 40, 0.95),
    4px 5px 10px -4px rgba(8, 24, 40, 0.5),
    -5px -5px 14px rgba(255, 255, 255, 0.035);
  --clay-kecil:
    inset 3px 3px 6px rgba(255, 255, 255, 0.1),
    inset -4px -5px 10px rgba(8, 24, 40, 0.45),
    7px 9px 16px -8px rgba(8, 24, 40, 0.9),
    -3px -3px 8px rgba(255, 255, 255, 0.03);
  --clay-lekuk: inset 6px 7px 13px rgba(8, 24, 40, 0.75), inset -4px -4px 9px rgba(255, 255, 255, 0.06);
  --clay-tekan: inset 5px 6px 12px rgba(8, 24, 40, 0.75), inset -2px -2px 6px rgba(255, 255, 255, 0.08);
  --clay-gelap:
    inset 4px 4px 8px rgba(255, 255, 255, 0.55),
    inset -6px -8px 16px rgba(8, 24, 40, 0.25),
    12px 16px 26px -10px rgba(8, 24, 40, 0.85),
    3px 4px 8px -3px rgba(8, 24, 40, 0.5);
}
body { background: linear-gradient(180deg, #e8eaf2 0%, #dfe1ea 100%); background-color: var(--cl-canvas); min-height: 100vh; }
html[data-tema="gelap"] body, html[data-tema="gelap"] .shell { background: var(--cl-canvas); }
html[data-tema="gelap"] .shell { --kertas: var(--cl-canvas); }

/* ---------- Tombol ---------- */
.btn { border: 0; border-radius: 20px; box-shadow: var(--clay-gelap); font-weight: 700; transition: transform 0.16s, box-shadow 0.16s, background-color 0.15s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(2px) scale(0.985); box-shadow: var(--clay-tekan); }
.btn:disabled { box-shadow: var(--clay-lekuk); }
.btn-garis { background: var(--cl-kartu); color: var(--tinta); border: 0; box-shadow: var(--clay-kecil); }
.btn-garis:hover:not(:disabled) { background: var(--cl-kartu-hi); }
.btn-kecil { border-radius: 16px; }
.seg, .nav-pc .nav-btn, .kumpul-chip, .aksen-titik { background: var(--cl-kartu); border: 0; box-shadow: var(--clay-kecil); }
.seg:active, .nav-pc .nav-btn:active, .aksen-titik:active { box-shadow: var(--clay-tekan); }
.seg[aria-checked="true"], .seg[aria-selected="true"], .nav-pc .nav-btn[aria-current="page"] { background: var(--tinta); color: var(--putih); box-shadow: var(--clay-gelap); }
html[data-tema="gelap"] .seg[aria-checked="true"], html[data-tema="gelap"] .nav-pc .nav-btn[aria-current="page"] { background: #eef3f7; color: #0d2133; }
.aksen-titik[aria-checked="true"] { box-shadow: var(--clay-lekuk); }
.nav-pc .nav-btn[aria-current="page"] { background-image: none; }
.status-pill, .info-lencana, .badge-hari, .lencana-info { box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.7), inset -2px -2px 4px rgba(var(--cl-ink), 0.2); }

/* ---------- Isian ---------- */
.input, .select, .textarea { background: var(--cl-well); border: 1px solid transparent; border-radius: 20px; box-shadow: var(--clay-lekuk); }
.input:hover, .select:hover, .textarea:hover { border-color: transparent; background: var(--cl-well); }
.input:focus, .select:focus, .textarea:focus { background: var(--cl-surface-hi); border-color: var(--tinta); box-shadow: var(--clay-lekuk), 0 0 0 4px rgba(var(--cl-ink), 0.2); }
.catatan-cek input, .absen-status input { accent-color: var(--aksen, var(--tinta)); }
.absen-status label { border-radius: 16px; }

/* ---------- Kerangka: bilah atas ---------- */
.topbar {
  border-radius: 0 0 30px 30px;
  box-shadow: inset 4px 5px 10px rgba(255, 255, 255, 0.18), inset 0 -9px 20px rgba(8, 24, 40, 0.6), 0 16px 28px -16px rgba(var(--cl-ink), 0.65);
}
.topbar .btn-keluar { border: 0; border-radius: 18px; box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.24), inset -4px -6px 12px rgba(8, 24, 40, 0.55); }
.avatar { box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.3), inset -3px -4px 8px rgba(8, 24, 40, 0.45), 4px 6px 10px -4px rgba(8, 24, 40, 0.6); border-width: 0; }

/* ---------- Tab bawah: sama dengan dashboard admin ----------
   Bilah punya jarak ke tepi layar, tombol tidak menempel. Kalau tab banyak (murid), bilah bisa digeser. */
.shell.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
.main { padding: 20px 16px 40px; }
.tabbar {
  background: var(--cl-kartu); border-top: 0; border-radius: 32px 32px 0 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: inset 0 5px 8px rgba(var(--cl-hi), 0.9), inset 0 -4px 10px rgba(var(--cl-ink), 0.07), 0 -16px 34px -14px rgba(var(--cl-ink), 0.5);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-tema="gelap"] .tabbar { box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.09), inset 0 -4px 10px rgba(8, 24, 40, 0.4), 0 -16px 34px -14px #0b1d2e; }
.tabbar-inner {
  gap: 4px; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.tabbar-inner::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; min-width: 58px; margin: 0; border-radius: 22px; min-height: calc(var(--tabbar-h) - 12px); scroll-snap-align: center; transition: box-shadow 0.16s, background-color 0.16s; }
.tabbar-inner.padat .tab { min-width: 64px; padding: 8px 6px; }
.tabbar-inner.sangat-padat .tab { min-width: 62px; }
html:root .shell .tabbar .tabbar-inner .tab[aria-current="page"] { background: var(--aksen, var(--tinta)); color: var(--aksen-teks, var(--putih)); box-shadow: var(--clay-gelap); }
html:root .shell .tabbar .tabbar-inner .tab[aria-current="page"]::before { display: none; }
.tab:active { box-shadow: var(--clay-tekan); }
.page-head h1::after { box-shadow: 1px 2px 3px rgba(var(--cl-ink), 0.35); }

/* ---------- Kartu timbul ---------- */
.card, .br-hero, .br-kartu, .kartu-card, .info-banner, .kumpul-stat, .kumpul-berkas, .mapel-detail, .nilai-edit-box,
.pw-box, .loading-box, .masuk-pulang-item, .tugas-kartu, .ajar-kartu, .profil-data, .tampilan-kartu {
  background: var(--cl-kartu); border: 0; border-radius: var(--r-m); box-shadow: var(--clay-timbul);
}
.card { padding: 22px 20px; margin-bottom: 20px; }
.br-hero { background: var(--cl-kartu-hi); padding: 22px 20px 20px; margin-bottom: 20px; }
.br-kartu { padding: 22px 20px 20px; margin-bottom: 20px; overflow: hidden; }
.mapel-detail { margin-bottom: 16px; }
/* benda di dalam kartu: timbul kecil */
.card .card, .br-kartu .card, .tugas-kartu, .ajar-kartu, .kartu-card, .kumpul-stat, .kumpul-berkas, .masuk-pulang-item { box-shadow: var(--clay-kecil); border-radius: 26px; }

.hint-box, .kosong, .kal-sel, .rekap-item, .info-tanda, .cp-ubin, .kumpul-feedback, .kartu-kode {
  background: var(--cl-well); border: 0; border-radius: 22px; box-shadow: var(--clay-lekuk);
}
.kosong { border-radius: var(--r-m); padding: 34px 22px; }
.kal-sel.kal-pilih { box-shadow: var(--clay-gelap); }

/* ringkasan hari ini: tiga angka di dasar kartu jadi tiga lekuk, bukan garis yang menembus tepi */
.br-ubin-baris { margin: 20px 0 0; border-top: 0; gap: 10px; }
.br-ubin { background: var(--cl-well); border-radius: 22px; box-shadow: var(--clay-lekuk); padding: 14px 14px 16px; }
.br-ubin:first-child { padding-left: 14px; }
.br-ubin + .br-ubin { border-left: 0; }

/* daftar pekerjaan guru: ubin timbul di DALAM kartu, tidak lagi menembus tepi dan dasar kartu */
.br-aksi-grid { margin: 14px 0 0; gap: 12px; }
.br-aksi {
  border-top: 0; border-radius: 24px; margin-bottom: 0; padding: 16px 18px; min-height: 68px;
  background: var(--cl-kartu-hi); box-shadow: var(--clay-kecil);
}
.br-aksi-utama { box-shadow: var(--clay-kecil), inset 5px 0 0 var(--br-hijau, #1f6b4a); }
.br-aksi-tanda { right: 18px; }
@media (hover: hover) { .br-aksi:hover { background: var(--cl-kartu-hi); filter: brightness(1.02); } .br-aksi-utama:hover { background: var(--cl-kartu-hi); } }
.br-aksi:active { box-shadow: var(--clay-tekan); }

/* baris yang tadinya menembus tepi kartu: sekarang jadi ubin kecil di dalam kartu */
.br-baris, .br-tugas, .br-kal { margin: 12px 0 0; border-top: 0; border-radius: 22px; padding: 14px 16px; background: var(--cl-kartu-hi); box-shadow: var(--clay-kecil); }
.br-baris:first-child { margin-top: 10px; }
.br-jeda { background: none; box-shadow: none; margin-top: 4px; padding-top: 6px; padding-bottom: 6px; }
.br-tugas-segera { box-shadow: var(--clay-kecil), inset 6px 0 0 var(--bahaya); }
.br-kal-jalan { border-left: 0; padding-left: 16px; box-shadow: var(--clay-kecil), inset 6px 0 0 var(--tinta); }
.br-st-berlangsung { background: var(--br-latar-hijau, var(--cl-kartu-hi)); box-shadow: var(--clay-kecil), inset 6px 0 0 var(--br-hijau, #1f6b4a); }
html[data-tema="gelap"] .br-st-berlangsung { background: var(--cl-kartu-hi); }
.br-kosong-kecil { margin-top: 10px; padding: 18px 18px 16px; border-top: 0; border-radius: 22px; background: var(--cl-well); box-shadow: var(--clay-lekuk); }
.br-kartu .kosong { padding: 26px 20px; border: 0; background: var(--cl-well); border-radius: 22px; box-shadow: var(--clay-lekuk); margin-top: 10px; }
.br-link { margin: -8px -6px -8px 0; }
.br-kartu-kepala { margin-bottom: 6px; }
.br-semua { margin: 16px 0 6px; }

.profil-tautan { border-bottom: 0; border-radius: 22px; padding: 0 18px; margin-bottom: 12px; background: var(--cl-kartu-hi); box-shadow: var(--clay-kecil); }
.profil-tautan:active { box-shadow: var(--clay-tekan); }
.br-progres, .tugas-meter, .cp-bar { border-radius: 10px; background: var(--cl-well); box-shadow: var(--clay-lekuk); }
.tugas-meter span, .br-progres-isi { border-radius: 10px; box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.45); }
.slot, .nilai-row, .absen-row, .hari-grup, .info-baris, .br-baris { border-color: rgba(var(--cl-ink), 0.1); }
.tabel-wrap { border-radius: var(--r-m); overflow: hidden; box-shadow: var(--clay-timbul); background: var(--cl-kartu); border: 0; }
.nilai-grid th { background: transparent; }
.avatar-lg, .kartu-foto { box-shadow: 6px 8px 14px -6px rgba(var(--cl-ink), 0.5), inset -3px -4px 8px rgba(8, 24, 40, 0.14); }
.kartu-foto-placeholder { box-shadow: var(--clay-lekuk); }

/* ---------- Toast ---------- */
.toast { border: 0; border-radius: 24px; box-shadow: var(--clay-gelap); bottom: calc(var(--tabbar-h) + 28px); }

/* ---------- Halaman masuk ---------- */
.login-card {
  border: 0; border-radius: 38px;
  box-shadow: inset 4px 5px 10px rgba(255, 255, 255, 0.18), inset -7px -9px 20px rgba(8, 24, 40, 0.62), 20px 28px 48px -20px #0b1d2e;
}
.login-card::before { display: none; }
.login-card .input { background: #1c1c1f; color: #fff; box-shadow: inset 5px 6px 12px rgba(8, 24, 40, 0.75), inset -3px -3px 8px rgba(255, 255, 255, 0.1); }
.login-card .input:focus { background: #232327; }
.login-card .btn { box-shadow: var(--clay-putih); }

/* ---------- Arena Latihan (tetap bertema malam, hanya dilembutkan) ---------- */
.lat { border-radius: 34px; box-shadow: inset 4px 5px 10px rgba(255, 255, 255, 0.12), inset -7px -9px 20px rgba(8, 24, 40, 0.4), 14px 20px 36px -18px rgba(var(--cl-ink), 0.6); }

@media (min-width: 768px) {
  .shell.has-tabbar { padding-bottom: 0; }
  .main { padding: 24px 24px 56px; }
}

/* ---------- Tanpa kilatan biru saat disentuh ---------- */
html { -webkit-tap-highlight-color: transparent; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
button, a, summary, label, [role="button"], [role="tab"], .tab, .chip, .btn { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; }

/* ---------- Tanpa efek biru saat disentuh/ditekan (semua halaman) ---------- */
html, body, *, *::before, *::after { -webkit-tap-highlight-color: rgba(8, 24, 40, 0); }
button, a, summary, label, select, [role="button"], [role="tab"], .btn, .tab, .chip, .seg, .nav-btn {
  -webkit-tap-highlight-color: rgba(8, 24, 40, 0); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible), summary:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; }
::selection { background: #0b1d2e; color: #fff; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }

/* ---- Menu HP dan tombol Google (3.49.0): permukaan clay yang sama dengan tab bawah ---- */
.tabbar-inner .tab { flex: 1 1 0; }
dialog.menu-lembar { background: var(--cl-surface); border-radius: 36px 36px 0 0; box-shadow: var(--clay-timbul); }
.menu-lembar-kepala, .menu-lembar-kaki { border-color: rgba(var(--cl-ink), 0.1); }
.menu-tautan { border-radius: 22px; }
.menu-tautan:hover { background: var(--cl-kartu); box-shadow: var(--clay-kecil); }
.menu-tautan[aria-current="page"] { background: var(--cl-well); box-shadow: var(--clay-lekuk); }
.menu-lembar-tutup { box-shadow: var(--clay-kecil); background: var(--cl-kartu); }
@media (min-width: 640px) { dialog.menu-lembar { border-radius: 36px; } }
.btn-google { box-shadow: var(--clay-putih); border-color: transparent; }
.btn-google:active:not(:disabled) { box-shadow: var(--clay-tekan); }
html[data-tema="gelap"] .menu-tautan[aria-current="page"] { background: var(--cl-well); }

/* Kartu "Kelas berikutnya" (guru) mengikuti gaya kartu lain; garis hijau saat sedang mengajar */
.br-kb { padding-bottom: 20px; }
.br-kb-jalan { box-shadow: var(--clay-kecil), inset 6px 0 0 var(--br-hijau, #1f6b4a); }