/*
 EVOFRANKLIN HOME FINAL
 Reference: EvoDroid Cloud dashboard
 10 cards / 2 columns
*/

@media (min-width:721px){

/* =========================================
   PANEL APLIKASI
========================================= */

.apps-panel{
    padding:24px 18px 20px;
    overflow:hidden;
}

.app-grid{
    display:grid !important;
    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:12px !important;
    margin-top:24px !important;

    align-content:start;
}

/* =========================================
   KARTU
========================================= */

.app-card{
    position:relative;

    width:100%;
    height:116px !important;
    min-width:0;

    display:grid !important;
    grid-template-columns:
        76px minmax(0,1fr) 40px !important;

    align-items:center;

    padding:12px 13px !important;

    border:
        1px solid rgba(0,220,215,.72) !important;

    border-radius:18px !important;

    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(0,126,220,.10),
            transparent 43%
        ),
        linear-gradient(
            145deg,
            #061b31,
            #031326
        ) !important;

    box-shadow:
        inset 0 0 24px rgba(0,110,160,.12),
        0 8px 18px rgba(0,0,0,.18) !important;

    color:#fff;

    overflow:hidden;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.app-card:hover{
    transform:translateY(-2px);

    border-color:#23eee2 !important;

    box-shadow:
        inset 0 0 25px rgba(0,118,170,.17),
        0 10px 23px rgba(0,0,0,.27),
        0 0 13px rgba(0,225,220,.14) !important;
}

.app-card:active{
    transform:scale(.992);
}

/* =========================================
   FRAME ICON
========================================= */

.app-icon{
    width:68px !important;
    height:68px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:17px !important;

    background:#f7f9fc !important;

    font-size:43px !important;
    line-height:1;

    overflow:hidden;

    box-shadow:
        0 7px 16px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.75) !important;
}

.app-icon svg{
    width:48px !important;
    height:48px !important;

    max-width:72%;
    max-height:72%;

    display:block;
}

.app-icon img{
    width:70% !important;
    height:70% !important;

    object-fit:contain !important;
    display:block;
}

/* =========================================
   NAMA + STATUS
========================================= */

.app-copy{
    min-width:0;

    display:flex;
    flex-direction:column;

    justify-content:center;

    gap:8px !important;

    padding-left:10px !important;
}

.app-copy strong{
    margin:0;

    font-size:15px !important;
    font-weight:700 !important;

    line-height:1.25 !important;

    color:#fff;

    white-space:normal;

    overflow-wrap:normal;
    word-break:normal;
}

.app-copy small{
    display:flex !important;

    align-items:center;

    gap:7px !important;

    font-size:12px !important;

    color:#00e8b7 !important;

    white-space:nowrap;
}

.app-copy small i{
    width:8px !important;
    height:8px !important;

    flex:0 0 8px;

    border-radius:50%;

    background:#00e8b7 !important;

    box-shadow:
        0 0 7px rgba(0,255,205,.85) !important;
}

/* =========================================
   TOMBOL PANAH
========================================= */

.go{
    width:37px !important;
    height:37px !important;

    display:grid !important;
    place-items:center !important;

    justify-self:end;

    border:
        1px solid #008cff !important;

    border-radius:50% !important;

    color:#e9fbff !important;

    background:
        linear-gradient(
            145deg,
            rgba(0,94,175,.44),
            rgba(0,42,90,.30)
        ) !important;

    box-shadow:
        inset 0 0 12px rgba(0,125,255,.40),
        0 0 10px rgba(0,125,255,.12) !important;

    transition:
        transform .16s ease,
        background .16s ease;
}

.go svg{
    width:21px !important;
    height:21px !important;

    font-size:21px !important;
}

.app-card:hover .go{
    transform:translateX(2px);

    background:
        rgba(0,105,200,.38) !important;
}

/* Meta Center tetap mengikuti kartu lain */
.app-card:last-child{
    border-color:
        rgba(0,220,215,.72) !important;
}

}

/* =========================================
   DESKTOP MENENGAH
========================================= */

@media
(min-width:721px)
and
(max-width:1250px){

    .app-grid{
        gap:10px !important;
    }

    .app-card{
        height:108px !important;

        grid-template-columns:
            68px minmax(0,1fr) 36px !important;

        padding:10px 11px !important;
    }

    .app-icon{
        width:61px !important;
        height:61px !important;

        border-radius:15px !important;

        font-size:39px !important;
    }

    .app-icon svg{
        width:43px !important;
        height:43px !important;
    }

    .app-copy{
        padding-left:9px !important;
    }

    .app-copy strong{
        font-size:14px !important;
    }

    .go{
        width:34px !important;
        height:34px !important;
    }
}

/* =====================================================
   EVOFRANKLIN ICON MAKE UP V3
   Fokus: frame / make up ikon per tombol
   Layout kartu TIDAK diubah
===================================================== */

@media (min-width:721px){

.app-card .app-icon{
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    border-radius:18px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:
        0 9px 18px rgba(0,0,0,.30),
        inset 0 0 0 1px rgba(255,255,255,.10) !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.app-card:hover .app-icon{
    transform:translateY(-1px);
    box-shadow:
        0 11px 22px rgba(0,0,0,.34),
        0 0 14px rgba(0,210,220,.10),
        inset 0 0 0 1px rgba(255,255,255,.14) !important;
}

.app-card .app-icon svg{
    display:block !important;
    margin:auto !important;
    width:50px !important;
    height:50px !important;
    max-width:76% !important;
    max-height:76% !important;
    opacity:1 !important;
    visibility:visible !important;
}

.app-card .app-icon svg,
.app-card .app-icon svg path,
.app-card .app-icon svg circle,
.app-card .app-icon svg rect{
    opacity:1 !important;
    visibility:visible !important;
}

/* 1 Spotify */
.app-card:nth-child(1) .app-icon{
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 45%),
      linear-gradient(145deg,#29df68,#119d42) !important;
}
.app-card:nth-child(1) .app-icon,
.app-card:nth-child(1) .app-icon svg{
    color:#ffffff !important;
}

/* 2 Google Authenticator */
.app-card:nth-child(2) .app-icon{
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 45%),
      linear-gradient(145deg,#eef5ff,#dbeafe) !important;
}
.app-card:nth-child(2) .app-icon,
.app-card:nth-child(2) .app-icon svg{
    color:#4285f4 !important;
}

/* 3 Gmail */
.app-card:nth-child(3) .app-icon{
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.30), transparent 42%),
      linear-gradient(145deg,#ffffff,#f6f8fb) !important;
}
.app-card:nth-child(3) .app-icon,
.app-card:nth-child(3) .app-icon svg{
    color:#ea4335 !important;
}

/* 4 Google Drive */
.app-card:nth-child(4) .app-icon{
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.30), transparent 42%),
      linear-gradient(145deg,#ffffff,#f4f7fb) !important;
}
.app-card:nth-child(4) .app-icon,
.app-card:nth-child(4) .app-icon svg{
    color:#34a853 !important;
}

/* 5 WhatsApp */
.app-card:nth-child(5) .app-icon{
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.20), transparent 45%),
      linear-gradient(145deg,#34e27a,#1faa59) !important;
}
.app-card:nth-child(5) .app-icon,
.app-card:nth-child(5) .app-icon svg{
    color:#ffffff !important;
}

/* 6 ChatGPT */
.app-card:nth-child(6) .app-icon{
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.10), transparent 45%),
      linear-gradient(145deg,#29303a,#111827) !important;
}
.app-card:nth-child(6) .app-icon,
.app-card:nth-child(6) .app-icon svg{
    color:#ffffff !important;
}

/* 7 File Saya */
.app-card:nth-child(7) .app-icon{
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.20), transparent 45%),
      linear-gradient(145deg,#ffbb45,#ff8a00) !important;
}
.app-card:nth-child(7) .app-icon,
.app-card:nth-child(7) .app-icon svg{
    color:#ffffff !important;
}

/* 8 Chrome */
.app-card:nth-child(8) .app-icon{
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 42%),
      linear-gradient(145deg,#ffffff,#f5f7fb) !important;
}
.app-card:nth-child(8) .app-icon,
.app-card:nth-child(8) .app-icon svg{
    color:#4285f4 !important;
}

/* 9 Pengaturan */
.app-card:nth-child(9) .app-icon{
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), transparent 42%),
      linear-gradient(145deg,#f4f6f8,#cfd7df) !important;
}
.app-card:nth-child(9) .app-icon,
.app-card:nth-child(9) .app-icon svg{
    color:#5f6b7a !important;
}

/* 10 Meta Center */
.app-card:nth-child(10) .app-icon{
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 44%),
      linear-gradient(145deg,#2a7dff,#0866ff) !important;
}
.app-card:nth-child(10) .app-icon,
.app-card:nth-child(10) .app-icon svg{
    color:#ffffff !important;
}

}

/* EVO SIDEBAR ANDROID CLOUD LOGO V1 */

@media (min-width:721px){

.sidebar .brand-card{
    position:relative;

    margin-top:auto !important;
    padding:14px 9px 15px !important;

    min-height:230px;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    border:1.5px solid #18efff !important;
    border-radius:22px !important;

    background:
      radial-gradient(
        circle at 50% 20%,
        rgba(50,220,255,.28),
        transparent 38%
      ),
      linear-gradient(
        165deg,
        #053f91 0%,
        #03275f 38%,
        #001642 70%,
        #03142e 100%
      ) !important;

    box-shadow:
      0 0 8px rgba(0,226,255,.75),
      0 0 22px rgba(0,129,255,.42),
      inset 0 0 24px rgba(0,205,255,.19),
      inset 0 0 0 1px rgba(120,245,255,.12) !important;

    overflow:hidden;
}

/* garis cahaya diagonal lembut */
.sidebar .brand-card::before{
    content:"";

    position:absolute;
    inset:-20% -35% auto -35%;

    height:120px;

    background:
      linear-gradient(
        135deg,
        transparent 30%,
        rgba(100,235,255,.22) 46%,
        rgba(255,255,255,.18) 50%,
        rgba(42,179,255,.16) 54%,
        transparent 70%
      );

    transform:rotate(-8deg);
    pointer-events:none;
}

/* glow bawah */
.sidebar .brand-card::after{
    content:"";

    position:absolute;
    left:18%;
    right:18%;
    bottom:6px;

    height:2px;

    background:#6ff7ff;

    box-shadow:
      0 0 9px #16eaff,
      0 0 18px #0077ff;

    border-radius:50%;
    pointer-events:none;
}

/* LOGO */
.sidebar .brand-card img{
    position:relative;
    z-index:2;

    width:108px !important;
    height:108px !important;

    margin:0 auto 13px !important;

    object-fit:cover !important;

    border-radius:24px !important;

    border:2px solid rgba(126,248,255,.88) !important;

    background:
      linear-gradient(
        145deg,
        #dff8ff,
        #5cbfff
      ) !important;

    box-shadow:
      0 0 8px #a8fbff,
      0 0 18px #00d9ff,
      0 0 30px rgba(0,101,255,.76),
      inset 0 0 14px rgba(255,255,255,.58) !important;

    transform:none !important;
}

/* NAMA BRAND */
.sidebar .brand-card strong{
    position:relative;
    z-index:2;

    margin:0 !important;

    font-size:17px !important;
    line-height:1.2 !important;

    font-weight:800 !important;

    color:#ffffff !important;

    text-align:center !important;

    text-shadow:
      0 1px 2px rgba(0,0,0,.6),
      0 0 7px rgba(78,218,255,.38);
}

/* GANTI LABEL MENJADI ANDROID CLOUD */
.sidebar .brand-card span{
    position:relative;
    z-index:2;

    display:block !important;

    margin-top:7px !important;

    font-size:0 !important;
    line-height:1 !important;

    text-align:center !important;
}

.sidebar .brand-card span::after{
    content:"Android Cloud";

    display:block;

    font-size:14px;
    line-height:1.2;

    font-weight:700;

    color:#17f4ff;

    letter-spacing:.1px;

    text-shadow:
      0 0 7px rgba(0,238,255,.75),
      0 0 13px rgba(0,105,255,.42);
}

/* sedikit hidup saat pointer masuk */
.sidebar .brand-card:hover{
    border-color:#8cffff !important;

    box-shadow:
      0 0 11px rgba(0,240,255,.9),
      0 0 29px rgba(0,118,255,.52),
      inset 0 0 29px rgba(0,205,255,.22) !important;
}

.sidebar .brand-card:hover img{
    transform:scale(1.025) !important;
}

/* desktop lebih pendek */
@media (max-height:800px){
    .sidebar .brand-card{
        min-height:200px;
        padding:11px 8px 12px !important;
    }

    .sidebar .brand-card img{
        width:92px !important;
        height:92px !important;
        margin-bottom:10px !important;
    }
}

}