/*
Theme Name: Sariyya English
Theme URI: https://sariyyaenglish.com
Author: Sariyya English
Description: Sariyya English icin ozel WordPress temasi. IELTS/TOEFL/Academic English kocluk sitesi.
Version: 1.0.0
Text Domain: sariyya
*/

/* ==========================================================================
   1. Degiskenler (Design Tokens)
   ========================================================================== */
:root {
  --color-navy: #011e40;
  --color-navy-dark: #010f24;
  --color-bg: #fdfdfd;
  --color-cream-icon-bg: #ebdac7;
  --color-cream-accent: #cd9575;
  --color-cream-soft: #faf5f1;
  --color-blob: #f7f1f1;
  --color-gray-text: #6d707a;
  --color-border: #e7e5e2;
  --color-white: #ffffff;

  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-width: 1160px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
  font-weight: 600;
}
p { margin: 0 0 var(--space-2); }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section { padding-block: var(--space-6); }
.section-title {
  font-size: clamp(28px, 3vw, 34px);
  text-align: center;
}
.section-title.align-left { text-align: left; }
.eyebrow {
  color: var(--color-cream-accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--color-navy); color: var(--color-white); }
.btn-primary:hover { background: var(--color-navy-dark); }
.btn-outline { background: transparent; color: var(--color-navy); border-color: var(--color-cream-accent); }
.btn-outline:hover { background: var(--color-cream-accent); border-color: var(--color-cream-accent); color: var(--color-navy); }
.btn-cream { background: var(--color-cream-soft); color: var(--color-navy); }
.btn-cream:hover { background: var(--color-cream-accent); }
.btn-accent { background: var(--color-cream-accent); color: var(--color-white); }
.btn-accent:hover { background: var(--color-navy); }
.btn-small { padding: 10px 22px; font-size: 14px; }
.link-arrow { color: var(--color-navy); font-weight: 600; font-size: 14px; }
.link-arrow .arrow { transition: transform 0.2s ease; display: inline-block; }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   3. Header
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container { max-width: 1320px; padding-inline: 0; }
.header-inner {
  display: flex;
  align-items: center;
  height: 80px;
  gap: var(--space-3);
}
.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.site-logo img { height: 65px; width: auto; display: block; }
.site-nav {
  margin-left: auto;
}
.site-nav ul {
  display: flex;
  gap: 28px;
}
.site-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
  position: relative;
  padding-bottom: 4px;
}
.site-nav .current-menu-item > a,
.site-nav a:hover { color: var(--color-navy); }
.site-nav .current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-navy);
}
.header-cta {
  flex-shrink: 0;
  margin-left: var(--space-3);
  min-height: 44px;
  padding-inline: 22px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}
.header-cta-mobile { display: none; }
.nav-backdrop { display: none; }
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.mobile-menu-toggle span { width: 22px; height: 2px; background: var(--color-navy); display: block; }
@media (max-width: 720px) {
  .mobile-menu-toggle { margin-left: auto; }
}

/* ==========================================================================
   4. Hero
   ========================================================================== */
.hero,
.ielts-hero,
.academic-hero,
.academic-writing-lab,
.toefl-hero,
.blog-hero,
.blog-featured-section,
.contact-hero {
  height: calc(100vh - 81px);
  min-height: 560px;
  max-height: 800px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
/* WordPress admin cubugu sadece giris yapmis yoneticilere gorunur (~32px);
   gercek ziyaretciler bunu hic gormez ama biz test ederken hesaba katmaliyiz. */
body.admin-bar .hero,
body.admin-bar .ielts-hero,
body.admin-bar .academic-hero,
body.admin-bar .academic-writing-lab,
body.admin-bar .toefl-hero,
body.admin-bar .blog-hero,
body.admin-bar .blog-featured-section,
body.admin-bar .contact-hero { height: calc(100vh - 81px - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .hero,
  body.admin-bar .ielts-hero,
  body.admin-bar .academic-hero,
  body.admin-bar .academic-writing-lab,
  body.admin-bar .toefl-hero,
  body.admin-bar .blog-hero,
  body.admin-bar .blog-featured-section,
  body.admin-bar .contact-hero { height: calc(100vh - 81px - 46px); }
}
.hero .container,
.ielts-hero .container,
.academic-hero .container,
.toefl-hero .container,
.blog-hero .container { max-width: 1320px; }
/* Home hero arka plani: IELTS/TOEFL zaten cream-soft kullaniyordu, Academic
   asagida ayni tona cekildi. Tek fark icerik ve gorsellerden gelsin diye
   dorduncu ve son sayfa (Home) da ayni sicak krem tona alindi. */
.hero { background: var(--color-bg); }
.hero-inner {
  display: grid;
  grid-template-columns: 0.98fr 1.02fr;
  grid-template-rows: 1fr;
  gap: var(--space-4);
  align-items: stretch;
  height: 100%;
  width: 100%;
}
.hero-content { align-self: center; padding-top: var(--space-5); padding-bottom: var(--space-5); }
.hero-title {
  font-size: clamp(34px, 4.2vw, 46px);
  margin-bottom: var(--space-2);
}
.hero-eyebrow {
  font-size: 18px;
  margin-bottom: var(--space-2);
}
.hero-desc {
  color: var(--color-gray-text);
  font-size: 17px;
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
/* Paylasilan hero rozet bileseni: Home referans alinir (ikon 18px, metin
   14px, satir arasi var(--space-3), tek sira/nowrap). IELTS ve TOEFL'da
   4 ogeyi tek sirada tutmak icin sayfaya ozel .xxx-hero-badges siniflari
   sadece gap/flex-basis/font-size'i hafifce daraltir; Home ve Academic
   bu paylasilan varsayilanlari degistirmeden kullanir. */
/* Rozet satiri BES OGE tasiyor (IELTS, YÖKDİL, YDS, Honors Graduate,
   deneyim). Olculdu: 1440'ta rozetler 604px'lik alanin tam 604px'ini
   dolduruyordu, yani sifir pay - bu yuzden her rozetin YAZISI kendi
   icinde uc satira kiriliyordu. Ayirici bosluk 24 -> 16px, yazi 14 ->
   12.5px, ikon 20 -> 18px: satir kucultulmus gorunmuyor ama artik
   sigiyor. */
.hero-badges {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: nowrap;
}
.hero-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  position: relative;
  min-width: 0;
}
/* Ayirici cizgi ile yazi arasi 16 -> 10px: bes rozetin arasinda
   toplam 24px kazanc, satirin sigmasi buradan geliyor. */
.hero-badge:not(:first-child) { padding-left: 10px; }
.hero-badge:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--color-border);
}
.hero-badge svg { color: var(--color-cream-accent); flex-shrink: 0; width: 17px; height: 17px; }
/* 145px'te bu yazi uc satira dusuyordu; kucultulmus punto ile
   ayni yer daha fazla kelime aliyor. */
.hero-badge:last-child span { max-width: 165px; }

.hero-visual {
  position: relative;
}
.hero-visual .hero-bg {
  position: absolute;
  z-index: 0;
  left: -14%;
  bottom: 0;
  width: 132%;
  max-width: none;
  aspect-ratio: 1614 / 975;
  object-fit: contain;
}
.hero-visual .photo-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
}
.hero-visual .photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.hero-visual .photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy);
  font-size: 14px;
  text-align: center;
  padding: var(--space-2);
}

/* ==========================================================================
   5. Program Cards
   ========================================================================== */
.section-divider { border-top: 1px solid var(--color-border); }
#programs .container { max-width: 1320px; }
/* Uc program karti gosteriliyor (IELTS, TOEFL, Academic English).
   General English karti kaldirildigi icin sutun sayisi 4'ten 3'e indi;
   aksi halde masaustunde dorduncu sutun bos kalirdi. Bu sinif yalnizca
   ana sayfadaki Programs bolumunde kullaniliyor, baska hicbir yeri
   etkilemez. Tablet ve mobil kurallari (2 ve 1 sutun) degismedi. */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.program-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-white);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.program-card:hover { box-shadow: 0 12px 30px rgba(1, 29, 66, 0.08); transform: translateY(-2px); }
.program-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-2);
}
.icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-cream-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-badge svg { color: var(--color-navy); }
.program-card h3 { font-size: 17px; margin-bottom: 0; }
.program-card p { color: var(--color-gray-text); font-size: 14.5px; margin-bottom: var(--space-2); }

/* ==========================================================================
   6. Why Us
   ========================================================================== */
#why-us .container { max-width: 1320px; }
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.why-us-item {
  position: relative;
  padding-left: var(--space-4);
}
.why-us-item:first-child { padding-left: 0; }
.why-us-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--color-border);
}
.why-us-item:first-child::before { display: none; }
.why-us-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-2);
}
.why-us-item svg { color: var(--color-navy); flex-shrink: 0; }
.why-us-item h3 { font-size: 16.5px; margin-bottom: 0; }
.why-us-item p, .why-us-item ul { color: var(--color-gray-text); font-size: 14.5px; }
.why-us-item ul li { position: relative; padding-left: 14px; margin-bottom: 4px; }
.why-us-item ul li::before { content: "•"; position: absolute; left: 0; color: var(--color-cream-accent); }

/* ==========================================================================
   7. IELTS Promo Banner
   ========================================================================== */
#ielts-promo .container { max-width: 1320px; }
.ielts-promo {
  background: var(--color-cream-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
}
.ielts-promo-icon {
  width: 190px;
  height: 190px;
  flex-shrink: 0;
  position: relative;
  margin-left: -20px;
}
.ielts-promo-icon img { width: 100%; height: 100%; object-fit: contain; }
.ielts-promo-icon svg { color: var(--color-navy); }
.ielts-promo-icon .icon-mini-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-cream-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-cream-soft);
}
.ielts-promo-icon .icon-mini-badge svg { color: var(--color-navy); }
.ielts-promo h3 { font-size: 24px; margin-bottom: 4px; }
.ielts-promo-sub { color: var(--color-cream-accent); font-weight: 600; font-size: 15px; margin-bottom: var(--space-2); }
.ielts-promo-body { min-width: 0; }
.ielts-promo-list {
  display: flex;
  flex-wrap: nowrap;
  row-gap: var(--space-2);
  gap: var(--space-3);
}
.ielts-promo-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-navy);
  position: relative;
}
.ielts-promo-list li:not(:first-child) { padding-left: var(--space-3); }
.ielts-promo-list li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: var(--color-border);
}
.ielts-promo-list li span { display: inline-block; max-width: 82px; line-height: 1.25; }
.ielts-promo-list svg { color: var(--color-navy); flex-shrink: 0; }
.ielts-promo .btn { flex-shrink: 0; }

/* ==========================================================================
   8. Bio Section
   ========================================================================== */
.bio-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-5);
  align-items: start;
}
.bio-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: var(--color-cream-icon-bg);
}
.bio-photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-photo .photo-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--color-navy); font-size: 14px;
}
.bio-content h2 { font-size: clamp(28px, 3vw, 34px); margin-top: 0; }
.bio-content p { color: var(--color-gray-text); font-size: 15.5px; }

/* ==========================================================================
   9. Learning Journey
   ========================================================================== */
.journey-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
  position: relative;
}
.journey-track::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 12.5%;
  right: 12.5%;
  border-top: 2px dashed rgba(1, 29, 66, 0.18);
  z-index: 0;
}
.journey-step { text-align: center; position: relative; z-index: 1; }
.journey-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto var(--space-2);
}
.journey-step h3 { font-size: 16px; margin-bottom: 6px; }
.journey-step p { color: var(--color-gray-text); font-size: 14px; }

/* ==========================================================================
   10. CTA Banner
   ========================================================================== */
#cta .container { max-width: 1320px; }
.cta-banner {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-banner h2, .cta-banner p { color: var(--color-white); }
.cta-banner p { color: #c7d0dd; margin-bottom: 0; }
.cta-banner-content p { white-space: nowrap; }
.cta-banner-action { text-align: right; }
.cta-decor {
  position: absolute;
  width: 250px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.cta-decor-left { bottom: -6px; left: 8px; }
.cta-decor-right { bottom: -6px; right: 8px; }
.cta-banner-content, .cta-banner-action { position: relative; z-index: 1; }

/* ==========================================================================
   11. Resources / Blog
   ========================================================================== */
.resources-head {
  position: relative;
  text-align: center;
  margin-bottom: var(--space-4);
}
.resources-head .link-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.resource-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-white);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.resource-card:hover { box-shadow: 0 12px 30px rgba(1, 29, 66, 0.08); transform: translateY(-2px); }
.resource-card-img {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
  background: var(--color-cream-icon-bg);
}
.resource-card-img img { width: 100%; height: 100%; object-fit: cover; }
.resource-tag {
  color: var(--color-cream-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.resource-card h3 { font-size: 17px; margin: 6px 0 8px; }
.resource-card p { color: var(--color-gray-text); font-size: 14px; }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer {
  background: var(--color-navy);
  color: #c7d0dd;
  padding-top: var(--space-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.footer-grid h4 {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  margin-bottom: var(--space-2);
}
.footer-brand { font-family: var(--font-heading); color: var(--color-white); font-size: 20px; margin-bottom: 10px; }
.footer-grid ul li { margin-bottom: 8px; font-size: 14px; }
.footer-grid ul a:hover { color: var(--color-white); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: var(--space-2);
  text-align: center;
  font-size: 13px;
}

/* ==========================================================================
   13. Contact Page
   ========================================================================== */
.contact-hero { background: var(--color-bg); }
.contact-hero .container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.contact-hero-box {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 45px rgba(1, 29, 66, 0.06);
  padding: var(--space-2) var(--space-3);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-3);
  align-items: stretch;
}
/* Iki kolonun GORSEL YUKSEKLIGI esitleniyor.

   Olculdu: sol kart 559px, sag form 402px - arada 157px vardi ve ortak
   beyaz kartin boyu tamamen sol karttan geliyordu, sag taraf yarisi bos
   duruyordu. Fark iki taraftan birden kapatildi: sol kartin IC
   bosluklari birkac px kisildi, form ise buyudu (asagida). Sonuc:
   1440'ta sol 515, sag 515 - ust ve alt sinirlar tam hizali.

   Kartin kendi stili (krem zemin, kose yariciapi) DEGISMEDI - yalnizca
   ic bosluk degerleri. */
.contact-info-card {
  background: var(--color-cream-soft);
  border-radius: var(--radius-md);
  padding: 20px;
}
.contact-info-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-cream-icon-bg);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.contact-info-card h2 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 8px; }
.contact-info-card > p { color: var(--color-gray-text); font-size: 14px; margin-bottom: 12px; }

.contact-info-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  /* 9 -> 6px: bes satirda 30px kazanc. Ayirici cizgi ve hizalama ayni. */
  padding-block: 6px;
  border-top: 1px solid var(--color-border);
}
.contact-info-item:first-of-type { border-top: none; padding-top: 2px; }
.contact-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info-item h4 { font-size: 14px; margin-bottom: 2px; }
.contact-info-item p { color: var(--color-gray-text); font-size: 13.5px; margin-bottom: 0; }
.contact-info-link { display: inline-flex; align-items: center; gap: 4px; color: var(--color-cream-accent); font-weight: 600; font-size: 13px; margin-top: 4px; }
.contact-info-link svg { color: var(--color-cream-accent); }

.contact-hero-form { display: flex; flex-direction: column; justify-content: center; }
/* Alan araligi 12 -> 10 -> 8 -> 13px. 8px fazla sikti; sol kartla
   esitlenmek icin geri acildi. */
.wpcf7-form, .contact-form { display: flex; flex-direction: column; gap: 13px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
/* Etiket 12px'te fazla kucuk kalmisti; 13px'e alindi, alt bosluk 6px. */
.contact-form label { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  /* Dikey dolgu 11px: alan yuksekligi 42px. v1.0.12'deki 36px fazla
     sikti, v1.0.10'daki 45px ise formu gereginden uzun yapiyordu.
     Yatay dolgu ve 15px'lik girdi metni aynen. */
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--color-white);
  color: var(--color-navy);
}
.contact-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23011e40' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { outline: 2px solid var(--color-navy); outline-offset: 1px; }
/* Mesaj kutusu kalan yuksekligi tasiyor: dort satirlik bir alan,
   ayrica formun en dogal buyuyecek yeri burasi. */
.contact-form textarea { min-height: 94px; resize: vertical; }
/* Buton 49px: v1.0.12'deki 44px'ten buyuk ama v1.0.10'daki 51px'in
   altinda kaliyor. Yukseklik global .btn dolgusundan geliyor; oraya
   dokunulmadi - sitedeki her butonu degistirirdi. */
.contact-submit { width: 100%; padding-block: 13px; }
.contact-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-gray-text);
  font-size: 12px;
  text-align: center;
  margin: 4px 0 0;
}
.contact-privacy svg { color: var(--color-gray-text); flex-shrink: 0; }
/* Gizlilik onay kutusu. Yalnizca iletisim formuna ozel; yukaridaki
   `.contact-form input` kurali tum girdileri %100 genislik yaptigi icin
   onay kutusunun kendi boyutuna donmesi gerekiyor. */
.contact-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 400; margin-bottom: 0; color: var(--color-gray-text); }
.contact-consent input[type="checkbox"] { width: auto; padding: 0; margin: 2px 0 0; flex-shrink: 0; }
.form-success { background: #e7f5ea; color: #1c6b34; padding: 12px var(--space-2); border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 0; }
.form-error { background: #fbe7e7; color: #8a1f1f; }

/* 404 sayfasi. Mevcut hero tipografisi ve buton stilleri yeniden
   kullaniliyor; burada yalnizca ortalama yapiliyor. Ucu de .error-404
   altina kapsanmis, baska hicbir sayfayi etkilemez. Yeni breakpoint
   yok: baslik zaten clamp(), butonlar flex-wrap, aciklama 46ch. */
.error-404 { text-align: center; }
.error-404 .hero-desc { margin-inline: auto; }
.error-404 .hero-actions { justify-content: center; }

/* What Happens Next */
.contact-next-track {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.contact-next-step {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
}
.contact-next-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-cream-soft);
  color: var(--color-navy);
}
.contact-next-content { min-width: 0; }
.contact-next-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-cream-accent);
  color: var(--color-cream-accent);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
}
.contact-next-step h3 { font-size: 17px; margin-bottom: 4px; }
.contact-next-step p { color: var(--color-gray-text); font-size: 14px; margin-bottom: 0; }
.contact-next-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  margin-top: 26px;
}

/* ==========================================================================
   13b. About Page
   ========================================================================== */
/* Basliklarin altindaki turuncu vurgu cizgisi tasarim tutarliligi icin
   kaldirildi (bazi bolumlerde vardi, bazilarinda yoktu). Sinif adi
   template-part'larda kalabilir, artik hicbir gorsel etkisi yok.

   Cizgi kalkinca IELTS/TOEFL/Academic English sayfalarindaki basliklarin
   altinda duran 16px'lik padding-bottom da gitmisti; bu da o sayfalardaki
   baslik-icerik mesafesini Home referansindan 16px daha dar birakmisti.
   Sadece bu 3 sayfada (Contact/Blog/About'a dokunmadan) o bosluk cizgisiz
   sekilde geri eklendi. */
body:has(.ielts-hero) .section-heading-accent,
body:has(.toefl-hero) .section-heading-accent,
body:has(.academic-hero) .section-heading-accent {
  padding-bottom: var(--space-2);
}

.about-hero {
  height: calc((100vh - 81px) * 0.57);
  min-height: 390px;
  max-height: 500px;
  display: flex;
  align-items: center;
  padding-block: var(--space-2) 0;
  overflow: hidden;
}
body.admin-bar .about-hero { height: calc((100vh - 81px - 32px) * 0.57); }
@media screen and (max-width: 782px) {
  body.admin-bar .about-hero { height: calc((100vh - 81px - 46px) * 0.57); }
}
.about-hero-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
}
.about-hero-visual { position: relative; max-width: 300px; margin-inline: auto; }
.about-hero-deco {
  position: absolute;
  bottom: 60px;
  left: -140px;
  top: auto;
  width: 420px;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}
.about-photo-mask {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1.05;
  border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
  overflow: hidden;
  background: var(--color-cream-icon-bg);
}
.about-photo-mask img { width: 100%; height: 100%; object-fit: cover; }
.about-hero-content h1 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 10px; }
.about-hero-content p { color: var(--color-gray-text); font-size: 15px; max-width: 52ch; }

.about-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.about-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  box-shadow: 0 4px 20px rgba(1, 30, 64, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.about-card:hover { box-shadow: 0 12px 30px rgba(1, 30, 64, 0.1); transform: translateY(-3px); }
.about-card-icon {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-cream-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-card-icon svg { width: 42px; height: 42px; }
.about-card-body { min-width: 0; }
.about-card h3 {
  font-size: 15.5px;
  position: relative;
  display: inline-block;
  padding-bottom: 7px;
  margin-bottom: 7px;
}
.about-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--color-cream-accent);
}
.about-card p { color: var(--color-gray-text); font-size: 13px; margin-bottom: 0; line-height: 1.5; }

/* Sertifika bolumunun DIS KUTUSU YOK.

   Once krem zeminli, yuvarlak koseli, 40px dolgulu bir kart ve iki yaprak
   dekoru vardi. Belgenin kendisi zaten beyaz zeminli bir kagit; onu
   ikinci bir kartin icine koymak "kart icinde kart" gorunumu ve olcuye
   deger bir bosluk yaratiyordu (1440'ta kart 1112px, belge 718px -
   aradaki fark tamamen dolgu ve dekordu). Bolum artik sayfa zemininde
   duruyor ve odak belgenin kendisi. */
.about-certifications {
  text-align: center;
}

/* --------------------------------------------------------------------------
   SERTIFIKA SLIDER'I
   --------------------------------------------------------------------------
   Belgenin KENDISI gosteriliyor, rozet degil. Bu yuzden kirpma yok:
   object-fit: contain ile belge oraniyla birlikte alana sigdiriliyor.
   Kirpma (cover) bir belgede en kotu secim olurdu - kesilen yer cogu
   zaman muhurun ya da imzanin oldugu kenardir.

   Yukseklik oran ile veriliyor (4/3, belgelerin dogal orani): boylece
   slaytlar arasi gecerken kutu zip zip degismiyor, bolumun yuksekligi
   sabit kaliyor. Daha dar ya da daha genis bir belge de ayni kutuya
   ortalanarak sigar, yanlarinda bosluk kalir - bozulma olmaz.
   -------------------------------------------------------------------------- */
/* Oklar mutlak konumdan cikarildi: eskiden bolumun kenarlarina
   yapisiyorlardi ve belge daraldikca ondan uzaklasiyorlardi (olculdu:
   1440'ta aradaki bosluk 92px). Simdi satir bir flex: ok - belge - ok,
   yani oklar her genislikte belgenin hemen iki yaninda kaliyor. */
.cert-slider {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.cert-slider-viewport {
  position: relative;
  /* Dis kart kalkinca yer acilmisti; 920px'te belge sayfada fazla yer
     kapliyordu. 820px hem rahat okunuyor hem de bolumu 60px kisaltiyor
     (cerceve orani 4/3 oldugu icin her 100px genislik 75px yukseklik
     demek). */
  flex: 0 1 820px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Slaytlar ust uste duruyor; yalnizca .is-active gorunur. Konumlandirma
   yerine opacity kullanilmasinin sebebi: kayan bir serit kurmadan gecis
   yumusak olsun ve yukseklik hic degismesin. */
.cert-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Yalnizca cok kucuk bir nefes payi; belge alani doldursun. */
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease;
}
.cert-slide.is-active { opacity: 1; visibility: visible; }

.cert-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Cerceve artik KUTUYA degil BELGENIN KENDISINE ait. Kutuya verilseydi
     contain sonrasi kalan bos seritler de cerceve icinde kalir, belge
     olmayan bir alan kutulanmis olurdu. */
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* Tek belge varsa cerceve yine ayni; ok yok, gecis yok. */
.cert-slider.is-single .cert-slide { position: relative; opacity: 1; visibility: visible; }

/* Oklar cercevenin DISINDA, dikey ortada: belgenin uzerine binip metni
   kapatmasinlar. Dar ekranda cercevenin altina iniyorlar (asagida). */
.cert-slider-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-navy);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
/* DOM sirasi cerceve - geri - ileri; geri oku flex sirasiyla one aliniyor
   ki isaretlemede belge once gelsin (ekran okuyucu once icerigi bulur). */
.cert-slider-prev { order: -1; }

.cert-slider-arrow:hover:not(:disabled) {
  background: var(--color-cream-icon-bg);
  border-color: var(--color-cream-accent);
}
.cert-slider-arrow:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}
/* Uctaki ok: gorunur kalir ama tiklanamaz oldugu belli olur. */
.cert-slider-arrow:disabled { opacity: 0.35; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .cert-slide { transition: none; }
  .cert-slider-arrow { transition: none; }
}

/* 992px altinda oklar cercevenin ALTINA iner.

   Genis ekranda yanlarda duruyorlar; dar ekranda 44px'lik iki dugme
   belgenin kenarlarini yiyor ve okunacak alani daraltiyordu. Sinir
   991px: tablet ve telefonun ikisini birden kapsiyor - once yalnizca
   tablet araligina yazilmisti ve telefonda oklar belgenin uzerinde
   kaliyordu.

   Dokunma hedefi 44px olarak korunuyor; kucultmek mobilde yanlis yon
   olurdu. */
@media (max-width: 991px) {
  /* Dar ekranda oklar belgenin ALTINA sariyor: yanlarda dursalardi iki
     44px'lik dugme belgeden ~112px calardi. Satir sarmasi disinda
     hicbir sey degismiyor - fazladan bosluk da eklenmiyor. */
  .cert-slider { flex-wrap: wrap; row-gap: var(--space-2); }
  .cert-slider-viewport { flex: 0 0 100%; order: -2; }
  .cert-slider-prev { order: 0; }
}

/* Sertifika bolumunden sonraki bosluk kisaldi.

   Ust dolgu paylasilan .section kuralindan 96px olarak geliyordu; dis
   kart kalkip belge tek basina kalinca o kadar aralik gereginden fazla
   duruyor ve "My Teaching Approach" ekranin cok asagisinda kaliyordu.
   Yalnizca BU bolume ozel bir deger veriliyor - .section'a dokunulsa
   sitedeki her bolum degisirdi. */
.section.about-approach { padding-top: var(--space-4); }
.about-approach { text-align: center; }
.about-approach p {
  color: var(--color-gray-text);
  font-size: 16px;
  max-width: 70ch;
  margin-inline: auto;
  margin-top: var(--space-3);
}

/* ==========================================================================
   13c. IELTS Page
   ========================================================================== */
.ielts-hero { background: var(--color-bg); position: relative; }
.ielts-hero-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  grid-template-rows: 1fr;
  gap: var(--space-5);
  align-items: stretch;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Rozet satiri artik paylasilan .hero-badges/.hero-badge bileseninden
   geliyor (bkz. "4. Hero"); .ielts-hero-badges sadece bu sayfaya ozel
   olcek/aralik ayarlari icin kullanilir. */
.ielts-hero-visual { position: relative; z-index: 1; height: 100%; }
.ielts-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(1, 30, 64, 0.15);
  filter: drop-shadow(0 24px 45px rgba(1, 30, 64, 0.18));
}

.ielts-accelerator {
  background: var(--color-navy);
  height: calc(100vh - 81px);
  min-height: 560px;
  max-height: 800px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--space-4);
}
.ielts-accelerator .container { width: 100%; }
body.admin-bar .ielts-accelerator { height: calc(100vh - 81px - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .ielts-accelerator { height: calc(100vh - 81px - 46px); }
}
.ielts-title-on-dark { color: var(--color-white); }
.ielts-accelerator-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.ielts-accelerator-card {
  position: relative;
  padding: 0 var(--space-3);
  text-align: center;
}
.ielts-accelerator-card:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}
.ielts-accelerator-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}
.ielts-accelerator-card h3 { color: var(--color-white); font-size: 17px; max-width: 85%; margin: 0 auto; }
.ielts-accelerator-card p { color: #c7d0dd; font-size: 14px; margin-top: var(--space-2); }
.ielts-link-on-dark { color: var(--color-white); display: inline-block; margin-top: var(--space-2); }

.ielts-band-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-5);
  align-items: center;
}
.ielts-band-title { font-size: clamp(24px, 2.8vw, 30px); margin-bottom: var(--space-2); }
.ielts-band-desc { color: var(--color-gray-text); font-size: 15px; max-width: 42ch; margin-bottom: var(--space-3); }
.ielts-band-visual { display: flex; align-items: center; gap: var(--space-2); }
.ielts-band-arrow { color: var(--color-cream-accent); flex-shrink: 0; }
.ielts-band-card {
  flex: 0 0 140px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}
.ielts-band-target { flex-basis: 160px; background: var(--color-navy); border-color: var(--color-navy); }
.ielts-band-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-gray-text); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.ielts-band-target .ielts-band-label { color: rgba(255, 255, 255, 0.7); }
.ielts-band-number { display: block; font-family: var(--font-heading); font-size: 38px; font-weight: 700; color: var(--color-navy); line-height: 1; }
.ielts-band-target .ielts-band-number { color: var(--color-white); }
.ielts-band-sub { display: block; font-size: 12px; color: var(--color-gray-text); margin-top: 6px; }
.ielts-band-target .ielts-band-sub { color: rgba(255, 255, 255, 0.75); }
.ielts-band-star { display: block; color: var(--color-cream-accent); margin-top: 8px; }
.ielts-band-note { display: block; font-size: 12px; font-weight: 600; color: var(--color-white); margin-top: 4px; }
.ielts-band-skills {
  flex: 1;
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ielts-band-skill { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ielts-band-skill-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-cream-icon-bg);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ielts-band-skill-label { flex: 1; font-weight: 600; color: var(--color-navy); }
.ielts-band-skill-score { font-weight: 600; color: var(--color-cream-accent); white-space: nowrap; }

.ielts-testimonial-more { text-align: center; margin-top: var(--space-4); }

.ielts-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.ielts-testimonial-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.ielts-testimonial-quote { color: var(--color-cream-accent); display: block; margin-bottom: var(--space-2); }
.ielts-testimonial-text { color: var(--color-navy); font-size: 14.5px; margin-bottom: var(--space-3); }
.ielts-testimonial-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ielts-testimonial-band { background: var(--color-navy); color: var(--color-white); border-radius: var(--radius-sm); padding: 6px 12px; text-align: center; line-height: 1.25; }
.ielts-testimonial-band span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.8; }
.ielts-testimonial-band strong { font-size: 16px; }
.ielts-testimonial-name { text-align: right; font-size: 13px; }
.ielts-testimonial-name strong { display: block; color: var(--color-navy); }
.ielts-testimonial-name span { color: var(--color-gray-text); }

/* ==========================================================================
   13d. Academic English Page
   ========================================================================== */
.academic-hero { background: var(--color-bg); position: relative; }
.academic-hero-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-5);
  align-items: stretch;
  height: 100%;
  width: 100%;
}
.academic-hero .hero-content { position: relative; z-index: 3; }
.academic-eyebrow { display: block; text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; margin-bottom: var(--space-1); }

.academic-hero-visual { position: relative; height: 100%; }
.academic-hero-illustration {
  position: absolute;
  z-index: 1;
  max-width: none;
  left: -20px;
  top: 50%;
  transform: translateY(calc(-50% + 15px));
  width: 560px;
  filter: drop-shadow(0 24px 45px rgba(1, 30, 64, 0.18));
}
.academic-hero-card {
  position: absolute;
  z-index: 2;
  top: 46px;
  bottom: 46px;
  left: 338px;
  right: -60px;
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.academic-hero-card-leaf {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 390px;
  opacity: 0.22;
  pointer-events: none;
}
.academic-hero-card-body { position: relative; z-index: 1; }
.academic-hero-card-title { color: var(--color-white); font-weight: 600; font-size: 16px; margin-bottom: var(--space-2); }
.academic-hero-card ul { display: flex; flex-direction: column; gap: var(--space-3); }
.academic-hero-card li { display: flex; align-items: center; gap: 10px; color: var(--color-white); font-size: 16px; font-weight: 500; line-height: 1.3; }
.academic-hero-card li svg { color: var(--color-cream-accent); flex-shrink: 0; }

/* What You'll Learn */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.skill-card {
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.skill-card:hover { box-shadow: 0 12px 30px rgba(1, 29, 66, 0.08); transform: translateY(-3px); }
.skill-card-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--color-cream-soft);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}
.skill-card h3 { font-size: 15px; margin-bottom: 6px; }
.skill-card p { color: var(--color-gray-text); font-size: 12.5px; margin-bottom: 0; line-height: 1.45; }

/* Academic Writing Lab */
.academic-writing-lab { background: var(--color-navy); position: relative; }
.academic-lab-leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
  transform: scaleX(-1);
}
.academic-writing-lab .container {
  position: relative;
  z-index: 1;
  height: 100%;
}
.academic-lab-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-5);
  align-items: center;
  height: 100%;
}
.academic-lab-content h2 { color: var(--color-white); font-size: clamp(22px, 2.4vw, 28px); margin-top: 6px; }
.academic-lab-content > p { color: #c7d0dd; font-size: 14.5px; max-width: 46ch; }
.academic-lab-feature {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.academic-lab-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-cream-icon-bg);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.academic-lab-feature h4 { color: var(--color-white); font-size: 15px; margin-bottom: 4px; }
.academic-lab-feature p { color: #c7d0dd; font-size: 13px; margin-bottom: 0; }

.academic-lab-visual { display: flex; flex-direction: column; gap: var(--space-3); }
.academic-lab-mockup {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3);
}
.academic-lab-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-gray-text);
  font-size: 13px;
}
.academic-lab-toolbar span { display: inline-flex; align-items: center; }
.academic-lab-toolbar-divider { width: 1px; height: 16px; background: var(--color-border); margin-inline: 4px; }
.academic-lab-body { display: grid; grid-template-columns: 1.5fr 1fr; }
.academic-lab-essay { padding: var(--space-3); border-right: 1px solid var(--color-border); }
.academic-lab-essay h3 { font-size: 16px; margin-bottom: 6px; }
.academic-lab-essay p { color: var(--color-gray-text); font-size: 12px; line-height: 1.55; margin-bottom: 6px; }
.academic-lab-feedback { padding: var(--space-3); background: var(--color-cream-soft); }
.academic-lab-feedback-title { font-weight: 700; font-size: 13px; margin-bottom: var(--space-2); }
.academic-lab-feedback ul { display: flex; flex-direction: column; gap: 8px; }
.academic-lab-feedback li strong { display: block; font-size: 12px; color: var(--color-navy); }
.academic-lab-feedback li span { display: block; font-size: 11px; color: var(--color-gray-text); }

.academic-lab-process {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
}
.academic-lab-step { text-align: center; flex: 1; min-width: 0; }
.academic-lab-step-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-cream-accent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-1);
}
.academic-lab-step h4 { color: var(--color-white); font-size: 13.5px; margin-bottom: 2px; }
.academic-lab-step p { color: #c7d0dd; font-size: 11px; margin-bottom: 0; }
.academic-lab-arrow {
  flex-shrink: 0;
  width: 24px;
  margin-top: 20px;
  border-top: 2px dashed rgba(255, 255, 255, 0.3);
  position: relative;
}
.academic-lab-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  border: 4px solid transparent;
  border-left-color: rgba(255, 255, 255, 0.4);
}

/* Your Academic Journey */
/* "Your Academic Journey" adim siriti.
   Adimin dikey olcusu tek yerden, uc degiskenle kuruluyor: sayi rozeti,
   rozet ile ikon dairesi arasindaki bosluk, ve dairenin capi. Ok cizgisi
   de bu ucunden hesaplandigi icin bir deger degistiginde ok kendiliginden
   dogru yerde kaliyor - elle senkron tutulacak ikinci bir sayi yok. */
.academic-journey-track {
  --journey-badge: 34px;   /* .academic-journey-number olcusu */
  --journey-gap: 10px;     /* rozet ile daire arasindaki bosluk */
  --journey-circle: 76px;  /* .academic-journey-card capi */
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.academic-journey-step { flex: 1; min-width: 0; text-align: center; }
.academic-journey-number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}
.academic-journey-card {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  /* Daire eskiden -24px ile yukari cekiliyor ve sayi rozetinin alt
     yarisini ortuyordu; rozet ancak z-index ile ustte kalabiliyordu.
     Artik rozet dairenin USTUNDE, ayri duruyor. Bosluk asagidaki
     h3 mesafesinden (16px) bilincli olarak biraz dar: rozet gorsel
     olarak daireye ait, basliga degil. */
  margin: var(--journey-gap) auto var(--space-2);
  box-shadow: 0 8px 20px rgba(1, 29, 66, 0.08);
}
.academic-journey-step h3 { font-size: 15.5px; }
.academic-journey-step p { color: var(--color-gray-text); font-size: 13px; }
.academic-journey-arrow {
  flex-shrink: 0;
  width: 40px;
  /* Cizgi, birlestirdigi DAIRELERIN dikey merkezine oturur:
     rozet + bosluk + capin yarisi, eksi kendi 2px kenarliginin yarisi.
     Sabit 34px degeri artik kullanilmiyor - o deger, daire yukari
     cekilmisken elle bulunmus ve daire merkezinin 16px ustunde kaliyordu. */
  margin-top: calc(
      var(--journey-badge) + var(--journey-gap) + var(--journey-circle) / 2 - 1px
  );
  border-top: 2px dashed rgba(1, 29, 66, 0.22);
  position: relative;
}
.academic-journey-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  border: 4px solid transparent;
  border-left-color: rgba(1, 29, 66, 0.35);
}

/* How I Can Help You */
#academic-help .container { max-width: 1320px; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
.help-card {
  display: flex;
  align-items: stretch;
  min-height: 150px;
  background: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.help-card:hover { box-shadow: 0 12px 30px rgba(1, 29, 66, 0.08); transform: translateY(-3px); }
.help-card-body {
  flex: 1 1 56%;
  min-width: 0;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.help-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.help-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-cream-accent);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.help-card-body h3 { font-size: 15.5px; margin-bottom: 0; }
.help-card-body p { color: var(--color-gray-text); font-size: 12.5px; line-height: 1.45; margin-bottom: 0; }
.help-card-img { position: relative; flex: 1 1 44%; min-width: 0; }
.help-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.help-card-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-cream-soft) 0%, rgba(250, 245, 241, 0) 45%);
  pointer-events: none;
}

/* Who Is This For + Student Success Stories */
.academic-audience-card {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  background: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.academic-audience-col { padding: var(--space-4); display: flex; flex-direction: column; }
.academic-testimonial-col { padding: var(--space-4); border-left: 1px solid var(--color-border); }
.academic-audience-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px var(--space-3);
  margin-top: var(--space-3);
}
.academic-audience-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--color-navy); }
.academic-audience-list li svg { color: var(--color-cream-accent); flex-shrink: 0; margin-top: 2px; }
.academic-audience-deco { width: 190px; margin-top: auto; padding-top: var(--space-3); }

.academic-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.academic-testimonial-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); }
.academic-testimonial-quote { color: var(--color-cream-accent); display: block; margin-bottom: var(--space-2); }
.academic-testimonial-card > p { color: var(--color-navy); font-size: 13.5px; margin-bottom: var(--space-3); }
.academic-testimonial-person { display: flex; align-items: center; gap: 10px; }
.academic-testimonial-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.academic-testimonial-person strong { display: block; font-size: 13px; color: var(--color-navy); }
.academic-testimonial-person span { font-size: 12px; color: var(--color-gray-text); }

/* FAQ */
.academic-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}
.academic-faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  background: var(--color-white);
}
.academic-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  padding-block: 16px;
}
.academic-faq-item summary::-webkit-details-marker { display: none; }
.academic-faq-question { font-weight: 600; color: var(--color-navy); font-size: 14.5px; }
.academic-faq-toggle { color: var(--color-navy); transition: transform 0.2s ease; flex-shrink: 0; }
.academic-faq-item[open] .academic-faq-toggle { transform: rotate(45deg); }
.academic-faq-answer { color: var(--color-gray-text); font-size: 14px; padding: 0 0 16px; }

/* CTA */
.academic-cta-banner { flex-direction: column; text-align: center; }
.academic-cta-banner .cta-banner-content p { white-space: normal; max-width: 56ch; margin-inline: auto; }
.academic-cta-banner .cta-banner-action { text-align: center; }

/* ==========================================================================
   13e. TOEFL Page
   ========================================================================== */
.toefl-hero { background: var(--color-bg); position: relative; }
.toefl-hero-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-5);
  align-items: center;
  width: 100%;
  height: 100%;
}
/* Eyebrow yanindaki turuncu cizgi kaldirildi (tutarlilik icin, IELTS ve
   Academic'te hic olmamisti). Rozet satiri artik paylasilan
   .hero-badges/.hero-badge bileseninden geliyor; .toefl-hero-badges
   sadece bu sayfaya ozel olcek/aralik ayarlari icin kullanilir. */
.toefl-hero-visual { display: flex; align-items: center; justify-content: center; height: 100%; }
.toefl-hero-illustration {
  max-width: 100%;
  max-height: 88%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 24px 45px rgba(1, 30, 64, 0.18));
}

/* Integrated Skills Practice */
.toefl-integrated {
  background: var(--color-navy);
  padding-block: var(--space-6);
}
.toefl-integrated .container { max-width: 1320px; }
.toefl-integrated-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-5);
  align-items: center;
}
.toefl-integrated-head { margin-bottom: var(--space-4); }
.toefl-integrated-head h2 { color: var(--color-white); }
.toefl-integrated-head p { color: #c7d0dd; font-size: 14.5px; margin-bottom: 0; max-width: 48ch; }
.toefl-integrated-steps {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.toefl-integrated-step { flex: 1; min-width: 0; text-align: center; }
.toefl-integrated-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}
.toefl-integrated-step h4 { color: var(--color-white); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.toefl-integrated-step p { color: #c7d0dd; font-size: 12.5px; margin-bottom: 0; }
.toefl-integrated-arrow { flex-shrink: 0; color: rgba(255, 255, 255, 0.35); margin-top: 18px; }
.toefl-integrated-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c7d0dd;
  font-size: 13.5px;
  margin: var(--space-4) 0 0;
}
.toefl-integrated-note svg { color: var(--color-cream-accent); flex-shrink: 0; }

.toefl-speaking-mockup { display: flex; align-items: center; justify-content: center; }
.toefl-speaking-laptop {
  width: 100%;
  max-width: 560px;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35));
}

/* Understand Your TOEFL Score */
.toefl-score-desc { text-align: center; color: var(--color-gray-text); font-size: 15px; max-width: 62ch; margin-inline: auto; }
.toefl-score-card {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr 0.95fr;
  margin-top: var(--space-5);
  background: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.toefl-score-goal, .toefl-score-breakdown, .toefl-score-focus { padding: var(--space-4); }
.toefl-score-goal, .toefl-score-breakdown { border-right: 1px solid var(--color-border); }
.toefl-score-goal-label,
.toefl-score-goal-req-label { display: block; font-size: 12.5px; color: var(--color-gray-text); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.toefl-score-goal-value { font-family: var(--font-heading); font-size: 42px; font-weight: 700; color: var(--color-navy); margin: 4px 0 var(--space-3); }
.toefl-score-goal-value span { font-size: 18px; color: var(--color-cream-accent); font-weight: 600; }
.toefl-score-goal-req-value { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-3); }
.toefl-score-goal-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--color-navy);
  line-height: 1.4;
}
.toefl-score-goal-note svg { color: var(--color-cream-accent); flex-shrink: 0; margin-top: 2px; }

.toefl-score-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.toefl-score-row:last-child { margin-bottom: 0; }
.toefl-score-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toefl-score-row-label { width: 78px; font-size: 13.5px; font-weight: 600; color: var(--color-navy); flex-shrink: 0; }
.toefl-score-bar { display: block; flex: 1; height: 8px; border-radius: 4px; background: var(--color-border); overflow: hidden; }
.toefl-score-bar-fill { display: block; height: 100%; background: var(--color-navy); border-radius: 4px; }
.toefl-score-row-value { width: 44px; text-align: right; font-weight: 700; color: var(--color-navy); font-size: 13.5px; flex-shrink: 0; }

.toefl-score-focus-title { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-2); }
.toefl-score-focus-item { display: flex; gap: 10px; background: var(--color-white); border-radius: var(--radius-sm); padding: var(--space-2); margin-bottom: var(--space-2); }
.toefl-score-focus-item:last-child { margin-bottom: 0; }
.toefl-score-focus-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-cream-icon-bg);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toefl-score-focus-item h4 { font-size: 13.5px; margin-bottom: 2px; }
.toefl-score-focus-item p { font-size: 12px; color: var(--color-gray-text); margin-bottom: 4px; }
.toefl-score-focus-item a { font-size: 12px; }

/* What You'll Gain */
.toefl-gain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.toefl-gain-item { text-align: center; position: relative; padding-left: var(--space-3); }
.toefl-gain-item:first-child { padding-left: 0; }
.toefl-gain-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--color-border);
}
.toefl-gain-item:first-child::before { display: none; }
.toefl-gain-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-cream-soft);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}
.toefl-gain-item h3 { font-size: 15.5px; margin-bottom: 6px; }
.toefl-gain-item p { color: var(--color-gray-text); font-size: 13px; margin-bottom: 0; line-height: 1.5; }

/* Student Success Stories */
.toefl-testimonials-more { text-align: center; margin-top: var(--space-3); }

/* ==========================================================================
   14. Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .hero, .contact-hero { height: auto; }
  .contact-hero { min-height: 0; max-height: none; overflow: visible; padding-block: var(--space-4); }
  .hero-inner { grid-template-columns: 1fr; height: auto; }
  .hero-visual { order: -1; max-width: 380px; margin-inline: auto; aspect-ratio: 1 / 1.05; }
  .programs-grid, .why-us-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-track { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); }
  .journey-track::before { display: none; }
  .bio-section, .contact-layout { grid-template-columns: 1fr; }
  .resources-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .ielts-promo { grid-template-columns: 1fr; text-align: center; }
  .ielts-promo-icon { margin-inline: auto; }
  .ielts-promo-list { justify-content: center; }
}
@media (max-width: 720px) {
  .site-nav { display: none; }
  .site-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
  }
  .site-nav.is-open ul { flex-direction: column; gap: var(--space-2); }
  .mobile-menu-toggle { display: flex; }
  .header-cta { display: none; }
  .header-cta.is-open { display: inline-flex; margin-top: var(--space-2); }
  .programs-grid, .why-us-grid, .footer-grid { grid-template-columns: 1fr; }
  .journey-track { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; text-align: center; }
  .cta-banner-action { text-align: center; }
  .cta-banner-content p { white-space: normal; }
  .form-row { grid-template-columns: 1fr; }
  .contact-hero-box { padding: var(--space-2); border-radius: var(--radius-md); }
  .contact-next-track { flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
  .contact-next-arrow { display: none; }
}

/* ==========================================================================
   15. Responsive v2 - Musteri referans gorseline gore net kirilma noktalari
   (Bolum 14'teki eski kurallara dokunulmadi; bu bloklar dosyada daha sonra
   geldigi icin ayni ozgulukteki eski kurallarin yerini alir.)
   ========================================================================== */

/* ---- Header / Off-canvas menu: tablet + mobil (<= 991px) ---- */
@media (max-width: 1320px) {
  .site-header .container { padding-inline: var(--space-3); }
}
@media (max-width: 991px) {

  .mobile-menu-toggle { display: flex; margin-left: auto; position: relative; z-index: 101; }
  .mobile-menu-toggle span { transition: transform 0.25s ease, opacity 0.2s ease; }
  .mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Sagdan kayan off-canvas panel */
  .site-nav,
  .site-nav.is-open {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    width: min(250px, 72vw);
    background: var(--color-white);
    box-shadow: -8px 0 32px rgba(1, 30, 64, 0.16);
    z-index: 100;
    padding: 110px var(--space-3) var(--space-3);
    border-bottom: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav ul,
  .site-nav.is-open ul { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .site-nav a { font-size: 18px; }
  .site-nav .current-menu-item > a::after { bottom: -2px; }

  /* Panelin arkasini karartan, tiklaninca kapatilabilen backdrop */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(1, 30, 64, 0.35);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
  }

  .header-cta { display: none; }
  .site-nav a.header-cta-mobile {
    display: inline-flex;
    color: var(--color-white);
    margin-top: var(--space-3);
  }
}

/* ---- Dar masaustu: liste kirilip 2 satira dusebilir, ayrac cizgileri
   satir basi hizasini bozdugu icin bu aralikta sadelestiriyoruz ---- */
@media (max-width: 1279px) {
  .ielts-promo-list li:not(:first-child) { padding-left: 0; }
  .ielts-promo-list li:not(:first-child)::before { display: none; }
}

/* ---- Tablet: 768px - 991px ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .hero, .contact-hero { height: auto; padding-block: var(--space-5); }
  .contact-hero { min-height: 0; max-height: none; overflow: visible; }
  .hero-inner { grid-template-columns: 1fr; height: auto; gap: var(--space-4); }
  .hero-content { padding-top: 0; padding-bottom: 0; text-align: center; }
  .hero-desc { margin-inline: auto; }
  .hero-actions, .hero-badges { justify-content: center; }
  .hero-visual { order: -1; width: 380px; max-width: 100%; height: 400px; margin-inline: auto; }

  .programs-grid,
  .why-us-grid,
  .resources-grid { grid-template-columns: repeat(2, 1fr); }

  .why-us-item { text-align: center; padding-left: 0; }
  .why-us-item::before { display: none; }
  .why-us-head { justify-content: center; }

  .journey-track { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); }
  .journey-track::before { display: none; }

  /* 5 footer columns (Brand, Quick Links, Programs, Support, Let's
     Connect) in 2 columns: spanning both the first AND last column left
     the odd middle one (Support) alone in its row with an empty cell next
     to it, and forced 4 total rows (brand-alone, 2-up, orphan, connect-
     alone) - taller than it needed to be. Only spanning the last column
     lets Brand pair naturally with Quick Links, drops it to 3 rows, and
     removes the orphaned gap. Applies site-wide (IELTS/TOEFL, which have
     no footer override of their own, inherit it directly). */
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .footer-grid > div:last-child { grid-column: 1 / -1; }

  .bio-section, .contact-layout { grid-template-columns: 1fr; }
  .contact-next-track { gap: var(--space-4); }
  .contact-next-arrow { display: none; }

  .ielts-promo { grid-template-columns: 1fr; text-align: center; }
  .ielts-promo-icon { margin-inline: auto; }
  .ielts-promo-list { justify-content: center; flex-wrap: wrap; row-gap: var(--space-2); }
}

/* ---- Mobil: <= 767px ---- */
@media (max-width: 767px) {
  .section { padding-block: var(--space-4); }
  .container { padding-inline: var(--space-2); }
  .section-title { font-size: 26px; }

  .resources-head .link-arrow {
    position: static;
    display: inline-block;
    transform: none;
    margin-top: var(--space-2);
  }

  /* Hero */
  .hero, .contact-hero { height: auto; padding-block: var(--space-3); }
  .contact-hero { min-height: 0; max-height: none; overflow: visible; }
  .hero-inner { grid-template-columns: 1fr; height: auto; gap: var(--space-2); }
  .hero-content { padding-top: 0; padding-bottom: 0; text-align: center; }
  .hero-title { font-size: 26px; }
  .hero-eyebrow { font-size: 14px; }
  .hero-desc { font-size: 14px; margin-inline: auto; }
  .hero-actions { justify-content: center; margin-top: var(--space-3); }
  .hero-badges { justify-content: center; flex-wrap: wrap; row-gap: var(--space-2); }
  .hero-visual { order: -1; width: 190px; max-width: 190px; height: 200px; margin-inline: auto; }

  /* Kartlar tek sutun */
  .programs-grid,
  .why-us-grid,
  .resources-grid { grid-template-columns: 1fr; }
  .why-us-item { padding-left: 0; text-align: center; }
  .why-us-item::before { display: none; }
  .why-us-head { justify-content: center; }

  .journey-track { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .journey-track::before { display: none; }

  .bio-section, .contact-layout { grid-template-columns: 1fr; }
  .contact-hero-box { padding: var(--space-2); border-radius: var(--radius-md); }
  .contact-next-track { flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
  .contact-next-arrow { display: none; }

  .ielts-promo { grid-template-columns: 1fr; text-align: center; padding: var(--space-3); }
  .ielts-promo-icon { margin-inline: auto; width: 140px; height: 140px; }
  .ielts-promo-list {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
  }
  .ielts-promo-list li:nth-child(3) { padding-left: 0; }
  .ielts-promo-list li:nth-child(3)::before { display: none; }
  .ielts-promo-list li:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    padding-left: 0;
  }
  .ielts-promo-list li:nth-child(5)::before { display: none; }

  /* Footer: baslik+link sutunlari yan yana, Let's Connect altta.
     Same fix as the tablet tier above: only the last column (Let's
     Connect) spans full width now, so Brand pairs with Quick Links
     instead of the middle 3 columns leaving an orphaned, unpaired one. */
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-3); }
  .footer-grid > div:last-child { grid-column: 1 / -1; }

  .cta-banner { flex-direction: column; text-align: center; padding: var(--space-3); }
  .cta-banner-action { text-align: center; }
  .cta-banner-content p { white-space: normal; }

  .form-row { grid-template-columns: 1fr; }
}
/* Genuinely narrow phones only: 2 columns get tight below ~400px, so drop
   to a single column there. Site-wide, so every page (including Home)
   gets the same narrow-phone fallback instead of just Academic English,
   which already had its own copy of this exact rule (removed below). */
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   16. Responsive - About Page
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  /* BUG FIX: `height: auto` here doesn't cancel the base rule's
     `min-height: 390px` / `max-height: 500px` / `overflow: hidden` -
     those are separate properties the base rule sets unconditionally, so
     they still capped this section once the hero switched to a single
     stacked column (image above heading/text). The stacked content
     easily exceeds 500px, and since the grid is vertically centered
     (align-items: center) inside that capped, clipped box, the overflow
     got cut off equally from the top and bottom - with the image on top
     (order: -1), that read as the image being cropped with no breathing
     room above it. Resetting both here lets the section grow to fit its
     actual (now taller, stacked) content instead. */
  .about-hero { height: auto; min-height: 0; max-height: none; padding-block: var(--space-4); }
  .about-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .about-hero-visual { order: -1; max-width: 340px; margin-inline: auto; }
  /* Decorative leaf: still sized/positioned for the desktop two-column
     layout (420px wide, offset 140px to the left), which no longer makes
     sense once the visual is centered alone at 340px - it hung far off
     to one side instead of sitting balanced behind the photo. */
  .about-hero-deco { width: 220px; bottom: 20px; left: -50px; }
  .about-hero-content p { margin-inline: auto; }
  /* BUG FIX: each item's badge+text block is centered independently
     within the now full-width row (justify-content: center above), so
     the badge's horizontal position depends on that item's own content
     width - since the 2 certifications have different title/description
     lengths, their badges landed at different x-positions once stacked,
     looking misaligned against each other. Giving the text block a
     shared, fixed width makes both items the same total width, so
     centering both lands their badges at the same spot. */
  /* BUG FIX: this tier had no rule at all for the 3 highlight cards, so
     they stayed at the desktop's `repeat(3, 1fr)` all the way down from
     991px to 768px - each card (an 88px icon circle plus a full
     title+description) was squeezed into a third of the tablet width.
     2 columns give each card roughly double the room; the odd 3rd card
     is spanned and centered instead of being left stuck alone in the
     first column. */
  .about-highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .about-card:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 12px);
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  /* Same fix as the tablet tier above: reset the base rule's fixed
     min/max-height so the stacked (image above text) content isn't
     capped and clipped from the top. */
  .about-hero { height: auto; min-height: 0; max-height: none; padding-block: var(--space-3); }
  .about-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .about-hero-visual { order: -1; max-width: 240px; margin-inline: auto; }
  .about-hero-deco { width: 140px; top: auto; bottom: -20px; left: -30px; }
  .about-hero-content h1 { font-size: 28px; }
  .about-hero-content p { font-size: 15px; margin-inline: auto; }

  .about-highlights-grid { grid-template-columns: 1fr; }

  /* Bolumun kendi dolgusu ARTIK YOK: dis kart kalkinca o dolgu yalnizca
     belgeden genislik calan bir bosluga donusmustu. Kapsayici .container
     zaten kenar boslugunu veriyor. */
  .cert-slide { padding: 2px; }

  .about-approach p { font-size: 15px; }
}

/* ==========================================================================
   17. Responsive - IELTS Page
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .ielts-hero { height: auto; }
  .ielts-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .ielts-hero .hero-desc { margin-inline: auto; }
  .hero-actions, .ielts-hero-badges { justify-content: center; }
  /* Bumped from 420px: at 768-820px the hero column is full-width (grid
     already collapsed to 1fr here) but the image stayed small with a lot
     of empty space around it. 520px keeps a comfortable margin against
     the ~720-770px available width at this tier without overflowing. */
  .ielts-hero-visual { order: -1; max-width: 520px; min-height: 300px; margin-inline: auto; }
  .ielts-accelerator { height: auto; max-height: none; }
  .ielts-accelerator-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); }
  .ielts-accelerator-card:nth-child(odd)::before { display: none; }
  .ielts-band-grid { grid-template-columns: 1fr; text-align: center; }
  .ielts-band-desc { margin-inline: auto; }
  .ielts-band-visual { flex-direction: column; }
  .ielts-band-arrow { transform: rotate(90deg); }
  .ielts-band-skills { width: 100%; }
  .ielts-testimonial-grid { grid-template-columns: 1fr; }
  .academic-faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .ielts-hero { height: auto; }
  .ielts-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .ielts-hero .hero-desc { margin-inline: auto; font-size: 15px; }
  .hero-actions, .ielts-hero-badges { justify-content: center; }
  .ielts-hero-visual { order: -1; max-width: 300px; min-height: 220px; margin-inline: auto; }

  .ielts-accelerator { height: auto; max-height: none; }
  .ielts-accelerator-grid { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .ielts-accelerator-card::before { display: none; }

  .ielts-band-grid { grid-template-columns: 1fr; text-align: center; }
  .ielts-band-desc { margin-inline: auto; }
  .ielts-band-visual { flex-direction: column; }
  .ielts-band-arrow { transform: rotate(90deg); }
  .ielts-band-skills { width: 100%; }

  .ielts-testimonial-grid { grid-template-columns: 1fr; }

  .academic-faq-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. Responsive - Academic English Page
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .academic-hero { height: auto; padding-block: var(--space-5); }
  .academic-hero-grid { grid-template-columns: 1fr; text-align: center; height: auto; }
  /* Bumped from 420px to match IELTS/TOEFL's tablet hero image size (see
     "17. Responsive - IELTS Page" and "19. Responsive - TOEFL Page") for a
     comparable visual footprint across the three program pages. */
  .academic-hero-visual { order: -1; max-width: 520px; min-height: 340px; margin-inline: auto var(--space-4); }
  .hero-actions, .academic-hero-badges { justify-content: center; }
  .academic-hero-card { left: 8%; right: -20px; }

  .skills-grid { grid-template-columns: repeat(3, 1fr); }

  .academic-writing-lab { height: auto; padding-block: var(--space-5); }
  .academic-lab-grid { grid-template-columns: 1fr; height: auto; }
  .academic-lab-content { text-align: center; }
  .academic-lab-content > p { margin-inline: auto; }
  .academic-lab-feature { text-align: left; }
  .academic-lab-body { grid-template-columns: 1fr; }
  .academic-lab-essay { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .academic-lab-process { flex-wrap: wrap; justify-content: center; row-gap: var(--space-3); }
  .academic-lab-step { flex: 0 0 45%; }
  .academic-lab-arrow { display: none; }

  .academic-journey-track { flex-wrap: wrap; row-gap: var(--space-4); }
  .academic-journey-step { flex: 0 0 45%; }
  .academic-journey-arrow { display: none; }

  .help-grid { grid-template-columns: repeat(2, 1fr); }

  .academic-audience-card { grid-template-columns: 1fr; }
  .academic-testimonial-col { border-left: 0; border-top: 1px solid var(--color-border); }
  .academic-audience-deco { margin-inline: auto; }
}

@media (max-width: 767px) {
  .academic-hero { height: auto; padding-block: var(--space-4) var(--space-3); }
  .academic-hero-grid { grid-template-columns: 1fr; text-align: center; height: auto; }
  .academic-hero-visual { order: -1; max-width: 300px; min-height: 300px; margin: 0 auto var(--space-4); }
  .hero-actions, .academic-hero-badges { justify-content: center; }
  .academic-hero-card { left: 5%; right: -10px; padding: var(--space-3); }
  .academic-hero-card li { font-size: 12px; }

  .skills-grid { grid-template-columns: 1fr; }

  .academic-writing-lab { height: auto; padding-block: var(--space-4) var(--space-3); }
  .academic-lab-leaf { width: 140px; }
  .academic-lab-grid { grid-template-columns: 1fr; height: auto; }
  .academic-lab-content { text-align: center; }
  .academic-lab-content > p { margin-inline: auto; }
  .academic-lab-feature { text-align: left; }
  .academic-lab-body { grid-template-columns: 1fr; }
  .academic-lab-essay { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .academic-lab-process { flex-direction: column; align-items: center; gap: var(--space-2); }
  .academic-lab-step { max-width: none; }
  .academic-lab-arrow { display: none; }

  .academic-journey-track { flex-direction: column; }
  .academic-journey-arrow { display: none; }

  .help-grid { grid-template-columns: 1fr; }

  .academic-audience-card { grid-template-columns: 1fr; }
  .academic-testimonial-col { border-left: 0; border-top: 1px solid var(--color-border); }
  .academic-audience-list { grid-template-columns: 1fr; }
  .academic-audience-deco { margin-inline: auto; width: 160px; }

  .academic-testimonial-grid { grid-template-columns: 1fr; }

  .academic-faq-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   19. Responsive - TOEFL Page
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .toefl-hero { height: auto; max-height: none; min-height: 0; overflow: visible; padding-block: var(--space-4); }
  .toefl-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-actions { justify-content: center; }
  .toefl-hero-badges { flex-wrap: wrap; row-gap: var(--space-3); }
  /* Bumped from 380px to match IELTS/Academic's tablet hero image size for
     a comparable visual footprint across the three program pages. */
  .toefl-hero-visual { order: -1; max-width: 520px; margin-inline: auto var(--space-4); }

  .toefl-integrated-grid { grid-template-columns: 1fr; }
  .toefl-integrated-head, .toefl-integrated-head p { text-align: center; margin-inline: auto; }
  .toefl-speaking-mockup { max-width: 420px; margin-inline: auto; }

  .toefl-score-card { grid-template-columns: 1fr; }
  .toefl-score-goal, .toefl-score-breakdown { border-right: 0; border-bottom: 1px solid var(--color-border); }

  .toefl-gain-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); }
  .toefl-gain-item:nth-child(3)::before { display: none; }
}

@media (max-width: 767px) {
  .toefl-hero { height: auto; max-height: none; min-height: 0; overflow: visible; padding-block: var(--space-3); }
  .toefl-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-actions { justify-content: center; }
  .toefl-hero-badges { flex-wrap: wrap; row-gap: var(--space-3); }
  .toefl-hero-visual { order: -1; max-width: 280px; margin-inline: auto var(--space-4); }

  .toefl-integrated-grid { grid-template-columns: 1fr; }
  .toefl-integrated-head, .toefl-integrated-head p { text-align: center; margin-inline: auto; }
  .toefl-integrated-steps { flex-wrap: wrap; row-gap: var(--space-3); }
  .toefl-integrated-step { flex: 0 0 45%; }
  .toefl-integrated-arrow { display: none; }
  .toefl-speaking-mockup { max-width: 320px; margin-inline: auto; }

  .toefl-score-card { grid-template-columns: 1fr; }
  .toefl-score-goal, .toefl-score-breakdown { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .toefl-score-row-label { width: 66px; font-size: 12.5px; }

  .toefl-gain-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .toefl-gain-item:nth-child(3)::before { display: none; }

  .academic-faq-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   20. Blog Page
   ========================================================================== */
.blog-hero { background: var(--color-bg); position: relative; }
.blog-hero-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-5);
  align-items: stretch;
  height: 100%;
  width: 100%;
}
.blog-hero-corner-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.blog-hero-visual { position: relative; height: 100%; z-index: 1; }
.blog-hero-dots {
  position: absolute;
  top: 4%;
  left: 42%;
  width: 90px;
  height: 90px;
  background-image: radial-gradient(var(--color-cream-accent) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.5;
  z-index: 0;
}
.blog-hero-photo {
  position: absolute;
  background: var(--color-cream-icon-bg);
  border: 8px solid var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 34px rgba(1, 30, 64, 0.18);
  overflow: hidden;
}
.blog-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-hero-photo-1 { width: 50%; aspect-ratio: 3 / 4; top: 4%; left: 0; --tilt: -5deg; transform: rotate(var(--tilt)); z-index: 2; }
.blog-hero-photo-2 { width: 44%; aspect-ratio: 4 / 5; top: 0; right: 2%; --tilt: 4deg; transform: rotate(var(--tilt)); z-index: 1; }
.blog-hero-photo-3 { width: 40%; aspect-ratio: 5 / 4; bottom: 8%; left: 20%; --tilt: 3deg; transform: rotate(var(--tilt)); z-index: 3; }
.blog-hero-photo-4 { width: 38%; aspect-ratio: 4 / 5; bottom: 2%; right: 8%; --tilt: -4deg; transform: rotate(var(--tilt)); z-index: 2; }

/* Blog hero kolaj giris animasyonu: solda duran kartlar (left ile
   konumlanan 1 ve 3) soldan, sagda duranlar (right ile konumlanan 2 ve 4)
   sagdan kayarak gelir. Rotasyon acisi --tilt degiskeninde sabit tutulur
   ve keyframe'in hem baslangic hem bitis karesinde ayni sekilde
   uygulanir, boylece animasyon mevcut egimi hic ezmez; translateX(0)
   bitis durumu orijinal `rotate(var(--tilt))` ile matematiksel olarak
   ozdestir, yani yerlesim/boyut/z-index/overlap degismez. */
@keyframes sariyya-blog-collage-enter-left {
  from { opacity: 0; transform: translateX(-24px) rotate(var(--tilt)); }
  to   { opacity: 1; transform: translateX(0) rotate(var(--tilt)); }
}
@keyframes sariyya-blog-collage-enter-right {
  from { opacity: 0; transform: translateX(24px) rotate(var(--tilt)); }
  to   { opacity: 1; transform: translateX(0) rotate(var(--tilt)); }
}
.blog-hero-photo-1 { animation: sariyya-blog-collage-enter-left 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.blog-hero-photo-2 { animation: sariyya-blog-collage-enter-right 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: 80ms; }
.blog-hero-photo-3 { animation: sariyya-blog-collage-enter-left 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: 140ms; }
.blog-hero-photo-4 { animation: sariyya-blog-collage-enter-right 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: 200ms; }

/* Browse by Category reuses .skills-grid / .skill-card */
#categories { padding-bottom: var(--space-3); }
.blog-category-card { background: var(--color-navy); border-color: var(--color-navy); }
.blog-category-card:hover { box-shadow: 0 12px 30px rgba(1, 29, 66, 0.3); }
.blog-category-card .skill-card-icon { background: rgba(255, 255, 255, 0.08); color: var(--color-white); }
.blog-category-card h3 { color: var(--color-white); }
.blog-category-card p { color: #c7d0dd; }

/* Featured Article + Sidebar */
.blog-featured-section { padding-block: var(--space-4); }
.blog-featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
  height: 100%;
}
.blog-featured-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* Hover yalnizca kart gercekten bir baglantiyken. Gosterilecek gercek bir
   yazi yoksa kart <a> degil <div> olarak basiliyor (bkz. blog-featured.php);
   o durumda kalkma/golge efekti verilirse kart tiklanabilirmis gibi
   gorunur - imlec de degismedigi icin ziyaretci once tiklamayi dener,
   sonra hicbir sey olmadigini gorur. */
a.blog-featured-card:hover { box-shadow: 0 12px 30px rgba(1, 29, 66, 0.08); transform: translateY(-2px); }
.blog-featured-heading { font-size: 22px; flex-shrink: 0; margin: 0; padding: var(--space-3) var(--space-4) 0; }
.blog-featured-row { display: flex; align-items: stretch; flex: 1; min-height: 0; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.blog-featured-img { width: 44%; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-cream-icon-bg); }
.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-title { font-size: 30px; margin: 10px 0; }
.blog-featured-body > p {
  color: var(--color-gray-text);
  font-size: 14.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-featured-rule { width: 46px; height: 3px; border-radius: 2px; background: var(--color-cream-accent); margin-top: var(--space-2); }
.blog-featured-author { display: flex; align-items: center; gap: 10px; margin-top: var(--space-2); }
.blog-featured-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-cream-icon-bg); flex-shrink: 0; overflow: hidden; }
/* Fotograf secilmemisse kutu bos kalir ve ustteki duz renkli daire
   gorunur. Secilmisse object-fit daireyi doldurur: kare olmayan bir
   fotograf sikismaz, ortasindan kirpilir. border-radius daire cerceveden
   geliyor, gorsele ayrica verilmiyor - overflow: hidden kirpiyor. */
.blog-featured-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.blog-featured-author strong { display: block; font-size: 13.5px; color: var(--color-navy); }
.blog-featured-author span { font-size: 12px; color: var(--color-gray-text); }

.blog-sidebar-card {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.blog-sidebar-block h3 { font-size: 19px; margin-bottom: var(--space-2); }
.blog-sidebar-block > p { color: var(--color-gray-text); font-size: 13px; margin-bottom: var(--space-2); }
.blog-sidebar-divider { height: 2px; flex-shrink: 0; background: var(--color-cream-accent); border-radius: 2px; margin: var(--space-3) 0; }
.blog-topics-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-2); }
.blog-topics-list li { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--color-navy); padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.blog-topics-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.blog-topics-list li span { display: flex; align-items: center; gap: 8px; }
.blog-topics-list li svg { color: var(--color-cream-accent); flex-shrink: 0; }
.blog-topics-list li strong { color: var(--color-gray-text); font-weight: 600; }

/* Latest Articles reuses .resource-card / .resource-card-img */
.blog-articles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.blog-article-meta { color: var(--color-gray-text); font-size: 12.5px; }

/* Latest Articles basligi ile "View All Articles" bagi ayni satirda:
   baslik solda, bag sagda. Bag yalnizca vitrinde gosterilmeyen daha eski
   yazi VARKEN basilir (bkz. template-parts/blog-articles.php), bu yuzden
   baslik cogu zaman tek basina kalir - flex icinde de eskisi gibi sola
   yaslidir, gorunum degismez.

   Baslik icin margin-bottom sifirlaniyor: flex ogelerinin marjlari
   komsulariyla birlesmedigi icin (margin collapsing yok) birakilsaydi
   grid ile arasindaki bosluk 40px'ten 56px'e cikardi.

   Dar ekranda ikisi ayni satira sigmazsa bag flex-wrap ile kendi satirina
   iner; satir arasi bosluk row-gap ile veriliyor. */
.blog-articles-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px var(--space-2);
}
.blog-articles-head .section-title { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.blog-articles-all { flex: 0 0 auto; white-space: nowrap; }

/* ==========================================================================
   21. Responsive - Blog Page
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .blog-hero { height: auto; padding-block: var(--space-5); }
  .blog-hero-grid { grid-template-columns: 1fr; text-align: center; height: auto; }
  .blog-hero-visual { order: -1; width: 100%; max-width: 420px; min-height: 340px; margin-inline: auto var(--space-4); }
  .hero-actions { justify-content: center; }

  .blog-featured-section { height: auto; max-height: none; overflow: visible; padding-block: var(--space-5); }
  .blog-featured-grid { grid-template-columns: 1fr; height: auto; }
  .blog-featured-card { height: auto; }
  .blog-sidebar-card { height: auto; }
  .blog-articles-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .blog-hero { height: auto; padding-block: var(--space-4) var(--space-3); }
  .blog-hero-grid { grid-template-columns: 1fr; text-align: center; height: auto; }
  .blog-hero-visual { order: -1; width: 100%; max-width: 300px; min-height: 300px; margin: 0 auto var(--space-4); }
  .hero-actions { justify-content: center; }

  .blog-featured-section { height: auto; max-height: none; overflow: visible; padding-block: var(--space-4) var(--space-3); }
  .blog-featured-grid { grid-template-columns: 1fr; height: auto; }
  .blog-featured-card { height: auto; }
  .blog-featured-row { flex-direction: column; }
  .blog-featured-img { width: 100%; max-width: none; aspect-ratio: 16 / 9; }
  .blog-sidebar-card { height: auto; }
  .blog-articles-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   ACADEMIC ENGLISH RESPONSIVE POLISH START
   Scope: only the Academic English page (selectors below either target
   classes that exist only on this page, or are scoped with
   `body:has(.academic-hero)` when the selector is shared site-wide,
   e.g. .site-header, .site-footer, .container).
   To fully revert: delete everything between this line and
   "ACADEMIC ENGLISH RESPONSIVE POLISH END" below, or `git revert`
   the commit that introduced this block.
   ========================================================================= */

/* ---- 1. Global container system (scoped to this page's body content) ---- */
body:has(.academic-hero) #main-content .container { padding-inline: 32px; }
body:has(.academic-hero) .academic-hero .container,
body:has(.academic-hero) #academic-help .container { max-width: 1280px; }

/* ---- 2. Header (scoped to this page only) ---- */
/* Header sizing now lives in the shared rules above (section 3) and applies
   to every page identically, so no page-specific overrides are needed here. */

/* ---- 3. Hero ---- */
body:has(.academic-hero) .academic-hero {
  /* height/min-height/max-height intentionally left untouched here so it
     keeps matching the Home hero exactly (calc(100vh - 81px), 560/800 caps) */
  align-items: center;
}
body:has(.academic-hero) .academic-hero-grid {
  height: auto;
  align-items: center;
  grid-template-columns: 0.90fr 1.10fr;
  gap: 56px;
}
body:has(.academic-hero) .academic-hero .hero-title {
  font-size: clamp(44px, 4vw, 62px);
  line-height: 1.05;
  max-width: 600px;
}
body:has(.academic-hero) .academic-eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
body:has(.academic-hero) .academic-hero .hero-desc {
  font-size: 16px;
  line-height: 1.7;
  max-width: 540px;
  margin-top: 20px;
}
body:has(.academic-hero) .academic-hero .hero-actions {
  margin-top: 32px;
  gap: 16px;
}
body:has(.academic-hero) .academic-hero .hero-actions .btn {
  min-height: 46px;
  padding-inline: 22px;
  font-size: 14px;
}
/* Rozet boyutu/aralik artik paylasilan .hero-badges/.hero-badge
   bileseninden geliyor (bkz. "4. Hero"); IELTS ve TOEFL ile birebir ayni. */
/* Card removed from markup already; visual no longer needs absolute
   positioning to share space with it, so it is simplified to normal-flow
   centering, which also guarantees it can never be clipped by the hero's
   overflow:hidden. */
body:has(.academic-hero) .academic-hero-visual {
  position: static;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
body:has(.academic-hero) .academic-hero-illustration {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  max-width: 700px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ---- 4. What You'll Learn ---- */
body:has(.academic-hero) #skills { padding-block: 80px; }
body:has(.academic-hero) #skills .section-title {
  font-size: clamp(32px, 2.5vw, 36px);
  line-height: 1.2;
}
body:has(.academic-hero) .skills-grid { margin-top: 44px; gap: 16px; }
body:has(.academic-hero) .skill-card {
  min-height: 210px;
  padding: 28px 18px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body:has(.academic-hero) .skill-card-icon { width: 52px; height: 52px; }
body:has(.academic-hero) .skill-card-icon svg { width: 23px; height: 23px; }
body:has(.academic-hero) .skill-card h3 { font-size: 15px; line-height: 1.3; margin-top: 18px; margin-bottom: 0; }
body:has(.academic-hero) .skill-card p { font-size: 12.75px; line-height: 1.6; margin-top: 10px; }

/* ---- 5. Academic Writing Lab: natural height, no viewport locking ---- */
body:has(.academic-hero) .academic-writing-lab {
  height: auto;
  min-height: 0;
  max-height: none;
  padding-block: 96px;
}
body:has(.academic-hero) .academic-writing-lab .container { height: auto; max-width: 1160px; }
body:has(.academic-hero) .academic-lab-grid {
  height: auto;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
}
body:has(.academic-hero) .academic-lab-content h2 { font-size: clamp(38px, 3.4vw, 42px); line-height: 1.08; }
body:has(.academic-hero) .academic-lab-content > p { font-size: 14.5px; line-height: 1.7; max-width: 420px; }
body:has(.academic-hero) .academic-lab-feature { margin-top: 28px; padding: 23px; border-radius: 12px; }
body:has(.academic-hero) .academic-lab-visual { max-width: 650px; margin-left: auto; }
body:has(.academic-hero) .academic-lab-process { margin-top: 28px; }
body:has(.academic-hero) .academic-lab-step-icon { width: 40px; height: 40px; }
body:has(.academic-hero) .academic-lab-step h4 { font-size: 12px; }
body:has(.academic-hero) .academic-lab-step p { font-size: 11px; }

/* ---- 6. Your Academic Journey ---- */
body:has(.academic-hero) .section:has(.academic-journey-track) { padding-block: 80px; }
body:has(.academic-hero) .section:has(.academic-journey-track) .section-title {
  font-size: clamp(30px, 2.5vw, 34px);
}
/* Academic English sayfasinda rozet 34px degil 36px. Degiskeni de birlikte
   guncelliyoruz ki ok cizgisi daire merkezinde kalsin. */
body:has(.academic-hero) .academic-journey-track { margin-top: 44px; --journey-badge: 36px; }
body:has(.academic-hero) .academic-journey-number { width: 36px; height: 36px; font-size: 12px; }
body:has(.academic-hero) .academic-journey-step h3 { font-size: 14px; }
body:has(.academic-hero) .academic-journey-step p {
  font-size: 12px;
  line-height: 1.55;
  max-width: 180px;
  margin-inline: auto;
}

/* ---- 7. How I Can Help You ---- */
body:has(.academic-hero) #academic-help { padding-block: 80px; }
body:has(.academic-hero) .help-grid { margin-top: 44px; gap: 24px; }
body:has(.academic-hero) .help-card { min-height: 170px; border-radius: 16px; }
body:has(.academic-hero) .help-card-body { padding: 24px; }
body:has(.academic-hero) .help-card-body h3 { font-size: 16px; }
body:has(.academic-hero) .help-card-body p { font-size: 12.75px; line-height: 1.55; }

/* ---- 8. Who Is This For + Student Success Stories ---- */
body:has(.academic-hero) .section:has(.academic-audience-card) { padding-block: 88px; }
body:has(.academic-hero) .academic-audience-card {
  border-radius: 19px;
  grid-template-columns: 0.65fr 1.35fr;
}
body:has(.academic-hero) .academic-audience-col,
body:has(.academic-hero) .academic-testimonial-col { padding: 40px; }
body:has(.academic-hero) .academic-audience-card .section-title { font-size: clamp(26px, 2.4vw, 30px); }
body:has(.academic-hero) .academic-audience-list li { font-size: 12.75px; line-height: 1.65; }
body:has(.academic-hero) .academic-testimonial-grid { gap: 18px; margin-top: 24px; }
body:has(.academic-hero) .academic-testimonial-card { padding: 23px; min-height: 220px; }
body:has(.academic-hero) .academic-testimonial-card > p { font-size: 13px; line-height: 1.65; }
body:has(.academic-hero) .academic-testimonial-person img { width: 34px; height: 34px; }
body:has(.academic-hero) .academic-testimonial-person strong { font-size: 12.75px; }
body:has(.academic-hero) .academic-testimonial-person span { font-size: 11px; }

/* ---- 9. CTA banner ---- */
body:has(.academic-hero) .section:has(.academic-cta-banner) { padding-top: 0; padding-bottom: 64px; }
body:has(.academic-hero) .academic-cta-banner { min-height: 160px; padding: 40px 56px; border-radius: 18px; }
body:has(.academic-hero) .academic-cta-banner .cta-banner-content h2 { font-size: clamp(26px, 2.4vw, 30px); }
body:has(.academic-hero) .academic-cta-banner .cta-banner-content p { font-size: 13.5px; }
body:has(.academic-hero) .academic-cta-banner .cta-banner-action .btn { height: 46px; padding-inline: 26px; }

/* ---- 10. FAQ ---- */
body:has(.academic-hero) .section:has(.academic-faq-grid) { padding-block: 80px; }
body:has(.academic-hero) .section:has(.academic-faq-grid) .section-title {
  font-size: clamp(30px, 2.5vw, 34px);
}
body:has(.academic-hero) .academic-faq-grid { margin-top: 40px; gap: 16px 24px; }
body:has(.academic-hero) .academic-faq-item { padding-inline: 19px; }
body:has(.academic-hero) .academic-faq-item summary { min-height: 56px; padding-block: 0; }
body:has(.academic-hero) .academic-faq-question { font-size: 13px; }

/* ---- 11. Footer (scoped to this page only) ---- */
body:has(.academic-hero) .site-footer { padding-top: 64px; }
body:has(.academic-hero) .footer-grid { gap: 28px; padding-bottom: 40px; }
body:has(.academic-hero) .footer-brand { font-size: 19px; }
body:has(.academic-hero) .footer-grid h4 { font-size: 13px; }
body:has(.academic-hero) .footer-grid ul li { font-size: 12.5px; line-height: 1.9; }
body:has(.academic-hero) .footer-social a { width: 36px; height: 36px; }
body:has(.academic-hero) .footer-bottom { padding-block: 16px; }

/* ---- 12. Laptop / small desktop: 992px - 1199px ---- */
@media (min-width: 992px) and (max-width: 1199px) {
  body:has(.academic-hero) #main-content .container { padding-inline: 32px; }
  body:has(.academic-hero) .academic-hero-grid { gap: 38px; }
  /* Previously uncapped at this tier (still used the unconditional 700px
     desktop cap), letting the image render up to ~603px here - visibly
     larger than IELTS (540px) and TOEFL (520px) at the same viewport range.
     560px unifies all 3 program pages' laptop-tier cap - see the Hero
     Image Responsive Audit. Column width here peaks at ~603px (992-1199px
     viewport, minus 2x32px container padding and the 38px grid gap, split
     0.90/1.10), so 560px never overflows it. */
  body:has(.academic-hero) .academic-hero-illustration { max-width: 560px; }
  body:has(.academic-hero) .academic-hero .hero-title { font-size: clamp(44px, 4vw, 50px); }
  body:has(.academic-hero) #skills,
  body:has(.academic-hero) #academic-help,
  body:has(.academic-hero) .section:has(.academic-journey-track),
  body:has(.academic-hero) .section:has(.academic-faq-grid) { padding-block: 76px; }
  body:has(.academic-hero) .skills-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  body:has(.academic-hero) .academic-writing-lab { padding-block: 80px; }
  body:has(.academic-hero) .academic-lab-grid { grid-template-columns: 0.9fr 1.1fr; gap: 40px; }
  body:has(.academic-hero) .help-grid { grid-template-columns: repeat(3, 1fr); }
  body:has(.academic-hero) .academic-audience-card { grid-template-columns: 0.65fr 1.35fr; }
}

/* ---- 13. Tablet: 768px - 991px ---- */
@media (min-width: 768px) and (max-width: 991px) {
  body:has(.academic-hero) #main-content .container { padding-inline: 24px; }
  body:has(.academic-hero) .academic-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  /* Was order:2 (image after text); that only ever mattered once the grid
     above genuinely collapses to 1 column, and it fought the working
     order:-1 already set for this breakpoint by the older, pre-polish
     Academic English Page rules further up in this file - so the image
     rendered second (below the text) instead of first, unlike IELTS's
     reference mobile composition. -1 restores image-first, matching IELTS.
     Also fixes that older rule's broken `margin-inline: auto var(--space-4)`
     (only centers with an equal pair of values; this one pushed the image
     off-center instead of centering it). */
  body:has(.academic-hero) .academic-hero-visual { order: -1; margin: 0 auto var(--space-4); }
  body:has(.academic-hero) .academic-hero .hero-title { font-size: clamp(42px, 5vw, 46px); max-width: none; }
  body:has(.academic-hero) #skills,
  body:has(.academic-hero) #academic-help,
  body:has(.academic-hero) .section:has(.academic-journey-track),
  body:has(.academic-hero) .section:has(.academic-audience-card),
  body:has(.academic-hero) .section:has(.academic-faq-grid) { padding-block: 64px; }
  body:has(.academic-hero) .skills-grid { grid-template-columns: repeat(3, 1fr); }
  body:has(.academic-hero) .academic-writing-lab { height: auto; min-height: 0; max-height: none; padding-block: 72px; }
  body:has(.academic-hero) .academic-lab-grid { grid-template-columns: 1fr; gap: 48px; }
  body:has(.academic-hero) .help-grid { grid-template-columns: repeat(2, 1fr); }
  /* 3 cards in a 2-column grid: the 3rd lands alone in row 2's first
     column by default grid auto-placement, leaving an empty second column
     next to it. Spanning it across both columns and capping its width to
     one column's share centers it instead of leaving it stuck on the left. */
  body:has(.academic-hero) .help-card:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 12px);
    margin-inline: auto;
  }
  body:has(.academic-hero) .academic-audience-card { grid-template-columns: 1fr; }
  body:has(.academic-hero) .academic-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  body:has(.academic-hero) .academic-faq-grid { grid-template-columns: 1fr; }
}

/* ---- 14. Mobile: 0 - 767px ---- */
@media (max-width: 767px) {
  body:has(.academic-hero) #main-content .container { padding-inline: 16px; }
  body:has(.academic-hero) #skills,
  body:has(.academic-hero) #academic-help,
  body:has(.academic-hero) .section:has(.academic-journey-track),
  body:has(.academic-hero) .section:has(.academic-faq-grid) { padding-block: 56px; }
  /* BUG FIX: the un-media-queried rule higher up in this same polish block
     (`body:has(.academic-hero) .academic-hero-grid { grid-template-columns:
     0.90fr 1.10fr }`) has the same `:has()` specificity as this selector,
     so without re-declaring grid-template-columns here it kept winning at
     every width, including mobile - the grid never actually collapsed to 1
     column and the hero stayed 2-up (image squeezed into the narrow right
     column) instead of stacking like IELTS. Re-asserting 1fr here (this
     rule comes later in the file, so it wins) fixes that. */
  body:has(.academic-hero) .academic-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Was order:2 (see the tablet tier above for why); also gets IELTS's
     mobile image sizing (max-width:360px, min-height:0, centered) instead
     of the older 300px/min-height:300px pair, so the image's visual weight
     matches IELTS's mobile hero photo instead of looking undersized. */
  body:has(.academic-hero) .academic-hero-visual { order: -1; max-width: 360px; min-height: 0; margin: 0 auto; }
  body:has(.academic-hero) .academic-hero .hero-title {
    font-size: clamp(36px, 10vw, 44px);
    line-height: 1.08;
    max-width: none;
  }
  body:has(.academic-hero) .academic-hero .hero-desc { font-size: 15px; }
  body:has(.academic-hero) .academic-hero .hero-actions .btn { width: 100%; }
  /* 3 badges: kept as a centered wrapping row (2+1) rather than a forced
     grid, since that's a natural, balanced shape for an odd count. The
     divider is still meant for a single horizontal row, though - once
     wrapped, the badge that starts row 2 would inherit a stray line from
     the shared `:not(:first-child)` rule, so it's turned off here. */
  body:has(.academic-hero) .academic-hero-badges { flex-wrap: wrap; row-gap: 12px; justify-content: center; }
  body:has(.academic-hero) .academic-hero-badges .hero-badge:not(:first-child)::before { display: none; }
  body:has(.academic-hero) .academic-hero-badges .hero-badge:not(:first-child) { padding-left: 0; }
  body:has(.academic-hero) .skills-grid { grid-template-columns: 1fr; gap: 16px; }
  body:has(.academic-hero) .skill-card { min-height: auto; padding: 24px; }
  body:has(.academic-hero) .academic-writing-lab { padding-block: 56px; }
  /* BUG FIX: the un-media-queried `body:has(.academic-hero) .academic-lab-grid
     { grid-template-columns: 0.82fr 1.18fr }` up in "5. Academic Writing Lab"
     has the same `:has()` specificity as this selector and was never
     re-declared at this breakpoint, so it kept winning at every width -
     the grid never actually collapsed to 1 column on mobile (tablet
     already re-asserts 1fr above and is unaffected). The white feedback
     mockup and the essay/feedback panels inside it were being squeezed
     into the narrow 1.18fr column instead of using the full width, which
     is what made the feedback panel look clipped/narrow. */
  body:has(.academic-hero) .academic-lab-grid { grid-template-columns: 1fr; }
  body:has(.academic-hero) .academic-lab-content h2 { font-size: clamp(32px, 8vw, 36px); }
  /* Plan/Draft/Feedback/Improve: was the older rule's `flex-direction:
     column` (still in effect - polish never overrode it), stacking all 4
     one per row. A 2x2 grid instead, same pattern as Journey below and
     Blog's category cards. .academic-lab-step's `max-width: none` from
     that same older rule becomes a harmless no-op once display is grid. */
  body:has(.academic-hero) .academic-lab-process {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
  /* Journey: was `gap: 28px` only, relying on the older pre-polish rule's
     `flex-direction: column` (still in effect - polish never overrode it)
     to stack all 4 steps in a single tall column. Switching to a 2x2 grid
     here instead halves the number of rows, which is what was making the
     section feel like it had "too much vertical space" - the old
     flex-direction rule becomes a harmless no-op once display is grid. */
  body:has(.academic-hero) .academic-journey-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
  body:has(.academic-hero) .help-grid { grid-template-columns: 1fr; }
  body:has(.academic-hero) .help-card-img { flex-basis: 96px; }
  /* BUG FIX: the un-media-queried `body:has(.academic-hero)
     .academic-audience-card { grid-template-columns: 0.65fr 1.35fr }` up in
     "8. Who Is This For + Student Success Stories" was never re-declared
     at this breakpoint either (tablet already does, above), so it kept
     winning here too - the audience list and testimonial cards stayed
     side-by-side, squeezed, instead of stacking list-then-testimonials. */
  body:has(.academic-hero) .section:has(.academic-audience-card) { padding-block: 56px; }
  body:has(.academic-hero) .academic-audience-card { grid-template-columns: 1fr; }
  body:has(.academic-hero) .academic-audience-col,
  body:has(.academic-hero) .academic-testimonial-col { padding: 24px; }
  body:has(.academic-hero) .academic-testimonial-grid { grid-template-columns: 1fr; }
  body:has(.academic-hero) .academic-cta-banner { padding: 32px 24px; text-align: center; flex-direction: column; gap: 24px; }
  /* CTA button: the shared `.btn` component sets `white-space: nowrap`, and
     this page's button label is long ("Book Your Academic English Trial
     Lesson"). Unconstrained, that forces the button as wide as the whole
     label on one line - close to (or past) the viewport width, and
     disproportionately large/pill-shaped next to the centered heading.
     Letting it wrap within a capped width keeps it readable and in
     proportion instead. */
  body:has(.academic-hero) .academic-cta-banner .cta-banner-action .btn {
    white-space: normal;
    max-width: 300px;
    text-align: center;
  }
  body:has(.academic-hero) .site-footer { padding-top: 48px; }
  /* grid-template-columns no longer needs a page-specific rule: the
     shared `.footer-grid` mobile and <=400px rules (Section 15) now cover
     this page too, so the two page-specific duplicates that used to live
     here (2-col at <=767px, 1-col at <=400px) were removed. */
}

/* =========================================================================
   ACADEMIC ENGLISH RESPONSIVE POLISH END
   ========================================================================= */

/* =========================================================================
   IELTS RESPONSIVE POLISH START
   Scope: only the IELTS page. Nothing is deleted or rewritten in place
   (aside from two dead-selector fixes noted below), and no text, image,
   color, font-family or template-part is touched. Selectors below either
   target classes/ids unique to this page (.ielts-hero, .ielts-accelerator,
   .ielts-band, #why-ielts, .ielts-testimonial-grid,
   .ielts-hero-*) or are scoped with `body:has(.ielts-hero)` when the base
   selector is shared site-wide (header, footer, #main-content .container,
   .cta-banner, .academic-faq-* which IELTS reuses from the Academic page).
   To fully revert: delete everything between this line and
   "IELTS RESPONSIVE POLISH END" below (plus the two `.ielts-hero .hero-desc`
   dead-selector fixes just above section 17), or `git revert` the commit
   that introduced this block.
   ========================================================================= */

/* ---- 1. Header (scoped to the IELTS page only) ---- */
/* Header sizing now lives in the shared rules (section 3) and applies to
   every page identically, so no page-specific overrides are needed here. */

/* ---- 2. Hero ---- */
/* CSS resolves a min-height/max-height conflict in favor of min-height, so a
   literal `min-height: calc(100vh - 80px); max-height: 900px;` pair would
   silently stop capping the hero on any screen taller than ~980px (min-height
   would always win). clamp() enforces both the intended viewport-relative
   height AND the 900px ceiling at every screen size. The shared base rule
   (.ielts-hero, .academic-hero, ... higher up in this file) still sets its
   own min-height:560px/max-height:800px, which would otherwise re-clamp this
   result a second time -- reset both to neutral here so only the clamp()
   below governs. */
.ielts-hero {
  height: clamp(560px, calc(100vh - 80px), 900px);
  min-height: 0;
  max-height: none;
  display: flex;
  align-items: center;
}
.ielts-hero .container { max-width: 1280px; }
.ielts-hero-grid { grid-template-columns: 0.90fr 1.10fr; gap: 56px; align-items: center; }
.ielts-hero .hero-eyebrow { font-size: 12px; letter-spacing: 0.07em; }
.ielts-hero .hero-title { font-size: clamp(42px, 4vw, 58px); line-height: 1.05; margin-bottom: 18px; }
.ielts-hero .hero-desc { font-size: 16px; line-height: 1.7; max-width: 520px; }
.ielts-hero .hero-actions .btn { min-height: 46px; padding: 13px 24px; font-size: 14px; }
/* 4 rozet + uzun metinler (orn. "One-to-One Expert Guidance") Home'un 3
   ogelik satirindan daha sikisik; tek satirda kalmasi icin sadece bu
   sayfada satir arasi daraltildi ve ogeler esit genislikte paylastirildi
   (metin gerektiginde kendi icinde 2 satira duser, satir kendisi kirilmaz). */
.ielts-hero-badges { gap: 20px; }
.ielts-hero-badges .hero-badge { flex: 1 1 0; min-width: 0; }
.ielts-hero-badges .hero-badge span { font-size: 13px; }
.ielts-hero-visual { height: auto; display: flex; align-items: center; justify-content: center; }
.ielts-hero-photo { width: 100%; max-width: 700px; height: auto; object-fit: contain; border-radius: 0; box-shadow: none; }

/* ---- 3. IELTS Score Accelerator: out of the viewport-height system ---- */
.ielts-accelerator {
  height: auto;
  min-height: 0;
  max-height: none;
  padding-block: 88px;
}
body.admin-bar .ielts-accelerator { height: auto; }
.ielts-accelerator .section-title { font-size: clamp(30px, 3vw, 36px); line-height: 1.2; }
.ielts-accelerator-grid { margin-top: 44px; gap: 24px; }
.ielts-accelerator-card {
  padding: 28px 22px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ielts-accelerator-icon { width: 54px; height: 54px; margin: 0 auto; }
.ielts-accelerator-icon svg { width: 23px; height: 23px; }
.ielts-accelerator-card h3 { font-size: 16px; line-height: 1.35; margin-top: 18px; }
.ielts-accelerator-card p { font-size: 13px; line-height: 1.6; margin-top: 12px; }

/* ---- 4. Current Band -> Target Band ---- */
.ielts-band { padding-block: 80px; }
.ielts-band-grid { gap: 56px; }
.ielts-band-title { font-size: clamp(30px, 3vw, 34px); line-height: 1.2; }
/* Current Band / Skills / Target Band boxes enlarged slightly; the intro
   text column is still the taller of the two grid tracks at every tested
   width, so this does not change the section's overall rendered height. */
.ielts-band-card { flex-basis: 160px; padding: 30px 24px; }
.ielts-band-target { flex-basis: 184px; }
.ielts-band-number { font-size: 46px; }
.ielts-band-label { font-size: 12.5px; }
.ielts-band-sub { font-size: 12.5px; }
.ielts-band-skills { padding: 28px 28px; gap: 18px; }
.ielts-band-skill { font-size: 14.5px; }
.ielts-band-skill-icon { width: 32px; height: 32px; }

/* ---- 5. Why Learn with Sariyya? ---- */
#why-ielts { padding-block: 80px; }
#why-ielts .why-us-grid { margin-top: 44px; gap: 32px; }
#why-ielts .why-us-item h3 { font-size: 16px; line-height: 1.35; }
#why-ielts .why-us-item p { font-size: 13px; line-height: 1.6; }

/* ---- 6. Student Success Stories ---- */
.section:has(.ielts-testimonial-grid) { padding-block: 80px; }
.ielts-testimonial-grid { margin-top: 44px; }
.ielts-testimonial-card { min-height: 220px; }
.ielts-testimonial-text { font-size: 13.5px; line-height: 1.65; margin-bottom: 22px; }
.ielts-testimonial-name strong { font-size: 13px; font-weight: 600; }
.ielts-testimonial-name span { font-size: 12px; }

/* ---- 8. Final CTA ---- */
body:has(.ielts-hero) .section:has(.cta-banner) { padding-bottom: 64px; }
body:has(.ielts-hero) .cta-banner { padding: 40px 56px; min-height: 160px; border-radius: 20px; }
body:has(.ielts-hero) .cta-banner-content h2 { font-size: clamp(27px, 2.4vw, 30px); line-height: 1.2; }
body:has(.ielts-hero) .cta-banner-content p { font-size: 13.5px; line-height: 1.6; }
body:has(.ielts-hero) .cta-banner-action .btn { min-height: 46px; padding: 12px 24px; font-size: 14px; }

/* ---- 9. FAQ (reuses the shared .academic-faq-* markup; scoped so the
   Academic English and TOEFL FAQ sections are left untouched) ---- */
body:has(.ielts-hero) .section:has(.academic-faq-grid) { padding-block: 80px; }
body:has(.ielts-hero) .academic-faq-grid { margin-top: 40px; }
body:has(.ielts-hero) .academic-faq-item { padding: 0 20px; }
body:has(.ielts-hero) .academic-faq-item summary { min-height: 54px; }
body:has(.ielts-hero) .academic-faq-question { font-size: 14px; }

/* ---- 10. Footer (scoped to the IELTS page only) ---- */
body:has(.ielts-hero) .footer-grid h4 { font-size: 13px; }
body:has(.ielts-hero) .footer-grid ul li { font-size: 13px; line-height: 1.8; }

/* ---- 11. Laptop / small desktop: 992px - 1199px ---- */
@media (min-width: 992px) and (max-width: 1199px) {
  body:has(.ielts-hero) #main-content .container { padding-inline: 32px; }

  .ielts-hero { min-height: 650px; height: auto; max-height: none; padding-block: 64px; }
  .ielts-hero-grid { grid-template-columns: 0.95fr 1.05fr; gap: 36px; }
  .ielts-hero .hero-title { font-size: clamp(42px, 4vw, 46px); }
  /* Unified laptop-tier cap (560px) across all 3 program pages - see the
     Hero Image Responsive Audit. Column width here peaks at ~577px
     (992-1199px viewport, minus 2x32px container padding and the 36px grid
     gap, split 0.95/1.05), so 560px never overflows it. */
  .ielts-hero-photo { max-width: 560px; }

  .ielts-accelerator { padding-block: 72px; }
  .ielts-accelerator-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ielts-accelerator-card:nth-child(odd)::before { display: none; }

  .ielts-band { padding-block: 72px; }
  .ielts-band-grid { grid-template-columns: 1fr; gap: 40px; }

  #why-ielts .why-us-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; row-gap: 32px; }
  #why-ielts .why-us-item:nth-child(3)::before { display: none; }
}

/* ---- 12. Tablet: 768px - 991px ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .ielts-hero { height: auto; min-height: 0; max-height: none; padding-block: 64px; }
  .ielts-hero-grid { grid-template-columns: 1fr; gap: 48px; }

  .ielts-accelerator { min-height: 0; padding-block: 64px; }
  .ielts-accelerator-grid { gap: 20px; }

  #why-ielts .why-us-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  #why-ielts .why-us-item:nth-child(3)::before { display: none; }

  .ielts-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 13. Mobile: 0 - 767px ---- */
@media (max-width: 767px) {
  .ielts-accelerator,
  .ielts-band,
  #why-ielts,
  .section:has(.ielts-testimonial-grid) { padding-block: 56px; }
  body:has(.ielts-hero) .section:has(.academic-faq-grid) { padding-block: 56px; }

  .ielts-hero { height: auto; min-height: 0; max-height: none; padding-block: 48px 56px; }
  /* Image->heading gap standardized to match Academic English's mobile
     value (32px) instead of the 56px carried over unchanged from desktop -
     see the Hero Image Responsive Audit. */
  .ielts-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .ielts-hero .hero-title { font-size: clamp(34px, 10vw, 42px); line-height: 1.08; }
  .ielts-hero .hero-desc { font-size: 15px; line-height: 1.65; }
  /* Matches Academic English's existing mobile button treatment
     (body:has(.academic-hero) .academic-hero .hero-actions .btn) so both
     CTAs use the same full-width, stacked system instead of each button
     auto-sizing to its own (differently long) label. */
  .ielts-hero .hero-actions .btn { width: 100%; }
  .ielts-hero-visual { max-width: 360px; height: auto; min-height: 0; margin-inline: auto; }
  .ielts-hero-photo { max-width: 360px; }
  /* 4 badges: the desktop-only `.ielts-hero-badges .hero-badge { flex: 1 1 0
     }` rule (further up, unconditional) combined with the shared
     `.hero-badges` mobile rule's plain `flex-wrap: wrap` let items reflow
     unpredictably - a badge could end up alone on its own row, and the
     shared `:not(:first-child)` divider (meant for a single row) then drew
     a stray line in front of whichever badge happened to start a new row.
     A real 2-column grid is deterministic instead: always exactly 2x2, no
     row-start item ever inherits a divider meant for a horizontal
     neighbor. Home is untouched - it never used this page-specific class. */
  .ielts-hero-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }
  .ielts-hero-badges .hero-badge {
    justify-content: center;
    padding-left: 0;
  }
  .ielts-hero-badges .hero-badge:not(:first-child)::before { display: none; }

  .ielts-accelerator-grid { gap: 16px; }
  .ielts-accelerator-card { min-height: auto; padding: 24px; }

  #why-ielts .why-us-grid { grid-template-columns: 1fr; }

  body:has(.ielts-hero) .cta-banner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 32px 24px;
    min-height: 0;
  }
}

/* =========================================================================
   IELTS RESPONSIVE POLISH END
   ========================================================================= */

/* =========================================================================
   BLOG RESPONSIVE POLISH START
   Scope: only the Blog page. No text, image, color, font-family or
   template-part is touched - spacing/sizing/typography/responsive only.
   Selectors below either target classes/ids unique to this page
   (#categories, #articles, .blog-hero, .blog-hero-grid, .blog-featured-*,
   .blog-sidebar-*, .blog-articles-grid) or are scoped with
   `body:has(.blog-hero)` when the base selector is shared site-wide
   (header, footer).
   To fully revert: delete everything between this line and
   "BLOG RESPONSIVE POLISH END" below, or `git reset --hard
   before-blog-responsive-polish` (commit created right before this block
   was added).
   ========================================================================= */

/* ---- 1. Header (scoped to the Blog page only) ---- */
/* Header sizing now lives in the shared rules (section 3) and applies to
   every page identically, so no page-specific overrides are needed here. */

/* ---- 2. Blog Hero ----
   The shared base rule higher up in this file gives .blog-hero a literal
   height/min-height/max-height triple; a separate min-height/max-height
   pair lets min-height win on any screen taller than ~840px and silently
   removes the 760px cap (the same issue already fixed on the IELTS/TOEFL
   pages) - so both are neutralized here and folded into a single clamp()
   that enforces the floor and the ceiling at every screen size. Photo
   collage markup/positioning (.blog-hero-photo-1..4, .blog-hero-visual,
   .blog-hero-dots, .blog-hero-corner-deco) is untouched. */
.blog-hero {
  height: clamp(560px, calc(100vh - 80px), 760px);
  min-height: 0;
  max-height: none;
}
.blog-hero .container { max-width: 1280px; }
.blog-hero-grid { gap: 48px; }
.blog-hero .hero-eyebrow { font-size: 12px; letter-spacing: .07em; }
.blog-hero .hero-title { font-size: clamp(42px, 4vw, 58px); line-height: 1.05; }
.blog-hero .hero-desc { font-size: 16px; line-height: 1.7; }
.blog-hero .hero-actions .btn { min-height: 46px; padding: 13px 24px; font-size: 14px; }

/* ---- 3. Browse by Category ----
   Column-count breakpoints are re-defined here under the `#categories`
   scope (blog-only, and higher specificity than a bare class so it always
   wins) instead of relying on the unscoped `.skills-grid` rules that live
   in the Academic English page's CSS block further up in this file - Blog
   was inheriting its category-grid responsive behavior from those by
   accident. Card markup (.skill-card, .blog-category-card) is untouched. */
#categories { padding-top: 72px; padding-bottom: 56px; }
#categories .skills-grid { margin-top: 44px; }

/* ---- 4. Featured Article + About the Blog ----
   Uses the exact same height formula as the hero (clamp between the same
   560px floor and 760px ceiling, driven by the same viewport calc), instead
   of the hero's separate min-height/max-height pair for the same reason
   noted in section 2 above. Because the section is a definite height again,
   .blog-featured-card and .blog-sidebar-card (both height:100% in the base
   rules above) resolve to a real pixel value instead of falling back to
   auto, so they always match each other and shrink/grow together with the
   section. Stretching the row lets the image grow to fill whatever height
   that works out to - taller on a tall viewport, shorter on a short one -
   while staying capped at 44% width and cropping the sides via
   object-fit:cover, so the heading/text column next to it keeps the same
   width and is never squeezed. overflow-y:auto on the sidebar card is a
   safety net for unusually short windows (roughly <650px tall) where the
   About + divider + Popular Topics text no longer fits the 560px floor -
   it scrolls internally there instead of visually spilling out of the
   card; it has no effect at any normal window height, where everything
   already fits. */
.blog-featured-section {
  height: clamp(560px, calc(100vh - 80px), 760px);
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding-block: 72px;
}
.blog-featured-grid { gap: 48px; }
.blog-featured-row { align-items: stretch; }
.blog-sidebar-card { overflow-y: auto; }
/* Popular Topics list matched the About the Blog paragraph's line-height
   but not its font-size, making it the tallest thing in the sidebar card
   and - since .blog-featured-card stretches to match .blog-sidebar-card's
   height in this grid row - the tallest thing in the whole section. Sizing
   it down to the same 13px closes that gap; both cards (and the auto-height
   section around them) shrink together as a direct result, no separate
   height rule needed. */
.blog-topics-list li { font-size: 13px; }

/* ---- 4b. Sidebar: About the Blog + Popular Topics iceriginin kutuya sigmasi
   ----------------------------------------------------------------------
   Sidebar kartinin dis olculeri bu bolumde ICERIKTEN gelmiyor: ustteki
   .blog-featured-section sabit bir yukseklik aliyor ve iki kart da
   height:100% ile o yuksekligi paylasiyor. Yani asagidaki kucultmeler
   kartin genisligini, yuksekligini, Featured Article ile alt hizasini ya
   da 2fr/1fr grid oranini DEGISTIRMEZ - yalnizca ayni kutuya daha fazla
   satir sigmasini saglar.

   Neden gerekti: Popular Topics gercek kategorilerden beslenmeye
   basladiginda liste bir satirdan bes satira cikti. Olculen ic tasma
   (5 konu, kart yuksekligi parantez icinde):
       1440x900 (615px) ->  0px
       1280x800 (575px) -> 12px
       1024x800 (575px) -> 32px
       1440x720 (495px) -> 92px
   Tasma halinde kartin overflow-y:auto guvenlik agi devreye giriyor ve
   icerik kart icinde kayiyordu - icerik kaybolmuyordu ama "View all
   topics" bagi gorunmez oluyordu.

   Kural yalnizca >=992px'te: sabit yukseklik de yalnizca orada geciyor.
   Tablet ve mobilde bolum zaten height:auto, kart icerigi kadar uzuyor ve
   tasma olusamiyor - o genisliklerdeki gorunum bilerek ellenmedi. */
@media (min-width: 992px) {
  /* 40px ic bosluk bu genislikteki (355px) bir kartta cok yer harciyordu. */
  .blog-sidebar-card { padding: 28px; }

  .blog-sidebar-block h3 { font-size: 17px; margin-bottom: 10px; }

  /* Metin AYNEN kaliyor - kisaltilmiyor, ucnokta konmuyor. Yalnizca satir
     araligi 1.6'dan 1.5'e ceviriliyor; 13px'te hala rahat okunur. */
  .blog-sidebar-block > p { line-height: 1.5; margin-bottom: 12px; }

  .blog-sidebar-divider { margin: 16px 0; }

  .blog-topics-list { gap: 7px; margin-bottom: 12px; }
  .blog-topics-list li { padding-bottom: 7px; }

  .blog-sidebar-card .link-arrow { font-size: 13px; }
}

/* Satir duzeni: [ikon] Kategori adi .......... sayi
   Ad ile sayi arasindaki bosluk esnek, sayi sagda sabit. Uzun bir kategori
   adi satiri ikiye kirarsa satir yuksekligi 32px'ten 53px'e cikiyor ve bes
   satir kutuya sigmiyordu; ad artik tek satirda kalip sonuna ucnokta
   aliyor. min-width:0 olmadan flex cocugu kendi icerigi kadar genisleyip
   sayiyi disari itebiliyordu - yatay tasmanin kaynagi budur.
   Bu kurallar her genislikte gecerli: dar bir kutuda ad kirilmasin
   istegi mobilde de aynen dogru. */
.blog-topics-list li > span { min-width: 0; }
.blog-topic-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-topics-list li strong { flex-shrink: 0; }

/* ---- 5. Latest Articles ----
   Card markup/spacing (.resource-card, .resource-card-img) is untouched;
   only a title line-clamp is added, scoped to #articles so the homepage's
   own .resource-card usage (template-parts/resources.php) is unaffected. */
#articles { padding-block: 72px; }
#articles .resource-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- 6. Footer (scoped to the Blog page only) ----
   Site-wide, `.footer-grid` has two conflicting mobile rules left over
   from earlier work (`<=720px` giving 1 column, `<=767px` giving 2 with the
   first/last column spanning); the `<=767px` one wins by source order, so
   `<=720px` is silently dead. That conflict is left exactly as-is for every
   other page (out of scope for a Blog-only pass) and only neutralized here,
   for the Blog page, with a single deliberate 2-tier footer behavior. */
@media (min-width: 768px) and (max-width: 991px) {
  body:has(.blog-hero) .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}
@media (max-width: 767px) {
  body:has(.blog-hero) .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  body:has(.blog-hero) .footer-grid > div:first-child,
  body:has(.blog-hero) .footer-grid > div:last-child { grid-column: 1 / -1; }
}

/* ---- 7. Laptop / small desktop: 992px - 1199px (previously undefined for
   Blog - it jumped straight from the 768-991px tablet tier to whatever the
   desktop rules happened to render at any width above that) ---- */
@media (min-width: 992px) and (max-width: 1199px) {
  .blog-hero-grid { gap: 36px; }
  .blog-hero .hero-title { font-size: clamp(40px, 4vw, 44px); }

  #categories .skills-grid { grid-template-columns: repeat(3, 1fr); }

  .blog-featured-grid { gap: 36px; }

  .blog-articles-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 8. Tablet: 768px - 991px (refines the existing Section 21 tablet
   block above - that block is left in place; the rules below simply win on
   the properties they touch by coming later in the file at equal
   specificity, or by using the higher-specificity #categories scope) ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .blog-hero { height: auto; min-height: 0; max-height: none; }

  #categories .skills-grid { grid-template-columns: repeat(3, 1fr); }

  .blog-featured-section { height: auto; min-height: 0; max-height: none; overflow: visible; padding-block: 64px; }
}

/* ---- 9. Mobile: 0 - 767px (refines the existing Section 21 mobile block
   above the same way) ----
   Category cards: 1 column x 6 rows caused excessive scroll on phones, so
   this switches to 2 columns. minmax(0, 1fr) (not a bare 1fr) keeps a long
   category name from forcing its column wider than the other and pushing
   the grid past the viewport edge - it can only wrap the title, never grow.
   Card padding/icon/type are trimmed to fit two per row without feeling
   cramped; min-height plus the card becoming a centered flex column keeps
   icon->title->count balanced even when one title wraps to 2 lines and a
   neighboring one does not (grid's default row-stretch equalizes height
   within each row, min-height keeps that consistent across rows too when
   the category count isn't a clean multiple of 2, e.g. 5 or 7 cards). */
@media (max-width: 767px) {
  .blog-hero { height: auto; min-height: 0; max-height: none; }

  #categories { padding-block: 56px; }
  #categories .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  #categories .blog-category-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 156px;
    padding: 18px 12px;
  }
  #categories .blog-category-card .skill-card-icon { width: 48px; height: 48px; margin-bottom: var(--space-1); }
  #categories .blog-category-card .skill-card-icon svg { width: 20px; height: 20px; }
  #categories .blog-category-card h3 { font-size: 13.5px; line-height: 1.3; margin-bottom: 4px; }
  #categories .blog-category-card p { font-size: 11.5px; }

  .blog-featured-section { height: auto; min-height: 0; max-height: none; overflow: visible; padding-block: 56px; }
  .blog-featured-img { aspect-ratio: 16 / 9; }

  #articles { padding-block: 56px; }
}

/* ---- 10. Very narrow phones: below 320px only.
   Two columns already stay comfortably readable down to 320px (checked at
   430/400/390/375/360/340px); only a genuinely tiny viewport below that
   falls back to a single column. */
@media (max-width: 319px) {
  #categories .skills-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   BLOG RESPONSIVE POLISH END
   ========================================================================= */

/* =========================================================================
   TOEFL RESPONSIVE POLISH START
   Scope: only the TOEFL page. No text, image, color, font-family or
   template-part is touched - spacing/sizing/typography/responsive only.
   Selectors below either target classes unique to this page (.toefl-hero,
   .toefl-integrated, .toefl-score-*, .toefl-gain-*, .toefl-speaking-*,
   .toefl-testimonials-more) or are scoped with `body:has(.toefl-hero)` when
   the base selector is shared site-wide (header, footer, #main-content
   .container, .cta-banner, .academic-faq-* which TOEFL reuses from the
   Academic page, .ielts-testimonial-* which TOEFL reuses from IELTS).
   To fully revert: delete everything between this line and
   "TOEFL RESPONSIVE POLISH END" below, or `git reset --hard
   before-toefl-responsive-polish` (tag/commit created right before this
   block was added).
   ========================================================================= */

/* ---- 1. Header (scoped to the TOEFL page only; logo sizing untouched) ---- */
/* Header sizing now lives in the shared rules (section 3) and applies to
   every page identically, so no page-specific overrides are needed here. */

/* ---- 2. Hero ---- */
/* Same min/max-height conflict IELTS already hit: a literal
   `min-height: calc(100vh - 80px); max-height: 760px;` pair lets min-height
   win on any screen taller than ~840px, silently removing the 760px cap.
   clamp() enforces both the viewport-relative height AND the ceiling at
   every screen size; the shared base rule higher up in this file still sets
   its own min-height:560px/max-height:800px for .toefl-hero, so both are
   reset to neutral here to avoid a second, conflicting clamp. */
.toefl-hero {
  height: clamp(560px, calc(100vh - 80px), 760px);
  min-height: 0;
  max-height: none;
}
.toefl-hero .container { max-width: 1280px; }
.toefl-hero-grid { grid-template-columns: 0.90fr 1.10fr; gap: 48px; align-items: center; }
.toefl-hero .hero-eyebrow { font-size: 12px; letter-spacing: .07em; }
.toefl-hero .hero-title { font-size: clamp(42px, 4vw, 58px); line-height: 1.05; margin-bottom: 18px; }
.toefl-hero .hero-desc { font-size: 16px; line-height: 1.7; max-width: 520px; }
.toefl-hero .hero-actions { gap: 16px; }
.toefl-hero .hero-actions .btn { min-height: 46px; padding: 13px 24px; font-size: 14px; }
/* 4 rozet + uzun metinler Home'un 3 ogelik satirindan daha sikisik; tek
   satirda kalmasi icin sadece bu sayfada satir arasi daraltildi ve ogeler
   esit genislikte paylastirildi (metin gerektiginde kendi icinde 2 satira
   duser, satir kendisi kirilmaz). */
.toefl-hero-badges { gap: 20px; }
.toefl-hero-badges .hero-badge { flex: 1 1 0; min-width: 0; }
.toefl-hero-badges .hero-badge span { font-size: 13px; }
.toefl-hero-illustration { max-width: 700px; width: 100%; height: auto; object-fit: contain; }

/* ---- 3. Integrated Skills Practice ---- */
.toefl-integrated { padding-block: 72px; }
.toefl-integrated .container { max-width: 1200px; }
.toefl-integrated-grid { grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.toefl-integrated-head { margin-bottom: 36px; }
.toefl-integrated-head h2 { font-size: clamp(30px, 3vw, 36px); line-height: 1.2; }
.toefl-integrated-head p { font-size: 14px; line-height: 1.6; }
.toefl-integrated-steps { gap: 15px; }
.toefl-integrated-icon { width: 56px; height: 56px; }
.toefl-integrated-step h4 { font-size: 12.5px; }
.toefl-integrated-step p { font-size: 12px; line-height: 1.5; }
.toefl-integrated-note { margin-top: 32px; font-size: 13px; }
.toefl-speaking-laptop { max-width: 520px; }

/* ---- 4. Understand Your TOEFL Score ---- */
.section:has(.toefl-score-card) { padding-block: 72px; }
.section:has(.toefl-score-card) .container { max-width: 1200px; }
.section:has(.toefl-score-card) .section-title { font-size: clamp(30px, 3vw, 36px); line-height: 1.2; }
.toefl-score-card { margin-top: 44px; grid-template-columns: 0.9fr 1.35fr 1fr; column-gap: 0; border-radius: 24px; }
.toefl-score-goal, .toefl-score-breakdown, .toefl-score-focus { padding: 36px; }
.toefl-score-goal-value { font-size: 56px; }
.toefl-score-goal-value span { font-size: 18px; }
.toefl-score-goal-req-value { font-size: 22px; }
.toefl-score-goal-note { padding: 10px 12px; }
.toefl-score-row { margin-bottom: 20px; }
.toefl-score-row-icon { width: 32px; height: 32px; }
/* Label/value bumped up from 13/13.5px; row height still governed by the
   32px icon circle (the tallest child in this flex row via
   align-items:center), so this does not change row/card/section height.
   Widths are widened slightly so "Listening" and "XX/30" don't wrap to a
   second line at the larger size, which would grow the row instead. */
.toefl-score-row-label { width: 90px; font-size: 16px; }
.toefl-score-row-value { width: 50px; font-size: 16px; }
.toefl-score-focus-item { padding: 16px; }
.toefl-score-focus-item h4 { font-size: 13px; }
.toefl-score-focus-item p { font-size: 12px; line-height: 1.5; }

/* ---- 5. What You'll Gain ---- */
.section:has(.toefl-gain-grid) { padding-block: 64px; }
.section:has(.toefl-gain-grid) .section-title { font-size: clamp(30px, 3vw, 34px); }
.toefl-gain-grid { margin-top: 44px; gap: 24px; }
.toefl-gain-icon { width: 54px; height: 54px; }
.toefl-gain-icon svg { width: 23px; height: 23px; }
.toefl-gain-item h3 { font-size: 15px; }
.toefl-gain-item p { font-size: 12.75px; line-height: 1.55; }

/* ---- 6. Student Success Stories (reuses IELTS's .ielts-testimonial-*
   markup; scoped here so the IELTS page's own testimonial styling, and any
   future un-scoped IELTS polish rule, can never leak into or be leaked from
   this page) ---- */
body:has(.toefl-hero) .section:has(.ielts-testimonial-grid) { padding-block: 72px; }
body:has(.toefl-hero) .ielts-testimonial-grid { margin-top: 48px; gap: 24px; }
body:has(.toefl-hero) .ielts-testimonial-card { padding: 24px; min-height: 220px; border-radius: 16px; }
body:has(.toefl-hero) .ielts-testimonial-text { font-size: 13.5px; line-height: 1.65; }
body:has(.toefl-hero) .ielts-testimonial-band strong { font-size: 16px; }
body:has(.toefl-hero) .ielts-testimonial-name strong { font-size: 13px; font-weight: 600; }
body:has(.toefl-hero) .ielts-testimonial-name span { font-size: 12px; }
.toefl-testimonials-more { margin-top: 24px; }
.toefl-testimonials-more .link-arrow { font-size: 13px; }

/* ---- 7. Final CTA ---- */
body:has(.toefl-hero) .section:has(.cta-banner) { padding-top: 0; padding-bottom: 64px; }
body:has(.toefl-hero) .cta-banner { min-height: 160px; padding: 40px 56px; border-radius: 20px; gap: 48px; }
body:has(.toefl-hero) .cta-banner-content h2 { font-size: clamp(27px, 2.4vw, 30px); line-height: 1.2; }
/* The shared .cta-banner-content p rule forces white-space:nowrap so the
   Home/IELTS one-line taglines never wrap; TOEFL's copy is longer, so this
   page needs it to wrap normally instead - overridden here only. */
body:has(.toefl-hero) .cta-banner-content p { font-size: 13.5px; line-height: 1.6; white-space: normal; }
body:has(.toefl-hero) .cta-banner-action .btn { min-height: 46px; padding: 12px 24px; font-size: 14px; }

/* ---- 8. FAQ (reuses the shared .academic-faq-* markup; scoped so the
   Academic English and IELTS FAQ sections are left untouched) ---- */
body:has(.toefl-hero) .section:has(.academic-faq-grid) { padding-block: 72px; }
body:has(.toefl-hero) .section:has(.academic-faq-grid) .section-title { font-size: clamp(30px, 3vw, 34px); }
body:has(.toefl-hero) .academic-faq-item { padding-inline: 20px; }
body:has(.toefl-hero) .academic-faq-item summary { min-height: 54px; }
body:has(.toefl-hero) .academic-faq-question { font-size: 13.5px; }

/* ---- 9. Footer (scoped to the TOEFL page only) ---- */
body:has(.toefl-hero) .footer-grid h4 { font-size: 13px; }
body:has(.toefl-hero) .footer-grid ul li { font-size: 13px; line-height: 1.8; }

/* ---- 10. Laptop / small desktop: 992px - 1199px (previously undefined
   for TOEFL - Academic English and IELTS already had this tier) ---- */
@media (min-width: 992px) and (max-width: 1199px) {
  body:has(.toefl-hero) #main-content .container { padding-inline: 32px; }

  .toefl-hero { height: auto; min-height: 640px; max-height: none; padding-block: 56px; }
  .toefl-hero-grid { grid-template-columns: 0.95fr 1.05fr; gap: 36px; }
  .toefl-hero .hero-title { font-size: clamp(40px, 4vw, 44px); }
  .toefl-hero .hero-desc { font-size: 15px; }
  /* Unified laptop-tier cap (560px) across all 3 program pages - see the
     Hero Image Responsive Audit. Column width here peaks at ~577px
     (992-1199px viewport, minus 2x32px container padding and the 36px grid
     gap, split 0.95/1.05), so 560px never overflows it. */
  .toefl-hero-illustration { max-width: 560px; }
  .toefl-hero-badges { flex-wrap: wrap; row-gap: 20px; }

  .toefl-integrated { padding-block: 64px; }
  .toefl-integrated-grid { grid-template-columns: 1.1fr 0.9fr; gap: 36px; }
  .toefl-speaking-laptop { max-width: 450px; }

  .section:has(.toefl-score-card) { padding-block: 64px; }
  .toefl-score-card { grid-template-columns: 0.9fr 1.3fr 1fr; }
  .toefl-score-goal, .toefl-score-breakdown, .toefl-score-focus { padding: 26px; }
  .toefl-score-row-label { width: 70px; }

  .section:has(.toefl-gain-grid) { padding-block: 60px; }
  .toefl-gain-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .toefl-gain-item:nth-child(3)::before { display: none; }

  /* Testimonials and FAQ intentionally keep their 3-col / 2-col desktop
     layout at this width per spec; revisit only if real-device testing
     shows them wrapping badly. */

  body:has(.toefl-hero) .cta-banner-content p { white-space: normal; }
}

/* ---- 11. Tablet: 768px - 991px (refines the existing Section 19 tablet
   block above - that block is left in place; the rules below simply win on
   the properties they touch, either via extra specificity from
   `body:has()` or by coming later in the file at equal specificity) ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .toefl-hero { padding-block: 64px; }
  /* Same bug as the mobile tier below: the un-media-queried 2-column rule
     up in "13e. TOEFL Page" outranks/outlasts the older tablet rule in
     "19. Responsive - TOEFL Page", so it never actually collapsed to 1
     column here either. Also fixes that older rule's broken
     `margin-inline: auto var(--space-4)` (only centers with an equal pair
     of values; this one pushed the image off-center). */
  .toefl-hero-grid { grid-template-columns: 1fr; }
  .toefl-hero-visual { margin: 0 auto var(--space-4); }
  .toefl-hero .hero-desc { font-size: 15px; }
  .toefl-integrated { padding-block: 64px; }
  /* Same bug pattern as the hero: the un-media-queried
     `.toefl-integrated-grid { grid-template-columns: 1.15fr 0.85fr }` up in
     "13e. TOEFL Page" has equal specificity to the older tablet rule in
     "19. Responsive - TOEFL Page" and comes later in the file, so it kept
     winning here too - content and laptop mockup stayed side-by-side,
     compressed, instead of stacking. */
  .toefl-integrated-grid { grid-template-columns: 1fr; }
  .toefl-speaking-mockup { max-width: 420px; margin-inline: auto; }
  /* Same bug again: the un-media-queried `.toefl-score-card {
     grid-template-columns: 0.9fr 1.35fr 1fr }` outlasts the older tablet
     rule the same way, so goal/skills/focus stayed 3-up instead of
     stacking; the goal note and skill rows were squeezed into a ~0.9fr
     column, which is what made the note look like a narrow, tall box. */
  .toefl-score-card { grid-template-columns: 1fr; }
  body:has(.toefl-hero) .section:has(.ielts-testimonial-grid) .ielts-testimonial-grid,
  body:has(.toefl-hero) .ielts-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  body:has(.toefl-hero) .academic-faq-grid { grid-template-columns: 1fr; }
}

/* ---- 12. Mobile: 0 - 767px ---- */
@media (max-width: 767px) {
  /* The site-wide mobile rule sets `.section{padding-block:40px}`; TOEFL's
     own sections (score/gain/testimonials/faq - hero and CTA manage their
     own padding separately) are tuned to 56px instead, scoped to this page
     only. The testimonials/FAQ selectors are repeated here at matching
     specificity (both use `:has()` on a shared class) so they actually win
     over the 72px desktop-tier rules above instead of losing to them. */
  body:has(.toefl-hero) .section { padding-block: 56px; }
  body:has(.toefl-hero) .section:has(.ielts-testimonial-grid),
  body:has(.toefl-hero) .section:has(.academic-faq-grid) { padding-block: 56px; }

  .toefl-hero { height: auto; min-height: 0; max-height: none; padding-block: 48px 56px; }
  /* BUG FIX: the un-media-queried `.toefl-hero-grid { grid-template-columns:
     0.90fr 1.10fr }` further up in this same polish block has equal
     specificity to the older mobile rule in "19. Responsive - TOEFL Page"
     and comes later in the file, so it kept winning at every width - the
     grid never collapsed to 1 column and the hero stayed 2-up (image
     squeezed into the narrow left column) instead of stacking like IELTS.
     Re-asserting 1fr here (later still, so it wins) fixes that; order:-1
     from that older rule already puts the image first once the grid is
     genuinely 1 column, same as IELTS, so it's left alone. */
  /* Image->heading gap standardized to match Academic English's mobile
     value (32px) instead of the 48px carried over unchanged from desktop -
     see the Hero Image Responsive Audit. */
  .toefl-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  /* That same older rule's `margin-inline: auto var(--space-4)` was also
     wrong - margin-inline only takes inline-start/inline-end, so this set
     start:auto but end:64px, pushing the image off-center rather than
     centering it. Reset to a proper centered margin, and match IELTS's
     mobile visual-weight (max-width:360px) instead of the smaller 280px. */
  .toefl-hero-visual { max-width: 360px; margin: 0 auto; }
  .toefl-hero .hero-title { font-size: clamp(34px, 10vw, 42px); line-height: 1.08; }
  .toefl-hero .hero-desc { font-size: 15px; line-height: 1.65; }
  /* Matches Academic English's existing mobile button treatment so both
     CTAs use the same full-width, stacked system instead of each button
     auto-sizing to its own (differently long) label. */
  .toefl-hero .hero-actions .btn { width: 100%; }
  .toefl-hero-illustration { max-width: 360px; width: 100%; height: auto; }
  /* Same fix as IELTS: a deterministic 2-column grid instead of flex-wrap,
     so 4 badges always land 2x2 instead of occasionally leaving one badge
     alone on its own row with a stray divider in front of it. */
  .toefl-hero-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }
  .toefl-hero-badges .hero-badge {
    justify-content: center;
    padding-left: 0;
  }
  .toefl-hero-badges .hero-badge:not(:first-child)::before { display: none; }

  /* BUG FIX: same as the hero above - the un-media-queried 2-column rule
     up in "13e. TOEFL Page" (1.15fr 0.85fr) kept winning at every width, so
     the content column and laptop mockup never actually stacked; the 4
     skill steps and the description were rendered squeezed into ~58% of
     the page width alongside the mockup instead of using the full width. */
  .toefl-integrated-grid { grid-template-columns: 1fr; }
  .toefl-integrated-steps { flex-wrap: wrap; row-gap: 16px; }
  .toefl-integrated-step { flex: 0 0 45%; }
  /* Laptop mockup: noticeably larger than before now that it has the full
     section width to work with, capped so it doesn't dominate on the
     wider end of "mobile" (e.g. 430px). */
  .toefl-speaking-mockup { max-width: min(75%, 340px); margin-inline: auto; }

  /* BUG FIX: same pattern again - the un-media-queried 3-column
     `.toefl-score-card` rule up in "13e. TOEFL Page" (0.9fr 1.35fr 1fr)
     kept winning here too, so Your Goal / skill breakdown / Focus Areas
     stayed 3-up, squeezed. That's what made the "You're on the right
     track" note render as a narrow, tall box (it lives in the ~0.9fr Your
     Goal column) instead of a normal-width note, and made the whole card
     abnormally tall. Collapsing to 1 column lets it size to its content;
     no separate min-height was set anywhere, so nothing to remove there. */
  .toefl-score-card { grid-template-columns: 1fr; }

  body:has(.toefl-hero) .ielts-testimonial-grid { grid-template-columns: 1fr; }

  body:has(.toefl-hero) .cta-banner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 32px 24px;
    min-height: 0;
  }
}

/* Ultra-narrow phones (~320px): two-per-row Integrated steps get too tight
   for the icon + all-caps label, so they stack fully at this width only. */
@media (max-width: 340px) {
  .toefl-integrated-step { flex-basis: 100%; }
}

/* =========================================================================
   TOEFL RESPONSIVE POLISH END
   ========================================================================= */

/* ==========================================================================
   22. KART GORUNURLUGU - gorunur kart sayisina gore grid dengesi
   ==========================================================================
   Musteri her kartin ustundeki "Bu karti goster" anahtarindan kartlari tek
   tek kapatabiliyor. Kapatilan kart HTML'e HIC basilmiyor (CSS ile
   gizlenmiyor), dolayisiyla gridde bir cocuk eksiliyor.

   Sorun: bu tasarimdaki gridler sabit sutun sayisi kullaniyor
   (repeat(4, 1fr) gibi). Dort sutunlu bir gridde uc kart kalirsa kartlar
   soldan dizilir ve dorduncu sutun bos kalir - satirin sagi bosluk olur.

   Cozum: sablon her grid kabina gorunur kart sayisini bir sinif olarak
   basiyor (.is-count-1 ... .is-count-5). Asagidaki kurallar bu sinifa
   bakip sutun sayisini gorunur kart sayisina indiriyor.

   TEK KURAL: sutun sayisi ASLA tasarimin o genislikteki sutun sayisindan
   FAZLAYA cikarilmaz, yalnizca azaltilir. Bu yuzden her kural, tasarimin
   zaten daha fazla sutuna sahip oldugu genislik araligi icinde tanimlandi.
   Ornegin ".is-count-3 -> 3 sutun" kurali yalnizca >=1200px'te var; cunku
   992-1199px arasinda bu gridlerin cogu zaten 2 sutuna dusuyor ve 3'e
   cikarmak tasarimi bozardi.

   Mobilde (<=767px) gridler zaten tek sutun oldugu icin kural yok; tek
   istisna .toefl-gain-grid, o mobilde iki sutun kullaniyor.

   Secici ozgullugu (specificity) notu: bazi gridlerin daha ozgul kurallari
   var (#why-ielts ... ve body:has(.academic-hero) ...). O gridler icin ayni
   onekler burada da tekrarlandi; yoksa 0-2-0 ozgullugundeki
   .grid.is-count-N kurallari onlari ezemezdi.
   ========================================================================== */

/* --- Tek kart kaldi: satiri bastan sona kaplamasin, ortalansin --- */
@media (min-width: 768px) {
  .programs-grid.is-count-1,
  .why-us-grid.is-count-1,
  #why-ielts .why-us-grid.is-count-1,
  .journey-track.is-count-1,
  .about-highlights-grid.is-count-1,
  .ielts-accelerator-grid.is-count-1,
  .toefl-gain-grid.is-count-1,
  .help-grid.is-count-1,
  body:has(.academic-hero) .help-grid.is-count-1,
  .skills-grid.is-count-1,
  body:has(.academic-hero) .skills-grid.is-count-1 {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
  }

  /* Sertifika kartlari yatay (rozet + metin) oldugu icin biraz daha genis. */
}

/* --- Iki kart: tasarimin 2+ sutunlu oldugu her genislikte iki sutun ---
   768-991px araliginda bu gridlerin cogu zaten iki sutunlu, orada kural
   etkisiz kalir. Fark yarattigi yer .skills-grid: o aralikta uc sutunlu,
   iki kartla ucuncu sutun bos kalirdi. */
@media (min-width: 768px) {
  .programs-grid.is-count-2,
  .why-us-grid.is-count-2,
  #why-ielts .why-us-grid.is-count-2,
  .journey-track.is-count-2,
  .about-highlights-grid.is-count-2,
  .ielts-accelerator-grid.is-count-2,
  .toefl-gain-grid.is-count-2,
  .help-grid.is-count-2,
  body:has(.academic-hero) .help-grid.is-count-2,
  .skills-grid.is-count-2,
  body:has(.academic-hero) .skills-grid.is-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Uc kart: yalnizca tasarimin 4+ sutunlu oldugu genisliklerde --- */
@media (min-width: 1200px) {
  .why-us-grid.is-count-3,
  .journey-track.is-count-3,
  .ielts-accelerator-grid.is-count-3,
  .toefl-gain-grid.is-count-3,
  .skills-grid.is-count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Ana sayfadaki "Neden Ben" ve "Ogrenme Sureci" 992-1199px arasinda da
   dort sutunlu; IELTS'in ayni bileseni kullanan bolumu ise o aralikta iki
   sutuna dusuyor. #why-ielts kurali daha ozgul oldugu icin asagidaki kural
   ona dokunmaz - istenen de budur. */
@media (min-width: 992px) and (max-width: 1199px) {
  .why-us-grid.is-count-3,
  .journey-track.is-count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Dort ve bes kart: yalnizca alti sutunlu Academic beceri gridi --- */
@media (min-width: 1200px) {
  .skills-grid.is-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .skills-grid.is-count-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- TOEFL kazanim gridi mobilde iki sutunlu: tek kart kalirsa yarim
       genislikte asili kalmasin --- */
@media (max-width: 767px) {
  .toefl-gain-grid.is-count-1 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   22b. Kart gizlendiginde yanlis ogeye uygulanan konum kurallari
   ==========================================================================
   Asagidakilerin hepsi ayni sebepten kaynaklaniyor: tasarim, kart sayisinin
   SABIT oldugu varsayimiyla :last-child / :nth-child() kullaniyordu. Sayi
   degisebilir hale gelince bu kurallar yanlis karta uygulanmaya basliyor.
   ========================================================================== */

/* Sertifikalarda dikey ayrac ikinci karta ciziliyor (:last-child). Tek
   sertifika kaldiginda o kart ayni zamanda ilk kart oldugu icin ayrac tek
   basina duran kartin soluna dusuyordu. */

/* Tablette iki sutunlu gridlerde "son kart tek basina kalirsa iki sutuna
   yay ve ortala" kurali var (Bolum 16 ve 19). Bu yalnizca kart sayisi TEK
   oldugunda dogru. Bir kart gizlenip sayi cifte dustugunde son kart iki
   sutunu kaplamamali; tek kart kaldiginda ise ustteki .is-count-1 kurali
   zaten tek sutunlu bir grid kuruyor ve kart orada yarim genislige
   kirpilmamali. */
@media (min-width: 768px) and (max-width: 991px) {
  .about-highlights-grid .about-card:last-child:nth-child(even),
  .about-highlights-grid .about-card:only-child {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }

  body:has(.academic-hero) .help-grid .help-card:last-child:nth-child(even),
  body:has(.academic-hero) .help-grid .help-card:only-child {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }
}

/* Ogrenme Sureci bolumundeki kesik cizgi, dort esit sutun varsayimiyla
   %12.5 iceriden basliyordu (ilk ve son sutunun orta noktasi). Sutun sayisi
   degisince baslangic/bitis noktasi da degismeli, yoksa cizgi ilk kartin
   ortasindan degil disindan baslar. Tek kart kaldiginda baglanacak bir sey
   olmadigi icin cizgi tamamen kalkar. */
.journey-track.is-count-3::before { left: 16.66%; right: 16.66%; }
.journey-track.is-count-2::before { left: 25%; right: 25%; }
.journey-track.is-count-1::before { display: none; }

/* --------------------------------------------------------------------------
   22c. Flex tabanli adim siralarinda tek adim kalmasi
   --------------------------------------------------------------------------
   Ok isaretli adim siralari grid degil flex: her adim "flex: 1" ile esit pay
   alir, aralarindaki oklar ise sablonda uretilir. Iki, uc ya da dort adimda
   bu kendiliginde dengeli durur ve ayri bir kurala gerek kalmaz.

   Tek istisna tek adim kalmasi: geriye tek bir "flex: 1" cocuk kaldiginda o
   cocuk satirin tamamini kaplar ve kisa bir baslik 1100px genisliginde bos
   bir seride asili kalir. Tek adim kaldiginda ok da uretilmedigi icin adim
   gercekten tek cocuktur; :only-child tam olarak bu durumu yakalar ve
   sablon tarafinda ek bir sinifa ihtiyac birakmaz.

   Mobilde bu siralar zaten alt alta diziliyor ve tam genislik dogru davranis
   oldugu icin kural yalnizca >=768px'te gecerli. */
@media (min-width: 768px) {
  .academic-journey-track .academic-journey-step:only-of-type,
  .toefl-integrated-steps .toefl-integrated-step:only-of-type,
  .academic-lab-process .academic-lab-step:only-of-type {
    flex: 0 1 auto;
    max-width: 420px;
    margin-inline: auto;
  }

  /* Bu adim yatay bir kart (ikon + metin yan yana), digerleri gibi dar bir
     sutun degil; biraz daha genis bir sinir daha dogal duruyor. */
  .contact-next-track .contact-next-step:only-of-type {
    flex: 0 1 auto;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   22d. Academic English sayfasi - mobilde 2x2'ye donen adim siralari
   --------------------------------------------------------------------------
   Bu iki sira digerlerinden farkli davraniyor: <=767px'te flex olmaktan
   cikip 2x2 GRID'e geciyorlar (bkz. "Responsive - Academic English",
   dort adimi tek tek alt alta dizmek yerine iki satira sigdirmak icin).

   Kart sayisi sabit dortken bu tam olarak doluyordu. Adimlar tek tek
   kapatilabilir olunca ikisi problemli hale geliyor:
     - tek adim kalirsa yaninda bos bir sutun kaliyor,
     - uc adim kalirsa ucuncusu ikinci satirda solda tek basina asili
       kaliyor.
   Temanin tablette zaten kullandigi cozumun aynisi uygulaniyor: oksuz
   kalan son karti iki sutuna yayip ortalamak.

   DIKKAT - burada :nth-child() DEGIL :nth-of-type() kullaniliyor. Adimlarin
   arasindaki ok isaretleri bu genislikte display:none olsa da DOM'da kardes
   olarak duruyorlar; :nth-child() onlari da saydigi icin dort adimli (dort
   div + uc span = yedi kardes) varsayilan durumda son adim "tek" siraya
   dusuyor ve kural yanlislikla devreye giriyordu. Adimlar div, oklar span
   oldugu icin :nth-of-type() yalnizca adimlari sayar. */
@media (max-width: 767px) {
  body:has(.academic-hero) .academic-lab-process > .academic-lab-step:only-of-type,
  body:has(.academic-hero) .academic-journey-track > .academic-journey-step:only-of-type {
    grid-column: 1 / -1;
  }

  body:has(.academic-hero) .academic-lab-process > .academic-lab-step:last-of-type:nth-of-type(odd):not(:only-of-type),
  body:has(.academic-hero) .academic-journey-track > .academic-journey-step:last-of-type:nth-of-type(odd):not(:only-of-type) {
    grid-column: 1 / -1;
    max-width: calc(50% - 10px);
    margin-inline: auto;
  }
}

/* Academic beceri gridi 768-1199px arasinda uc sutunlu. Dort kart kalirsa
   3+1 olur ve ikinci satirda tek kart solda asili kalir; iki sutuna
   dusurmek 2+2 vererek dengeli bir dizilim uretir. Sutun sayisi yine
   yalnizca AZALTILIYOR, tasarimin uzerine cikilmiyor. */
@media (min-width: 768px) and (max-width: 1199px) {
  .skills-grid.is-count-4,
  body:has(.academic-hero) .skills-grid.is-count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   22f. "Iki oge yan yana" duzenine dusen siralarda eksik oge
   --------------------------------------------------------------------------
   Bu iki sira dar ekranlarda adimlari "flex: 0 0 45%" ile iki sutuna
   yayiyor. Adim sayisi sabit dortken bu tam iki satir doluyordu; adimlar
   kapatilabilir olunca tek ya da uc adimda son satirdaki oge solda asili
   kaliyor ve satirin sagi bosluk olarak goze carpiyor.

   Kurallar yalnizca tasarimin tam sayisindan AZ oge kaldiginda devreye
   giriyor (.is-count-4 hedeflenmiyor), boylece hicbir kart kapatilmamis
   sitenin gorunumu bugunku haliyle birebir ayni kaliyor. */

/* TOEFL "Integrated Skills": <=767px'te iki sutunlu. */
@media (max-width: 767px) {
  .toefl-integrated-steps.is-count-1,
  .toefl-integrated-steps.is-count-2,
  .toefl-integrated-steps.is-count-3 { justify-content: center; }
}

/* Academic "Your Academic Journey": 768-991px arasinda iki sutunlu. */
@media (min-width: 768px) and (max-width: 991px) {
  .academic-journey-track.is-count-1,
  .academic-journey-track.is-count-2,
  .academic-journey-track.is-count-3 { justify-content: center; }
}

/* Academic "Writing Lab" surec siralari da ayni bilesen ailesinden;
   dar ekranda sarmaladiklarinda ayni davranisi gostersinler. */
@media (max-width: 991px) {
  .academic-lab-process.is-count-1,
  .academic-lab-process.is-count-2,
  .academic-lab-process.is-count-3 { justify-content: center; }
}

/* ==========================================================================
   23. GERCEK BLOG: makale sayfasi, kategori arsivi, degisken kart sayisi
   ==========================================================================
   Blog artik tamamen WordPress Yazilar + Kategoriler uzerinden calisiyor;
   ornek/uydurma kart sistemi kaldirildi. Bu bolum uc seyi kapsiyor:
     23a. Tek makale sayfasi (single.php) ve blok editoru icerigi
     23b. Kategori arsivi (category.php) ve sayfalama
     23c. Kart sayisi degisken hale geldigi icin grid dengesi
   ========================================================================== */

/* ---- 23a. Tek makale sayfasi ---- */

.article-single { position: relative; padding-bottom: var(--space-5); }

/* Okuma icin rahat satir uzunlugu: ~70 karakter. Kapsayici .container'in
   genis olcusunu ezmek yerine makaleye ozel dar bir kap kullaniliyor,
   boylece sitenin diger bolumlerindeki .container davranisi degismiyor. */
.article-container { max-width: 760px; }

.article-head { padding-block: var(--space-5) var(--space-3); }
.article-eyebrow { margin-bottom: var(--space-2); }
.article-eyebrow a { color: var(--color-cream-accent); }
.article-eyebrow a:hover { text-decoration: underline; }

/* Baslik daha once tarayici varsayilanindaydi (32px, hicbir tema kuralina
   bagli degildi). Hero basliklarinin altinda ama bolum basliklarinin
   uzerinde bir olcek: makale sayfasinin en buyuk ogesi o olmali. */
.article-title {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}

.article-meta {
  color: var(--color-gray-text);
  font-size: 14px;
  margin-bottom: 0;
}

/* Blog listesine donus bagi.
   Bir sticky ogenin ekranda kalabildigi mesafe DOGRUDAN ust kabinin
   yuksekligiyle sinirlidir - .article-back-row normal akista sadece
   kendi icerigi kadar (~100px) yer kaplasaydi, .article-back neredeyse
   hic "yapismadan" hemen kayip giderdi. Bu yuzden .article-back-row
   position:absolute; inset:0 ile .article-single'in (govde+CTA dahil
   TUM yazi) tam yuksekligine geriliyor - boylece .article-back, yazi
   bitene kadar (ve footer'a varmadan once, cunku .article-single orada
   sona eriyor) ekranda kalabiliyor. pointer-events:none/auto ikilisi,
   bu artik tüm yazinin ustunu kaplayan görünmez katmanin altındaki
   metni/gorseli tiklanabilir/secilebilir birakiyor - sadece bagin
   kendisi tiklanabilir.
   Row, basligin durdugu .article-container ile AYNI
   ".container.article-container" hizalamasini paylasiyor (bkz. single.php)
   - boylece hicbir ek hesaplama yapmadan basligin sol kenariyla hizali
   kalir. Genislik olarak inline-flex/fit-content oldugu icin bag,
   makale kolonunun genisligini hic etkilemez.
   Buyuk masaustunde (>=1240px, asagidaki media query) satir tam genislige
   cikar ve bag hesaplanmis bir margin + translateX ile 760px'lik kolonun
   SOLUNA, bosluga cekilir - "primary CTA" degil, sade bir yardimci
   navigasyon gorunumu icin arka plan yalnizca hover'da beliriyor. */
.article-back-row {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Matches .article-head's own top padding so the link's initial
     (pre-scroll) position lines up with where it always sat. */
  padding-top: var(--space-5);
}
.article-back {
  position: sticky;
  top: 100px;
  z-index: 5;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-gray-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.article-back:hover,
.article-back:focus-visible {
  color: var(--color-navy);
  background-color: var(--color-cream-soft);
}
.article-back-arrow {
  display: inline-flex;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.article-back:hover .article-back-arrow,
.article-back:focus-visible .article-back-arrow { transform: translateX(-3px); }

/* Tablet ve dar masaustu (768px+): oncekinden biraz daha buyuk yazi,
   ikon ve tiklanabilir alan - ama hala kucuk bir yardimci bag, buton
   degil. 760px'lik kolonun solunda gercek bir bosluk (gutter) olusmasi
   icin gereken en az ~450px fazladan genislik burada henuz yok (768px
   genislikte kolonun kendisi ekranin neredeyse tamamini kapliyor), o
   yuzden bu aralikta bag hala basligin USTUNDE durur - ama artik sticky
   ve daha buyuk. */
@media (min-width: 768px) {
  .article-back {
    font-size: 15px;
    padding: 10px 16px;
    gap: 10px;
  }
  .article-back-arrow { font-size: 18px; }
}

/* Genis masaustu (>=1240px): 760px'lik okuma kolonunun disinda gercekten
   kullanilabilir bir sol bosluk olustugu ilk nokta budur (kolon + iki
   yanindaki bosluk + bagin kendi genisligi guvenle sigar). .article-back-row
   tam genislige cikar, bag ise hesaplanmis bir margin-left + translateX(-100%)
   ile satirin en solundan kolonun HEMEN soluna, 16px bosluk birakarak
   cekilir. 760/2=380 buradaki sabit deger .article-container'in max-width
   degeriyle (style.css, ".article-container") eslesir; o deger degisirse
   burasi da guncellenmelidir. */
@media (min-width: 1240px) {
  .article-back-row { max-width: none; padding-inline: 0; }
  .article-back {
    margin-left: calc(50% - 380px - 16px);
    transform: translateX(-100%);
  }
}

/* One cikan gorsel.
   Mobil (temel kural): blok halinde, tam genislikte ama kompakt - serbest
   yukseklik yerine 16/10 orani, boylece portre bir gorsel ekranin tamamini
   kaplamiyor. Genis ekranlarda asagida saga yaslaniyor. */
.article-figure {
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-cream-icon-bg);
}
.article-figure img { width: 100%; height: auto; display: block; }

@media (max-width: 767px) {
  .article-figure { aspect-ratio: 16 / 10; }
  .article-figure img { height: 100%; object-fit: cover; }
}

/* Tablet ve ustu: gorsel saga yaslanir, metin yanindan akar ve gorsel
   bittiginde altindan devam eder.
   Onceden gorsel kendi tam genislikteki kabinda, basligin hemen altinda
   duruyordu: 760px'lik kolonu bastan sona kaplayip yazinin ilk satirini
   ekranin cok asagisina itiyor, sayfanin en baskin ogesi oluyordu.
   Simdi kolonun yaklasik %40'ini kapliyor ve okuma akisinin yaninda
   ikincil bir oge olarak duruyor. */
@media (min-width: 768px) {
  .article-figure {
    float: right;
    width: 40%;
    max-width: 320px;
    margin: 4px 0 var(--space-3) var(--space-4);
  }
}

/* ---- Blok editoru (Gutenberg) icerigi ----
   Global reset yazi icerigi icin yazilmamisti: `ul { list-style: none }`
   madde isaretlerini siliyor, `a { color: inherit; text-decoration: none }`
   ise yazi icindeki linkleri duz metinden ayirt edilemez hale getiriyordu.
   Basliklarin font-size'i hic tanimli olmadigi icin H1/H2/H3 tarayici
   varsayilanina (2em/1.5em/1.17em) dusuyordu.

   Asagidaki kurallarin tamami .article-content altina KAPSANMISTIR;
   global reset'e ve sitenin diger bolumlerine dokunulmaz. */

/* Gorsel float oldugu icin kabinin onu icermesi gerekiyor; flow-root
   bunu overflow:hidden gibi yan etkileri olmadan yapar. */
.article-body { display: flow-root; margin-top: var(--space-2); }

/* Metin gorselle ayni hizada baslasin diye ust bosluk gorsele birakildi;
   gorseli olmayan yazida araligi .article-body'nin margin'i saglar. */
.article-content { margin-top: 0; }

.article-content > *:first-child { margin-top: 0; }
.article-content > *:last-child { margin-bottom: 0; }

/* Float'in yaninda akmasi gereken tek sey METIN. Arka plani, kenarligi ya
   da madde isareti olan blok ogeler kendi kutulariyla gorselin ALTINA
   uzanirsa ustuste binmis gorunurler; kendi blok bicimlendirme baglamlarini
   kurunca gorselin yanina yerlesip dogru genisligi alirlar. */
.article-content > ul,
.article-content > ol,
.article-content > blockquote,
.article-content > pre,
.article-content > table,
.article-content > figure { display: flow-root; }

.article-content p {
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 var(--space-3);
  color: var(--color-navy);
}

.article-content h2,
.article-content h3,
.article-content h4 {
  color: var(--color-navy);
  line-height: 1.3;
}
.article-content h2 { font-size: clamp(24px, 2.6vw, 30px); margin: var(--space-5) 0 var(--space-2); }
.article-content h3 { font-size: clamp(20px, 2.1vw, 24px); margin: var(--space-4) 0 var(--space-2); }
.article-content h4 { font-size: 18px; margin: var(--space-3) 0 var(--space-1); }

/* Madde isaretleri geri geliyor. Reset'in `list-style:none; padding:0`
   kurali yalnizca bu alanda geri aliniyor; ol/ul ayni girintiyi paylasir,
   boylece ayni yazidaki iki liste artik farkli hizalanmiyor. */
.article-content ul,
.article-content ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.5em;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content ul ul { list-style: circle; }
.article-content li {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 6px;
}
.article-content li::marker { color: var(--color-cream-accent); }
.article-content li > ul,
.article-content li > ol { margin-top: 6px; margin-bottom: 0; }

/* Yazi icindeki link artik metinden ayirt edilebiliyor: vurgu rengi ve
   alti cizili. Kart/menu linkleri bu kapsamin disinda oldugu icin
   etkilenmez. */
.article-content a {
  color: var(--color-cream-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-content a:hover { color: var(--color-navy); }

.article-content strong { font-weight: 700; }
.article-content em { font-style: italic; }

.article-content blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-cream-accent);
  background: var(--color-cream-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.article-content blockquote p {
  font-family: var(--font-heading);
  font-size: 18px;
  font-style: italic;
  margin-bottom: 0;
}
.article-content blockquote cite { font-size: 14px; color: var(--color-gray-text); font-style: normal; }

/* Gorseller kabi tasmaz; blok editorunun figure sarmalayicisi
   tarayici varsayilani olan 40px yan bosluktan kurtariliyor. */
.article-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.article-content figure { margin: var(--space-4) 0; }
.article-content figure img { width: 100%; }
.article-content figcaption,
.article-content .wp-element-caption {
  font-size: 13.5px;
  color: var(--color-gray-text);
  text-align: center;
  margin-top: var(--space-1);
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}
.article-content th,
.article-content td {
  border: 1px solid var(--color-border);
  padding: 10px 12px;
  text-align: left;
}
.article-content th { background: var(--color-cream-soft); font-weight: 600; }

.article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-cream-soft);
  padding: 2px 6px;
  border-radius: 4px;
}
.article-content pre {
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-3) 0;
}
.article-content pre code { background: none; color: inherit; padding: 0; }

.article-content hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

/* Blok editorunun genis/tam genislik hizalamalari. align-wide destegi
   functions.php'de aciktir ama karsiligi tanimli degildi. */
.article-content .alignwide { width: 100%; }
.article-content .alignfull { width: 100%; }
.article-content .aligncenter { margin-inline: auto; }

/* CTA ve sayfa baglantilari gorselin yanina sikismasin: float ne kadar
   uzun olursa olsun bunlar altindan tam genislikte baslar. */
.article-cta { margin-top: var(--space-5); clear: both; }
/* Bu bandin metni tek satirlik degil, dar kapta sarmasi gerekiyor. */
.article-cta .cta-banner-content p { white-space: normal; }

.article-pagelinks { margin-top: var(--space-3); font-weight: 600; clear: both; }
.article-pagelinks a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- 23b. Kategori arsivi ve sayfalama ---- */

.archive-head { padding-block: var(--space-5) var(--space-3); }
.archive-title { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; margin-bottom: var(--space-2); }
.archive-description { color: var(--color-gray-text); max-width: 60ch; margin-bottom: 0; }
/* "All Articles" sayfasinda giris metni sayfanin kendi icerigidir, yani
   birden fazla paragraf olabilir; son paragrafin alt marji basligin
   altindaki bolum bosluguna eklenmesin. */
.archive-description > :last-child { margin-bottom: 0; }
.archive-empty { color: var(--color-gray-text); }

/* Arsiv kartinda sira: gorsel, kategori, baslik, TARIH, ozet, "Read More".
   Blog ana sayfasindaki vitrinde tarih kartin son ogesi oldugu icin satir
   ici birakilmisti; burada araya girdigi icin kendi satirina aliniyor. */
.article-archive-grid .blog-article-meta { display: block; margin-bottom: 8px; }
.article-archive-grid .resource-card h3 { margin-bottom: 6px; }
.article-archive-grid .resource-card p { margin-bottom: var(--space-2); }

/* WordPress'in urettigi sayfalama hic stillenmemisti: baglantilar cizgisiz
   ve bosluksuz yan yana duruyordu. */
.pagination { margin-top: var(--space-4); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  background: var(--color-white);
}
.pagination .page-numbers:hover { border-color: var(--color-cream-accent); }
.pagination .page-numbers.current {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}
.pagination .page-numbers.dots { border: 0; background: none; }

/* WordPress sayfalama/menu bileşenleri gorunmez olmasi gereken baslıklar
   uretir ("Posts navigation"). Temada .screen-reader-text tanimli olmadigi
   icin bu metinler ekranda duz yazi olarak gorunuyordu. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

/* ---- 23c. Kart sayisi degisken oldugu icin grid dengesi ----
   Kartlar artik gercek yazi/kategori sayisina gore basiliyor, yani bir
   gridde tasarimin sutun sayisindan az kart olabiliyor. Bolum 22'deki
   kural burada da gecerli: sutun sayisi yalnizca AZALTILIR, tasarimin o
   genislikteki degerinin uzerine cikilmaz. */

/* Latest Articles: >=1200px'te 4, 768-1199px'te 2, mobilde 1 sutun. */
@media (min-width: 1200px) {
  .blog-articles-grid.is-count-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .blog-articles-grid.is-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-articles-grid.is-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .blog-articles-grid.is-count-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
}

/* Home Resources: >=992px'te 3, 768-991px'te 2, mobilde 1 sutun. */
@media (min-width: 992px) {
  .resources-grid.is-count-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .resources-grid.is-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991px) {
  .resources-grid.is-count-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
}

/* Browse by Category: >=1200px'te 6, 768-1199px'te 3, <=767px'te 2 sutun.
   Bolum 22'deki .skills-grid.is-count-N kurallari 0-2-0 ozgullugunde;
   #categories kurallari (1-1-0) onlari eziyor, bu yuzden ayni onekle
   tekrar tanimlaniyorlar. */
@media (min-width: 768px) and (max-width: 1199px) {
  #categories .skills-grid.is-count-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
  #categories .skills-grid.is-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #categories .skills-grid.is-count-1 { grid-template-columns: minmax(0, 320px); justify-content: center; }
}

/* One cikan yazi yokken: bolum sabit yuksekligini birakir ve yandaki
   "About the Blog" karti tek sutunda tum genisligi alir. Sabit yukseklik
   iki kartin birbirine hizalanmasi icindi; tek kart kalinca o yukseklik
   kartin icini bosluga bogardi. */
.blog-featured-section.has-no-featured { height: auto; min-height: 0; max-height: none; overflow: visible; }
.blog-featured-section.has-no-featured .blog-featured-grid { grid-template-columns: 1fr; height: auto; }
.blog-featured-section.has-no-featured .blog-sidebar-card { height: auto; overflow-y: visible; }

/* =========================================================================
   24. PROGRAM HERO SYSTEM - IELTS / TOEFL / Academic English
   =========================================================================
   Scope: the hero section of the three program pages, plus two site-wide
   translation-safety guards at the very end (header nav, Home hero grid).
   About, Contact and Blog heroes are not selected anywhere in this block,
   and nothing below the hero on any page is touched.

   Why this block exists: the three program heroes were built one page at a
   time, so values that were meant to read as one system had drifted apart -
   section height (820 / 760 / 800px), grid gap (56 / 48 / 56px), container
   padding (24 / 24 / 32px), eyebrow tracking, the title -> paragraph gap,
   button padding, the badge type scale, and above all the image's sizing
   model. Academic English is the agreed reference, so every value below is
   Academic English's own current value and the other two pages are moved
   onto it. Academic English's rendering is therefore intentionally
   unchanged; IELTS and TOEFL are what move.

   SPECIFICITY NOTE - why every selector carries a `body:has()` prefix:
   the Academic English polish block earlier in this file already uses
   `body:has(.academic-hero) ...`, which outranks a plain class selector no
   matter how late in the file it appears. Matching that prefix here is the
   only reliable way to win. The prefix carries no meaning of its own -
   `.ielts-hero-grid` only ever exists on the IELTS page anyway - it is
   purely a specificity lever, so read these as plain class rules.

   To revert: delete everything between this line and "PROGRAM HERO SYSTEM
   END" at the bottom of the file, or `git revert` the commit that
   introduced it.
   ========================================================================= */

/* ---- 1. Hero shell: one height system, one overflow policy --------------
   Home and Academic English both resolve to clamp(560px, 100vh - 81px,
   800px). IELTS capped at 900px and TOEFL at 760px, and both subtracted an
   80px header instead of the real 81px, so the three heroes ended up 60px
   apart on the same screen. One clamp for all three.

   The clamp is applied as a MIN-height, not a height. All three heroes
   used a fixed height, which only works while the content happens to fit:
   on a short window (e.g. 1000x620) the clamp bottoms out at its 560px
   floor while the hero content is ~570px tall, and `overflow: hidden`
   silently eats the difference. As a minimum it produces exactly the same
   box whenever the content fits - which is the normal case, and why
   Academic English's desktop rendering is unchanged - and simply grows
   instead of clipping when it does not.

   `height: auto; max-height: none` are needed because the shared base rule
   in "4. Hero" sets height/min-height:560px/max-height:800px, and CSS
   resolves a min/max conflict in favour of min-height, so leaving them in
   place would re-clamp the result a second time. */
body:has(.ielts-hero) .ielts-hero,
body:has(.toefl-hero) .toefl-hero,
body:has(.academic-hero) .academic-hero {
  height: auto;
  min-height: clamp(560px, calc(100vh - 81px), 800px);
  max-height: none;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 0;
}
/* The WordPress admin bar is only ever visible to a logged-in editor, but
   the shared base rule accounts for it, so this one has to as well - it is
   more specific than the rule above and would otherwise reinstate the
   base rule's fixed calc() height. */
body.admin-bar:has(.ielts-hero) .ielts-hero,
body.admin-bar:has(.toefl-hero) .toefl-hero,
body.admin-bar:has(.academic-hero) .academic-hero {
  height: auto;
  min-height: clamp(560px, calc(100vh - 81px - 32px), 800px);
}

/* BUG FIX - hero content was being clipped / spilling below 992px.
   Every tablet and mobile rule for these three heroes set `height: auto`
   but none of them reset the base rule's `max-height: 800px` or its
   `overflow: hidden`. Measured before this fix, in a 900px-tall window:
     - Academic English clipped its own content at 375px (-38px), 390px
       (-33px), 414px (-20px) and 768/820px (-61px); the bottom of the
       badge row was simply cut off by overflow:hidden.
     - TOEFL kept a fixed 760px height at 768/820px while its content was
       847px tall, and its tablet rule had switched overflow to `visible`,
       so 87px of hero content rendered on top of the next section.
   Below 992px the hero must size to its content, full stop - no viewport
   floor at all, since a stacked hero is naturally taller than one. */
@media (max-width: 991px) {
  body:has(.ielts-hero) .ielts-hero,
  body:has(.toefl-hero) .toefl-hero,
  body:has(.academic-hero) .academic-hero,
  body.admin-bar:has(.ielts-hero) .ielts-hero,
  body.admin-bar:has(.toefl-hero) .toefl-hero,
  body.admin-bar:has(.academic-hero) .academic-hero {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding-block: 64px;
  }
}
@media (max-width: 767px) {
  body:has(.ielts-hero) .ielts-hero,
  body:has(.toefl-hero) .toefl-hero,
  body:has(.academic-hero) .academic-hero,
  body.admin-bar:has(.ielts-hero) .ielts-hero,
  body.admin-bar:has(.toefl-hero) .toefl-hero,
  body.admin-bar:has(.academic-hero) .academic-hero {
    padding-block: var(--space-4) var(--space-3);
  }
}

/* ---- 2. Container: same width and same gutters on all three ---- */
body:has(.ielts-hero) .ielts-hero .container,
body:has(.toefl-hero) .toefl-hero .container,
body:has(.academic-hero) .academic-hero .container {
  max-width: 1280px;
  padding-inline: 32px;
}
@media (max-width: 991px) {
  body:has(.ielts-hero) .ielts-hero .container,
  body:has(.toefl-hero) .toefl-hero .container,
  body:has(.academic-hero) .academic-hero .container { padding-inline: 24px; }
}
@media (max-width: 767px) {
  body:has(.ielts-hero) .ielts-hero .container,
  body:has(.toefl-hero) .toefl-hero .container,
  body:has(.academic-hero) .academic-hero .container { padding-inline: 16px; }
}

/* ---- 3. Grid: one split, one gap, and a translation-safety guard -------
   TRANSLATION SAFETY: a grid item's automatic minimum size is its
   min-content width, which for the hero text column is driven by the
   badge row and the longest unbreakable run of text. That let the text
   column grow past its fr share whenever the copy got longer, and it took
   the extra width straight out of the image column. Measured before this
   fix at 992px: the IELTS text column rendered 495px wide against a 424px
   fr share in English and 468px in Turkish - so the hero image was 397px
   on the English page, 424px on the Turkish one and 490px on Academic
   English, all at the same viewport width. `minmax(0, ...)` on the tracks
   plus `min-width: 0` on the items makes the fr split authoritative, so
   the columns are identical in every language. */
body:has(.ielts-hero) .ielts-hero-grid,
body:has(.toefl-hero) .toefl-hero-grid,
body:has(.academic-hero) .academic-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.90fr) minmax(0, 1.10fr);
  gap: 56px;
  align-items: center;
  height: auto;
  width: 100%;
}
body:has(.ielts-hero) .ielts-hero-grid > *,
body:has(.toefl-hero) .toefl-hero-grid > *,
body:has(.academic-hero) .academic-hero-grid > * { min-width: 0; }

@media (min-width: 992px) and (max-width: 1199px) {
  body:has(.ielts-hero) .ielts-hero-grid,
  body:has(.toefl-hero) .toefl-hero-grid,
  body:has(.academic-hero) .academic-hero-grid { gap: 38px; }
}
@media (max-width: 991px) {
  body:has(.ielts-hero) .ielts-hero-grid,
  body:has(.toefl-hero) .toefl-hero-grid,
  body:has(.academic-hero) .academic-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    text-align: center;
  }
}
@media (max-width: 767px) {
  body:has(.ielts-hero) .ielts-hero-grid,
  body:has(.toefl-hero) .toefl-hero-grid,
  body:has(.academic-hero) .academic-hero-grid { gap: 32px; }
}

/* ---- 4. Hero content typography ----------------------------------------
   Values are Academic English's. IELTS and TOEFL previously used 0.07em
   eyebrow tracking against 0.08em, an 18px title -> paragraph gap against
   Academic English's 16px + 20px, and no paragraph top margin at all.

   text-wrap: balance / pretty are the translation guard for the copy
   itself: Turkish headings are longer than their English source and were
   breaking into a long line followed by a one-word orphan. Both properties
   degrade to normal wrapping on browsers that do not support them. */
body:has(.ielts-hero) .ielts-hero .hero-eyebrow,
body:has(.toefl-hero) .toefl-hero .hero-eyebrow,
body:has(.academic-hero) .academic-hero .hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
body:has(.ielts-hero) .ielts-hero .hero-title,
body:has(.toefl-hero) .toefl-hero .hero-title,
body:has(.academic-hero) .academic-hero .hero-title {
  font-size: clamp(44px, 4vw, 62px);
  line-height: 1.05;
  max-width: 600px;
  margin-bottom: 16px;
  text-wrap: balance;
}
body:has(.ielts-hero) .ielts-hero .hero-desc,
body:has(.toefl-hero) .toefl-hero .hero-desc,
body:has(.academic-hero) .academic-hero .hero-desc {
  font-size: 16px;
  line-height: 1.7;
  max-width: 540px;
  margin-top: 20px;
  text-wrap: pretty;
}
@media (min-width: 992px) and (max-width: 1199px) {
  body:has(.ielts-hero) .ielts-hero .hero-title,
  body:has(.toefl-hero) .toefl-hero .hero-title,
  body:has(.academic-hero) .academic-hero .hero-title { font-size: clamp(44px, 4vw, 50px); }
}
@media (min-width: 768px) and (max-width: 991px) {
  body:has(.ielts-hero) .ielts-hero .hero-title,
  body:has(.toefl-hero) .toefl-hero .hero-title,
  body:has(.academic-hero) .academic-hero .hero-title { font-size: clamp(42px, 5vw, 46px); }
}
@media (max-width: 767px) {
  body:has(.ielts-hero) .ielts-hero .hero-title,
  body:has(.toefl-hero) .toefl-hero .hero-title,
  body:has(.academic-hero) .academic-hero .hero-title {
    font-size: clamp(36px, 10vw, 44px);
    line-height: 1.08;
  }
  body:has(.ielts-hero) .ielts-hero .hero-desc,
  body:has(.toefl-hero) .toefl-hero .hero-desc,
  body:has(.academic-hero) .academic-hero .hero-desc { font-size: 15px; }
}
/* Centred layout below 992px: the max-widths above have to be released or
   re-centred, otherwise a capped block sits left of a centred column. */
@media (max-width: 991px) {
  body:has(.ielts-hero) .ielts-hero .hero-title,
  body:has(.toefl-hero) .toefl-hero .hero-title,
  body:has(.academic-hero) .academic-hero .hero-title { max-width: none; }
  body:has(.ielts-hero) .ielts-hero .hero-desc,
  body:has(.toefl-hero) .toefl-hero .hero-desc,
  body:has(.academic-hero) .academic-hero .hero-desc { margin-inline: auto; }
}

/* ---- 5. Call to action buttons ----------------------------------------
   Academic English's 46px minimum / 14px 22px padding, which renders 54px
   tall, against IELTS and TOEFL's 13px 24px, which rendered 52px. */
body:has(.ielts-hero) .ielts-hero .hero-actions,
body:has(.toefl-hero) .toefl-hero .hero-actions,
body:has(.academic-hero) .academic-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
  margin-bottom: 24px;
}
body:has(.ielts-hero) .ielts-hero .hero-actions .btn,
body:has(.toefl-hero) .toefl-hero .hero-actions .btn,
body:has(.academic-hero) .academic-hero .hero-actions .btn {
  min-height: 46px;
  padding: 14px 22px;
  font-size: 14px;
}
@media (max-width: 991px) {
  body:has(.ielts-hero) .ielts-hero .hero-actions,
  body:has(.toefl-hero) .toefl-hero .hero-actions,
  body:has(.academic-hero) .academic-hero .hero-actions { justify-content: center; }
}
/* Below 768px both CTAs go full width and stack, so a longer translated
   label can never overflow its own button or leave the two buttons at
   visibly different widths. */
@media (max-width: 767px) {
  body:has(.ielts-hero) .ielts-hero .hero-actions .btn,
  body:has(.toefl-hero) .toefl-hero .hero-actions .btn,
  body:has(.academic-hero) .academic-hero .hero-actions .btn { width: 100%; }
}

/* ---- 6. Hero badges ----------------------------------------------------
   The shared badge component in "4. Hero" is the system: an 18px icon, a
   14px label, and a 24px gap. Academic English (3 badges) uses it as-is.
   IELTS and TOEFL carry 4 badges, and they had been stepped down to a 13px
   label and a 20px gap with `flex: 1 1 0` to force all four onto one row.
   In a text column that is only ~400-530px wide that leaves roughly 73px
   of text per badge, and the labels broke over two, three and - for
   "One-to-One Expert Guidance" between 992px and 1199px - four lines.

   A real 2-column grid instead, which is the same shape the mobile tier
   already used. Every label gets ~200px and fits on one line in both
   English and Turkish, at the shared 14px scale. */
body:has(.ielts-hero) .ielts-hero-badges,
body:has(.toefl-hero) .toefl-hero-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  align-items: center;
}
body:has(.ielts-hero) .ielts-hero-badges .hero-badge,
body:has(.toefl-hero) .toefl-hero-badges .hero-badge {
  flex: 0 1 auto;
  min-width: 0;
}
body:has(.ielts-hero) .ielts-hero-badges .hero-badge span,
body:has(.toefl-hero) .toefl-hero-badges .hero-badge span {
  font-size: 14px;
  max-width: none;
}
/* The shared vertical divider is drawn before every badge but the first,
   which is only meaningful for a single row: in a 2-column grid the badge
   that starts a row would inherit a rule meant for a horizontal neighbour.
   It is dropped for these two pages - the same thing the mobile tier
   already did - and Home and Academic English, which really are single
   rows, keep it. Dropping it also gives each right-hand cell back the
   24px the rule reserved, which is what puts "Score Improvement" and
   "Band Puani Gelisimi" on one line at 992-1199px instead of two. */
body:has(.ielts-hero) .ielts-hero-badges .hero-badge:not(:first-child),
body:has(.toefl-hero) .toefl-hero-badges .hero-badge:not(:first-child) { padding-left: 0; }
body:has(.ielts-hero) .ielts-hero-badges .hero-badge:not(:first-child)::before,
body:has(.toefl-hero) .toefl-hero-badges .hero-badge:not(:first-child)::before { display: none; }
@media (max-width: 991px) {
  body:has(.ielts-hero) .ielts-hero-badges .hero-badge,
  body:has(.toefl-hero) .toefl-hero-badges .hero-badge { justify-content: center; }
}
/* Academic English's 3 badges stay a single centred wrapping row below
   992px - a 2+1 shape is the balanced one for an odd count - so the
   divider is dropped there for the same reason as above. */
@media (max-width: 991px) {
  body:has(.academic-hero) .academic-hero-badges {
    flex-wrap: wrap;
    row-gap: 12px;
    justify-content: center;
  }
  body:has(.academic-hero) .academic-hero-badges .hero-badge:not(:first-child) { padding-left: 0; }
  body:has(.academic-hero) .academic-hero-badges .hero-badge:not(:first-child)::before { display: none; }
}

/* ---- 7. Hero image: one box, one scaling ladder ------------------------
   All three images are the same kind of flat-lay illustration on a
   transparent background, and they now share a single sizing model:

     - the visual column is a centred flex box with a fixed 3 / 2 ratio,
       so the image occupies the same footprint and the same vertical
       position on all three pages;
     - the image fills that box with object-fit: contain, so whichever way
       a given illustration is proportioned it is centred inside the box
       and never cropped, stretched or pushed off-axis;
     - one max-width ladder (700 / 560 / 520 / 360px) drives every
       breakpoint.

   What this replaces: IELTS sized its photo with no box at all, TOEFL
   additionally carried `max-height: 88%` - a percentage against an
   auto-height flex parent, which silently shrank the TOEFL image to 302px
   inside a 343px column on a 375px phone - and Academic English had been
   converted away from absolute positioning but kept no ratio. The three
   assets were also re-cropped to remove their transparent gutters (see the
   commit message); the ratio box is what makes that crop pay off
   identically on all three pages. */
body:has(.ielts-hero) .ielts-hero-visual,
body:has(.toefl-hero) .toefl-hero-visual,
body:has(.academic-hero) .academic-hero-visual {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 700px;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  aspect-ratio: 3 / 2;
}
body:has(.ielts-hero) .ielts-hero-photo,
body:has(.toefl-hero) .toefl-hero-illustration,
body:has(.academic-hero) .academic-hero-illustration {
  position: static;
  inset: auto;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 24px 45px rgba(1, 30, 64, 0.18));
}
@media (min-width: 992px) and (max-width: 1199px) {
  body:has(.ielts-hero) .ielts-hero-visual,
  body:has(.toefl-hero) .toefl-hero-visual,
  body:has(.academic-hero) .academic-hero-visual { max-width: 560px; }
}
/* Stacked tiers: image first, then the text - the composition IELTS and
   Academic English already used. */
@media (max-width: 991px) {
  body:has(.ielts-hero) .ielts-hero-visual,
  body:has(.toefl-hero) .toefl-hero-visual,
  body:has(.academic-hero) .academic-hero-visual {
    order: -1;
    max-width: 520px;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  body:has(.ielts-hero) .ielts-hero-visual,
  body:has(.toefl-hero) .toefl-hero-visual,
  body:has(.academic-hero) .academic-hero-visual { max-width: 360px; }
}

/* ---- 8. Site-wide translation guards ----------------------------------
   Both of these exist because the site's editable fields are filled in by
   the customer, so any string can become noticeably longer than the
   English default it replaces. Neither changes the English rendering. */

/* Header nav, 992px and up - i.e. wherever the nav is still a horizontal
   row. Just above 992px it has the least room, and the flex row shrinks
   its items before it runs out of space, so with Turkish labels the list
   wrapped INSIDE the items ("Ana / Sayfa", "Akademik / Ingilizce") and the
   nav grew from 26px to 51px tall at 992px, 1010px and 1040px. Ramping the
   gap from 14px at 992px back up
   to the design's 28px by ~1104px buys back the ~60px the longer labels
   need, and `white-space: nowrap` guarantees a label is never broken
   mid-phrase. English is unaffected from ~1104px up, where the gap is
   already back at its 28px design value; the nowrap is limited to the
   horizontal nav so the mobile off-canvas panel keeps normal wrapping. */
@media (min-width: 992px) {
  .site-nav ul { gap: clamp(14px, calc(14px + (100vw - 992px) / 8), 28px); }
  .site-nav a { white-space: nowrap; }
}

/* Home hero: the same min-content guard as the program grids in section 3.
   Home's text column already sits exactly on its fr share in both
   languages, so this changes nothing today - it is here so a longer
   translated heading cannot start stealing width from the photo column,
   which is the one part of the Home hero that must not move. */
.hero-inner > * { min-width: 0; }

/* =========================================================================
   PROGRAM HERO SYSTEM END
   ========================================================================= */

/* =========================================================================
   25. POLISH - SSS akordiyonu, sabit iletisim kisayollari, hero girisi
   =========================================================================
   Uc bagimsiz is bu blokta toplandi. Hicbiri mevcut bir kurali silmiyor;
   blok dosyanin sonunda oldugu icin ayni ozgullukteki eski kurallarin
   uzerine yaziyor.

   Geri almak icin: bu satir ile dosyanin sonundaki "POLISH END" arasini
   silin ya da bu blogu ekleyen commit'i `git revert` edin.
   ========================================================================= */

/* ---- 1. SSS: komsu kartin uzamasi -------------------------------------
   HATA: .academic-faq-grid iki sutunlu bir grid ve hizalamasi varsayilan
   (stretch) durumdaydi. Grid'de bir satirin yuksekligi o satirdaki en uzun
   ogeye gore belirlenir ve butun ogeler o yukseklige gerilir - yani bir
   soru acildiginda YANINDAKI kart da ayni boya uzuyor, altinda bos bir
   alan biraktiyordu. 1440px'te olculdu: birinci soru acilinca ikinci
   kartin yuksekligi 59px'ten 120px'e cikiyordu.

   align-items: start ile her kart kendi icerigi kadar yer kaplar. Grid
   yapisi, sutun sayisi ve bosluklar aynen korunuyor. */
.academic-faq-grid { align-items: start; }

/* ---- 2. SSS akordiyon animasyonu --------------------------------------
   .faq-enhanced sinifini yalnizca main.js ekler. JS calismazsa asagidaki
   kurallarin hicbiri devreye girmez ve <details> bugunku gibi calismaya
   devam eder - yani cevaplar hicbir kosulda gizli kalmaz.

   Yukseklik animasyonu icin alt bosluk da birlikte gecis yapmali: aksi
   halde yukseklik 0'a inerken 16px'lik padding ayakta kalir ve kart
   kapaninca bir seritlik bosluk gorunur. */
.faq-enhanced .academic-faq-answer {
  overflow: hidden;
  height: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    height 300ms cubic-bezier(0.4, 0, 0.2, 1),
    padding-bottom 300ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 220ms ease,
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-enhanced .academic-faq-item.is-open .academic-faq-answer {
  /* height: auto acik durumun DOGRU varsayilanidir. Animasyon boyunca JS
     satir ici bir yukseklik yazar ve satir ici deger bunu zaten ezer; bu
     satir, satir ici yukseklik hic yazilmadigi durumlar icin var - en
     onemlisi "hareketi azalt" acikken, cunku orada JS animasyonu tamamen
     atlar. Bu satir olmadan acik cevap yukaridaki height: 0 ile yalnizca
     16px'lik bosluk kadar gorunuyordu, metin gizli kaliyordu. */
  height: auto;
  opacity: 1;
  transform: none;
  padding-bottom: 16px;
}

/* + isareti acilinca 45 derece donup capraz hale gelir. Bu zaten vardi
   ama [open] niteligine bagliydi; kapanis animasyonu boyunca 'open' bir
   sure daha durdugu icin ikon gec donerdi. Gelistirilmis listede ikon
   .is-open ile birlikte, cevapla ayni anda hareket eder. */
.faq-enhanced .academic-faq-item[open] .academic-faq-toggle { transform: none; }
.faq-enhanced .academic-faq-item.is-open .academic-faq-toggle { transform: rotate(45deg); }
.academic-faq-toggle { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }

/* Klavyeyle gezen ziyaretci hangi sorunun uzerinde oldugunu gormeli.
   Fare ile tiklandiginda cikmaz (:focus-visible), yalnizca klavye/odak
   zincirinde gorunur. */
.academic-faq-item summary:focus-visible {
  outline: 2px solid var(--color-cream-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- 3. Sabit iletisim kisayollari ------------------------------------
   Sag altta, ust uste iki dugme. footer.php'den basildigi icin butun on
   yuz sayfalarinda ayni yerde durur.

   z-index 60: baslik cubugunun (50) ustunde, ama mobil menunun paneli
   (100) ve karartmasi (99) ile toggle'in (101) altinda. Boylece menu
   acikken dugmeler de karartmanin altinda kalir, menunun uzerine
   binmez. */
.floating-contact {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Grup 56 -> 54px (mobilde 48 -> 46). Aradaki bosluk 12px'te birakildi:
   dugmeler kuculurken aralik da kucultulseydi grup topaklanirdi. Renk
   mantigi aynen: WhatsApp yesili, Instagram gradyani, LinkedIn mavisi,
   mesaj laciverdi. */
.floating-contact-btn {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(1, 30, 64, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.floating-contact-btn:hover,
.floating-contact-btn:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 10px 26px rgba(1, 30, 64, 0.3);
}
.floating-contact-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}
.floating-contact-icon { display: flex; }
.floating-contact-icon svg { display: block; }

/* WhatsApp'in kendi marka yesili (#25D366) bilincli olarak temanin
   paletinin disinda: bu dugme tanidik olmali. Diger dugme temanin
   laciverti ile sitenin geri kalanina bagli kalir. */
.floating-contact-whatsapp { background: #25d366; }
.floating-contact-whatsapp:hover,
.floating-contact-whatsapp:focus-visible { background: #1eb455; }
.floating-contact-mail { background: var(--color-navy); }
.floating-contact-mail:hover,
.floating-contact-mail:focus-visible { background: var(--color-navy-dark); }

/* Instagram: markanin kendi gradyani, beyaz glyph.

   YALNIZCA SAG ALTTAKI SABIT DUGMEDE. Bir sure iletisim sayfasindaki
   daire ve footer ikonu da bu gradyani kullaniyordu; sonuc, sitenin
   kendi sade ikon dilinin ortasinda duran iki renkli lekeydi. Sabit
   dugme markalari tanidik gorunmesi gereken tek yer - ziyaretci o koseye
   logo aramaya bakiyor. Icerik icindeki ikonlar ise listenin geri
   kalaniyla ayni kalmali; onlar artik temanin kendi stilini kullaniyor
   (bkz. .contact-info-icon ve .footer-social a).

   Harici gorsel ya da CDN yok - saf CSS, mevcut satir ici SVG ikon
   sistemi oldugu gibi kaliyor.

   Merkez sol-altta: gercek Instagram ikonunda da sari/turuncu uc kosede,
   mor/mavi capraz kosededir. Bes durak da markanin kendi sirasini
   izliyor - sari, turuncu-kirmizi, magenta, mor, mavi.

   RENKLER OLCULEREK SECILDI. Yaygin kullanilan #fdf497/#fd5949 varyanti
   ile beyaz glyph'in altindaki en kotu nokta 2,11:1 cikiyordu; WCAG
   grafik ogeler icin 3:1 istiyor. Duraklar bir tik koyulastirilip merkez
   disari cekilince (22% 120%) turuncu bant glyph'in altindan cikti ve en
   kotu deger 4,38:1'e yukseldi (56px ve 48px dugmede olculdu). */
:root {
  --instagram-gradient: radial-gradient(circle at 22% 120%,
      #f9d976 0%, #f9d976 5%, #e04f45 26%, #c62368 45%, #8a2bab 66%, #4048c8 90%);
}

.floating-contact-instagram {
  background: var(--instagram-gradient);
  color: var(--color-white);
}

/* Hover'da gradyani baska bir gradyanla degistirmek yerine hafifce
   aydinlatiliyor: renk duraklari tek yerde kalir, gecis de puruzsuz
   olur. Olcek ve golge ortak .floating-contact-btn kuralindan gelir,
   yani hover/focus davranisi diger iki dugmeyle ayni. */
.floating-contact-instagram:hover,
.floating-contact-instagram:focus-visible { filter: brightness(1.08); }

/* LinkedIn: markanin kendi mavisi (#0a66c2), beyaz glyph.

   Onceden temanin terracotta tonundaydi. Sag alttaki grup artik kendi
   markalarini tasiyor: WhatsApp yesili, Instagram gradyani, LinkedIn
   mavisi - ziyaretci o koseye logo aramaya bakiyor ve renkler tanimayi
   hizlandiriyor. Mesaj dugmesi temanin laciverti olarak kaliyor; o bir
   marka degil, sitenin kendi eylemi.

   Beyaz glyph burada guvenli: #0a66c2 uzerinde beyaz ~5,3:1 veriyor,
   WCAG'in grafik ogeler icin istedigi 3:1'in rahatca ustunde. (Onceki
   acik terracotta zeminde beyaz 2,5:1'de kaliyordu, bu yuzden orada
   lacivert glyph kullanilmisti.)

   Hover'da bir ton koyu: LinkedIn'in kendi koyu tonu. */
.floating-contact-linkedin { background: #0a66c2; color: var(--color-white); }
.floating-contact-linkedin:hover,
.floating-contact-linkedin:focus-visible { background: #08528f; }

/* Odak halkasi ortak kuraldaki beyaza geri donuyor: renkli gradyan
   uzerinde beyaz halka her tonda ayrisiyor. */

/* Ipucu balonu: dugmenin solunda, uzerine gelince ya da klavyeyle
   odaklaninca acilir. aria-label zaten ismi tasidigi icin balon
   aria-hidden; ekran okuyucuya ayni metin iki kez okunmaz. */
.floating-contact-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(1, 30, 64, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.floating-contact-btn:hover .floating-contact-tip,
.floating-contact-btn:focus-visible .floating-contact-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Mobil: biraz kucuk ve kenara biraz daha yakin, ama parmak icin hala
   rahat (48px). Ipucu balonu dokunmatikte hover olmadigi icin gizlenir -
   aria-label yerinde kaldigi icin erisilebilirlik etkilenmez. */
@media (max-width: 767px) {
  .floating-contact {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .floating-contact-btn { width: 46px; height: 46px; }
  .floating-contact-icon svg { width: 22px; height: 22px; }
  .floating-contact-tip { display: none; }
}

/* Sayfanin en altina inildiginde dugmeler telif satirinin uzerine
   binmemeli. 375px'te olculdu: telif satiri x=5 ile x=370 arasina
   uzaniyor, dugme seridi ise x=311'de basliyor - yani "Privacy Policy"
   linki dugmelerin altinda kaliyordu.

   Ayrilan yer yiginin tam boyu: 48 + 10 + 48 = 106px dugme, arti 16px
   kenar boslugu = 122px. Sayfanin en altina bir nefeslik bosluk eklemis
   oluyoruz; footer'in yerlesimi, hizalamasi, tipografisi ve renkleri
   aynen kaliyor. Yalnizca mobilde gerekli: daha genis ekranlarda ortali
   telif satiri dugme seridine zaten hic yaklasmiyor.

   Secici neden `body .site-footer`: Academic English sayfasinin kendi
   `body:has(.academic-hero) .footer-bottom { padding-block: 16px }`
   kurali (0,2,1) sade bir `.footer-bottom` kuralini ezerdi. */
@media (max-width: 767px) {
  body .site-footer .footer-bottom {
    padding-bottom: calc(122px + env(safe-area-inset-bottom, 0px));
  }
}

/* Formun capasi: baslik cubugu yapiskan oldugu icin capaya atlayinca
   formun ust satiri baslik altinda kalirdi. */
#contact-form { scroll-margin-top: 104px; }

/* ---- 4. Hero gorseli giris animasyonu ---------------------------------
   Yalnizca dort sayfanin hero GORSELI: Ana Sayfa, IELTS, TOEFL, Academic
   English. Hakkimda, Iletisim ve Blog hero'lari secilmiyor. Baslik,
   paragraf, butonlar ve rozetler hic hareket etmiyor.

   Yalnizca opacity ve transform kullaniliyor; ikisi de yerlesimi
   etkilemez, dolayisiyla animasyon layout shift (CLS) uretmez. Kap
   ogenin olculeri (aspect-ratio kutusu ve max-width merdiveni) ilk
   karede de son karede de aynidir.

   opacity: 0 yalnizca keyframe'in icinde; kural setinde degil. Boylece
   animasyon herhangi bir sebeple calismazsa gorsel gorunur kalir. */
@keyframes sariyya-hero-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-visual,
.ielts-hero-visual,
.toefl-hero-visual,
.academic-hero-visual {
  animation: sariyya-hero-enter 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ---- 5. Hareket azaltma -----------------------------------------------
   Isletim sisteminde "hareketi azalt" acikken hero animasyonu hic
   calismaz (gorsel dogrudan son halinde durur), akordiyon aninda acilip
   kapanir ve dugmelerdeki buyume/kayma efektleri kalkar. Renk gecisleri
   hareket icermedigi icin birakildi. */
@media (prefers-reduced-motion: reduce) {
  .hero-visual,
  .ielts-hero-visual,
  .toefl-hero-visual,
  .academic-hero-visual,
  .blog-hero-photo-1,
  .blog-hero-photo-2,
  .blog-hero-photo-3,
  .blog-hero-photo-4 {
    animation: none;
  }

  .faq-enhanced .academic-faq-answer,
  .academic-faq-toggle {
    transition: none;
  }

  .floating-contact-btn,
  .floating-contact-tip {
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
  }
  .floating-contact-btn:hover,
  .floating-contact-btn:focus-visible {
    transform: none;
  }
  .floating-contact-tip { transform: translateY(-50%); }
  .floating-contact-btn:hover .floating-contact-tip,
  .floating-contact-btn:focus-visible .floating-contact-tip {
    transform: translateY(-50%);
  }
}

/* =========================================================================
   POLISH END
   ========================================================================= */

/* =========================================================================
   26. HERO FIT - yukseklik kararliligi ve uzun baslik otomatik kuculmesi
   =========================================================================
   Sorun: ceviri baslıklari kaynak Ingilizceden uzun oluyor. Baslik bir
   satir daha kazandiginda hero ya asagi dogru buyuyor (CTA, rozetler ve
   sonraki bolum kayiyor) ya da - Home'da - sessizce kirpiliyordu.

   Cozum sirasi: ONCE baslik kucultulur, section ancak son care olarak
   buyur. Karar DILE degil, gercek render sonucuna bakilarak verilir:
   satir sayisi ve hero'nun kendi min-height'ini asip asmadigi olculur
   (bkz. assets/js/main.js, sariyyaInitHeroFit). Boylece kural her dilde
   ve her ceviri uzunlugunda ayni sekilde calisir; html[lang] ya da dile
   ozel hicbir secici yoktur.

   HERO GORSELLERINE DOKUNULMAZ: bu bolumde .hero-visual,
   .ielts-hero-photo, .toefl-hero-illustration, .academic-hero-illustration
   ve bunlarin genislik / max-width / aspect-ratio / object-fit /
   object-position degerlerinin hicbiri secilmez.
   ========================================================================= */

/* ---- 1. Home hero kabugu: kirpmak yerine buyusun ----------------------
   Home tek basina `height: calc(100vh - 81px)` + `max-height: 800px` +
   `overflow: hidden` kullaniyordu. Iki komsusu (.contact-hero ve uc program
   hero'su) daha once min-height modeline gecirilmisti ama Home'da
   max-height hicbir breakpoint'te serbest birakilmamisti. Sonuc olculdu:
   768-820px arasinda hero icerigi kutuyu 70px asiyor ve overflow:hidden
   bu farki yiyordu - INGILIZCE icerikte bile.

   Ayni clamp min-height olarak veriliyor: icerik sigdigi surece kutu
   birebir ayni yukseklikte kalir (masaustu gorunumu degismez), sigmadiginda
   kirpmak yerine buyur.

   overflow: hidden KALIYOR: .hero-visual .hero-bg bilincli olarak
   `left: -14%; width: 132%` ile kabinin disina tasar ve yatay kirpmayi
   bu kural sagliyor. Dikeyde ise kutu artik buyudugu icin kirpma olusmaz. */
/* DUZELTME YALNIZCA 992px ALTINDA - bilincli olarak dar tutuldu.
   Once bu kural her genislikte uygulanmisti ve masaustunde olculebilir bir
   yan etkisi cikti: .hero-inner'in `height: 100%` degeri sabit yukseklikli
   bir ebeveyne dayaniyor; ebeveyn min-height'e cevrilince `100%` auto'ya
   duser ve gorsel sutunu 1440px'te 800px yerine 587px'e iner. Hero
   GORSELINE dokunmamak bu gorevin acik kurali oldugu icin >=992px tamamen
   eski haliyle birakildi; olculen kirpma zaten yalnizca 768-820px
   araliginda olusuyordu ve orada gorsel sabit olculu (380x400 / 190x200),
   yani stretch zincirine bagli degil. */
@media (max-width: 991px) {
  .hero,
  body.admin-bar .hero {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

/* ---- 2. Home hero icerik olcegi = program hero olcegi ------------------
   Home hero'su program hero'larindan once yazilmis ve kendi olceginde
   kalmisti: baslik 46px'e karsi 62px, paragraf 17px'e karsi 16px/1.7,
   butonlar paylasilan .btn olcusunde (15px / 14px-28px dolgu) kalirken
   program hero'lari 14px / 13px-24px + 46px minimum yukseklik kullaniyordu.

   Asagidaki degerler program hero sisteminin (Bolum 24) degerleridir.
   Home'un DUZENI degistirilmez: iki sutunlu .hero-inner, gorselin yeri,
   olcusu ve alt hizasi oldugu gibi kalir; yalnizca metin blogunun tipografik
   olcegi ve dikey ritmi ayni sisteme baglanir.

   .hero-eyebrow bilincli olarak program olcegine (12px/0.08em) CEKILMEZ:
   Home'da bu oge basligin ALTINDA duran bir alt baslik, program
   sayfalarinda ise basligin USTUNDE duran bir etiket. Ayni ismi tasiyan
   iki farkli rol; 12px'e dusurmek Home'da alt basligi okunmaz kilardi.
   Yalnizca basligin yeni olcegiyle orantili kalacak sekilde ayarlanir. */
.hero .hero-desc {
  font-size: 16px;
  line-height: 1.7;
  max-width: 540px;
  margin-top: 20px;
  text-wrap: pretty;
}
.hero .hero-eyebrow {
  font-size: 16px;
  margin-bottom: 0;
}
.hero .hero-actions .btn {
  min-height: 46px;
  padding: 13px 24px;
  font-size: 14px;
}
@media (max-width: 991px) {
  .hero .hero-desc { margin-inline: auto; }
}
@media (max-width: 767px) {
  .hero .hero-desc { font-size: 15px; }
  .hero .hero-eyebrow { font-size: 14px; }
}

/* ---- 3. Baslik olcek merdiveni + otomatik kuculme ----------------------
   Dort hero'nun baslik olcusu ARTIK TEK YERDE burada belirlenir. Her tier
   ham degeri --hero-fs'e yazar, font-size ise onu --hero-fit carpani ile
   olceklendirir. Carpan varsayilan 1'dir, yani JS calismasa da (ya da hic
   yuklenmese de) her hero bugunku olcusunde gorunur - kuculme yalnizca bir
   iyilestirmedir, gorunurlugun kosulu degildir.

   max(26px, ...) okunabilirlik tabani: en dar ekranda en agresif kademede
   bile baslik 26px'in altina inmez.

   Secicilerdeki body:has() onekleri Bolum 24'ten devralinmistir; oradaki
   kurallar 0-3-1 ozgullukte oldugu icin duz sinif secicisi onlari ezemez.
   Anlam tasimazlar, yalnizca ozgulluk dengeleyicidir. */
/* --hero-height-mode: hero'nun yukseklik MODELINI JS'e bildirir; olcum
   bu bilgi olmadan yanlis referansa bakiyordu.

   Program hero'lari `height: auto` + `min-height: clamp(...)` kullanir:
   kutu icerik sigmayinca BUYUR, dolayisiyla "min-height asildi mi" dogru
   sinyaldir -> auto.

   Home ise >=992px'te `height: calc(100vh - 81px)` ile SABIT yukseklikli
   ve min-height'i (560px) tasarim yuksekliginden (800px'e kadar) kucuktur.
   Orada "min-height asildi mi" her zaman dogru cikardi ve INGILIZCE baslik
   bile gereksiz yere kuculurdu. Sabit kutuda dogru soru "icerik kutuyu
   asti mi" oldugu icin -> fixed. */
.hero { --hero-height-mode: fixed; }
@media (max-width: 991px) {
  .hero { --hero-height-mode: auto; }
}
body:has(.ielts-hero) .ielts-hero,
body:has(.toefl-hero) .toefl-hero,
body:has(.academic-hero) .academic-hero { --hero-height-mode: auto; }

.hero,
body:has(.ielts-hero) .ielts-hero,
body:has(.toefl-hero) .toefl-hero,
body:has(.academic-hero) .academic-hero { --hero-fit: 1; }

.hero.is-compact,
body:has(.ielts-hero) .ielts-hero.is-compact,
body:has(.toefl-hero) .toefl-hero.is-compact,
body:has(.academic-hero) .academic-hero.is-compact { --hero-fit: 0.92; }

.hero.is-extra-compact,
body:has(.ielts-hero) .ielts-hero.is-extra-compact,
body:has(.toefl-hero) .toefl-hero.is-extra-compact,
body:has(.academic-hero) .academic-hero.is-extra-compact { --hero-fit: 0.84; }

.hero .hero-title,
body:has(.ielts-hero) .ielts-hero .hero-title,
body:has(.toefl-hero) .toefl-hero .hero-title,
body:has(.academic-hero) .academic-hero .hero-title {
  --hero-fs: clamp(44px, 4vw, 62px);
}
.hero .hero-title,
body:has(.ielts-hero) .ielts-hero .hero-title,
body:has(.toefl-hero) .toefl-hero .hero-title,
body:has(.academic-hero) .academic-hero .hero-title {
  font-size: max(26px, calc(var(--hero-fs) * var(--hero-fit, 1)));
  line-height: 1.05;
  margin-bottom: 16px;
  text-wrap: balance;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero .hero-title,
  body:has(.ielts-hero) .ielts-hero .hero-title,
  body:has(.toefl-hero) .toefl-hero .hero-title,
  body:has(.academic-hero) .academic-hero .hero-title { --hero-fs: clamp(44px, 4vw, 50px); }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero .hero-title,
  body:has(.ielts-hero) .ielts-hero .hero-title,
  body:has(.toefl-hero) .toefl-hero .hero-title,
  body:has(.academic-hero) .academic-hero .hero-title { --hero-fs: clamp(42px, 5vw, 46px); }
}
@media (max-width: 767px) {
  .hero .hero-title,
  body:has(.ielts-hero) .ielts-hero .hero-title,
  body:has(.toefl-hero) .toefl-hero .hero-title,
  body:has(.academic-hero) .academic-hero .hero-title {
    --hero-fs: clamp(36px, 10vw, 44px);
    line-height: 1.08;
  }
}
/* Iki sutunlu duzende basligin kendi genislik siniri var; 992px altinda
   duzen ortalandigi icin serbest birakilir (Bolum 24 ile ayni). */
@media (min-width: 992px) {
  .hero .hero-title,
  body:has(.ielts-hero) .ielts-hero .hero-title,
  body:has(.toefl-hero) .toefl-hero .hero-title,
  body:has(.academic-hero) .academic-hero .hero-title { max-width: 600px; }
}
@media (max-width: 991px) {
  .hero .hero-title,
  body:has(.ielts-hero) .ielts-hero .hero-title,
  body:has(.toefl-hero) .toefl-hero .hero-title,
  body:has(.academic-hero) .academic-hero .hero-title { max-width: none; }
}

/* BASLIK OLCUSUNDE GECIS YOK - bilincli.
   Once buraya `transition: font-size` konmustu ve olcum sistemini
   sessizce bozuyordu: JS bir kademe uygulayip hemen ardindan
   getComputedStyle ile olcuyor, gecis suresince ise ESKI deger okunuyordu.
   Sonuc olarak her kademe "hala sigmadi" gibi gorunuyor ve baslik gereksiz
   yere en kucuk kademeye kadar iniyordu. Olcu zaten yukleme ve yeniden
   boyutlandirmada bir kez belirlenir; animasyona ihtiyaci yoktur. */

/* =========================================================================
   RESPONSIVE POLISH - tablet / mobil / dar ekran
   =========================================================================
   Bu bolum YENI TASARIM ICERMEZ. Masaustu gorunumu oldugu gibi kalir;
   yalnizca 320-1239px arasinda gercek bir tarayicida OLCULEREK tespit
   edilmis yerlesim hatalari duzeltilir. Her basligin altinda sorunu
   ortaya cikaran olcum yaziyor.

   Bolum dosyanin en sonunda duruyor: ayni ozgullukteki eski kurallari
   kaynak sirasiyla ezer, hicbir eski kural silinmedi. Hicbir yerde
   `overflow-x: hidden` kullanilmadi - tasmanin kaynagi duzeltildi.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. TEK KALAN KARTIN ORTALANMASI  (yeniden kullanilabilir mekanizma)
   -------------------------------------------------------------------------
   SORUN: Kart gridi sarmalandiginda son satirda tek kart kaliyorsa kart
   sola yapisik kaliyor, satir dengesiz gorunuyordu. Olculen sapma (son
   satirin merkezi ile gridin merkezi arasindaki fark):

     Home / Programs (3 kart)      768px -182px   820px -195px   912px -218px
     IELTS / Success Stories (3)   768px -182px   820px -195px   912px -218px
     Blog / Categories (4 kart)    768px -240px   912px -288px  1024px -326px
     Blog / Categories (5 kart)    375px  -85px   414px  -95px
     Home / Programs (5 kart)     1024px -164px  1440px -216px

   COZUM: nth-child hilesi yerine davranisin kendisi degistiriliyor.
   Grid yerine flex + `justify-content: center` kullanilinca SON SATIR
   kendiliginden ortalanir - kart sayisindan da sutun sayisindan da
   bagimsiz olarak. Yeni bir kart/kategori eklendiginde ek CSS yazmak
   gerekmez.

   Sutun genisligi flex-basis ile birebir grid ile ayni hesaplanir:
   n sutun icin (100% - (n-1)*gap) / n. Dolu bir satirda n kart + (n-1)
   bosluk tam olarak %100 eder, yani DOLU satirlarin gorunumu gridden
   ayirt edilemez; sadece eksik satir ortalanir. Sondaki 0.02px, yuzde
   hesabinin yuvarlanmasi yuzunden satirin erken sarmalanmasini onleyen
   guvenlik paylidir. Deger bilincli olarak tarayicinin duzen biriminden
   (1/64px = 0.0156px) sadece bir tik buyuk secildi: yuvarlamayi
   emmeye yetiyor ama masaustunde olculen fark 0 piksel kaliyor.
   (Once 0.5px denenmisti; 1440px'te kart kenarlarini ~1px kaydirdigi
   icin masaustu render'i birebir ayni cikmiyordu.)

   Kullanimi: kaba `grid-orphan-center` sinifi eklenir ve o kabin her
   ekran araligi icin `--orphan-cols` degeri verilir. Baska hicbir sey
   gerekmez. */
.grid-orphan-center {
  --orphan-gap: var(--space-3);
  --orphan-cols: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--orphan-gap);
}
.grid-orphan-center > * {
  flex: 0 1 calc(
      (100% - (var(--orphan-cols) - 1) * var(--orphan-gap))
      / var(--orphan-cols) - 0.02px
  );
  min-width: 0;
  max-width: 100%;
}

/* Home "Find the Right Program for You" + IELTS "Student Success Stories".
   Sutun sayilari eski grid kurallariyla BIREBIR ayni tutuldu (masaustu 3,
   tablet 2, telefon 1); degisen tek sey eksik satirin artik ortalanmasi. */
@media (min-width: 992px) {
  .programs-grid.grid-orphan-center,
  .ielts-testimonial-grid.grid-orphan-center { --orphan-cols: 3; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .programs-grid.grid-orphan-center,
  .ielts-testimonial-grid.grid-orphan-center { --orphan-cols: 2; }
}
@media (max-width: 767px) {
  .programs-grid.grid-orphan-center,
  .ielts-testimonial-grid.grid-orphan-center { --orphan-cols: 1; }
}

/* Blog "Browse by Category".
   Kategori sayisi musteriye bagli oldugu icin burasi tamamen sayidan
   bagimsiz calismali. Ust sinir 4: daha once `.skills-grid` temel kurali
   (6 sutun) ve `.skills-grid.is-count-5` Academic English tarafindan
   sizip 5 kategoride 5, 7 kategoride 6 sutun uretiyordu - 1440px'te bile
   kartlar okunamayacak kadar daraliyordu.
   `#categories` onekiyle yaziliyor ki Academic English'in ayni
   `.skills-grid` bilesenini kullanan beceri gridi hic etkilenmesin. */
#categories .skills-grid.grid-orphan-center { --orphan-gap: var(--space-2); }
@media (min-width: 992px) {
  #categories .skills-grid.grid-orphan-center { --orphan-cols: 4; }
}
@media (min-width: 768px) and (max-width: 991px) {
  #categories .skills-grid.grid-orphan-center { --orphan-cols: 3; }
}
@media (max-width: 767px) {
  #categories .skills-grid.grid-orphan-center { --orphan-cols: 2; --orphan-gap: 14px; }
}
@media (max-width: 319px) {
  #categories .skills-grid.grid-orphan-center { --orphan-cols: 1; }
}


/* -------------------------------------------------------------------------
   2. HOME - "Preparing for IELTS?" CTA cakismasi
   -------------------------------------------------------------------------
   SORUN (1024px'te goruldu): "Start IELTS Preparation" butonu, listenin
   son ogesi olan "Exam strategies" yazisinin UZERINE biniyordu.

   KOK NEDEN: `.ielts-promo-list` `flex-wrap: nowrap` ile tanimliydi ve
   `.ielts-promo-body` uzerinde `min-width: 0` vardi. Ikisi birlikte, liste
   dar kaldiginda sarmalanmak yerine kendi sutununun DISINA tasip butonun
   altina kayiyordu. (Olcum bunu ilk basta kacirmisti: tasan `<li>`ler
   `<ul>` kutusunun disinda kaldigi icin `<ul>`nin dikdortgeni butonla
   kesismiyor gorunuyor.)

   Hemen ustteki `@media (max-width: 1279px)` blogunun kendi aciklamasi
   zaten "liste kirilip 2 satira dusebilir" diyor - yani sarmalanma
   basindan beri BEKLENIYORDU, sadece `flex-wrap` hic acilmamisti. */
@media (max-width: 1279px) {
  .ielts-promo-list { flex-wrap: wrap; row-gap: var(--space-2); }
}

/* Buton BILINCLI olarak yan yana birakildi. Iki secenek olculdu:
     (A) 992-1199px'te butonu kendi satirina almak,
     (B) sadece listenin sarmalanmasina izin vermek.
   (B) hem daha kompakt hem de mevcut kompozisyona daha sadik: 1024px'te
   liste 3+2 olarak sarmalaniyor, buton yerinde kaliyor ve hicbir cakisma
   olmuyor. (A) ise butonu gereksiz yere 1199px'e kadar asagi itiyor,
   oysa 1100-1199px araliginda zaten sorun yoktu. Istenen davranis da
   buydu: "alan yetiyorsa yan yana kalabilir". */


/* -------------------------------------------------------------------------
   3. ABOUT - hero dekoratif yapragi
   -------------------------------------------------------------------------
   SORUN: Yaprak dar ekranlarda fotografin arkasinda kaliyor, 992-1199px
   arasinda ise ekranin solundan tasarak kirpiliyordu. Olculen degerler
   (yapragin fotograf maskesinin SOLUNDA gorunen genisligi / viewport
   disinda kalan miktar):
       375-414px:  30px gorunur  /  0px tasma
       768-912px:  50px gorunur  /  0px tasma
          1024px:  73px gorunur  / 67px viewport DISINDA (kirpik)

   Fotografin konumu ve boyutu (.about-hero-visual / .about-photo-mask)
   hic degistirilmedi; yalnizca dekorun kendi konumu ve olcegi ayarlandi.
   >=1200px masaustu degeri korunuyor. */
@media (min-width: 992px) and (max-width: 1199px) {
  .about-hero-deco { width: 340px; left: -70px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .about-hero-deco { width: 260px; left: -90px; bottom: 10px; }
}
@media (max-width: 767px) {
  .about-hero-deco { width: 200px; left: -70px; bottom: -10px; }
}


/* -------------------------------------------------------------------------
   4. ABOUT - "International Certifications" dekoratif yapraklari
   -------------------------------------------------------------------------
   SORUN: Iki yaprak `left: 8px` / `right: 8px` ile sabitti ve genislikleri
   250px oldugu icin dar ekranda ORTADA UST USTE biniyor, sertifika
   metinlerinin arkasinda yogun bir leke olusturuyordu. Olculen degerler
   (iki yaprak arasindaki bosluk / yapraklarin metinle kesisen alani):
       375px:  -84px (yani 84px cakisma)  / 9.793 + 14.362 px²
       390px:  -69px                      / 8.812 + 16.485 px²
       414px:  -45px                      / 8.812 + 17.688 px²

   COZUM: Dar ekranda yapraklar kucultuluyor, disari dogru itiliyor ve
   dikey olarak KARSIT uclara ayriliyor (sol asagi, sag yukari) - boylece
   ortadaki metin alanindan uzaklasiyorlar ama dekoratif karakter
   koruniyor. `.about-certifications`'in kendi `overflow: hidden`'i
   tasan kismi zaten kirptigi icin negatif konumlar yatay kaydirma
   olusturmaz. Slider hizalamasina (.cert-slider)
   dokunulmadi. */
@media (min-width: 768px) and (max-width: 991px) {
  .about-certifications .cta-decor-right { right: -40px; }
}
@media (max-width: 767px) {
  .about-certifications .cta-decor { width: 170px; opacity: 0.3; }
  .about-certifications .cta-decor-left  { left: -48px;  bottom: -28px; }
  .about-certifications .cta-decor-right { right: -48px; bottom: auto; top: -28px; }
}


/* -------------------------------------------------------------------------
   5. GLOBAL FOOTER - alan varken tek sutuna dusmesi
   -------------------------------------------------------------------------
   SORUN: Footer'in sutun sayisi SABIT kirilma noktalarina baglanmisti ve
   birbiriyle celisen uc kural birikmisti. Olculen sonuc:
       375px: 1 sutun    <- iPhone SE. Iki sutun rahat sigiyor.
       390px: 1 sutun
       414px: 2 sutun
   Ustelik ayni footer BLOG sayfasinda 375px'te 2 sutundu (sayfaya ozel
   `body:has(.blog-hero)` kurali daha sonra geldigi icin) - yani ayni
   bilesen sayfadan sayfaya farkli davraniyordu.

   KOK NEDEN: `@media (max-width: 400px) { .footer-grid { 1fr } }` -
   icerigin gercekten sigip sigmadigina bakmayan sabit bir esik.

   COZUM: Iki kademe. Ikisinde de marka blogu (ilk) ve sosyal medya blogu
   (son) tam genislikte kalir - ikisi de liste degil, dar bir sutunda
   kirilmalari anlamsiz olurdu. Aradaki UC bag sutunu (Quick Links,
   Programs, Support) ise:

   (a) <=599px - SUTUN SAYISI ICERIGE GORE: `repeat(auto-fit,
      minmax(132px, 1fr))`. Tarayici kac sutunun sigdigini kendisi
      hesaplar; 132px bir footer link sutununun rahat okunabildigi
      olculen en dar genisliktir ("Academic English" 14px'te ~112px).
          320px -> 1 sutun (gercekten dar cihaz)
          360px -> 2 sutun
          375px -> 2 sutun   (Quick Links | Programs, sonra Support)
          414px -> 2 sutun
          500px -> 3 sutun
      Ust sinir olcuye gore secildi: 600px'in hemen ustunde DORDUNCU
      bir iz olusmaya basliyor ve uc bag sutunu oldugu icin o iz her
      zaman bos kaliyor (623px'te olculdu: sagda 148px olu alan).
      600px'te auto-fit zaten tam olarak uc iz uretiyor, yani gecis
      noktasinda gorunum degismiyor.

   (b) 600-991px - UC ESIT SUTUN. Bu araliktan itibaren uc sutun zaten
      rahat siginca `auto-fit`'e gerek kalmiyor; dahasi auto-fit burada
      YANLIS sonuc veriyordu: tam genislige yayilan marka blogu her izi
      "dolu" gosterdigi icin bos izler cokmuyor ve 820px'te 5 iz
      olusup sadece 3'u kullaniliyordu - footer'in sag yarisi bos
      kaliyordu. Sabit uc sutun bunu ortadan kaldirir.

   >=992px masaustu 5 sutunlu duzen hic degismedi.

   Sayfaya ozel `body:has(...)` secicileri de listeye dahil edildi; aksi
   halde daha yuksek ozgullukleri yuzunden Blog/Academic sayfalarinda bu
   kural gecersiz kalir ve global davranis yine bozulurdu. */
@media (max-width: 991px) {
  .footer-grid > div:first-child,
  .footer-grid > div:last-child,
  body:has(.blog-hero) .footer-grid > div:first-child,
  body:has(.blog-hero) .footer-grid > div:last-child,
  body:has(.academic-hero) .footer-grid > div:first-child,
  body:has(.academic-hero) .footer-grid > div:last-child { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 991px) {
  .footer-grid,
  body:has(.blog-hero) .footer-grid,
  body:has(.academic-hero) .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-3);
    row-gap: var(--space-4);
  }
}
@media (max-width: 599px) {
  .footer-grid,
  body:has(.blog-hero) .footer-grid,
  body:has(.academic-hero) .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    column-gap: var(--space-2);
    row-gap: var(--space-3);
  }
}


/* -------------------------------------------------------------------------
   6. TOEFL - "Understand Your TOEFL Score" tablet duzeni
   -------------------------------------------------------------------------
   SORUN: 768-991px arasinda kart tek sutuna dusuyor ve "Your Goal"
   paneli tum genisligi kaplayan, icerigi ise tek bir dar dikey serit
   halinde alt alta dizilen dengesiz bir bloga donusuyordu. Olculen:
       768px: panel 703x328px (en/boy orani 0.47)  kart toplam 910px
       820px: panel 755x328px (0.43)               kart toplam 910px
       912px: panel 847x328px (0.39)               kart toplam 910px
       1024px (referans, 3 sutun): panel 274x354   kart toplam 356px

   COZUM: Tablet araliginda hedef paneli YATAY bir ozet satirina
   donusuyor - "95/120" ile "Target University Requirement / 90+" yan
   yana geliyor, aciklama notu ikisinin altinda tam genislikte duruyor.
   Beceri cubuklari altta tam genislikte devam ediyor, Focus Areas ise
   en altta iki sutuna aciliyor; boylece hicbir metin dar bir dikey
   sutunda sikismiyor. Skorlarin kendisine, cubuk yuzdesi hesabina ve
   1024px+ duzenine dokunulmadi. */
@media (max-width: 991px) {
  /* Kart tek sutuna dustugunde panellerin `border-right`'i sag kenarda
     asili, hicbir seyi ayirmayan dikey bir cizgi olarak kaliyordu.
     Ayni ayrimi dogru yonde yapan alt cizgiye ceviriliyor. */
  .toefl-score-goal,
  .toefl-score-breakdown {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .toefl-score-goal {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: var(--space-5);
    row-gap: 0;
    align-items: start;
  }
  .toefl-score-goal-label     { grid-column: 1; grid-row: 1; }
  .toefl-score-goal-value     { grid-column: 1; grid-row: 2; margin: 4px 0 0; }
  .toefl-score-goal-req-label { grid-column: 2; grid-row: 1; }
  .toefl-score-goal-req-value {
    grid-column: 2; grid-row: 2;
    margin: 4px 0 0;
    font-size: 30px;
    align-self: end;
  }
  .toefl-score-goal-note {
    grid-column: 1 / -1; grid-row: 3;
    margin-top: var(--space-3);
  }

  .toefl-score-focus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    align-content: start;
  }
  .toefl-score-focus-title { grid-column: 1 / -1; margin-bottom: 0; }
  .toefl-score-focus-item  { margin-bottom: 0; }
}


/* -------------------------------------------------------------------------
   7. BLOG - hero kolajinin tablette saga yapismasi
   -------------------------------------------------------------------------
   SORUN: 768-991px arasinda kolaj saga yapisik duruyor, altindaki metin
   ise ortalanmis oluyordu; solda buyuk bir bos alan kaliyordu. Olculen
   kolaj konumu (soldaki bosluk / sagdaki bosluk):
       768px:  269px / 79px
       820px:  321px / 79px
       912px:  413px / 79px
       961px:  462px / 79px

   KOK NEDEN: `.blog-hero-visual { margin-inline: auto var(--space-4) }`.
   Bu kisayol margin-inline-START'i `auto`, END'i 40px yapar - yani
   kolaji saga iter. Ayni bilesenin mobil kurali dogru yazilmis
   (`margin: 0 auto var(--space-4)`), tablet kuralinda alt margin yanlislikla
   yatay eksene kaymis.

   COZUM: Kolaj mobil kuralla ayni sekilde ortalaniyor ve tablet genisligi
   icin biraz buyutuluyor. Kolajin kendi ic yerlesimine
   (.blog-hero-photo-1..4 olcu/aci/ustuste binme) ve giris animasyonuna
   HIC dokunulmadi. */
@media (min-width: 768px) and (max-width: 991px) {
  .blog-hero-visual {
    order: -1;
    width: 100%;
    max-width: 460px;
    min-height: 360px;
    margin: 0 auto var(--space-4);
  }
}


/* -------------------------------------------------------------------------
   8. TEK MAKALE - "Back to Blog" bagi metnin uzerine biniyor
   -------------------------------------------------------------------------
   SORUN: Bag `position: sticky` ve kabi `position: absolute; inset: 0`
   oldugu icin yazinin TAMAMININ ustunde duran gorunmez bir katmanda
   yasiyor. Yalnizca >=1240px'te bu katman okuma kolonunun soluna
   cekildigi icin sorun cikmiyor; altindaki her genislikte bag dogrudan
   kategori satirinin uzerine dusuyor. Olculen cakisma alani:
       375-414px: kategori satiriyla 3.043 px²
       768-1024px: kategori satiriyla 3.656 px² + baslikla 344 px²
       1440px: 0 px² (masaustu davranisi dogru)

   COZUM: 1240px'in altinda bag normal akisa donuyor - sticky/absolute
   kalkiyor, kategori satirinin USTUNDE kendi satirinda duruyor ve
   kullanici asagi kaydirinca birlikte gelmiyor. Negatif margin, bagin
   ic dolgusunu telafi ederek yazisini basligin sol kenariyla hizalar;
   tiklanabilir alan (dolgu) oldugu gibi korunur.
   >=1240px masaustu/laptop davranisi hic degismedi. */
@media (max-width: 1239px) {
  .article-back-row {
    position: static;
    inset: auto;
    pointer-events: auto;
    padding-top: var(--space-5);
  }
  .article-back { position: static; margin-left: -12px; }
  /* Bag artik akista yer kapladigi icin basligin kendi ust dolgusu
     kucultuluyor; bolumun toplam ust bosluğu degismiyor. */
  .article-head { padding-top: var(--space-2); }
}
@media (min-width: 768px) and (max-width: 1239px) {
  /* Bu araliktaki daha buyuk yatay dolguya (16px) karsilik gelir. */
  .article-back { margin-left: -16px; }
}


/* -------------------------------------------------------------------------
   9. CONTACT - mobilde form bilgi kartinin ONUNE aliniyor
   -------------------------------------------------------------------------
   SORUN: Mobilde iki sutun alt alta iniyor ve once buyuk bilgi karti
   geliyordu; kullanici forma ulasmak icin uzun bir yol kaydiriyordu.
   Olculen (sayfa ustunden formun baslangicina kadar):
       375px: bilgi karti 122px'de basliyor, FORM 687px'de
       390px: 122px / 687px
       414px: 122px / 687px

   COZUM: Yalnizca GORSEL sira degistiriliyor (`order`). HTML sirasi,
   form alanlari, dogrulama, alici sistemi ve gonderim mantigi
   degismedi. Tablet (768-991px) ve masaustu duzeni oldugu gibi kaldi.

   NOT: Gorsel sira DOM sirasindan ayrildigi icin klavye/ekran okuyucu
   sirasi bilgi karti -> form seklinde kalir. Iki ogeli bir yer degisimi
   icin bu kabul edilebilir bir denge; alternatifi (HTML sirasini
   degistirmek) formun sablon yapisina dokunmayi gerektirirdi. */
@media (max-width: 767px) {
  .contact-hero-form { order: 1; }
  .contact-info-card { order: 2; }
}


/* =========================================================================
   DINAMIK KART GRIDLERI  (Sayfa Kartlari / Basari Hikayeleri)
   =========================================================================
   Bu bolumdeki gridler artik SABIT SAYIDA kart varsaymaz. Kart sayisini
   musteri belirliyor (wp-admin > Sayfa Kartlari, wp-admin > Basari
   Hikayeleri), dolayisiyla yerlesim 1 ile N arasindaki her sayida
   kendiliginden dogru sonucu vermek zorunda.

   YONTEM: temada zaten kanitlanmis `.grid-orphan-center` mekanizmasi.
   Grid yerine flex + `justify-content: center` kullanildigi icin DOLU
   satirlar gridden ayirt edilemez, EKSIK kalan son satir ise kendiliginden
   ortalanir. Sutun sayisi her kirilma noktasi icin tek bir degiskenle
   (--orphan-cols) veriliyor; kart sayisiyla ilgisi yok.

   SONUC: besinci (ya da yedinci, ya da onuncu) kart eklendiginde bu
   dosyaya TEK SATIR yazmak gerekmiyor. `:nth-child(5)` gibi sayiya
   gomulu hicbir kural kullanilmadi.

   Beklenen davranis (masaustu, ust sinir 4 sutunlu bir grid icin):
       1 kart  -> tek kart ortada
       2-4     -> tek satir, dengeli
       5       -> 4 + ortalanmis 1
       6       -> 4 + ortalanmis 2
       7       -> 4 + ortalanmis 3
   Tablet ve telefonda sutun sayisi duser, kural aynen isler.

   ONEMLI: `--orphan-gap` her zaman o kirilmadaki GERCEK gap degeriyle
   ayni olmali. flex-basis hesabi bu degeri kullanir; farkli olursa
   sutunlar birkac piksel kayar. Asagida her ozel gap degeri icin
   --orphan-gap da birlikte veriliyor.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Temel: eski `display: grid` kurallarini ez.
   Kaynak sirasi bu bolumu en sona koydugu icin ayni ozgullukteki eski
   kurallar dogal olarak eziliyor; ek bir agirlastirmaya gerek yok.
   `grid-template-columns` flex altinda zaten etkisiz kalir, bu yuzden
   eski `.is-count-N` kurallari da sessizce devre disi olur.
   ------------------------------------------------------------------------- */
.why-us-grid.grid-orphan-center,
.toefl-gain-grid.grid-orphan-center,
.help-grid.grid-orphan-center,
.ielts-testimonial-grid.grid-orphan-center,
.academic-testimonial-grid.grid-orphan-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   IELTS "Why Learn with Sariyya?"  (Sayfa Kartlari)
   Sutun sayilari eski grid kurallariyla BIREBIR ayni: masaustu 4,
   tablet 2, telefon 1. Degisen tek sey artik 4'ten fazla kart
   eklenebilmesi ve eksik satirin ortalanmasi.
   ------------------------------------------------------------------------- */
.why-us-grid.grid-orphan-center { --orphan-gap: var(--space-4); --orphan-cols: 4; }
#why-ielts .why-us-grid.grid-orphan-center { --orphan-gap: 32px; }

@media (max-width: 1100px) {
  .why-us-grid.grid-orphan-center { --orphan-cols: 2; }
  #why-ielts .why-us-grid.grid-orphan-center { --orphan-gap: 24px; }
}
@media (max-width: 991px) {
  #why-ielts .why-us-grid.grid-orphan-center { --orphan-gap: 20px; }
}
@media (max-width: 767px) {
  .why-us-grid.grid-orphan-center { --orphan-cols: 1; }
}

/* -------------------------------------------------------------------------
   TOEFL "What You'll Gain"  (Sayfa Kartlari)
   Masaustu 4, tablet 2, telefon 2 - telefonda tek sutuna DUSMEZ, bu
   bolum kucuk kartlardan olustugu icin mevcut tasarim orada da iki
   sutun kullaniyordu.
   ------------------------------------------------------------------------- */
.toefl-gain-grid.grid-orphan-center { --orphan-gap: 24px; --orphan-cols: 4; }
@media (max-width: 991px) {
  .toefl-gain-grid.grid-orphan-center { --orphan-cols: 2; }
}

/* -------------------------------------------------------------------------
   Academic English "How I Can Help You"  (Sayfa Kartlari)
   Masaustu 3, tablet 2, telefon 1.
   ------------------------------------------------------------------------- */
.help-grid.grid-orphan-center { --orphan-gap: 24px; --orphan-cols: 3; }
@media (max-width: 1023px) {
  .help-grid.grid-orphan-center { --orphan-cols: 2; }
}
@media (max-width: 767px) {
  .help-grid.grid-orphan-center { --orphan-cols: 1; }
}

/* -------------------------------------------------------------------------
   IELTS / TOEFL "Student Success Stories"  (Basari Hikayeleri)
   Kayit sayisi tamamen musteriye bagli: dorduncu hikaye eklendiginde
   ilk satirda uc kart kalir ve dorduncu ortalanir. Ust sinir 3, cunku
   yorum kartlari uzun metin tasiyor ve dort sutunda okunmasi zorlasiyordu.
   ------------------------------------------------------------------------- */
.ielts-testimonial-grid.grid-orphan-center { --orphan-gap: var(--space-3); --orphan-cols: 3; }
body:has(.toefl-hero) .ielts-testimonial-grid.grid-orphan-center { --orphan-gap: 24px; }
@media (max-width: 991px) {
  .ielts-testimonial-grid.grid-orphan-center { --orphan-cols: 2; }
}
@media (max-width: 767px) {
  .ielts-testimonial-grid.grid-orphan-center { --orphan-cols: 1; }
}

/* -------------------------------------------------------------------------
   Academic English yorum sutunu  (Basari Hikayeleri)
   -------------------------------------------------------------------------
   Bu grid "Who Is This For?" kartinin SAG SUTUNUNDA duruyor ve bolumun
   kendine ozgu iki panelli tasariminin parcasi. Kartlar bilincli olarak
   KOMPAKT: dar ve alcak, ki sagdaki sutun soldaki liste paneliyle ayni
   yukseklikte dursun.

   Sutun sayilari bu bolumun ORIJINAL tasarimiyla birebir ayni:
       >=992px  3 sutun   (tek satirda uc kart)
       768-991  2 sutun
       <=767    1 sutun

   Not: bu degerler IELTS/TOEFL yorum gridinden (3/2/1 ama genis kartlar,
   sayfanin tam genisliginde) ayridir ve oyle kalmali - orasi tam
   genislikte bir bolum, burasi bir panelin yarisi.

   grid-orphan-center yalnizca EKSIK kalan son satiri ortalar; dolu bir
   satir eski grid ile ayni gorunur. Yani dort ya da bes hikaye
   eklendiginde sarmalama ve ortalama kendiliginden calisir, uc hikayede
   ise tasarim birebir korunur.
   ------------------------------------------------------------------------- */
.academic-testimonial-grid.grid-orphan-center { --orphan-gap: 18px; --orphan-cols: 3; }
@media (min-width: 768px) and (max-width: 991px) {
  .academic-testimonial-grid.grid-orphan-center { --orphan-cols: 2; }
}
@media (max-width: 767px) {
  .academic-testimonial-grid.grid-orphan-center { --orphan-cols: 1; }
}

/* -------------------------------------------------------------------------
   Academic Journey - degisken adim sayisi
   =========================================================================
   Sirit flexbox ve her adim `flex: 1` aldigi icin genislik adim sayisina
   gore kendiliginden bolusur; N degistiginde CSS'e dokunulmaz. Oklar
   sablonda adimlarin ARASINA basilir (sonuncudan sonra basilmaz), yani
   ok sayisi da otomatik.

   Burada yalnizca COK ADIMLI durum icin bir guvenlik payi var: alti ve
   uzeri adimda masaustunde her adim ~%16 genisliginde kalirdi ve basliklar
   kirilmaya baslardi. Bu yuzden bes adimi asinca sirit sarmalanmaya
   izin veriyor ve satir arasi bosluk aciliyor. Sayi sablondan
   data-steps ile geliyor, CSS'te kart sayisi sayilmiyor.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .academic-journey-track:not([data-steps="1"]):not([data-steps="2"]):not([data-steps="3"]):not([data-steps="4"]):not([data-steps="5"]) {
    flex-wrap: wrap;
    row-gap: var(--space-5);
  }
  /* Sarmalanan sirit ortalanir, sola yapismaz. */
  .academic-journey-track:not([data-steps="1"]):not([data-steps="2"]):not([data-steps="3"]):not([data-steps="4"]):not([data-steps="5"]) > .academic-journey-step {
    flex: 0 1 18%;
  }
}

/* -------------------------------------------------------------------------
   Academic Journey - sarmalanan siritta ORTALAMA
   -------------------------------------------------------------------------
   SORUN: adimlar artik dinamik oldugu icin sablon `is-count-N` sinifi
   basmiyor; 768-991px arasinda sirit `flex: 0 0 45%` ile sarmaladiginda
   son satirda kalan tek adim sola yapisik kaliyordu. Gercek tarayicida
   olculen sapma (son satirin merkezi ile siritin merkezi arasindaki fark),
   bes adimli bir siritta:

       785px  -202px
       915px  -238px

   COZUM: sayiya bakan bir kural yerine davranisin kendisi. Dolu bir
   satirda ogeler kabi zaten doldurdugu icin `justify-content: center`
   gorunumu degistirmez; yalnizca EKSIK kalan son satiri ortalar. Boylece
   uc, bes, yedi ya da dokuz adimda ayni sekilde calisir ve yeni adim
   eklendiginde bu dosyaya dokunulmaz.

   Masaustunde sirit sarmalamaz ve adimlar `flex: 1` aldigi icin kural
   orada etkisizdir - tasarim aynen korunur.
   ------------------------------------------------------------------------- */
.academic-journey-track { justify-content: center; }

/* -------------------------------------------------------------------------
   Bosluk (gap) ile --orphan-gap'i BIRBIRINE BAGLA
   -------------------------------------------------------------------------
   `.grid-orphan-center` sutun genisligini
       (100% - (n-1) * var(--orphan-gap)) / n
   ile hesaplar. Bu hesap ancak --orphan-gap SATIRDAKI GERCEK BOSLUKLA
   ayni oldugunda dogru sonuc verir.

   Bu gridlerin eski kurallari her kirilma noktasi icin ayri bir `gap`
   veriyordu (32px / 24px / 20px ...) ve bazilari ID ozgullugundeydi.
   Iki degeri elle ayni tutmaya calismak kirilgandi: olculen bir ornekte
   --orphan-gap 20px iken gercek gap 24px kaldi, iki kart 4px tasti ve
   911px'te grid iki sutun yerine tek sutuna dustu.

   COZUM: gap'i degiskenin KENDISINDEN turet. Boylece ikisi tanim geregi
   asla ayrisamaz ve ileride bir kirilma noktasi eklenirse yalnizca
   --orphan-gap degistirmek yeterli olur.
   ------------------------------------------------------------------------- */
.why-us-grid.grid-orphan-center,
#why-ielts .why-us-grid.grid-orphan-center,
.toefl-gain-grid.grid-orphan-center,
.help-grid.grid-orphan-center,
body:has(.academic-hero) .help-grid.grid-orphan-center,
.ielts-testimonial-grid.grid-orphan-center,
body:has(.toefl-hero) .ielts-testimonial-grid.grid-orphan-center,
.academic-testimonial-grid.grid-orphan-center,
body:has(.academic-hero) .academic-testimonial-grid.grid-orphan-center {
  gap: var(--orphan-gap);
}

/* =========================================================================
   BASARI HIKAYESI KARTLARI - ALT META HIZALAMASI
   =========================================================================
   Hikayelerin metin uzunlugu musteriye bagli ve esit olmak zorunda degil.
   Kartlar duz blok kutulardi: alt meta satiri (skor rozeti + isim, ya da
   Academic'te avatar + isim) metnin hemen ardindan geliyordu, dolayisiyla
   kisa metinli bir kartta yukarida, uzun metinli kartta asagida duruyordu.

   Olculen (Academic English, uc gercek kayit, metin uzunluklari 100/102/102
   karakter, 1440px):
       kart yuksekligi   288 / 288 / 288   (satirda zaten esitti)
       meta satiri ust   3374 / 3374 / 3396  -> ucuncu kart 22px asagida

   Kartlar ayni satirda zaten esit yukseklikte (flex satirinda varsayilan
   align-items: stretch). Eksik olan tek sey, meta satirinin kartin ALTINA
   itilmesiydi.

   COZUM: kart bir sutun flex kabina donusuyor ve meta satiri
   `margin-top: auto` ile dibe yapisiyor. Kalan bosluk metnin altinda
   toplaniyor.

   BILINCLI OLARAK YAPILMAYANLAR:
     - sabit piksel yukseklik yok (mevcut min-height'lara dokunulmadi)
     - metin kirpilmiyor: overflow:hidden, text-overflow, -webkit-line-clamp
       hicbiri kullanilmadi. Uzun bir hikaye satiri yukseltir; bu dogru
       davranis, kartlar birlikte uzar.

   Iki bolumun tasarimi AYRI kaliyor: IELTS/TOEFL genis kartlar + skor
   rozeti, Academic dar kartlar + avatar. Ortaklastirilan tek sey meta
   satirinin dibe hizalanmasi.
   ========================================================================= */

/* IELTS ve TOEFL: [skor rozeti]        Ogrenci Adi / Ulke */
.ielts-testimonial-card {
  display: flex;
  flex-direction: column;
}
.ielts-testimonial-footer { margin-top: auto; }

/* Academic English: [avatar] Ogrenci Adi / Ogrenci tipi */
.academic-testimonial-card {
  display: flex;
  flex-direction: column;
}
.academic-testimonial-person { margin-top: auto; }

/* Metin kutusunun alt boslugu, meta satiri dibe itildiginde artik
   gereksiz bir ayirici degil - en az bu kadar bosluk kalsin ki meta
   satiri uzun metinlerde metne yapismasin. */
.ielts-testimonial-text,
.academic-testimonial-card > p {
  margin-bottom: var(--space-3);
}

/* =========================================================================
   ILETISIM FORMU - ONAY SATIRINDAKI BAG
   ========================================================================= */

/* Onay cumlesi icindeki "Privacy Policy" bagi. Her kosulda gercek bir
   <a>; cumlenin bir parcasi gibi gorunur. Tiklanınca pencere acilir
   (bkz. asagidaki GIZLILIK POLITIKASI PENCERESI bolumu). */
.contact-consent-policy {
  color: var(--color-navy);
  text-decoration: underline;
  font-weight: 600;
}

/* ==========================================================================
   GIZLILIK POLITIKASI PENCERESI (iletisim formu onay satiri)
   ==========================================================================
   Pencere <body>'nin dogrudan altinda basilir (bkz. functions.php,
   sariyya_render_privacy_modal). Sayfa icinde bassaydi ustundeki
   bolumlerden birinin transform'u position: fixed'i kirar ve pencere
   ekrana degil o bolume gore konumlanirdi.

   z-index 200: sitedeki en yuksek katman mobil menu (101) ve sag alttaki
   sabit iletisim kisayollari (60). Pencere ikisinin de ustunde durmali,
   yoksa acikken altindan dugmeler gorunurdu.

   Kapali durumda `hidden` niteligi kullaniliyor; asagida hicbir kural
   .privacy-modal uzerinde display tanimlamiyor, boylece tarayicinin
   `[hidden] { display: none }` kurali ezilmiyor.
   ========================================================================== */
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: var(--space-3);
  /* Pencereyi ortalar; ekran cok kisaysa flex-start'a duser ve panel
     yukaridan baslar, boylece basligi kirpilmaz. */
  display: flex;
  align-items: center;
  justify-content: center;
}
.privacy-modal[hidden] { display: none; }

.privacy-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 15, 36, 0.55);   /* --color-navy-dark, yumusak */
}

.privacy-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 660px;
  /* Yukseklik ekrana gore sinirli; tasan kisim govde icinde kayar. */
  max-height: min(82vh, 720px);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(1, 30, 64, 0.18);
  overflow: hidden;                     /* kose yuvarlakligi govdeyi de kessin */
}

/* Baslik satiri sabit kalir, yalnizca govde kayar. */
.privacy-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 18px var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-cream-soft);
  flex-shrink: 0;
}
.privacy-modal-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--color-navy);
}

.privacy-modal-close {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 22px;
  line-height: 1;
  color: var(--color-navy);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.privacy-modal-close:hover {
  background: var(--color-cream-icon-bg);
  border-color: var(--color-cream-accent);
}
.privacy-modal-close:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.privacy-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3);
}
/* Govde programatik olarak odaklandigi icin (acilista) tarayicinin
   varsayilan odak halkasi burada gorsel gurultu yaratir; klavye
   kullanicisi zaten baslikla karsilaniyor. */
.privacy-modal-body:focus { outline: none; }

.privacy-modal-updated {
  margin: 0 0 var(--space-2);
  font-size: 12.5px;
  color: var(--color-gray-text);
}

.privacy-modal-foot {
  flex-shrink: 0;
  padding: 14px var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-cream-soft);
}
.privacy-modal-fullpage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: underline;
}
.privacy-modal-fullpage svg { flex-shrink: 0; }

/* Pencere acikken arka plan kaymasin. */
body.privacy-modal-open { overflow: hidden; }

@media (max-width: 600px) {
  /* Dar ekranda kenar boslugu kuculur ve panel neredeyse tam yuksekligi
     kullanir; metin uzun oldugu icin okunabilir alan kazanmak onemli. */
  .privacy-modal { padding: var(--space-2); }
  .privacy-modal-panel { max-height: 88vh; }
  .privacy-modal-head { padding: 14px var(--space-2); }
  .privacy-modal-title { font-size: 17px; }
  .privacy-modal-body { padding: var(--space-2); }
  .privacy-modal-foot { padding: 12px var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-modal-close { transition: none; }
}