/* ==========================================================================
   04 — GLASS
   Efek "frosted glass" dipakai berulang di seluruh halaman, jadi ditaruh
   di file sendiri. Satu panel glass terdiri dari 3 lapis:
     1. background semi transparan + backdrop-filter (blur)
     2. ::before  → highlight tepi atas (specular) + inner border
     3. ::after   → spotlight radial yang mengikuti kursor (data-glow)
   ========================================================================== */

.glass {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--kn-glass-border);
    border-radius: var(--kn-r-lg);
    background: var(--kn-glass-bg);
    box-shadow: var(--kn-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(var(--kn-glass-blur)) saturate(var(--kn-glass-sat));
    -webkit-backdrop-filter: blur(var(--kn-glass-blur)) saturate(var(--kn-glass-sat));
}

.glass--strong {
    background: var(--kn-glass-bg-strong);
    box-shadow: var(--kn-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(var(--kn-glass-blur-lg)) saturate(var(--kn-glass-sat));
    -webkit-backdrop-filter: blur(var(--kn-glass-blur-lg)) saturate(var(--kn-glass-sat));
}

.glass--soft {
    background: var(--kn-glass-bg-soft);
    box-shadow: var(--kn-shadow-sm);
}

/* Highlight tepi: garis terang di sisi atas-kiri, memudar ke bawah.
   Ini yang membuat panel terasa seperti kaca, bukan sekadar putih transparan. */
.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(150deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.25) 32%,
        rgba(255, 255, 255, 0) 55%,
        rgba(186, 214, 255, 0.35) 100%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    pointer-events: none;
}

/* ------------------------------------------------------- cursor spotlight */
/* --gx/--gy diisi oleh kn-glow.js dalam persen. */
[data-glow] {
    --gx: 50%;
    --gy: 0%;
    --glow-opacity: 0;
}

[data-glow]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--gx) var(--gy),
        rgba(26, 123, 240, 0.16), rgba(26, 123, 240, 0) 62%);
    opacity: var(--glow-opacity);
    transition: opacity var(--kn-dur) var(--kn-ease);
    pointer-events: none;
}

[data-glow].is-glowing { --glow-opacity: 1; }

/* Panel glass yang bisa diangkat saat hover. */
.glass-lift {
    transition: transform var(--kn-dur) var(--kn-ease-out),
                box-shadow var(--kn-dur) var(--kn-ease),
                border-color var(--kn-dur) var(--kn-ease);
}

.glass-lift:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: var(--kn-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ----------------------------------------------------------- icon tiles */
/* Kotak kecil pembungkus ikon; versi mini dari panel glass. */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: none;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--kn-r-md);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(226, 237, 255, 0.65));
    color: var(--kn-blue-600);
    box-shadow: 0 8px 18px -12px rgba(14, 90, 216, 0.55), inset 0 1px 0 #fff;
    transition: transform var(--kn-dur) var(--kn-ease-spring),
                box-shadow var(--kn-dur) var(--kn-ease),
                color var(--kn-dur) var(--kn-ease);
}

.icon-tile--lg { width: 58px; height: 58px; border-radius: var(--kn-r-lg); }

.icon-tile--soft {
    width: 40px; height: 40px;
    border-radius: var(--kn-r-sm);
    background: rgba(226, 237, 255, 0.8);
    box-shadow: none;
}