*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#070707;
    color:#fff;
    overflow-x:hidden;
}

/* BACKGROUND */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        linear-gradient(135deg,rgba(255,0,35,.12) 0%,transparent 24%),
        linear-gradient(315deg,rgba(210,215,222,.06) 0%,transparent 28%),
        linear-gradient(180deg,#070707 0%,#101010 48%,#1b0509 100%);
    z-index:-2;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 90px
        );
    opacity:.5;
    z-index:-1;
}

/* CONTAINER */

.container{
    width:92%;
    max-width:1480px;
    margin:auto;
}

/* NAVBAR - FULL SPORT TOP BAR */

.navbar{
    position:fixed;
    top:0;
    left:0;
    transform:none;
    width:100%;
    max-width:none;
    height:86px;
    padding:0 54px;
    border-radius:0;
    background:#090909;
    border-bottom:3px solid #d50022;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:999;
    box-shadow:0 12px 36px rgba(0,0,0,.45);
}

.logo img{
    height:56px;
    width:auto;
    display:block;
    filter:drop-shadow(0 0 14px rgba(213,0,34,.35));
}

.nav-links{
    display:flex;
    gap:0;
    align-items:center;
}

.nav-links a{
    text-decoration:none;
    color:#e5e7eb;
    font-size:13px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
    padding:33px 18px;
    border-left:1px solid rgba(255,255,255,.06);
    transition:.25s ease;
}

.nav-links a:last-child{
    border-right:1px solid rgba(255,255,255,.06);
}

.nav-links a:hover{
    background:#d50022;
    color:#fff;
}

.hamburger{
    display:none;
}

/* RUNNING TEXT - NEWS TICKER */

.running-text{
    margin-top:112px;
    margin-bottom:28px;
    height:58px;
    border-radius:0;
    padding:0;
    background:#d50022;
    border:none;
    overflow:hidden;
    display:flex;
    align-items:center;
    box-shadow:0 14px 30px rgba(213,0,34,.24);
    position:relative;
}

.running-text::before{
    content:"LIVE";
    height:100%;
    min-width:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f2f3f5;
    color:#080808;
    font-weight:900;
    letter-spacing:1px;
    z-index:2;
}

.running-track{
    display:flex;
    align-items:center;
    gap:60px;
    white-space:nowrap;
    animation:runningText 24s linear infinite;
    padding:0 40px;
    border:none;
    background:transparent;
}

.running-track span{
    font-family:'Inter',sans-serif;
    color:#fff;
    font-size:14px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
    text-shadow:none;
}

.running-track span::before{
    content:"●";
    margin-right:16px;
    color:#fff;
    font-size:11px;
}

@keyframes runningText{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
}

/* HERO - MAGAZINE SPLIT */

.hero{
    display:grid;
    grid-template-columns:54% 46%;
    gap:34px;
    align-items:stretch;
    padding:0 0 52px;
}

.hero-left{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.main-banner{
    position:relative;
    height:620px;
    overflow:hidden;
    border-radius:0;
    border:none;
    background:#000;
    box-shadow:0 22px 50px rgba(0,0,0,.55);
}

.main-banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(213,0,34,.35),transparent 38%),
        linear-gradient(0deg,rgba(0,0,0,.55),transparent 40%);
    z-index:2;
    pointer-events:none;
}

.main-banner::after{
    content:"TURKITOTO";
    position:absolute;
    left:30px;
    bottom:24px;
    z-index:3;
    color:rgba(255,255,255,.12);
    font-size:70px;
    font-weight:900;
    letter-spacing:-4px;
    line-height:1;
}

.main-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
    display:block;
    filter:brightness(1.05) contrast(1.16) saturate(1.05);
}

.banner-content{
    position:absolute;
    left:42px;
    bottom:44px;
    top:auto;
    transform:none;
    max-width:420px;
    z-index:4;
}

/* TESTIMONIAL - HORIZONTAL SOLID CARDS */

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    border:1px solid rgba(255,255,255,.1);
    background:#111;
}

.testimonial-card{
    padding:22px;
    border-radius:0;
    background:#111;
    border:none;
    border-right:1px solid rgba(255,255,255,.08);
    backdrop-filter:none;
    transition:.25s;
}

.testimonial-card:last-child{
    border-right:none;
}

.testimonial-card:hover{
    transform:none;
    background:#171717;
    box-shadow:none;
}

.testimonial-top{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
}

.avatar{
    width:48px;
    height:48px;
    border-radius:12px;
    overflow:hidden;
    border:2px solid #d50022;
    box-shadow:none;
    background:#000;
    flex-shrink:0;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.testimonial-name{
    font-size:16px;
    font-weight:900;
    color:#fff;
    margin-bottom:3px;
}

.testimonial-role{
    font-size:12px;
    color:#cfd4da;
}

.testimonial-card p{
    color:#cfd4da;
    line-height:1.65;
    font-size:14px;
    margin-top:10px;
}

.stars{
    color:#d50022;
    margin-top:12px;
    letter-spacing:1px;
}

/* HERO RIGHT */

.hero-right{
    background:
        linear-gradient(135deg,#151515,#0b0b0b 60%,#25050a);
    border-left:6px solid #d50022;
    padding:54px 46px;
    display:flex;
    justify-content:center;
    flex-direction:column;
    min-height:620px;
}

.hero-title{
    font-size:58px;
    line-height:.96;
    font-weight:950;
    letter-spacing:-3px;
    margin-bottom:28px;
    color:#fff;
    text-transform:uppercase;
}

.hero-title::after{
    content:"";
    display:block;
    width:96px;
    height:6px;
    background:#d50022;
    margin-top:26px;
}

.hero-desc{
    color:#d6d9de;
    font-size:19px;
    line-height:1.9;
    margin-bottom:34px;
}

/* FAQ - ACCORDION SHARP */

.mini-faq{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mini-faq-item{
    background:#101010;
    border:1px solid rgba(255,255,255,.08);
    border-left:4px solid transparent;
    border-radius:0;
    overflow:hidden;
    backdrop-filter:none;
}

.mini-faq-item.active{
    border-left-color:#d50022;
    background:#151515;
}

.mini-faq-question{
    padding:19px 20px;
    font-size:18px;
    font-weight:900;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.mini-faq-question::after{
    content:"+";
    color:#d50022;
    font-size:26px;
}

.mini-faq-item.active .mini-faq-question::after{
    content:"−";
}

.mini-faq-answer{
    max-height:0;
    overflow:hidden;
    transition:.3s ease;
    color:#cfd4da;
    line-height:1.8;
    padding:0 20px;
}

.mini-faq-item.active .mini-faq-answer{
    max-height:220px;
    padding:0 20px 20px;
}

/* ARTICLE - EDITORIAL BOX */

.article-section{
    padding:20px 0 58px;
}

.article-container{
    position:relative;
    padding:64px;
    border-radius:0;
    overflow:hidden;
    background:#0f0f10;
    border:1px solid rgba(255,255,255,.09);
    border-top:8px solid #d50022;
    box-shadow:0 22px 60px rgba(0,0,0,.38);
    text-align:left;
}

.article-container::before{
    content:"INFO";
    position:absolute;
    right:36px;
    top:24px;
    color:rgba(255,255,255,.06);
    font-size:84px;
    font-weight:950;
    letter-spacing:-4px;
}

.article-title{
    font-size:48px;
    line-height:1;
    letter-spacing:-2px;
    margin-bottom:28px;
    max-width:900px;
    color:#fff;
    text-align:left;
}

.article-text{
    color:#d6d9de;
    line-height:2;
    font-size:18px;
    margin-bottom:22px;
    max-width:1000px;
}

.article-text a{
    color:#ff304c !important;
    font-weight:900;
    text-decoration:none;
}

/* ARTICLE CARDS - SHARP FEATURE BLOCKS */

.article-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:42px;
}

.article-card{
    position:relative;
    padding:34px 28px;
    border-radius:0;
    overflow:hidden;
    background:#171717;
    border:1px solid rgba(255,255,255,.08);
    border-bottom:4px solid #d50022;
    backdrop-filter:none;
    transition:.25s ease;
    text-align:left;
}

.article-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(213,0,34,.12),transparent 46%);
    pointer-events:none;
}

.article-card:hover{
    transform:translateY(-6px);
    border-color:rgba(213,0,34,.45);
    box-shadow:0 18px 42px rgba(0,0,0,.35);
}

.card-icon{
    width:54px;
    height:54px;
    margin:0 0 20px;
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    color:#fff;
    background:#d50022;
    border:none;
    box-shadow:none;
}

.article-card h3{
    position:relative;
    font-size:24px;
    margin-bottom:14px;
    color:#fff;
    letter-spacing:-.5px;
    z-index:2;
}

.article-card p{
    position:relative;
    color:#cfd4da;
    line-height:1.85;
    font-size:15px;
    z-index:2;
}

/* LATEST BLOG - SPORT CARD SLIDER */

.latest-blog-section{
    padding:42px 0 86px;
    overflow:hidden;
}

.latest-blog-header{
    text-align:left;
    margin-bottom:26px;
}

.latest-blog-header h2{
    font-size:58px;
    letter-spacing:-3px;
    text-transform:uppercase;
    display:inline-block;
    border-bottom:6px solid #d50022;
    padding-bottom:10px;
}

.latest-blog-slider-wrapper{
    position:relative;
    display:flex;
    align-items:center;
    gap:18px;
}

.latest-blog-slider{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding-bottom:10px;
    scrollbar-width:none;
}

.latest-blog-slider::-webkit-scrollbar{
    display:none;
}

.latest-blog-card{
    min-width:330px;
    max-width:330px;
    flex-shrink:0;
    display:block;
    text-decoration:none;
    border-radius:0;
    overflow:hidden;
    background:#111;
    border:1px solid rgba(255,255,255,.1);
    transition:.25s;
}

.latest-blog-card:hover{
    transform:translateY(-7px);
    border-color:#d50022;
    box-shadow:0 16px 36px rgba(0,0,0,.38);
}

.latest-blog-image{
    height:178px;
    overflow:hidden;
    background:#1b1b1b;
    border-bottom:4px solid #d50022;
}

.latest-blog-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.3s;
}

.latest-blog-card:hover .latest-blog-image img{
    transform:scale(1.06);
}

.latest-blog-content{
    padding:22px;
}

.latest-blog-badge{
    display:inline-block;
    padding:7px 11px;
    border-radius:0;
    background:#d50022;
    border:none;
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.8px;
    margin-bottom:14px;
    text-transform:uppercase;
}

.latest-blog-content h3{
    font-size:25px;
    line-height:1.22;
    margin-bottom:14px;
    color:#fff;
}

.latest-blog-content p{
    font-size:14px;
    line-height:1.7;
    color:#c7ccd2;
    margin-bottom:18px;
}

.latest-blog-read{
    color:#ff304c;
    font-size:13px;
    font-weight:900;
    letter-spacing:.6px;
}

.blog-nav{
    width:50px;
    height:74px;
    border:none;
    border-radius:0;
    cursor:pointer;
    background:#d50022;
    color:#fff;
    font-size:34px;
    transition:.25s;
    flex-shrink:0;
}

.blog-nav:hover{
    transform:none;
    background:#f01636;
}

.latest-blog-button{
    text-align:center;
    margin-top:40px;
}

.view-all-blog-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:17px 34px;
    border-radius:0;
    text-decoration:none;
    background:#d50022;
    border:1px solid #d50022;
    color:#fff;
    font-size:13px;
    font-weight:900;
    letter-spacing:1px;
    transition:.25s;
    text-transform:uppercase;
}

.view-all-blog-btn:hover{
    transform:translateY(-4px);
    background:#fff;
    color:#090909;
    border-color:#fff;
    box-shadow:0 16px 30px rgba(0,0,0,.28);
}

/* FOOTER */

.premium-footer{
    margin-top:40px;
    padding:72px 0 28px;
    background:#080808;
    border-top:6px solid #d50022;
}

.footer-grid{
    width:92%;
    max-width:1480px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1.35fr;
    gap:48px;
}

.footer-column{
    display:flex;
    flex-direction:column;
}

.footer-column h3,
.footer-contact h3{
    margin-bottom:22px;
    font-size:20px;
    color:#fff;
    text-transform:uppercase;
}

.footer-column a{
    text-decoration:none;
    color:#cfd4da;
    margin-bottom:15px;
    transition:.25s;
    font-size:15px;
}

.footer-column a:hover{
    color:#ff304c;
    transform:translateX(6px);
}

.contact-item{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.contact-icon{
    width:42px;
    height:42px;
    background:#d50022;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.contact-item span{
    display:block;
    color:#aeb4bb;
    margin-bottom:5px;
    font-size:12px;
    text-transform:uppercase;
}

.contact-item strong{
    font-size:15px;
    color:#fff;
}

.footer-bottom{
    width:92%;
    max-width:1480px;
    margin:48px auto 0;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#97a0aa;
}

.footer-socials{
    display:flex;
    gap:14px;
}

.footer-socials a{
    width:48px;
    height:48px;
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#151515;
    border:1px solid rgba(255,255,255,.08);
    color:white;
    transition:.25s;
    text-decoration:none;
}

.footer-socials a:hover{
    transform:translateY(-5px);
    color:#fff;
    background:#d50022;
    border-color:#d50022;
}

.footer-socials svg{
    width:22px;
    height:22px;
}

/* SCROLL */

#scrollTopBtn{
    position:fixed;
    right:28px;
    bottom:28px;
    width:56px;
    height:56px;
    border:none;
    border-radius:0;
    cursor:pointer;
    font-size:26px;
    font-weight:900;
    color:#fff;
    background:#d50022;
    box-shadow:0 12px 30px rgba(213,0,34,.28);
    z-index:999;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.35s;
}

#scrollTopBtn.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* BOTTOM CTA */

.toto-jitu-footer{
    display:flex;
    justify-content:space-around;
    align-items:center;
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:18px;
    width:90%;
    height:66px;
    background:#090909;
    backdrop-filter:blur(12px);
    border-radius:0;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    z-index:9999;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-top:4px solid #d50022;
}

.toto-jitu-footer::before,
.toto-jitu-footer::after,
.dragon-shine{
    display:none;
}

.toto-jitu-footer a{
    flex:1;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    transition:.25s;
    max-width:74px;
    position:relative;
    padding:7px 0;
    z-index:2;
}

.toto-jitu-footer a img{
    width:24px;
    height:24px;
    margin-bottom:4px;
    filter:none;
    animation:none;
}

.toto-jitu-footer a:hover{
    color:#ff304c;
    transform:translateY(-3px);
    text-shadow:none;
}

.toto-jitu-footer .tada{
    background:#d50022;
    border-radius:0;
    padding:8px 12px;
    transform:scale(1.08);
    box-shadow:none;
    animation:none;
    color:#fff;
}

.toto-jitu-footer .tada:hover{
    transform:scale(1.14);
    background:#fff;
    color:#090909;
    box-shadow:none;
}

/* BREADCRUMB */

.breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:26px;
}

.breadcrumb a{
    color:#ff304c;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
}

.breadcrumb span{
    color:#89919a;
    font-size:14px;
}

.breadcrumb-current{
    color:#cfd4da !important;
}

/* MOBILE */

@media(max-width:1200px){
    .hero{
        grid-template-columns:1fr;
    }

    .hero-right{
        min-height:auto;
    }

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

@media(max-width:768px){
    .navbar{
        height:auto;
        padding:14px 18px;
    }

    .logo img{
        height:44px;
    }

    .hamburger{
        display:flex;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        background:#d50022;
        color:#fff;
        font-size:24px;
        cursor:pointer;
    }

    .nav-links{
        position:absolute;
        top:74px;
        left:0;
        right:0;
        display:flex;
        flex-direction:column;
        gap:0;
        background:#090909;
        border-top:3px solid #d50022;
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:.3s;
        z-index:999;
    }

    .nav-links.active{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .nav-links a{
        padding:18px 22px;
        border-bottom:1px solid rgba(255,255,255,.08);
        border-left:none;
        border-right:none;
    }

    .running-text{
        margin-top:95px;
        height:54px;
    }

    .running-text::before{
        min-width:76px;
        font-size:12px;
    }

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

    .main-banner{
        height:430px;
    }

    .main-banner::after{
        font-size:42px;
    }

    .hero-right{
        padding:34px 24px;
        border-left:none;
        border-top:6px solid #d50022;
    }

    .hero-title{
        font-size:38px;
        line-height:1.05;
    }

    .hero-desc{
        font-size:16px;
    }

    .testimonial-grid,
    .article-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .testimonial-card{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .article-container{
        padding:38px 24px;
    }

    .article-title{
        font-size:34px;
    }

    .latest-blog-header h2{
        font-size:42px;
    }

    .latest-blog-card{
        min-width:280px;
        max-width:280px;
    }

    .blog-nav{
        display:none;
    }

    .footer-bottom{
        flex-direction:column;
        gap:20px;
    }

    .toto-jitu-footer{
        width:95%;
        height:64px;
    }

    .toto-jitu-footer a{
        font-size:10px;
    }

    .toto-jitu-footer a img{
        width:21px;
        height:21px;
    }
}

@media(max-width:480px){
    .main-banner{
        height:360px;
    }

    .hero-title{
        font-size:33px;
    }

    .mini-faq-question{
        font-size:16px;
    }

    .latest-blog-card{
        min-width:260px;
        max-width:260px;
    }
}