/* =====================================================================
   ESBPL - Responsive katmani (Faz 1: master page, header, menu, iskelet)
   Global.css'e dokunmadan, onun uzerine yazar.
   Masaustu (1051px ve uzeri) gorunum DEGISMEZ.
   ===================================================================== */

/* Hamburger buton masaustunde gizli */
.nav-toggle {
    display: none;
}

/* ---------------------------------------------------------------------
   Tablet ve kucuk laptop (1050px ve alti)
   --------------------------------------------------------------------- */
@media (max-width: 1050px) {
    .sitecontainer {
        width: 100%;
    }

    .container {
        width: 100%;
        margin-top: 0;
    }

    .rightSection {
        width: calc(100% - 260px);
    }

    .container img {
        max-width: 100%;
        height: auto;
    }
}

/* ---------------------------------------------------------------------
   Mobil (768px ve alti) + yatay tutulan telefonlar (ekran yuksekligi 500px alti)
   --------------------------------------------------------------------- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {

    .container {
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
    }

    /* --- Ust yesil serit (sosyal medya + giris) --- */
    .news {
        height: auto !important;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .newsTitle,
    .newsContent {
        display: none;
    }

    .news > a {
        display: inline-block;
        margin: 7px 6px 0 0;
    }

    .news > a img {
        height: 22px;
        width: auto;
    }

    .newsLogin {
        width: auto;
        margin-right: 0;
    }

    .profileHeader {
        height: auto;
    }

    .notification {
        width: auto;
        margin-top: 10px;
    }

    /* --- Logo + menu bandi --- */
    .header:not(.news) {
        height: auto;
        min-height: 60px;
        background-image: none;
    }

    .header .logo {
        position: static;
        float: left;
        width: auto;
        height: auto;
        margin: 13px 0 13px 15px;
    }

    .header .logo img {
        height: 34px;
        width: auto;
    }

    /* Hamburger buton */
    .nav-toggle {
        display: block;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 44px;
        height: 36px;
        padding: 0;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 4px;
        cursor: pointer;
    }

    .nav-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        margin: 5px auto;
        background: #ffffff;
    }

    /* Menu: varsayilan kapali, butonla acilir */
    .header .nav {
        display: none;
        float: none;
        clear: both;
        width: 100%;
        height: auto;
        margin: 0;
        background: #1f7411;
    }

    .header.nav-open .nav {
        display: block;
    }

    .header .nav ul li {
        display: block;
        float: none;
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .header .nav ul li a {
        float: none;
        color: #ffffff;
        font-size: 18px;
        line-height: 48px;
        padding: 0 20px;
    }

    /* Alt menuler: acilir panel yerine liste icinde */
    .header .nav ul li ul {
        position: static;
        width: 100%;
        background: #155a0b;
    }

    /* Alt menu ogeleri de alt alta (Global.css'teki float:left ezilir).
       Aksi halde alttaki menu basligi alt menunun ustune biner ve dokunmayi yutar. */
    .header .nav ul li ul li {
        float: none;
    }

    .header .nav ul li ul li a {
        float: none;
        width: auto;
        font-size: 16px;
        line-height: 44px;
        padding-left: 36px;
    }

    /* --- Sol / sag kolonlar alt alta --- */
    .leftSection,
    .rightSection {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    /* Kolonlar icindeki float kutulari sarar (kesmeden, kaydirma cubugu olmadan) */
    .leftSection,
    .rightSection {
        display: flow-root;
    }

    .leftSectionHeader,
    .leftSectionContent,
    .leftSectionContent2,
    .newsList {
        width: 100% !important; /* sayfalardaki inline px genisliklerini ezer */
        box-sizing: border-box;
    }

    .leftSectionContent ul li {
        width: 100%;
        box-sizing: border-box;
    }

    .leftSectionContent table {
        width: 100%;
    }

    /* --- Footer --- */
    .footer {
        height: auto;
    }

    .footerLeft {
        width: auto;
        margin: 15px 10px;
    }
}

/* =====================================================================
   Faz 2 - Ana sayfa (default.aspx) ve entry sayfasi (Entries.aspx)
   Sadece CSS; sayfa markup'ina ve sunucu kontrollerine dokunulmadi.
   ===================================================================== */

/* ---------------- Tablet (1050px ve alti) ---------------- */
@media (max-width: 1050px) {
    .section {
        width: 100%;
    }

    .searchBar {
        width: 100%;
    }

    .subject {
        width: auto;
        float: none;
        display: flow-root;
    }

    .subject h3,
    .subject span {
        width: auto;
    }

    /* Entry (yorum) kutulari */
    .userentry {
        width: auto;
        float: none;
        display: flow-root;
    }

    .userentry h3 {
        width: auto;
        float: none;
    }

    .userentry h3 b {
        margin-right: 0;
    }

    .userentry span {
        width: auto;
        float: none;
        display: block;
        overflow-wrap: anywhere;
        word-wrap: break-word;
    }

    .userentry span img {
        max-width: 100%;
        height: auto;
    }

    .userentry .entrypoints,
    .userentry .entrystatus {
        width: auto;
    }
}

/* ---------------- Mobil (768px ve alti) ---------------- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {

    /* Sayfalardaki inline sol kolon genisligi (260px) ve kutu bosluklari */
    .leftSection {
        width: 100% !important;
    }

    .leftSectionContent {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Skor satirlari: ev sahibi solda, skor ortada, deplasman sagda */
    .rows {
        width: 100%;
        box-sizing: border-box;
    }

    /* Icinde span olan satirlar esnek satir olur (skor, gol/asist listeleri).
       Icinde duz link olan satirlar (ornegin Onemli Linkler) etkilenmez. */
    .rows:has(> span) {
        display: flex;
        align-items: center;
    }

    .rows:has(> span) > span {
        float: none;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Takim / oyuncu adi kalan yeri doldurur (inline 217px vb. genislikleri ezer) */
    .rows .homeTeam,
    .rows .awayTeam {
        flex: 1 1 0;
    }

    .rows .awayTeam {
        text-align: right;
    }

    /* Skor ve sayi kutulari kuculmez */
    .rows .homeTeamPoint,
    .rows .awayTeamPoint,
    .rows .slash {
        flex: 0 0 auto;
    }

    /* Kisa puan durumu (ana sayfa: 4 sutun, lig sayfasi: 5 sutun) */
    #puanDurumu .puandurumuMainHeader,
    #puanDurumu .puandurumuMain {
        display: flex;
    }

    #puanDurumu .puan,
    #puanDurumu .oyun {
        flex: 0 0 12%;
        width: auto;
    }

    #puanDurumu .takim {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Arama cubugu: iOS'ta odaklaninca zoom yapmasin diye 16px */
    .txtBox {
        font-size: 16px;
    }

    /* Arama cubugu: kutu ve butonlar her telefonda tek satirda kalsin */
    .searchBar {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px;
        box-sizing: border-box;
    }

    .searchBar .txtBox {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important; /* inline 70% genisligi ezer */
        float: none;
    }

    .searchBar .search {
        flex: 0 0 auto;
        float: none;
        width: auto !important; /* inline 45px / 38px genisligi ezer */
        margin-left: 0;
        padding: 4px 10px;
    }

    /* Masaustundeki sira korunur: [kutu] [ARA] [GETIR] */
    #ContentPlaceHolder1_btnSearch {
        order: 2;
    }

    #ContentPlaceHolder1_btnGetContent {
        order: 3;
    }

    /* Entry kutulari */
    .userentry {
        padding: 11px 11px 20px 11px;
    }

    .userentry h3 b {
        float: none;
        display: block;
        margin: 4px 0 0 0;
    }

    .userentry span {
        margin-left: 34px;
    }

    /* Yorum yazma formu: inline 640px textarea */
    .userentry textarea {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 16px;
    }

    .commentbutton {
        display: inline-block;
        margin-bottom: 6px;
    }

    /* Sayfalama (Onceki / sayfa / Sonraki) */
    .pagerlistright {
        float: none;
        clear: both;
        text-align: center;
        margin: 10px 0;
    }

    .pagerlistright a {
        display: inline-block;
        padding: 6px 10px;
    }

    .pagerlistright select {
        font-size: 16px;
    }
}

/* =====================================================================
   Faz 3 - Lig sayfasi (League.aspx)
   ===================================================================== */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {

    /* Sezon / hafta secimi */
    #ContentPlaceHolder1_dropSezonSec,
    #ContentPlaceHolder1_dropHaftaSec {
        font-size: 16px;
        margin: 4px 0;
    }

    /* Tam puan tablosu (10 sutun): takim adi esnek, sayilar sabit */
    .ligStatus {
        display: flex;
        align-items: center;
    }

    .ligStatus .puan,
    .ligStatus .oyun {
        flex: 0 0 26px;
        width: auto;
    }

    .ligStatus .takim {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding-left: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Kadrolar: iki kolon kalir, satir yuksekligi icerige gore uzar */
    .teamsdetails .left ul li,
    .teamsdetails .right ul li {
        height: auto;
        min-height: 66px;
        padding-bottom: 4px;
    }
}

/* Mac detayi (lig sayfasi): tablet ve telefonda [logo] [skor] [logo] */
@media (max-width: 1050px) {
    /* Mac detayi basligi: [logo] [skor] [logo] */
    .macbasligi {
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 6px;
    }

    .macbasligi > a:first-child {
        order: 1;
    }

    .macbasligi .skor {
        order: 2;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .macbasligi > a:nth-of-type(2) {
        order: 3;
    }

    .macbasligi img.home,
    .macbasligi img.away {
        width: 80px;
        height: 80px;
    }

    .macbasligi .hafta {
        float: none;
        display: block;
    }

    /* Takim adlari ve skor */
    .takimveskor {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        float: none;
        clear: both;
        gap: 8px;
        margin: 12px 4px;
    }

    /* Ikinci satir: "Macin ozet videosu" ve "Mac basligi" linkleri ayri dursun */
    .takimveskor > div.home,
    .takimveskor > div.away {
        text-align: center;
    }

    .takimveskor .home,
    .takimveskor .away {
        flex: 1 1 0;
        width: auto;
        float: none;
    }

    .takimveskor .home,
    .takimveskor .home a,
    .takimveskor .away,
    .takimveskor .away a {
        font-size: 13px;
    }

    .takimveskor .home     { order: 1; }
    .takimveskor .homeskor { order: 2; }
    .takimveskor .hometire { order: 3; }
    .takimveskor .awayskor { order: 4; }
    .takimveskor .away     { order: 5; }

    .takimveskor .homeskor,
    .takimveskor .awayskor {
        float: none;
        font-size: 22px;
        margin: 0 4px;
    }

    .takimveskor .hometire {
        float: none;
        font-size: 18px;
        margin: 0;
    }
}

/* Mac detayi: telefonda logolar daha kucuk (tablet kuralindan sonra gelmeli) */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    .macbasligi img.home,
    .macbasligi img.away {
        width: 56px;
        height: 56px;
    }
}

/* =====================================================================
   Faz 3b - Diger public sayfalar
   Teams, Players, Cups, Playoff, Participation, Profile, Search, News,
   Takimlar. Sadece CSS; sayfa koduna dokunulmadi.
   ===================================================================== */

/* ---------------- Tablet + mobil (1050px ve alti) ---------------- */
@media (max-width: 1050px) {

    /* Oyuncu sayfasi: 650px'lik mac tablosu kutuya sigmazsa yatay kayar */
    .leftSectionContent:has(> .rows[style*="width: 650px"]) {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Playoff sayfasi (sayfanin kendi <style> blogunu ezmek icin .container ile) */
    .container .main-wrapper {
        width: auto;
        box-sizing: border-box;
        padding: 12px;
    }
}

/* ---------------- Mobil + yatay telefon ---------------- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {

    /* Sayfalardaki inline satir genislikleri (395px, 385px vb.) */
    .rows {
        width: 100% !important;
    }

    /* --- Takim sayfasi (Teams.aspx) --- */
    #ContentPlaceHolder1_teamLogo {
        display: block;
        width: 160px !important;
        height: 160px !important;
        margin: 10px auto;
    }

    .rows .teamplayername {
        flex: 1 1 0;
    }

    /* Sezon secimi basligin altina iner (Teams "Secili sezon bilgileri"
       ve Players "Lig maclari" basliklari) */
    .teamPageHeader {
        position: relative;
        height: auto;
        padding: 4px 10px 8px;
        box-sizing: border-box;
        text-align: center;
    }

    .leftSectionContent h3:has(> .absoluteSezon) {
        height: auto;
        padding-bottom: 8px;
    }

    .teamPageHeader .absoluteSezon,
    .leftSectionContent h3 > .absoluteSezon {
        position: static;
        display: block;
        height: auto;
        line-height: normal;
        margin-top: 2px;
    }

    .teamPageHeader .absoluteSezon select,
    .leftSectionContent h3 > .absoluteSezon select {
        width: 100%;
        max-width: 280px;
        padding: 4px;
    }

    .absoluteSezon select,
    #ContentPlaceHolder1_ddlSeason {
        font-size: 16px;
    }

    /* --- Oyuncu sayfasi (Players.aspx) --- */
    #ContentPlaceHolder1_playerImage {
        display: block;
        width: 160px !important;
        height: auto;
        margin: 10px auto;
    }

    /* Mac tablosu: kaydirma yerine iki satirli kart.
       1. satir: 7 istatistik, hemen ustteki yesil baslikla hizali
       2. satir: ev sahibi - skor - deplasman */
    .leftSectionContent:has(> .rows[style*="width: 650px"]) {
        overflow-x: visible;
    }

    .rows[style*="width: 650px"] {
        flex-wrap: wrap;
        height: auto;
        line-height: 30px;
        border-bottom: 1px solid #555;
    }

    .rows[style*="width: 650px"] > span[style*="width: 40px"] {
        order: 1;
        flex: 0 0 calc(100% / 7);
        width: auto !important;
        text-align: center;
    }

    .rows[style*="width: 650px"] > .homeTeam,
    .rows[style*="width: 650px"] > .awayTeam {
        order: 2;
        flex: 1 1 calc(50% - 30px);
        width: auto !important;
    }

    .rows[style*="width: 650px"] > .homeTeamPoint:not([style*="width: 40px"]),
    .rows[style*="width: 650px"] > .slash,
    .rows[style*="width: 650px"] > .awayTeamPoint {
        order: 2;
    }

    /* --- Kupa sayfasi (cups.aspx) --- */
    .rows2 {
        display: flex;
        align-items: center;
        height: auto;
        min-height: 30px;
    }

    .rows2 > div {
        float: none;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .rows2 .homeTeam,
    .rows2 .awayTeam {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rows2 .teamplayerposition {
        width: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ligStatus .puan:first-child {
        flex-basis: 34px;
        overflow: hidden;
    }

    /* --- Playoff sayfasi (playoff_standing2.aspx) --- */
    .container .group-flex-container {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 30px;
    }

    .container .results-section,
    .container .standings-section {
        width: 100%;
        flex: none;
    }

    .container .standings-section {
        overflow-x: auto;
    }

    /* --- Formlar: Participation.aspx ve Profile.aspx --- */
    .subject table,
    .subject tbody,
    .subject tr,
    .subject td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    .subject td {
        height: auto !important;
        padding-bottom: 4px !important;
    }

    .subject table input[type="text"],
    .subject table select,
    .subject table textarea {
        float: none;
        width: 100% !important;
        box-sizing: border-box;
        font-size: 16px;
        margin-bottom: 8px;
    }

    .subject table .commentbutton {
        display: inline-block;
        padding: 8px 16px;
    }

    /* --- Takimlar sayfasi: takim logolari ve gecmis sezon takim adlari --- */
    /* Gecmis sezon takim adlari: duzgun izgara (2 sutun), esit kutular.
       Sunucunun her 5 isimde bir ekledigi <br> ve &nbsp; bosluklari yok sayilir. */
    .container > div:has(> div.pagerlistcenter) {
        padding: 0 6px 10px;
    }

    .container > div > div.pagerlistcenter {
        display: contents;
        font-size: 0;
    }

    .container > div > div.pagerlistcenter br {
        display: none;
    }

    .container > div > div.pagerlistcenter a {
        display: inline-block;
        box-sizing: border-box;
        width: calc(50% - 8px);
        margin: 4px;
        padding: 10px 6px;
        font-size: 13px;
        text-align: center;
        vertical-align: top;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 4px;
    }

    .container > div > div[align="center"] a img {
        width: 96px;
        height: 96px;
        margin: 4px;
    }
}

/* Gecmis sezon takim adlari: genis telefon / yatay ekranda 3 sutun */
@media (min-width: 481px) and (max-width: 768px), (min-width: 481px) and (orientation: landscape) and (max-height: 500px) {
    .container > div > div.pagerlistcenter a {
        width: calc(33.333% - 8px);
    }
}

/* =====================================================================
   Faz 5 - Power BI sayfalari (pbi_*.aspx)
   Sayfalar artik ana sablonu (Esbpl.Master) kullaniyor.
   ===================================================================== */

/* Tum ekranlar: rapor kutusu genislige gore orantili buyur/kuculur
   (16:9 rapor + Power BI'in alttaki ~36px'lik gezinme cubugu) */
.pbi-section {
    background: #fff;
}

.pbi-title {
    width: 100%;
    margin-bottom: 0;
}

.pbi-frame-wrap {
    position: relative;
    clear: both;
    width: 100%;
    height: 0;
    padding-bottom: calc(56.25% + 36px);
}

.pbi-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Mobil rapor masaustunde gizli */
.pbi-mobile {
    display: none;
}

/* Telefon: mobil (dikey) rapor varsa o gosterilir, yoksa masaustu raporu kuculur */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    .pbi-section:has(.pbi-mobile) .pbi-desktop {
        display: none;
    }

    /* Yukseklik, Power BI mobil sayfasinin oranina gore (--pbi-ratio = sayfa yuksekligi / genisligi).
       Rapor sayfanin icinde tam boy gorunur, ic ice kaydirma olmaz. +36px alttaki Power BI cubugu icin. */
    .pbi-mobile {
        display: block;
        height: 0;
        padding-bottom: calc(var(--pbi-ratio, 150%) + 36px);
    }
}