/* =======================================
   PHOTO TO URL PRO
   CYBER EDITION - DAFXZNESIA
======================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Segoe UI,Arial,sans-serif;
    background:#060b18;
    color:#fff;
    min-height:100vh;
    overflow-x:hidden;
}

/* Background Cyber */

.bg-grid{
    position:fixed;
    inset:0;
    z-index:-2;

    background-image:
    linear-gradient(rgba(0,229,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.08) 1px,transparent 1px);

    background-size:45px 45px;

    animation:grid 10s linear infinite;
}

@keyframes grid{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(45px);
    }
}

body::before{
    content:"";
    position:fixed;
    width:450px;
    height:450px;

    background:radial-gradient(circle,#00e5ff33,transparent 70%);

    top:-120px;
    right:-120px;

    filter:blur(20px);

    z-index:-1;
}

body::after{
    content:"";
    position:fixed;
    width:450px;
    height:450px;

    background:radial-gradient(circle,#8b5cf633,transparent 70%);

    bottom:-120px;
    left:-120px;

    filter:blur(20px);

    z-index:-1;
}

/* Container */

.container{

    width:95%;
    max-width:900px;

    margin:40px auto;

}

/* Logo */

.logo{

    text-align:center;

    margin-bottom:30px;

}

.logo h1{

    font-size:38px;

    color:#00e5ff;

    text-shadow:0 0 15px #00e5ff;

}

.logo p{

    margin-top:10px;

    color:#cbd5e1;

}

/* Statistik */

.stats{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:15px;

    margin-bottom:25px;

}

.box{

    background:rgba(20,30,50,.85);

    border:1px solid #00e5ff55;

    border-radius:18px;

    padding:20px;

    text-align:center;

    backdrop-filter:blur(10px);

}

.box h2{

    color:#00ff99;

    font-size:30px;

}

.box span{

    color:#cbd5e1;

}

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

.card{
    background:rgba(18,24,40,.88);
    border:1px solid rgba(0,229,255,.35);
    border-radius:22px;
    padding:30px;
    backdrop-filter:blur(14px);
    box-shadow:
        0 0 25px rgba(0,229,255,.18),
        0 0 60px rgba(139,92,246,.10);
    margin-bottom:25px;
    animation:fadeUp .7s ease;
}

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

.card h1,
.card h2{
    text-align:center;
    color:#00e5ff;
    margin-bottom:18px;
}

.card p{
    color:#cbd5e1;
    text-align:center;
    margin-bottom:20px;
}

/* ===========================
   INPUT FILE
=========================== */

.upload{
    display:block;
    cursor:pointer;
}

.upload input[type=file]{
    width:100%;
    padding:16px;
    border:2px dashed #00e5ff;
    border-radius:16px;
    background:#0b1220;
    color:#fff;
}

.upload span{
    display:block;
    margin-top:12px;
    text-align:center;
    color:#94a3b8;
    font-size:14px;
}

/* ===========================
   BUTTON
=========================== */

button,
.btn{

    display:inline-block;
    width:100%;

    padding:15px;

    margin-top:18px;

    border:none;
    border-radius:14px;

    text-decoration:none;
    text-align:center;

    font-weight:bold;
    font-size:16px;

    color:#fff;

    background:linear-gradient(90deg,#00e5ff,#8b5cf6);

    transition:.3s;

}

button:hover,
.btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 18px #00e5ff,
    0 0 30px #8b5cf6;

}

/* ===========================
   PREVIEW
=========================== */

.preview{

    display:block;

    width:100%;

    max-width:420px;

    margin:25px auto;

    border-radius:18px;

    border:2px solid #00e5ff;

    box-shadow:0 0 25px rgba(0,229,255,.4);

}

/* ===========================
   URL BOX
=========================== */

.url-box{

    width:100%;

    margin-top:15px;

    padding:14px;

    background:#09111d;

    border:1px solid #00e5ff;

    border-radius:12px;

    color:#fff;

    outline:none;

}

/* ===========================
   INFO
=========================== */

.info{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));

    gap:15px;

    margin:20px 0;

}

.info div{

    background:#101a2d;

    border-radius:14px;

    border:1px solid rgba(0,229,255,.25);

    padding:15px;

    text-align:center;

}

/* ===========================
   GALLERY
=========================== */

.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.card-image{
    background:rgba(18,24,40,.88);
    border:1px solid rgba(0,229,255,.30);
    border-radius:18px;
    overflow:hidden;
    transition:.3s;
    backdrop-filter:blur(12px);
}

.card-image:hover{
    transform:translateY(-6px);
    box-shadow:
        0 0 25px rgba(0,229,255,.30),
        0 0 40px rgba(139,92,246,.20);
}

.card-image img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.detail{
    padding:18px;
}

.detail h3{
    color:#00e5ff;
    font-size:17px;
    margin-bottom:10px;
    word-break:break-word;
}

.detail p{
    color:#cbd5e1;
    font-size:14px;
    margin:8px 0;
    text-align:left;
}

/* ===========================
   EMPTY
=========================== */

.empty{
    padding:40px;
    text-align:center;
    background:rgba(18,24,40,.88);
    border:2px dashed #00e5ff;
    border-radius:20px;
}

.empty h2{
    color:#00e5ff;
    margin-bottom:10px;
}

.empty p{
    color:#94a3b8;
}

/* ===========================
   MENU
=========================== */

.menu{
    margin:20px 0;
}

.menu a{
    display:block;
    text-decoration:none;
    text-align:center;
    padding:15px;
    background:#101827;
    border:1px solid rgba(0,229,255,.30);
    border-radius:14px;
    color:#fff;
    transition:.3s;
}

.menu a:hover{
    border-color:#00e5ff;
    box-shadow:0 0 20px rgba(0,229,255,.25);
}

/* ===========================
   FITUR
=========================== */

.fitur{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:15px;
    margin-top:25px;
}

.fitur-box{
    padding:18px;
    text-align:center;
    background:#101827;
    border-radius:14px;
    border:1px solid rgba(0,229,255,.25);
}

/* ===========================
   FOOTER
=========================== */

footer{
    margin:40px 0 20px;
    text-align:center;
    color:#94a3b8;
    font-size:14px;
}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:#00e5ff;
    border-radius:20px;
}

::-webkit-scrollbar-track{
    background:#09111d;
}

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

@media(max-width:768px){

.logo h1{
    font-size:28px;
}

.card{
    padding:20px;
}

.preview{
    max-width:100%;
}

button,
.btn{
    font-size:15px;
}

.card-image img{
    height:180px;
}

}