/* Desain 1: menu samping kaca "liquid glass" (espresso hangat). HANYA layar >= 1100 px, mode gelap, layar (bukan cetak).
   HP (<= 1099 px) dan mode terang tetap memakai menu bawaan Filament (Tahap 2 untuk HP). Murni tampilan: markup di
   resources/views/merek/menu-kaca.blade.php, perilaku di public/js/vertex-kaca.js. */

.vy-kaca-wadah { display: none; }

@media screen and (min-width: 1100px) {
    :root { --vy-k-w: 252px; --vy-k-jarak: 24px; }
    html.vy-ciut { --vy-k-w: 68px; }

    html.dark .vy-kaca-wadah { display: block; }
    html.dark .fi-sidebar { display: none !important; }

    /* isi halaman bergeser mengikuti lebar kapsul */
    html.dark .fi-main-ctn { padding-left: calc(var(--vy-k-w) + (var(--vy-k-jarak) * 2)); transition: padding-left .6s cubic-bezier(.34, 1.2, .64, 1); }

    /* latar halaman: #14100C + dua pendar tembaga yang "bernapas" (di belakang semua isi: z-index negatif) */
    html.dark body.fi-body { background-color: #14100C; }
    html.dark body.fi-body::before, html.dark body.fi-body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; }
    html.dark body.fi-body::before { left: -14vw; bottom: -22vh; width: 62vw; height: 62vh; background: radial-gradient(closest-side, rgba(217, 140, 60, .32), rgba(217, 140, 60, 0)); animation: vy-napas-a 8s ease-in-out infinite alternate; }
    html.dark body.fi-body::after { right: -12vw; top: -24vh; width: 54vw; height: 58vh; background: radial-gradient(closest-side, rgba(190, 112, 46, .24), rgba(190, 112, 46, 0)); animation: vy-napas-b 11s ease-in-out infinite alternate; }
    @keyframes vy-napas-a { from { opacity: .55; } to { opacity: .95; } }
    @keyframes vy-napas-b { from { opacity: .95; } to { opacity: .55; } }

    /* ===== kapsul ===== */
    .vy-kaca-wadah { position: fixed; z-index: 25; left: var(--vy-k-jarak); top: var(--vy-k-jarak); bottom: var(--vy-k-jarak); width: var(--vy-k-w); transition: width .6s cubic-bezier(.34, 1.2, .64, 1); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
    .vy-kaca { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 34px;
        background: linear-gradient(160deg, rgba(255, 232, 205, .14), rgba(255, 232, 205, .05));
        border: 1px solid rgba(255, 222, 185, .2);
        -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
        box-shadow: 0 26px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 240, 220, .3); }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vy-kaca { background: linear-gradient(160deg, rgba(58, 42, 29, .96), rgba(36, 26, 19, .96)); } }
    /* lapisan bawah menyala tembaga (hanya 150 px terbawah, di belakang kartu profil, supaya teks menu tetap berkontras >= 4,5:1) */
    .vy-kaca::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none; z-index: 0; background: linear-gradient(to top, rgba(217, 140, 60, .36), rgba(217, 140, 60, 0)); }
    .vy-kaca > * { position: relative; z-index: 1; }

    .vy-kaca-kepala { padding: 22px 20px 10px; min-height: 68px; display: flex; align-items: center; overflow: hidden; }
    .vy-kaca-logo { display: flex; align-items: center; min-height: 44px; color: #F1E4D1; text-decoration: none; border-radius: 12px; }
    html.vy-ciut .vy-kaca-kepala { padding-left: 0; padding-right: 0; justify-content: center; }
    html.vy-ciut .vy-kaca-logo .vy-wm { display: none; }

    /* kolom cari */
    .vy-kaca-cari { position: relative; margin: 6px 14px 6px; height: 44px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 16px; color: #A8967F;
        background: rgba(20, 12, 7, .28); border: 1px solid rgba(255, 222, 185, .14); transition: border-color .2s, background .2s; }
    .vy-kaca-cari:focus-within { border-color: rgba(242, 178, 97, .65); background: rgba(20, 12, 7, .4); }
    .vy-kaca-cari svg { flex: none; }
    .vy-kaca-cari input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; box-shadow: none; padding: 0; color: #EBDDC9; font: 500 14px/1 'Inter', sans-serif; }
    .vy-kaca-cari input::placeholder { color: #A8967F; opacity: 1; }
    .vy-kaca-cari input::-webkit-search-cancel-button { display: none; }
    .vy-kaca-cari-ikon { display: none; position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; border-radius: 16px; }
    html.vy-ciut .vy-kaca-cari { margin-left: 10px; margin-right: 10px; padding: 0; justify-content: center; }
    html.vy-ciut .vy-kaca-cari input { display: none; }
    html.vy-ciut .vy-kaca-cari-ikon { display: block; }

    /* daftar menu */
    .vy-kaca-nav { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 2px 10px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 222, 185, .28) transparent; overscroll-behavior: contain;
        -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
    .vy-kaca-bagian { margin-top: 4px; }
    .vy-kaca-label { position: relative; margin: 0; height: 30px; padding: 0 12px 5px; display: flex; align-items: flex-end; overflow: hidden; white-space: nowrap;
        font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #B5A38B; transition: color .25s; }
    html.vy-ciut .vy-kaca-label { color: transparent; }
    html.vy-ciut .vy-kaca-label::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 1px; background: rgba(255, 222, 185, .2); }
    .vy-kaca ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
    .vy-kaca li[hidden], .vy-kaca .vy-kaca-bagian[hidden], .vy-kaca-kosong[hidden] { display: none; }
    .vy-kaca-kosong { margin: 18px 12px; font-size: 13px; color: #A8967F; }
    html.vy-ciut .vy-kaca-kosong { display: none; }

    .vy-kaca-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 14px; color: #D8C8B2; text-decoration: none; white-space: nowrap;
        font: 500 14.5px/1 'Inter', ui-sans-serif, system-ui, sans-serif; transition: background-color .2s, color .2s; }
    /* area sentuh 44 px walau tampilan 40 px (jarak antar item 4 px, tidak tumpang tindih) */
    .vy-kaca-item::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
    .vy-kaca-item:hover { background: rgba(255, 235, 210, .08); color: #F1E4D1; }
    .vy-kaca-ikon { flex: none; width: 22px; height: 22px; display: inline-flex; color: #B9A58E; transition: color .2s; }
    .vy-kaca-ikon svg { width: 22px; height: 22px; }
    .vy-kaca-item:hover .vy-kaca-ikon { color: #D8C8B2; }
    .vy-kaca-teks { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .vy-kaca-lencana { flex: none; min-width: 20px; padding: 3px 7px; border-radius: 10px; text-align: center; font-size: 11px; font-weight: 600; line-height: 1; color: #F6DDBD; background: rgba(215, 155, 94, .3); }
    .vy-kaca-item.is-aktif { color: #FBF0E0; }
    .vy-kaca-item.is-aktif .vy-kaca-ikon { color: #EBB070; }
    /* tanpa JavaScript: item aktif tetap bergelembung */
    #vy-kaca:not([data-js]) .vy-kaca-item.is-aktif { background: linear-gradient(180deg, rgba(255, 235, 210, .16), rgba(255, 235, 210, .06)); box-shadow: inset 0 0 0 1px rgba(255, 238, 215, .5); }

    /* gelembung kaca: SATU elemen yang meluncur ke item aktif (sedikit memantul) */
    .vy-kaca-gelembung { position: absolute; z-index: 0; left: 10px; right: 10px; top: 0; height: 40px; border-radius: 14px; pointer-events: none; opacity: 0;
        background: linear-gradient(180deg, rgba(255, 235, 210, .16), rgba(255, 235, 210, .06)); border: 1px solid rgba(255, 238, 215, .5);
        box-shadow: 0 6px 22px rgba(215, 155, 94, .28), inset 0 1px 0 rgba(255, 245, 230, .3);
        transition: top .55s cubic-bezier(.34, 1.4, .64, 1), height .3s ease, opacity .25s ease; }
    .vy-kaca-gelembung[data-on="1"] { opacity: 1; }

    /* kartu profil di dasar */
    .vy-kaca-profil { flex: none; display: flex; align-items: center; gap: 10px; margin: 6px 12px 14px; padding: 8px 10px; min-height: 56px; border-radius: 22px; text-decoration: none; color: #F1E4D1; overflow: hidden;
        background: rgba(20, 12, 7, .5); border: 1px solid rgba(255, 222, 185, .16); transition: background-color .2s, border-color .2s; }
    .vy-kaca-profil:hover { background: rgba(20, 12, 7, .62); border-color: rgba(255, 222, 185, .3); }
    .vy-kaca-ava { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        font: 700 16px/1 'Sora', 'Inter', sans-serif; color: #241408; background: linear-gradient(135deg, #E8AE70, #B97B45); box-shadow: 0 4px 14px rgba(215, 155, 94, .35), inset 0 1px 0 rgba(255, 240, 220, .5); }
    .vy-kaca-online { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: #4ADE80; border: 2px solid #2b1e15; }
    .vy-kaca-profil-teks { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .vy-kaca-profil-teks strong { font: 600 13.5px/1.1 'Inter', sans-serif; color: #F1E4D1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vy-kaca-profil-teks small { font: 500 12px/1.1 'Inter', sans-serif; color: #BCA98F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* tombol bulat ciut/lebar di tepi kanan */
    .vy-kaca-tombol { position: absolute; z-index: 3; right: -15px; top: 62px; width: 30px; height: 30px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #EBDDC9;
        background: linear-gradient(160deg, rgba(86, 62, 42, .92), rgba(52, 37, 25, .92)); border: 1px solid rgba(255, 222, 185, .35); box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 240, 220, .25); transition: background-color .2s, transform .2s; }
    .vy-kaca-tombol::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }   /* area sentuh 44 px (30 px - border 2 px + 16 px) */
    .vy-kaca-tombol:hover { background: linear-gradient(160deg, rgba(110, 80, 54, .95), rgba(70, 50, 33, .95)); }
    .vy-kaca-tombol svg { transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); }
    html.vy-ciut .vy-kaca-tombol svg { transform: rotate(180deg); }

    /* ===== mode ciut (68 px): hanya ikon ===== */
    html.vy-ciut .vy-kaca-teks, html.vy-ciut .vy-kaca-profil-teks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    html.vy-ciut .vy-kaca-item { justify-content: center; padding: 0; }
    html.vy-ciut .vy-kaca-lencana { position: absolute; top: 6px; right: 9px; min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0; background: #EBB070; }
    html.vy-ciut .vy-kaca-gelembung { left: 10px; right: 10px; }
    html.vy-ciut .vy-kaca-profil { margin: 6px 10px 14px; padding: 4px; min-height: 48px; justify-content: center; }

    /* pil kaca berisi nama halaman (mode ciut): di sebelah item aktif / item yang disorot */
    /* gaya kaca yang sama dengan kapsul (gradasi, border, blur 28 + saturate 160, bayangan, highlight); lapisan gelap tipis di bawahnya menjaga kontras di atas isi halaman */
    .vy-kaca-pil { position: absolute; z-index: 3; left: calc(100% + 12px); top: 0; transform: translate(-8px, -50%) scale(.96); transform-origin: left center; opacity: 0; pointer-events: none; display: none; align-items: center; height: 38px; padding: 0 16px; border-radius: 19px; white-space: nowrap;
        font: 500 13.5px/1 'Inter', sans-serif; color: #FBF0E0;
        background: linear-gradient(160deg, rgba(255, 232, 205, .14), rgba(255, 232, 205, .05)), rgba(26, 17, 11, .62);
        border: 1px solid rgba(255, 222, 185, .2);
        -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
        box-shadow: 0 26px 70px rgba(0, 0, 0, .55), 0 0 20px rgba(215, 155, 94, .2), inset 0 1px 0 rgba(255, 240, 220, .3); transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.4, .64, 1), top .35s ease; }
    html.vy-ciut .vy-kaca-pil { display: inline-flex; }
    .vy-kaca-pil[data-on="1"] { opacity: 1; transform: translate(0, -50%) scale(1); }

    /* fokus papan ketik */
    .vy-kaca a:focus-visible, .vy-kaca button:focus-visible, .vy-kaca-tombol:focus-visible { outline: 2px solid #F2B261; outline-offset: 2px; }
    .vy-kaca-cari:focus-within { outline: none; }

    @media (prefers-reduced-motion: reduce) {
        .vy-kaca-item:hover .vy-kaca-ikon { transform: none !important; }
        html.dark body.fi-body::before, html.dark body.fi-body::after { animation: none; opacity: .75; }
        html.dark .fi-main-ctn, .vy-kaca-wadah, .vy-kaca-gelembung, .vy-kaca-pil, .vy-kaca-tombol svg, .vy-kaca-item, .vy-kaca-ikon, .vy-kaca-label { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
    }
}

/* ===== efek MOUSE: hanya perangkat dengan mouse (bukan layar sentuh) ===== */
@media screen and (min-width: 1100px) and (hover: hover) and (pointer: fine) {
    /* gelembung yang sama mengikuti mouse: top .45 s dengan pegas yang sama */
    .vy-kaca-gelembung[data-gerak="mouse"] { transition: top .45s cubic-bezier(.34, 1.4, .64, 1), height .3s ease, opacity .25s ease; }
    /* ikon item yang disentuh mouse naik 1 px dan membesar */
    .vy-kaca-ikon { transition: color .2s, transform .3s; }
    .vy-kaca-item:hover .vy-kaca-ikon { transform: translateY(-1px) scale(1.08); }
}