/* MikroTik Control Center — effects.css (dipecah dari frontend/index.html) */

/* --- BACKGROUND --- */
.liquid-bg { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; pointer-events: none; }

.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.7; }

.orb-1 { width: 500px; height: 500px; top: -50px; left: -50px; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(210,230,255,0.8) 100%); }

.orb-2 { width: 600px; height: 600px; bottom: -100px; right: -50px; background: radial-gradient(circle, rgba(235,245,255,1) 0%, rgba(200,225,255,0.6) 100%); }

@keyframes pulseDi { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

.shake-err { animation: shake 0.4s; }

@keyframes popIn { to { transform: scale(1); opacity: 1; } }

@keyframes fadeScaleOut { to { transform: scale(1.1); opacity: 0; } }

@keyframes blinkCaret { from, to { border-color: transparent } 50% { border-color: var(--accent); } }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.morph-wrapper { width: 75px; height: 75px; margin: 0 auto 15px; position: relative; }

.morph-svg { width: 100%; height: 100%; }

.track-circle { fill: none; stroke: rgba(0,0,0,0.05); stroke-width: 4; }

.draw-circle { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 164; stroke-dashoffset: 164; transform-origin: center; transform: rotate(-90deg); transition: stroke-dashoffset 0.4s ease, stroke 0.4s ease; }

.check-line { fill: none; stroke: var(--success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; transition: stroke-dashoffset 0.4s ease; }

.cross-line { fill: none; stroke: var(--danger); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; transition: stroke-dashoffset 0.4s ease; }

.is-loading .draw-circle { animation: spinSvg 1s linear infinite; stroke-dashoffset: 60; }

@keyframes spinSvg { 100% { transform: rotate(270deg); } }

.is-success .draw-circle { stroke: var(--success); stroke-dashoffset: 0; transform: rotate(-90deg); animation: none; fill: transparent; }

.is-success .check-line { stroke-dashoffset: 0; transition-delay: 0.1s; }

.is-failed .draw-circle { stroke: var(--danger); stroke-dashoffset: 0; transform: rotate(-90deg); animation: none; fill: transparent; }

.is-failed .cross-line { stroke-dashoffset: 0; transition-delay: 0.1s; }

@keyframes pulseRed { 0% { box-shadow: 0 0 0 0 rgba(255,59,48, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(255,59,48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,48, 0); } }

.val-update { animation: textPop 0.3s ease; }

@keyframes textPop { 0% { transform: scale(1); color: var(--accent); } 50% { transform: scale(1.1); color: var(--success); } 100% { transform: scale(1); } }

/* ============================================================
   LIQUID GLASS (iOS-style) — lapisan efek global
   ============================================================ */
:root {
    --spring: cubic-bezier(0.22, 1.36, 0.36, 1);      /* pegas iOS */
    --spring-soft: cubic-bezier(0.32, 1.2, 0.4, 1);
    --glass-hi: inset 0 1px 1px rgba(255,255,255,0.65), inset 0 -1px 1px rgba(255,255,255,0.15);
}

/* --- Material kaca: kilau tepi ala Liquid Glass --- */
/* NOTE: :not(.sidebar) — sidebar harus tetap position:fixed (off-canvas),
   kalau ketimpa jadi relative dia makan tempat 260px di layout (bug 2026-10-07) */
.glass-panel:not(.sidebar) {
    position: relative;
    box-shadow: var(--glass-hi), var(--shadow-soft);
    transition: transform 0.35s var(--spring-soft), box-shadow 0.35s ease;
}

/* --- Tombol: kilau geser + tekan memantul --- */
.btn-ios {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s var(--spring), box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-ios::after {
    content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none;
}
.btn-ios:hover::after { left: 130%; }
.btn-ios:active { transform: scale(0.94); filter: brightness(0.96); }
.btn-ios:hover { transform: translateY(-1px); }

/* --- Modal: masuk memantul ala iOS sheet --- */
.overlay.show .popup-box {
    animation: sheetIn 0.45s var(--spring);
}
@keyframes sheetIn {
    from { opacity: 0; transform: translateY(34px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Pindah halaman: fade + naik halus --- */
.view-section { animation: viewIn 0.4s var(--spring-soft); }
@keyframes viewIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Nav: pil aktif berkilau --- */
.nav-item { transition: transform 0.25s var(--spring), background 0.25s ease, color 0.25s ease; }
.nav-item:active { transform: scale(0.96); }
.nav-item.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55));
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--glass-hi), 0 4px 14px rgba(0,0,0,0.06);
}

/* --- Baris tabel: angkat + glow saat hover --- */
table tbody tr { transition: transform 0.25s var(--spring-soft), background 0.25s ease, box-shadow 0.25s ease; }
table tbody tr:hover { transform: translateY(-1px) scale(1.005); box-shadow: 0 6px 18px rgba(0,122,255,0.08); }

/* --- Input: cincin fokus berkilau --- */
.input-ios { transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.25s var(--spring-soft); }
.input-ios:focus {
    border-color: rgba(0,122,255,0.5);
    box-shadow: 0 0 0 4px rgba(0,122,255,0.12), var(--glass-hi);
    transform: scale(1.01); outline: none;
}

/* --- Badge/status: kaca mini --- */
.badge, .status-pill {
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
    transition: transform 0.25s var(--spring);
}
.badge:hover, .status-pill:hover { transform: scale(1.06); }

/* --- Kartu stat: hover mengambang --- */
.stat-card, .glass-panel.table-container { transition: transform 0.35s var(--spring-soft), box-shadow 0.35s ease; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--glass-hi), 0 14px 30px rgba(0,0,0,0.1); }

/* --- Orbs background: gerak pelan ala iOS --- */
.orb-1 { animation: drift1 14s ease-in-out infinite alternate; }
.orb-2 { animation: drift2 18s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,40px) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-50px,-35px) scale(1.1); } }

/* --- Dynamic island: masuk memantul --- */
#dynamic-island.active { animation: islandIn 0.5s var(--spring); }
@keyframes islandIn {
    from { opacity: 0; transform: translateY(-18px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Kurangi animasi bila user minta --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}