/* ═══════════════════════════════════════════════════════════
   BİLİŞİMCİ HOCAM — BH-CORE.CSS  v1.0
   Temel: Reset + Tipografi + Layout + Fluid Ölçekleme
   
   Tüm sayfalarda yüklenir. Tema değişkenleri bh-theme.css'te.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════
   1. FLUID ÖLÇEKLEME
   ═══════════════════════════════════════ */
html {
  font-size: clamp(13px, 0.95vw, 22px);
  scroll-behavior: smooth;
  transition: background-color .3s ease, color .3s ease;
}

/* Tablet */
@media (max-width: 1024px) {
  html { font-size: clamp(12px, 1.5vw, 16px); }
}
/* Mobil */
@media (max-width: 640px) {
  html { font-size: 14px; }
}
/* Akıllı Tahta */
@media (min-width: 1920px) {
  html { font-size: clamp(17px, 1.1vw, 22px); }
}
/* 4K */
@media (min-width: 3200px) {
  html { font-size: 22px; }
}


/* ═══════════════════════════════════════
   2. RESET
   ═══════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ═══════════════════════════════════════
   3. BODY
   ═══════════════════════════════════════ */
body {
  font-family: 'Sora', sans-serif;
  background: var(--bg1);
  color: var(--text1);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .35s, color .35s;
  padding-bottom: clamp(36px, 3vw, 50px);
}

/* Gürültü dokusu */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Grid arka plan */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid, rgba(255,255,255,.022)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid, rgba(255,255,255,.022)) 1px, transparent 1px);
  background-size: 50px 50px;
  transition: background-image .35s;
}


/* ═══════════════════════════════════════
   4. TİPOGRAFİ
   ═══════════════════════════════════════ */
h1 { font-size: clamp(1.8rem, 3.5vw, 4rem); }
h2 { font-size: clamp(1.3rem, 2.2vw, 2.4rem); }
h3 { font-size: clamp(1rem, 1.5vw, 1.6rem); }

p, li, td, th, label, input, button, a {
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
}

.font-mono,
[class*="mono"],
code, pre,
.tl, .t-body,
.terminal-body,
.ticker-track,
.ticker-item,
.logo-sub,
.mod-meta,
.ann-meta,
.act-time,
.hero-stat-lbl,
.tray-sub,
.section-label {
  font-size: clamp(0.65rem, 0.75vw, 0.95rem);
}


/* ═══════════════════════════════════════
   5. CONTAINER SİSTEMİ
   ═══════════════════════════════════════ */
.header-inner,
.h-in,
.hero-inner,
.footer-inner,
.section,
.wrap > * {
  width: min(94vw, 1800px);
  margin-inline: auto;
}

@media (min-width: 1920px) {
  .header-inner,
  .h-in,
  .hero-inner,
  .footer-inner,
  .section {
    width: min(92vw, 2000px);
  }
}


/* ═══════════════════════════════════════
   6. SCROLLBAR (Genel)
   ═══════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb {
  background: var(--primary, #00d4ff);
  opacity: .35;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary, #00d4ff);
  opacity: .60;
}


/* ═══════════════════════════════════════
   7. ORTAK ANİMASYONLAR
   ═══════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(var(--primary-rgb, 0,212,255), .35); }
  50%      { box-shadow: 0 0 38px rgba(var(--primary-rgb, 0,212,255), .6); }
}
@keyframes float1 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(-25px,18px); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(18px,-25px); }
}
@keyframes shine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes termBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes descBlink {
  0%, 100% { border-color: var(--primary); }
  50%      { border-color: transparent; }
}


/* ═══════════════════════════════════════
   8. GRID SİSTEMİ
   ═══════════════════════════════════════ */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(0.6rem, 1.2vw, 1.2rem);
}
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(0.6rem, 1.2vw, 1.4rem);
}
.courses-grid,
.card-grid,
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.6rem);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(0.6rem, 1.2vw, 1.2rem);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(0.5rem, 1vw, 1rem);
}


/* ═══════════════════════════════════════
   9. RESPONSIVE GENEL
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-inner {
    flex-direction: column;
    height: auto;
  }
  .hero-section {
    height: auto;
    min-height: calc(100vh - clamp(56px, 4.5vw, 80px));
  }
}

@media (max-width: 640px) {
  .hero-h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }

  .modules-grid,
  .courses-grid,
  .card-grid,
  .content-grid,
  .grid-3,
  .grid-4,
  .two-col {
    grid-template-columns: 1fr;
  }
}