/* =============================================================
   ENYED — Generic & Content Sections Styles (8. Modül)

   Tasarım ritmi: koyu lacivert bölümler ile beyaz bölümler
   dönüşümlü. Beyaz bant için bölüme .panel--light eklenir.
   ============================================================= */
section.panel { position: relative; padding: 110px 60px; max-width: 1400px; margin: 0 auto; }

/* ---------- Beyaz bant ---------- */
/* Kenardan kenara beyaz zemin; içerik yine 1400px'te ortalanır. */
.panel--light {
  background: var(--bg-light);
  color: var(--fg-light);
  max-width: none;
  padding-left: max(60px, calc((100vw - 1400px) / 2 + 60px));
  padding-right: max(60px, calc((100vw - 1400px) / 2 + 60px));
}
/* Sayfanın ana başlığı h1, alt bölümlerinki h2; ikisi de aynı görünür.
   Üç sayfa (hizmetlerimiz, iletişim, ülkeler) başlığını h2 ile açıyor ve
   hiç h1 içermiyordu: ekran okuyucu sayfa başlığını bulamıyor, arama
   motorları da konuyu belirleyemiyordu.

   Bu yorum daha önce seçici listesinin ORTASINDA duruyordu. Yorum
   kaldırıldığında ".panel--light" bir sonraki satıra yapışıyor, h2 satırı
   ise önekini kaybedip serbest kalıyordu. Sonuç: beyaz panelin içindeki
   h2'ye kural hiç uygulanmıyor, başlık beyaz zeminde beyaz kalıyordu —
   "Dört adımda yurt dışı eğitim" görünmüyordu. */
.panel--light .section-head h1,
.panel--light .section-head h2 { color: var(--fg-light); }
.panel--light .section-head p,
.panel--light p { color: var(--dim-light); }
/* --gold-deep (#A8761A) beyaz zeminde 3.98:1 veriyor; .eyebrow 12px,
   yani WCAG AA için 4.5:1 gerekiyor. --gold-soft açık temada #8A6312
   (5.42:1), koyu temada zaten açık bir ton. */
.panel--light .eyebrow { color: #8A6312; }
.panel--light h1 em, .panel--light h2 em, .panel--light .hl { color: var(--gold-deep); }

.reveal { opacity: 0; transform: translateY(50px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

.section-head { text-align: center; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(28px, 4vw, 48px); letter-spacing: -1.2px; line-height: 1.1;
  color: var(--fg);
}
.section-head p { color: var(--dim); max-width: 560px; margin: 16px auto 0; font-weight: 400; line-height: 1.75; }

/* Sola hizalı başlık + sağda açıklama/düğme (tasarımdaki ikinci düzen). */
.section-head--split {
  text-align: left; display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: end;
}
.section-head--split p { margin: 0; max-width: 420px; }

/* =============================================================
   Process Grid — tasarımdaki program kartları
   ============================================================= */
/* =============================================================
   Başvuru süreci — "Nasıl Çalışır"

   Bölüm dört düz kutudan ibaretti: kenarlıklı bir kare, içinde daire
   rozet ve numara. Adımın ne olduğunu anlatan hiçbir işaret yoktu ve
   aralarındaki sıra ilişkisi görünmüyordu. Ayrıca ızgara dört sütuna
   sabitlenmişti ve hiçbir yerde duyarlı karşılığı yoktu, yani telefonda
   dört sütun yan yana ezilerek duruyordu.
   ============================================================= */
.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}

/* Adımları birbirine bağlayan çizgi: sıranın bir yolculuk olduğunu
   gösterir. Yalnızca dört kart yan yanayken çizilir. */
@media (min-width: 1000px) {
  .process-grid::before {
    content: "";
    position: absolute;
    top: 64px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent, var(--gold) 12%, var(--gold) 88%, transparent);
    opacity: .35;
    z-index: 0;
  }
}

.process-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 34px 28px 30px;
  background:
    linear-gradient(165deg, rgba(198, 144, 35, .07), transparent 46%),
    var(--card-dark);
  transition: transform .4s cubic-bezier(.22,1,.36,1), background .4s,
              border-color .4s, box-shadow .4s;
}

/* Üst kenardaki altın vurgu hover'da soldan sağa büyür. */
.process-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition: width .45s cubic-bezier(.22,1,.36,1);
}

.process-card:hover {
  transform: translateY(-8px);
  background:
    linear-gradient(165deg, rgba(198, 144, 35, .12), transparent 46%),
    var(--card-dark-hover);
  border-color: var(--gold);
  box-shadow: var(--shadow-card);
}

.process-card:hover::after { width: 100%; }

/* Köşedeki büyük hayalet rakam: numarayı rozetten çıkarıp
   kartın kendi dokusuna taşır. */
.step-ghost {
  position: absolute;
  top: 10px;
  right: 18px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 68px;
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
  opacity: .06;
  pointer-events: none;
  user-select: none;
}

/* Rozet artık rakam değil, adımın ne olduğunu anlatan ikon taşıyor. */
.step-badge {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy);
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  margin-bottom: 22px;
  transition: background .4s, color .4s, transform .4s;
}

.step-badge svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-card:hover .step-badge {
  background: var(--gold);
  /* --navy-deep diye bir değişken yok; yedeği doğru olduğu için sorun
     çıkarmıyordu ama aynı yazım hatası sessizce yanlış renk verebilir. */
  color: #011A3A;
  transform: scale(1.06);
}

.process-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 19px;
  margin-bottom: 10px;
  color: inherit;
  letter-spacing: -.01em;
}

.process-card p { color: var(--dim); font-size: 14.5px; line-height: 1.7; font-weight: 400; }

.process-card:nth-child(1) { transition-delay: 0s; }
.process-card:nth-child(2) { transition-delay: .08s; }
.process-card:nth-child(3) { transition-delay: .16s; }
.process-card:nth-child(4) { transition-delay: .24s; }

/* Beyaz bant içindeki kart görünümü */
.panel--light .process-card {
  background: var(--bg-light); border-color: var(--line-light);
  box-shadow: 0 2px 10px rgba(11, 37, 69, .05);
}
.panel--light .process-card:hover {
  background: var(--bg-light); border-color: var(--gold);
  box-shadow: 0 18px 36px rgba(11, 37, 69, .10);
}
.panel--light .step-ghost { color: var(--fg-light); opacity: .08; }
.panel--light .step-badge { background: var(--navy); color: var(--gold-bright); }
.panel--light .process-card:hover .step-badge { background: var(--gold); color: #fff; }
.panel--light .process-card h3 { color: var(--fg-light); }
.panel--light .process-card p { color: var(--dim-light); }

@media (max-width: 560px) {
  .process-card { padding: 28px 22px 26px; }
  .step-ghost { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-card,
  .process-card::after,
  .step-badge { transition: none; }
  .process-card:hover { transform: none; }
}

/* =============================================================
   Country Strip — destinasyon etiketleri
   ============================================================= */
.country-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.country-chip {
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 12px 24px; font-size: 14px; letter-spacing: .2px; font-weight: 500;
  color: var(--fg); background: var(--card-dark);
  transition: background .25s, transform .25s, border-color .25s, color .25s;
  text-decoration: none; display: inline-block;
}
.country-chip:hover {
  background: var(--gold); border-color: var(--gold); color: #0B1220;
  transform: translateY(-3px); box-shadow: var(--shadow-gold);
}
.panel--light .country-chip { color: var(--fg-light); border-color: var(--line-light); background: var(--bg-light); }

/* =============================================================
   CTA Band
   ============================================================= */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center; padding: 96px 40px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}

/* Bant düz bir zemindi; arka plan fotoğrafı metnin altında kalacak
   kadar koyulaştırılıyor. */
.cta-band-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.cta-band-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(198, 144, 35, .18), transparent 70%),
    linear-gradient(180deg, rgba(7, 19, 34, .88), rgba(7, 19, 34, .94));
}

body.light .cta-band-bg::after {
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(198, 144, 35, .16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .95));
}

/* İçerik fotoğrafın üstünde kalır. */
.cta-band > :not(.cta-band-bg) { position: relative; z-index: 1; }
.cta-band h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(28px, 4vw, 46px); letter-spacing: -1.2px; margin-bottom: 20px;
}
.cta-band h2 em { color: var(--gold-bright); font-style: normal; }
.cta-band p { color: var(--dim); margin-bottom: 32px; font-size: 16px; }

/* =============================================================
   Stats Impact
   ============================================================= */
.stats-impact { position: relative; padding: 130px 40px; overflow: hidden; text-align: center; }
.stats-impact-bg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: min(22vw, 320px);
  color: rgba(198, 144, 35, .05); white-space: nowrap; letter-spacing: -6px; user-select: none; z-index: 0;
}
/* Sayaç ızgarası da dört sütuna sabitlenmişti ve duyarlı karşılığı
   yoktu: dar ekranda dört sayı yan yana ezilerek okunmaz oluyordu. */
.stats-impact-grid {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px;
}
.impact-stat b {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(38px, 5vw, 64px);
  display: block; letter-spacing: -2px; color: var(--gold-bright);
}
.impact-stat small { color: var(--dim); font-size: 12.5px; letter-spacing: .4px; text-transform: none; margin-top: 8px; display: block; }

/* =============================================================
   Img Band
   ============================================================= */
.img-band { position: relative; height: 74vh; min-height: 440px; overflow: hidden; display: flex; align-items: flex-end; }
.img-band-bg {
  position: absolute; inset: -8% 0; background-size: cover; background-position: center;
  filter: brightness(.7); will-change: transform;
}
.img-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 19, 34, .25), rgba(7, 19, 34, .5) 55%, rgba(7, 19, 34, .96));
}
.img-band-content { position: relative; z-index: 2; padding: 0 60px 56px; max-width: 640px; }
.img-band .eyebrow { margin-bottom: 14px; color: var(--gold-soft); transition: color .4s; }
.img-band h2 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(26px, 3.6vw, 42px); letter-spacing: -1.2px; line-height: 1.12; color: #fff; transition: color .4s; }
.img-band h2 em { color: var(--gold-bright); font-style: normal; }
.img-band p { color: #C9D4E2; margin-top: 16px; font-weight: 400; line-height: 1.75; font-size: 15px; max-width: 480px; transition: color .4s; }

/* Tasarımdaki alıntı kutusu */
.img-band-quote {
  position: absolute; right: 60px; bottom: 56px; z-index: 3;
  max-width: 340px; padding: 26px 28px; border-radius: var(--radius-card);
  background: rgba(7, 19, 34, .72); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: "Space Grotesk", sans-serif; font-style: italic;
  font-size: 17px; line-height: 1.5; color: #fff;
}
.img-band-quote cite {
  display: block; margin-top: 14px; font-style: normal; font-size: 12px;
  letter-spacing: 2px; color: var(--gold-bright);
}

/* =============================================================
   Testimonials
   ============================================================= */
.testimonials { padding: 110px 0; position: relative; }
.testimonials-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center 30%;
  filter: grayscale(1); opacity: .07; z-index: 0;
}
.testimonials > * { position: relative; z-index: 1; }
.testimonials .section-head { padding: 0 60px; }
.testi-track {
  display: flex; gap: 22px; overflow-x: auto; padding: 10px 60px 30px; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-card {
  flex: 0 0 min(400px, 84vw); scroll-snap-align: start; border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 32px 28px; background: var(--card-dark);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  transition: transform .4s, background .4s, border-color .4s;
}
.testi-card:hover { transform: translateY(-6px); background: var(--card-dark-hover); border-color: var(--gold); }
.testi-quote { font-size: 15.5px; line-height: 1.75; font-weight: 400; color: #E8EDF4; }
.testi-quote::before { content: "\201C"; font-family: "Space Grotesk", sans-serif; font-size: 40px; color: var(--gold-bright); display: block; line-height: .6; margin-bottom: 8px; }
.testi-person { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: #0B1220;
  display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.testi-person b { font-size: 14px; display: block; }
.testi-person span { color: var(--dim); font-size: 12.5px; }

/* =============================================================
   Blog
   ============================================================= */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
  border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden;
  background: var(--card-dark); transition: transform .4s, background .4s, border-color .4s, box-shadow .4s;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.blog-card:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: var(--shadow-card); }
.blog-card-img { height: 200px; overflow: hidden; position: relative; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.blog-card:hover .blog-card-img img { transform: scale(1.08); }
.blog-card-tag {
  position: absolute; top: 14px; left: 14px; background: var(--gold);
  color: #0B1220; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.blog-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card-date { font-size: 12px; letter-spacing: .4px; text-transform: none; color: var(--dim); }
.blog-card h3 { font-family: "Space Grotesk", sans-serif; font-size: 18px; line-height: 1.35; font-weight: 700; }
.blog-card p { color: var(--dim); font-size: 14px; line-height: 1.65; font-weight: 400; flex: 1; }

/* Tasarımda "Detaylı Bilgi →" altın ve alt çizgili. */
.blog-card-more {
  display: inline-flex; align-items: center; gap: 8px; font-family: "Inter", sans-serif;
  font-size: 13.5px; font-weight: 500; letter-spacing: .2px; text-transform: none;
  margin-top: 4px; color: var(--gold-bright); text-decoration: underline;
  text-underline-offset: 4px;
}
.blog-card-more svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform .3s; }
.blog-card:hover .blog-card-more svg { transform: translateX(5px); }

/* Beyaz bant içindeki blog kartları */
.panel--light .blog-card { background: var(--bg-light); border-color: var(--line-light); box-shadow: 0 2px 10px rgba(11, 37, 69, .05); }
.panel--light .blog-card:hover { border-color: var(--gold); box-shadow: 0 18px 36px rgba(11, 37, 69, .10); }
.panel--light .blog-card h3 { color: var(--fg-light); }
.panel--light .blog-card p, .panel--light .blog-card-date { color: var(--dim-light); }
.panel--light .blog-card-more { color: var(--gold-deep); }

/* =============================================================
   FAQ
   ============================================================= */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { border: 1px solid var(--line); border-radius: 16px; background: var(--card-dark); overflow: hidden; transition: background .3s, border-color .3s; }
.faq-item.open { border-color: var(--gold); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; background: none; border: none; color: inherit; text-align: left;
  font-family: "Space Grotesk", sans-serif; font-size: 16px; font-weight: 500;
}
.faq-item.open .faq-q { color: var(--gold-bright); }
.faq-q .plus { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.faq-q .plus::before { width: 14px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-q .plus::after { width: 1.6px; height: 14px; transform: translate(-50%, -50%); }
.faq-item.open .faq-q .plus::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }
.faq-item.open .faq-q .plus::before { transform: translate(-50%, -50%) rotate(180deg); }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a { padding: 0 26px 24px; color: var(--dim); font-size: 14.5px; line-height: 1.75; font-weight: 400; max-width: 640px; }

.panel--light .faq-item { background: var(--bg-light); border-color: var(--line-light); }
.panel--light .faq-q { color: var(--fg-light); }
.panel--light .faq-a { color: var(--dim-light); }

/* =============================================================
   Responsive Adjustments — Tablet (<900px)
   ============================================================= */
@media (max-width: 900px) {
  section.panel { padding: 70px 24px; }
  .panel--light { padding-left: 24px; padding-right: 24px; }
  .section-head { margin-bottom: 40px; }
  .section-head h2 { font-size: clamp(24px, 5vw, 36px); }
  .section-head p { font-size: 14.5px; margin-top: 12px; }
  .section-head--split { grid-template-columns: 1fr; gap: 18px; align-items: start; }

  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .process-card { padding: 24px 20px; border-radius: 16px; }
  .process-card b { font-size: 26px; margin-bottom: 12px; }

  .stats-impact { padding: 90px 24px; }
  .stats-impact-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  .img-band { height: 60vh; min-height: 380px; }
  .img-band-content { padding: 0 24px 40px; }
  .img-band-quote { position: static; margin: 20px 24px 0; max-width: none; }

  .testimonials { padding: 80px 0; }
  .testimonials .section-head { padding: 0 24px; }
  .testi-track { padding: 10px 24px 24px; gap: 16px; }
  .testi-card { flex: 0 0 min(360px, 80vw); padding: 26px 22px; border-radius: 16px; }

  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .cta-band { padding: 80px 24px; }
}

/* =============================================================
   Responsive Adjustments — Mobile (<560px)
   ============================================================= */
@media (max-width: 560px) {
  section.panel { padding: 50px 16px; }
  .panel--light { padding-left: 16px; padding-right: 16px; }
  .section-head { margin-bottom: 30px; }
  .section-head h2 { font-size: clamp(22px, 6.5vw, 28px); }

  .process-grid { grid-template-columns: 1fr; gap: 14px; }
  .process-card { padding: 20px 18px; }
  .process-card b { font-size: 24px; margin-bottom: 10px; }
  .process-card h3 { font-size: 17px; margin-bottom: 6px; }

  .country-strip { gap: 8px; }
  .country-chip { padding: 10px 16px; font-size: 13px; }

  .stats-impact { padding: 60px 16px; }
  .stats-impact-bg { font-size: 32vw; }
  .stats-impact-grid { grid-template-columns: 1fr; gap: 24px; }
  .impact-stat b { font-size: clamp(36px, 10vw, 48px); }

  .img-band { height: auto; min-height: 340px; padding-top: 70px; }
  .img-band-content { padding: 0 16px 28px; }
  .img-band p { font-size: 14px; }
  .img-band-quote { margin: 16px 16px 0; padding: 20px; font-size: 15.5px; }

  .testimonials { padding: 60px 0; }
  .testimonials .section-head { padding: 0 16px; }
  .testi-track { padding: 10px 16px 20px; gap: 14px; }
  .testi-card { flex: 0 0 88vw; padding: 22px 18px; }
  .testi-quote { font-size: 14.5px; }

  .blog-grid { grid-template-columns: 1fr; gap: 18px; }
  .blog-card-img { height: 180px; }
  .blog-card-body { padding: 18px 18px 20px; }

  .cta-band { padding: 60px 16px; }
  .cta-band p { margin-bottom: 24px; }

  .faq-list { gap: 10px; }
  .faq-item { border-radius: 14px; }
  .faq-q { padding: 16px 18px; font-size: 15px; }
  .faq-a { padding: 0 18px 18px; font-size: 13.5px; line-height: 1.65; }
}


/* =============================================================
   Destinasyon kartları — tasarımdaki görselli ızgara
   ============================================================= */
/* Kartlar sabit bir ızgaraydı; ülke sayısı arttıkça bölüm uzayıp
   gidiyordu. Yatay karusel: kaydırma tarayıcının kendi scroll-snap
   desteğiyle yapılıyor, karusel kitaplığı eklenmedi. */
.destination-carousel { position: relative; }

.destination-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding: 0 4px;
  padding-bottom: 6px;

  /* Kaydırma çubuğu gizlenir ama kaydırma erişilebilir kalır. */
  scrollbar-width: none;
}

.destination-track::-webkit-scrollbar { display: none; }

.destination-track:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: var(--radius-card);
}

.destination-track > .destination-tile {
  flex: 0 0 clamp(190px, 22vw, 240px);
  scroll-snap-align: start;
}

/* Oklar: kaydırılacak yer yoksa betik tarafından gizlenir. */
.dc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  transition: background .2s, border-color .2s, opacity .2s;
}

.dc-nav:hover { border-color: var(--gold); color: var(--gold-bright); }
.dc-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dc-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.dc-nav--prev { left: -16px; }
.dc-nav--next { right: -16px; }

@media (max-width: 900px) {
  .dc-nav--prev { left: 2px; }
  .dc-nav--next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .destination-track { scroll-behavior: auto; }
}

.destination-tile {
  position: relative; display: block; aspect-ratio: 4 / 5;
  border-radius: var(--radius-card); overflow: hidden;
  text-decoration: none; color: #fff;
  background: linear-gradient(160deg, #12263F, #0A1626);
  border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .35s;
}
.destination-tile:hover {
  transform: translateY(-6px); border-color: var(--gold);
  box-shadow: var(--shadow-card);
}

.destination-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.destination-tile:hover img { transform: scale(1.07); }

/* Kapak görseli yoksa ülke kodu */
.destination-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Space Grotesk", sans-serif; font-size: 44px; font-weight: 700;
  color: rgba(227, 180, 92, .35); letter-spacing: 2px;
}

/* Alt şerit: ülke adı + altın ok */
.destination-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(5, 14, 26, .88) 55%);
}
.destination-name {
  font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 600;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.destination-arrow {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--gold); color: var(--gold-bright);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s;
}
.destination-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.destination-tile:hover .destination-arrow { background: var(--gold); color: #0B1220; }

@media (max-width: 900px) {
  .destination-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .destination-name { font-size: 13.5px; }
}

@media (max-width: 480px) {
  .destination-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .destination-tile { aspect-ratio: 1 / 1; }
  .destination-arrow { width: 26px; height: 26px; }
}

/* Destinasyon kartındaki bayrak */
.destination-name { display: inline-flex; align-items: center; gap: 8px; }
.destination-name .flag {
  width: 24px; height: 18px; flex-shrink: 0;
  border-radius: 3px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}

/* =============================================================
   Form geri bildirim şeritleri ve bal küpü alanı
   ============================================================= */
.form-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  font-weight: 500;
  font-size: 14px;
}

.form-alert--error {
  background: rgba(224, 36, 36, .08);
  border: 1px solid rgba(224, 36, 36, .28);
  color: #E02424;
}

body.light .form-alert--error { color: #9B1C1C; }

/* Bal küpü alanı ekranda görünmez ama ekran okuyucudan da gizlenir
   (aria-hidden + tabindex=-1 ile birlikte). display:none kullanılmaz;
   bazı botlar gizli alanları atlıyor. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Görsel seçilmemiş bölüm arka planları: dış bir stok fotoğraf servisine
   gitmek yerine marka renklerinden bir degrade. */
.img-band-bg--empty,
.testimonials-bg--empty {
  background-image:
    radial-gradient(90% 70% at 20% 20%, rgba(198, 144, 35, .22), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, #071322 70%);
  filter: none;
}

/* =============================================================
   Çerez onay şeridi
   ============================================================= */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9500;
  background: var(--bg-elevated);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .35);
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  /* Kategoriler açıldığında şerit ekranı kaplamasın; uzun metinlerde
     içerik kaydırılır. */
  max-height: 70vh;
  overflow-y: auto;
}

.cookie-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  /* Şeride max-height verilince satırlar varsayılan "stretch" ile o
     yüksekliğe yayılıyor ve metinle düğmeler arasında kocaman bir boşluk
     kalıyordu. Satırlar üstte toplanır. */
  align-content: flex-start;
  gap: 16px 24px;
  flex-wrap: wrap;
}

.cookie-banner-text { flex: 1 1 420px; min-width: 0; }
.cookie-banner-text strong { display: block; color: var(--fg); font-size: 15px; margin-bottom: 4px; }

.cookie-banner-text p {
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 70ch;
}

.cookie-banner-text a { color: var(--gold-bright); text-decoration: underline; }

.cookie-details { margin-top: 10px; }

.cookie-details summary {
  cursor: pointer;
  color: var(--gold-bright);
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}

/* <details> kapalıyken çocuklarını gizlemek için display:none uygular;
   buradaki açık "display: grid" tanımı onu eziyor ve kategori listesi
   şerit kapalıyken de yer kaplıyordu (banner 510px yüksekliğe çıkıyordu).
   Panelde [hidden] ile yaşanan sorunun aynısı. */
.cookie-details:not([open]) .cookie-options { display: none; }

.cookie-options {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.cookie-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.cookie-option input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; }
.cookie-option strong { display: block; color: var(--fg); font-size: 13.5px; margin-bottom: 0; }
.cookie-option small { color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.cookie-option--locked { cursor: default; opacity: .75; }

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

/* Reddetme ve kabul düğmeleri aynı boyutta: KVKK gereği reddetmek
   kabul etmek kadar kolay olmalı, biri silik bırakılamaz. */
.cookie-btn {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}

.cookie-btn:hover { background: var(--card-dark-hover); border-color: var(--gold); }

.cookie-btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #071322;
}

.cookie-btn--primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #071322; }
.cookie-btn--ghost { border-style: dashed; }

body.light .cookie-banner { box-shadow: 0 -18px 40px rgba(1, 36, 78, .12); }
body.light .cookie-btn--primary { color: #fff; }
body.light .cookie-btn--primary:hover { color: #fff; }

@media (max-width: 720px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 14px; }

  /* Düzen column'a döndüğünde flex-basis ana eksen olarak YÜKSEKLİĞE
     uygulanıyor: "flex: 1 1 420px" metin bloğunu 420px yüksekliğe
     zorluyor ve şerit ekranın %70'ini kaplıyordu. */
  .cookie-banner-text { flex: 0 0 auto; }

  .cookie-banner-actions { width: 100%; }
  .cookie-btn { flex: 1 1 140px; text-align: center; }
}

/* Öğrenci kartındaki fotoğraf (baş harf yerine gerçek görsel). */
.testi-avatar--photo {
  object-fit: cover;
  padding: 0;
  overflow: hidden;
}

/* Panelden girilen bölüm alt başlığı. Alan editörde sunuluyordu ama
   görünümler onu hiç basmıyordu; artık basıldığı için bir stili gerekti. */
.section-head .section-sub {
  margin: 10px 0 0;
  max-width: 62ch;
  /* --muted diye bir değişken yok; kural sabit #8b93a7'ye düşüyor ve
     temayla dönmüyordu. Açık temada beyaz üzerinde 3.07:1 kalıyor, yani
     WCAG AA'nın normal metin için istediği 4.5'in altında. Doğru değişken
     --dim: koyu temada #93A4BC, açık temada #5A6B82. */
  color: var(--dim);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
}

/* =============================================================
   HUKUKİ BELGE SAYFASI

   Sayfa satır içi stillerle ve sabit koyu renklerle yazılmıştı;
   açık temada beyaz sayfanın ortasında siyah bir kart kalıyordu.
   Editörden gelen içeriğin (.legal-rendered-body) ise hiç stili
   yoktu: başlıklar ve numaralı maddeler tarayıcı varsayılanlarıyla
   çiziliyordu.
   ============================================================= */
.legal-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 120px 24px 100px;
}

.legal-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.legal-card--head { margin-bottom: 2rem; }

.legal-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.legal-status {
  background: rgba(198, 144, 35, .14);
  color: var(--gold-bright);
  border: 1px solid rgba(198, 144, 35, .34);
  border-radius: 6px;
  padding: .3rem .8rem;
  font-size: .8rem;
  font-weight: 700;
}

.legal-print {
  padding: .5rem 1rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
}

.legal-print:hover { border-color: var(--gold); color: var(--gold-bright); }

.legal-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 .75rem;
  line-height: 1.15;
}

.legal-org { color: var(--dim); font-size: .9rem; margin: 0; }

.legal-fallback {
  background: rgba(198, 144, 35, .12);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--gold-bright);
  font-size: .92rem;
}

/* ---------- Editörden gelen metin ---------- */

.legal-rendered-body {
  color: var(--dim);
  font-size: 1.05rem;
  line-height: 1.85;
}

.legal-rendered-body h2,
.legal-rendered-body h3,
.legal-rendered-body h4 {
  font-family: "Space Grotesk", sans-serif;
  color: var(--fg);
  line-height: 1.3;
  margin: 2rem 0 .85rem;
}

.legal-rendered-body h2 { font-size: 1.5rem; }
.legal-rendered-body h3 { font-size: 1.22rem; }
.legal-rendered-body h4 { font-size: 1.05rem; }
.legal-rendered-body > :first-child { margin-top: 0; }

.legal-rendered-body p { margin: 0 0 1.25rem; }

.legal-rendered-body ol,
.legal-rendered-body ul { margin: 0 0 1.25rem; padding-left: 1.6rem; }
.legal-rendered-body li { margin-bottom: .5rem; }

.legal-rendered-body a { color: var(--gold-bright); text-decoration: underline; }
.legal-rendered-body a:hover { color: var(--gold); }

.legal-rendered-body strong { color: var(--fg); }

.legal-rendered-body blockquote {
  margin: 1.5rem 0;
  padding: .3rem 0 .3rem 1.1rem;
  border-left: 3px solid var(--gold);
  color: var(--fg);
}

.legal-rendered-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: .95rem;
}

.legal-rendered-body th,
.legal-rendered-body td {
  border: 1px solid var(--line);
  padding: .6rem .8rem;
  text-align: left;
}

.legal-rendered-body th { color: var(--fg); background: var(--bg-sunken); }

.legal-rendered-body hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Quill girinti ve hizalama sınıfları: içerikte üretiliyor ama
   sitede hiç tanımlı değildi, girintiler kayboluyordu. */
.legal-rendered-body .ql-indent-1 { padding-left: 3rem; }
.legal-rendered-body .ql-indent-2 { padding-left: 6rem; }
.legal-rendered-body .ql-indent-3 { padding-left: 9rem; }
.legal-rendered-body .ql-align-center { text-align: center; }
.legal-rendered-body .ql-align-right { text-align: right; }
.legal-rendered-body .ql-align-justify { text-align: justify; }

/* Yazdırma: ziyaretçiye "Yazdır / PDF indir" düğmesi sunuluyor ama
   çıktıda menü, kart zemini ve düğmenin kendisi de basılıyordu. */
@media print {
  .legal-page { padding: 0; max-width: none; }
  .legal-card { border: 0; padding: 0; background: none; }
  .legal-card--head { margin-bottom: 1.5rem; }
  .legal-print, .legal-status { display: none; }
  .legal-title, .legal-rendered-body, .legal-rendered-body h2,
  .legal-rendered-body h3, .legal-rendered-body h4 { color: #000; }
  .legal-rendered-body a { color: #000; }
}

/* ---------- Kurumsal: Hakkımızda ---------- */

.about-intro { padding-top: calc(var(--header-height) + 48px); }
.about-intro .section-head { text-align: center; }
.about-lede { margin-left: auto; margin-right: auto; }
.about-stats { margin-top: 3rem; }

.about-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.about-story-text h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--fg);
  margin: 0 0 1.25rem;
  line-height: 1.25;
}

.about-story-text p {
  color: var(--dim);
  line-height: 1.8;
  margin: 0 0 1.1rem;
  font-size: 1.02rem;
}

.about-story-text p:last-child { margin-bottom: 0; }

.about-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}

@media (max-width: 520px) {
  .about-values { grid-template-columns: 1fr; }
}

/* ---------- Kurumsal: Şubelerimiz ---------- */

.branches-page { padding-top: calc(var(--header-height) + 48px); }
.branches-page .section-head { text-align: center; }
.branches-lede { margin-left: auto; margin-right: auto; }

.branch-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.75rem;
}

.branch-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.branch-card:hover { border-color: var(--gold); }

.branch-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.branch-region {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .35rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--fg);
}

.branch-hours {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--gold-bright);
  font-size: .85rem;
}

.branch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-bright);
  flex-shrink: 0;
}

.branch-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 1rem;
  line-height: 1.25;
}

.branch-address {
  color: var(--dim);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.branch-meta { margin: 0 0 1.75rem; display: grid; gap: 1rem; }

.branch-meta-row { display: flex; align-items: flex-start; gap: .9rem; }

.branch-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(198, 144, 35, .12);
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.branch-icon svg { width: 20px; height: 20px; }

.branch-meta dt { color: var(--dim); font-size: .82rem; margin-bottom: .15rem; }
.branch-meta dd { margin: 0; color: var(--fg); font-weight: 500; }
.branch-meta dd a { color: var(--fg); text-decoration: none; }
.branch-meta dd a:hover { color: var(--gold-bright); text-decoration: underline; }

.branch-actions { margin-top: auto; display: flex; gap: .75rem; flex-wrap: wrap; }
.branch-actions .btn-ghost { flex: 1; text-align: center; white-space: nowrap; }

.branches-empty {
  margin-top: 3rem;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--bg-elevated);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
}

.branches-empty p { color: var(--dim); font-size: 1.1rem; margin: 0; }

/* ---------- Öğrenci haritası sayfası ---------- */

.studentmap-page { padding-top: calc(var(--header-height) + 48px); }
.studentmap-lede { margin-top: .6rem; }

.studentmap-filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 2rem;
  padding: 1.2rem 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.smf-field { display: flex; flex-direction: column; gap: .35rem; }

.smf-field label {
  color: var(--dim);
  font-size: .85rem;
  font-weight: 500;
}

.smf-field select {
  padding: .6rem 1rem;
  border-radius: 8px;
  background: var(--bg-sunken);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  font-size: .9rem;
  min-width: 190px;
}

.smf-field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.smf-clear { color: var(--dim); font-size: .88rem; align-self: center; }
.smf-clear:hover { color: var(--gold-bright); }

.studentmap-count { color: var(--dim); font-size: .9rem; margin: 1.5rem 0 0; }

.studentmap-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.student-card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
}

.student-card:hover { border-color: var(--gold); }

.student-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.student-program {
  background: rgba(198, 144, 35, .14);
  color: var(--gold-bright);
  border: 1px solid rgba(198, 144, 35, .32);
  border-radius: 6px;
  padding: .25rem .6rem;
  font-size: .78rem;
  font-weight: 600;
}

.student-year { color: var(--dim); font-size: .85rem; }

.student-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 .4rem;
}

.student-place { margin: 0 0 1rem; font-size: .9rem; line-height: 1.5; }
.student-place strong { display: block; color: var(--gold-bright); font-weight: 600; }
.student-place span { color: var(--dim); }

.student-quote {
  margin: auto 0 0;
  font-style: italic;
  color: var(--dim);
  font-size: .94rem;
  line-height: 1.65;
  background: var(--bg-sunken);
  border-left: 3px solid var(--gold);
  padding: .8rem 1rem;
  border-radius: 0 8px 8px 0;
}

.studentmap-empty {
  margin-top: 2rem;
  text-align: center;
  padding: 3.5rem 2rem;
  background: var(--bg-elevated);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
}

.studentmap-empty p { color: var(--dim); font-size: 1.05rem; margin: 0 0 1.25rem; }

/* Öğrenci haritasındaki küre. Ana sayfadaki .stage hero düzeninin
   içinde konumlanıyor; burada sayfanın merkezinde duran bir sahne. */
.studentmap-stage {
  position: relative;
  height: min(600px, 74vh);
  margin-top: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(198, 144, 35, .10), transparent 62%),
    var(--bg-sunken);
}

/* Küre kenarının kutu köşelerine dayanmaması için nefes payı. */
.studentmap-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .35);
}


/* ---------- Öğrenci haritası: özet ve kart başlığı ---------- */

.studentmap-count strong { color: var(--fg); font-weight: 700; }
.smc-sep { opacity: .45; margin: 0 .3rem; }

.student-head { display: flex; align-items: flex-start; gap: .9rem; }

.student-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}

.student-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(198, 144, 35, .14);
  color: var(--gold-bright);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
}

.student-head .student-name { margin-bottom: .25rem; }
.student-head .student-place { margin-bottom: 0; }

/* Filtre çubuğu küreden sonra geldiği için kendi başına bir araç
   çubuğu gibi durmalı. */
.studentmap-filters { margin-top: 2rem; }

@media (max-width: 640px) {
  .studentmap-stage { height: min(420px, 60vh); }
  .studentmap-filters { padding: 1rem; }
  .smf-field select { min-width: 0; width: 100%; }
  .smf-field { flex: 1 1 100%; }
}

/* Arka plan videosu: .img-band-bg bir <div> için yazılmıştı
   (background-image). <video> için kapsayıcıyı kaplayacak şekilde
   ölçeklenmesi gerekir. */
.img-band-bg--video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* =============================================================
   Hizmetler — kart bağlantısı ve detay sayfası

   Hizmet kartları artık kendi detay sayfasına giden birer <a>.
   .process-card display belirtmediği için bağlantı satır içi
   kalıyor, dolgu ve yükseklik çalışmıyordu.
   ============================================================= */
a.process-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.process-card-more {
  display: inline-block;
  margin-top: 16px;
  color: var(--gold-bright);
  font-weight: 600;
  font-size: .92rem;
}

body.light .process-card-more { color: var(--gold-deep); }

/* Sayfa yolu. Adı bilerek .breadcrumb değil: o ad globe.css'te
   kürenin kendi ülke/şehir gezintisine ait. */
.page-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: .88rem;
  color: var(--dim);
}

.page-crumbs a { color: var(--dim); text-decoration: none; }
.page-crumbs a:hover { color: var(--gold-bright); }
.page-crumbs [aria-current="page"] { color: var(--fg); font-weight: 600; }

body.light .page-crumbs,
body.light .page-crumbs a { color: var(--dim-light); }
body.light .page-crumbs a:hover { color: var(--gold-deep); }
body.light .page-crumbs [aria-current="page"] { color: var(--fg-light); }

.service-detail-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  margin-bottom: 36px;
}

body.light .service-detail-image { border-color: var(--line-light); }

/* Panelden girilen zengin metin: yönetici <p>, <h2>, <ul> yazabiliyor
   ve bunların sayfada bir karşılığı olmalı. */
.rich-text {
  max-width: 760px;
  margin: 0 auto;
  color: var(--dim);
  line-height: 1.8;
}

.rich-text h2,
.rich-text h3 { color: var(--fg); margin: 32px 0 12px; }
.rich-text p { margin: 0 0 16px; }
.rich-text ul,
.rich-text ol { margin: 0 0 16px; padding-left: 22px; }
.rich-text li { margin-bottom: 8px; }
.rich-text a { color: var(--gold-bright); }
.rich-text img { max-width: 100%; height: auto; border-radius: var(--radius-card); }

body.light .rich-text { color: var(--dim-light); }
body.light .rich-text h2,
body.light .rich-text h3 { color: var(--fg-light); }
body.light .rich-text a { color: var(--gold-deep); }

/* =============================================================
   Okul detay sayfası

   Sayfanın bütün düzeni satır içi style özniteliklerinde duruyordu;
   açık temada çalışmıyor, tema değişkenlerini kullanmıyordu. İğne
   rengi sabit mavi (#3b82f6) idi — palette olmayan bir renk.
   ============================================================= */
.school-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.school-cover {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  margin-bottom: 40px;
}

.school-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 64px;
  align-items: start;
}

.school-grid h2 {
  font-size: 22px;
  margin-bottom: 18px;
}

.school-intro {
  color: var(--dim);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 24px;
}

.school-content { max-width: none; margin: 0 0 24px; }

.school-website { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

.school-map-frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  height: 350px;
}

#schoolMap { width: 100%; height: 100%; }

/* Leaflet iğnesi: sitenin altın vurgusu. */
.school-pin span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid #fff;
  box-shadow: 0 0 12px rgba(198, 144, 35, .6);
}

.school-section { margin-bottom: 64px; }
.school-section h2 { font-size: 22px; margin-bottom: 18px; }

/* Video: 16:9 oranı korunur, yoksa çerçeve yüksekliği sıfır kalır. */
.school-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
}

.school-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.school-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.school-gallery figure { margin: 0; }

.school-gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  display: block;
}

.school-gallery figcaption {
  margin-top: 8px;
  font-size: .88rem;
  color: var(--dim);
}

body.light .school-cover,
body.light .school-map-frame,
body.light .school-video,
body.light .school-gallery img { border-color: var(--line-light); }

body.light .school-intro,
body.light .school-gallery figcaption { color: var(--dim-light); }

@media (max-width: 768px) {
  .school-grid { grid-template-columns: 1fr; gap: 28px; }
}