/* ============================================================
   WWN v7 – Modern Design Layer (loaded last, wins cascade)
   • Bold animated hero  • Fresh dark theme  • Readability fixes
   • Level-test wizard    • More motion / effects
   ============================================================ */

:root{
  --v7-rose:#ff3b6b;
  --v7-rose-deep:#e11d48;
  --v7-crimson:#b11226;
  --v7-plum:#5b0a1c;
  --v7-gold:#ffd166;
  --v7-ease:cubic-bezier(.22,1,.36,1);
}

/* Fresher, more modern dark palette (less "pitch black", more depth) */
[data-theme="dark"]{
  --wwn-surface:#141a2b;
  --wwn-surface-raised:#1c2440;
  --wwn-surface-muted:#283154;
  --wwn-text:#e7ecf6;
  --wwn-text-muted:#aeb8d2;
  --wwn-heading:#ffffff;
  --v7-line:rgba(255,255,255,.12);
}

/* ---------------------------------------------------------------
   1) HERO – bold animated gradient + guaranteed readable text
   --------------------------------------------------------------- */
.hero-section, .page-hero{
  background:
    radial-gradient(circle at 84% 14%, rgba(255,255,255,.18), transparent 30%),
    radial-gradient(circle at 12% 86%, rgba(255,209,102,.18), transparent 34%),
    linear-gradient(125deg, #7c0017 0%, #b11226 38%, #e11d48 66%, #7a0f2e 100%) !important;
  background-size: 100% 100%, 100% 100%, 220% 220% !important;
  animation: v7HeroShift 18s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
}
@keyframes v7HeroShift{
  0%{ background-position: 0% 0%, 0% 0%, 0% 50%; }
  100%{ background-position: 0% 0%, 0% 0%, 100% 50%; }
}
/* floating glow orbs for motion */
.hero-section::before{
  content:""; position:absolute; width:46rem; height:46rem; right:-12%; top:-26%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 62%);
  border-radius:50%; filter:blur(6px); pointer-events:none;
  animation: v7Float 12s ease-in-out infinite alternate;
}
.hero-section::after{
  content:""; position:absolute; width:26rem; height:26rem; left:-8%; bottom:-14%;
  background:radial-gradient(circle, rgba(255,209,102,.20), transparent 66%);
  border-radius:50%; pointer-events:none;
  animation: v7Float 9s ease-in-out infinite alternate-reverse;
}
@keyframes v7Float{ 0%{transform:translateY(0) translateX(0)} 100%{transform:translateY(26px) translateX(-18px)} }

/* readable hero text on the gradient */
.hero-section .hero-title, .hero-section h1,
.page-hero h1, .hero-title{
  color:#ffffff !important;
  text-shadow:0 2px 20px rgba(0,0,0,.18);
  word-break: break-word; overflow-wrap:anywhere; hyphens:auto;
}
.hero-title .highlight, .hero-section .highlight{
  background:linear-gradient(120deg,#ffe1a8,#ffd166 55%,#fff) !important;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
}
.hero-section p, .hero-section .hero-subtitle, .page-hero p, .hero-subtitle{
  color:rgba(255,255,255,.94) !important;
}
.hero-section .hero-badge, .hero-section .section-label,
.page-hero .hero-badge, .page-hero .section-label{
  background:rgba(255,255,255,.16) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.28) !important;
  backdrop-filter:blur(6px);
}
/* hero "stat" numbers + meta stay readable on gradient */
.hero-section .hero-stat, .hero-section .hero-stats *, .hero-section .stat-number,
.hero-section .hero-meta, .hero-section .hero-meta *{ color:#fff !important; }
.hero-section .btn-outline, .hero-section .btn-outline-primary,
.hero-section .btn-outline-light{
  color:#fff !important; border-color:rgba(255,255,255,.7) !important;
}
.hero-section .btn-outline:hover{ background:#fff !important; color:var(--v7-crimson) !important; }

/* ---------------------------------------------------------------
   2) DARK THEME – readable surfaces everywhere (kill white-on-dark)
   --------------------------------------------------------------- */
[data-theme="dark"] body{ background:var(--wwn-surface) !important; color:var(--wwn-text) !important; }
[data-theme="dark"] section,
[data-theme="dark"] .section-padding,
[data-theme="dark"] .level-test-section{ background-color:transparent !important; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6,
[data-theme="dark"] .section-title{ color:var(--wwn-heading) !important; }
[data-theme="dark"] p,[data-theme="dark"] li,[data-theme="dark"] span,
[data-theme="dark"] td,[data-theme="dark"] .text-muted,
[data-theme="dark"] .section-subtitle{ color:var(--wwn-text) !important; }

/* cards / boxes: force dark raised surface + light text (override forced white) */
[data-theme="dark"] .course-card,[data-theme="dark"] .feature-box,
[data-theme="dark"] .testimonial-card,[data-theme="dark"] .blog-card,
[data-theme="dark"] .location-card,[data-theme="dark"] .process-step,
[data-theme="dark"] .level-test-card,[data-theme="dark"] .legal-content,
[data-theme="dark"] .info-card,[data-theme="dark"] .pricing-card,
[data-theme="dark"] .team-card,[data-theme="dark"] .stat-card,
[data-theme="dark"] .comparison-table{
  background:var(--wwn-surface-raised) !important;
  border-color:var(--v7-line) !important;
  color:var(--wwn-text) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.45) !important;
}
[data-theme="dark"] .course-card *,[data-theme="dark"] .feature-box *,
[data-theme="dark"] .testimonial-card *,[data-theme="dark"] .blog-card *,
[data-theme="dark"] .location-card *,[data-theme="dark"] .process-step *,
[data-theme="dark"] .legal-content *,[data-theme="dark"] .info-card *,
[data-theme="dark"] .team-card *{ color:inherit; }
[data-theme="dark"] .legal-content a,[data-theme="dark"] a{ color:#ff8aa6 !important; }

/* badges / labels in dark */
[data-theme="dark"] .section-label,[data-theme="dark"] .badge-soft,
[data-theme="dark"] .hero-badge{
  background:rgba(255,59,107,.16) !important; color:#ffd1dc !important;
  border:1px solid rgba(255,59,107,.34) !important;
}

/* tables (legal / comparison) */
[data-theme="dark"] table,[data-theme="dark"] .table{ color:var(--wwn-text) !important; }
[data-theme="dark"] .table th,[data-theme="dark"] .legal-table th{
  background:rgba(255,255,255,.05) !important; color:#fff !important; border-color:var(--v7-line) !important;
}
[data-theme="dark"] .table td,[data-theme="dark"] .legal-table td{ border-color:var(--v7-line) !important; }
[data-theme="dark"] .table-bordered>:not(caption)>*>*{ border-color:var(--v7-line) !important; }

/* forms in dark */
[data-theme="dark"] .form-control,[data-theme="dark"] .form-select,[data-theme="dark"] textarea{
  background:#0f1525 !important; color:#eef2fb !important; border-color:var(--v7-line) !important;
}
[data-theme="dark"] .form-control::placeholder{ color:#8c97b3 !important; }
[data-theme="dark"] .form-control:focus,[data-theme="dark"] .form-select:focus{
  border-color:var(--v7-rose) !important; box-shadow:0 0 0 .25rem rgba(255,59,107,.22) !important;
}

/* level options in dark */
[data-theme="dark"] .level-option{
  background:#10182b !important; border-color:var(--v7-line) !important; color:var(--wwn-text) !important;
}
[data-theme="dark"] .level-option:hover,[data-theme="dark"] .level-option.is-selected{
  background:rgba(255,59,107,.14) !important; border-color:var(--v7-rose) !important;
}
[data-theme="dark"] .level-qmeta{ color:var(--v7-rose) !important; }

/* alert boxes (legal) in dark */
[data-theme="dark"] .legal-alert{ background:rgba(255,255,255,.06) !important; color:var(--wwn-text) !important; border-color:var(--v7-line) !important; }

/* ---------------------------------------------------------------
   3) LEVEL-TEST WIZARD – one card, smooth step transitions
   --------------------------------------------------------------- */
#levelTestQuestions{ min-height: 18rem; }
.level-question{
  transition: opacity .26s var(--v7-ease), transform .26s var(--v7-ease);
}
.level-question.is-entering{ opacity:0; transform:translateY(14px) scale(.99); }
.level-question.is-leaving{ opacity:0; transform:translateY(-12px) scale(.99); }
.level-qmeta{
  display:inline-block; font-weight:700; font-size:.82rem; letter-spacing:.02em;
  color:var(--v7-crimson); background:var(--wwn-red-50,#fff0f2);
  padding:.3rem .8rem; border-radius:999px; margin-bottom:1rem;
}
.level-question h3{ font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.3; margin-bottom:1.25rem; }
.level-options{ display:grid; gap:.7rem; }
.level-option{
  display:flex; align-items:center; gap:.5rem; padding:1rem 1.15rem;
  transition: transform .14s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.level-option input{ accent-color:var(--v7-rose); width:1.1rem; height:1.1rem; flex:0 0 auto; }
.level-option:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(177,18,38,.12); }
.level-option.is-selected{ box-shadow:0 10px 28px rgba(225,29,72,.22); }
.level-test-result{ opacity:0; transform:translateY(10px); transition:opacity .4s var(--v7-ease), transform .4s var(--v7-ease); }
.level-test-result.is-visible{ opacity:1; transform:none; }

/* ---------------------------------------------------------------
   4) MORE MOTION – reveal on scroll, hover lifts, button shine
   --------------------------------------------------------------- */
/* reveal: only hide AFTER js marks ready (progressive enhancement) */
.v7-ready [data-v7]{ opacity:0; transform:translateY(26px); }
[data-v7]{ transition: opacity .7s var(--v7-ease), transform .7s var(--v7-ease); }
[data-v7].v7-in{ opacity:1 !important; transform:none; }
[data-v7].d1{ transition-delay:.08s } [data-v7].d2{ transition-delay:.16s }
[data-v7].d3{ transition-delay:.24s } [data-v7].d4{ transition-delay:.32s }

/* hover lift for cards */
.course-card,.feature-box,.testimonial-card,.blog-card,.location-card,
.process-step,.info-card,.pricing-card,.team-card,.stat-card{
  transition: transform .28s var(--v7-ease), box-shadow .28s var(--v7-ease) !important;
}
.course-card:hover,.feature-box:hover,.testimonial-card:hover,.blog-card:hover,
.location-card:hover,.info-card:hover,.pricing-card:hover,.team-card:hover{
  transform: translateY(-8px);
  box-shadow:0 30px 70px rgba(177,18,38,.18) !important;
}
[data-theme="dark"] .course-card:hover,[data-theme="dark"] .feature-box:hover,
[data-theme="dark"] .testimonial-card:hover,[data-theme="dark"] .blog-card:hover,
[data-theme="dark"] .info-card:hover,[data-theme="dark"] .team-card:hover{
  box-shadow:0 30px 70px rgba(0,0,0,.6) !important;
}

/* shiny sweep on primary buttons */
.btn-cta,.btn-primary,.btn-danger{ position:relative; overflow:hidden; }
.btn-cta::after,.btn-primary::after,.btn-danger::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); transition:left .6s var(--v7-ease);
}
.btn-cta:hover::after,.btn-primary:hover::after,.btn-danger:hover::after{ left:140%; }
.btn{ transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn-cta:hover,.btn-primary:hover{ transform:translateY(-2px); }

/* icon pop on feature icons */
.feature-box i,.process-step i,.info-card i,.course-card .course-icon{
  transition: transform .3s var(--v7-ease);
}
.feature-box:hover i,.process-step:hover i,.info-card:hover i{ transform: scale(1.16) rotate(-4deg); }

/* top scroll progress bar */
#v7Progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--v7-rose),var(--v7-gold)); z-index:3000;
  box-shadow:0 0 12px rgba(255,59,107,.6); transition:width .1s linear;
}

/* nav link underline grow */
.navbar .nav-link{ position:relative; }
.navbar .nav-link::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.35rem; height:2px;
  background:var(--v7-rose); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--v7-ease);
  border-radius:2px;
}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{ transform:scaleX(1); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-section,.hero-section::before,.hero-section::after{ animation:none !important; }
  [data-v7]{ opacity:1 !important; transform:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* ============================================================
   v7.1 – Grafik & hareket iyileştirmeleri + özel dokunuşlar
   ============================================================ */

/* (a) HERO highlight kelimesi – okunur parlak altın + shimmer */
.hero-title .highlight, .hero-section .highlight, .page-hero .highlight{
  background:linear-gradient(100deg,#ffd75e 0%,#ffb627 45%,#ffe49a 80%) !important;
  background-size:220% auto !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  text-shadow:none !important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.28));
  animation:v7Shimmer 4.5s linear infinite;
}
@keyframes v7Shimmer{ to{ background-position:220% center; } }

/* (b) Bölüm başlığı alt çizgisi – canlı gradyan + beliren animasyon */
.section-title::after{
  background:linear-gradient(90deg,var(--v7-rose),var(--v7-gold)) !important;
  transform-origin:left; height:4px !important; width:64px !important;
}
.section-title.text-center::after{ transform-origin:center; }
.v7-ready .section-title[data-v7]::after{ transform:scaleX(0); transition:transform .75s var(--v7-ease) .15s; }
.section-title.text-center[data-v7]::after{ transform:translateX(0) scaleX(0); }
.section-title[data-v7].v7-in::after{ transform:scaleX(1); }
.section-title.text-center[data-v7].v7-in::after{ transform:scaleX(1); }

/* (c) Hero yüzen kartlar – cam efekti (glassmorphism) */
.hero-floating-stat{
  background:rgba(255,255,255,.84) !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%); backdrop-filter:blur(12px) saturate(135%);
  border:1px solid rgba(255,255,255,.6) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.24) !important;
}
[data-theme="dark"] .hero-floating-stat{
  background:rgba(20,26,43,.55) !important; border:1px solid rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%); backdrop-filter:blur(12px) saturate(135%);
}

/* (d) Marka rengi kaydırma çubuğu */
html{ scrollbar-width:thin; scrollbar-color:var(--v7-rose) transparent; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--v7-rose),var(--v7-crimson));
  border-radius:10px; border:3px solid transparent; background-clip:content-box;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--v7-rose),#7a1228); border:3px solid transparent; background-clip:content-box; }

/* (e) WhatsApp butonu – nabız halkası + hafif zıplama */
.whatsapp-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:v7Wa 2.4s ease-out infinite; z-index:-1;
}
.whatsapp-float{ animation:v7WaBob 3.2s ease-in-out infinite; }
@keyframes v7Wa{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 70%{box-shadow:0 0 0 18px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }
@keyframes v7WaBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.whatsapp-float:hover{ animation-play-state:paused; }

/* (f) "Popüler/Beliebt" rozetinde parıltı geçişi */
.popular-badge{ position:relative; overflow:hidden; }
.popular-badge::after{
  content:""; position:absolute; top:0; left:0; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.7),transparent);
  transform:translateX(-160%) skewX(-18deg); animation:v7Shine 3.4s ease-in-out infinite;
}
@keyframes v7Shine{ 0%,55%{transform:translateX(-160%) skewX(-18deg)} 100%{transform:translateX(280%) skewX(-18deg)} }

/* (g) Kart içi görsel yakınlaşma (blog/ekip) */
.blog-card,.team-card{ overflow:hidden; }
.blog-card img,.team-card img{ transition:transform .6s var(--v7-ease); }
.blog-card:hover img,.team-card:hover img{ transform:scale(1.07); }

/* (h) Birincil CTA hover’da altın parıltı */
.hero-section .btn-cta:hover,.hero-section .btn-primary:hover,
.cta-section .btn-cta:hover,.btn-cta.btn-lg:hover{
  box-shadow:0 16px 44px rgba(255,183,39,.5), 0 6px 18px rgba(0,0,0,.18) !important;
}

/* (i) Kaydırınca buzlu/sticky navbar */
.site-header.scrolled .navbar, .navbar.scrolled{
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
}
[data-theme="dark"] .site-header.scrolled .navbar, [data-theme="dark"] .navbar.scrolled{
  background:rgba(20,26,43,.82) !important;
}

/* (j) Reveal’e hafif ölçek + 3D tilt taban */
.v7-ready [data-v7]{ opacity:0; transform:translateY(26px) scale(.985); }
.tilt{ transform-style:preserve-3d; transition:transform .18s var(--v7-ease); will-change:transform; }

/* (k) Erişilebilir, markalı odak halkası */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[data-wwn-lang]:focus-visible{
  outline:3px solid var(--v7-rose) !important; outline-offset:2px !important; border-radius:6px;
}

/* (l) Bölüm geçişlerinde ince üst ayraç parıltısı */
.cta-section, .level-test-section{ position:relative; }

/* ============================================================
   v7.2 – Profesyonel cila (güvenli, ek katman)
   ============================================================ */

/* (1) Daha sıkı, ölçülü bölüm ritmi */
.section-padding{ padding: clamp(3rem, 6vw, 5.25rem) 0 !important; }

/* (2) Tipografi inceltme */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
h1,h2,h3,.hero-title,.section-title,.page-hero h1{ letter-spacing:-.022em; }
.hero-title,.page-hero h1{ line-height:1.04; font-weight:800; }
.section-title{ font-weight:800; line-height:1.14; }
p{ line-height:1.72; }
.lead,.section-subtitle,.hero-subtitle{ line-height:1.7; }

/* (3) Premium, katmanlı kart gölgeleri */
.course-card,.feature-box,.testimonial-card,.blog-card,.location-card,
.process-step,.info-card,.pricing-card,.team-card{
  box-shadow:0 1px 2px rgba(18,24,38,.05), 0 14px 34px rgba(18,24,38,.07) !important;
  border:1px solid rgba(18,24,38,.06) !important;
}
[data-theme="dark"] .course-card,[data-theme="dark"] .feature-box,
[data-theme="dark"] .testimonial-card,[data-theme="dark"] .blog-card,
[data-theme="dark"] .location-card,[data-theme="dark"] .process-step,
[data-theme="dark"] .info-card,[data-theme="dark"] .pricing-card,
[data-theme="dark"] .team-card{
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45) !important;
  border:1px solid var(--v7-line) !important;
}

/* (4) Buton cilası – tutarlı ağırlık, yumuşak geçiş */
.btn{ font-weight:700; letter-spacing:.005em; }
.btn-lg{ padding-top:.85rem; padding-bottom:.85rem; }
.btn-cta,.btn-primary,.btn-danger{ box-shadow:0 10px 26px rgba(177,18,38,.22); }
.btn-cta:active,.btn-primary:active{ transform:translateY(0) scale(.99); }

/* (5) Pill / rozet inceltme */
.section-label,.hero-badge,.badge-soft{
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.74rem;
}

/* (6) Metin seçimi marka rengi */
::selection{ background:var(--v7-rose); color:#fff; }
::-moz-selection{ background:var(--v7-rose); color:#fff; }

/* (7) Görsel kalitesi + tutarlı yuvarlatma */
img{ image-rendering:auto; }
.blog-card img,.team-card img,.course-card img,.article-hero img,.location-card img{
  object-fit:cover;
}

/* (8) Bağlantı hover inceltme (içerik içi) */
.legal-content a,.blog-content a,article a{
  text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .2s ease, text-decoration-color .2s ease;
}

/* (9) Footer inceltme */
.footer, footer, .site-footer{ position:relative; }
.footer a, footer a, .site-footer a{ transition:color .2s ease, opacity .2s ease, transform .2s ease; }
.footer a:hover, footer a:hover, .site-footer a:hover{ transform:translateX(2px); }

/* (10) Hero: ölçülü üst/alt nefes + içerik hizalama netliği */
.hero-section{ isolation:isolate; }
.hero-section > *{ position:relative; z-index:1; }

/* (11) Bölüm başlıkları arası tutarlı alt boşluk */
.section-header,.section-heading{ margin-bottom:clamp(2rem,4vw,3rem); }

/* (12) İnce kenarlık highlight'ı (öne çıkan kart) */
.course-card-header.a2, .pricing-card.is-featured, .course-card.is-popular{
  position:relative;
}