/* ==========================================================
   Korotsak Studio
   Base Layout v1
   ========================================================== */

:root{

    --primary:#3b82f6;

    --bg:#0f172a;

    --card:#1e293b;

    --border:#334155;

    --text:#f8fafc;

    --muted:#94a3b8;

    --success:#22c55e;

    --danger:#ef4444;

    --radius:14px;

    --shadow:0 10px 30px rgba(0,0,0,.18);

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

}

.container{

    max-width:1500px;

    margin:auto;

    padding:30px;

}

/* ==========================================================
   LOGIN
   ========================================================== */

.login-wrapper{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#1d4ed8,#172554);

}

.login-box{

    width:400px;

    background:#ffffff;

    padding:40px;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.login-box h1{

    color:#111827;

    text-align:center;

    margin-bottom:30px;

}

.login-box input{

    width:100%;

    padding:14px;

    margin-bottom:15px;

    border:1px solid #d1d5db;

    border-radius:10px;

    font-size:15px;

    outline:none;

    transition:.2s;

}

.login-box input:focus{

    border-color:var(--primary);

}

.login-box button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.25s;

}

.login-box button:hover{

    opacity:.92;

}

.error{

    margin-bottom:15px;

    color:var(--danger);

}

/* ==========================================================
   COMMON
   ========================================================== */

h1,
h2,
h3{

    font-weight:600;

}

hr{

    margin:30px 0;

    border:none;

    border-top:1px solid var(--border);

}

label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

}

input,
select{

    background:#111827;

    color:#ffffff;

    border:1px solid var(--border);

    border-radius:10px;

    padding:12px;

    font-size:15px;

}

input:focus,
select:focus{

    outline:none;

    border-color:var(--primary);

}

button{

    cursor:pointer;

    transition:.2s;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:10px;

    padding:12px 20px;

    font-weight:600;

}

.btn-primary:hover{

    opacity:.9;

}

.btn-secondary{

    background:#475569;

    color:#fff;

    border:none;

    border-radius:10px;

    padding:12px 20px;

    font-weight:600;

}

.btn-secondary:hover{

    opacity:.9;

}

.btn-danger{

    background:var(--danger);

    color:#fff;

    border:none;

    border-radius:10px;

    padding:12px 20px;

    font-weight:600;

}

.btn-danger:hover{

    opacity:.9;

}

.success{

    padding:14px;

    margin-bottom:20px;

    border-radius:10px;

    background:rgba(34,197,94,.15);

    color:#4ade80;

}

.container img{

    max-width:100%;

    height:auto;

}

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

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

    gap:20px;

    margin-top:25px;

}

.gallery-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:12px;

    overflow:hidden;

    transition:.25s;

    box-shadow:0 6px 20px rgba(0,0,0,.18);

}

.gallery-card:hover{

    transform:translateY(-4px);

    box-shadow:0 14px 28px rgba(0,0,0,.28);

}

.gallery-image{

    width:100%;

    aspect-ratio:16/10;

    background:#111827;

}

.gallery-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.gallery-body{

    padding:15px;

}

.gallery-title{

    font-weight:600;

    margin-bottom:6px;

    word-break:break-word;

}

.gallery-size{

    color:var(--muted);

    font-size:13px;

    margin-bottom:15px;

}

.gallery-actions{

    display:flex;

    gap:8px;

}

.gallery-actions button{

    flex:1;

    padding:8px;

    border:none;

    border-radius:8px;

    color:#fff;

    font-weight:600;

}

.gallery-preview{

    display:block;

    width:100%;

    height:220px;

    object-fit:cover;

    cursor:zoom-in;

    transition:transform .25s;

}

.gallery-preview:hover{

    transform:scale(1.03);

}

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

@media (max-width:768px){

    .container{

        padding:20px;

    }

    .gallery-grid{

        grid-template-columns:repeat(auto-fill,minmax(170px,1fr));

    }

}

@media (max-width:480px){

    .container{

        padding:15px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-actions{

        flex-direction:column;

    }

}

/*
|--------------------------------------------------------------------------
| Gallery Buttons
|--------------------------------------------------------------------------
*/

.gallery-actions{

    display:flex;

    justify-content:center;

    gap:10px;

}

.gallery-actions button{

    width:42px;

    height:42px;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:10px;

    cursor:pointer;

    color:#fff;

    transition:.2s;

}

.gallery-actions button svg{

    width:19px;

    height:19px;

    stroke:currentColor;

    pointer-events:none;

}

.btn-view{

    background:#2563eb;

}

.btn-view:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

.btn-rename{

    background:#f59e0b;

}

.btn-rename:hover{

    background:#d97706;

    transform:translateY(-2px);

}

.btn-delete{

    background:#dc2626;

}

.btn-delete:hover{

    background:#b91c1c;

    transform:translateY(-2px);

}

.gallery-image{

    position:relative;

    overflow:hidden;

}

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    background:rgba(15,23,42,.55);

    opacity:0;

    transition:.25s;

}

.gallery-image:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay button{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    cursor:pointer;

    transition:.2s;

    backdrop-filter:blur(5px);

}

.gallery-overlay svg{

    width:20px;

    height:20px;

}

.btn-view{

    background:#2563eb;

}

.btn-view:hover{

    background:#1d4ed8;

    transform:scale(1.08);

}

.btn-rename{

    background:#f59e0b;

}

.btn-rename:hover{

    background:#d97706;

    transform:scale(1.08);

}

.btn-delete{

    background:#dc2626;

}

.btn-delete:hover{

    background:#b91c1c;

    transform:scale(1.08);

}

.btn-web{

    background:#16a34a;

}

.btn-web:hover{

    background:#15803d;

    transform:scale(1.08);

}