/* ============================================
   MK体育在线官网-MK体育（中国）- 公共样式
   common.css - 全站公共样式
   ============================================ */

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;line-height:1.6;color:#A0A0A0;background:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:#D5D8DC;text-decoration:none;transition:color .2s}a:hover{color:#FF6600}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{color:#FFF;line-height:1.2;font-weight:700;letter-spacing:-0.5px}
p{margin-bottom:1em}
.container{width:100%;max-width:1400px;margin:0 auto;padding:0 24px}
.section{padding:120px 0}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 32px;font-size:14px;font-weight:600;border-radius:50px;cursor:pointer;transition:all .3s;border:none;letter-spacing:.5px}
.btn-primary{background:#FF6600;color:#FFF}.btn-primary:hover{background:#FFF;color:#000}
.btn-outline{background:transparent;color:#D5D8DC;border:1px solid rgba(255,255,255,.2)}.btn-outline:hover{border-color:#FF6600;color:#FF6600}

/* 导航栏 - 透明悬浮 */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(0,0,0,.5);border-top:1px solid rgba(255,255,255,.1);transition:background .3s}
.header.scrolled{background:rgba(28,40,51,.95)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.header-logo{display:flex;align-items:center;gap:8px}
.header-logo img{height:40px;width:auto}
.header-logo span{font-size:20px;font-weight:900;color:#D5D8DC;letter-spacing:-1px}
.header-nav{display:flex;align-items:center;gap:36px}
.header-nav a{font-size:15px;font-weight:500;color:#D5D8DC;position:relative;padding:4px 0}
.header-nav a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#FF6600;transition:width .3s}
.header-nav a:hover::after{width:100%}
.header-nav a:hover{color:#FF6600}
.mobile-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.mobile-toggle span{display:block;width:24px;height:2px;background:#D5D8DC;transition:.3s}

/* Footer */
.footer{background:#1C2833;padding:60px 0 30px;border-top:1px solid rgba(255,255,255,.05)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand p{margin-top:16px;font-size:14px;line-height:1.8;color:#808080}
.footer-title{font-size:14px;font-weight:700;color:#FFF;margin-bottom:20px;text-transform:uppercase;letter-spacing:1px}
.footer-links li{margin-bottom:12px}
.footer-links a{font-size:14px;color:#808080;transition:color .2s}.footer-links a:hover{color:#FF6600}
.footer-contact li{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;font-size:14px;color:#808080}
.footer-contact svg{flex-shrink:0;margin-top:3px;stroke:#5D6D7E;width:16px;height:16px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.05);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#808080}
.footer-bottom a{color:#808080}.footer-bottom a:hover{color:#FF6600}

/* 页内标题区 */
.page-header{background:linear-gradient(135deg,#1C2833 0%,#111 100%);padding:160px 0 80px;text-align:center}
.page-header h1{font-size:42px;margin-bottom:16px}
.page-header p{color:#808080;font-size:16px}

/* 面包屑 */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#808080;margin-bottom:24px}
.breadcrumb a{color:#5D6D7E}.breadcrumb a:hover{color:#FF6600}
.breadcrumb .sep{color:#5D6D7E}

/* 卡片 */
.card{background:#141414;border-radius:16px;overflow:hidden;transition:transform .3s,border-color .3s;border:1px solid rgba(255,255,255,.05)}
.card:hover{transform:translateY(-4px);border-color:rgba(255,102,0,.2)}
.card-img{aspect-ratio:3/2;overflow:hidden;background:#1C2833}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:24px}
.card-title{font-size:18px;font-weight:700;color:#FFF;margin-bottom:12px;line-height:1.4}
.card-text{font-size:14px;color:#808080;line-height:1.7}
.card-meta{display:flex;align-items:center;gap:16px;font-size:13px;color:#5D6D7E;margin-top:16px}

/* 列表卡片 */
.list-card{display:flex;gap:24px;padding:24px;background:#141414;border-radius:12px;border:1px solid rgba(255,255,255,.05);margin-bottom:16px;transition:all .3s}
.list-card:hover{border-color:rgba(255,102,0,.2)}
.list-card-img{width:200px;height:140px;border-radius:8px;overflow:hidden;flex-shrink:0}
.list-card-img img{width:100%;height:100%;object-fit:cover}
.list-card-body{flex:1}
.list-card-title{font-size:18px;font-weight:700;color:#FFF;margin-bottom:8px}
.list-card-desc{font-size:14px;color:#808080;line-height:1.7;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list-card-meta{font-size:13px;color:#5D6D7E;display:flex;gap:16px}

/* 分页 */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:48px}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;font-size:14px;color:#808080;background:#141414;border-radius:8px;transition:all .2s}
.pagination a:hover{background:#FF6600;color:#FFF}
.pagination .current{background:#FF6600;color:#FFF}
.pagination .dots{cursor:default}

/* TAG标签 */
.tag{display:inline-flex;align-items:center;padding:6px 16px;font-size:13px;color:#D5D8DC;background:rgba(93,109,126,.15);border-radius:50px;transition:all .2s;margin:4px}
.tag:hover{background:#FF6600;color:#FFF}

/* 响应式 */
@media(max-width:768px){
.section{padding:80px 0}
.container{padding:0 16px}
.page-header{padding:120px 0 60px}
.page-header h1{font-size:28px}
.header-nav{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(28,40,51,.98);flex-direction:column;padding:24px;gap:0}
.header-nav.active{display:flex}
.header-nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.mobile-toggle{display:flex}
.footer-grid{grid-template-columns:1fr;gap:32px}
.footer-bottom{flex-direction:column;gap:12px;text-align:center}
.list-card{flex-direction:column}
.list-card-img{width:100%;height:200px}
}