/* İlan Açıklaması Gelişmiş Tasarım */
.desc-box {
    background: linear-gradient(145deg, #1a1f25 0%, #161b21 100%);
    border-left: 4px solid var(--primary); /* Sol tarafa kırmızı bir hat */
    position: relative;
    overflow: hidden;
}

.desc-box::after {
    content: '\f132'; /* Shield icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 120px;
    color: rgba(255, 255, 255, 0.02);
    transform: rotate(-15deg);
}

.desc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.desc-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.desc-content {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    color: #d1d1d1;
    font-size: 15px;
    line-height: 1.8;
}

/* Açıklama içindeki liste öğelerini otomatik güzelleştirir */
.desc-content br + - { display: block; margin-top: 10px; } 

.safety-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 255, 136, 0.1);
    color: var(--secondary);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}


/* =========================
   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);

}