*{ 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
} 
 
html{ 
    scroll-behavior:smooth; 
} 
 
body{ 
    font-family:"Inter",sans-serif; 
    background:#080b13; 
    color:#fff; 
    min-height:100vh; 
    overflow-x:hidden; 
} 
 
body.menu-open{ 
    overflow:hidden; 
} 
 
:root{ 
    --orange:#ff5b35; 
    --orange-dark:#ed4520; 
    --bg:#080b13; 
    --bg2:#0d111c; 
    --card:#111722; 
    --card2:#151c28; 
    --border:#202838; 
    --text:#fff; 
    --muted:#8994a7; 
    --green:#35d989; 
} 
 
/* ========================= 
   HEADER 
========================= */ 
 
.header{ 
    position:sticky; 
    top:0; 
    z-index:1000; 
    height:72px; 
    background:rgba(8,11,19,.88); 
    border-bottom:1px solid rgba(255,255,255,.06); 
    backdrop-filter:blur(18px); 
    -webkit-backdrop-filter:blur(18px); 
} 
 
.header-inner{ 
    width:100%; 
    max-width:1180px; 
    height:100%; 
    margin:auto; 
    padding:0 22px; 
 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
} 
 
.logo{ 
    display:flex; 
    align-items:center; 
    gap:11px; 
    color:#fff; 
    text-decoration:none; 
    flex-shrink:0; 
} 
 
.logo-icon{ 
    width:43px; 
    height:43px; 
 
    display:flex; 
    align-items:center; 
    justify-content:center; 
 
    border-radius:13px; 
 
    background:linear-gradient(135deg,#ff5b35,#ff3517); 
 
    box-shadow: 
        0 8px 25px rgba(255,91,53,.25); 
 
    font-size:20px; 
} 
 
.logo-text strong{ 
    display:block; 
    font-size:17px; 
    font-weight:800; 
    line-height:1.1; 
} 
 
.logo-text span{ 
    display:block; 
    margin-top:3px; 
    color:#788396; 
    font-size:10px; 
} 
 
/* DESKTOP MENU */ 
 
.nav{ 
    display:flex; 
    align-items:center; 
    gap:5px; 
} 
 
.nav a{ 
    display:flex; 
    align-items:center; 
    gap:7px; 
 
    color:#9ba5b6; 
    text-decoration:none; 
 
    font-size:13px; 
    font-weight:500; 
 
    padding:10px 13px; 
    border-radius:9px; 
 
    transition:.2s ease; 
} 
 
.nav a:hover{ 
    color:#fff; 
    background:#151c29; 
} 
 
.nav .login{ 
    margin-left:5px; 
    color:#fff; 
    border:1px solid #2a3344; 
    background:#111722; 
} 
 
.nav .login:hover{ 
    background:var(--orange); 
    border-color:var(--orange); 
} 
 
/* MOBILE MENU BUTTON */ 
 
.menu-toggle{ 
    width:42px; 
    height:42px; 
 
    display:none; 
 
    align-items:center; 
    justify-content:center; 
 
    border:1px solid var(--border); 
    border-radius:11px; 
 
    background:#111722; 
    color:#fff; 
 
    font-size:19px; 
    cursor:pointer; 
 
    transition:.2s; 
} 
 
.menu-toggle:hover{ 
    background:#181f2c; 
} 
 
.menu-toggle .close-icon{ 
    display:none; 
} 
 
/* ========================= 
   MOBILE NAV 
========================= */ 
 
.mobile-menu{ 
    display:none; 
} 
 
/* ========================= 
   HERO 
========================= */ 
 
.hero{ 
    position:relative; 
    min-height:540px; 
 
    display:flex; 
    align-items:center; 
    justify-content:center; 
 
    text-align:center; 
 
    padding:80px 20px 95px; 
 
    overflow:hidden; 
} 
 
.hero::before{ 
    content:""; 
 
    position:absolute; 
 
    width:650px; 
    height:650px; 
 
    top:-270px; 
    left:50%; 
 
    transform:translateX(-50%); 
 
    background:radial-gradient( 
        circle, 
        rgba(255,91,53,.19), 
        transparent 66% 
    ); 
 
    pointer-events:none; 
} 
 
.hero::after{ 
    content:""; 
 
    position:absolute; 
 
    width:300px; 
    height:300px; 
 
    right:-150px; 
    bottom:-100px; 
 
    background:radial-gradient( 
        circle, 
        rgba(255,91,53,.08), 
        transparent 70% 
    ); 
 
    pointer-events:none; 
} 
 
.hero-content{ 
    position:relative; 
    z-index:2; 
    width:100%; 
    max-width:940px; 
} 
 
.status{ 
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
 
    margin-bottom:25px; 
 
    padding:8px 14px; 
 
    border:1px solid rgba(53,217,137,.18); 
    border-radius:30px; 
 
    background:rgba(53,217,137,.07); 
 
    color:#49dc91; 
 
    font-size:11px; 
    font-weight:600; 
} 
 
.status-dot{ 
    width:7px; 
    height:7px; 
 
    border-radius:50%; 
 
    background:var(--green); 
 
    box-shadow:0 0 13px rgba(53,217,137,.8); 
} 
 
.hero h1{ 
    font-size:clamp(42px,7vw,74px); 
    line-height:1.02; 
 
    font-weight:800; 
    letter-spacing:-3.5px; 
 
    margin-bottom:23px; 
} 
 
.hero h1 span{ 
    color:var(--orange); 
} 
 
.hero p{ 
    max-width:610px; 
    margin:0 auto 34px; 
 
    color:#8994a7; 
 
    font-size:15px; 
    line-height:1.8; 
} 
 
/* ========================= 
   BUTTONS 
========================= */ 
 
.buttons{ 
    display:flex; 
    justify-content:center; 
    align-items:center; 
 
    gap:12px; 
    flex-wrap:wrap; 
} 
 
.btn{ 
    min-height:51px; 
 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    gap:9px; 
 
    padding:0 23px; 
 
    border-radius:11px; 
 
    text-decoration:none; 
 
    font-size:13px; 
    font-weight:700; 
 
    transition:.22s ease; 
} 
 
.btn-primary{ 
    color:#fff; 
    background:var(--orange); 
 
    box-shadow: 
        0 10px 30px rgba(255,91,53,.22); 
} 
 
.btn-primary:hover{ 
    background:#ff6b48; 
    transform:translateY(-2px); 
    box-shadow: 
        0 14px 35px rgba(255,91,53,.30); 
} 
 
.btn-secondary{ 
    color:#d7dce5; 
    border:1px solid var(--border); 
    background:#111722; 
} 
 
.btn-secondary:hover{ 
    background:#181f2d; 
    border-color:#303a4d; 
    transform:translateY(-2px); 
} 
 
/* ========================= 
   HERO BOXES 
========================= */ 
 
.hero-boxes{ 
    width:100%; 
    max-width:900px; 
    margin:0 auto; 
 
    display:grid; 
    grid-template-columns:repeat(3,minmax(0,1fr)); 
    gap:14px; 
 
    text-align:left; 
} 
 
.hero-box{ 
    width:100%; 
    min-width:0; 
    min-height:82px; 
 
    display:flex; 
    align-items:center; 
 
    gap:13px; 
 
    padding:15px 16px; 
 
    color:#fff; 
    text-decoration:none; 
 
    border:1px solid var(--border); 
    border-radius:15px; 
 
    background:rgba(17,23,34,.88); 
 
    box-shadow:0 12px 35px rgba(0,0,0,.15); 
 
    transition:.22s ease; 
} 
 
.hero-box:hover{ 
    transform:translateY(-4px); 
 
    border-color:rgba(255,91,53,.45); 
 
    background:#151c28; 
 
    box-shadow:0 16px 38px rgba(0,0,0,.25); 
} 
 
.hero-box-icon{ 
    width:46px; 
    height:46px; 
    min-width:46px; 
 
    display:flex; 
    align-items:center; 
    justify-content:center; 
 
    border-radius:12px; 
 
    background:rgba(255,91,53,.10); 
    color:var(--orange); 
 
    font-size:19px; 
 
    transition:.22s ease; 
} 
 
.hero-box:hover .hero-box-icon{ 
    background:rgba(255,91,53,.16); 
    color:#ff6b48; 
} 
 
.hero-box-content{ 
    min-width:0; 
    flex:1; 
 
    display:flex; 
    flex-direction:column; 
    gap:5px; 
} 
 
.hero-box-content strong{ 
    display:block; 
 
    color:#fff; 
 
    font-size:13px; 
    font-weight:700; 
    line-height:1.3; 
 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} 
 
.hero-box-content span{ 
    display:block; 
 
    max-width:100%; 
 
    color:#737e91; 
 
    font-size:10px; 
    line-height:1.45; 
 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} 
 
.hero-box-arrow{ 
    flex-shrink:0; 
 
    color:#4d586a; 
 
    font-size:12px; 
 
    transition:.22s ease; 
} 
 
.hero-box:hover .hero-box-arrow{ 
    color:var(--orange); 
    transform:translateX(4px); 
} 
 
/* ========================= 
   STATS 
========================= */ 
 
.stats{ 
    position:relative; 
    z-index:10; 
 
    max-width:900px; 
 
    margin:-32px auto 0; 
 
    padding:0 20px; 
} 
 
.stats-grid{ 
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
 
    overflow:hidden; 
 
    border:1px solid var(--border); 
    border-radius:17px; 
 
    background:#101620; 
 
    box-shadow:0 20px 55px rgba(0,0,0,.28); 
} 
 
.stat{ 
    padding:23px; 
    text-align:center; 
 
    border-right:1px solid var(--border); 
} 
 
.stat:last-child{ 
    border-right:0; 
} 
 
.stat strong{ 
    display:block; 
 
    margin-bottom:5px; 
 
    font-size:23px; 
    font-weight:800; 
} 
 
.stat span{ 
    color:#788396; 
    font-size:11px; 
} 
 
/* ========================= 
   CHANNELS 
========================= */ 
 
.channels-section{ 
    max-width:1100px; 
 
    margin:82px auto 0; 
 
    padding:0 20px 75px; 
} 
 
.section-header{ 
    margin-bottom:31px; 
    text-align:center; 
} 
 
.section-header h2{ 
    margin-bottom:9px; 
 
    font-size:26px; 
    font-weight:800; 
} 
 
.section-header p{ 
    color:#748095; 
    font-size:12px; 
} 
 
.channels{ 
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
    gap:15px; 
} 
 
.channel{ 
    display:block; 
 
    padding:21px; 
 
    color:#fff; 
    text-decoration:none; 
 
    border:1px solid var(--border); 
    border-radius:15px; 
 
    background:var(--card); 
 
    transition:.22s ease; 
} 
 
.channel:hover{ 
    transform:translateY(-4px); 
 
    border-color:#394355; 
 
    background:#141b27; 
 
    box-shadow:0 14px 35px rgba(0,0,0,.18); 
} 
 
.channel-top{ 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
 
    margin-bottom:17px; 
} 
 
.channel-icon{ 
    width:42px; 
    height:42px; 
 
    display:flex; 
    align-items:center; 
    justify-content:center; 
 
    border-radius:12px; 
 
    background:rgba(255,91,53,.10); 
 
    color:var(--orange); 
 
    font-size:18px; 
} 
 
.online{ 
    display:flex; 
    align-items:center; 
    gap:6px; 
 
    color:#53d992; 
 
    font-size:10px; 
    font-weight:600; 
} 
 
.online-dot{ 
    width:6px; 
    height:6px; 
 
    border-radius:50%; 
 
    background:#38d887; 
 
    box-shadow:0 0 8px rgba(56,216,135,.7); 
} 
 
.channel h3{ 
    margin-bottom:7px; 
 
    font-size:14px; 
    font-weight:700; 
} 
 
.channel p{ 
    color:#737e91; 
 
    font-size:11px; 
    line-height:1.65; 
} 
 
/* ========================= 
   FEATURES 
========================= */ 
 
.features{ 
    padding:58px 20px; 
 
    background:#0c1019; 
 
    border-top:1px solid var(--border); 
    border-bottom:1px solid var(--border); 
} 
 
.features-inner{ 
    max-width:1000px; 
 
    margin:auto; 
 
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
 
    gap:28px; 
} 
 
.feature{ 
    text-align:center; 
} 
 
.feature-icon{ 
    width:50px; 
    height:50px; 
 
    display:flex; 
    align-items:center; 
    justify-content:center; 
 
    margin:0 auto 15px; 
 
    border-radius:14px; 
 
    background:#151c28; 
 
    color:var(--orange); 
 
    font-size:20px; 
} 
 
.feature h3{ 
    margin-bottom:8px; 
 
    font-size:13px; 
} 
 
.feature p{ 
    color:#727d90; 
 
    font-size:11px; 
    line-height:1.65; 
} 
 
/* ========================= 
   FOOTER 
========================= */ 
 
.footer{ 
    max-width:1100px; 
 
    margin:auto; 
 
    padding:31px 20px; 
 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
 
    color:#626d7f; 
 
    font-size:10px; 
} 
 
.footer a{ 
    color:#788496; 
    text-decoration:none; 
} 
 
.footer a:hover{ 
    color:var(--orange); 
} 
 
/* ========================= 
   TABLET 
========================= */ 
 
@media(max-width:900px){ 
 
    .hero-content{ 
        max-width:760px; 
    } 
 
    .hero-boxes{ 
        max-width:720px; 
        grid-template-columns:repeat(3,minmax(0,1fr)); 
        gap:11px; 
    } 
 
    .hero-box{ 
        min-height:78px; 
        padding:13px; 
        gap:10px; 
    } 
 
    .hero-box-icon{ 
        width:42px; 
        height:42px; 
        min-width:42px; 
        font-size:17px; 
    } 
 
    .hero-box-content strong{ 
        font-size:12px; 
    } 
 
    .hero-box-content span{ 
        font-size:9px; 
    } 
 
    .hero-box-arrow{ 
        font-size:11px; 
    } 
 
    .channels{ 
        grid-template-columns:repeat(2,1fr); 
    } 
 
    .features-inner{ 
        grid-template-columns:repeat(2,1fr); 
        row-gap:40px; 
    } 
 
} 
 
/* ========================= 
   MOBILE 
========================= */ 
 
@media(max-width:750px){ 
 
    .header{ 
        height:64px; 
    } 
 
    .header-inner{ 
        padding:0 15px; 
    } 
 
    .logo-icon{ 
        width:38px; 
        height:38px; 
        border-radius:11px; 
    } 
 
    .logo-text strong{ 
        font-size:15px; 
    } 
 
    .logo-text span{ 
        font-size:9px; 
    } 
 
    /* DESKTOP NAV GİZLE */ 
 
    .nav{ 
        display:none; 
    } 
 
    /* HAMBURGER */ 
 
    .menu-toggle{ 
        display:flex; 
    } 
 
    /* MOBİL MENÜ */ 
 
    .mobile-menu{ 
        position:fixed; 
 
        top:64px; 
        left:0; 
        right:0; 
 
        z-index:999; 
 
        padding:12px 15px 18px; 
 
        background:rgba(8,11,19,.97); 
 
        border-bottom:1px solid var(--border); 
 
        box-shadow:0 20px 40px rgba(0,0,0,.35); 
 
        backdrop-filter:blur(18px); 
        -webkit-backdrop-filter:blur(18px); 
    } 
 
    .mobile-menu.active{ 
        display:block; 
    } 
 
    .mobile-menu a{ 
        min-height:50px; 
 
        display:flex; 
        align-items:center; 
        gap:12px; 
 
        margin-top:7px; 
 
        padding:0 15px; 
 
        color:#c5ccd8; 
 
        text-decoration:none; 
 
        border:1px solid transparent; 
        border-radius:11px; 
 
        background:#111722; 
 
        font-size:13px; 
        font-weight:600; 
 
        transition:.2s; 
    } 
 
    .mobile-menu a i{ 
        width:22px; 
 
        color:var(--orange); 
 
        text-align:center; 
 
        font-size:16px; 
    } 
 
    .mobile-menu a:hover, 
    .mobile-menu a:active{ 
        color:#fff; 
        border-color:#303a4d; 
        background:#171f2d; 
    } 
 
    .mobile-menu .mobile-login{ 
        color:#fff; 
        background:var(--orange); 
        border-color:var(--orange); 
    } 
 
    .mobile-menu .mobile-login i{ 
        color:#fff; 
    } 
 
    /* HERO */ 
 
    .hero{ 
        min-height:500px; 
 
        padding:65px 18px 85px; 
    } 
 
    .hero-content{ 
        width:100%; 
        max-width:520px; 
    } 
 
    .hero h1{ 
        font-size:clamp(38px,11vw,56px); 
 
        letter-spacing:-2.5px; 
    } 
 
    .hero p{ 
        font-size:13px; 
        line-height:1.75; 
        margin-bottom:28px; 
    } 
 
    /* HERO BOXES */ 
 
    .hero-boxes{ 
        width:100%; 
        max-width:420px; 
 
        grid-template-columns:1fr; 
        gap:10px; 
 
        margin:0 auto; 
    } 
 
    .hero-box{ 
        width:100%; 
        min-height:70px; 
 
        padding:12px 14px; 
 
        gap:11px; 
 
        border-radius:13px; 
    } 
 
    .hero-box-icon{ 
        width:42px; 
        height:42px; 
        min-width:42px; 
 
        border-radius:11px; 
 
        font-size:17px; 
    } 
 
    .hero-box-content{ 
        gap:3px; 
    } 
 
    .hero-box-content strong{ 
        font-size:13px; 
    } 
 
    .hero-box-content span{ 
        font-size:10px; 
    } 
 
    .hero-box-arrow{ 
        font-size:11px; 
    } 
 
    /* ESKİ BUTONLAR KULLANILIRSA */ 
 
    .buttons{ 
        width:100%; 
        max-width:340px; 
 
        margin:auto; 
 
        flex-direction:column; 
    } 
 
    .btn{ 
        width:100%; 
    } 
 
    /* STATS */ 
 
    .stats{ 
        margin-top:-18px; 
        padding:0 15px; 
    } 
 
    .stats-grid{ 
        grid-template-columns:1fr; 
    } 
 
    .stat{ 
        padding:18px; 
 
        border-right:0; 
        border-bottom:1px solid var(--border); 
    } 
 
    .stat:last-child{ 
        border-bottom:0; 
    } 
 
    /* CHANNELS */ 
 
    .channels-section{ 
        margin-top:58px; 
 
        padding-left:15px; 
        padding-right:15px; 
    } 
 
    .section-header h2{ 
        font-size:23px; 
    } 
 
    .channels{ 
        grid-template-columns:1fr; 
        gap:12px; 
    } 
 
    .channel{ 
        padding:18px; 
    } 
 
    /* FEATURES */ 
 
    .features{ 
        padding:50px 20px; 
    } 
 
    .features-inner{ 
        grid-template-columns:1fr; 
        gap:38px; 
    } 
 
    /* FOOTER */ 
 
    .footer{ 
        flex-direction:column; 
 
        gap:11px; 
 
        text-align:center; 
 
        padding:27px 15px; 
    } 
 
} 
 
/* ========================= 
   SMALL MOBILE 
========================= */ 
 
@media(max-width:380px){ 
 
    .logo-text span{ 
        display:none; 
    } 
 
    .hero{ 
        padding-top:55px; 
        padding-left:14px; 
        padding-right:14px; 
    } 
 
    .hero h1{ 
        font-size:37px; 
    } 
 
    .hero p{ 
        font-size:12px; 
    } 
 
    .status{ 
        font-size:10px; 
    } 
 
    .hero-boxes{ 
        max-width:100%; 
        gap:8px; 
    } 
 
    .hero-box{ 
        min-height:66px; 
        padding:11px 12px; 
    } 
 
    .hero-box-icon{ 
        width:39px; 
        height:39px; 
        min-width:39px; 
    } 
 
    .hero-box-content strong{ 
        font-size:12px; 
    } 
 
    .hero-box-content span{ 
        font-size:9px; 
    } 
 
} 
 
/* ========================= 
   LANDSCAPE MOBILE 
========================= */ 
 
@media(max-height:500px) and (orientation:landscape){ 
 
    .hero{ 
        min-height:auto; 
        padding:70px 20px; 
    } 
 
    .hero-boxes{ 
        grid-template-columns:repeat(3,minmax(0,1fr)); 
        max-width:800px; 
    } 
 
    .hero-box{ 
        min-height:65px; 
    } 
 
} 
 
/* ========================= 
   REDUCED MOTION 
========================= */ 
 
@media(prefers-reduced-motion:reduce){ 
 
    html{ 
        scroll-behavior:auto; 
    } 
 
    *{ 
        transition:none !important; 
    } 
 
} 
 
/* ========================= 
   GEVEZELER PWA INSTALL 
========================= */ 
 
.pwa-install{ 
    position:fixed; 
    right:18px; 
    bottom:18px; 
    z-index:1200; 
 
    display:none; 
    align-items:center; 
    justify-content:center; 
    gap:9px; 
 
    min-height:46px; 
    padding:0 17px; 
 
    border:1px solid rgba(255,255,255,.08); 
    border-radius:12px; 
 
    background:var(--orange); 
    color:#fff; 
 
    font-family:"Inter",sans-serif; 
    font-size:12px; 
    font-weight:700; 
 
    box-shadow:0 12px 30px rgba(255,91,53,.28); 
 
    cursor:pointer; 
    transition:.2s ease; 
} 
 
.pwa-install.show{ 
    display:inline-flex; 
} 
 
.pwa-install:hover{ 
    background:#ff6b48; 
    transform:translateY(-2px); 
} 
 
@media(max-width:750px){ 
 
    .pwa-install{ 
        right:15px; 
        left:15px; 
        bottom:15px; 
 
        width:auto; 
    } 
 
}