/* ------------------------------------
  GLOBAL & BOX MODEL
------------------------------------ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 🏠 TÜM SAYFALAR İÇİN PRESTİJ MAVİ GRADYAN ARKA PLAN */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    /* 🌊 DERİN MAVİDEN BEYAZA AKIŞ: 
       Koyu Lacivert (#1e3a8a) %12'ye kadar net gelir, 
       %50'ye kadar yumuşak bir geçiş yapar, 
       Geri kalan %100'e kadar ferah beyaz kalır. */
    background: linear-gradient(180deg, 
        #1e3a8a 0%, 
        #1e3a8a 12%,    /* Derin mavi sadece en üstte kaliteyi hissettirir */
        #f0f7ff 50%,    /* Açık gökyüzü mavisiyle yumuşak geçiş */
        #ffffff 100%    /* İçerik alanı tertemiz ve ferah kalır */
    ) !important;
    
    background-attachment: fixed !important; 
    
    /* Yazı Tipi ve Renk Sabitleme */
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif !important;
    color: #0f172a !important; /* Metin rengini daha modern bir koyu griye çektik */
}
/* ------------------------------------
  CONTAINER
------------------------------------ */
.container {
    width: 80%; /* sabit */
    max-width: 1200px;
    margin: 20px auto; /* Üstten ve alttan biraz boşluk nefes aldırır */
    
    /* Arka plan: Çok hafif, temiz bir gri. İlan fotoğraflarını patlatır. */
    background: #f8fafc; 
    
    padding: 30px; /* İçerik daha ferah dursun diye artırdım */
    border-radius: 12px; /* Daha modern bir yuvarlaklık */
    
    /* Border: Belirgin bir mavi yerine, çok ince ve zarif bir gri */
    border: 1px solid #e0e6ed; 
    
    /* Alt kısma güven veren ince bir deniz mavisi vurgusu (opsiyonel) */
    border-bottom: 3px solid #0077b6; 
    
    /* Daha profesyonel, derinlik katan bir gölge */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* ------------------------------------
  HEADER / LOGO
------------------------------------ */
.logo {
    padding: 20px 0;
    font-size: 28px;
    font-weight: bold;
}

/* ------------------------------------
  BANNER
------------------------------------ */
.banner-img {
    width: 100%;
    display: block;
    border-radius: 6px;
    margin-bottom: 20px;
}

/* ------------------------------------
  MAIN LAYOUT (SIDEBAR + CONTENT)
------------------------------------ */
.main-layout {
    display: flex;
    gap: 20px;
    width: 100%;
}

/* Sidebar */
.sidebar {
    flex: 0 0 20%; /* container içi %20 */
    background: #f5f5f5;
    padding: 15px;
    border-radius: 6px;
}

/* Content */
.content {
    flex: 0 0 80%; /* container içi %80 */
    padding: 15px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

/* ------------------------------------
  İLAN KARTLARI (INDEX)
------------------------------------ */
.ilan-container {
    display: grid;
    grid-template-columns: repeat(4,1fr); /* 4 sütun */
    gap: 20px;
    margin-top: 20px;
}

.ilan-card {
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(0,0,0,0.1);
    padding:10px;
    transition: 0.2s;
    text-align: center;
}

.ilan-card:hover {
    transform: translateY(-4px);
}

.ilan-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
}

.ilan-card h3 {
    font-size: 15px;
    margin: 10px 0 5px 0;
}

.fiyat {
    color:#1a8f3c;
    font-weight:bold;
    font-size:18px;
}

.ilan-card p {
    padding: 5px 0;
}

/* ------------------------------------
  İLAN DETAY (CONTENT)
------------------------------------ */
.ilan-detay-layout {
    display: flex;
    gap: 20px;
}

.ilan-gorsel {
    flex: 0 0 70%; /* büyük resim */
}

.ilan-bilgileri {
    flex: 0 0 30%; /* sağ info */
    padding: 10px;
}

/* Küçük resimler alt büyük resim */
.kucuk-resimler {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.kucuk-resimler img {
    width: calc(20% - 8px); /* 5 küçük resim sığsın */
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;
    }

.kucuk-resimler img:hover {
    transform: translateY(-2px);
}

/* Admin düğmeleri */
.admin-buttons a {
    display: inline-block;
    margin-right: 10px;
    text-decoration: none;
    color: #fff;
    background: #1a8f3c;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
}
.vitrin-container{margin:20px 0;}
.vitrin-list{display:flex;gap:15px;flex-wrap:wrap;}
.vitrin-card{width:220px;background:#ffffff;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.1);overflow:hidden;}
.vitrin-card img{width:100%;height:140px;object-fit:cover;}
.vitrin-card h3{margin:5px 10px;font-size:16px;}
.vitrin-card p{margin:0 10px 10px 10px;font-size:14px;color:#2c7be5;font-weight:bold;}
/* ------------------------------------
  FOOTER
------------------------------------ */
footer {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    background:#f5f5f5;
    border-radius:6px;
}

/* ------------------------------------
  RESPONSIVE
------------------------------------ */
@media(max-width:1000px) {
    .ilan-container {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {
    .main-layout {
        flex-direction: column;
    }

    .sidebar, .content {
        flex: 0 0 100%;
    }

    .kucuk-resimler {
        flex-wrap: wrap;
    }

    .logo {
        font-size:24px;
    }
}

@media(max-width:600px) {
    .ilan-container {
        grid-template-columns: 1fr;
    }

    .logo {
        font-size:20px;
    }
}