/* ================================================================
   CLIENT.CSS — Client-Side Page Styles
   Tarih Öğretmeni Blog Platformu
   ================================================================ */

/* ================================================================
   PAGE HEADER (shared across sub-pages)
   ================================================================ */
.page-header {
  padding: calc(var(--nav-h) + var(--sp-16)) 0 var(--sp-16);
  background: linear-gradient(135deg, var(--color-primary) 0%, #2D3F5C 100%);
  position: relative; overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-header-content { position: relative; z-index: 1; }
.page-header-label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--color-accent);
  margin-bottom: var(--sp-4);
}
.page-header-label::before {
  content: ''; display: block; width: 20px; height: 2px;
  background: var(--color-accent); border-radius: 2px;
}
.page-header h1 { color: white; font-size: var(--text-5xl); margin-bottom: var(--sp-4); }
.page-header p  { color: rgba(255,255,255,0.6); font-size: var(--text-lg); max-width: 560px; }
.breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); color: rgba(255,255,255,0.45);
  margin-top: var(--sp-6);
}
.breadcrumb a { color: rgba(255,255,255,0.55); transition: color var(--t-fast); }
.breadcrumb a:hover { color: white; }
.breadcrumb-sep { font-size: 10px; }

/* ================================================================
   HERO SECTION
   ================================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('../images/hero_background.jpg');
  background-size: cover; background-position: center;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15,23,42,0.88) 0%,
    rgba(30,41,59,0.78) 50%,
    rgba(139,0,0,0.25) 100%
  );
}
.hero-content {
  position: relative; z-index: 2;
  padding: calc(var(--nav-h) + var(--sp-12)) 0 var(--sp-24);
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--sp-6);
  backdrop-filter: blur(8px);
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  animation: pulse 2s ease-in-out infinite;
}
.hero h1 {
  color: white; font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.1; margin-bottom: var(--sp-6);
  animation: fadeInUp 0.8s ease forwards;
}
.hero h1 em { color: var(--color-accent); font-style: italic; }
.hero-subtitle {
  font-size: var(--text-xl); color: rgba(255,255,255,0.7);
  max-width: 540px; line-height: 1.7; margin-bottom: var(--sp-10);
  animation: fadeInUp 0.8s ease 0.15s both;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-bottom: var(--sp-16);
  animation: fadeInUp 0.8s ease 0.3s both;
}
.hero-btn-primary {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-8); border-radius: var(--r-md);
  background: var(--color-accent); color: white;
  font-size: var(--text-base); font-weight: 600;
  box-shadow: 0 4px 24px rgba(139,0,0,0.4);
  transition: all var(--t-base);
}
.hero-btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(139,0,0,0.45);
}
.hero-btn-secondary {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-8); border-radius: var(--r-md);
  background: rgba(255,255,255,0.1); color: white;
  border: 1.5px solid rgba(255,255,255,0.25);
  font-size: var(--text-base); font-weight: 600;
  backdrop-filter: blur(8px);
  transition: all var(--t-base);
}
.hero-btn-secondary:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-2px);
}

/* Hero search */
.hero-search {
  animation: fadeInUp 0.8s ease 0.45s both;
}
.hero-search-label {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: var(--sp-3);
}
.hero-search-box {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: var(--r-xl); overflow: hidden;
  backdrop-filter: blur(12px);
  max-width: 520px;
  transition: all var(--t-base);
}
.hero-search-box:focus-within {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}
.hero-search-icon { padding: 0 var(--sp-4); color: rgba(255,255,255,0.5); font-size: var(--text-lg); }
.hero-search-input {
  flex: 1; padding: var(--sp-4) 0;
  background: none; border: none; outline: none;
  color: white; font-size: var(--text-base);
}
.hero-search-input::placeholder { color: rgba(255,255,255,0.4); }
.hero-search-btn {
  margin: var(--sp-2); padding: var(--sp-3) var(--sp-5);
  background: var(--color-accent); color: white;
  border-radius: var(--r-lg); font-size: var(--text-sm); font-weight: 600;
  transition: background var(--t-fast);
}
.hero-search-btn:hover { background: var(--color-accent-hover); }

/* Hero scroll indicator */
.hero-scroll {
  position: absolute; bottom: var(--sp-8); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  color: rgba(255,255,255,0.4); font-size: var(--text-xs); letter-spacing: 0.08em;
  animation: fadeIn 1s ease 1s both;
  cursor: pointer;
}
.hero-scroll-dot {
  width: 24px; height: 38px; border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: var(--r-full); position: relative;
}
.hero-scroll-dot::after {
  content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 8px; background: rgba(255,255,255,0.4);
  border-radius: var(--r-full);
  animation: scrollDot 1.5s ease-in-out infinite;
}
@keyframes scrollDot { 0%,100% { transform: translateX(-50%) translateY(0); opacity: 1; } 100% { transform: translateX(-50%) translateY(14px); opacity: 0; } }

/* ================================================================
   STATS SECTION
   ================================================================ */
.stats-section {
  padding: var(--sp-12) 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-lt);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8); align-items: center;
}
.stat-item { text-align: center; }
.stat-number {
  font-family: var(--font-heading); font-size: var(--text-4xl);
  font-weight: 700; color: var(--color-accent);
  line-height: 1; margin-bottom: var(--sp-2);
}
.stat-label { font-size: var(--text-sm); color: var(--color-muted); font-weight: 500; }
.stats-divider { width: 1px; height: 60px; background: var(--color-border-lt); margin: 0 auto; }

/* ================================================================
   FEATURED SECTION (Home)
   ================================================================ */
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.featured-col-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.featured-col-title h3 { font-size: var(--text-xl); }
.featured-col-title a {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-accent); display: flex; align-items: center; gap: var(--sp-1);
  transition: gap var(--t-fast);
}
.featured-col-title a:hover { gap: var(--sp-3); }

/* Material card (home) */
.material-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border-lt);
  border-radius: var(--r-lg);
  transition: all var(--t-base);
  margin-bottom: var(--sp-3);
}
.material-card:hover {
  border-color: var(--color-accent-mid);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}
.material-card-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: var(--color-accent-light);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.material-card-body { flex: 1; min-width: 0; }
.material-card-title {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.material-card-meta { font-size: var(--text-xs); color: var(--color-muted); }
.material-card-action {
  color: var(--color-muted); font-size: var(--text-lg);
  transition: color var(--t-fast);
}
.material-card:hover .material-card-action { color: var(--color-accent); }

/* Article card (home/list) */
.article-card { cursor: pointer; }
.article-card-img {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover; transition: transform 0.4s ease;
}
.article-card:hover .article-card-img { transform: scale(1.04); }
.article-card-img-wrap { overflow: hidden; }
.article-card-body { padding: var(--sp-5) var(--sp-5) var(--sp-5); }
.article-card-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.article-card-title {
  font-family: var(--font-heading); font-size: var(--text-xl);
  font-weight: 700; color: var(--color-text); margin-bottom: var(--sp-3);
  line-height: 1.3; transition: color var(--t-fast);
}
.article-card:hover .article-card-title { color: var(--color-accent); }
.article-card-excerpt { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.7; margin-bottom: var(--sp-4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-card-footer { display: flex; align-items: center; justify-content: space-between; }
.article-card-date { font-size: var(--text-xs); color: var(--color-subtle); }
.article-card-readtime { font-size: var(--text-xs); color: var(--color-subtle); }

/* Home featured article (bigger, horizontal) */
.article-card-home {
  display: flex; gap: var(--sp-4); align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border-lt);
  border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: var(--sp-3); transition: all var(--t-base);
}
.article-card-home:hover { box-shadow: var(--shadow-md); border-color: var(--color-border); transform: translateY(-1px); }
.article-card-home-img { width: 90px; height: 90px; object-fit: cover; flex-shrink: 0; }
.article-card-home-body { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; flex: 1; min-width: 0; }
.article-card-home-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
  line-height: 1.4; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t-fast);
}
.article-card-home:hover .article-card-home-title { color: var(--color-accent); }
.article-card-home-meta { font-size: var(--text-xs); color: var(--color-subtle); }

/* ================================================================
   QUICK ACCESS CARDS (Grade cards)
   ================================================================ */
.grades-section { background: var(--color-surface-2); }
.grades-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
.grade-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-lt);
  border-radius: var(--r-xl); padding: var(--sp-6);
  text-align: center;
  transition: all var(--t-base);
  cursor: pointer; position: relative; overflow: hidden;
}
.grade-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-soft) 100%);
  opacity: 0; transition: opacity var(--t-base);
}
.grade-card:hover { border-color: var(--color-accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.grade-card:hover::before { opacity: 1; }
.grade-card-content { position: relative; z-index: 1; }
.grade-card:hover .grade-number,
.grade-card:hover .grade-label,
.grade-card:hover .grade-count { color: white; }
.grade-card:hover .grade-icon-wrap { background: rgba(255,255,255,0.15); }

.grade-icon-wrap {
  width: 52px; height: 52px; margin: 0 auto var(--sp-4);
  background: var(--color-accent-light);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  transition: all var(--t-base);
}
.grade-number {
  font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700;
  color: var(--color-accent); margin-bottom: var(--sp-1);
  transition: color var(--t-base);
}
.grade-label {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em; color: var(--color-muted);
  transition: color var(--t-base);
}
.grade-count {
  font-size: var(--text-xs); color: var(--color-subtle);
  margin-top: var(--sp-3);
  transition: color var(--t-base);
}

/* ================================================================
   LEARNING HUB
   ================================================================ */
.hub-layout {
  display: grid; grid-template-columns: 280px 1fr;
  gap: var(--sp-8); align-items: start;
}
.hub-sidebar {
  position: sticky; top: calc(var(--nav-h) + var(--sp-4));
  background: var(--color-surface);
  border: 1px solid var(--color-border-lt);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.hub-sidebar-title {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-muted);
  border-bottom: 1px solid var(--color-border-lt);
}
.hub-grade-btn {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-muted);
  border-bottom: 1px solid var(--color-border-lt);
  transition: all var(--t-fast);
  cursor: pointer; text-align: left;
}
.hub-grade-btn:last-child { border-bottom: none; }
.hub-grade-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.hub-grade-btn.active {
  background: var(--color-accent-light); color: var(--color-accent);
  font-weight: 600; border-left: 3px solid var(--color-accent);
}
.hub-grade-icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: var(--color-surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); flex-shrink: 0;
  transition: all var(--t-fast);
}
.hub-grade-btn.active .hub-grade-icon { background: var(--color-accent-mid); }
.hub-grade-info { flex: 1; }
.hub-grade-name { display: block; }
.hub-grade-count { font-size: var(--text-xs); color: var(--color-subtle); }
.hub-grade-btn.active .hub-grade-count { color: var(--color-accent); opacity: 0.75; }

/* Hub units */
.hub-units { display: none; padding: 0 var(--sp-5) var(--sp-4) calc(var(--sp-5) + 20px); }
.hub-grade-btn.active + .hub-units { display: block; }
.hub-unit-btn {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  font-size: var(--text-xs); font-weight: 500; color: var(--color-muted);
  cursor: pointer; transition: all var(--t-fast); text-align: left;
  margin-bottom: 2px;
}
.hub-unit-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.hub-unit-btn.active { background: var(--color-accent-mid); color: var(--color-accent); font-weight: 600; }

/* Hub main content */
.hub-toolbar {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.hub-search {
  flex: 1; position: relative;
}
.hub-search-icon { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--color-muted); }
.hub-search-input {
  width: 100%; padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 20px);
  border: 1.5px solid var(--color-border); border-radius: var(--r-md);
  font-size: var(--text-sm); background: var(--color-surface); outline: none;
  transition: all var(--t-fast);
}
.hub-search-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(139,0,0,0.09); }

.hub-materials-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
}
.hub-material-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-lt);
  border-radius: var(--r-xl); overflow: hidden;
  transition: all var(--t-base);
}
.hub-material-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-border); transform: translateY(-2px); }
.hub-material-card-top {
  background: linear-gradient(135deg, var(--color-primary) 0%, #2D3F5C 100%);
  padding: var(--sp-6); text-align: center; position: relative;
}
.hub-material-type-icon { font-size: 2.5rem; margin-bottom: var(--sp-3); }
.hub-material-card-body { padding: var(--sp-5); }
.hub-material-title {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-text);
  margin-bottom: var(--sp-2); line-height: 1.4;
}
.hub-material-meta {
  font-size: var(--text-xs); color: var(--color-muted);
  margin-bottom: var(--sp-4); display: flex; gap: var(--sp-3);
}
.hub-material-actions { display: flex; gap: var(--sp-2); }

/* PDF Modal */
.pdf-modal { max-width: 92vw; width: 1100px; }
.pdf-viewer { width: 100%; height: 70vh; background: #525659; border-radius: var(--r-md); }

/* ================================================================
   ARTICLES PAGE
   ================================================================ */
.articles-filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-8); padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--color-border-lt);
}
.filter-btn {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-muted);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  transition: all var(--t-fast); cursor: pointer;
}
.filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter-btn.active {
  background: var(--color-accent); color: white; border-color: var(--color-accent);
}
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }

/* ================================================================
   ARTICLE DETAIL
   ================================================================ */
.article-detail-hero {
  height: 420px; position: relative; overflow: hidden;
}
.article-detail-hero-img {
  width: 100%; height: 100%; object-fit: cover;
}
.article-detail-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.2) 60%, transparent 100%);
}
.article-detail-hero-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--sp-8) 0; z-index: 1;
}
.article-detail-hero-content h1 { color: white; font-size: clamp(1.75rem, 3vw, 2.75rem); }

.article-body { max-width: 720px; margin: 0 auto; padding: var(--sp-12) 0; }
.article-body p { margin-bottom: var(--sp-6); font-size: var(--text-lg); line-height: 1.8; }
.article-body h2 { font-size: var(--text-3xl); margin: var(--sp-10) 0 var(--sp-5); }
.article-body h3 { font-size: var(--text-2xl); margin: var(--sp-8) 0 var(--sp-4); }
.article-body ul, .article-body ol {
  padding-left: var(--sp-6); margin-bottom: var(--sp-6);
}
.article-body ul li, .article-body ol li {
  font-size: var(--text-lg); color: var(--color-muted); line-height: 1.8;
  margin-bottom: var(--sp-2);
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body blockquote {
  border-left: 4px solid var(--color-accent);
  padding: var(--sp-4) var(--sp-6);
  background: var(--color-accent-light);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--sp-8) 0;
  font-style: italic; font-size: var(--text-lg); color: var(--color-text);
}

.article-author-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-6); background: var(--color-surface-2);
  border-radius: var(--r-xl); margin-bottom: var(--sp-8);
}
.article-author-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-accent); color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700;
  flex-shrink: 0;
}
.article-author-name { font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.article-author-role { font-size: var(--text-sm); color: var(--color-muted); }

/* Related articles */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }

/* ================================================================
   ABOUT PAGE
   ================================================================ */
.about-intro {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-16);
  align-items: center; padding: var(--sp-24) 0;
}
.about-photo-wrap { position: relative; }
.about-photo {
  width: 100%; border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
  aspect-ratio: 3/4; object-fit: cover;
}
.about-photo-badge {
  position: absolute; bottom: -var(--sp-4); right: -var(--sp-4);
  background: var(--color-accent); color: white;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-xl);
  box-shadow: var(--shadow-accent); text-align: center;
}
.about-photo-badge-num { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1; }
.about-photo-badge-label { font-size: var(--text-xs); opacity: 0.85; }
.about-content h2 { font-size: var(--text-4xl); margin-bottom: var(--sp-6); }
.about-content p { font-size: var(--text-lg); line-height: 1.8; margin-bottom: var(--sp-5); }

/* Philosophy */
.philosophy-section { background: var(--color-primary); padding: var(--sp-24) 0; }
.philosophy-quote {
  font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-style: italic; color: white; line-height: 1.5;
  position: relative; padding: 0 var(--sp-12);
  text-align: center; max-width: 800px; margin: 0 auto;
}
.philosophy-quote::before, .philosophy-quote::after {
  content: '"'; position: absolute;
  font-size: 6rem; color: rgba(139,0,0,0.3);
  font-family: Georgia, serif; line-height: 1;
}
.philosophy-quote::before { left: 0; top: -var(--sp-4); }
.philosophy-quote::after { right: 0; bottom: -var(--sp-8); }

/* Timeline */
.timeline { position: relative; padding-left: var(--sp-12); }
.timeline::before {
  content: ''; position: absolute; left: var(--sp-5);
  top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}
.timeline-item { position: relative; margin-bottom: var(--sp-8); }
.timeline-dot {
  position: absolute; left: calc(-1 * var(--sp-12) + var(--sp-5) - 7px);
  top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-accent); border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 3px rgba(139,0,0,0.2);
}
.timeline-year {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--sp-2);
}
.timeline-title { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin-bottom: var(--sp-1); }
.timeline-desc { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6; }

/* Certificates */
.certs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.cert-card {
  background: var(--color-surface); border: 1px solid var(--color-border-lt);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; align-items: flex-start; gap: var(--sp-4);
  transition: all var(--t-base);
}
.cert-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border); }
.cert-icon { font-size: 1.75rem; flex-shrink: 0; }
.cert-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: 2px; }
.cert-org { font-size: var(--text-xs); color: var(--color-muted); }
.cert-year { font-size: var(--text-xs); color: var(--color-accent); font-weight: 600; margin-top: var(--sp-2); }

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-12); align-items: start; }
.contact-form-card {
  background: var(--color-surface); border: 1px solid var(--color-border-lt);
  border-radius: var(--r-2xl); padding: var(--sp-10);
  box-shadow: var(--shadow-md);
}
.contact-form-title { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--sp-2); }
.contact-form-subtitle { color: var(--color-muted); margin-bottom: var(--sp-8); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.contact-info-card {
  background: var(--color-primary); border-radius: var(--r-2xl);
  padding: var(--sp-8); color: white;
}
.contact-info-title { font-size: var(--text-xl); font-weight: 700; color: white; margin-bottom: var(--sp-2); }
.contact-info-subtitle { color: rgba(255,255,255,0.55); margin-bottom: var(--sp-8); font-size: var(--text-sm); }
.contact-info-item {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-bottom: var(--sp-6); padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact-info-item:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.contact-info-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(255,255,255,0.08); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.contact-info-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); font-weight: 600; margin-bottom: 2px; }
.contact-info-value { font-size: var(--text-sm); color: rgba(255,255,255,0.75); line-height: 1.5; }
.contact-office-hours {
  background: rgba(255,255,255,0.05); border-radius: var(--r-lg);
  padding: var(--sp-4); margin-top: var(--sp-6);
}
.contact-office-hours-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--sp-3); }
.office-hour-row { display: flex; justify-content: space-between; font-size: var(--text-xs); color: rgba(255,255,255,0.55); margin-bottom: var(--sp-2); }
.office-hour-row span:last-child { color: rgba(255,255,255,0.8); font-weight: 500; }
.contact-success {
  display: none; text-align: center; padding: var(--sp-8);
}
.contact-success-icon { font-size: 3rem; margin-bottom: var(--sp-4); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .featured-grid { grid-template-columns: 1fr; }
  .grades-grid { grid-template-columns: repeat(3, 1fr); }
  .hub-layout { grid-template-columns: 240px 1fr; }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .about-intro { grid-template-columns: 1fr; }
  .about-photo-wrap { max-width: 340px; }
  .certs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .grades-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-layout { grid-template-columns: 1fr; }
  .hub-sidebar { position: static; }
  .hub-materials-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--text-4xl); }
  .form-row { grid-template-columns: 1fr; }
  .certs-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .grades-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-search-box { flex-direction: column; border-radius: var(--r-lg); }
  .hero-search-btn { margin: 0 var(--sp-2) var(--sp-2); border-radius: var(--r-md); width: calc(100% - var(--sp-4)); }
}