/* =========================
   1. RADİAL DARK THEME
========================= */

:root {
    --accent: #00ff88;
    --special: #00ccff;
    --danger: #ff4655;

    --bg: #08090b;
    --surface: #111417;

    --glass: rgba(255,255,255,0.03);
    --border: rgba(255,255,255,0.07);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

/* =========================
   2. BODY + FOOTER FIX
========================= */

html,body{
height:100%;
}

body{

background-color:var(--bg);
background-image:radial-gradient(circle at 50% -20%, #1a1f25 0%, var(--bg) 80%);
color:#fff;

display:flex;
flex-direction:column;
min-height:100vh;

}

/* =========================
   3. HEADER
========================= */

.main-header{

height:70px;
background:rgba(8,9,11,0.8);
backdrop-filter:blur(20px);

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

display:flex;
align-items:center;

padding:0 5%;

position:sticky;
top:0;
z-index:1000;

}

.logo{

font-size:22px;
font-weight:900;
letter-spacing:2px;

color:var(--accent);

text-shadow:0 0 15px rgba(0,255,136,0.3);

}

/* =========================
   4. ANA YAPI
========================= */

.main-wrapper{

flex:1;

display:grid;
grid-template-columns:280px 1fr 320px;

gap:30px;

padding:30px 5%;
width:100%;

}

/* Kart yapısı */

aside,main{

background:var(--surface);

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

border-radius:20px;

padding:25px;

}

/* =========================
   5. AUTH (LOGIN / REGISTER)
========================= */

.auth-wrapper{

flex:1;

display:flex;
justify-content:center;
align-items:center;

padding:40px;

}

.glass-card{

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

padding:50px;

border-radius:30px;

width:100%;
max-width:450px;

position:relative;

box-shadow:0 30px 60px rgba(0,0,0,0.5);

}

/* neon çizgi */

.glass-card::after{

content:'';

position:absolute;

bottom:0;
left:10%;

width:80%;
height:2px;

background:linear-gradient(90deg,transparent,var(--accent),transparent);

}

/* input */

.auth-input-group input{

width:100%;

background:#08090b;

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

padding:16px;

border-radius:12px;

color:#fff;

margin-top:10px;

transition:0.3s;

}

.auth-input-group input:focus{

border-color:var(--accent);

box-shadow:0 0 20px rgba(0,255,136,0.1);

outline:none;

}

/* =========================
   6. İLAN KARTLARI
========================= */

.ilan-row{

background:#161a1e;

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

border-radius:15px;

padding:20px;

margin-bottom:15px;

display:flex;
align-items:center;
justify-content:space-between;

transition:0.35s;

}

.ilan-row:hover{

background:#1c2227;

border-color:var(--accent);

transform:translateX(8px);

}

.ilan-row.ozel:hover{

border-color:var(--special);

}

/* satın al */

.premium-btn{

background:var(--accent);

color:#000;

padding:15px;

border-radius:12px;

font-weight:800;

text-transform:uppercase;

border:none;

cursor:pointer;

transition:0.25s;

}

.premium-btn:hover{

box-shadow:0 0 30px rgba(0,255,136,0.4);

transform:scale(1.02);

}

/* =========================
   7. FOOTER (BUG FIX)
========================= */

.main-footer{

margin-top:auto;

padding:50px;

background:var(--surface);

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

text-align:center;

color:#555;

}

/* =========================
   8. MOBİL
========================= */

@media (max-width:1100px){

.main-wrapper{

grid-template-columns:1fr;

}

/* sağ sidebar gizle */

.right-sidebar{

display:none;

}

/* sol sidebar */

.left-sidebar{

position:fixed;

left:-100%;
top:0;

width:300px;
height:100vh;

background:var(--surface);

z-index:2000;

transition:0.5s;

}

.left-sidebar.active{

left:0;

}

}

/* =========================
   9. SCROLLBAR (BONUS)
========================= */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#0c0c0c;

}

::-webkit-scrollbar-thumb{

background:#222;
border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--accent);

}