/* ================= GLOBAL RESET ================= */
*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:'Inter',sans-serif;

/* BACKGROUND */
background:#020617;

background-image:
radial-gradient(circle at 50% 0%, rgba(255,255,255,0.03), transparent 60%),
radial-gradient(circle at 50% 100%, rgba(255,255,255,0.02), transparent 60%);

color:#e2e8f0;
display:flex;

/* 🔥 FIX ZOOM OUT */
overflow-x:hidden;
}

/* ================= SIDEBAR ================= */
.sidebar{
width:220px;

position:fixed;
top:10px;
left:10px;
bottom:10px;

padding:20px 14px;

background:#020617;

/* border */
border:1px solid rgba(255,255,255,0.04);

/* shadow */
box-shadow:
0 6px 20px rgba(0,0,0,0.45),
0 1px 0 rgba(255,255,255,0.03) inset;

border-radius:14px;

/* scroll */
overflow-y:auto;
overflow-x:hidden;
}

/* 🔥 SCROLLBAR MODERN */
.sidebar::-webkit-scrollbar{
width:6px;
}

.sidebar::-webkit-scrollbar-track{
background:transparent;
}

.sidebar::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#1e3a8a,#2563eb);
border-radius:10px;
}

.sidebar{
scrollbar-width:thin;
scrollbar-color:#2563eb transparent;
}

/* ================= SIDEBAR ITEM ================= */
.sidebar a{
display:flex;
align-items:center;
gap:10px;

padding:9px 10px;
margin-bottom:6px;

color:#94a3b8;
text-decoration:none;

border-radius:10px;
transition:.2s;

white-space:nowrap;
font-size:13px;
}

.sidebar a:hover{
background:rgba(255,255,255,0.04);
color:#fff;
}

.sidebar a.active{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:white;
box-shadow:0 2px 10px rgba(37,99,235,0.25);
}

/* ================= SECTION TITLE ================= */
.section-title{
font-size:11px;
color:#475569;
margin:16px 0 6px;
font-weight:600;
letter-spacing:1px;
}

/* ================= MAIN ================= */
.main{
margin-left:250px;
padding:30px;
width:calc(100% - 250px);

/* 🔥 FIX OVERFLOW */
min-width:0;
overflow-x:hidden;
}

/* ================= CARD ================= */
.card{
background:#020617;
border:1px solid rgba(255,255,255,0.05);

box-shadow:
0 4px 16px rgba(0,0,0,0.4);

padding:25px;
border-radius:16px;
margin-bottom:30px;

/* 🔥 BIAR GA TERLALU LEBAR */
max-width:1200px;
}

/* ================= INPUT ================= */
input,select,textarea{
width:100%;
padding:10px;

background:#020617;
border:1px solid rgba(255,255,255,0.05);

color:#e2e8f0;
border-radius:8px;
margin-bottom:10px;
}

/* ================= BUTTON ================= */
button{
padding:10px 20px;
border:none;
border-radius:8px;

background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:white;

cursor:pointer;
transition:.2s;
}

button:hover{
opacity:.9;
}

/* ================= EDITOR ================= */
#editor{
height:500px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.05);
}

/* ================= IFRAME ================= */
iframe{
width:100%;
height:600px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.05);
background:white;
}

/* ================= LOGO ================= */
.logo{
width:170px;
display:block;
margin:0 auto 14px;
filter:drop-shadow(0 0 6px rgba(59,130,246,0.25));
}

/* ================= TEXT ================= */
h2,h3,h4{
color:#e2e8f0;
}