/* ======================================================
   ZERKADO AI AUTOPILOT
====================================================== */

#zk-autopilot{
    max-width:900px;
    margin:auto;
    font-family:Inter,sans-serif;
    position:relative;
}

#zk-autopilot *{
    box-sizing:border-box;
}

/* ======================================================
   CARD
====================================================== */

.zk-card{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid #e7edf3;
    border-radius:28px;
    box-shadow:
        0 10px 30px rgba(0,0,0,.05),
        0 25px 80px rgba(0,0,0,.08);
}

.zk-card::before{
    content:"";
    position:absolute;
    inset:-80px;
    background:radial-gradient(
        circle,
        rgba(43,140,191,.12),
        transparent 70%
    );
    pointer-events:none;
    animation:zkGlow 5s ease-in-out infinite;
}

@keyframes zkGlow{
    0%,100%{
        opacity:.4;
        transform:scale(1);
    }
    50%{
        opacity:1;
        transform:scale(1.08);
    }
}

/* ======================================================
   HEADER
====================================================== */

.zk-header{
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px 24px;
    border-bottom:1px solid #edf2f7;
}

.zk-dots{
    display:flex;
    gap:6px;
}

.zk-dots span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#cdd6df;
}

.zk-title{
    font-size:14px;
    font-weight:600;
    color:#64748b;
}

.zk-status{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:2px 11px;
    border-radius:50px;
    background:#e9f8ef;
    color:#22a85d;
    font-size:11px;
    font-weight:700;
}

.zk-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#22a85d;
    animation:zkBlink 1.5s infinite;
}

@keyframes zkBlink{
    0%,100%{opacity:1}
    50%{opacity:.3}
}

/* ======================================================
   GRID
====================================================== */

.zk-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:22px;
    padding:24px;
}

/* ======================================================
   BOXES
====================================================== */

.zk-box,
.zk-ai,
.zk-stats div,
.zk-chart{
    background:#fafcff;
    border:1px solid #e5edf5;
    border-radius:18px;
}
 
.zk-box{
    padding:15px;
    margin-bottom:18px;
}

.zk-box-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    font-weight:700;
}

.zk-box-header span:last-child{
    color:#94a3b8; 
    font-size:11px;
    text-transform:uppercase;
}

/* ======================================================
   SCAN TOP 10
====================================================== */

.zk-scan-area{
    position:relative;
    overflow:hidden;
    margin-top:14px;
}

.zk-scan-area::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-45px;
    height:45px;

    background:linear-gradient(
        to bottom,
        rgba(43,140,191,.30),
        transparent
    );

    animation:zkScan 2.5s linear infinite;
    z-index:2;
}

@keyframes zkScan{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(180px);
    }
}

.zk-line{
    display:flex;
    align-items:center;
    gap:10px;
    margin:8px 0;
}

.zk-line i {
    width: 7px;
    height: 6px;
    border-radius: 7px;
    background: #3fa5d4;
}

.zk-line span{
    display:block;
    height:6px;
    border-radius:50px;
    background:#e7edf3;
}

/* ======================================================
   KEYWORDS
====================================================== */

.zk-keyword{
    margin-top:10px;
    /* animation:zkKeywordFade 4s ease-in-out infinite; */
}

.zk-keyword:nth-child(1){
    animation-delay:0s;
}

.zk-keyword:nth-child(2){
    animation-delay:.5s;
}

.zk-keyword:nth-child(3){
    animation-delay:1s;
}

.zk-keyword:nth-child(4){
    animation-delay:1.5s;
}

@keyframes zkKeywordFade{

    0%{
        opacity:.4;
        transform:translateX(-8px);
    }

    20%{
        opacity:1;
        transform:translateX(0);
    }

    70%{
        opacity:1;
    }

    100%{
        opacity:.4;
        transform:translateX(8px);
    }
}

.zk-keyword div:first-child{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    margin-bottom:6px;
}

.zk-keyword strong{
    color:#22a85d;
}

.zk-progress{
    height:6px;
    border-radius:50px;
    overflow:hidden;
    background:#e7edf3;
}

.zk-progress span{
    display:block;
    width:0;
    height:100%;
    border-radius:50px;

    background:linear-gradient(
        90deg,
        #2b8cbf,
        #16b8b4
    );

    animation:zkKeywordLoad 4s ease-in-out infinite;
}

.zk-keyword:nth-child(1) .zk-progress span{
    --target:96%;
    animation-delay:0s;
}

.zk-keyword:nth-child(2) .zk-progress span{
    --target:88%;
    animation-delay:.5s;
}

.zk-keyword:nth-child(3) .zk-progress span{
    --target:80%;
    animation-delay:1s;
}

.zk-keyword:nth-child(4) .zk-progress span{
    --target:84%;
    animation-delay:1.5s;
}

@keyframes zkKeywordLoad{

    0%{
        width:0;
        opacity:0;
    }

    15%{
        opacity:1;
    }

    45%{
        width:var(--target);
    }

    75%{
        width:var(--target);
    }

    100%{
        width:0;
        opacity:.2;
    }
}

/* ======================================================
   AI CORE
====================================================== */

.zk-ai{
    padding:24px;
    text-align:center;
    overflow:hidden;
}

.zk-rings{
    width:130px;
    height:130px;
    margin:auto;
    position:relative;
}

.zk-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px solid rgba(43,140,191,.35);
    animation:zkRing 3s linear infinite;
}

.delay1{
    animation-delay:1s;
}

.delay2{
    animation-delay:2s;
}

@keyframes zkRing{

    0%{
        transform:scale(.7);
        opacity:1;
    }

    100%{
        transform:scale(1.6);
        opacity:0;
    }
}

.zk-core{
    position:absolute;
    inset:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#2b8cbf;
    color:#fff;
    font-size:28px;

    box-shadow:
        0 0 25px rgba(43,140,191,.45);
}

.zk-ai h4{
    margin:15px 0 4px;
}

.zk-ai p{
    margin:0;
    font-size:12px;
    color:#94a3b8;
}

/* ======================================================
   STATS
====================================================== */

.zk-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:15px;
}

.zk-stats div{
    padding:18px;
    text-align:center;
}

.zk-stats span{
    display: inline !important;
    font-size:27px;
    font-weight:800;
    line-height:1;
}

.zk-stats small{
    display:block;
    margin-top:8px;
    font-size:10px;
    color:#94a3b8;
    letter-spacing:.08em;
    line-height: 12px;
}

/* ======================================================
   CHART LIVE
====================================================== */

.zk-chart{
    margin-top:15px;
    padding:18px;
    height:90px;

    display:flex;
    align-items:flex-end;
    gap:8px;
}

.zk-chart span{
    flex:1;
    border-radius:4px 4px 0 0;

    background:linear-gradient(
        to top,
        #4ca8d8,
        #2b8cbf
    );
}

.zk-chart span:nth-child(1){
    animation:zkWave1 2.6s ease-in-out infinite;
}

.zk-chart span:nth-child(2){
    animation:zkWave2 2.6s ease-in-out infinite;
}

.zk-chart span:nth-child(3){
    animation:zkWave3 2.6s ease-in-out infinite;
}

.zk-chart span:nth-child(4){
    animation:zkWave4 2.6s ease-in-out infinite;
}

.zk-chart span:nth-child(5){
    animation:zkWave5 2.6s ease-in-out infinite;
}

.zk-chart span:nth-child(6){
    animation:zkWave6 2.6s ease-in-out infinite;
}

.zk-chart span:nth-child(7){
    animation:zkWave7 2.6s ease-in-out infinite;
}

@keyframes zkWave1{
    0%,100%{height:16px}
    50%{height:30px}
}

@keyframes zkWave2{
    0%,100%{height:22px}
    50%{height:14px}
}

@keyframes zkWave3{
    0%,100%{height:19px}
    50%{height:34px}
}

@keyframes zkWave4{
    0%,100%{height:28px}
    50%{height:18px}
}

@keyframes zkWave5{
    0%,100%{height:25px}
    50%{height:42px}
}

@keyframes zkWave6{
    0%,100%{height:34px}
    50%{height:20px}
}

@keyframes zkWave7{
    0%,100%{height:38px}
    50%{height:50px}
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:768px){

    .zk-grid{
        grid-template-columns:1fr;
    }

    .zk-header{
        flex-wrap:wrap;
    }

    .zk-status{
        margin-left:0;
    }

    .zk-rings{
        width:110px;
        height:110px;
    }

    .zk-core{
        inset:32px;
    }
}