/* ==========================================================
   Neoplan.az — 5 TAM SAYT TEMASI
   ========================================================== */

/* ========== ORTAQ ========== */
:root {
  --radius: 14px;
  --radius-card: 20px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --section-padding: 48px;
  --card-padding: 22px;
  --gap: 16px;
  --font-heading: 800;
  --letter-spacing: -0.02em;
  --header-height: 68px;
  --transition: 0.25s;
}

/* Default — heç bir tema seçilməyibsə */
.hero-inner { display: block; text-align: center; }
.hero-image { display: none; }
.hero-text  { max-width: 900px; margin: 0 auto; }
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================
   1. KLASSİK
   ========================================================== */
[data-theme="classic"] {
  --primary: #0066FF;
  --primary-dark: #0052CC;
  --primary-light: #E6F0FF;
  --accent: #25D366;
  --gradient: linear-gradient(135deg, #0066FF, #0052CC);
  --dark: #0A0E27;
  --text: #1E293B;
  --muted: #64748B;
  --light: #F8FAFC;
  --bg: #FFFFFF;
  --border: #E2E8F0;
}
[data-theme="classic"] .hero {
  padding: 100px 0 60px;
  background: linear-gradient(180deg, #F8FAFC, #FFFFFF);
  text-align: center;
}
[data-theme="classic"] .hero-inner { display: block; text-align: center; }
[data-theme="classic"] .hero-image { display: none; }
[data-theme="classic"] .hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  margin-bottom: 20px;
  color: var(--text);
}
[data-theme="classic"] .hero p {
  font-size: 18px;
  color: var(--muted);
  margin: 0 auto 32px;
  max-width: 700px;
}
[data-theme="classic"] section.alt { background: #F8FAFC; }
[data-theme="classic"] .cta-band {
  background: linear-gradient(135deg, #0066FF, #0052CC);
  color: #fff;
}

/* ==========================================================
   2. SPLIT
   ========================================================== */
[data-theme="split"] {
  --primary: #6366F1;
  --primary-dark: #4F46E5;
  --primary-light: #EEF2FF;
  --accent: #10B981;
  --gradient: linear-gradient(135deg, #6366F1, #4F46E5);
  --dark: #111827;
  --text: #111827;
  --muted: #6B7280;
  --light: #F9FAFB;
  --bg: #FFFFFF;
  --border: #E5E7EB;
  --radius-card: 16px;
}
[data-theme="split"] header {
  background: transparent;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: none;
}
[data-theme="split"] .nav-wrap {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  padding: 12px 24px;
  margin: 16px auto;
  max-width: 1180px;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.05);
}
[data-theme="split"] .hero {
  padding: 140px 0 80px;
  background:
    radial-gradient(circle at 80% 20%, rgba(99,102,241,.12), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(16,185,129,.08), transparent 50%),
    linear-gradient(180deg, #F9FAFB, #FFFFFF);
  text-align: left;
}
[data-theme="split"] .hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: none;
  text-align: left;
}
[data-theme="split"] .hero-text { text-align: left; max-width: none; margin: 0; }
[data-theme="split"] .hero h1 { text-align: left; font-size: clamp(32px, 5vw, 56px); }
[data-theme="split"] .hero p { text-align: left; margin: 0 0 32px; max-width: none; }
[data-theme="split"] .hero-actions { justify-content: flex-start; }
[data-theme="split"] .hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  box-shadow: 0 40px 80px rgba(99,102,241,.2);
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #6366F1, #10B981);
  font-size: 120px;
}
[data-theme="split"] .card { border-radius: 16px; border: 1px solid #E5E7EB; }
[data-theme="split"] section.alt { background: #F9FAFB; }
[data-theme="split"] .cta-band {
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: #fff;
}

/* ==========================================================
   3. MAGAZINE
   ========================================================== */
[data-theme="magazine"] {
  --primary: #DC2626;
  --primary-dark: #B91C1C;
  --primary-light: #FEF2F2;
  --accent: #F59E0B;
  --gradient: linear-gradient(135deg, #DC2626, #B91C1C);
  --dark: #000;
  --text: #111;
  --muted: #6B7280;
  --light: #FAFAF9;
  --bg: #FFFFFF;
  --border: #E5E5E5;
  --radius-card: 0;
  --radius-btn: 0;
}
[data-theme="magazine"] body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.75;
  background: #fff;
  color: #111;
}
[data-theme="magazine"] h1,
[data-theme="magazine"] h2,
[data-theme="magazine"] h3 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 900;
}
[data-theme="magazine"] header {
  background: #000;
  border-bottom: 4px solid #DC2626;
  padding: 8px 0;
}
[data-theme="magazine"] .logo { color: #fff; font-family: 'Playfair Display', Georgia, serif; font-size: 26px; }
[data-theme="magazine"] .logo span { color: #DC2626; }
[data-theme="magazine"] nav a {
  color: #fff !important;
  font-family: -apple-system, sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
[data-theme="magazine"] nav a.active,
[data-theme="magazine"] nav a:hover { color: #DC2626 !important; }
[data-theme="magazine"] .lang-btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
[data-theme="magazine"] .menu-toggle { color: #fff; }
[data-theme="magazine"] .hero {
  padding: 80px 0 60px;
  background: #fff;
  border-bottom: 3px double #000;
  text-align: center;
}
[data-theme="magazine"] .hero-inner { display: block; text-align: center; }
[data-theme="magazine"] .hero-image { display: none; }
[data-theme="magazine"] .hero h1 {
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  max-width: 1000px;
  margin: 0 auto 20px;
  color: #000;
}
[data-theme="magazine"] .hero h1::first-letter { font-size: 1.4em; color: #DC2626; }
[data-theme="magazine"] .hero p {
  font-size: 19px;
  font-style: italic;
  color: #444;
  max-width: 700px;
  margin: 0 auto;
}
[data-theme="magazine"] .card {
  border-radius: 0;
  border: none;
  border-top: 3px solid #000;
  padding: 24px 0;
  background: transparent;
  text-align: left;
}
[data-theme="magazine"] .card:hover { border-top-color: #DC2626; transform: none; box-shadow: none; }
[data-theme="magazine"] .card .icon {
  width: auto; height: auto;
  background: transparent;
  border-radius: 0;
  font-size: 36px;
  padding: 0;
  margin-bottom: 12px;
}
[data-theme="magazine"] .card h3 { font-size: 22px; color: #000; }
[data-theme="magazine"] .card p { color: #555; }
[data-theme="magazine"] .btn {
  border-radius: 0;
  padding: 16px 32px;
  font-family: -apple-system, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  background: #000;
  color: #fff;
}
[data-theme="magazine"] .btn:hover { background: #DC2626; }
[data-theme="magazine"] section.alt {
  background: #FAFAF9;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}
[data-theme="magazine"] .cta-band {
  background: #000;
  border: 3px solid #DC2626;
  color: #fff;
}
[data-theme="magazine"] .faq-q::after { color: #DC2626; }

/* ==========================================================
   4. CARD
   ========================================================== */
[data-theme="card"] {
  --primary: #F59E0B;
  --primary-dark: #D97706;
  --primary-light: #FEF3C7;
  --accent: #10B981;
  --gradient: linear-gradient(135deg, #F59E0B, #EF4444);
  --dark: #0F172A;
  --text: #1E293B;
  --muted: #64748B;
  --light: #FEF3C7;
  --bg: #FFFBEB;
  --border: #FDE68A;
  --radius-card: 24px;
  --radius-btn: 16px;
}
[data-theme="card"] header {
  background: transparent;
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 16px 0;
  border-bottom: none;
}
[data-theme="card"] .nav-wrap {
  background: #fff;
  border-radius: 999px;
  padding: 14px 28px;
  box-shadow: 0 12px 40px rgba(245,158,11,.2);
}
[data-theme="card"] .hero {
  padding: 140px 0 60px;
  background: linear-gradient(180deg, #FFFBEB, #FEF3C7);
}
[data-theme="card"] .hero-inner {
  background: #fff;
  border-radius: 40px;
  padding: 80px 48px;
  box-shadow: 0 20px 60px rgba(245,158,11,.25);
  border: 4px solid #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: block;
}
[data-theme="card"] .hero-inner::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(245,158,11,.15), transparent 70%);
  border-radius: 50%;
}
[data-theme="card"] .hero-image { display: none; }
[data-theme="card"] .hero h1 { font-size: clamp(32px, 5.5vw, 60px); position: relative; }
[data-theme="card"] .card {
  border-radius: 24px;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 12px 32px rgba(245,158,11,.15);
  padding: 28px;
}
[data-theme="card"] .card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 60px rgba(245,158,11,.3);
  border-color: #F59E0B;
}
[data-theme="card"] .card .icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border-radius: 20px;
  font-size: 36px;
}
[data-theme="card"] .btn {
  border-radius: 16px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(245,158,11,.3);
}
[data-theme="card"] .btn:hover { box-shadow: 0 16px 40px rgba(245,158,11,.5); transform: translateY(-3px); }
[data-theme="card"] section.alt { background: linear-gradient(180deg, #FEF3C7, #FFFBEB); }
[data-theme="card"] .cta-band {
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  border-radius: 40px;
  margin: 0;
  padding: 60px 40px;
  color: #fff;
}

/* ==========================================================
   5. DARK PRO
   ========================================================== */
[data-theme="dark-pro"] {
  --primary: #00FFA3;
  --primary-dark: #00CC82;
  --primary-light: #003D2A;
  --accent: #FF00FF;
  --gradient: linear-gradient(135deg, #00FFA3, #00CC82);
  --dark: #000;
  --text: #E5E7EB;
  --muted: #94A3B8;
  --light: #0F0F14;
  --bg: #0A0A0F;
  --border: #1F1F29;
  --radius-card: 16px;
  --radius-btn: 8px;
}
[data-theme="dark-pro"] body {
  background: #0A0A0F;
  color: #E5E7EB;
  font-family: 'JetBrains Mono', -apple-system, monospace;
}
[data-theme="dark-pro"] header {
  background: rgba(10,10,15,.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #00FFA3;
  box-shadow: 0 0 40px rgba(0,255,163,.15);
}
[data-theme="dark-pro"] .logo { color: #fff; font-family: 'JetBrains Mono', monospace; }
[data-theme="dark-pro"] .logo span { color: #00FFA3; text-shadow: 0 0 20px rgba(0,255,163,.8); }
[data-theme="dark-pro"] nav a { color: #E5E7EB !important; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
[data-theme="dark-pro"] nav a.active,
[data-theme="dark-pro"] nav a:hover { color: #00FFA3 !important; text-shadow: 0 0 12px rgba(0,255,163,.6); }
[data-theme="dark-pro"] .lang-btn { background: transparent; border: 1px solid #00FFA3; color: #00FFA3; }
[data-theme="dark-pro"] .menu-toggle { color: #00FFA3; background: rgba(0,255,163,.1); }
[data-theme="dark-pro"] .hero {
  background:
    radial-gradient(circle at 20% 30%, rgba(0,255,163,.15), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,0,255,.1), transparent 50%),
    #0A0A0F;
  padding: 100px 0 60px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
[data-theme="dark-pro"] .hero-inner { display: block; text-align: center; }
[data-theme="dark-pro"] .hero-image { display: none; }
[data-theme="dark-pro"] .hero h1 {
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(30px, 5.5vw, 60px);
  text-shadow: 0 0 40px rgba(0,255,163,.4);
}
[data-theme="dark-pro"] .hero p { color: #94A3B8; }
[data-theme="dark-pro"] .card {
  background: rgba(15,15,20,.8);
  border: 1px solid #1F1F29;
  border-radius: 16px;
}
[data-theme="dark-pro"] .card:hover {
  border-color: #00FFA3;
  box-shadow: 0 0 40px rgba(0,255,163,.2);
}
[data-theme="dark-pro"] .card h3 { color: #fff; font-family: 'JetBrains Mono', monospace; }
[data-theme="dark-pro"] .card p { color: #94A3B8; }
[data-theme="dark-pro"] .card .icon { background: rgba(0,255,163,.1); border: 1px solid #00FFA3; color: #00FFA3; }
[data-theme="dark-pro"] .btn {
  background: transparent;
  color: #00FFA3 !important;
  border: 2px solid #00FFA3;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(0,255,163,.3);
}
[data-theme="dark-pro"] .btn:hover { background: #00FFA3; color: #0A0A0F !important; box-shadow: 0 0 40px rgba(0,255,163,.6); }
[data-theme="dark-pro"] .btn-ghost { background: transparent; border: 2px solid #1F1F29; color: #E5E7EB !important; }
[data-theme="dark-pro"] .btn-ghost:hover { border-color: #00FFA3; color: #00FFA3 !important; }
[data-theme="dark-pro"] section.alt {
  background: #0F0F14;
  border-top: 1px solid #1F1F29;
  border-bottom: 1px solid #1F1F29;
}
[data-theme="dark-pro"] h2, [data-theme="dark-pro"] h3 { color: #fff; font-family: 'JetBrains Mono', monospace; }
[data-theme="dark-pro"] .section-sub { color: #94A3B8; }
[data-theme="dark-pro"] .cta-band {
  background: #000;
  border: 1px solid #00FFA3;
  box-shadow: inset 0 0 60px rgba(0,255,163,.1);
  color: #fff;
}
[data-theme="dark-pro"] .faq-item { background: #0F0F14; border-color: #1F1F29; }
[data-theme="dark-pro"] .faq-item.open { border-color: #00FFA3; box-shadow: 0 0 20px rgba(0,255,163,.15); }
[data-theme="dark-pro"] .faq-q { color: #fff; }
[data-theme="dark-pro"] .faq-a { color: #94A3B8; }
[data-theme="dark-pro"] .faq-q::after { color: #00FFA3; }
[data-theme="dark-pro"] footer { background: #000; border-top: 1px solid #00FFA3; }
[data-theme="dark-pro"] footer h4 { color: #00FFA3; }
[data-theme="dark-pro"] footer a { color: #94A3B8; }
[data-theme="dark-pro"] footer a:hover { color: #00FFA3; }

/* ========== MOBİL ========== */
@media (max-width: 900px) {
  [data-theme="split"] .hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  [data-theme="split"] .hero-text,
  [data-theme="split"] .hero h1,
  [data-theme="split"] .hero p { text-align: center; }
  [data-theme="split"] .hero-actions { justify-content: center; }
  [data-theme="split"] .hero-image { order: -1; aspect-ratio: 16/9; font-size: 80px; }
  [data-theme="split"] .nav-wrap { border-radius: 16px; margin: 12px 16px; }
  [data-theme="split"] .hero { padding: 120px 0 60px; }
  [data-theme="card"] .hero-inner { padding: 48px 24px; border-radius: 24px; }
  [data-theme="magazine"] .hero h1 { font-size: clamp(32px, 9vw, 56px); }
}