/* ============================================================
   Duyurular v2 — temiz namespace (annv2-*). dist'ten SONRA yüklenir.
   Masaüstü: sol büyük spotlight + sağ alt alta kartlar.
   Mobil: magazin (üst hero + ikonlu yatay satırlar).
   ============================================================ */

/* ---- Düzen (eski markup container'larını ele geçir) ---- */
.announcements-editorial {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 40px !important;
    align-items: stretch !important;
    position: relative;
}
/* Sol-sag ayirici cizgi: gap'in TAM ORTASINDA, mor gradient (uclar solar) */
.announcements-editorial::after {
    content: ''; position: absolute; top: 6px; bottom: 6px; left: 50%;
    width: 2px; transform: translateX(-50%); pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(139,92,246,.65) 20%, rgba(167,139,250,.65) 80%, transparent);
}
.announcements-editorial.single-announcement {
    grid-template-columns: minmax(0, 620px) !important;
    justify-content: center;
}
.announcements-editorial.single-announcement::after { display: none; }
#announcementSpotlight { display: block; min-width: 0; }
#announcementsGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    grid-template-columns: none !important;
    padding-left: 0 !important;
}
#announcementsGrid::before { content: none !important; }
/* Alttaki kampanya kartlari: ust grid ile ayni hizada (gap ortasi cizgiyle ortali) */
.campaign-overview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 40px !important;
}

/* ---- Rozetler (emoji yok; ikon + etiket) ---- */
.annv2-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: .01em;
    padding: 4px 11px; border-radius: 999px; width: fit-content;
    border: 1px solid transparent;
}
.annv2-badge i { font-size: .72rem; }
.annv2-badge--beta     { color: #a3e635; background: rgba(132,204,22,.14); border-color: rgba(132,204,22,.30); }
.annv2-badge--launch   { color: #f9a8d4; background: rgba(236,72,153,.14); border-color: rgba(236,72,153,.30); }
.annv2-badge--update   { color: #93c5fd; background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.30); }
.annv2-badge--event    { color: #6ee7b7; background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.30); }
.annv2-badge--live     { color: #fca5a5; background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.32); }
.annv2-badge--giveaway { color: #fcd34d; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.30); }
.annv2-badge--info     { color: #c4b5fd; background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.30); }

/* ---- Spotlight (sol büyük) ---- */
.annv2-spotlight {
    display: flex; flex-direction: column; height: 100%;
    background: linear-gradient(180deg, rgba(139,92,246,.10), rgba(12,15,26,.96));
    border: 1px solid rgba(139,92,246,.28);
    border-radius: 20px; overflow: hidden; cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.annv2-spotlight:hover, .annv2-card:hover {
    border-color: rgba(139,92,246,.5);
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(139,92,246,.16);
}
.annv2-spotlight:focus-visible, .annv2-card:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.annv2-spot-media {
    width: 100%; aspect-ratio: 1024 / 500; height: auto;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.annv2-spot-body {
    flex: 1; display: flex; flex-direction: column; align-items: flex-start;
    gap: 11px; padding: 20px 22px;
}
.annv2-spot-title {
    margin: 0; color: #fff; font-weight: 800; line-height: 1.16;
    font-size: clamp(1.25rem, 1.6vw, 1.7rem); max-width: 18ch;
}
.annv2-spot-summary { margin: 0; color: var(--text-secondary, #9aa3b2); line-height: 1.6; max-width: 46ch; }
.annv2-cta-hint {
    margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
    color: #c4b5fd; font-weight: 700; font-size: .9rem;
}
.annv2-cta-hint i { transition: transform .2s ease; }
.annv2-spotlight:hover .annv2-cta-hint i { transform: translateX(4px); }

/* ---- Sağ kartlar (yatay: thumb + metin) — büyütülmüş, kolonu doldurur ---- */
.annv2-card {
    display: flex; gap: 16px; align-items: center;
    background: var(--bg-glass, rgba(15,15,25,.7));
    border: 1px solid var(--glass-border, rgba(255,255,255,.08));
    border-radius: 16px; padding: 16px 18px; cursor: pointer;
    flex: 0 0 auto; min-height: 116px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.annv2-card-thumb {
    width: 80px; height: 80px; border-radius: 14px; flex-shrink: 0;
    background-size: cover; background-position: center;
}
.annv2-media--icon {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: #a78bfa;
    background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.22);
}
.annv2-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.annv2-card-title {
    margin: 0; color: #fff; font-size: 1.08rem; font-weight: 700; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.annv2-card-desc {
    margin: 0; color: var(--text-secondary, #9aa3b2); font-size: .88rem; line-height: 1.55;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.annv2-card-date { color: #6b7280; font-size: .74rem; }
.annv2-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.annv2-chips span {
    font-size: .72rem; font-weight: 600; color: var(--text-secondary, #9aa3b2);
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    padding: 4px 10px; border-radius: 999px;
}

/* ============== MOBİL: Magazin ============== */
@media (max-width: 768px) {
    .announcements-editorial,
    .announcements-editorial.single-announcement {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .announcements-editorial::after { display: none !important; }
    .campaign-overview-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    /* Mobilde ayirici cizgi yok, kartlar dogal yukseklik */
    #announcementsGrid {
        border-left: none !important;
        padding-left: 0 !important;
        gap: 12px !important;
    }
    .annv2-card { flex: 0 0 auto !important; min-height: 0 !important; max-height: none !important; padding: 14px 16px; }
    .annv2-spot-body { padding: 16px 18px; gap: 9px; }
    .annv2-spot-title { font-size: 1.2rem; }
    .annv2-card-thumb { width: 56px; height: 56px; }
    .annv2-card-title { font-size: .98rem; -webkit-line-clamp: 2; }
}

/* ============== Detay Modal ============== */
.annv2-modal-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: annv2-fade .18s ease;
}
@keyframes annv2-fade { from { opacity: 0; } to { opacity: 1; } }
.annv2-modal {
    background: linear-gradient(135deg, rgba(26,26,46,.98), rgba(15,23,42,.98));
    border: 1px solid rgba(139,92,246,.3); border-radius: 18px;
    max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0,0,0,.55);
}
/* Geniss gorsel -> kapak banner (kirpmadan tam doldurur) */
.annv2-modal-cover {
    width: 100%; aspect-ratio: 1024 / 500;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Kare gorsel -> baslik yaninda kucuk logo */
.annv2-modal-head-main { display: flex; gap: 14px; align-items: center; min-width: 0; }
.annv2-modal-logo {
    width: 60px; height: 60px; border-radius: 14px; flex-shrink: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: rgba(139,92,246,.10); border: 1px solid rgba(139,92,246,.22);
}
.annv2-modal-head {
    padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.annv2-modal-head h2 { margin: 8px 0 4px; color: #fff; font-size: 1.3rem; line-height: 1.2; }
.annv2-modal-date { color: #6b7280; font-size: .78rem; }
.annv2-modal-x {
    background: transparent; border: 1px solid rgba(255,255,255,.15); color: #fff;
    border-radius: 9px; width: 34px; height: 34px; cursor: pointer; flex-shrink: 0;
}
.annv2-modal-x:hover { background: rgba(255,255,255,.08); }
.annv2-modal-body { padding: 18px 20px; }
.annv2-modal-desc { margin: 0 0 14px; color: rgba(255,255,255,.82); line-height: 1.7; }
.annv2-reqbox {
    background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.18);
    border-radius: 12px; padding: 14px 16px; margin: 14px 0;
}
.annv2-reqbox h4 { margin: 0 0 6px; color: #fff; font-size: .9rem; }
.annv2-reqbox h4:not(:first-child) { margin-top: 14px; }
.annv2-reqbox ul { margin: 0; padding-left: 18px; color: var(--text-secondary, #9aa3b2); line-height: 1.7; font-size: .86rem; }
.annv2-modal-actions { margin-top: 16px; }
.annv2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; text-align: center; padding: 12px 20px; border: none; cursor: pointer;
    border-radius: 11px; font-weight: 700; font-size: .95rem; text-decoration: none;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;
}
.annv2-btn:hover { filter: brightness(1.08); }
@media (max-width: 768px) {
    .annv2-modal-logo { width: 50px; height: 50px; }
    .annv2-modal-head h2 { font-size: 1.1rem; }
}