/* ============================================================
   1. 全局初始化 (Global Reset)
   确保所有浏览器下的基础间距一致，采用“内边距包含在宽高内”的盒模型
   ============================================================ */
* {
  margin: 0;            /* 清除默认外边距 */
  padding: 0;           /* 清除默认内边距 */
  box-sizing: border-box; /* 宽度包含 padding 和 border，防止布局撑破 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

body {
  min-height: 100vh;    /* 最小高度占满整个屏幕 */
  /* 深蓝色径向渐变背景：营造科技感，光晕从顶部中心向下扩散 */
  background: radial-gradient(circle at top, #0b1a3a 0%, #020816 70%);
  color: #fff;          /* 全局文字为白色 */
}

/* ============================================================
   2. 顶部导航栏 (Top Navigation)
   ============================================================ */
.top-nav {
  display: flex;
  justify-content: center; /* 导航项水平居中 */
  padding: 26px 0;
}

.top-nav nav {
  display: flex;
  gap: 46px;               /* 导航菜单项之间的间距 */
}

.nav-item {
  color: #ffffff;
  opacity: 0.85;           /* 默认半透明，显得更精致 */
  text-decoration: none;   /* 去掉链接下划线 */
  font-size: 16px;
  letter-spacing: 1px;     /* 字间距增加，提升易读性 */
  transition: 0.3s;        /* 所有的变化（如透明度、阴影）在0.3秒内平滑过渡 */
}

.nav-item:hover {
  opacity: 1;              /* 悬停时全显 */
  text-shadow: 0 0 10px rgba(255,255,255,0.6); /* 悬停时的发光文字效果 */
}

/* 导航激活状态（当前页） */
.nav-item.active {
  padding: 8px 18px;
  border-radius: 12px;
  background: rgba(180,220,255,0.25); /* 淡淡的蓝色背景 */
  box-shadow: 0 0 25px rgba(160,220,255,0.6); /* 强烈的发光投影 */
}

/* ============================================================
   3. 主视觉区域 (Main Area Layout)
   使用了 CSS Grid 栅格系统将页面分为左右两栏
   ============================================================ */
.main-area {
  display: grid;
  /* 将屏幕水平分为两份，左侧占 1.2 份，右侧占 1 份 */
  grid-template-columns: 1.2fr 1fr;
  align-items: center;    /* 左右两列内容垂直居中对齐 */
  padding: 40px 8%;       /* 两侧留出 8% 的呼吸空间 */
}

/* 左侧 Logo 容器 */
.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;    /* Logo 在左侧区域内水平居中 */
}

.logo-area img {
  width: 100%;
  max-width: 520px;       /* 限制最大宽度，防止在大屏上过大 */
  margin-bottom: 32px;
}

/* 右侧信息容器 */
.side-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; /* 确保在垂直方向居中，解决偏高问题 */
  gap: 40px;               /* 增大各项之间的间距，让布局更疏朗 */
  min-height: 80vh;        /* 适当增加高度占用，方便内容向下撑开 */
}

/* ========= 已经有的 Slogan 样式 ========= */
.slogan-area {
  font-size: 32px; /* 建议调大，如之前所说 */
  line-height: 1.9;
  letter-spacing: 2px;
  opacity: 0.95;
  margin-bottom: 20px; /* 给下方留点空间 */
}
/* ========= 新增作者信息样式 ========= */
.authors {
  margin-top: 20px;    /* 让作者信息整体“靠下”一点，拉开与 Slogan 的距离 */
}

.authors h2 {
  font-size: 18px;     /* 缩小“作者”这两个字 */
  opacity: 0.8;        /* 稍微调暗 */
  margin-bottom: 8px;
}

.authors p {
  font-size: 14px;     /* 缩小具体作者名字的字号 */
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7); /* 把颜色标白但调淡 */
}

/* ============================================================
   4. 轮播卡片 (Carousel & Card)
   ============================================================ */
.carousel {
  margin-top: 40px;
  position: relative;
  left: 8%;                /* 配合父级间距，使轮播图位置产生视觉错落感 */
}

.card {
  position: relative;
  width: 340px;
  border-radius: 18px;
  overflow: hidden;        /* 裁剪掉图片超出圆角的部分 */
  background: rgba(255,255,255,0.05); /* 磨砂玻璃感的微弱底色 */
  box-shadow: 0 25px 50px rgba(0,0,0,0.45); /* 深沉的阴影，让卡片“浮”起来 */
}

.card img {
  width: 100%;
  display: block;          /* 消除图片底部默认的微小间隙 */
}

/* 卡片上的标题文字 */
.card-title {
  position: absolute;      /* 文字浮在图片上方 */
  bottom: 12px;
  left: 16px;
  font-size: 14px;
  opacity: 0.9;
}

/* 轮播控制：左右箭头 */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 垂直方向完美居中 */
  font-size: 36px;
  color: #fff;
  opacity: 0.7;
  cursor: pointer;         /* 鼠标移上去变小手 */
  user-select: none;       /* 防止频繁点击时选中文字 */
}

.arrow.left { left: 10px; }
.arrow.right { right: 10px; }

.arrow:hover {
  opacity: 1;              /* 悬停时箭头变亮 */
}

/* 轮播控制：底部指示圆点 */
.dots {
  position: absolute;
  bottom: 10px;
  right: 14px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
}

/* 当前选中的圆点状态 */
.dot.active {
  background: #ffffff;
}
/* ============================================================
   修改：进入主页面按钮样式
   目标：标白、放大一点点
   ============================================================ */
.enter-button {
  display: inline-block;
  color: #ffffff;          /* 标白 */
  text-decoration: none;
  font-size: 20px;         /* 放大字体 */
  padding: 12px 30px;
  border: 1px solid #ffffff; /* 白色边框 */
  border-radius: 4px;      /* 稍微硬朗的圆角 */
  transition: 0.3s;
}

.enter-button:hover {
  background: #ffffff;
  color: #000;             /* 悬停反色效果 */
}

/* ============================================================
   修改：底部社交链接样式
   目标：放在底部、标白
   ============================================================ */
/* 社交链接容器调整 */
.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
  padding: 24px 0 16px 0;
}
footer {
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  padding-bottom: 16px;
}

.social-links a {
  color: #ffffff;          /* 标白 */
  text-decoration: none;
  font-size: 14px;
  opacity: 0.6;
  transition: 0.3s;
}

.social-links a:hover {
  opacity: 1;              /* 悬停全亮 */
}
/* ============================================================
   5. Home 页面专用布局 (顶部对齐 + 轮播居中放大)
   ============================================================ */

/* 重置容器：改为垂直排列，以便处理 top-row 和 carousel 的上下关系 */
.home-layout {
  display: flex;
  flex-direction: column;
  align-items: center;    /* 整体水平居中 */
  padding: 20px 5%;       /* 缩小内边距 */
  min-height: auto;
}

/* 顶部行：Logo 和 Slogan 分居两侧 */
.top-row {
  width: 100%;
  display: flex;
  justify-content: space-between; /* 关键：一个靠左，一个靠右 */
  align-items: flex-start;
  margin-bottom: 50px;    /* 与下方轮播图的间距 */
}

/* --- Home 页面专用布局修正 --- */

.home-layout {
  display: flex !important; /* 强制覆盖之前的 Grid 布局 */
  flex-direction: column;
  align-items: center;
  padding: 20px 8%;
  min-height: auto;
}

/* 让 Logo 和 Slogan 并列 */
.top-row {
  width: 100%;
  max-width: 1200px; /* 限制宽度，防止在大屏散太开 */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}

/* 针对 Home 页面的 Logo 缩小 */
.home-layout .logo-area {
  display: block;
  text-align: left;
}
.home-layout .logo-area img {
  max-width: 220px; /* 进一步缩小 Logo */
}

/* 针对 Home 页面的 Slogan 缩小靠右 */
.home-layout .slogan-area {
  text-align: right;
  font-size: 18px;
  line-height: 1.6;
}

/* 轮播图居中放大 */
.carousel.center-mode {
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}

.carousel.center-mode .card {
  width: 100%;
  max-width: 1000px; /* 轮播图宽度 */
  height: 400px; /* 设定一个固定高度 */
}

.carousel.center-mode .card img {
  height: 100%;
  object-fit: cover; /* 保证图片不拉伸 */
}

/* 文章列表 Grid */
.article-section {
  width: 100%;
  max-width: 1000px;
  margin-top: 40px;
}

.section-title {
  font-size: 20px;
  margin-bottom: 20px;
  border-left: 3px solid #fff;
  padding-left: 10px;
}

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

.article-item {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: 0.3s;
}

.article-item:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.1);
}

.article-thumb img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.article-info {
  padding: 15px;
}

.article-info h3 { font-size: 16px; margin-bottom: 8px; }
.article-info p { font-size: 13px; opacity: 0.7; line-height: 1.4; }
.article-date { font-size: 11px; opacity: 0.4; display: block; margin-top: 10px; }