/*
 * Koebeta - lapisan tampilan "3D" (kedalaman lewat cahaya & bayangan).
 *
 * Cara kerja: file ini menimpa TAMPILAN (background-image, box-shadow, transisi) kelas Tailwind
 * yang sudah dipakai di seluruh halaman - mis. semua tombol hijau "bg-brand-600" otomatis jadi
 * tombol timbul - jadi tidak perlu mengedit ratusan template satu per satu.
 *
 * Aturan main yang dijaga (supaya tidak merusak halaman):
 *  - HANYA properti visual (background-image, box-shadow, text-shadow, filter, transition).
 *    Tidak mengubah ukuran, margin, padding, atau tata letak.
 *  - TIDAK memakai transform pada kartu: elemen bertransform membuat modal "fixed" di dalamnya
 *    ikut bergeser. Transform hanya dipakai pada tombol (yang tidak berisi modal).
 *  - Untuk input, selektor dibungkus :where() (spesifisitas nol) supaya cincin fokus Tailwind
 *    (focus:ring) tetap menang dan tidak hilang.
 *
 * Palet: brand-400 #34d399, 500 #10b981, 600 #059669, 700 #047857, 800 #065f46.
 */

/* ============ 1. TOMBOL TIMBUL ============ */
/* Cahaya dari atas (atas lebih terang, bawah lebih gelap) + "tebal" tepi bawah + bayangan jatuh. */
body :is(a, button, input[type="submit"]).bg-brand-600 {
    background-image: linear-gradient(180deg, #3ddba5 0%, #10b981 28%, #059669 62%, #047857 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -2px 0 rgba(0, 0, 0, .10),
        0 4px 0 #065f46,
        0 10px 18px -6px rgba(5, 150, 105, .55);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
    transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
/* Tombol kecil (pil, tab): tepi lebih tipis supaya tidak terlihat berat. */
body :is(a, button).bg-brand-600:is(.text-xs, .text-\[10px\], .text-\[11px\]) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .4),
        inset 0 -1px 0 rgba(0, 0, 0, .10),
        0 3px 0 #065f46,
        0 6px 12px -5px rgba(5, 150, 105, .5);
}

body :is(a, button).bg-gray-800 {
    background-image: linear-gradient(180deg, #5b6472 0%, #374151 30%, #1f2937 70%, #111827 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 4px 0 #030712, 0 10px 18px -6px rgba(17, 24, 39, .55);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
    transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
body :is(a, button).bg-red-500 {
    background-image: linear-gradient(180deg, #fca5a5 0%, #f87171 25%, #ef4444 60%, #dc2626 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 4px 0 #991b1b, 0 10px 18px -6px rgba(220, 38, 38, .5);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
body :is(a, button).bg-emerald-500 {
    background-image: linear-gradient(180deg, #5eead4 0%, #34d399 25%, #10b981 62%, #059669 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 4px 0 #047857, 0 10px 18px -6px rgba(16, 185, 129, .5);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
body :is(a, button).bg-amber-500 {
    background-image: linear-gradient(180deg, #fde68a 0%, #fbbf24 28%, #f59e0b 62%, #d97706 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 4px 0 #92400e, 0 10px 18px -6px rgba(217, 119, 6, .5);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}

/* Hover: sedikit terangkat. Active: ditekan ke bawah (tepi bawah "menghilang"). */
body :is(a, button, input[type="submit"]):is(.bg-brand-600, .bg-gray-800, .bg-red-500, .bg-emerald-500, .bg-amber-500):hover {
    transform: translateY(-1px);
    filter: brightness(1.06) saturate(1.05);
}
body :is(a, button, input[type="submit"]):is(.bg-brand-600, .bg-gray-800, .bg-red-500, .bg-emerald-500, .bg-amber-500):active {
    transform: translateY(3px);
    filter: brightness(.97);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25), 0 1px 0 rgba(0, 0, 0, .35);
}
/* Tombol nonaktif / sedang loading: datar saja. */
body :is(button, input[type="submit"]):disabled {
    transform: none !important;
    filter: grayscale(.25) brightness(1.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 0 rgba(0, 0, 0, .18) !important;
    cursor: not-allowed;
}

/* ============ 2. KARTU BERLAPIS ============ */
/* Putih dengan gradasi tipis ke hijau pucat, sorot cahaya di tepi atas, tiga lapis bayangan
   hijau-kehitaman (dekat -> sedang -> jauh) = kesan melayang di atas latar. */
body :is(.bg-white.rounded-2xl, .bg-white.rounded-3xl) {
    background-image: linear-gradient(180deg, #ffffff 0%, #f6fcf9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 1px 2px rgba(6, 78, 59, .07),
        0 8px 16px -6px rgba(6, 78, 59, .13),
        0 22px 34px -16px rgba(6, 78, 59, .16);
}
/* Kartu yang bisa diklik: bayangan membesar saat disorot (TANPA transform, lihat catatan di atas). */
body :is(.bg-white.rounded-2xl, .bg-white.rounded-3xl)[class*="hover:shadow"]:hover,
body a:is(.bg-white.rounded-2xl):hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 2px 4px rgba(6, 78, 59, .08),
        0 14px 26px -8px rgba(6, 78, 59, .22),
        0 30px 46px -18px rgba(6, 78, 59, .26);
    transition: box-shadow .2s ease;
}

/* Kotak hijau pucat (kartu fitur, ikon modul): timbul lembut. */
body :is(.bg-brand-50, .bg-brand-100):is(.rounded-xl, .rounded-2xl, .rounded-3xl):not(.k3d-flat):not(.k3d-tile) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(5, 150, 105, .08), 0 6px 12px -6px rgba(5, 150, 105, .25);
}

/* Pil putih (chip jenis seleksi, filter): timbul tipis. */
body :is(span, a, button).bg-white.rounded-full {
    box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(6, 78, 59, .10), 0 6px 10px -6px rgba(6, 78, 59, .25);
}

/* Bidang isian: sedikit "tenggelam" (kebalikan tombol). :where() = spesifisitas nol, jadi
   cincin fokus Tailwind tetap menang. */
:where(body) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea, select) {
    box-shadow: inset 0 2px 4px rgba(6, 78, 59, .07);
}

/* ============ 3. LATAR HALAMAN MEMBER ============ */
/* Cahaya hijau lembut di sudut atas (latar dashboard member bg-brand-50) = ruang yang terasa dalam. */
body.bg-brand-50 {
    background-image:
        radial-gradient(900px 380px at 0% 0%, rgba(52, 211, 153, .22), transparent 65%),
        radial-gradient(800px 360px at 100% 6%, rgba(16, 185, 129, .14), transparent 60%);
    background-attachment: fixed;
}

/* ============ 4. KOMPONEN HALAMAN DEPAN ============ */
/* Hero: lingkaran cahaya melayang di belakang kartu judul. */
.k3d-hero { position: relative; isolation: isolate; }
.k3d-hero::before,
.k3d-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(2px);
}
.k3d-hero::before {
    width: 340px; height: 340px; left: -90px; top: -70px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), rgba(110, 231, 183, .55) 45%, rgba(16, 185, 129, 0) 72%);
}
.k3d-hero::after {
    width: 420px; height: 420px; right: -120px; bottom: -150px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .9), rgba(52, 211, 153, .5) 45%, rgba(5, 150, 105, 0) 72%);
}
/* Kartu judul hero: lebih tebal & dalam daripada kartu biasa. */
.k3d-hero-card {
    background-image: linear-gradient(180deg, #ffffff 0%, #f1fbf6 100%);
    box-shadow:
        inset 0 2px 0 #fff,
        inset 0 -3px 0 rgba(5, 150, 105, .10),
        0 2px 0 rgba(255, 255, 255, .8),
        0 18px 30px -10px rgba(6, 78, 59, .28),
        0 40px 60px -28px rgba(6, 78, 59, .35);
}
.k3d-hero-card h1 { text-shadow: 0 2px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(5, 150, 105, .22); }

/* Ubin ikon fitur: persegi timbul bergradasi dengan tepi bawah. */
.k3d-icon {
    width: 3.5rem; height: 3.5rem;
    margin-left: auto; margin-right: auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; line-height: 1;
    border-radius: 1rem;
    background-image: linear-gradient(180deg, #ffffff 0%, #d1fae5 100%);
    box-shadow: inset 0 1px 0 #fff, 0 4px 0 #6ee7b7, 0 12px 18px -8px rgba(5, 150, 105, .45);
}

/* Mode foto (banner jadi latar hero): lingkaran cahaya dekoratif dimatikan - gambar sudah jadi latarnya. */
.k3d-hero--photo::before,
.k3d-hero--photo::after { display: none; }

/* Teks kecil di bawah tombol hero: di layar lebar mode foto ia berada DI ATAS gambar, jadi putih berbayangan
   supaya terbaca. Di HP/tablet ia berada di atas latar terang (di bawah pita gambar), tetap abu-abu. */
@media (min-width: 1024px) {
    .k3d-hero--photo .k3d-hero-note {
        color: #fff;
        font-weight: 500;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    }
}

/* ============ 5. DASHBOARD MEMBER ============ */

/* Kartu/tautan yang bisa diklik terangkat saat disorot. Khusus elemen <a>: tautan tidak berisi modal "fixed"
   di dalamnya, jadi aman memakai transform (kartu <div> sengaja tidak). */
body a[class*="hover:shadow"],
.k3d-lift { transition: transform .18s ease, box-shadow .2s ease; }
body a[class*="hover:shadow"]:hover,
.k3d-lift:hover { transform: translateY(-3px); }

/* Sidebar: panel bergradasi dengan bayangan di tepi kanan; item menu terangkat saat disorot. */
.k3d-sidebar {
    background-image: linear-gradient(180deg, #ffffff 0%, #f3fbf7 100%);
    box-shadow: 6px 0 22px -10px rgba(6, 78, 59, .28), inset -1px 0 0 rgba(255, 255, 255, .9);
}
.k3d-sidebar nav a:not(.bg-brand-600) { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.k3d-sidebar nav a:not(.bg-brand-600):hover {
    background-image: linear-gradient(180deg, #ffffff 0%, #e8f8f0 100%);
    box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(6, 78, 59, .08), 0 8px 14px -8px rgba(6, 78, 59, .35);
    transform: translateY(-1px);
}

/* Header atas: sedikit mengambang di atas konten. */
.k3d-header {
    background-image: linear-gradient(180deg, #ffffff 0%, #f4fcf8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 20px -12px rgba(6, 78, 59, .4);
}

/* Navigasi bawah (HP): panel MELAYANG berbentuk pil (sama seperti di aplikasi Android), item aktif timbul hijau. */
.k3d-bnav { padding: 0 10px calc(8px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.k3d-bnav-inner {
    pointer-events: auto;
    padding: 6px;
    border-radius: 24px;
    background-image: linear-gradient(180deg, #ffffff 0%, #f1fbf6 100%);
    box-shadow:
        inset 0 1px 0 #fff,
        0 2px 0 rgba(255, 255, 255, .85),
        0 16px 30px -10px rgba(6, 78, 59, .5),
        0 4px 10px -4px rgba(6, 78, 59, .25);
}
.k3d-bnav-item { border-radius: 18px; transition: transform .15s ease, box-shadow .15s ease; }
.k3d-bnav-item--active {
    color: #fff;
    background-image: linear-gradient(180deg, #3ddba5 0%, #10b981 30%, #059669 70%, #047857 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 #065f46, 0 10px 16px -6px rgba(5, 150, 105, .65);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    transform: translateY(-2px);
}

/* Kartu skor beranda: hijau bergradasi dengan sorot cahaya, tepi bawah tebal, dan dua "gelembung" kaca. */
.k3d-stat {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-image:
        radial-gradient(120% 90% at 0% 0%, rgba(110, 231, 183, .55) 0%, rgba(110, 231, 183, 0) 55%),
        linear-gradient(145deg, #10b981 0%, #059669 45%, #047857 80%, #065f46 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .35),
        inset 0 -4px 0 rgba(0, 0, 0, .14),
        0 6px 0 #064e3b,
        0 24px 36px -14px rgba(5, 150, 105, .65);
}
.k3d-stat::before,
.k3d-stat::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 9999px;
    pointer-events: none;
}
.k3d-stat::before {
    width: 230px; height: 230px; right: -70px; top: -100px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 65%);
}
.k3d-stat::after {
    width: 170px; height: 170px; left: -60px; bottom: -90px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 65%);
}
.k3d-stat-number { text-shadow: 0 3px 0 rgba(0, 0, 0, .18), 0 10px 18px rgba(0, 0, 0, .28); }

/* Ubin ikon menu: warna dasarnya tetap dari kelas Tailwind (bg-xxx-100), ditambah kilau & tepi bawah. */
.k3d-tile {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 60%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -2px 0 rgba(0, 0, 0, .05),
        0 4px 0 rgba(0, 0, 0, .09),
        0 10px 14px -8px rgba(0, 0, 0, .28);
}

/* Lencana kecil (Premium, jumlah, status): timbul tipis. */
body :is(span, a).rounded-full:is(.bg-amber-100, .bg-brand-100, .bg-blue-100, .bg-purple-100, .bg-green-100):not(.k3d-flat) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 0 rgba(0, 0, 0, .07);
}

/* Hormati pengguna yang mematikan animasi di perangkatnya. */
@media (prefers-reduced-motion: reduce) {
    body :is(a, button, input[type="submit"]) { transition: none !important; }
    body :is(a, button, input[type="submit"]):hover,
    body :is(a, button, input[type="submit"]):active,
    .k3d-lift:hover,
    .k3d-bnav-item--active { transform: none !important; }
}