/* ========== RESET =========== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",Arial,Helvetica,sans-serif;
}

html, body{
    min-height:100%;
}

body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    color:#fff;
    background:#0f172a;
}

/* ========= HEADER ========== */
.header{
    background:rgba(15,24,39,.20);
    padding:10px 5px;
    text-align:center;
}

.header h1{
    font-size:22px;
    color:#38bdf8;
}

.header p{
    margin-top:2px;
    color:#cbd5e1;
    font-size:12px;
}

/* ======= CONTAINER ========== */
.container{
    flex:1;
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:10px 10px 20px;
}

/* ========= ANIMASI NEON BERGERAK (HIDUP) ========= */
@keyframes neonMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ========= SERVER (Garis Atas Menyala Hidup) ======= */
.server{
    position:relative;
    padding:8px 12px;
    margin-bottom:8px;
    background:linear-gradient(145deg, rgba(30,41,59,.90), rgba(15,23,42,.80));
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}

.server::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #38bdf8, #a855f7, #ec4899, #f97316, #38bdf8);
    background-size: 300% 300%;
    animation: neonMove 4s ease infinite;
}

.server-info{
    display:flex;
    align-items:center;
    gap:8px;
}

.server-icon{ font-size:20px; }
.server-title{ font-size:10px; color:#94a3b8; }
.server-name{ font-size:13px; font-weight:bold; color:#ffffff; }

.server button{
    border:1px solid rgba(56,189,248,.5);
    background:rgba(37,99,235,.25);
    color:#fff;
    padding:5px 10px;
    font-size:11px;
    border-radius:8px;
    cursor:pointer;
}

/* ====== SPEED GAUGE ========= */
.gauge-wrapper{
    position:relative;
    width:min(550px,100%);
    aspect-ratio:1.9/1;
    margin:2px auto 0;
    overflow:hidden;
    transition: transform 0.3s;
}
.gauge{
    position:absolute;
    width:100%;
    height:200%;
    left:0%;
    top:0%;
    border-radius:50%;
    background:conic-gradient(from 270deg, #38bdf8 0deg, #06b6d4 45deg, #22c55e 90deg, #eab308 125deg, #f97316 155deg, #ef4444 180deg, transparent 180deg);
    transform:rotate(0deg);
}

.gauge::after{
    content:"";
    position:absolute;
    width:93%;
    height:93%;
    left:3.5%;
    top:3.5%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(15,23,42,.98) 0%, rgba(2,6,23,.98) 70%);
}
.needle{
    position:absolute;
    width:3px;
    height:38%;
    left:50%;
    bottom:7%;
    transform-origin:50% 100%;
    transform:translateX(-50%) rotate(-90deg);
    background:#67e8f9;
    border-radius:10px;
    box-shadow:0 0 12px rgba(34,211,238,.9);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.needle-dot{
    position:absolute;
    width:20px;
    height:20px;
    left:50%;
    bottom:4%;
    transform:translateX(-50%);
    border-radius:50%;
    background:#0ea5e9;
    border:4px solid #1e293b;
    z-index:5;
}

.speed-value{
    position:absolute;
    left:0;
    right:0;
    bottom:4%;
    text-align:center;
    z-index:10;
}

.speed-number{
    font-size:48px;
    font-weight:bold;
    line-height:1;
    color:#ffffff;
}

.speed-unit{
    margin-top:2px;
    font-size:14px;
    color:#cbd5e1;
}

.test-type{
    margin-top:4px;
    color:#22d3ee;
    font-size:14px;
    font-weight:bold;
    letter-spacing:1px;
}

/* ======== CONTROL ========== */
.control{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:4px;
}

.start-btn{
    min-width:200px;
    padding:10px 18px;
    border:0;
    border-radius:10px;
    background:linear-gradient(135deg, #2563eb, #06b6d4);
    color:#fff;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 4px 15px rgba(37,99,235,.35);
}

.start-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

/* ========= RESULT CARDS (Garis Atas Neon Hidup Bergerak) ======== */
.results{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-top:10px;
    transition: 0.3s;
}

.result{
    min-height:50px;
    padding:6px;
    text-align:center;
    background:linear-gradient(145deg, rgba(30,41,59,.90), rgba(15,23,42,.80));
    border-radius:10px;
    position: relative;
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}

.result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #38bdf8, #a855f7, #ec4899, #f97316, #38bdf8);
    background-size: 300% 300%;
    animation: neonMove 4s ease infinite;
}

.result-icon{ font-size:13px; display:none; }
.result-title{ font-size:10px; color:#38bdf8; font-weight:500; }
.result-value{ font-size:15px; font-weight:bold; margin-top:1px; color:#ffffff; text-shadow:0 0 8px rgba(56,189,248,0.4); }
.result-unit{ font-size:9px; color:#cbd5e1; }

/* ================= ISP (Garis Atas Neon Hidup Bergerak) ================= */
.isp{
    margin-top:8px;
    padding:6px;
    text-align:center;
    background:linear-gradient(145deg, rgba(30,41,59,.90), rgba(15,23,42,.80));
    border-radius:10px;
    position: relative;
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}

.isp::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #38bdf8, #a855f7, #ec4899, #f97316, #38bdf8);
    background-size: 300% 300%;
    animation: neonMove 4s ease infinite;
}

.isp-title{ color:#38bdf8; font-size:10px; }
.isp-value{ margin-top:1px; font-size:13px; font-weight:bold; color:#ffffff; }

/* ================= STATUS ================= */
.status-box{
    margin-top:8px;
    padding:6px 10px;
    background:rgba(15,23,42,.65);
    border:1px solid rgba(255,255,255,.10);
    border-radius:8px;
    color:#cbd5e1;
    font-size:11px;
    text-align:center;
}
.status-box.running{ color:#22d3ee; }
.status-box.success{ color:#22c55e; }

/* ================= BACK ================= */
.btn-back{
    display:block;
    width:max-content;
    margin:10px auto 0;
    padding:8px 16px;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    background:linear-gradient(145deg, rgba(37,99,235,.80), rgba(15,23,42,.60));
    border:1px solid rgba(255,255,255,.2);
    border-radius:10px;
    font-size:12px;
}

/* ================= FOOTER ================= */
.footer{
    text-align:center;
    color:#94a3b8;
    padding:10px;
    font-size:11px;
}

/* ================= MODE AKTIF (Saat Testing) ================= */
.speedtest-active .server,
.speedtest-active .results,
.speedtest-active .isp,
.speedtest-active .footer {
    opacity: 0.25;
    transform: scale(0.96);
}