*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background:#F0F4F8;overflow-x:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);font-family:Arial,Helvetica,sans-serif !important;font-size:14px}@font-face{font-family:"Gravity-Regular";src:url("../css/Gravity-V546.otf")}@font-face{font-family:"Gravity-Bold";src:url("../css/GravityBold-JAp7.otf")}
body{position:relative}ul,ol{list-style:none}a{text-decoration:none;background-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0)}.main a{color:#1a1a1a}
header a{color:#1a1a1a}
h1,h2,h3,h4,h5,h6{text-transform:capitalize;font-family:Arial,Helvetica,sans-serif;font-weight:600;color:#1a1a1a !important}button{border:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.container{max-width:1390px;width:calc(100% - 30px);margin-left:auto;margin-right:auto}img{border-style:none}input,textarea{font-size:14px;outline:none}input[type=submit]{-webkit-appearance:none}div,i{-webkit-tap-highlight-color:rgba(0,0,0,0)}
:root{--font-color:#757B87}.ad{display:flex;flex-direction:column;align-items:center;margin:20px 0}.ad{color:#1a1a1a}.ad>p{font-size:12px;color:#1a1a1a !important;margin-top:10px}@media screen and (max-width: 767px){.container{padding:0;width:100%}}.layui-rate{padding:0;margin-bottom:4px}.layui-icon-rate{color:#ccc !important}.layui-icon-rate-solid{color:#ff7e00 !important}.layui-icon-rate-solid:before,.layui-icon-rate:before{content:"★" !important;font-family:"Font Awesome 6 Free"}

header {
    background: #ffffff;
    width: 100%;
    color: #1a1a1a;
    height: 64px;           /* 🔥 CLS FIX */
}
header .container{display:flex;justify-content:space-between;align-items:center;height:60px}header .container .logo{width:180px;height:40px;display:block}header .container .logo>img{height:100%}header .container .cate,header .container .sea{width:20px;height:20px;display:none}header .container .cate i,header .container .sea i{font-size:20px;color:#1a1a1a}header .container .header-actions{display:flex;align-items:center;gap:10px;margin-right:15px}header .container .action-btn{width:40px;height:40px;border-radius:8px;background:#2a2f4a;border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;font-size:16px}header .container .action-btn:hover{background:#3a3f5a;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)}header .container .action-btn i{color:#fff}header .container .login-btn{padding:10px 20px;background:#3b82f6;color:#fff;text-decoration:none;border-radius:8px;font-size:14px;font-weight:500;transition:all .3s;white-space:nowrap}header .container .login-btn:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,0.4)}header .container .searchBtn{display:flex;align-items:center;justify-content:center;width:289px;height:40px;overflow:visible;transition:all .3s;position:relative;z-index:10}header .container .searchBtn>input{border:1px solid rgba(0,0,0,0);border-radius:6px;width:100%;height:40px;background:#f2f5f9;color:#1a1a1a !important;font-size:14px;text-indent:12px;-webkit-text-fill-color:#1a1a1a !important;transition:all .3s}header .container .searchBtn:hover{width:350px}header .container .searchBtn:hover>input{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1);border:1px solid #e0e0e0}header .container .searchBtn>button{background:rgba(0,0,0,0);position:absolute;width:60px;height:38px;top:1px;right:1px;display:flex;align-items:center;justify-content:center;border-radius:0 3px 3px 0}header .container .searchBtn>button i{font-size:19px;color:#1a1a1a !important}header .container .searchBtn::before{display:none;content:"";position:fixed;width:100%;height:100%;top:135px;left:0;background:rgba(0,0,0,.5)}header .container .searchBtn.act>input{border:1px solid #5f5ff6}header .container .searchBtn.act>button{background:#5f5ff6}header .container .searchBtn.act>button i{color:#fff}header .container .searchBtn.active{display:flex;width:100%;z-index:999;position:absolute;background:#f8f8f8;top:60px;left:0;height:75px;padding:0 16px}header .container .searchBtn.active>input{border:2px solid #5f5ff6}header .container .searchBtn.active>button{right:17px;top:19px;background:#5f5ff6}header .container .searchBtn.active>button i{color:#fff}header .container .searchBtn.active::before{display:block}header .container>nav{display:flex;align-items:center;width:calc(100% - 600px);height:100%;padding-left:60px}header .container>nav>a{transition:all .3s}header .container>nav>a+a{margin-left:50px}@media screen and (min-width: 1181px){header .container>nav>a:hover{color:#5f5ff6}}@media screen and (max-width: 1290px){header .container>nav{padding-left:30px}}@media screen and (max-width: 1260px){header .container .header-actions{display:none}header .container .searchBtn{display:none}header .container .sea{display:block}header .container>nav{width:calc(100% - 209px)}}@media screen and (max-width: 1181px){header .container>nav{display:none}header .container .cate{display:block}header .container .header-actions{display:flex}}
@media screen and (max-width: 767px){ header {
        height: 72px;       /* 🔥 mobilde sabitle */
    } header .container{padding:0 15px}
header .container .header-actions{gap:8px}
header .container .action-btn{width:36px;height:36px;font-size:14px}
header .container .login-btn{padding:8px 16px;font-size:13px}}header.act .container>nav{display:none}
header.act .container .searchBtn{width:calc(100% - 200px)}.main .swiperBox{display:flex;justify-content:space-between;margin-top:20px}.main .swiperBox .swiper-wrapper{width:100%}
.main .swiperBox .swiper-wrapper .swiper-slide{   display: inline-grid;
    width: calc((100% - 94px) / 4);
    margin-right: 27.45px;}.main .swiperBox .swiper-wrapper .swiper-slide>a{width:100%;display:block;height:0;padding-bottom:75%;position:relative;overflow:hidden;border-radius:8px;border:1px solid rgba(0,0,0,0);transition:all .3s}.main .swiperBox .swiper-wrapper .swiper-slide>a>img{position:absolute;width:100%;height:100%;object-position:center;object-fit:cover}.main .swiperBox .swiper-wrapper .swiper-slide>a .con{position:absolute;width:100%;left:0;bottom:0;padding:12px;display:flex;align-items:flex-end;background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)}.main .swiperBox .swiper-wrapper .swiper-slide>a .con .thumb{width:78px;height:78px;box-shadow:0px 2px 4px 0px rgba(0,0,0,.3);border-radius:12px;border:2px solid #fff;overflow:hidden;margin-right:12px}.main .swiperBox .swiper-wrapper .swiper-slide>a .con .thumb>img{width:100%;height:100%;object-position:center;object-fit:cover}.main .swiperBox .swiper-wrapper .swiper-slide>a .con>dl{width:calc(100% - 176px);padding-bottom:9px}.main .swiperBox .swiper-wrapper .swiper-slide>a .con>dl>dt{color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-bottom:10px;font-family:Arial,Helvetica,sans-serif;font-weight:600;font-size:16px}.main .swiperBox .swiper-wrapper .swiper-slide>a .con>dl>dd{color:#fff;font-size:13px;font-family:Arial,Helvetica,sans-serif;display:flex;align-items:center;gap:4px}.main .swiperBox .swiper-wrapper .swiper-slide>a .con>dl>dd span{color:#fff;font-weight:600;font-size:14px}.main .swiperBox .swiper-wrapper .swiper-slide>a .con>dl>dd i{font-size:13px;margin-left:4px;color:#ffd700;filter:drop-shadow(0 1px 2px rgba(255,215,0,0.4))}.main .swiperBox .swiper-wrapper .swiper-slide>a .con>p{width:74px;height:36px;background:#5f5ff6;border-radius:10px;text-align:center;line-height:36px;color:#fff;margin-left:12px}@media screen and (min-width: 1181px){.main .swiperBox .swiper-wrapper .swiper-slide>a:hover{border:1px solid #5f5ff6}}.main .swiperBox .swiper-wrapper .swiper-slide:nth-child(4n){margin-right:0}@media screen and (max-width: 1366px){.main .swiperBox .swiper-wrapper .swiper-slide>a .con .thumb{width:68px;height:68px}.main .swiperBox .swiper-wrapper .swiper-slide>a .con>dl{width:calc(100% - 166px)}}@media screen and (max-width: 1181px){.main .swiperBox .swiper-wrapper .swiper-slide{width:calc((100% - 10px)/3)}.main .swiperBox .swiper-wrapper .swiper-slide>a .con .thumb{width:50px;height:50px}.main .swiperBox .swiper-wrapper .swiper-slide>a .con>dl{width:calc(100% - 134px);padding-bottom:0}.main .swiperBox .swiper-wrapper .swiper-slide>a .con>p{width:60px;height:30px;line-height:30px}}
	@media screen and (max-width: 767px){
	.main .swiperBox .swiper-wrapper .swiper-slide{ width: calc((100% - 90px) / 2);
        margin: 20px; }   .main .swiperBox .swiper-wrapper .swiper-slide .respons { display:none;}
	.main .swiperBox .swiper-wrapper .swiper-slide>a{padding-bottom:65%}}.main .swiperBox .swiper-pagination{display:none;bottom:0}@media screen and (max-width: 767px){.main .swiperBox{padding:0 19px 20px 19px}.main .swiperBox .swiper-pagination{display:block}}.main .title{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid #f2f5f9}.main .title>h2{font-size:22px;display:flex;align-items:center;gap:10px;color:#1a1a1a !important;font-weight:700 !important;letter-spacing:-0.3px}.main .title>h2 i{font-size:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2))}.main .title>h2 i.fa-fire{color:#FF6B35 !important}.main .title>h2 i.fa-trophy{color:#FFB800 !important}.main .title>h2 i.fa-sparkles{color:#00D4FF !important}.main .title>h2 i.fa-star{color:#FFD700 !important}.main .title>a{transition:all .3s;color:#1a1a1a !important}@media screen and (min-width: 1181px){.main .title>a:hover{color:#5f5ff6 !important}}.main{color:#1a1a1a}
	.main .gameBox{margin-top:20px;padding-left:30px;border-radius:8px;background:linear-gradient(180deg,var(--section-a),var(--section-b));color:#1a1a1a}.main .gameBox .gameList{display:flex;flex-wrap:wrap}.main .gameBox .gameList>li{width:calc((100% - 90px)/4);margin-right:30px;margin-top:24px}.main .gameBox .gameList>li>a{display:flex;align-items:center}.main .gameBox .gameList>li>a .thumb{width:80px;height:80px;border-radius:16px;border:1px solid #e8e8e8;margin-right:18px;overflow:hidden}.main .gameBox .gameList>li>a .thumb>img{width:100%;height:100%;object-fit:cover;object-position:center}.main .gameBox .gameList>li>a>dl{transition:all .3s;width:calc(100% - 98px)}.main .gameBox .gameList>li>a>dl>dt{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;color:#1a1a1a !important;font-weight:600;font-size:15px;line-height:1.4}
	.main .gameBox .gameList>li>a>dl>dd{color:#1a1a1a !important;font-size:13px;margin-top:0px;font-family:Arial,Helvetica,sans-serif;display:flex;align-items:center;gap:4px}.main .gameBox .gameList>li>a>dl>dd span{color:#1a1a1a !important;font-weight:600}.main .gameBox .gameList>li>a>dl>dd i{font-size:13px;color:#ffd700;margin-left:4px;filter:drop-shadow(0 1px 1px rgba(255,215,0,0.3))}@media screen and (min-width: 1181px){.main .gameBox .gameList>li>a:hover>dl>dt{color:#5f5ff6}}.main .gameBox .gameList>li:nth-child(4n){margin-right:0}@media screen and (max-width: 1181px){.main .gameBox .gameList>li{width:calc((100% - 60px)/3)}.main .gameBox .gameList>li:nth-child(4n){margin-right:30px}.main .gameBox .gameList>li:nth-child(3n){margin-right:0}}@media screen and (max-width: 767px){.main .gameBox .gameList>li{width:100%;margin-right:0}.main .gameBox .gameList>li:nth-child(n+7){display:none}}
	.main .gameBox .bestList{display:flex;flex-wrap:wrap}
	.main .gameBox .bestList>li{width:calc((100% - 240px)/8);margin-right:30px; margin-top:24px;      background: #fff;

    padding-top: 16px;
    transition: all .2s ease;
}
  
 .main .gameBox .bestList>li:hover{
  transform: translateY(-2px);
  box-shadow: 
    0 10px 28px rgba(0,0,0,0.18),
    0 2px 4px rgba(0,0,0,0.12);
	border-radius:10px;
}
	.main .gameBox .bestList>li>a{width:100%;display:block}
	.main .gameBox .bestList>li>a .thumb{width:100%;height:0;padding-bottom:100%;position:relative;overflow:hidden;border-radius:24px;border:1px solid #e8e8e8}
	.main .gameBox .bestList>li>a .thumb>img{width:100%;height:100%;object-position:center;object-fit:cover;position:absolute;top:0;left:0}
	.main .gameBox .bestList>li>a>dl{margin-top:13px}
	.main .gameBox .bestList>li>a>dl>dt{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;color:#1a1a1a !important;font-weight:600;font-size:15px;line-height:1.4}
	.main .gameBox .bestList>li>a>dl>dd{margin-top:8px;font-size:13px;color:#1a1a1a !important;font-family:Arial,Helvetica,sans-serif;display:flex;align-items:center;gap:4px}
	.main .gameBox .bestList>li>a>dl>dd span{color:#1a1a1a !important;font-weight:600}
	.main .gameBox .bestList>li>a>dl>dd i{font-size:13px;color:#ffd700;margin-left:4px;filter:drop-shadow(0 1px 1px rgba(255,215,0,0.3))}@media screen and (min-width: 1181px){.main .gameBox .bestList>li>a:hover>dl>dt{color:#5f5ff6}}.main .gameBox .bestList>li:nth-child(8n){margin-right:0}
	@media screen and (max-width: 1181px){.main .gameBox .bestList>li{width:calc((100% - 150px)/6)}
	.main .gameBox .bestList>li:nth-child(8n){margin-right:30px}
	.main .gameBox .bestList>li:nth-child(6n){margin-right:0}
	.main .gameBox .bestList>li:nth-child(n+7){display:none}}
	@media screen and (max-width: 767px){
		.main .gameBox .bestList>li{width:calc((100% - 60px)/3)}
		.main .gameBox .bestList>li:nth-child(6n){margin-right:30px}
		.main .gameBox .bestList>li:nth-child(3n){margin-right:0}}
		.main .gameBox .category{display:flex;flex-wrap:wrap}
		.main .gameBox .category>li{margin-top:12px;margin-right:12px}
		.main .gameBox .category>li>a{display:flex;align-items:center;background:rgba(248,248,248,0);border-radius:20px;border:1px solid #e7e7e7;padding:4px 10px 4px 4px;transition:all .3s}.main .gameBox .category>li>a .thumb{width:32px;height:32px;border-radius:40px;overflow:hidden;margin-right:6px}.main .gameBox .category>li>a .thumb>img{width:100%;height:100%;object-fit:cover;object-position:center}@media screen and (min-width: 1181px){.main .gameBox .category>li>a:hover>p{color:#5f5ff6}}footer{margin-top:30px;background:#fff !important;color:#1a1a1a !important}footer .container{padding:50px 20px 25px 20px !important;max-width:1390px !important;margin:0 auto !important}footer .footer-top{margin-bottom:40px !important}footer .footer-columns{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:40px !important;align-items:start !important;width:100% !important;flex-direction:row !important}footer .footer-columns>*{display:block !important}footer .footer-column{display:block !important;width:100% !important;flex:1 !important;min-width:0}footer .footer-column h3{color:#1a1a1a !important;font-size:16px !important;font-weight:700 !important;margin-bottom:20px !important;text-transform:none !important;letter-spacing:0 !important;font-family:Arial,Helvetica,sans-serif !important}footer .footer-desc{color:#1a1a1a !important;font-size:14px;line-height:22px;margin-bottom:20px;font-family:Arial,Helvetica,sans-serif}footer .footer-subscribe-form{display:flex;flex-direction:column;gap:12px}footer .form-group{display:flex;flex-direction:column;gap:6px}footer .form-group label{color:#1a1a1a !important;font-size:13px;font-weight:600;font-family:Arial,Helvetica,sans-serif}footer .form-group input[type="email"]{padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:Arial,Helvetica,sans-serif;color:#1a1a1a !important;background:#fff;transition:all .3s;outline:none}footer .form-group input[type="email"]:focus{border-color:#9333ea;box-shadow:0 0 0 3px rgba(147,51,234,0.1)}footer .form-group input[type="email"]::placeholder{color:#666 !important}footer .subscribe-btn{padding:10px 20px;background:linear-gradient(135deg,#9333ea,#7c3aed);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s;font-family:Arial,Helvetica,sans-serif}footer .subscribe-btn:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9);transform:translateY(-2px);box-shadow:0 4px 12px rgba(147,51,234,0.3)}footer .footer-column ul{list-style:none;padding:0;margin:0}footer .footer-column ul li{margin-bottom:10px}footer .footer-column ul li a{color:#1a1a1a !important;font-size:14px;text-decoration:none;transition:color .3s;font-family:Arial,Helvetica,sans-serif;font-weight:400}footer .footer-column ul li a:hover{color:#9333ea;text-decoration:underline}footer .social-icons{display:flex;gap:10px;flex-wrap:wrap}footer .social-btn{width:45px;height:45px;border-radius:50%;background:#e8e8e8;display:flex;align-items:center;justify-content:center;color:#1a1a1a !important;text-decoration:none;transition:all .3s;border:none}footer .social-btn:hover{background:#d0d0d0;transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,0.2);color:#1a1a1a}footer .social-btn i{font-size:18px;font-weight:600}footer .footer-illustration{width:100%;height:200px;margin:30px 0;overflow:hidden;background:#fff}footer .cityscape-illustration{width:100%;height:100%;display:block}footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid #eee}footer .footer-bottom .copyright{color:#1a1a1a !important;font-size:12px;margin:0;font-family:Arial,Helvetica,sans-serif}footer .footer-bottom .made-with{color:#1a1a1a !important;font-size:12px;margin:0;font-family:Arial,Helvetica,sans-serif}footer .footer-bottom .copyright:hover,footer .footer-bottom .made-with:hover{color:#000 !important}@media screen and (max-width: 1181px){footer .footer-columns{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:25px}footer .footer-column h3{font-size:15px;color:#1a1a1a !important}footer .footer-desc{font-size:13px;color:#1a1a1a !important}footer .footer-column ul li a{font-size:13px;color:#1a1a1a !important}}@media screen and (max-width: 1024px){footer .footer-columns{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:20px}footer .footer-column h3{font-size:14px;margin-bottom:15px;color:#1a1a1a !important}footer .footer-desc{font-size:12px;margin-bottom:15px;color:#1a1a1a !important}footer .footer-column ul li{margin-bottom:8px}footer .footer-column ul li a{font-size:12px;color:#1a1a1a !important}footer .social-btn{width:40px;height:40px}footer .social-btn i{font-size:16px}}@media screen and (max-width: 767px){footer .container{padding:40px 15px 20px 15px}footer .footer-columns{grid-template-columns:repeat(2,1fr);gap:25px}footer .footer-column h3{font-size:14px;margin-bottom:15px;color:#1a1a1a}footer .footer-desc{font-size:12px;margin-bottom:15px;color:#333}footer .footer-column ul li a{color:#1a1a1a;font-size:12px}footer .footer-illustration{height:150px;margin:20px 0}footer .footer-bottom{flex-direction:column;gap:10px;text-align:center;padding-top:15px}}
	.categoryBox{z-index:99;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none}
	.categoryBox.active {
  display: block;
}
.categoryBox .box{
    position:absolute;
    top:0;
    left:0;
    width:252px;
    height:calc(100% - 70px); /* 👈 Google Auto Ads alt alan */
    padding:22px;
    overflow-y:auto;
    background:#f8f8f8;
}
	.categoryBox .box>h3{text-align:center;font-size:22px}
	.categoryBox .box .listNav{margin-top:24px}.categoryBox .box .listNav>li>a{display:flex;align-items:center;padding:9px 13px;transition:all .3s;border-radius:20px;background:#fff;position:relative}.categoryBox{color:#1a1a1a}.categoryBox .box .listNav>li>a>p{width:calc(100% - 60px);margin-left:8px;font-size:14px;color:#1a1a1a}.categoryBox .box .listNav>li.active>a{background:#eef1f2;border:1px solid #e8e9ea}.categoryBox .box .listNav>li.active>a>p{color:#132141}.categoryBox .box .listNav>li+li{margin-top:16px}.categoryBox .close{position:absolute;width:42px;height:42px;background:#fff;border-radius:0px 100px 100px 0px;display:flex;align-items:center;justify-content:center;top:27px;left:251px}.categoryBox .close i{font-size:18px}.categoryBox.act{display:block}/* Page Description Styles - Home.php Tasarımına Uygun */.page{color:#1a1a1a !important}.breadcrumb{color:#1a1a1a !important;background:#fff;padding:12px 16px;border-radius:8px;margin-bottom:20px;border:1px solid #e8e8e8}.breadcrumb a{color:#1a1a1a !important;text-decoration:none;transition:color .3s}.breadcrumb a:hover{color:#5f5ff6 !important}.breadcrumb span{color:#666 !important}.breadcrumb .date{color:#666 !important}.hero-card{background:#fff !important;border:1px solid #e8e8e8 !important;border-radius:18px !important;box-shadow:0 2px 8px rgba(0,0,0,0.05) !important;color:#1a1a1a !important;margin-top:20px}.hero-card h1{color:#1a1a1a !important;font-size:24px;font-weight:700;margin:0;padding:16px 20px}.cover{background:#f2f5f9 !important}.titlebar{color:#1a1a1a !important;padding:16px 20px;background:#fff;border-top:1px solid #e8e8e8}.titlebar h1{color:#1a1a1a !important}.pill{background:#f2f5f9 !important;border:1px solid #e8e8e8 !important;color:#1a1a1a !important;padding:6px 12px;border-radius:20px;font-size:13px;display:inline-flex;align-items:center;gap:6px;margin-right:8px;margin-bottom:8px}.pill a{color:#1a1a1a !important;text-decoration:none}.btn.primary{background:#5f5ff6 !important;color:#fff !important;border:none !important;padding:10px 20px;border-radius:8px;font-weight:600;transition:all .3s}.btn.primary:hover{background:#4f4fe6 !important;transform:translateY(-2px);box-shadow:0 4px 12px rgba(95,95,246,0.3)}.player{background:#fff !important;border:1px solid #e8e8e8 !important;border-radius:18px !important;box-shadow:0 2px 8px rgba(0,0,0,0.05) !important;color:#1a1a1a !important}.player-under{color:#1a1a1a !important}.tabs{background:#fff !important;border:1px solid #e8e8e8 !important;border-radius:14px !important;overflow:hidden;margin-top:20px}.tab-head{background:#f9f9f9 !important;border-bottom:1px solid #e8e8e8 !important;padding:6px}.tab-btn{color:#666 !important;background:transparent !important;border:1px solid transparent !important}.tab-btn.active{color:#1a1a1a !important;background:#fff !important;border-color:#e8e8e8 !important}.tab-panel{color:#1a1a1a !important;padding:16px 20px;background:#fff}
.game-description{color:#1a1a1a !important;background:#fff;padding:16px 20px;border-radius:12px;line-height:1.7;font-size:15px}.desc-short p,.desc-full p{color:#1a1a1a !important;margin-bottom:12px}.toggle-desc{color:#5f5ff6 !important;text-decoration:none;font-weight:600;padding:6px 14px;border-radius:8px;background:#f2f5f9;display:inline-block;margin-top:10px;transition:all .3s}.toggle-desc:hover{background:#5f5ff6;color:#fff !important}.game-instructions{color:#1a1a1a !important;padding:16px 20px;background:#fff;border-radius:12px}.game-instructions p{color:#1a1a1a !important;margin:8px 0;padding-left:18px;position:relative}.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.tag-list .tag a{background:#f2f5f9 !important;color:#1a1a1a !important;border:1px solid #e8e8e8 !important;padding:6px 12px;border-radius:20px;text-decoration:none;transition:all .3s;font-size:13px}.tag-list .tag a:hover{background:#5f5ff6 !important;color:#fff !important;border-color:#5f5ff6 !important}.related{color:#1a1a1a !important;margin-top:30px}.related h3{color:#1a1a1a !important;font-size:22px;font-weight:700;margin-bottom:16px}.related .card{background:#fff !important;border:1px solid #e8e8e8 !important;border-radius:16px !important;overflow:hidden;transition:all .3s}.related .card:hover{border-color:#5f5ff6;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.related .title{color:#1a1a1a !important;font-size:14px;font-weight:600;padding:2px}.related .meta2{color:#666 !important;font-size:12px;padding:0 10px 10px}.side{color:#1a1a1a !important}.side .box{background:#fff !important;border:1px solid #e8e8e8 !important;border-radius:14px !important;padding:16px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}.side .box h3{color:#1a1a1a !important;font-size:16px;font-weight:700;margin:0 0 12px}.toplist{display:grid;gap:8px}.topitem{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:#f9f9f9;text-decoration:none;transition:all .3s;color:#1a1a1a !important}.topitem:hover{background:#f2f5f9;transform:translateX(4px)}.topitem img{width:50px;height:50px;border-radius:8px;object-fit:cover}.topitem .t{color:#1a1a1a !important;font-weight:600;font-size:13px;flex:1}.topitem .c{color:#666 !important;font-size:12px}
btn{display:inline-block;padding:8px 14px;border-radius:10px;border:1px solid #6366f1;color:#fff;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.btn--ghost {
  position: relative;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #e6e7ff;
  background: linear-gradient(135deg, #2d2f45, #1e2030);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  cursor: pointer;
  transition: 
    background 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
}


.cateBtn{
    position: relative;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #0c1fec
    border-radius: 10px;
        background: rgb(122 223 156 / 20%);
    backdrop-filter: blur(6px);
    transition: all .35s ease;
    overflow: hidden;
}

/* hover ışık efekti */
.cateBtn::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
    transform: translateX(-100%);
    transition: .4s;
}

.cateBtn:hover::after{
    transform: translateX(100%);
}

.cateBtn:hover{
    color:#fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
}

/* 🔥 CATEGORY ÖZEL TASARIM */
.cate-main{
    background: linear-gradient(135deg, #ff8a00, #ff3d00);
    color:#fff;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 14px;
    box-shadow: 0 0 0 rgba(255,138,0,0);
    animation: pulseGlow 2.5s infinite;
}

/* Category ikon hissi */
.cate-main::before{
    content:"🎮";
    margin-right:8px;
}

/* Category hover */
.cate-main:hover{
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 35px rgba(255,90,0,.65);
}

/* Parlama animasyonu */
@keyframes pulseGlow{
    0%{ box-shadow: 0 0 0 rgba(255,138,0,.2); }
    50%{ box-shadow: 0 0 25px rgba(255,138,0,.75); }
    100%{ box-shadow: 0 0 0 rgba(255,138,0,.2); }
}

/* MOBİL */
@media(max-width:600px){
    .navige{
        flex-wrap: wrap;
        gap:10px;
    }
    .cateBtn{
        font-size:13px;
        padding:9px 18px;
    }
}

.footer-column a {
    color: rgb(102, 179, 255);
    text-decoration: none;
    transition: color 0.2s;
}
.site-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.site-page-link {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;

    border: 1px solid #e2e8f0;
    background: #ffffff;

    transition: 
        background 0.35s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* Hover */
.site-page-link:hover {
    color: #ffffff;
    border-color: transparent;

    background: linear-gradient(
        135deg,
        #3b82f6,
        #6366f1
    );

    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35);
}

/* Mobil */
@media (max-width: 768px) {
    .site-pages {
        justify-content: center;
    }
}

.trend-herom-title {
    font-size: 16px;
    font-weight: 600;
    margin: 6px 0;
    color: #fff !important;
    position: relative;
    padding-bottom: 6px;
}

.trend-herom-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, #22d3ee, #6366f1);
    border-radius: 3px;
}


/* 🔹 Load More Button Wrapper */
.load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 24px auto 0;
    padding: 12px 28px;

    background: linear-gradient(135deg, #ff7a18, #ffb347);
    color: #fff;

    font-size: 15px;
    font-weight: 600;

    border: none;
    border-radius: 999px;
    cursor: pointer;

    transition: all 0.25s ease;
}

/* Ortalama garantisi */
#newGamesBox .load-more-btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Hover */
.load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255, 122, 24, 0.35);
}

/* Loading state */
.load-more-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Mobile */
@media (max-width: 768px) {
  #newGamesBox .load-more-btn {
		display:none;
        width: 90%;
        padding: 14px;
        font-size: 14px;
    }
}

.page-content {
  padding: 30px;
}
.trend-header {
  text-align: center;
  margin-bottom: 20px;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  gap: 14px;
}
.card {
  background: #1e2030;
  border: 1px solid #2d2f45;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s;
}
.card:hover { transform: scale(1.05); }
.thumb img { width: 100%; height: auto; display: block; }
.title { font-size: 14px; color: #fff; padding: 6px 0; }
.views { color: #aaa; font-size: 12px; padding-bottom: 8px; }
/* ==== TRENDING PAGE IMAGE FIX ==== */
.trending-page-thumb {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1; /* kare oran sabiti (dilersen 4/3 veya 16/9 yapabiliriz) */
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}

.trending-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* resmi orantılı kırpar ve kutuyu tam doldurur */
  object-position: center; /* ortalayıp kırpar */
  transition: transform 0.4s ease;
  display: block;
}

.card:hover .trending-page-thumb img {
  transform: scale(1.08);
}
/* ==== TRENDING PAGE FINAL DESIGN ==== */
.trend-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 0px;
}

/* === Card === */
.trend-card {
  background: #2a2c45;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
  position: relative;
}

.trend-card:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}

/* === Thumbnail === */
.trend-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.trend-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.trend-card:hover .trend-thumb img {
  transform: scale(1.1);
}

/* === Overlay (hover text) === */
.trend-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.trend-card:hover .trend-overlay {
  opacity: 1;
}

.trend-overlay-content {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  padding: 10px;
  text-align: center;
}

.trend-overlay-title {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.trend-overlay-views {
  font-size: 12px;
  color: #ccc;
}

/* === Info area (below image) === */
.trend-info {
  background: #24263a;
  padding: 10px 12px 12px;
  text-align: center;
}

.trend-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trend-views {
  font-size: 12px;
  color: #bbb;
}

/* === Responsive === */
@media (max-width: 768px) {
  .trend-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .trend-title {
    font-size: 13px;
  }

  .trend-thumb {
    aspect-ratio: 1 / 1;
  }
}

.seo-text{
color:#bbb;
margin:10px auto 20px;
max-width:800px;
text-align:center;
}

.seo-bottom-text{
margin-top:40px;
color:#ccc;
line-height:1.7;
}

.seo-links{
margin-top:30px;
text-align:center;
}

.seo-links a{
margin:0 10px;
color:#9ecbff;
}

.rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: 14px;
}

.stars-back {
  color: #ccc;
}

.stars-front {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffc107;
}

.rating-number {
  font-weight: 600;
  color: #ffc107;
}
.home-seo-block {
  margin: 0px auto;
  padding: 20px 15px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e9edf3;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  line-height: 1.9;
  transition: all 0.3s ease;
}

.home-seo-block:hover {
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.09);
}

.home-seo-block h2 {
  font-size: 28px;
  margin-bottom: 20px;
  font-weight: 700;
  color: #111;
  text-transform: none !important;
}

.home-seo-block p {
  font-size: 16px;
  color: #444;
}
.home-seo-block a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(37, 99, 235, 0.2);
  transition: all 0.2s ease;
}

.home-seo-block a:hover {
  color: #1d4ed8;
  border-bottom: 2px solid #1d4ed8;
}

* Sayfalama için CSS */
.pagination-wrapper {
  margin-top: 20px; /* Üst boşluk ekleyerek kategori oyunlarının altında yer almasını sağlar */
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Sayfalama elemanlarının sığmaması durumunda bir alt satıra geçmesini sağlar */
  width: 100%; /* Sayfalama geniÅŸliÄŸini tam yap */
  overflow-x: auto; /* Taşmayı önlemek için yatay kaydırma ekle */
  padding: 10px 0;
}

.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  border-radius: 5px;
  margin: 0;
}

.pagination .page-item {
  margin: 5px; /* Elemanlar arasına boşluk bırakır */
}

.pagination .page-link {
  color: #007bff; /* Link rengi */
  background-color: white;
  border: 1px solid #ddd;
  padding: 8px 15px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap; /* Sayfa linklerinin tek satırda kalmasını sağlar */
}

.pagination .page-link:hover {
  background-color: #007bff; /* Ãœzerine gelince arka plan rengi */
  color: white;
  text-decoration: none;
}

.pagination .page-item.active .page-link {
  background-color: #007bff;
  border-color: #007bff;
  color: white;
}

.pagination .page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

/* Mobil uyum için responsive düzenlemeler */
@media (max-width: 999px) {
  .page-link {
	  
    padding: 6px 12px;
    font-size: 14px;
  }
.pagination {
  justify-content: center;
  list-style: none;
  border-radius: 5px;
  margin: 0;
}
  .pagination .page-item {
    margin: 3px;
  }
}

@media (max-width: 576px) {
  .pagination .page-link {
    padding: 5px 10px;
    font-size: 13px;
  }

  .pagination .page-item {
    margin: 2px;
  }
}

/* Home grids: same card layout on desktop and mobile */
.main .gameBox .gameList,
.main .gameBox .bestList{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
}
.main .gameBox .gameList>li,
.main .gameBox .bestList>li{
  width:auto;
  margin:0;
  display:block;
  background:transparent;
  padding-top:0;
}
.main .gameBox .gameList>li:nth-child(n),
.main .gameBox .bestList>li:nth-child(n){
  margin-right:0;
  display:block;
}
.main .gameBox .gameList>li>a{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
}
.main .gameBox .gameList>li>a .thumb{
  width:100%;
  height:auto;
  aspect-ratio:1;
  margin:0;
  border-radius:16px;
}
.main .gameBox .gameList>li>a .thumb>img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.main .gameBox .gameList>li>a>dl{
  width:100%;
  margin-top:8px;
}
.main .gameBox .bestList>li>a>dl>dt,
.main .gameBox .gameList>li>a>dl>dt{
  -webkit-line-clamp:2;
  min-height:2.6em;
}
@media (max-width: 1181px){
  .main .gameBox .gameList,
  .main .gameBox .bestList{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .main .gameBox .bestList>li:nth-child(n+7){
    display:block;
  }
}
@media (max-width: 767px){
  .main .gameBox{
    padding:14px 12px 18px;
  }
  .main .gameBox .gameList,
  .main .gameBox .bestList{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .main .gameBox .gameList>li:nth-child(n+7),
  .main .gameBox .bestList>li:nth-child(n+7){
    display:block;
  }
  .main .title>h2{
    font-size:18px;
  }
  #newGamesBox .load-more-btn{
    display:block;
    width:calc(100% - 8px);
    margin:16px auto 0;
    padding:14px;
  }
}

.main .gc-section{margin-top:48px;font-family:Inter,Segoe UI,Arial,sans-serif;color:#202633;--gc-color:#e78039;--gc-soft:#fff1e5}
.main .gc-section a{color:inherit}
.main .gc-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.main .gc-heading{display:flex;align-items:center;gap:13px;min-width:0}
.main .gc-icon{display:grid;place-items:center;background:var(--gc-soft);color:var(--gc-color);width:43px;height:43px;border-radius:13px;font-size:20px;flex-shrink:0}
.main .gc-heading h2{font-family:"Fraunces",Georgia,serif;font-weight:560;font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 48,"wght" 560;font-size:28px !important;letter-spacing:-.03em;margin:0 0 5px;line-height:1.1;text-transform:none}
.main .gc-heading p{font-size:12px;color:#85909e;margin:0;line-height:1.5}
.main .gc-more{border:1px solid #e5e8ed;border-radius:10px;padding:11px 14px;font-size:11px;font-weight:650;background:#fff;color:#465160 !important;text-decoration:none;white-space:nowrap}
.main .gc-more:hover{background:var(--gc-soft);border-color:var(--gc-color);color:#465160 !important}
.main .gc-more span{margin-left:13px;color:var(--gc-color)}
.main .gc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}
.main .gc-card{display:block;color:inherit;text-decoration:none;background:#fff;border:1px solid #e8ecf0;border-radius:15px;overflow:hidden;box-shadow:0 4px 14px #283d5704;transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0}
.main .gc-card:hover{transform:translateY(-5px);box-shadow:0 12px 24px #253a5310;border-color:#d2dbe5}
.main .gc-image{position:relative;aspect-ratio:1.18;overflow:hidden;background:#eef2f5}
.main .gc-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.main .gc-card:hover img{transform:scale(1.055)}
.main .gc-tag{position:absolute;top:10px;left:10px;background:#fffffff0;border:1px solid #ffffffb3;color:#5d5143;border-radius:6px;padding:5px 7px;font-size:9px;font-weight:750;box-shadow:0 2px 8px #00000007}
.main .gc-hover-play{position:absolute;bottom:10px;right:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#283d32;box-shadow:0 3px 12px #00000014;font-size:11px;opacity:0;transform:translateY(5px);transition:.2s}
.main .gc-card:hover .gc-hover-play,.main .gc-card:focus-visible .gc-hover-play{opacity:1;transform:none}
.main .gc-body{padding:13px 13px 12px}
.main .gc-title{margin:0;font-size:13px !important;line-height:1.5;font-weight:700 !important;height:39px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;letter-spacing:-.1px;text-transform:none}
.main .gc-category{font-size:10px;color:#8c96a4;margin:8px 0 12px}
.main .gc-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:10px;border-top:1px solid #f0f2f5;font-size:10px;color:#85909e}
.main .gc-rating{font-weight:700;color:#586272}
.main .gc-rating span{color:#eaa74c;margin-right:3px}
.main .gc-load-row{display:flex;align-items:center;justify-content:center;margin-top:24px;gap:20px}
.main .gc-load-row:before,.main .gc-load-row:after{content:'';height:1px;background:#e7ebf1;flex:1}
.main .gc-load{font:600 12px Inter,Segoe UI,Arial,sans-serif;color:#566270;border:1px solid #dfe5ec;background:#fff;padding:13px 24px;border-radius:10px;cursor:pointer}
.main .gc-load:hover{background:#f0f6f2;border-color:#aabdb0}
.main .gc-note{font-size:10px;color:#99a3af;text-align:center;margin:12px 0 0}
.main .gc-section a:focus-visible,.main .gc-section button:focus-visible{outline:2px solid var(--gc-color);outline-offset:4px}
.main .gc-best{--gc-color:#b88832;--gc-soft:#fff5dd}
.main .gc-new{--gc-color:#57836a;--gc-soft:#edf5ed}
.main .gc-editor{--gc-color:#8b76b4;--gc-soft:#f2edf9}
@media(max-width:1100px){.main .gc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.main .gc-section{margin-top:35px}.main .gc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.main .gc-heading h2{font-size:21px !important}.main .gc-heading p{font-size:11px}.main .gc-icon{width:36px;height:36px;border-radius:10px}.main .gc-heading{gap:10px}.main .gc-body{padding:10px}.main .gc-title{font-size:12px !important;height:36px}.main .gc-more{padding:10px;font-size:10px}.main .gc-more span{margin-left:5px}.main .gc-header{gap:10px}.main .gc-meta{font-size:9px}.main .gc-hover-play{opacity:1;transform:none}}
@media(max-width:480px){.main .gc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.main .gc-tag{font-size:8px;top:8px;left:8px}.main .gc-heading p{max-width:180px}.main .gc-icon{display:none}}
@media(prefers-reduced-motion:reduce){.main .gc-section *{transition:none !important}}
.main .gc-section{padding:27px;background:linear-gradient(180deg,var(--hot-a),var(--hot-b));border:1px solid var(--line);border-radius:23px;box-shadow:0 8px 20px #2d405708;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}
.main .gc-best{background:linear-gradient(180deg,var(--best-a),var(--best-b))}
.main .gc-new{background:linear-gradient(180deg,var(--new-a),var(--new-b))}
.main .gc-editor{background:linear-gradient(180deg,var(--edit-a),var(--edit-b))}
.main .gc-header{margin-bottom:23px;padding:0 0 21px;border-bottom:1px solid var(--line);position:relative;height:auto;align-items:center}
.main .gc-header:has(.gc-more){padding-right:150px}
.main .gc-more{position:absolute;top:50%;right:0;transform:translateY(-50%)}
@media(max-width:760px){.main .gc-header:has(.gc-more){padding-right:112px}}
.main .gc-header::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:3px;border-radius:3px;background:var(--gc-color)}
.main .gc-heading h2{font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif !important;font-weight:800 !important;font-variation-settings:normal;font-size:27px !important;letter-spacing:-1px;color:#202633 !important}
.main .gc-icon{width:46px;height:46px;border:1px solid color-mix(in srgb,var(--gc-color) 28%,#fff);background:var(--gc-soft);border-radius:14px}
.main .gc-icon svg{display:block}
.main .gc-grid{gap:13px}
.main .gc-card{padding:8px;background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:none;overflow:visible}
.main .gc-card:hover{background:var(--card-hover);border-color:var(--line-hover);box-shadow:none;transform:translateY(-3px)}
.main .gc-hot .gc-card:hover{background:var(--chip);border-color:var(--chip-line)}
.main .gc-best .gc-card:hover{background:var(--best-b);border-color:var(--line-hover)}
.main .gc-new .gc-card:hover{background:var(--new-b);border-color:var(--line-hover)}
.main .gc-editor .gc-card:hover{background:var(--edit-b);border-color:var(--line-hover)}
.main .gc-image{aspect-ratio:1.38;border-radius:9px}
.main .gc-body{padding:11px 5px 3px}
.main .gc-title{font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif !important;font-weight:700 !important;letter-spacing:-.25px;font-size:13px !important;line-height:1.4;height:37px;color:#273342 !important}
.main .gc-section .gc-card .gc-category{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 7px;border:1px solid var(--category-border,#dde5ef);border-radius:6px;background:var(--category-bg,#edf2f8) !important;color:var(--category-text,#59718d) !important;font:600 9px "Segoe UI",Arial,sans-serif;line-height:1.2;margin:7px 0 10px}
.main .gc-category-icon{width:12px;height:12px;flex-shrink:0}
.main .gc-category[data-category="action"]{--category-bg:#fff0e9;--category-text:#a85e38;--category-border:#f2dace}
.main .gc-category[data-category="racing"]{--category-bg:#eaf2ff;--category-text:#4b70ab;--category-border:#d6e3f6}
.main .gc-category[data-category="sports"]{--category-bg:#eaf5ed;--category-text:#4b805b;--category-border:#d4e8db}
.main .gc-category[data-category="adventure"]{--category-bg:#f2ecfb;--category-text:#8062a7;--category-border:#e3d9f3}
.main .gc-category[data-category="arcade"]{--category-bg:#fff5db;--category-text:#94742e;--category-border:#eddfb8}
.main .gc-category[data-category="multiplayer"]{--category-bg:#e7f5f4;--category-text:#427e7c;--category-border:#cde7e4}
.main .gc-meta{border-top:1px solid #e8edf2;font-size:9px;padding-top:9px;font-family:"Segoe UI",Arial,sans-serif}
.main .gc-meta>span:last-child::before{content:"◉";font-size:9px;margin-right:5px;color:#a0acb9}
.main .gc-rank{position:absolute;top:7px;left:7px;z-index:1;display:flex;gap:2px;align-items:baseline;padding:5px 7px;border-radius:6px;background:#fffffff0;color:#8b632d;font-size:12px;font-weight:800;border:1px solid #ffffffaf;box-shadow:0 3px 12px #24314412}
.main .gc-rank small{font-size:9px;opacity:.65}
.main .gc-rank-2{color:#6e7e93}
.main .gc-rank-3{color:#a4795e}
.main .gc-hover-play{width:28px;height:28px;right:8px;bottom:8px;font-size:9px;background:#fffaf3;color:#b47a42;border:1px solid #ffffffb3}
@media(max-width:760px){.main .gc-section{padding:19px}.main .gc-heading h2{font-size:21px !important}}
@media(max-width:480px){.main .gc-section{padding:14px;border-radius:17px}.main .gc-card{padding:6px}.main .gc-heading p{max-width:140px;font-size:9px}.main .gc-grid{gap:11px}.main .gc-title{font-size:12px !important;height:34px}.main .gc-meta{font-size:8px}.main .gc-section .gc-card .gc-category{font-size:8px;gap:4px;padding:4px 6px}.main .gc-category-icon{width:11px;height:11px}}
.navige .cate-main{border:0;cursor:pointer;font-family:inherit}
.categoryBox.act{display:block}
.categoryBox .box{width:min(460px,100%);height:100%;padding:22px 18px 24px;background:#fff;border-right:1px solid #e6ebf1;box-shadow:16px 0 40px #1a24331f;display:flex;flex-direction:column}
.categoryBox .cat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.categoryBox .cat-head h3{margin:0;text-align:left;font-size:24px;letter-spacing:-.4px;color:#202633 !important}
.categoryBox .cat-head p{margin:4px 0 0;font-size:13px;color:#7d8998}
.categoryBox .cat-close{width:36px;height:36px;border:1px solid #e6ebf1;border-radius:10px;background:#fff;color:#243044;font-size:22px;line-height:1;cursor:pointer;flex-shrink:0}
.categoryBox .cat-search{display:block;margin:16px 0 14px}
.categoryBox .cat-search input{width:100%;height:44px;border:1px solid #e1e7ee;border-radius:12px;padding:0 14px;font:15px "Segoe UI",Arial,sans-serif;color:#243044;background:#f7f9fb}
.categoryBox .cat-search input:focus{outline:2px solid #efb27a;border-color:#efb27a}
.categoryBox .box nav{min-height:0;overflow:auto;padding-right:4px}
.categoryBox .box .listNav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}
.categoryBox .box .listNav>li{margin:0 !important}
.categoryBox .box .listNav>li>a{display:block;padding:11px 12px;border-radius:11px;background:#f6f8fb;border:1px solid #e7edf3;color:#243044 !important;font-size:13px;font-weight:700;text-decoration:none;line-height:1.3}
.categoryBox .box .listNav>li>a:hover,.categoryBox .box .listNav>li>a:focus-visible{background:#fff4e8;border-color:#efd0a9;color:#9a5b24 !important}
.categoryBox .cat-empty{margin:12px 0 0;color:#8b97a6;font-size:13px}
.categoryBox .cat-all{display:block;margin-top:14px;text-align:center;padding:12px;border-radius:12px;background:#293c2d;color:#fff !important;font-weight:700;text-decoration:none}
.categoryBox .cat-all:hover{background:#38523d}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:520px){.categoryBox .box .listNav{grid-template-columns:1fr}}
.categoryBox{
  position:fixed;
  inset:auto;
  top:var(--cat-top,128px);
  left:var(--cat-left,16px);
  width:var(--cat-width,min(560px,calc(100vw - 24px)));
  height:auto;
  max-height:calc(100vh - var(--cat-top,128px) - 110px);
  background:transparent;
  z-index:35;
}
.categoryBox .box{
  position:relative;
  top:auto;
  left:auto;
  width:100%;
  height:auto;
  max-height:calc(100vh - var(--cat-top,128px) - 110px);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 16px 36px #1a243322;
}
html:root {
  --page: #F0F4F8;
  --bar: #ffffff;
  --section-a: #F7FAFD;
  --section-b: #EEF4FA;
  --card: #FCFDFE;
  --line: #DFE7F0;
  --card-hover: #F4F8FC;
  --line-hover: #C9D6E4;
  --hot-a: #F7FAFD;
  --hot-b: #EEF4FA;
  --best-a: #F6F3FB;
  --best-b: #EEE8F6;
  --new-a: #F3F8F5;
  --new-b: #E7F2EC;
  --edit-a: #F5F2FA;
  --edit-b: #EDE6F6;
  --wash-a: #EFF8F1;
  --wash-b: #FFF7ED;
  --chip: #FFF4E8;
  --chip-line: #EFD0A9;
}
html[data-tone="slate"] {
  --page: #D5DEE8;
  --bar: #E4EBF3;
  --section-a: #E3EBF3;
  --section-b: #D4DFEB;
  --card: #E8EEF5;
  --line: #C5D2E0;
  --card-hover: #DCE7F2;
  --line-hover: #B7C9DC;
  --hot-a: #E3EBF3;
  --hot-b: #D4DFEB;
  --best-a: #E6E2F0;
  --best-b: #D9D2E8;
  --new-a: #DCEBE3;
  --new-b: #D0E2D8;
  --edit-a: #E4DFF0;
  --edit-b: #D8D0E6;
  --wash-a: #D6E4DC;
  --wash-b: #E4D8CC;
  --chip: #F3E6D8;
  --chip-line: #E2C4A8;
}
html[data-tone="mint"] {
  --page: #D3E4DA;
  --bar: #E2EFE7;
  --section-a: #D7E8DE;
  --section-b: #C9DCCF;
  --card: #E3EFE8;
  --line: #B7CFC2;
  --card-hover: #D2E4D8;
  --line-hover: #A3C4B0;
  --hot-a: #D7E8DE;
  --hot-b: #C9DCCF;
  --best-a: #D5E4DC;
  --best-b: #C4D8CE;
  --new-a: #CDE3D6;
  --new-b: #BDD6C8;
  --edit-a: #D9E3DE;
  --edit-b: #C9D6D0;
  --wash-a: #C9DDD2;
  --wash-b: #E4D8C4;
  --chip: #E7F0D8;
  --chip-line: #C5D6A4;
}
html[data-tone="sand"] {
  --page: #E6D9C8;
  --bar: #F0E4D4;
  --section-a: #EADCCB;
  --section-b: #E0D0BA;
  --card: #F3E7D8;
  --line: #D4C2A8;
  --card-hover: #E8D5BE;
  --line-hover: #C9B08E;
  --hot-a: #EADCCB;
  --hot-b: #E0D0BA;
  --best-a: #E7D8C8;
  --best-b: #DCC8B2;
  --new-a: #E3D8C6;
  --new-b: #D6C8B0;
  --edit-a: #E8D9CC;
  --edit-b: #DCC6B6;
  --wash-a: #E3D3BE;
  --wash-b: #E8CDB4;
  --chip: #F0D8C0;
  --chip-line: #E0B48E;
}
html[data-tone="lilac"] {
  --page: #DDD6E8;
  --bar: #E8E2F1;
  --section-a: #E4DCEC;
  --section-b: #D5CCE2;
  --card: #EBE6F3;
  --line: #C9BED8;
  --card-hover: #DDD4EA;
  --line-hover: #B7A8CC;
  --hot-a: #E4DCEC;
  --hot-b: #D5CCE2;
  --best-a: #E0D6EC;
  --best-b: #D0C4E0;
  --new-a: #D9DCE8;
  --new-b: #C9CEDC;
  --edit-a: #E6DCEC;
  --edit-b: #D4C6E0;
  --wash-a: #D9D0E4;
  --wash-b: #E6D4C8;
  --chip: #EAD8EE;
  --chip-line: #D0B4D6;
}
html,
body {
  background: var(--page);
}
header {
  background: var(--bar);
}
.tone-picks {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.tone-pick {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--swatch);
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
}
.tone-pick[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #243044;
}
header.site-head {
  height: auto;
  background: linear-gradient(110deg, #fff4e8, #f7fbff 46%, #e7f6ee);
  border-bottom: 0;
  box-shadow: 0 6px 22px #3a536612;
  position: relative;
  z-index: 40;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}
.site-head-main,
.site-nav {
  max-width: 1390px;
  width: calc(100% - 30px);
  margin: 0 auto;
}
.site-head-main {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 78px;
  padding: 12px 0;
}
.site-logo {
  flex-shrink: 0;
  display: block;
  width: 168px;
}
.site-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.site-search {
  position: relative;
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 8px 5px 14px;
  background: #ffffffc7;
  border: 1px solid #f0d2b4;
  border-radius: 14px;
}
.site-search svg {
  width: 18px;
  height: 18px;
  color: #d4894a;
  flex-shrink: 0;
}
.site-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  min-width: 0;
  color: #34465e;
  font-size: 14px;
  padding: 9px 0;
}
.site-search input::placeholder {
  color: #8596a9;
}
.site-search:focus-within {
  border-color: #e6ae7f;
  box-shadow: 0 0 0 3px #f4dcc254;
}
.site-search #results {
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #e4d3c2;
  border-radius: 12px;
  color: #243044;
  box-shadow: 0 12px 28px #24304418;
}
.site-search .search-result {
  border-bottom-color: #f0e6dc;
}
.site-search .search-result:hover {
  background: #fff4e8;
}
.site-search .search-result a {
  color: #243044;
}
.site-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.site-head .tone-picks {
  margin-right: 2px;
}
.site-head .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-head .action-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #f0d7bc;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.site-head .like-btn {
  color: #c56b3a;
  background: #fff1e4;
}
.site-head .thumbs-btn {
  color: #3f8f68;
  background: #e8f6ee;
  border-color: #c9e4d4;
}
.site-head .action-btn i {
  color: inherit;
}
.site-head .login-btn {
  padding: 10px 16px;
  border-radius: 12px;
  background: #3b82f6;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.site-head .imgg {
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #d7c4ea;
}
.site-menu {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #d7c4ea;
  background: #f6f0fb;
  color: #7a4d86;
  cursor: pointer;
  font-size: 18px;
}
.site-nav-wrap {
  background: linear-gradient(90deg, #ffe8d2, #f4f7e8 42%, #e5f4ea 78%, #efe6f8);
  border-top: 1px solid #f0dcc8;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
}
.site-nav a,
.site-nav button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 14px;
  border: 0;
  background: transparent;
  color: #5d7086;
  font: 700 12px "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.site-nav a::before,
.site-nav button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5d0dc;
  flex-shrink: 0;
}
.site-nav .site-nav-cat {
  color: #b86a32;
}
.site-nav .site-nav-cat::before {
  background: #e89a45;
}
.site-nav .site-nav-trend {
  color: #c56a28;
}
.site-nav .site-nav-trend::before {
  background: #eda05b;
}
.site-nav .site-nav-new {
  color: #3d7a58;
}
.site-nav .site-nav-new::before {
  background: #5a9a62;
}
.site-nav .site-nav-blog {
  color: #7a4d86;
}
.site-nav .site-nav-blog::before {
  background: #b07ab8;
}
.site-nav a:hover,
.site-nav button:hover,
.site-nav .is-on {
  color: #c67d40;
  background: #fff6ec;
}
.site-nav .is-on::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #eda05b;
}
.site-nav-end {
  margin-left: auto;
  color: #8a9a86;
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .site-nav-end {
    display: none;
  }
}
@media (max-width: 860px) {
  .site-head-main,
  .site-nav {
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }
  .site-head-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo tools"
      "search search";
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .site-logo {
    grid-area: logo;
    width: auto;
    max-width: 150px;
  }
  .site-logo img {
    width: auto;
    max-width: 150px;
    max-height: 46px;
    object-fit: contain;
    object-position: left center;
  }
  .site-tools {
    grid-area: tools;
    margin-left: 0;
    gap: 8px;
  }
  .site-search {
    grid-area: search;
    max-width: none;
    margin: 0;
    width: 100%;
  }
  .site-head .tone-picks,
  .site-head .like-btn,
  .site-head .thumbs-btn,
  .site-menu {
    display: none;
  }
  .site-nav {
    min-height: 44px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    gap: 2px;
  }
  .site-nav::-webkit-scrollbar {
    display: none;
  }
  .site-nav .site-nav-more {
    display: inline-flex;
  }
  .site-nav a,
  .site-nav button {
    padding: 12px 11px;
    font-size: 12px;
  }
}