/**
 * Master Eğitim Merkezi — Global CSS
 *
 * Sadece TÜM sayfalarda ortak olan stiller burada.
 * Sayfa özgü stiller o sayfanın kendi <style> bloğuna gider.
 *
 * Breakpoint standardı (3 nokta, mobile-first):
 *   @media (min-width: 480px)  — büyük mobil
 *   @media (min-width: 768px)  — tablet
 *   @media (min-width: 1024px) — masaüstü
 *
 * Değişken standardı:
 *   Marka renkleri  → --brand-*
 *   Semantik renkler → --color-*
 *   Eski sayfalara compat için --navy / --yellow alias'ları da tanımlandı
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
  /* Marka renkleri */
  --brand-navy:        #0b1a57;
  --brand-navy-dark:   #09164b;
  --brand-yellow:      #f9c80e;

  /* Semantik renkler */
  --color-text:        #1f2a44;
  --color-muted:       #5b6785;
  --color-bg:          #ffffff;
  --color-bg-light:    #f8fafc;
  --color-card:        #0f2a54;
  --color-ring:        #123266;
  --color-success:     #10b981;
  --color-error:       #ef4444;
  --color-warning:     #f59e0b;
  --color-info:        #3b82f6;

  /* Eski sayfa CSS'leri için geriye dönük uyumluluk alias'ları */
  --navy:              #0b1a57;
  --navy-dark:         #09164b;
  --navy-light:        #1e3a8a;
  --yellow:            #f9c80e;
  --text:              #1f2a44;
  --muted:             #5b6785;
  --bg:                #ffffff;
  --ink:               #1f2a44;
  --ring:              #123266;
  --card:              #0f2a54;
  --success:           #10b981;
  --error:             #ef4444;
  --warning:           #f59e0b;
  --info:              #3b82f6;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  18px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 44px;

  /* Border radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   0.18s ease;
  --transition-normal: 0.3s ease;

  /* Shadows */
  --shadow-sm: 0 2px  8px rgba(0,0,0,.08);
  --shadow-md: 0 4px  16px rgba(0,0,0,.12);
  --shadow-lg: 0 6px  26px rgba(0,0,0,.18);
  --shadow-xl: 0 12px 40px rgba(0,0,0,.25);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Poppins', 'Montserrat', system-ui, -apple-system, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 16px;
  padding-bottom: 80px; /* sticky footer alanı */
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

h1 { font-size: clamp(26px, 5vw, 46px); }
h2 { font-size: clamp(22px, 4vw, 36px); }
h3 { font-size: clamp(18px, 3vw, 28px); }
h4 { font-size: clamp(16px, 2.5vw, 24px); }
h5 { font-size: clamp(15px, 2vw, 20px); }
h6 { font-size: clamp(14px, 1.8vw, 18px); }

p { margin-bottom: var(--space-md); }

/* ============================================
   LAYOUT — Container & Section
   ============================================ */
.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.container--wide   { width: min(100% - 2rem, 1400px); }
.container--narrow { width: min(100% - 2rem, 800px); }

.section {
  padding: var(--space-2xl) 0;
}

@media (max-width: 768px) {
  .section { padding: 25px 0; }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--brand-navy-dark);
  box-shadow: var(--shadow-md);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.brand__logo {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-full);
  object-fit: cover;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.brand__name {
  font: 800 22px/1 'Montserrat', sans-serif;
  color: var(--brand-yellow);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.brand-link:hover .brand__logo {
  box-shadow: 0 0 0 4px var(--brand-yellow), var(--shadow-lg);
  transform: scale(1.05);
}

.brand-link:hover .brand__name {
  border-color: var(--brand-yellow);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
}

nav a {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-weight: 800;
  color: var(--brand-yellow);
  transition: var(--transition-fast);
}

nav a:hover,
nav a.active {
  background: var(--brand-yellow);
  color: #fff;
}

/* Mobile menu */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  z-index: 100;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--brand-yellow);
  margin: 5px 0;
  border-radius: 2px;
  transition: var(--transition-normal);
}

.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

@media (max-width: 768px) {
  .nav { flex-wrap: wrap; }

  nav {
    width: 100%;
    order: 3;
  }

  nav ul {
    display: none;
    background: var(--brand-navy-dark);
    flex-direction: column;
    padding: 10px 0;
    gap: 4px;
    width: 100%;
  }

  nav ul.active { display: flex; }

  nav ul li { width: 100%; }

  nav ul li a {
    display: block;
    padding: 12px 16px;
    border-radius: 0;
  }

  .mobile-toggle { display: block; }

  .brand__name  { font-size: 16px !important; }
  .brand__logo  { width: 50px !important; height: 50px !important; }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid var(--color-ring);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
  line-height: 1;
  font-family: inherit;
}

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn--yellow {
  background: var(--brand-yellow);
  color: var(--brand-navy);
  border-color: var(--brand-yellow);
}

.btn--yellow:hover:not(:disabled) {
  filter: brightness(0.96);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

.btn--outline:hover:not(:disabled) {
  background: var(--brand-yellow);
  color: var(--brand-navy);
}

.btn--navy {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
}

.btn--navy:hover:not(:disabled) {
  background: var(--brand-yellow);
  color: var(--brand-navy);
  border-color: var(--brand-yellow);
}

.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--lg { padding: 16px 24px; font-size: 16px; }
.btn--full { width: 100%; display: flex; }

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--color-card);
  color: #f1f4fb;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-ring);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card h3 { margin: var(--space-xs) 0; font-size: 18px; }
.card p   { font-size: 14px; color: #d4ddec; margin-bottom: var(--space-sm); }

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom: var(--space-md); }

.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 600;
}

.form-input,
.form-textarea,
.form-select,
.form-control {
  width: 100%;
  padding: var(--space-sm);
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  transition: var(--transition-fast);
  background: #fff;
  color: var(--color-text);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.form-control:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px rgba(249,200,14,.15);
}

.form-input.error,
.form-textarea.error { border-color: var(--color-error); }

.form-error   { color: var(--color-error); font-size: 13px; margin-top: 4px; display: block; }
.form-success { color: var(--color-success); font-size: 13px; margin-top: 4px; display: block; }

/* Alert */
.alert {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: 14px;
}

.alert-error, .alert-danger {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.alert-success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.alert-info {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  list-style: none;
  font-size: 14px;
  margin-bottom: var(--space-lg);
}

.breadcrumb-item { display: flex; align-items: center; }

.breadcrumb-item:not(:last-child)::after {
  content: '›';
  margin-left: var(--space-xs);
  color: var(--color-muted);
}

.breadcrumb-item a { color: var(--brand-navy); text-decoration: underline; }
.breadcrumb-item a:hover { color: var(--brand-yellow); }
.breadcrumb-item.active { color: var(--color-muted); }

/* ============================================
   STICKY FOOTER (tüm sayfalarda ortak)
   ============================================ */
.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #0c1530, #0a1128);
  z-index: 1000;
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
}

.sticky-footer__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 3vw, 35px);
  padding: 12px 16px;
  flex-wrap: wrap;
}

.footer-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: clamp(11px, 2vw, 14px);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.08);
  transition: var(--transition-fast);
}

.footer-item:hover {
  background: var(--brand-yellow);
  color: var(--brand-navy);
}

.footer-item svg { flex-shrink: 0; }

/* WhatsApp FAB */
.wa-fab {
  position: fixed;
  right: clamp(12px, 3vw, 24px);
  bottom: 75px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
  transition: var(--transition-fast);
}

.wa-fab:hover { transform: scale(1.1); }

/* ============================================
   UTILITIES
   ============================================ */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mb-sm { margin-bottom: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mb-md { margin-bottom: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }

.d-none  { display: none; }
.d-block { display: block; }
.d-flex  { display: flex; }
.d-grid  { display: grid; }

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* ============================================
   LOADING & SPINNER
   ============================================ */
.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: var(--radius-full);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   ACCESSIBILITY
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--brand-yellow);
  color: var(--brand-navy);
  padding: var(--space-sm);
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus { top: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--brand-yellow);
  outline-offset: 2px;
}

/* ============================================
   PRINT
   ============================================ */
@media print {
  header,
  .mobile-toggle,
  .wa-fab,
  .sticky-footer,
  .btn { display: none !important; }

  body { padding-bottom: 0; }

  .container { width: 100%; max-width: 100%; }
}