/* HASINDER - Reklam Kutusu Stilleri (Siteden Bagimsiz) */
.reklam {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: opacity 0.2s, transform 0.2s;
    background: #f8fafc;
    max-width: 100%;
    margin: 0 auto;
    line-height: 1.4;
}
.reklam:hover { transform: translateY(-1px); }
.reklam img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== BOYUTLAR ===== */
.reklam-full      { width: 100%; max-width: 1280px; height: auto; aspect-ratio: 16/5; }
.reklam-buyuk     { width: 100%; max-width: 970px; height: auto; aspect-ratio: 970/250; }
.reklam-orta      { width: 100%; max-width: 728px; height: auto; aspect-ratio: 728/90; }
.reklam-kucuk     { width: 100%; max-width: 300px; height: auto; aspect-ratio: 300/250; }
.reklam-728x90    { width: 100%; max-width: 728px; height: 90px; }
.reklam-300x250   { width: 300px; max-width: 100%; height: 250px; }
.reklam-160x600   { width: 160px; max-width: 100%; height: 600px; }
.reklam-970x250   { width: 100%; max-width: 970px; height: 250px; }

/* ===== CERCEVE STILLERI ===== */
.reklam-cerceve {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.reklam-temiz { border: none; box-shadow: none; background: transparent; }
.reklam-yuvarlak {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    overflow: hidden;
}
.reklam-banner {
    border-left: 4px solid #D4AF37;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    background: linear-gradient(90deg, #fafbfc 0%, #f8fafc 100%);
}
.reklam-kutu {
    border: 1px solid #e2e8f0;
    border-radius: 0;
    box-shadow: none;
    background: #ffffff;
}

/* ===== METIN REKLAM ===== */
.reklam-baslik {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    color: #1e293b;
}

/* ===== KAPATMA BUTONU ===== */
.reklam-kapat {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 22px;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
    padding: 0;
}
.reklam:hover .reklam-kapat { opacity: 0.85; }
.reklam-kapat:hover { background: #000; opacity: 1 !important; }

/* ===== KONTEYNER (Header altı / index) ===== */
.reklam-bolum {
    max-width: 1280px;
    margin: 30px auto 10px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
.reklam-slot {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .reklam-160x600, .reklam-300x250 { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16/3; }
    .reklam-728x90, .reklam-970x250  { height: auto; aspect-ratio: 16/3; }
    .reklam-full                      { aspect-ratio: 16/3; }
    .reklam-kapat                     { opacity: 0.85; }
    /* Mobil: tam genişlik (tam ekran / full-bleed) */
    .reklam-bolum { margin: 20px 0 10px; padding: 0; gap: 14px; }
    .reklam-bolum .reklam { width: 100%; max-width: 100%; }
}

/* ===== FADE-IN ANIMASYON ===== */
@keyframes reklamFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reklam { animation: reklamFadeIn 0.3s ease-out; }

/* ===== SPONSORED ETIKETI ===== */
.reklam-sponsor {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(255,255,255,0.9);
    color: #94a3b8;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 4;
    pointer-events: none;
}