/* =========================================
   DEF Website 完整样式表 (Kone 工业风)
   ========================================= */
:root { 
    --blue: #45b2d3; --yellow: #FFE817; --dark: #111; --gray: #555; 
    --light: #888; --white: #fff; --bg: #f9f9f9; --line: #e0e0e0; 
}

body { font-family: 'Inter', sans-serif; margin: 0; color: var(--dark); background: var(--white); line-height: 1.5; }
a { text-decoration: none; color: inherit; cursor: pointer; }

/* 顶部导航 */
.nav { border-bottom: 1px solid var(--line); padding: 16px 48px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; width: 100%; box-sizing: border-box; background: var(--white); z-index: 1000; }
.logo { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.logo img { height: 48px; object-fit: contain; }
.logo h1 { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.2; }
.logo span { font-size: 10px; color: var(--light); letter-spacing: 2px; }
.menu { display: flex; gap: 32px; align-items: center; font-size: 16px; font-weight: 500; }
.menu a:hover { color: var(--blue); }
.btn-y { background: var(--yellow); padding: 12px 28px; border-radius: 2px; font-weight: 600; color: var(--dark); border: none; cursor: pointer; font-family: inherit; font-size: 15px; transition: 0.2s; display: inline-block; text-align: center;}
.btn-y:hover { background: #E6D000; }

/* 页面容器 */
.page { display: none; padding: 110px 48px 60px; max-width: 1300px; margin: 0 auto; }
.page.active { display: block; }
.view { display: none; }
.view.active { display: block; animation: fade 0.3s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* 首页 */
.hero { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.hero-text { width: 50%; }
.hero h2 { font-size: 76px; font-weight: 300; margin: 0 0 20px; letter-spacing: -2px; line-height: 1.1; }
.hero p { font-size: 20px; color: var(--gray); margin-bottom: 32px; line-height: 1.6; }
.hero img { width: 48%; max-width: 550px; border-radius: 2px; object-fit: cover; }
.newsletter { display: flex; gap: 60px; align-items: center; border-top: 1px solid var(--line); margin-top: 60px; padding-top: 60px; }
.nl-img { width: 45%; }
.nl-img img { width: 100%; height: 280px; object-fit: cover; border-radius: 2px; }
.nl-img p { font-size: 13px; color: var(--light); border-left: 3px solid var(--yellow); padding-left: 12px; margin-top: 12px; }
.nl-form { width: 55%; }
.nl-form h3 { font-size: 36px; font-weight: 300; margin: 0 0 12px; }
.nl-form p { font-size: 16px; color: var(--gray); margin-bottom: 24px; line-height: 1.6; }
.nl-input { display: flex; gap: 12px; }
.nl-input input { flex: 1; padding: 14px; border: 1px solid #ccc; border-radius: 2px; outline: none; }

/* Newsroom 布局 */
.nr-layout { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; min-height: 600px;}
.nr-sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; background: var(--bg); border-right: 1px solid var(--line); padding: 24px; }
.nr-sidebar a { font-size: 16px; color: var(--gray); padding: 12px 16px; border-radius: 4px; transition: 0.2s; }
.nr-sidebar a:hover { color: var(--dark); background: rgba(255,255,255,0.6); }
.nr-sidebar a.active { color: var(--dark); font-weight: 600; background: var(--white); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.nr-main { flex: 1; min-width: 0; padding: 40px; }
.nr-title { font-size: 48px; font-weight: 300; margin: 0 0 24px; }

/* 四宫格 */
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ov-card { position: relative; height: 260px; cursor: pointer; overflow: hidden; border-radius: 2px; background: #eee; }
.ov-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.ov-card:hover img { transform: scale(1.05); }
.ov-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; padding: 24px; }
.ov-overlay h3 { color: white; font-size: 26px; font-weight: 300; margin: 0; }

/* 文章列表与Kone标签 */
.list-card { display: flex; gap: 24px; border: 1px solid var(--line); padding: 20px; margin-bottom: 20px; cursor: pointer; border-radius: 4px; transition: 0.2s; }
.list-card:hover { background: var(--bg); }
.list-card img { width: 260px; height: 150px; object-fit: cover; border-radius: 2px; }
.list-info h4 { font-size: 22px; font-weight: 500; margin: 0 0 8px; }
.story-tags { margin-top: 12px; display: flex; gap: 8px;}
.kone-tag { background: #e6f4f9; color: #45b2d3; padding: 4px 10px; border-radius: 2px; font-size: 12px; font-weight: 600; }

/* 文章详情页 */
/* 大厂通栏大图模式 */
.detail-layout { display: flex; flex-direction: column; gap: 40px; align-items: center; }
.detail-img { width: 100%; height: 480px; object-fit: cover; border-radius: 8px; }
.detail-content { width: 100%; max-width: 800px; margin: 0 auto; }
.detail-title { font-size: 42px; font-weight: 400; margin: 0 0 24px; line-height: 1.2; text-align: center; }
/* 让日期也居中 */
.detail-date { text-align: center; display: block; margin-bottom: 30px; color: var(--blue); }
.detail-text { font-size: 16px; color: var(--gray); line-height: 1.8; }
.detail-text h2 { font-size: 24px; color: var(--dark); margin-top: 30px; margin-bottom: 15px; }
.detail-text img { max-width: 100%; border-radius: 4px; margin: 20px 0; }
.back-btn { display: inline-flex; font-size: 14px; color: var(--gray); margin-bottom: 24px; cursor: pointer; }

/* 展会卡片 */
.event-card { display: flex; gap: 30px; border-bottom: 1px solid var(--line); padding: 30px 0; align-items: center; }
.event-card img { width: 320px; height: 200px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.event-info h4 { font-size: 24px; font-weight: 500; margin: 0 0 10px; }
.event-info p { color: var(--gray); margin: 0 0 8px; font-size: 15px; }
.event-year-badge { display: inline-block; background: var(--yellow); color: var(--dark); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 2px; margin-bottom: 12px;}

/* 社媒页面 */
.social-wrapper { display: flex; flex-direction: column; gap: 30px; }
.social-main { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; height: 380px;}
.social-main-img { width: 50%; background: #eee; position: relative;}
.social-main-img img { width: 100%; height: 100%; object-fit: cover; }
.social-main-text { width: 50%; padding: 40px; background: var(--bg); display: flex; flex-direction: column; justify-content: center;}
.social-main-text h3 { font-size: 28px; margin: 0 0 12px; }
.social-main-text p { font-size: 16px; line-height: 1.6; color: var(--gray); margin-bottom: 24px; }
.social-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.social-card { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column;}
.social-card-img { height: 240px; background: #eee; position: relative;}
.social-card-img img { width: 100%; height: 100%; object-fit: cover; }
.social-card-text { padding: 24px; flex: 1; display: flex; flex-direction: column; justify-content: space-between;}
.social-card-text h4 { font-size: 22px; margin: 0 0 10px; }
.social-card-text p { font-size: 15px; line-height: 1.5; color: var(--gray); margin-bottom: 20px; }
.social-logo { position: absolute; bottom: 20px; left: 20px; background: rgba(255, 255, 255, 0.9); padding: 12px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); backdrop-filter: blur(4px);}
.social-logo svg { width: 32px; height: 32px; display: block; }

/* Media 页面 */
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.media-card img { width: 100%; height: 300px; object-fit: cover; border-radius: 4px; }
.media-card h4 { font-size: 22px; font-weight: 500; margin: 16px 0 6px; }
.media-card p { color: var(--gray); font-size: 15px; margin: 0 0 12px; }
.note-box { background: var(--bg); border-left: 4px solid var(--yellow); padding: 20px; margin-top: 40px; font-size: 14px; color: var(--gray); }

/* B2B 详细表单 */
.form-container { background-color: #ffffff; width: 100%; max-width: 800px; margin: 0 auto; padding: 48px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.form-header h2 { font-size: 32px; font-weight: 400; margin: 0 0 12px 0; }
.form-header p { font-size: 16px; color: var(--gray); margin: 0 0 32px 0; line-height: 1.6; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 2px; box-sizing: border-box; font-family: inherit;}
.form-group textarea { height: 100px; resize: vertical; }
.row { display: flex; gap: 20px; }
.row .form-group { flex: 1; }
.btn-submit { background-color: var(--yellow); padding: 18px; border: none; width: 100%; font-weight: 600; cursor: pointer; font-size: 16px; transition: 0.2s;}
.btn-submit:hover { background-color: #E6D000; }

/* Cookie 弹窗 */
#cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(255,255,255,0.98); border-top: 1px solid var(--line); z-index: 9999; display: none; padding: 24px 48px; box-shadow: 0 -10px 30px rgba(0,0,0,0.05); box-sizing: border-box;}
.cookie-content { max-width: 1300px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 40px;}
.cookie-content h3 { margin: 0 0 8px; font-size: 18px; }
.cookie-content p { margin: 0; font-size: 14px; color: var(--gray); line-height: 1.5; }
.cookie-btns { display: flex; gap: 12px; flex-shrink: 0;}
.c-btn { padding: 12px 24px; border-radius: 2px; cursor: pointer; border: 1px solid #ccc; background: #fff; font-size: 14px; font-weight: 500;}
.btn-allow { background: var(--yellow); border: none;}
.cookie-details { display: none; max-width: 1300px; margin: 16px auto 0; border-top: 1px solid var(--line); padding-top: 20px; }
.c-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.c-grid h4 { margin: 0 0 4px; font-size: 14px; }
.c-grid p { margin: 0; font-size: 12px; color: var(--gray); line-height: 1.4; margin-bottom: 10px;}
.toggle-switch { display: inline-block; width: 36px; height: 20px; background: #ccc; border-radius: 20px; position: relative; cursor: pointer;}
.toggle-switch.active { background: var(--yellow); }
.toggle-switch::after { content: ""; position: absolute; width: 14px; height: 14px; background: white; border-radius: 50%; top: 3px; left: 3px; transition: 0.2s;}
.toggle-switch.active::after { transform: translateX(16px); }