@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

body{
    background: linear-gradient(135deg,#667eea,#764ba2);
    min-height:100vh;
    font-family: 'Segoe UI', sans-serif;
}


/* NAVBAR */
.navbar{
    box-shadow:0 4px 15px rgba(0,0,0,.3);
}

/* Navbar brand */
.navbar .navbar-brand{
    font-weight:600;
    font-size:1.25rem;
    color:#fff;
}

.navbar .d-flex{
    flex-wrap: wrap;
    gap:10px;
}

@media (max-width:768px){
    .navbar .btn{
        width:100%;
    }
}
.navbar .navbar-brand:hover{
    color:#f0f0f0;
}

/* Navbar buttons */
.navbar .btn{
    border-radius:12px;
    padding:8px 16px;
    font-weight:600;
}

/* Dropdown menu */
.navbar .dropdown-menu{
    border-radius:12px;
}

.navbar .dropdown-item:hover{
    background:#f1f1f1;
}

/* Responsive */
@media (max-width: 992px){
    .navbar .d-flex{
        flex-wrap:wrap;
        gap:10px;
    }

    .navbar .btn{
        width:100%;
    }
}

/* Glass Card */
.main-card{
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(35px);
    border-radius:30px;
    padding:50px;
    box-shadow:
        0 0 60px rgba(102,126,234,0.5),
        0 25px 60px rgba(0,0,0,0.6);
    border:1px solid rgba(255,255,255,0.15);
    color:white;
    animation: fadeUp 0.8s ease;
}
@media (max-width: 768px){
    .main-card{
        padding:20px;
        border-radius:20px;
    }

    h3{
        font-size:22px;
    }
}

/* Heading */
h3{
    font-weight:800;
    font-size:28px;
    background: linear-gradient(90deg,#00f5ff,#8f00ff);

    background-clip: text;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    color: transparent;
    letter-spacing:1px;
}
/* Subtitle */
.text-muted{
    color:#ccc !important;
}

/* Inputs */
.form-control, .form-select{
    background: rgba(255,255,255,0.12);
    border:none;
    border-radius:14px;
    padding:12px;
    color:white;
    transition:0.3s;
}

.form-control::placeholder{
    color:#ddd;
}

.form-control:focus, .form-select:focus{
    background: rgba(255,255,255,0.18);
    box-shadow:0 0 15px rgba(0,255,255,0.6);
    color:white;
}

/* Preview container center */
#previewContainer{
    display: flex;
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center (jar height asel tar) */
    text-align: center;
    margin-top: 20px;
}

/* Video style */
#videoPreview{
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    transition: 0.4s;
    display: block;
    margin: 0 auto;   /* fallback center */
}

#videoPreview:hover{
    transform: scale(1.02);
}

/* Button */
.btn-gradient{
    background: linear-gradient(135deg,#00f5ff,#8f00ff);
    border:none;
    padding:16px;
    border-radius:18px;
    font-weight:700;
    letter-spacing:1px;
    color:white;
    transition:0.4s;
    box-shadow:0 10px 30px rgba(0,255,255,0.5);
}

.btn-gradient:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 40px rgba(143,0,255,0.7);
}

/* Progress Bar */
.progress{
    height:30px;
    border-radius:25px;
    background: rgba(255,255,255,0.1);
    overflow:hidden;
}

.progress-bar{
    font-weight:bold;
    background: linear-gradient(90deg,#00f5ff,#8f00ff);
    transition:0.4s;
}

/* Info Text */
#liveSize, #dimensionBox, #finalSize{
    font-size:14px;
    padding:5px 0;
}

/* Smooth Fade Animation */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}