/* ===== MK体育在线官网-MK体育（中国）公共样式 ===== */

/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Courier New',Courier,monospace;background:#FCE4EC;color:#3E1022;line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:#F06292;transition:all .3s ease}
a:hover{color:#3E1022}
img{max-width:100%;height:auto;display:block}
.container{width:92%;max-width:1200px;margin:0 auto;padding:0 15px}

/* ===== Header & Navigation ===== */
.header{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:18px 0;transition:all .4s ease}
.header.scrolled{background:rgba(62,16,34,.95);backdrop-filter:blur(10px);padding:12px 0}
.header.solid{background:rgba(62,16,34,.95);backdrop-filter:blur(10px)}
.nav-wrap{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:22px;font-weight:700;color:#fff;letter-spacing:2px;text-transform:uppercase}
.logo span{color:#F06292}
.nav-pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nav-pill{display:inline-block;padding:8px 20px;border-radius:50px;background:rgba(255,255,255,.15);color:#fff;font-size:13px;letter-spacing:1px;border:1px solid rgba(255,255,255,.25);transition:all .3s ease;white-space:nowrap}
.nav-pill:hover{background:#F06292;border-color:#F06292;color:#fff}
.nav-pill.active{background:#F06292;border-color:#F06292}

/* ===== Page Hero (通用页面标题区) ===== */
.page-hero{position:relative;width:100%;padding:140px 0 70px;background:linear-gradient(135deg,#3E1022 0%,#6d1b3a 100%);text-align:center;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:url('/images/banner2.webp') center/cover no-repeat;opacity:.12;z-index:1}
.page-hero-content{position:relative;z-index:2}
.page-hero .section-label{display:inline-block;padding:5px 18px;border-radius:50px;background:rgba(240,98,146,.2);color:#F8BBD0;font-size:12px;letter-spacing:3px;margin-bottom:14px;border:1px solid rgba(240,98,146,.35);text-transform:uppercase}
.page-hero h1{font-size:38px;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:3px;text-transform:uppercase}
.page-hero p{color:#e0b8c8;font-size:15px;letter-spacing:1px}
.page-hero .article-meta{display:flex;justify-content:center;gap:20px;font-size:12px;color:#c08a9e;margin-bottom:14px;flex-wrap:wrap;letter-spacing:1px}
.page-hero .article-meta span{display:flex;align-items:center;gap:6px}
.page-hero .article-meta + h1{margin-top:0}
.breadcrumb{position:relative;z-index:2;margin-top:20px;display:flex;justify-content:center;gap:8px;font-size:13px;color:#c08a9e;flex-wrap:wrap}
.breadcrumb a{color:#F8BBD0}
.breadcrumb a:hover{color:#F06292}
.breadcrumb span{color:#8d5a6e}

/* ===== Buttons ===== */
.btn-pill{display:inline-block;padding:14px 36px;border-radius:50px;font-size:14px;letter-spacing:2px;text-transform:uppercase;transition:all .3s ease;border:2px solid transparent;cursor:pointer;font-family:'Courier New',Courier,monospace;font-weight:700}
.btn-primary{background:#F06292;color:#fff;border-color:#F06292}
.btn-primary:hover{background:#e91e63;border-color:#e91e63;transform:translateY(-2px);box-shadow:0 8px 25px rgba(240,98,146,.4)}
.btn-outline{background:transparent;color:#F06292;border-color:#F06292}
.btn-outline:hover{background:#F06292;color:#fff}

/* ===== Section Headings ===== */
.section-head{text-align:center;margin-bottom:50px}
.section-label{display:inline-block;padding:5px 18px;border-radius:50px;background:rgba(240,98,146,.12);color:#F06292;font-size:12px;letter-spacing:3px;margin-bottom:14px;border:1px solid rgba(240,98,146,.25);text-transform:uppercase}
.section-title{font-size:32px;font-weight:700;color:#3E1022;margin-bottom:10px;letter-spacing:2px;text-transform:uppercase}
.section-sub{font-size:14px;color:#8d4f64;letter-spacing:1px}

/* ===== Footer ===== */
.footer{background:#3E1022;padding:45px 0 25px;position:relative}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px;margin-bottom:35px}
.footer-brand .logo{color:#fff;margin-bottom:14px;display:inline-block}
.footer-brand p{font-size:13px;color:#c08a9e;line-height:1.7;margin-bottom:16px}
.footer-contact p{font-size:13px;color:#c08a9e;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.footer-title{font-size:14px;font-weight:700;color:#F06292;margin-bottom:16px;letter-spacing:1px;text-transform:uppercase}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:13px;color:#c08a9e;transition:all .3s ease}
.footer-links a:hover{color:#F06292;padding-left:4px}
.footer-bottom{border-top:1px solid rgba(240,98,146,.2);padding-top:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:12px;color:#8d5a6e}
.footer-bottom a{font-size:12px;color:#F06292}

/* ===== Back to Top ===== */
.back-top{position:fixed;bottom:25px;right:25px;width:44px;height:44px;border-radius:50%;background:#F06292;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s ease;z-index:999;box-shadow:0 4px 15px rgba(240,98,146,.4)}
.back-top.visible{opacity:1;visibility:visible}
.back-top:hover{background:#e91e63;transform:translateY(-3px)}

/* ===== CTA Section ===== */
.cta-section{padding:60px 0;text-align:center;background:linear-gradient(135deg,#3E1022,#5c1830)}
.cta-section h2{font-size:28px;color:#fff;margin-bottom:12px;letter-spacing:2px;text-transform:uppercase}
.cta-section p{color:#e0b8c8;font-size:15px;margin-bottom:24px;letter-spacing:1px}

/* ===== Pagination ===== */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:35px;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-block;padding:8px 16px;border-radius:50px;font-size:13px;font-weight:700;transition:all .3s ease}
.pagination a{background:#fff;color:#3E1022;border:1px solid #f8bbd0}
.pagination a:hover{background:#F06292;color:#fff;border-color:#F06292}
.pagination span.current{background:#F06292;color:#fff}
.pagination .prev,.pagination .next{padding:8px 20px}

/* ===== Responsive ===== */
@media(max-width:768px){
.page-hero h1{font-size:28px}
.footer-grid{grid-template-columns:1fr 1fr;gap:25px}
.nav-pills{gap:6px}
.nav-pill{padding:6px 14px;font-size:11px}
.btn-pill{padding:12px 28px;font-size:13px;letter-spacing:1px}
.section-title{font-size:26px}
.cta-section h2{font-size:24px}
}
@media(max-width:480px){
.footer-grid{grid-template-columns:1fr}
.logo{font-size:18px}
.section-title{font-size:22px}
}