/* Scrollbar */
::-webkit-scrollbar-track {
    -webkit-box-shadow: unset;
    background-color: transparent;
}

::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}

.macListe::-webkit-scrollbar,
.macListeWrapper::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-thumb {
    background-color: #555;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}

/* General Styles */
* {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-size: 12px;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #111;
    color: #eee;
}

section.mainContainer {
    position: relative;
    width: 1100px;
    min-height: 1446px;
    background-color: #222;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 0px 25px;
    box-sizing: border-box;
}

header {
    width: 1050px;
    height: auto;
}

.topDuyuru {
    position: relative;
    width: 100%;
    height: 40px;
    background-color: #333;
    font-size: 12px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topDuyuru .close {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 10px;
    top: 8px;
    cursor: pointer;
}

.topNav {
    position: relative;
    width: 100%;
    height: 71px;
    padding: 0px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #222;
    border-radius: 10px;
}

.topNav .topLogo {
    position: relative;
    width: 49px;
    height: 49px;
}

.topNav .topLogo img {
    position: relative;
    width: 100%;
    height: 100%;
}

.topNav ul.menu {
    display: flex;
    align-items: center;
    list-style: none;
    height: 100%;
    color: #ccc;
    font-weight: 600;
}

.topNav ul.menu a {
    padding: 10px;
    border-radius: 10px;
}

.topNav ul.menu a:hover {
    background-color: #444;
    color: white !important;
}

#homeButton {
    display: inline-flex;
    align-items: center;
}

#homeButton svg {
    fill: #ccc;
}

#homeButton:hover svg {
    fill: white;
}

.buttons .btn {
    position: relative;
    padding: 10px;
    padding-left: 24px;
    border-radius: 10px;
    font-weight: 500;
}

.buttons .btn img {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
}

.buttons .btn.green {
    background-color: #444;
    color: white;
}

.topNav .buttons.mobile {
    display: none;
}

.topReklam {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0px 0px;
}

#ornekReklam1 {
    width: 1000px;
    border-radius: 10px;
}

#ornekReklam1-2 {
    width: 100%;
    height: 0px;
    border-radius: 10px;
}

section.yayinAndListe {
    width: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: row;
}

section.yayinAndListe .yayin {
    width: 730px;
}

section.yayinAndListe .yayin iframe#customIframe,
section.yayinAndListe .yayin #playerForApi {
    width: 100%;
    height: 450px;
}

section.yayinAndListe .kontrolPanel {
    width: 300px;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.kontrolPanel .nav {
    position: relative;
    height: auto;
    display: flex;
}

.nav .btn-changePanel {
    padding: 8px 14px;
    border-radius: 7px;
    border: 1px solid #444;
    font-weight: 600;
    margin-left: 4px;
    cursor: pointer;
}

.nav .btn-changePanel:first-child {
    margin-left: unset;
}

.nav .btn-changePanel:hover {
    border: 1px solid #666;
}

.nav .btn-changePanel.aktif {
    color: white;
    background-color: #444;
}

.kontrolPanel .tab {
    width: 100%;
    height: 475px;
    padding: 0px 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-top: 6px;
    border-radius: 6px;
}

.kontrolPanel .tab .subNav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    position: relative;
    padding: 2px 0px;
}

.changeSportButton {
    position: relative;
    padding: 8px 9px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
    color: #ccc;
}

.changeSportButton:hover {
    color: white;
}

.changeSportButton:hover svg {
    fill: white;
}

.changeSportButton span.type {
    display: none;
}

.changeSportButton svg {
    position: relative;
    width: 18px;
    height: 18px;
    fill: #ccc;
}

.changeSportButton.aktif span.type {
    display: inline-block;
    padding-left: 10px;
}

.changeSportButton.aktif svg {
    fill: #666;
}

.changeSportButton.aktif.yesil svg {
    fill: #666;
}

.changeSportButton.aktif.mavi svg {
    fill: #666;
}

.changeSportButton.aktif svg {
    fill: #666;
}

.changeSportButton.aktif {
    background-color: #444;
    color: white;
}

.kontrolPanel .arama {
    width: 100%;
    position: relative;
    height: 32px;
    margin-top: 5px;
}

.kontrolPanel input {
    width: 100%;
    height: 100%;
    background-color: #333;
    border-radius: 6px;
    border: none;
    outline: unset;
    padding: 5px 8px;
    box-sizing: border-box;
    color: #eee;
}

.kontrolPanel .macListeWrapper {
    flex: 1;
    position: relative;
    height: 360px;
    margin-top: 8px;
    overflow-y: scroll;
    scrollbar-width: none;
}

.macListeWrapper .macListe {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
}

.macListeWrapper .macListe .mac {
    width: 100%;
    min-height: 32px;
    height: fit-content;
    margin-top: 8px;
    background-color: #333;
    border-radius: 6px;
    padding: 5px 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.macListeWrapper .macListe .mac:first-child {
    margin-top: unset;
}

.macListeWrapper .macListe .mac:last-child {
    margin-bottom: 8px;
}

.macListeWrapper .macListe .mac:hover {
    background-color: #555;
}

.macListeWrapper .macListe .mac.aktif:hover {
    background-color: #666;
}

.macListe .mac .saat {
    color: #ccc;
    font-weight: 600;
}

.macListe .mac .takimlar {
    color: #eee;
    font-weight: 600;
    text-align: center;
    padding-left: 6px;
}

.macListe .mac .lig {
    color: #ccc;
    font-size: 10px;
}

.macListe .mac.aktif {
    background-color: #444;
}

.macListe .mac.aktif .takimlar {
    color: white;
}

.macListe .mac.aktif .saat,
.macListe .mac.aktif .lig {
    color: white;
}

section.otherContent {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 0px;
}

.otherContent .content {
    width: 730px;
    height: fit-content;
}

.otherContent .sidebar {
    width: 300px;
    margin-left: 15px;
    height: 400px;
}

        .contentReklam {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        #ornekReklam2 {
            width: 100%;
            height: 20%;
            border-radius: 10px;
        }

        .contentBox {
            width: 100%;
            padding: 20px;
            background-color: #161616;
            margin: 20px 0px;
            border-radius: 10px;
            box-sizing: border-box;
        }

        h2 {
            font-size: 14px;
            color: #65a844;
            margin: 10px 0px;
        }

        p {
            margin: 10px 0px;
            color: white;
        }

        .sidebarReklam {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        #ornekReklam3 {
            width: 100%;
            border-radius: 10px;
        }

        footer {
            position: relative;
            bottom: 0;
            width: 100%;
            background-color: dark;
            height: 106px;
            width: 1100px;
            margin: auto;
            padding: 20px 25px;
            box-sizing: border-box;
        }

        footer p {
            margin: 10;
            font-weight: 500;
            color: #fff;
        }

        footer .foot {
            position: absolute;
            bottom: 10px;
            width: 95%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        footer .foot span.socialWrapper {
            display: flex;
            align-items: center;
        }

        footer .foot a.social img {
            padding: 5px;
            width: 22px;
        }

        a.linkedBlue {
            color: #66a843;
            font-weight: 600
        }

        #openMobileMenu svg {
            fill: black;
        }

        .isiklarToggle.light {
            display: none;
        }

        #openMobileMenu.aktif svg {
            fill: #66a843;
        }

        .onlyMobile {
            display: none;
        }

        #playerForApi {
            width: 100%;
            height: 100%;
        }

        .videoReklam {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: black;
        }

        #reklamiGec {
            position: absolute;
            right: 10px;
            bottom: 60px;
            padding: 20px 30px;
            background-color: #66a843;
            z-index: 9999999999999999;
            border-radius: 10px;
            color: white;
            cursor: pointer;
        }

        /*dark başla*/
        body.dark {
            background-color: #333;
        }

        body.dark section.mainContainer {
            background-color: #161616;
        }

        body.dark .topNav {
            background-color: #161616;
        }

        body.dark .buttons .btn {
            color: white;
        }

        body.dark .kontrolPanel .tab {
            background-color: #161616;
        }

        body.dark .nav .btn-changePanel {
            color: white;
        }

        body.dark .nav .btn-changePanel.aktif {
            color: white;
            border-color: #66a843;
        }

        body.dark .changeSportButton:hover {
            color: #66a843;
        }

        body.dark .changeSportButton:hover svg {
            fill: #66a843;
        }

        body.dark .changeSportButton.aktif {
            color: white;
            background-color: #161616;
        }

        body.dark .kontrolPanel input {
            background-color: #333;
            color: white;
        }

        body.dark .macListeWrapper .macListe .mac {
            background-color: #161616;
        }

        body.dark .macListeWrapper .macListe .mac.aktif {
            background-color: #30E58B;
        }

        body.dark .macListeWrapper .macListe .mac .takimlar {
            color: white;
        }

        body.dark .macListeWrapper .macListe .mac:hover {
            background-color: #ff5e004f;
        }

        body.dark .macListeWrapper .macListe .mac.aktif:hover {
            background-color: #FF5C00;
        }

        body.dark .contentBox {
            background-color: #161616;
            margin-bottom: 5%;
        }

        body.dark p {
            color: white;
        }

        body.dark footer {
            background-color: #161616;
            color: dark;
        }

        body.dark #isiklarToggle {
            background-color: rgba(33, 149, 85, 0.5);
        }

        #isiklarToggle {
            cursor: pointer;
        }

        /*Responsive basla*/
        @media only screen and (max-width: 1099px) {
            section.mainContainer {
                width: 100%;
            }

            header {
                width: 100%;
            }

            section.yayinAndListe {
                flex-direction: column;
            }

            section.yayinAndListe .yayin {
                width: 100%;
            }

            section.yayinAndListe .kontrolPanel {
                width: 100%;
                padding-left: 0px;
            }

            .kontrolPanel .nav {
                margin: 20px 0px;
            }

            .nav .btn-changePanel {
                flex: 1;
                text-align: center;
            }

            section.otherContent {
                flex-direction: column;
            }

            .otherContent .sidebar {
                width: 100%;
                height: fit-content;
                padding-bottom: 20px
            }

            .otherContent .content {
                width: 100%;
            }

            .otherContent .sidebar {
                margin-left: 0;
            }

            footer {
                width: 100%;
            }

            .yayin {
                position: relative;
                width: 100%;
                height: 450px;
            }

            .yayin iframe {
                position: relative;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            footer .foot {
                width: unset;
                height: fit-content;
            }
        }

        /*Mobile*/
        @media only screen and (max-width: 850px) {
            header {
                height: auto;
            }

            .topDuyuru {
                height: auto;
                box-sizing: border-box;
                padding: 10px 30px;
            }

            .topDuyuru .close {
                right: 5px;
                top: calc(50% - 12px);
            }

            section.mainContainer {
                padding: 0;
            }

            .topNav {
                border-radius: 0px;
                padding: 0px 8px;
            }

            .topNav ul.menu {
                display: none;
                flex-direction: column;
                height: auto;
                width: 100%;
                background-color: white;
                position: absolute;
                top: 100%;
                left: 0px;
                z-index: 99;
                border-radius: 0px;
            }

            .topNav ul.menu li {
                width: 100%;
                line-height: 40px;
                text-align: center;
                border-top: 1px solid rgba(0, 0, 0, 0.186);
                color: black;
            }

            .topNav ul.menu li#homeButton {
                display: none;
            }

            .topNav .buttons.desktop {
                display: none;
            }

            .topNav .buttons.mobile {
                display: inline-flex;
                align-items: center;
            }

            .topNav ul.menu li a {
                position: relative;
                width: 100%;
                display: inline-block;
                box-sizing: border-box;
                padding: 0;
            }

            .topNav ul.menu a.aktif {
                color: #66a843 !important;
                background-color: unset;
            }

            #openMobileMenu svg {
                fill: #ccc;
            }

            body.dark .isiklarToggle svg {
                fill: white;
            }

            body.dark .isiklarToggle.light {
                display: inline-block;
            }

            body.dark .isiklarToggle.light svg {
                fill: #30E58B;
            }

            body.dark .isiklarToggle.moon {
                display: none;
            }

            body.dark #openMobileMenu svg {
                fill: white;
            }

            body.dark #openMobileMenu.aktif svg {
                fill: #66a843;
            }

            body.dark .topNav ul.menu {
                background-color: #161616;
            }

            body.dark .topNav ul.menu li {
                border-top: 1px solid rgba(255, 255, 255, 0.16);
                color: white;
            }

            section.yayinAndListe,
            section.otherContent {
                box-sizing: border-box;
                padding: 0px 8px;
            }
            
            section.ornekReklam2 {
                width: 70%;
            }

            footer {
                height: fit-content;
            }

            footer .foot {
                position: relative;
                height: fit-content;
                bottom: unset;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                padding: 20px 0px 10px 0px;
            }

            footer .foot span {
                padding: 5px 0px;
            }

            .onlyMobile {
                display: inline-flex;
            }

            #ornekReklam1,
            #ornekReklam1-2 {
                border-radius: 0;
                width: 100%;
            }

            #ornekReklam3 {
                width: 70%;
            }

            #reklamiGec {
                position: absolute;
                right: 10px;
                bottom: 60px;
                padding: 5px 7px;
                background-color: #66a843;
                z-index: 9999999999999999;
                border-radius: 10px;
                color: white;
                cursor: pointer;
            }

            #playerForApi {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            /* Mobilde .ornekReklam2'nin önce çıkması için */
            .kontrolPanel {
                order: 2;
            }

            .ornekReklam2 {
                order: 1;
            }
        }

        a {
            color: inherit;
            /* blue colors for links too */
            text-decoration: inherit;
            /* no underline */
        }

        img {
            max-width: 100%;
        }

                        /* Varsayılan banner boyutları */
                        .topReklam img {
                            width: 100%;
                            /* Varsayılan olarak genişlik %100 */
                            height: auto;
                            /* Yükseklik otomatik */
                        }
            
                        /* Mobil cihazlar için banner boyutunu ayarla */
                        @media (max-width: 767px) {
            
                            /* 767px ve altındaki cihazlar için */
                            .topReklam img {
                                width: 468px;
                                /* Mobilde genişlik */
                                height: 60px;
                                /* Mobilde yükseklik */
                            }
                        }