/*
 * Akış Sayfası Stilleri — metaspor tema
 * Tarih seçici, filtre kartları, canlı akış bileşenleri
 * Hem parent (tek-site) hem child (çok-site) temada kullanılır.
 */

/* ── Tarih Seçici ─────────────────────────────── */
.mac-tarih-secici {
    margin-bottom: 10px;
    background: var(--color2);
    border-radius: 10px;
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}
.tarih-sec {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

/* ── Takvim Butonu & Paneli ───────────────────── */
.akis-takvim-btn-wrap {
    position: relative;
    flex-shrink: 0;
}
.akis-takvim-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #ccc;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    outline: none;
}
.akis-takvim-btn:hover,
.akis-takvim-btn.acik { background: var(--color1, #9b0000); border-color: var(--color1, #9b0000); color: #fff; }

.akis-takvim-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 9999;
    width: 276px;
    background: #1a2035;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
.akis-takvim-panel.acik { display: block; }

/* Nav */
.akis-takvim-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 6px;
}
.akis-takvim-ay-yil {
    font-size: 14px;
    font-weight: 700;
    color: #eee;
    flex: 1;
    text-align: center;
    white-space: nowrap;
}
.akis-takvim-onceki,
.akis-takvim-sonraki {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.07);
    border: none;
    border-radius: 7px;
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    outline: none;
}
.akis-takvim-onceki:hover,
.akis-takvim-sonraki:hover { background: var(--color1, #9b0000); color: #fff; }

/* Hafta başlıkları */
.akis-takvim-haftabasliklari {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}
.akis-takvim-haftabasliklari span {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #666;
    padding: 3px 0;
}

/* Grid */
.akis-takvim-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.akis-takvim-gun {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 7px;
    padding: 5px 2px 4px;
    cursor: pointer;
    min-height: 34px;
    transition: background 0.12s, color 0.12s;
}
.akis-takvim-gun.bos {
    cursor: default;
    pointer-events: none;
}
.akis-takvim-gun:not(.bos):hover {
    background: rgba(255,255,255,0.1);
}
.akis-takvim-gun-no {
    font-size: 12px;
    font-weight: 600;
    color: #ccc;
    line-height: 1;
}
.akis-takvim-gun:not(.bos):hover .akis-takvim-gun-no { color: #fff; }

/* Bugün */
.akis-takvim-gun.bugun .akis-takvim-gun-no {
    color: var(--color1, #9b0000);
    font-weight: 800;
}
.akis-takvim-gun.bugun {
    background: rgba(155,0,0,0.12);
    border: 1px solid rgba(155,0,0,0.3);
}

/* Seçili */
.akis-takvim-gun.secili {
    background: var(--color1, #9b0000) !important;
    border: none !important;
}
.akis-takvim-gun.secili .akis-takvim-gun-no { color: #fff !important; }
.akis-takvim-gun.secili .akis-takvim-dot { background: rgba(255,255,255,0.6); }

/* Maç noktası */
.akis-takvim-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4caf50;
    flex-shrink: 0;
}

/* Yükleniyor */
.akis-takvim-yukleniyor {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 18px;
}
.tarih-swiper {
    width: 100%;
    padding: 10px 0;
}
.tarih-swiper .swiper-slide {
    flex-shrink: 0;
    width: 60px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-right: 8px;
    text-align: center;
    cursor: pointer;
}
.tarih-swiper .swiper-slide.active {
    background: var(--color1);
    color: #fff;
}
.mac-say {
    padding: 3px 5px;
    background: #555b6e;
    border-radius: 7px;
    font-size: 12px;
    margin-top: 5px;
}

/* ── Canlı Animasyon ──────────────────────────── */
.canli-anim {
    color: rgb(0,225,0);
    text-shadow: 0 0 0 rgba(0,155,0,0.2);
    animation: breathColor 3.5s ease-in-out infinite alternate;
}
@keyframes breathColor {
    0%   { color: rgb(0,225,0);  text-shadow: 0 0 0 rgba(0,155,0,0.25); }
    50%  { color: #ffffff;       text-shadow: 0 0 10px rgba(255,255,255,0.5); }
    100% { color: rgb(0,225,0);  text-shadow: 0 0 0 rgba(0,155,0,0.25); }
}
@media (prefers-reduced-motion: reduce) {
    .canli-anim { animation: none; }
}

/* ── Mobil – Tarih Seçici ─────────────────────── */
@media (max-width: 991px) {
    .mac-tarih-secici { flex-direction: row; flex-wrap: nowrap; padding: 10px 12px; gap: 10px; align-items: center; }
    .tarih-sec { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
    .akis-takvim-panel {
        width: calc(100vw - 32px);
        left: 0;
    }
}

/* ═══════════════════════════════════════════════════
   AKIŞ SAYFASI — page-akis.php
   ═══════════════════════════════════════════════════ */

.akis-sayfa { padding-top: 10px; }
.akis-yukleniyor { text-align: center; padding: 40px; color: #aaa; font-size: 15px; }
.akis-bos { text-align: center; padding: 30px 20px; color: #888; font-size: 13px; font-style: italic; }

/* ── Geri Sayım Barı ──────────────────────────── */
#akis-geri-sayim-wrap {
    position: relative;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    margin-bottom: 6px;
    overflow: hidden;
}
#akis-geri-sayim-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--color1, #9b0000);
    border-radius: 2px;
    transition: width 1s linear;
    width: 100%;
}

/* ── Filtre Kartları ──────────────────────────── */
#mac-filtre-alani {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 0 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#mac-filtre-alani::-webkit-scrollbar { display: none; }

.akis-filtre-tumu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--color2, #13192e);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0 16px;
    min-height: 68px;
    min-width: 56px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #aaa;
    transition: border-color 0.15s, color 0.15s;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.akis-filtre-tumu:hover { border-color: rgba(255,255,255,0.2); color: #fff; }
.akis-filtre-tumu.aktif { border-color: rgba(255,255,255,0.35); color: #fff; background: rgba(255,255,255,0.07); }

.akis-filtre-tumu-say {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    display: block;
}
.akis-filtre-tumu.aktif .akis-filtre-tumu-say { color: #ccc; background: rgba(255,255,255,0.15); }

.akis-mac-kart {
    background: var(--color2, #13192e);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden;
    user-select: none;
    flex-shrink: 0;
}
.akis-mac-kart:hover { border-color: rgba(255,255,255,0.18); }
.akis-mac-kart.aktif { border-color: var(--color1, #9b0000); background: rgba(155,0,0,0.12); }

.akis-kart-ic {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    gap: 8px;
}
.akis-kart-takim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 52px;
    text-align: center;
    flex-shrink: 0;
}
.akis-kart-takim img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
}
.akis-kart-takim-logo-yok {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: block;
    flex-shrink: 0;
}
.akis-kart-takim-ad {
    font-size: 10px;
    font-weight: 600;
    color: #ddd;
    line-height: 12px;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.akis-kart-orta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 48px;
    flex-shrink: 0;
}
.akis-kart-durum {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.07);
    color: #999;
    line-height: 14px;
    white-space: nowrap;
}
.akis-kart-durum.canli { background: #d00e00; color: #fff; }
.akis-kart-durum.ms    { background: transparent; color: #777; font-weight: 600; letter-spacing: 0.5px; }
.akis-kart-skor {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.akis-kart-skor .nokta { font-size: 16px; color: #666; font-weight: 400; }

/* ── Akış Satır Layout ────────────────────────── */
/* [saat 44px] [dk 28px] [icerik 1fr] [link 42px] */
#akis-alani { margin-top: 0; display: flex; flex-direction: column; gap: 5px; }

.akis-satir {
    display: grid;
    grid-template-columns: 44px 28px 1fr 42px;
    align-items: center;
    background: var(--bg2, #12122a);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 7px 8px;
    gap: 0 5px;
    min-height: 54px;
    border-radius: 10px;
}
.akis-satir:hover     { background: var(--color1); }
.akis-satir.tip-durum { opacity: 0.8; }
.akis-satir.gizli     { display: none; }

.akis-saat-gost {
    font-size: 12px;
    font-weight: 700;
    color: #ccc;
    text-align: center;
    line-height: 14px;
}
.akis-olay-dk {
    font-size: 11px;
    color: #bbb;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    padding: 2px 3px;
    text-align: center;
    line-height: 14px;
    min-width: 24px;
    font-weight: 600;
}
.akis-olay-dk:empty { background: transparent; }

.akis-icerik {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.akis-lig-satir {
    display: flex;
    align-items: center;
    gap: 5px;
}
.akis-lig-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.akis-lig-logo-renk {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.akis-lig-adi {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.akis-mac-durum-badge {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.07);
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}
.akis-mac-durum-badge.canli { background: #d00e00; color: #fff; }
.akis-mac-durum-badge.ms    { color: #666; background: transparent; }

/* Takımlar + skor yan yana */
.akis-takimlar { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.akis-takim-satir { display: flex; align-items: center; gap: 6px; min-width: 0; }
.akis-takim {
    font-size: 13px;
    font-weight: 600;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    flex: 1;
    min-width: 0;
}
.akis-takim-skor {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    min-width: 16px;
    text-align: right;
    flex-shrink: 0;
    line-height: 16px;
}
.akis-takim-skor.bos { color: #444; font-size: 12px; }

.akis-olay-satir {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.akis-olay-ikon   { font-size: 12px; line-height: 1; }
.akis-olay-ad     { font-size: 12px; color: #bbb; }
.akis-olay-oyuncu { font-size: 12px; color: #eee; font-weight: 600; font-style: italic; }
.akis-olay-takim  { font-size: 11px; color: #888; }

.akis-link { display: flex; align-items: center; justify-content: flex-end; }
.akis-detay-link {
    color: #efefef;
    font-size: 16px;
    text-decoration: none;
    padding: 8px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
}
.akis-detay-link:hover { color: #ff3a3a; }

.akis-video-btn {
    color: var(--color1, #9b0000);
    font-size: 14px;
    line-height: 14px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    text-decoration: none;
    margin-left: 3px;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.akis-video-btn:hover { opacity: 0.8; color: var(--color1, #9b0000); }

#akis-alani-bos-kart { padding: 14px 0 4px; }
#akis-alani-bos-kart .akis-bos-baslik {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    padding-left: 2px;
}

/* ── Mobil ────────────────────────────────────── */
@media (max-width: 480px) {
    .akis-satir { grid-template-columns: 38px 26px 1fr 40px; padding: 6px 5px; }
    .akis-saat-gost { font-size: 11px; }
    .akis-takim { font-size: 12px; }
    .akis-takim-skor { font-size: 13px; }
    .akis-lig-adi { max-width: 120px; }
    .akis-kart-takim { width: 44px; }
    .akis-kart-takim img { width: 28px; height: 28px; }
    .akis-kart-takim-logo-yok { width: 28px; height: 28px; }
    .akis-kart-takim-ad { font-size: 9px; max-width: 44px; }
    .akis-kart-skor { font-size: 17px; }
    .akis-kart-ic { padding: 6px 7px; gap: 5px; }
    .akis-filtre-tumu { min-height: 58px; min-width: 48px; padding: 0 12px; }
}

/* ── Akış Galerisi ────────────────────────────── */
.mac-galerisi { margin-bottom: 0; }
.akis-galeri-blok.gizli { display: none; }
