@import url('fonts.css');
*,
*::after,
*::before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

:root {
    --titleFont: "Space Grotesk", "Segoe UI", sans-serif;
    --textFont: "Inter", "Segoe UI", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    line-height: 1.618;
    font-family: var(--textFont);
    color: #fff;
    background: #000;
}

svg {
    width: 1em;
}

h1,
h2 {
    margin: 0;
    font-family: var(--titleFont);
    line-height: 1;
    position: relative;
}

h1 {
    font-size: 5em;
    font-weight: 700;
    max-width: 67%;
    letter-spacing: -2px;
}

h2 {
    font-size: 2.5em;
}

ul,
li {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}


/* Start */

.container {
    position: relative;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

ul,
li {
    padding: 0;
    margin: 0
}


/* Header */

.header-bg-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-image: url('../images/E58EDPHZjLW0.png');
    background-size: cover;
    background-position: center;
    object-fit: cover;
    object-position: center;
    transition: all 200ms ease-in-out
}

.header-bg-1.icon-futbol {
    background-image: url('../images/E58EDPHZjLW0.png');
}

.header-bg-1.icon-basketbol {
    background-image: url('../images/X2RCJ8mUcbms.jpg');
}

.header-bg-1.icon-voleybol {
    background-image: url('../images/CaYvMqARj4fu.jpg');
}

.header-bg-1.icon-tenis {
    background-image: url('../images/llNO5fCU2CvE.jpg');
}

.header-bg-1.icon-masatenisi {
    background-image: url('../images/RhLXRAk5Qn6V.jpg');
}

.header-bg-1.icon-espor {
    background-image: url('../images/WJqFR0KwRfQl.jpeg');
}

.header-bg-1::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8))
}

.header-bg-1::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent)
}

header {
    padding: 2em 0;
    position: relative;
    height: 100vh;
    background: #000;
    color: #fff
}

header h1 {
    margin: 0 auto
}

.logo {
    font-size: 2em;
    font-weight: 700;
    font-family: var(--titleFont);
    display: flex;
}

header .container {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

p {
    font-size: 1.25em;
    max-width: 600px;
    color: rgba(255, 255, 255, 0.8);
}

header .container p {
    margin: 2em auto;
}

header nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

header nav ul li {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.6)
}

header nav ul li:not(:first-child) {
    margin-left: 1em;
}

header svg path {
    fill: #fff;
    transition: all 400ms ease-in-out
}

.sports-icon-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(auto, 120px));
    gap: 1em;
    justify-content: center;
}

.sports-icon-list svg {
    width: 2em;
}

.single-sports {
    padding: 1em;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.4));
    background-size: 150% 150%;
    border-radius: 5px;
    transition: all 200ms ease-in-out;
    cursor: pointer;
}

.single-sports.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
}

.single-sports.active * {
    color: #000;
    fill: #000
}

.single-sports:hover {
    background-size: 100% 100%;
}

.single-sports>div {
    color: rgba(255, 255, 255, 0.6)
}

.sports-list-more {
    grid-column: 1 / 4;
    text-align: center;
    font-size: 1.25em;
}

.live-text {
    color: red;
    animation: live-text 2000ms linear infinite
}

@keyframes live-text {
    0%,
    100% {
        opacity: .4;
    }
    50% {
        opacity: 1;
    }
}

.down-icon {
    margin-top: .5em;
    font-size: 2em;
    animation: downicon 2000ms ease-in-out infinite;
    cursor: pointer
}

@keyframes downicon {
    0%,
    100% {
        transform: none
    }
    50% {
        transform: translateY(.5em)
    }
}


/* */

.section-big-video {
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-big-video::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #000, #000 10%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, #000 90%, #000 100%);
    z-index: 2;
}

.section-big-video video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    opacity: .5;
    z-index: 1;
}

.section-big-video .video-title {
    position: absolute;
    font-size: 5em;
    color: #fff;
    font-weight: 700;
    width: 720px;
    line-height: 1;
    z-index: 3;
    text-align: center;
}

.video-player-area {
    background: #000;
    padding: 2em 0;
}

.zigzag h1 {
    text-align: left;
}

.video-player-area .zigzag .image-videoplayer {
    width: 617px;
}

.zigzag {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4em;
    align-items: center;
    margin: 2em 0
}

.zigzag img {
    border-radius: 6px;
}

.zigzag h1 {
    max-width: 100%;
}

.zigzag h2 {
    margin: .5em 0;
    color: rgba(255, 255, 255, 0.4)
}


/* Keşfet */

.kesfet-link {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2em;
    padding: 1em 2em;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    transition: all 200ms ease-in-out
}

.kesfet-link:hover {
    background: #111;
}

.kesfet-link svg {
    margin-left: 1em;
}

.ozellik-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    margin: 4em 0
}

.ozellik-grid svg {
    width: 3em;
    height: 3em;
}

.ozellik-grid .ozellik-baslik {
    font-size: 1.5em;
    color: #fff
}

.ozellik-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.4);
}

.image-responsive {
    width: 600px
}

.center {
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.responsive-area {
    padding: 6em 0;
}

.channel-list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1em;
    align-items: stretch;
}

.channels-area {
    border-top: 1px dashed #111;
    padding: 6em 0 0 0;
}

.channel-list>div {
    padding: 1em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.channel-list img {
    transition: all 200ms ease-in-out
}

.channel-list>div:hover img {
    transform: scale(1.1)
}


/* ODDS */

.list-head {
    padding: 1em 2em;
    -webkit-border-top-left-radius: var(--radius);
    -webkit-border-top-right-radius: var(--radius);
    -moz-border-radius-topleft: var(--radius);
    -moz-border-radius-topright: var(--radius);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    display: flex;
    flex-direction: row;
    align-items: center;
    text-transform: uppercase;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1), transparent);
    font-weight: 700;
    overflow: hidden;
}

.list-head svg {
    margin-right: 1em;
    font-size: 1.5em;
}

.odds-container {
    --radius: 6px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    margin-top: 1em;
}

.odds-container .list-head {
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.odds-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: .2
}

.odds-container.Futbol::after {
    background-image: url('../content/stad/futbol.png')
}

.odds-container.Basketbol::after {
    background-image: url('../content/stad/basketbol.png')
}

.odds-area {
    display: grid;
    grid-template-columns: 56px auto 56px;
    gap: 1em;
    padding: 1em 2em;
    justify-content: space-between;
    align-items: center;
    height: 206px;
}

.bahis-yap {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1), transparent);
    padding: .75em 2em
}

.single-odds img {
    width: 56px;
    margin-top: 1em
}

.single-odds {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .875em;
    text-align: center
}

.single-odds>div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%
}

.now-playing {
    display: inline-flex;
    margin-bottom: .5em;
    border: 1px solid red;
    font-size: .875em;
    padding: .25em 1em;
    border-radius: var(--radius);
    animation: nowPlaying 2000ms linear infinite
}

@keyframes nowPlaying {
    0%,
    100% {
        color: #fff
    }
    50% {
        color: rgba(255, 255, 255, .4)
    }
}

.odds-list {
    display: flex;
    flex-direction: column;
    font-size: .75em
}

.odds-list .single-bet {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
    text-align: center;
    border-radius: var(--radius)
}

.single-bet>div {
    padding: .25em 1em;
    border: 1px solid rgba(255, 255, 255, .1);
    margin-left: .5em;
    border-radius: var(--radius);
    transition: all 200ms linear;
    display: flex;
    align-items: center;
    justify-content: center
}

.single-bet>div:not(:first-child):hover {
    background: #fff;
    color: #000
}

.single-bet>div:first-child {
    background: rgba(255, 255, 255, .1)
}

.odds-list>div:not(:first-child) {
    margin-top: .75em
}

.odds-list>div.two {
    grid-template-columns: repeat(3, 1fr)
}

.gelecek-maclar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: flex-start;
    gap: 1em;
    align-items: stretch;
    --radius: 6px;
}

.single-day-match .teams>div>div {
    text-overflow: ellipsis;
    overflow: hidden;
}

.single-day-match {
    position: relative;
    display: inline-grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    text-align: center;
    padding: 1em .5em;
    gap: .5em;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 75%;
    min-height: 120px;
    border-radius: var(--radius);
    overflow: hidden;
    user-select: none;
    transition: all 200ms linear;
}

.single-day-match .teams img {
    width: 48px
}

.single-day-match::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
    z-index: 1;
    transition: all 200ms linear
}

.single-day-match:hover {
    border-color: #fff
}

.single-day-match:hover::after {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1))
}

.single-day-match>* {
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%
}

.single-day-match.Futbol {
    background-image: url('../content/stad/futbol.png')
}

.single-day-match.Basketbol {
    background-image: url('../content/stad/basketbol.png')
}

.single-day-match .teams {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: space-between;
    font-size: .875em;
    white-space: nowrap;
}

.single-day-match .tournament {
    font-size: .75em;
    color: rgba(255, 255, 255, .6)
}

.single-day-match .teams>div {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-overflow: ellipsis;
    overflow: hidden
}

.single-day-match .teams .away-team {
    justify-content: flex-end
}

.single-day-match .teams .home-team {
    justify-content: flex-start
}

.single-day-match .teams>div>div {
    text-overflow: ellipsis;
    overflow: hidden
}

.seperator-teams {
    margin: 0 .5em
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6em
}

.alt-kisim {
    padding: 6em 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.alt-kisim h1 {
    margin-bottom: 1em;
}

footer {
    padding: 6em 0;
    color: #fff;
    text-align: center;
    border-top: 1px dashed rgba(255, 255, 255, 0.1)
}

footer h1 {
    margin: .5em auto
}

footer p {
    margin: 0 auto
}

.social-area {
    justify-content: center;
    gap: 1em;
    grid-template-columns: 1fr;
    align-items: center;
}

.social-area>a {
    padding: 2em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: all 200ms ease-in-out
}

.social-area>a:hover {
    background: #000;
}

.social-area svg {
    width: 3em;
    height: 3em;
    margin-top: 1em
}

.social-area>a>div {
    font-size: 1.75em;
}

.contact-form {
    background: #111;
    border-radius: 5px;
    display: grid;
    align-items: stretch;
    grid-template-columns: auto 1fr;
    gap: 4em;
    padding: 4em;
    border-top: 6px dashed #222
}

iframe {
    border-radius: 5px;
}

iframe+p {
    font-size: 1em;
    font-style: italic;
}

.load-page {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 1em;
    background: rgba(255, 255, 255, 0.4);
    z-index: 99999;
}

.page-scroll {
    position: fixed;
    bottom: 2em;
    right: 2em;
    z-index: 99999;
    display: flex;
    flex-direction: row;
}

.page-scroll>div {
    padding: 1em;
    cursor: pointer;
    transition: all 200ms ease-in-out;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-scroll>div:hover {
    background: rgba(255, 255, 255, 1);
    color: #000;
}


/* Language Switcher */

.lang-switcher {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25em;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35em 0.65em;
    font-size: 0.8em;
    font-weight: 600;
    font-family: var(--textFont);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    text-decoration: none;
    transition: all 200ms ease-in-out;
    letter-spacing: 0.5px;
}

.lang-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.lang-btn.active {
    color: #000;
    background: #fff;
    border-color: #fff;
}


/* Panel Showcase Section */

.panel-showcase-area {
    padding: 6em 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.01);
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
    margin: 3em 0;
}

.panel-card {
    position: relative;
    padding: 2em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    transition: all 300ms ease-in-out;
    overflow: hidden;
}

.panel-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

.panel-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    transform: translateY(-2px);
}

.panel-card:hover::before {
    opacity: 1;
}

.panel-card-icon {
    width: 2.5em;
    height: 2.5em;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.panel-card-icon svg {
    width: 1.25em;
    height: 1.25em;
    fill: rgba(255, 255, 255, 0.8);
}

.panel-card-title {
    font-size: 1.25em;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5em;
}

.panel-card p {
    font-size: 0.95em;
    margin: 0;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
}

.panel-feature-list {
    list-style: none;
    padding: 0;
    margin: 1em 0 0 0;
}

.panel-feature-list li {
    position: relative;
    padding: 0.4em 0;
    padding-left: 1.5em;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1em;
}

.panel-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
}


/* Live Statistics Section */

.live-stats-area {
    padding: 6em 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.stats-theme-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1.25em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2em;
    font-size: 0.875em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5em;
    background: rgba(255, 255, 255, 0.03);
}

.stats-theme-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e74c3c;
    animation: live-text 2000ms linear infinite;
}

.stats-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
    margin: 3em 0;
}

.stats-feature-card {
    padding: 2em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    transition: all 300ms ease-in-out;
}

.stats-feature-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.stats-feature-card .stats-icon {
    width: 2.5em;
    height: 2.5em;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.stats-feature-card .stats-icon svg {
    width: 1.25em;
    height: 1.25em;
}

.stats-feature-card h3 {
    font-size: 1.25em;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.5em 0;
    font-family: var(--titleFont);
}

.stats-feature-card p {
    font-size: 0.95em;
    margin: 0;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
}

.stats-feature-card ul {
    list-style: none;
    padding: 0;
    margin: 0.75em 0 0 0;
}

.stats-feature-card ul li {
    padding: 0.25em 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9em;
}

.stats-feature-card ul li::before {
    content: "•";
    margin-right: 0.5em;
    color: rgba(255, 255, 255, 0.3);
}

.stats-screenshots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5em;
    margin-top: 3em;
}

.stats-screenshots .screenshot-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    transition: all 300ms ease-in-out;
}

.stats-screenshots .screenshot-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.01);
}

.stats-screenshots .screenshot-item img {
    width: 100%;
    display: block;
}

.stats-screenshots .screenshot-item .screenshot-label {
    padding: 0.75em 1em;
    font-size: 0.875em;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    font-weight: 500;
}


/* API Section Improvements */

.api-section {
    padding: 6em 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.api-features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    margin: 2em 0;
    text-align: left;
}

.api-features-list li {
    position: relative;
    padding: 1em 1.25em;
    padding-left: 2.5em;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95em;
    transition: all 200ms ease-in-out;
}

.api-features-list li:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.api-features-list li::before {
    content: "→";
    position: absolute;
    left: 1em;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 700;
}

.api-code-block {
    position: relative;
    margin: 2em 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

.api-code-block .code-header {
    padding: 0.75em 1.5em;
    font-size: 0.8em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.api-code-block pre {
    margin: 0;
    padding: 1.5em;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    overflow-x: auto;
}

.api-code-block code {
    font-family: 'Courier New', Consolas, monospace;
}


/* Mobile App Section */

.mobile-app-area {
    padding: 6em 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}


/* Responsive */

@media (max-width: 1024px) {
    h1 {
        font-size: 3em;
        max-width: 100%;
    }

    .sports-icon-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .ozellik-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .panel-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .api-features-list {
        grid-template-columns: 1fr;
    }

    .zigzag {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    .video-player-area .zigzag .image-videoplayer {
        width: 100%;
    }

    .section-big-video .video-title {
        font-size: 3em;
        width: auto;
        padding: 0 1em;
    }

    .channel-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid {
        grid-template-columns: 1fr;
        gap: 4em;
    }

    .gelecek-maclar {
        grid-template-columns: 1fr;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 0 1.5em;
    }

    .image-responsive {
        width: 100%;
    }

    .stats-screenshots {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.5em;
    }

    .ozellik-grid {
        grid-template-columns: 1fr;
    }

    .panel-grid {
        grid-template-columns: 1fr;
    }

    .stats-features-grid {
        grid-template-columns: 1fr;
    }

    .channel-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .section-big-video .video-title {
        font-size: 2em;
    }

    .odds-area {
        grid-template-columns: 1fr;
        height: auto;
    }

    .single-bet {
        grid-template-columns: 1fr;
    }

    header {
        padding: 1em 0;
    }

    .lang-switcher {
        gap: 0.15em;
    }

    .lang-btn {
        padding: 0.25em 0.5em;
        font-size: 0.75em;
    }
}