@charset "UTF-8";
/* =====================================================================
   MÜFREDAT AKADEMİ — ORTAK TASARIM SİSTEMİ (Public Site)
   ---------------------------------------------------------------------
   Bu dosya sitenin TEK merkezi tasarım katmanıdır.
   Sayfaların kendi satır içi stilleri korunur; buradaki tokenlar ve
   rafinasyon kuralları en son yüklenerek tutarlı bir görsel dil kurar.

   İçerik:
     01. Design token'lar (renk / tipografi / boşluk / radius / gölge)
     02. Taban (base) ayarları ve zemin
     03. Tipografi ritmi ve hiyerarşi
     04. Yerleşim: container, dikey ritim, taşma koruması
     05. Bileşenler: buton, kart, form, rozet, tablo
     06. Header / navigasyon + Panel Girişi
     07. Hero ve içerik bölümleri
     08. Erişilebilirlik: focus, kontrast, dokunma hedefi, reduced-motion
     09. Duyarlı kırılımlar (375 / 768 / 1024 / 1366 / 1920)

   KURAL: Global `svg`, `img`, `button`, `table` seçicilerine kontrolsüz
   boyut verilmez. Her boyut kuralı bir bileşen bağlamına bağlıdır.
   ===================================================================== */

/* =====================================================================
   01. DESIGN TOKEN'LAR
   Sayfaların halihazırda kullandığı değişken adları korunur; yalnızca
   değerleri rafine edilir. Böylece mevcut kurallar otomatik olarak
   yeni palete geçer.
   ===================================================================== */
:root{
  /* — Kurumsal lacivert ölçeği (metin + güven) — */
  --ma-navy-950:#091729;
  --ma-navy-900:#0B2447;
  --ma-navy-800:#123B77;
  --ma-navy-700:#17539F;

  /* — Canlı mavi: aksiyon ve veri vurgusu — */
  --ma-blue-600:#1E6FD9;
  --ma-blue-500:#2E90FF;
  --ma-blue-100:#E6F0FD;
  --ma-cyan:#7FD8F7;

  /* — Turuncu: yalnızca sınırlı vurgu — */
  --ma-accent:#EE8620;
  --ma-accent-soft:#FFB765;
  --ma-accent-100:#FFF3E5;

  /* — Nötrler: kırık beyaz + açık mavi-gri — */
  --ma-canvas:#FBFCFE;
  --ma-surface:#FFFFFF;
  --ma-surface-2:#F4F7FB;
  --ma-line:#E4EBF3;
  --ma-line-strong:#D2DEEA;
  --ma-text:#16243A;          /* tam siyah değil: koyu lacivert-gri */
  --ma-text-soft:#4A5B73;
  --ma-text-muted:#637289;
  --ma-success:#12A474;

  /* Mevcut sayfa değişkenlerinin rafine karşılıkları */
  --blue-950:#091729;
  --blue-900:#0B2447;
  --blue-800:#123B77;
  --blue-700:#17539F;
  --blue-600:#1E6FD9;
  --blue-500:#2E90FF;
  --cyan:#7FD8F7;
  --orange:#EE8620;
  --orange-2:#FFB765;
  --gray-50:#FBFCFE;
  --gray-100:#F1F5FA;
  --gray-200:#E4EBF3;
  --gray-500:#637289;
  --gray-700:#3D4E68;
  --green:#12A474;

  /* — Tipografi — */
  --ma-ff-head:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ma-ff-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ma-fs-body:17px;
  --ma-lh-body:1.72;
  --ma-w-body:400;
  --ma-w-medium:500;
  --ma-w-strong:600;
  --ma-w-head:700;

  /* — Boşluk ölçeği (4px tabanlı) — */
  --ma-s1:4px;  --ma-s2:8px;  --ma-s3:12px; --ma-s4:16px;
  --ma-s5:20px; --ma-s6:24px; --ma-s8:32px; --ma-s10:40px;
  --ma-s12:48px;--ma-s16:64px;--ma-s20:80px;--ma-s24:96px;

  /* — Radius — */
  --ma-r-sm:10px; --ma-r-md:14px; --ma-r-lg:18px; --ma-r-xl:24px; --ma-r-full:999px;
  --radius-xl:24px; --radius-lg:18px; --radius-md:14px;

  /* — Gölge: çok yumuşak, tek yönlü — */
  --ma-sh-xs:0 1px 2px rgba(11,36,71,.05);
  --ma-sh-sm:0 2px 8px rgba(11,36,71,.05);
  --ma-sh-md:0 10px 26px rgba(11,36,71,.07);
  --ma-sh-lg:0 20px 48px rgba(11,36,71,.09);
  --shadow:0 20px 48px rgba(11,36,71,.09);
  --shadow-soft:0 10px 26px rgba(11,36,71,.07);

  /* — Yerleşim — */
  --ma-container:1160px;
  --container:1160px;
  --ma-gutter:20px;
}

/* =====================================================================
   02. TABAN
   ===================================================================== */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  font-family:var(--ma-ff-body)!important;
  font-size:var(--ma-fs-body);
  font-weight:var(--ma-w-body);
  line-height:var(--ma-lh-body);
  color:var(--ma-text);
  background:
    radial-gradient(1200px 520px at 12% -8%, rgba(46,144,255,.055), transparent 62%),
    linear-gradient(180deg,#FBFCFE 0%, #F6F9FD 46%, #FFFFFF 100%)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
  overflow-x:hidden;
}

/* Font Awesome ikon fontlarının ağırlığı ASLA ezilmez. */
.fa,.fas,.far,.fab,.fal,.fad,
[class^="fa-"],[class*=" fa-"],
.fa-solid,.fa-regular,.fa-brands,.fa-light{
  font-family:"Font Awesome 6 Free","Font Awesome 6 Brands",inherit;
  font-weight:inherit;
}
.fa-solid,.fas{ font-weight:900!important; }
.fa-regular,.far{ font-weight:400!important; }
.fa-brands,.fab{ font-weight:400!important; }

/* Görseller taşmasın; ancak genel bir boyut dayatılmaz. */
img,svg,video,canvas{ max-width:100%; }
img{ height:auto; }

::selection{ background:rgba(46,144,255,.22); color:var(--ma-navy-950); }

/* =====================================================================
   03. TİPOGRAFİ RİTMİ VE HİYERARŞİ
   Ağırlık normalizasyonu sayfa kaynaklarında da yapıldı; burada
   ölçek, satır yüksekliği ve hiyerarşi netleştirilir.
   ===================================================================== */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ma-ff-head)!important;
  color:inherit;
  line-height:1.18;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1{ font-size:clamp(30px,3.4vw,46px); font-weight:var(--ma-w-head); line-height:1.12; letter-spacing:-.026em; }
h2{ font-size:clamp(24px,2.4vw,34px); font-weight:var(--ma-w-head); letter-spacing:-.022em; }
h3{ font-size:clamp(19px,1.5vw,23px); font-weight:650; }
h4{ font-size:17px; font-weight:650; }
h5,h6{ font-size:15px; font-weight:600; letter-spacing:0; }

/* Başlık ↔ açıklama arası net hiyerarşi */
h1 + p, h2 + p, h3 + p,
h1 + .lead, h2 + .lead{ margin-top:var(--ma-s3); }

p{ line-height:var(--ma-lh-body); }
p + p{ margin-top:var(--ma-s3); }

/* Uzun satırları sınırla — okunabilirlik */
.lead,
.container > p,
main > section > .container > p{
  max-width:74ch;
  font-size:clamp(16px,1.05vw,18.5px);
  line-height:1.74;
  font-weight:var(--ma-w-body);
}
.lead{ font-size:clamp(16.5px,1.15vw,19px); }

/* Ortalanmış bölümlerde metin bloğu da ortalansın */
[style*="text-align:center"] > p,
[style*="text-align: center"] > p,
.section-head p,
.sec-head p{ margin-left:auto; margin-right:auto; }

/* Vurgu dengeli: her yer kalın değil */
b,strong{ font-weight:var(--ma-w-strong); }
small,.tiny{ font-size:14px; line-height:1.6; }
li{ line-height:1.7; }
ul,ol{ padding-left:1.15em; }
li + li{ margin-top:6px; }

/* Tamamı büyük harf uzun metinleri yumuşat */
[class*="eyebrow"],[class*="kicker"],[class*="overline"],.mini-tag,.pill,.tag{
  letter-spacing:.06em;
  font-weight:var(--ma-w-strong);
  font-size:12.5px;
}

a{ color:inherit; }
/* Yalnızca metin akışı (prose) içindeki sınıfsız bağlantılar biçimlenir.
   Kart/CTA içindeki sınıfsız bağlantıların kendi rengi korunur. */
main p > a:not([class]),
main li > a:not([class]){
  color:var(--ma-navy-700);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(23,83,159,.35);
}
main p > a:not([class]):hover,
main li > a:not([class]):hover{ text-decoration-color:currentColor; }
/* Koyu zeminlerde prose bağlantı rengi devre dışı */
[class*="dark"] p > a:not([class]),
[class*="cta"] p > a:not([class]){ color:inherit; }

/* =====================================================================
   04. YERLEŞİM
   ===================================================================== */
.container{
  width:min(var(--ma-container), calc(100% - (var(--ma-gutter) * 2)));
  margin-inline:auto;
}

/* Bölümler arası nefes: yalnızca kendi dolgusu olmayanlar etkilenir */
main > section{ position:relative; }

/* Yatay taşma koruması — hiçbir kırılımda scroll oluşmasın */
html,body{ max-width:100%; }
main,header,footer,section,.container{ min-width:0; }

/* =====================================================================
   05. BİLEŞENLER
   ===================================================================== */

/* ── Butonlar ───────────────────────────────────────────────────── */
.btn,a.btn,button.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:12px 22px;
  border-radius:var(--ma-r-md);
  font-family:var(--ma-ff-head)!important;
  font-weight:var(--ma-w-strong)!important;
  font-size:15px; line-height:1.2; letter-spacing:-.005em;
  border:1px solid transparent;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  text-decoration:none; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-primary,.btn.btn-primary{
  background:var(--ma-navy-700); color:#fff; border-color:var(--ma-navy-700);
  box-shadow:0 6px 18px rgba(23,83,159,.20);
}
.btn-primary:hover{ background:var(--ma-navy-800); border-color:var(--ma-navy-800); box-shadow:0 10px 24px rgba(23,83,159,.26); }

.btn-blue,.btn.btn-blue{
  background:var(--ma-blue-600); color:#fff; border-color:var(--ma-blue-600);
  box-shadow:0 6px 18px rgba(30,111,217,.20);
}
.btn-blue:hover{ background:#1A62C4; border-color:#1A62C4; }

/* Turuncu YALNIZCA birincil dönüşüm noktasında */
.btn-accent,.btn-orange,.btn.btn-accent{
  background:var(--ma-accent); color:#2B1704; border-color:var(--ma-accent);
  box-shadow:0 6px 18px rgba(238,134,32,.22);
}
.btn-accent:hover,.btn-orange:hover{ background:#DE7712; border-color:#DE7712; }

.btn-light,.btn-ghost,.btn.btn-light{
  background:#fff; color:var(--ma-navy-800);
  border-color:var(--ma-line-strong);
  box-shadow:var(--ma-sh-xs);
}
.btn-light:hover,.btn-ghost:hover{ border-color:var(--ma-blue-500); color:var(--ma-navy-700); background:#FBFDFF; }

.btn-outline{ background:transparent; border-color:currentColor; }

/* ── Kartlar: hafif sınır, kontrollü radius, çok yumuşak gölge ──── */
[class*="-card"],[class$="card"],.card,.box{
  border-radius:var(--ma-r-xl);
}
.card,.service-card,.package-card,.feature-card,.blog-card,.center-card,
.faq-card,.trust-card,.value-card,.review-card,.info-card{
  background:var(--ma-surface);
  border:1px solid var(--ma-line);
  box-shadow:var(--ma-sh-sm);
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.card:hover,.service-card:hover,.package-card:hover,.blog-card:hover,.center-card:hover{
  box-shadow:var(--ma-sh-md);
  border-color:var(--ma-line-strong);
  transform:translateY(-2px);
}

/* ── Form alanları ──────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select,textarea{
  font-family:var(--ma-ff-body)!important;
  font-size:16px;              /* iOS zoom engeli */
  font-weight:var(--ma-w-body);
  color:var(--ma-text);
  background:#fff;
  border:1px solid var(--ma-line-strong);
  border-radius:var(--ma-r-md);
  padding:13px 15px;
  min-height:48px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
textarea{ min-height:120px; line-height:1.65; resize:vertical; }
input::placeholder,textarea::placeholder{ color:#94A3B4; font-weight:400; }
input:focus,select:focus,textarea:focus{
  outline:0;
  border-color:var(--ma-blue-500);
  box-shadow:0 0 0 3px rgba(46,144,255,.16);
}
label{ font-weight:var(--ma-w-strong); font-size:14.5px; }

/* ── Rozet / etiket ─────────────────────────────────────────────── */
.badge,.pill,.chip,.tag{
  display:inline-flex; align-items:center; gap:7px;
  border-radius:var(--ma-r-full);
  font-weight:var(--ma-w-strong);
  line-height:1.5;
}

/* ── Tablolar (sayfa içi) ───────────────────────────────────────── */
main table{ border-collapse:collapse; width:100%; font-size:15px; }
main table th{
  text-align:left; font-weight:var(--ma-w-strong);
  color:var(--ma-text-muted); font-size:13px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:12px 14px; border-bottom:1px solid var(--ma-line);
}
main table td{ padding:13px 14px; border-bottom:1px solid var(--ma-line); }

/* =====================================================================
   06. HEADER / NAVİGASYON + PANEL GİRİŞİ
   ===================================================================== */
.navbar{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ma-line)!important;
  box-shadow:none!important;
}
.navbar .nav-links > a,
.navbar .nav-dropdown-btn{
  font-family:var(--ma-ff-head)!important;
  font-size:14.5px!important;
  font-weight:var(--ma-w-strong)!important;
  color:var(--ma-text-soft)!important;
  letter-spacing:-.005em!important;
}
.navbar .nav-links > a:hover,
.navbar .nav-links > a.active,
.navbar .nav-dropdown-btn:hover{
  background:rgba(30,111,217,.07)!important;
  color:var(--ma-navy-700)!important;
}
.navbar .brand-title{ font-family:var(--ma-ff-head)!important; font-weight:var(--ma-w-head)!important; color:var(--ma-navy-900)!important; }
.navbar .brand-subtitle,.navbar .brand-sub{ font-weight:var(--ma-w-medium)!important; color:var(--ma-text-muted)!important; letter-spacing:.02em!important; }
/* Logo çevresinde güvenli boşluk */
.navbar .brand-logo{ padding:2px; }
.navbar .brand-logo img{ object-fit:contain; }

/* — Panel Girişi: sade, ana CTA'dan daha az baskın — */
/* Sayfaların kendi geç yüklenen !important kuralları bu bileşeni
   ezmemelidir; kritik özellikler açıkça sabitlenir. */
.ma-panel-link{
  display:inline-flex!important; align-items:center!important; gap:8px!important;
  height:44px!important; min-height:44px!important; padding:0 15px!important;
  border-radius:var(--ma-r-md)!important;
  border:1px solid var(--ma-line-strong)!important;
  background:#fff!important;
  color:var(--ma-navy-800)!important;
  font-family:var(--ma-ff-head)!important;
  font-size:14px!important; font-weight:var(--ma-w-strong)!important; line-height:1!important;
  text-decoration:none!important; white-space:nowrap!important;
  width:auto!important; flex:none!important;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.ma-panel-link svg{ width:18px!important; height:18px!important; flex:none!important; }
.ma-panel-link span{ display:inline!important; }
.ma-panel-link:hover{ border-color:var(--ma-blue-500); color:var(--ma-navy-700); background:#F7FBFF; }
.ma-panel-link:focus-visible{ outline:2px solid var(--ma-blue-500); outline-offset:2px; }
/* Giriş bağlantısı, sayfaların hamburger eşiklerinin EN DARINA (980px)
   kadar görünür kalır. Eski kural 1180px'te gizliyordu; sayfaların
   hamburger eşiği 1080px (çoğu sayfa) ve 980px (online deneme salonu)
   olduğu için aradaki genişliklerde giriş bağlantısı HİÇBİR yerde
   görünmüyordu. 981-1080px arasında hem kompakt "Giriş" butonu hem
   hamburger görünür; giriş yolu her genişlikte erişilebilir kalır. */
@media (max-width:980px){ .ma-panel-link{ display:none!important; } }

/* Mobil menü içindeki Panel Girişi satırı */
.mobile-panel .ma-panel-link-mobile{
  display:flex!important; align-items:center!important; gap:10px!important;
  justify-content:flex-start!important;
  margin-top:10px!important; padding:14px 16px!important;
  min-height:48px!important;
  border-top:1px solid var(--ma-line)!important;
  color:var(--ma-navy-800)!important;
  font-family:var(--ma-ff-head)!important; font-weight:var(--ma-w-strong)!important;
}
.mobile-panel .ma-panel-link-mobile svg{ width:19px; height:19px; flex:none; }

.mobile-panel{ border-radius:var(--ma-r-xl)!important; box-shadow:var(--ma-sh-lg)!important; border:1px solid var(--ma-line)!important; }
.mobile-panel a,.mobile-panel summary{ font-family:var(--ma-ff-head); font-weight:var(--ma-w-strong); }

/* =====================================================================
   07. HERO VE İÇERİK BÖLÜMLERİ
   ===================================================================== */
.hero,[class*="-hero"]{ isolation:isolate; }
.hero h1,[class*="-hero"] h1{ margin-bottom:var(--ma-s4); }
/* Hero başlığı: tek ve güçlü mesaj — aşırı büyük tipografi yerine
   dengeli ölçek ve daha az satır kırılması */
.hero h1{
  font-size:clamp(34px,4vw,58px);
  line-height:1.1;
  max-width:min(100%, 20ch);
}
@media (max-width:900px){ .hero h1{ font-size:clamp(28px,5.6vw,38px); max-width:100%; } }
.hero .lead,[class*="-hero"] .lead{ margin-bottom:var(--ma-s6); }

/* Hero CTA grupları */
.hero-actions,.cta-actions,.hero-cta,.btn-row{
  display:flex; flex-wrap:wrap; gap:var(--ma-s3); align-items:center;
}

/* Bölüm başlıkları */
.section-head,.sec-head{ margin-bottom:var(--ma-s8); }

/* Gereksiz çerçeve ve gölge azaltma: iç içe kart görünümünü kır */
.card .card,[class*="-card"] [class*="-card"]{ box-shadow:none; }

/* Gradient başlıklar: sRGB'de gri bant üreten mavi→turuncu geçişi yerine
   temiz lacivert→mavi geçişi. Turuncu vurgu CTA'lara ayrılır. */
.gradient-text,[class*="gradient-text"]{
  background:linear-gradient(94deg,var(--ma-navy-800) 0%,var(--ma-navy-700) 42%,var(--ma-blue-500) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

/* Footer */
footer{ font-size:15px; }
footer a{ text-decoration:none; }
footer a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* =====================================================================
   08. ERİŞİLEBİLİRLİK
   ===================================================================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--ma-blue-500);
  outline-offset:2px;
  border-radius:8px;
}
/* Fare tıklamasında görünmez, klavyede görünür */
:focus:not(:focus-visible){ outline:none; }

/* Mobil dokunma hedefleri */
@media (max-width:768px){
  .btn,a.btn,button.btn{ min-height:48px; padding:13px 20px; width:auto; }
  .navbar .mobile-menu-button{ min-width:48px; min-height:48px; }
  a[class*="btn"],button{ touch-action:manipulation; }
}

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

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .btn:hover,.card:hover,[class*="-card"]:hover{ transform:none!important; }
}

/* =====================================================================
   09. DUYARLI KIRILIMLAR
   ===================================================================== */

/* — 1920 px ve üzeri: içerik genişliği sabit, kenar boşluğu artar — */
@media (min-width:1600px){
  :root{ --ma-gutter:40px; }
}

/* — 1366 px — */
@media (max-width:1440px){
  :root{ --ma-container:1120px; --ma-gutter:28px; }
}

/* — 1024 px (tablet yatay) — */
@media (max-width:1180px){
  :root{ --ma-gutter:24px; --ma-fs-body:16.5px; }
}

/* — 768 px (tablet dikey) — */
@media (max-width:900px){
  :root{ --ma-gutter:20px; }
  h1{ font-size:clamp(27px,5.4vw,34px); }
  h2{ font-size:clamp(22px,4.2vw,27px); }
  h3{ font-size:19px; }
}

/* — 375 px (mobil) — */
@media (max-width:520px){
  :root{ --ma-gutter:16px; --ma-fs-body:16px; --ma-lh-body:1.7; }
  h1{ font-size:clamp(25px,7vw,30px); line-height:1.18; }
  h2{ font-size:22px; }
  h3{ font-size:18px; }
  .lead{ font-size:16px; }
  small,.tiny{ font-size:13.5px; }
  /* Mobilde grid'ler tek sütuna düşsün — yatay taşma engeli */
  .hero-grid,.trust-grid,.contact-wrap,.services-grid,.packages,
  .option-grid,.contact-grid,.result-list,.center-grid,.question-grid,
  .student-grid,.result-grid-pa,.daily-plan{
    grid-template-columns:1fr!important;
  }
  .btn,a.btn{ width:100%; }
  .hero-actions .btn,.cta-actions .btn{ flex:1 1 100%; }
}

/* Yatay kaydırma gerektiren tabloları güvene al */
@media (max-width:768px){
  main table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Yazdırma */
@media print{
  .navbar,.mobile-panel,.top-alert,footer .socials{ display:none!important; }
  body{ background:#fff!important; }
}

/* =====================================================================
   R5 — MOBİL KULLANILABİLİRLİK KATMANI
   ---------------------------------------------------------------------
   Bu bölüm sitenin TEK responsive kaynağıdır. Sayfa içi eski
   !important kuralları geç yüklenen bu dosyayla ezilebilsin diye
   yalnızca gerçekten çakışan yerlerde !important kullanılmıştır;
   her biri gerekçesiyle işaretlidir.
   Masaüstü görünümü (>1080px) bilinçli olarak değiştirilmemiştir.
   ===================================================================== */

/* --- 1. Yatay taşma güvenliği ---------------------------------------
   overflow-x:clip kaydırma kapsayıcısı OLUŞTURMAZ; bu yüzden sticky
   navbar bozulmaz. Desteklemeyen tarayıcılarda hidden'a düşer.       */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ overflow-x:clip; }
@supports not (overflow:clip){ body{ overflow-x:hidden; } }
html,body{ max-width:100%; }

/* Hiçbir öğe kapsayıcısından taşmasın */
img,svg,video,canvas,iframe,table,pre{ max-width:100%; }
img,video{ height:auto; }
/* Uzun bağlantı / e-posta / kesintisiz metin taşmasın */
p,li,dd,dt,figcaption,blockquote,label,small,td,th{ overflow-wrap:break-word; }
a[href^="mailto:"],a[href^="tel:"],a[href*="wa.me"],code,kbd{ overflow-wrap:anywhere; word-break:break-word; }
h1,h2,h3,h4,h5,h6{ overflow-wrap:break-word; hyphens:auto; }

/* --- 2. Mobil menü: konumlandırma, kaydırma, katman ------------------ */
/* Menü hiçbir sayfada içeriğin arkasında kalmamalı. Navbar z-index'i
   sayfalarda 10000; panel onun içinde ama bazı sayfalarda hero
   bileşenleri isolation/transform ile üste çıkabiliyor.               */
.navbar{ z-index:10000; }
.mobile-panel{
  z-index:10060;
  max-height:calc(100vh - 96px);
  max-height:calc(100dvh - 96px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
/* Menü açıkken arka sayfa kontrolsüz kaymasın */
body.ma-menu-open{ overflow:hidden; touch-action:none; }
/* Yarı saydam arka plan katmanı — ek HTML gerektirmez */
body.ma-menu-open::before{
  content:""; position:fixed; inset:0; z-index:9990;
  background:rgba(8,23,54,.38);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
/* Dokunma hedefleri en az 44x44 */
.mobile-panel a,
.mobile-panel summary{
  min-height:46px;
  display:flex; align-items:center;
  padding-top:11px; padding-bottom:11px;
}
.mobile-panel .mobile-services-list a{ min-height:44px; }
.navbar .mobile-menu-button{ min-width:44px; min-height:44px; touch-action:manipulation; }

/* Mobil menü "Giriş" satırı — belirgin ama tasarımla uyumlu,
   her zaman menünün EN ALTINDA. */
.mobile-panel .ma-panel-link-mobile{
  order:99;
  margin-top:12px!important;      /* sayfa içi kurallar bunu eziyordu */
  padding:14px 16px!important;
  min-height:48px!important;
  border-top:1px solid var(--ma-line)!important;
  border-radius:0 0 var(--ma-r-lg) var(--ma-r-lg);
  background:var(--ma-blue-50,#F2F7FF);
  color:var(--ma-navy-800)!important;
  gap:10px!important;
}
.mobile-panel .ma-panel-link-mobile:hover,
.mobile-panel .ma-panel-link-mobile:focus-visible{ background:#E8F1FF; }

/* Sade üst bar kullanan sayfalar (blog yazısı, yorumlar) için giriş bağlantısı */
.ma-topbar-login{
  display:inline-flex; align-items:center; gap:7px;
  min-height:40px; padding:0 12px; border-radius:999px;
  border:1px solid var(--ma-line-strong); background:#fff;
  color:var(--ma-navy-800); font-weight:var(--ma-w-strong); text-decoration:none;
}
.ma-topbar-login svg{ flex:none; }

/* --- 3. Kapsayıcı ve ızgara davranışı ------------------------------- */
@media (max-width:1080px){
  .container,.wrap,.shell{ padding-left:var(--ma-gutter,20px); padding-right:var(--ma-gutter,20px); }
}
@media (max-width:768px){
  :root{ --ma-gutter:18px; }
  /* İki+ sütunlu genel ızgaralar tek sütuna düşsün */
  [class*="-grid"]:not(.mobile-services-list):not(.ma-keep-grid),
  [class*="grid-"]:not(.ma-keep-grid),
  .cards,.card-grid,.features,.pricing,.plans,.steps,.faq-grid,.stats{
    grid-template-columns:1fr!important;   /* sayfa içi sabit sütun sayıları ezilir */
  }
  /* Ama 2'li küçük istatistik rozetleri sıkışmasın diye ayrık tutulanlar */
  .ma-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  /* Yan yana daralan esnek kartlar alt alta geçsin */
  [class*="-row"],[class*="-flex"],.btn-row,.actions,.cta-actions,.hero-actions{
    flex-wrap:wrap;
  }
}

/* --- 4. Tipografi: mobilde okunabilirlik --------------------------- */
@media (max-width:520px){
  body{ font-size:16px; line-height:1.7; }
  .eyebrow,.badge,.chip,.pill{ font-size:12.5px; }
  /* 12px altı metin bırakılmaz */
  small,.tiny,.hint,.note,figcaption{ font-size:13px; }
}
@media (max-width:400px){
  h1{ font-size:clamp(23px,7.4vw,28px); }
  h2{ font-size:20px; }
}

/* --- 5. Form alanları: iOS Safari yakınlaşmasını önle --------------- */
@media (max-width:900px){
  input,select,textarea,
  .input,.form-control{
    font-size:16px!important;   /* 16px altı iOS'ta otomatik zoom tetikler */
    max-width:100%;
  }
  input,select,textarea{ min-height:46px; }
  textarea{ min-height:110px; }
  select{ background-position:right 12px center; }
  /* Sabit genişlikli form alanları taşmasın */
  form,fieldset,.form,.form-grid,.field,.form-row{ max-width:100%; min-width:0; }
  input[size],input[style*="width"]{ width:100%!important; }
}

/* --- 6. Butonlar ---------------------------------------------------- */
@media (max-width:520px){
  .btn,a.btn,button.btn{ min-height:48px; }
  /* Tek başına duran CTA'lar tam genişlik; yan yana grup ise eşit paylaşsın */
  .hero-actions>.btn,.cta-actions>.btn,.actions>.btn{ flex:1 1 100%; }
}

/* --- 7. Tablolar: sayfa değil, tablo kaysın ------------------------ */
@media (max-width:900px){
  .table-wrap,.table-scroll,.tbl-wrap{
    overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  main table{
    display:block; width:100%; max-width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-collapse:collapse;
  }
  main table th,main table td{ white-space:nowrap; }
}

/* --- 8. Modal / açılır pencereler ----------------------------------- */
@media (max-width:768px){
  .modal,.modal-backdrop,.popup,.dialog,.overlay{ padding:12px; }
  .modal .modal-box,.modal>div,.popup>div,.dialog>div,
  .modal-backdrop .modal{
    width:calc(100vw - 24px)!important;   /* sabit px genişlikler taşıyordu */
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
}

/* --- 9. Hikâye (story) duyuru katmanı ------------------------------- */
.ma-story-root{ padding:12px; }
.ma-story-close{ min-width:44px; min-height:44px; }
@media (max-width:520px){
  .ma-story-shell{ width:100%; max-width:100%; }
  .ma-story-arrow{ min-width:44px; min-height:44px; }
}

/* --- 10. Footer ----------------------------------------------------- */
@media (max-width:900px){
  .premium-footer .footer-top,.footer-inner,.footer-grid{
    grid-template-columns:1fr!important; text-align:left;
  }
  .footer-links-block,.footer-contact-line,.footer-page-links{
    justify-content:flex-start!important; text-align:left!important;
  }
  .footer-brand-block{ min-width:0!important; }
}
@media (max-width:520px){
  .footer-contact-line,.footer-page-links{ gap:8px!important; }
  .footer-contact-line a{ padding:9px 12px!important; }
}

/* --- 11. Sabit/yapışkan bileşenler içeriği kapatmasın --------------- */
.floating-whatsapp{ z-index:9980; }
@media (max-width:520px){
  .floating-whatsapp{ width:52px; height:52px; right:14px; bottom:14px; }
  body{ padding-bottom:env(safe-area-inset-bottom); }
}

/* --- 12. Logo mobilde ezilmesin ------------------------------------- */
@media (max-width:520px){
  .navbar .brand{ min-width:0!important; flex:1 1 auto!important; gap:9px!important; }
  .navbar .brand-title{ font-size:17px!important; }
  .navbar .brand-subtitle,.navbar .brand-sub{ font-size:12px!important; }
  .navbar .brand-logo,.navbar .brand-logo-wrap{
    width:42px!important; height:42px!important;
    min-width:42px!important; max-width:42px!important; flex:0 0 42px!important;
  }
  .navbar .nav-actions{ gap:6px!important; }
}
@media (max-width:400px){
  .navbar .brand-title{ font-size:16px!important; }
}

/* Menü açıkken sayfa kilitli olsa da menünün KENDİ içi kaydırılabilir kalır */
body.ma-menu-open .mobile-panel{ touch-action:pan-y; }

/* =====================================================================
   R5 — DAR EKRAN (≤520px) TAŞMA KÖK NEDENLERİ
   ---------------------------------------------------------------------
   Ölçümle bulunan üç kök neden:
     1) Izgara/esnek çocuklarının varsayılan min-width:auto değeri,
        kart genişliğini içeriğin min-content'ine kilitliyordu.
     2) Butonlarda white-space:nowrap uzun etiketleri tek satıra zorluyordu.
     3) 320-360px'te kapsayıcı iç boşluğu (bazı sayfalarda 32px+32px)
        kullanılabilir genişliği tüketiyordu.
   ===================================================================== */
@media (max-width:520px){
  /* 1) Çocuklar küçülebilsin */
  [class*="-grid"] > *, [class*="grid-"] > *,
  [class*="-wrap"] > *, [class*="-list"] > *,
  .container > *, .cards > *, .row > *, .split > *{ min-width:0; }
  [class*="-grid"], [class*="grid-"], .container, .cards{ min-width:0; }

  /* 2) Uzun etiketli butonlar satır kırabilsin */
  .btn, a.btn, button.btn{
    white-space:normal;      /* sayfa içi nowrap kuralları taşmaya yol açıyordu */
    text-align:center; line-height:1.25;
  }
  /* İletişim satırları (telefon/e-posta/kullanıcı adı) kırılabilsin */
  .contact-list a, .contact-list div, .footer-contact-line a{ overflow-wrap:anywhere; }
}

@media (max-width:400px){
  /* 3) Dar ekranda güvenli ama israfsız iç boşluk */
  .container, .wrap, .shell{ padding-left:14px!important; padding-right:14px!important; }
  .contact-card, .form-card, .week-card, .program-copy,
  .card, [class*="-card"]{ padding-left:16px!important; padding-right:16px!important; }
}

/* =====================================================================
   R5 — MOBİLDE OKUNABİLİR METİN TABANI
   Ölçümde 10-11.5px'e düşen bileşenler 12px tabanına çekildi.
   ===================================================================== */
@media (max-width:520px){
  .navbar .brand-subtitle, .navbar .brand-sub{ font-size:12px!important; }
  main small, main th, main td,
  .small-pill, .yks-index-chip, .preference-city, .preference-type,
  .session-chip, .panel-meta span, .qnum, .mock-row span{ font-size:12px!important; }
}
@media (max-width:400px){
  /* 320-400px arasında marka alt başlığı yer kaplamasın */
  .navbar .brand-subtitle, .navbar .brand-sub{ display:none!important; }
}

/* Kalan 12px altı bileşenler — ölçümle tespit edilen tam seçiciler.
   (main dışında kalan tablolar ve deneme ekranı kontrol çubuğu) */
@media (max-width:520px){
  table th, table td{ font-size:12px!important; }
  .mobile-dock-meta,
  .mobile-tour-btn,
  .optical-brand span, .mobile-brand-line span,
  .exam-brand-strip span{ font-size:12px!important; }
  .mobile-tour-btn{ min-height:38px; }
}

/* Konu dağılım ısı tablosu, sayfa içinde 10.5px'e sabitlenmişti.
   Okunabilirlik için 12px tabana çekilir; hücre iç boşluğu ve ısı
   kutusu buna göre küçültülerek tablo genişliği korunur. */
@media (max-width:520px){
  .modern-table.distribution-table th,
  .modern-table.distribution-table td{ font-size:12px!important; padding:7px 3px!important; }
  .modern-table.distribution-table .heat{ font-size:12px!important; }
}