/* ==========================================================================
   Sosyal Zeka — ortak stil dosyası
   Tüm sayfalar bu dosyayı kullanır. Renk, boşluk, köşe ve gölge değerleri
   aşağıdaki değişkenlerden gelir; sayfalarda doğrudan kod yazma.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Yazı tipleri: sitenin kendi içinden (assets/fonts) yüklenir, dışarıya istek gitmez.
   Inter ve Nunito, SIL Open Font License 1.1 ile serbestçe kullanılabilir
   (lisans metinleri: assets/fonts/*-OFL.txt).
   "latin" dosyası temel harfleri ve ç, ö, ü, ı'yı; "latin-ext" dosyası ğ, ş, İ'yi içerir.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marka renkleri (CLAUDE.md, bölüm 4) */
  --renk-lacivert: #15314A;
  --renk-mercan: #E9514B;
  --renk-acik-mavi: #9AD7E9;
  --renk-buz: #E8F5FA;
  --renk-metin: #3D4A57;
  --renk-beyaz: #FFFFFF;

  /* Türetilmiş tonlar */
  --renk-mercan-koyu: #CF3B35;      /* düğme zemini: beyaz yazıyla yeterli kontrast */
  --renk-mercan-daha-koyu: #B3302B; /* düğme basılı / üzerine gelme */
  --renk-lacivert-koyu: #0F2537;
  --renk-lacivert-yumusak: #2A4A66;
  --renk-buz-koyu: #D3EDF6;
  --renk-cizgi: rgba(21, 49, 74, 0.12);
  --renk-zemin-metin-acik: rgba(255, 255, 255, 0.82);

  /* Yazı tipleri */
  --yazi-baslik: 'Nunito', system-ui, sans-serif;
  --yazi-govde: 'Inter', system-ui, sans-serif;

  /* Yazı ölçeği */
  --yazi-kucuk: 0.875rem;  /* 14px */
  --yazi-alt-bilgi-kucuk: 0.9375rem; /* 15px: alt bilgide en küçük yazı */
  --yazi-normal: 1rem;     /* 16px */
  --yazi-orta: 1.125rem;   /* 18px */
  --yazi-buyuk: 1.375rem;  /* 22px */
  --yazi-b3: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --yazi-b2: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --yazi-b1: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem);

  /* Boşluk ölçeği */
  --bosluk-1: 0.25rem;  /* 4  */
  --bosluk-2: 0.5rem;   /* 8  */
  --bosluk-3: 0.75rem;  /* 12 */
  --bosluk-4: 1rem;     /* 16 */
  --bosluk-5: 1.5rem;   /* 24 */
  --bosluk-6: 2rem;     /* 32 */
  --bosluk-7: 3rem;     /* 48 */
  --bosluk-8: 4rem;     /* 64 */
  --bosluk-9: 6rem;     /* 96 */

  /* Köşeler */
  --kose-kucuk: 8px;
  --kose-orta: 16px;
  --kose-buyuk: 28px;
  --kose-dev: 48px;
  --kose-hap: 999px;

  /* Gölgeler (laciverten türetilmiş, katmanlı) */
  --golge-1: 0 1px 2px rgba(21, 49, 74, 0.06), 0 2px 6px rgba(21, 49, 74, 0.05);
  --golge-2: 0 1px 2px rgba(21, 49, 74, 0.06), 0 6px 16px rgba(21, 49, 74, 0.08), 0 16px 32px rgba(21, 49, 74, 0.06);
  --golge-3: 0 2px 4px rgba(21, 49, 74, 0.08), 0 12px 28px rgba(21, 49, 74, 0.12), 0 32px 64px rgba(21, 49, 74, 0.10);

  /* Düzen */
  --genislik-icerik: 72rem;  /* 1152px */
  --kenar-boslugu: var(--bosluk-4);
  --ust-menu-yukseklik: 4.5rem;

  /* Hareket */
  --sure-kisa: 160ms;
  --sure-orta: 240ms;
  --egri: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 48rem) {
  :root { --kenar-boslugu: var(--bosluk-6); }
}

/* --------------------------------------------------------------------------
   Temel
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ust-menu-yukseklik) + var(--bosluk-4));
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--renk-beyaz);
  color: var(--renk-metin);
  font-family: var(--yazi-govde);
  font-size: var(--yazi-normal);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  color: var(--renk-lacivert);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: var(--yazi-b1); font-weight: 800; }
h2 { font-size: var(--yazi-b2); font-weight: 800; }
h3 { font-size: var(--yazi-b3); font-weight: 700; }

p { margin: 0 0 var(--bosluk-4); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--renk-lacivert); text-underline-offset: 0.2em; }

:focus-visible {
  outline: 3px solid var(--renk-mercan);
  outline-offset: 3px;
  border-radius: var(--kose-kucuk);
}

.kapsayici {
  width: 100%;
  max-width: calc(var(--genislik-icerik) + 2 * var(--kenar-boslugu));
  margin-inline: auto;
  padding-inline: var(--kenar-boslugu);
}

.ekran-okuyucu {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icerige-gec {
  position: absolute;
  left: var(--bosluk-4);
  top: var(--bosluk-2);
  z-index: 100;
  padding: var(--bosluk-2) var(--bosluk-4);
  background: var(--renk-lacivert);
  color: var(--renk-beyaz);
  border-radius: var(--kose-kucuk);
  font-weight: 600;
  transform: translateY(-200%);
}
.icerige-gec:focus { transform: none; }

/* Eksik bilgi notu (yayından önce hepsi doldurulacak) */
.eksik {
  display: inline;
  background: #FFF3C4;
  color: #5A4500;
  padding: 0 var(--bosluk-1);
  border-radius: 4px;
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   Düğmeler
   -------------------------------------------------------------------------- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  min-height: 2.75rem;
  padding: var(--bosluk-2) var(--bosluk-5);
  border: 2px solid transparent;
  border-radius: var(--kose-hap);
  font-family: var(--yazi-govde);
  font-size: var(--yazi-normal);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--sure-kisa) var(--egri), background-color var(--sure-kisa) var(--egri);
}
.dugme:active { transform: translateY(1px) scale(0.98); }

.dugme--birincil {
  background: var(--renk-mercan-koyu);
  color: var(--renk-beyaz);
  box-shadow: 0 1px 2px rgba(21, 49, 74, 0.10), 0 4px 12px rgba(207, 59, 53, 0.22);
}
.dugme--birincil:hover { background: var(--renk-mercan-daha-koyu); }

.dugme--ikincil {
  background: var(--renk-beyaz);
  color: var(--renk-lacivert);
  border-color: var(--renk-lacivert);
}
.dugme--ikincil:hover { background: var(--renk-buz); }

.dugme svg { width: 1.125rem; height: 1.125rem; flex: none; }

/* --------------------------------------------------------------------------
   Üst menü
   -------------------------------------------------------------------------- */

.ust-menu {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--renk-cizgi);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
}

.ust-menu__ic {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  min-height: var(--ust-menu-yukseklik);
  flex-wrap: wrap;
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-3);
  text-decoration: none;
  color: var(--renk-lacivert);
  border-radius: var(--kose-orta);
  padding-block: var(--bosluk-2);
  margin-right: auto;
}
.marka img { width: 3.25rem; height: auto; }
.marka__ad {
  font-family: var(--yazi-baslik);
  font-weight: 800;
  font-size: var(--yazi-buyuk);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Menü düğmesi (yalnızca JavaScript açıkken ve dar ekranda görünür) */
.menu-dugmesi {
  display: none;
  align-items: center;
  gap: var(--bosluk-2);
  min-height: 2.75rem;
  padding: var(--bosluk-2) var(--bosluk-4);
  border: 2px solid var(--renk-cizgi);
  border-radius: var(--kose-hap);
  background: var(--renk-beyaz);
  color: var(--renk-lacivert);
  font: 600 var(--yazi-normal)/1 var(--yazi-govde);
  cursor: pointer;
  transition: background-color var(--sure-kisa) var(--egri);
}
.menu-dugmesi:hover { background: var(--renk-buz); }
.menu-dugmesi:active { transform: scale(0.97); }
.menu-dugmesi__simge { position: relative; width: 18px; height: 12px; }
.menu-dugmesi__simge span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--sure-orta) var(--egri), opacity var(--sure-kisa) var(--egri);
}
.menu-dugmesi__simge span:nth-child(1) { top: 0; }
.menu-dugmesi__simge span:nth-child(2) { top: 5px; }
.menu-dugmesi__simge span:nth-child(3) { top: 10px; }
.menu-dugmesi[aria-expanded="true"] .menu-dugmesi__simge span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-dugmesi[aria-expanded="true"] .menu-dugmesi__simge span:nth-child(2) { opacity: 0; }
.menu-dugmesi[aria-expanded="true"] .menu-dugmesi__simge span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Gezinme alanı: telefon (JavaScript yoksa altta açık liste) */
.gezinme {
  width: 100%;
  padding-bottom: var(--bosluk-4);
}
.gezinme__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-1);
}
.gezinme__baglanti {
  position: relative;
  display: block;
  padding: var(--bosluk-3) var(--bosluk-4);
  border-radius: var(--kose-orta);
  color: var(--renk-lacivert);
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: var(--yazi-orta);
  text-decoration: none;
  transition: background-color var(--sure-kisa) var(--egri);
}
.gezinme__baglanti:hover { background: var(--renk-buz); }
.gezinme__baglanti:active { background: var(--renk-buz-koyu); }

/* Bulunulan sayfa: küçük konuşma balonu */
.gezinme__baglanti[aria-current="page"] { background: var(--renk-buz); }
.gezinme__baglanti[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--renk-buz);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.gezinme__giris { margin-top: var(--bosluk-4); }
.gezinme__giris .dugme { width: 100%; }

/* JavaScript açık + dar ekran: menü düğmeyle açılır */
.js .menu-dugmesi { display: inline-flex; }
.js .gezinme { display: none; }
.js .gezinme.acik { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .js .gezinme.acik { animation: menu-acil var(--sure-orta) var(--egri); }
}
@keyframes menu-acil {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Geniş ekran: menü tek satırda */
@media (min-width: 64rem) {
  .ust-menu__ic { flex-wrap: nowrap; gap: var(--bosluk-5); }
  .js .menu-dugmesi { display: none; }
  .gezinme, .js .gezinme {
    display: flex;
    align-items: center;
    gap: var(--bosluk-5);
    width: auto;
    padding: 0;
  }
  .gezinme__liste { flex-direction: row; gap: var(--bosluk-1); }
  .gezinme__baglanti {
    padding: var(--bosluk-2) var(--bosluk-3);
    font-size: var(--yazi-normal);
    border-radius: var(--kose-orta);
  }
  .gezinme__baglanti[aria-current="page"]::after {
    left: 14px;
    bottom: -5px;
    width: 10px;
    height: 10px;
  }
  .gezinme__giris {
    margin: 0;
    padding-left: var(--bosluk-5);
    border-left: 1px solid var(--renk-cizgi);
  }
  .gezinme__giris .dugme { width: auto; }
}

/* --------------------------------------------------------------------------
   Alt bilgi
   -------------------------------------------------------------------------- */

.alt-bilgi {
  position: relative;
  margin-top: var(--bosluk-9);
  background: var(--renk-lacivert);
  color: var(--renk-zemin-metin-acik);
  border-radius: var(--kose-dev) var(--kose-dev) 0 0;
  padding-top: var(--bosluk-9);
}

/* Logo: beyaz daire içinde, alt bilginin üst kenarına taşar */
.alt-bilgi__rozet {
  position: absolute;
  top: 0;
  left: var(--kenar-boslugu);
  transform: translateY(-50%);
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: var(--renk-beyaz);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 4px rgba(21, 49, 74, 0.08), 0 12px 28px rgba(21, 49, 74, 0.14);
}
.alt-bilgi__rozet img { width: 78%; }

@media (min-width: 72rem) {
  .alt-bilgi__rozet { left: max(var(--kenar-boslugu), calc((100% - var(--genislik-icerik)) / 2)); }
}

/* Telefon: marka ve iletişim tam genişlik; Sayfalar ve Dijital platformlar yan yana */
.alt-bilgi__izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bosluk-6) var(--bosluk-5);
  padding-bottom: var(--bosluk-6);
}
.alt-bilgi__marka,
.alt-bilgi__iletisim { grid-column: 1 / -1; }

.alt-bilgi__marka-ad {
  font-family: var(--yazi-baslik);
  font-weight: 800;
  font-size: var(--yazi-b3);
  color: var(--renk-beyaz);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--bosluk-1);
}
.alt-bilgi__slogan {
  font-family: var(--yazi-baslik);
  font-weight: 600;
  font-size: var(--yazi-orta);
  color: var(--renk-acik-mavi);
  margin: 0 0 var(--bosluk-4);
}
.alt-bilgi__konum { margin: 0; }

.alt-bilgi h2 {
  font-size: var(--yazi-normal);
  font-weight: 700;
  color: var(--renk-acik-mavi);
  letter-spacing: 0;
  margin-bottom: var(--bosluk-3);
}

.alt-bilgi__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.alt-bilgi a {
  color: var(--renk-beyaz);
  text-decoration: none;
  border-radius: 4px;
  transition: color var(--sure-kisa) var(--egri);
}
/* Parmakla rahat dokunulsun: her bağlantı en az 44px yüksekliğinde */
.alt-bilgi__liste a,
.alt-bilgi__alt a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  line-height: 1.35;
}
.alt-bilgi__liste li + li { margin-top: var(--bosluk-1); }
.alt-bilgi a:hover { color: var(--renk-acik-mavi); text-decoration: underline; }
.alt-bilgi a:active { color: var(--renk-buz-koyu); }
.alt-bilgi :focus-visible { outline-color: var(--renk-acik-mavi); }

.alt-bilgi__aciklama {
  display: block;
  font-size: var(--yazi-alt-bilgi-kucuk);
  line-height: 1.5;
  color: var(--renk-zemin-metin-acik);
  margin-top: calc(-1 * var(--bosluk-1));
  margin-bottom: var(--bosluk-2);
}

.alt-bilgi__alt {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: var(--bosluk-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--bosluk-6);
  justify-content: space-between;
  font-size: var(--yazi-alt-bilgi-kucuk);
}
.alt-bilgi__alt p { margin: 0; }

@media (min-width: 64rem) {
  .alt-bilgi__izgara { grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr; gap: var(--bosluk-6); padding-bottom: var(--bosluk-7); }
  .alt-bilgi__marka,
  .alt-bilgi__iletisim { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   Hareket azaltma tercihi
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Ortak bölüm parçaları
   ========================================================================== */

.bolum { padding-block: var(--bosluk-8); }
@media (min-width: 64rem) { .bolum { padding-block: var(--bosluk-9); } }

.bolum--buz {
  background: var(--renk-buz);
  border-radius: var(--kose-dev);
}

.metin { max-width: 38rem; }
.metin h2 { margin-bottom: var(--bosluk-5); }

.bolum__giris { max-width: 38rem; margin-bottom: var(--bosluk-7); }
.bolum__giris h2 { margin-bottom: var(--bosluk-3); }
.bolum__giris-metni { font-size: var(--yazi-orta); margin: 0; }

.dugme-grubu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
}

/* Metin içi bağlantı: mercan alt çizgi */
.yazi-baglanti {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--renk-lacivert);
  text-decoration: underline;
  text-decoration-color: var(--renk-mercan);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  transition: color var(--sure-kisa) var(--egri);
}
.yazi-baglanti:hover { color: var(--renk-mercan-koyu); }
.yazi-baglanti:active { color: var(--renk-mercan-daha-koyu); }
.yazi-baglanti--koyu-zemin { color: var(--renk-beyaz); text-decoration-color: var(--renk-acik-mavi); }
.yazi-baglanti--koyu-zemin:hover { color: var(--renk-acik-mavi); }
.yazi-baglanti--koyu-zemin:focus-visible { outline-color: var(--renk-acik-mavi); }

/* ==========================================================================
   Ana Sayfa
   ========================================================================== */

/* 1. Açılış -------------------------------------------------------------- */
.acilis {
  background: var(--renk-buz);
  border-radius: 0 0 var(--kose-dev) var(--kose-dev);
  padding-block: var(--bosluk-7) var(--bosluk-8);
  overflow: hidden;
}
.acilis__izgara {
  display: grid;
  gap: var(--bosluk-6);
  align-items: center;
}
.acilis__ust {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  font-weight: 600;
  color: var(--renk-lacivert-yumusak);
  margin-bottom: var(--bosluk-4);
}
.acilis__ust::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--renk-mercan);
  flex: none;
}
.acilis h1 { max-width: 12ch; margin-bottom: var(--bosluk-5); }
.acilis__alt {
  font-size: var(--yazi-orta);
  max-width: 34rem;
  margin-bottom: var(--bosluk-6);
}
.acilis__cizim {
  width: 100%;
  max-width: 17rem;
  height: auto;
  justify-self: center;
  overflow: visible;
}

/* Tablet ve geniş ekran: başlık tam iki satır ("Sosyal dünyayı / anlamanın bilimi.").
   Telefonda satırlar kendiliğinden bölünür. */
@media (min-width: 48rem) {
  .acilis h1 { max-width: none; }
  .acilis__satir { display: block; white-space: nowrap; }
}

@media (min-width: 64rem) {
  .acilis { padding-block: var(--bosluk-9); }
  .acilis__izgara { grid-template-columns: 1.15fr 0.85fr; gap: var(--bosluk-7); }
  .acilis__cizim { max-width: 30rem; justify-self: end; }
}

/* Açılış çizimi: yüklenince tek seferlik sıralı beliriş */
@media (prefers-reduced-motion: no-preference) {
  .acilis__cizim .balon-konusma,
  .acilis__cizim .iz,
  .acilis__cizim .balon-dusunce,
  .acilis__cizim .kalp,
  .acilis__cizim .nokta {
    transform-box: fill-box;
    transform-origin: center;
    animation: balon-belir 520ms var(--egri) both;
  }
  .acilis__cizim .balon-konusma { transform-origin: 15% 100%; animation-delay: 150ms; }
  .acilis__cizim .iz-3 { animation-delay: 650ms; }
  .acilis__cizim .iz-2 { animation-delay: 760ms; }
  .acilis__cizim .iz-1 { animation-delay: 870ms; }
  .acilis__cizim .balon-dusunce { animation-delay: 980ms; }
  .acilis__cizim .kalp { animation-delay: 1250ms; }
  .acilis__cizim .nokta { animation-delay: 1400ms; }
}
@keyframes balon-belir {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: none; }
}

/* 2. Kısa tanıtım -------------------------------------------------------- */
.tanitim__izgara {
  display: grid;
  gap: var(--bosluk-7);
  align-items: center;
}

/* Düşünce balonu biçimli açıklama kutusu */
.dusunce-kutusu {
  position: relative;
  background: var(--renk-buz-koyu);
  border-radius: 40px;
  padding: var(--bosluk-6);
  margin-bottom: var(--bosluk-6);
  color: var(--renk-lacivert);
}
.dusunce-kutusu h3 { font-size: var(--yazi-buyuk); margin-bottom: var(--bosluk-3); }
.dusunce-kutusu p { margin: 0; }
.dusunce-kutusu::before,
.dusunce-kutusu::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--renk-buz-koyu);
}
.dusunce-kutusu::before { width: 22px; height: 22px; left: 40px; bottom: -30px; }
.dusunce-kutusu::after { width: 12px; height: 12px; left: 26px; bottom: -50px; }

@media (min-width: 64rem) {
  .tanitim__izgara { grid-template-columns: 1.1fr 0.9fr; gap: var(--bosluk-8); }
  .dusunce-kutusu { padding: var(--bosluk-7); }
}

/* 3. Hizmetler: sıralı adımlar ------------------------------------------- */
.hizmetler { padding-top: 0; }

.adimlar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bosluk-6);
  position: relative;
}
.adim {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--bosluk-4);
}
.adim > :not(.adim__no) { grid-column: 2; }
.adim h3 { font-size: var(--yazi-buyuk); margin: var(--bosluk-3) 0 var(--bosluk-2); }
.adim p { margin: 0; }
.adim__no {
  grid-row: 1 / span 2;
  position: relative;
  z-index: 1;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--renk-beyaz);
  border: 3px solid var(--renk-acik-mavi);
  color: var(--renk-lacivert);
  font-family: var(--yazi-baslik);
  font-weight: 800;
  font-size: var(--yazi-buyuk);
  box-shadow: var(--golge-1);
}
/* Adımları birleştiren çizgi (telefon: dikey) */
.adim:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.75rem - 1.5px);
  top: 3.5rem;
  bottom: calc(-1 * var(--bosluk-6));
  width: 3px;
  background: var(--renk-acik-mavi);
}

.hizmetler__alt {
  margin-top: var(--bosluk-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-2) var(--bosluk-6);
}
.hizmetler__not { margin: 0; color: var(--renk-lacivert-yumusak); }

/* Üç adım (Ana Sayfa): tabletten itibaren yatay */
@media (min-width: 48rem) {
  .adimlar:not(.adimlar--bes) { grid-template-columns: repeat(3, 1fr); gap: var(--bosluk-6); }
  .adimlar:not(.adimlar--bes) .adim { grid-template-columns: 1fr; }
  .adimlar:not(.adimlar--bes) .adim > :not(.adim__no) { grid-column: 1; }
  .adimlar:not(.adimlar--bes) .adim__no { grid-row: auto; margin-bottom: var(--bosluk-2); }
  /* Geniş ekran: yatay çizgi */
  .adimlar:not(.adimlar--bes) .adim:not(:last-child)::before {
    left: 3.5rem;
    right: calc(-1 * var(--bosluk-6));
    top: calc(1.75rem - 1.5px);
    bottom: auto;
    width: auto;
    height: 3px;
  }
  .adimlar:not(.adimlar--bes) .adim p { max-width: 30ch; }
}

/* Beş adım (Hizmetler): tablette dikey kalır, geniş ekranda yatay */
@media (min-width: 64rem) {
  .adimlar--bes { grid-template-columns: repeat(5, 1fr); gap: var(--bosluk-5); }
  .adimlar--bes .adim { grid-template-columns: 1fr; }
  .adimlar--bes .adim > :not(.adim__no) { grid-column: 1; }
  .adimlar--bes .adim__no { grid-row: auto; margin-bottom: var(--bosluk-2); }
  .adimlar--bes .adim:not(:last-child)::before {
    left: 3.5rem;
    right: calc(-1 * var(--bosluk-5));
    top: calc(1.75rem - 1.5px);
    bottom: auto;
    width: auto;
    height: 3px;
  }
}

/* 4. Yaklaşım paneli ------------------------------------------------------ */
.yaklasim-bolumu { padding-top: 0; }

/* Lacivert panel: .yaklasim-paneli (Ana Sayfa) ve genel .koyu-panel */
.yaklasim-paneli,
.koyu-panel {
  background: var(--renk-lacivert);
  color: var(--renk-zemin-metin-acik);
  border-radius: var(--kose-buyuk);
  padding: var(--bosluk-7) var(--bosluk-5);
  display: grid;
  gap: var(--bosluk-7);
  box-shadow: var(--golge-3);
}
.yaklasim-paneli h2,
.koyu-panel h2 { color: var(--renk-beyaz); margin-bottom: var(--bosluk-5); }
.yaklasim-paneli__giris p { margin-bottom: var(--bosluk-4); }

.yontemler {
  margin: 0;
  display: grid;
  gap: var(--bosluk-5);
}
.yontem {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: var(--bosluk-4);
}
.yontem dt {
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: var(--yazi-orta);
  color: var(--renk-acik-mavi);
  margin-bottom: var(--bosluk-1);
}
.yontem dd { margin: 0; }

@media (min-width: 48rem) {
  .yaklasim-paneli,
  .koyu-panel { padding: var(--bosluk-8) var(--bosluk-7); border-radius: var(--kose-dev); }
  .yontemler { grid-template-columns: 1fr 1fr; gap: var(--bosluk-6); }
}
@media (min-width: 64rem) {
  .yaklasim-paneli { grid-template-columns: 0.9fr 1.1fr; gap: var(--bosluk-8); align-items: start; }
}

/* 5. Atölye --------------------------------------------------------------- */
.atolye-bolumu {
  margin-inline: var(--bosluk-2);
}
.atolye-bolumu__ust {
  display: grid;
  gap: var(--bosluk-5);
  align-items: end;
  margin-bottom: var(--bosluk-7);
}
.atolye-bolumu__ust .metin p { margin: 0; font-size: var(--yazi-orta); }
.atolye-bolumu__ust .dugme { justify-self: start; }

.araclar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bosluk-4);
}
.arac {
  border-radius: 20px;
  padding: var(--bosluk-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.arac h3 { font-size: var(--yazi-buyuk); margin: var(--bosluk-4) 0 var(--bosluk-2); }
.arac p { margin: 0; }

.arac__durum {
  display: inline-block;
  padding: 2px var(--bosluk-3);
  border-radius: var(--kose-hap);
  font-size: var(--yazi-kucuk);
  font-weight: 600;
  line-height: 1.6;
}

.arac--yayinda {
  position: relative;
  background: var(--renk-beyaz);
  box-shadow: var(--golge-2);
  transition: transform var(--sure-kisa) var(--egri);
}

/* Yayındaki araç kartı: başlık bağlantısı tüm kartı kaplar */
.arac__baglanti {
  color: inherit;
  text-decoration: none;
}
.arac__baglanti::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.arac--yayinda:has(.arac__baglanti) { border-radius: 20px; }
.arac__baglanti:focus-visible { outline: none; }
.arac__baglanti:focus-visible::after {
  outline: 3px solid var(--renk-mercan);
  outline-offset: 3px;
  border-radius: 20px;
}
.arac--yayinda:hover { transform: translateY(-3px); }
.arac--yayinda:active { transform: translateY(-1px); }
.arac--yayinda:hover .arac__baglanti { text-decoration: underline; text-decoration-color: var(--renk-mercan); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* Yayındaki araç kartında araç logosu (logonun kendisine dokunulmaz) */
.arac__logo {
  width: 5rem;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--renk-cizgi);
  margin-bottom: var(--bosluk-4);
}

/* Son kelime ile "dışarı açılır" işareti aynı satırda kalsın */
.bitisik { white-space: nowrap; }
.dis-baglanti {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.35em;
  vertical-align: 0.05em;
  color: var(--renk-lacivert-yumusak);
}
.arac--yayinda .arac__durum {
  background: var(--renk-acik-mavi);
  color: var(--renk-lacivert);
}

.arac--yakinda {
  background: transparent;
  border: 2px dashed rgba(21, 49, 74, 0.25);
}
.arac--yakinda .arac__durum {
  border: 1.5px solid rgba(21, 49, 74, 0.35);
  color: var(--renk-lacivert-yumusak);
}
.arac--yakinda h3 { color: var(--renk-lacivert-yumusak); }

@media (min-width: 48rem) {
  .atolye-bolumu { margin-inline: var(--bosluk-4); }
  .atolye-bolumu__ust { grid-template-columns: 1fr auto; }
  .araclar { grid-template-columns: 1fr 1fr; gap: var(--bosluk-5); }
}
@media (min-width: 72rem) {
  .araclar { grid-template-columns: repeat(4, 1fr); }
}

/* 6. Öğrenci Pusulası ----------------------------------------------------- */
.pusula__izgara {
  display: grid;
  gap: var(--bosluk-6);
  align-items: center;
}
.pusula__cizim { width: 9rem; height: auto; }
.pusula .metin .dugme { margin-top: var(--bosluk-2); }
.pusula__not {
  margin: var(--bosluk-4) 0 0;
  font-size: var(--yazi-normal);
  color: var(--renk-lacivert-yumusak);
}

@media (min-width: 48rem) {
  .pusula__izgara { grid-template-columns: auto 1fr; gap: var(--bosluk-8); }
  .pusula__cizim { width: 13rem; }
}
@media (min-width: 64rem) {
  .pusula__izgara { padding-left: var(--bosluk-8); }
}

/* 7. İletişim çağrısı: kuyruğu alt bilgideki logoya bakan konuşma balonu ---- */
.iletisim-cagrisi { padding-top: 0; }

.konusma-paneli {
  position: relative;
  background: var(--renk-buz);
  border-radius: var(--kose-dev);
  padding: var(--bosluk-7) var(--bosluk-5);
  display: grid;
  gap: var(--bosluk-5);
}
.konusma-paneli::after {
  content: "";
  position: absolute;
  left: 2.5rem;
  bottom: -2.25rem;
  width: 3rem;
  height: 2.5rem;
  background: var(--renk-buz);
  clip-path: polygon(0 0, 100% 0, 18% 100%);
}
.konusma-paneli h2 { margin-bottom: var(--bosluk-4); max-width: 18ch; }
.konusma-paneli__metin p { margin: 0; font-size: var(--yazi-orta); max-width: 36rem; }
.konusma-paneli__alt {
  margin: 0;
  font-size: var(--yazi-normal);
  color: var(--renk-lacivert-yumusak);
}
.konusma-paneli__alt a { color: var(--renk-lacivert); font-weight: 600; }

@media (min-width: 64rem) {
  .konusma-paneli {
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: var(--bosluk-7);
    padding: var(--bosluk-8) var(--bosluk-8) var(--bosluk-7);
  }
  .konusma-paneli__alt { grid-column: 1 / -1; padding-top: var(--bosluk-2); }
  .konusma-paneli::after { left: 3.5rem; }
}

/* ==========================================================================
   İç sayfalar: ortak sayfa başlığı
   (Ana Sayfa açılışının daha sakin bir sürümü)
   ========================================================================== */

.sayfa-basi {
  background: var(--renk-buz);
  border-radius: 0 0 var(--kose-dev) var(--kose-dev);
  padding-block: var(--bosluk-7);
  overflow: hidden;
}
.sayfa-basi__izgara {
  display: grid;
  gap: var(--bosluk-6);
  align-items: center;
}
.sayfa-basi h1 {
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
  margin-bottom: var(--bosluk-5);
  text-wrap: balance;
}
.sayfa-basi__alt {
  font-size: var(--yazi-orta);
  max-width: 36rem;
  margin: 0;
}
.sayfa-basi__cizim {
  width: 100%;
  max-width: 18rem;
  height: auto;
  justify-self: center;
  overflow: visible;
}

@media (min-width: 48rem) {
  .sayfa-basi__satir { display: block; white-space: nowrap; }
}
@media (min-width: 64rem) {
  .sayfa-basi { padding-block: var(--bosluk-8); }
  .sayfa-basi__izgara { grid-template-columns: 1.2fr 0.8fr; gap: var(--bosluk-7); }
  .sayfa-basi__cizim { max-width: 26rem; justify-self: end; }
}

/* Yol haritası: duraklar sırayla belirir (yalnızca bir kez) */
@media (prefers-reduced-motion: no-preference) {
  .yol-haritasi .durak,
  .yol-haritasi .nokta {
    transform-box: fill-box;
    transform-origin: center;
    animation: balon-belir 420ms var(--egri) both;
  }
  .yol-haritasi .durak-1 { animation-delay: 150ms; }
  .yol-haritasi .durak-2 { animation-delay: 300ms; }
  .yol-haritasi .durak-3 { animation-delay: 450ms; }
  .yol-haritasi .durak-4 { animation-delay: 600ms; }
  .yol-haritasi .durak-5 { animation-delay: 800ms; transform-origin: 30% 100%; }
  .yol-haritasi .nokta { animation-delay: 1000ms; }
}

/* ==========================================================================
   Hizmetler
   ========================================================================== */

/* Hizmet bölümleri: solda metin, sağda "Neleri kapsar" kartı */
.hizmet__izgara {
  display: grid;
  gap: var(--bosluk-6);
  align-items: start;
}
.hizmet .metin p:last-child { margin-bottom: 0; }

.hizmet--buz { margin-inline: var(--bosluk-2); }
/* (Telefondaki bant altı boşluğu: dosya sonundaki ortak .bolum--buz kuralı) */
@media (min-width: 48rem) { .hizmet--buz { margin-inline: var(--bosluk-4); } }

.surec + .hizmet { padding-top: 0; }

.kapsam {
  background: var(--renk-beyaz);
  border-radius: 20px;
  padding: var(--bosluk-5);
  box-shadow: var(--golge-2);
}
.kapsam h3 {
  font-size: var(--yazi-orta);
  margin-bottom: var(--bosluk-4);
}
.kapsam__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bosluk-3);
}
.kapsam__liste li {
  position: relative;
  padding-left: var(--bosluk-6);
  line-height: 1.55;
}
/* Madde işareti: küçük konuşma balonu noktası */
.kapsam__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 2px;
  background: var(--renk-acik-mavi);
}

/* Bilgi kartı (Grup Çalışmaları) */
.kapsam--bilgi { background: var(--renk-buz); box-shadow: none; }
.kisa-bilgiler { margin: 0; display: grid; gap: 0; }
.kisa-bilgiler > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bosluk-4);
  padding-block: var(--bosluk-3);
  border-top: 1px solid var(--renk-cizgi);
}
.kisa-bilgiler > div:first-child { border-top: 0; padding-top: 0; }
.kisa-bilgiler dt { color: var(--renk-lacivert-yumusak); }
.kisa-bilgiler dd {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-weight: 800;
  font-size: var(--yazi-buyuk);
  color: var(--renk-lacivert);
  white-space: nowrap;
}

/* Beceri alanları: etiketler */
.beceri-baslik {
  font-size: var(--yazi-orta);
  margin: var(--bosluk-6) 0 var(--bosluk-3);
}
.beceriler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
}
.beceriler li {
  background: var(--renk-beyaz);
  border: 1.5px solid var(--renk-acik-mavi);
  border-radius: 18px; /* tek satırda hap, iki satırda yumuşak kutu */
  padding: var(--bosluk-1) var(--bosluk-4);
  color: var(--renk-lacivert);
  font-weight: 500;
  line-height: 1.5;
}

/* Uzun başlıklarda son satırda tek kelime kalmasın */
.konusma-paneli h2.baslik-dengeli { max-width: 24ch; text-wrap: balance; }

@media (min-width: 64rem) {
  .hizmet__izgara { grid-template-columns: 1.15fr 0.85fr; gap: var(--bosluk-8); }
  .kapsam { padding: var(--bosluk-6); }
}

/* Çevrim içi çalışma */
.cevrimici { padding-top: 0; }
.cevrimici__izgara {
  display: grid;
  gap: var(--bosluk-6);
  align-items: center;
}
.cevrimici__cizim { width: 9rem; height: auto; }
.cevrimici .metin p { margin: 0; }
@media (min-width: 48rem) {
  .cevrimici__izgara { grid-template-columns: auto 1fr; gap: var(--bosluk-8); }
  .cevrimici__cizim { width: 13rem; }
}
@media (min-width: 64rem) {
  .cevrimici__izgara { padding-left: var(--bosluk-8); }
}

/* Aileyle iş birliği: lacivert panel */
.aile-bolumu { padding-top: 0; }
.aile-paneli { align-items: center; }
.aile-paneli__metin p { margin-bottom: var(--bosluk-4); max-width: 40rem; }
/* Telefon ve tablet: pusula metnin üstünde, küçük */
.aile-paneli__cizim { width: 6rem; height: auto; order: -1; }
@media (min-width: 64rem) {
  .aile-paneli { grid-template-columns: 1fr auto; gap: var(--bosluk-8); }
  .aile-paneli__cizim { width: 12rem; margin-right: var(--bosluk-5); order: 0; }
}

/* ==========================================================================
   Yaklaşım
   ========================================================================== */

/* Başlık çizimi: basamaklar sırayla yükselir (yalnızca bir kez) */
@media (prefers-reduced-motion: no-preference) {
  .basamaklar .merdiven,
  .basamaklar .basamak,
  .basamaklar .iz,
  .basamaklar .balon-dusunce,
  .basamaklar .nokta {
    transform-box: fill-box;
    animation: balon-belir 420ms var(--egri) both;
  }
  .basamaklar .merdiven { transform-origin: 50% 100%; animation-delay: 100ms; }
  .basamaklar .basamak { transform-origin: 50% 100%; }
  .basamaklar .iz, .basamaklar .balon-dusunce, .basamaklar .nokta { transform-origin: center; }
  .basamaklar .basamak-1 { animation-delay: 150ms; }
  .basamaklar .basamak-2 { animation-delay: 280ms; }
  .basamaklar .basamak-3 { animation-delay: 410ms; }
  .basamaklar .basamak-4 { animation-delay: 540ms; }
  .basamaklar .iz-1 { animation-delay: 720ms; }
  .basamaklar .iz-2 { animation-delay: 800ms; }
  .basamaklar .balon-dusunce { animation-delay: 900ms; }
  .basamaklar .nokta { animation-delay: 1050ms; }
}

/* 2. Zihin kuramı neden önemli: örnekler sohbet balonları gibi */
.neden__izgara {
  display: grid;
  gap: var(--bosluk-7);
  align-items: start;
}
.neden .metin p:last-child { margin-bottom: 0; }
.ornekler h3 {
  font-size: var(--yazi-orta);
  margin-bottom: var(--bosluk-5);
}
.sohbet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-5);
}
.sohbet li {
  position: relative;
  max-width: 88%;
  padding: var(--bosluk-3) var(--bosluk-5);
  border-radius: 22px;
  line-height: 1.55;
  color: var(--renk-lacivert);
}
.sohbet li::after {
  content: "";
  position: absolute;
  bottom: -9px;
  width: 18px;
  height: 12px;
}
/* sol balonlar */
.sohbet li:nth-child(odd) {
  align-self: flex-start;
  background: var(--renk-buz-koyu);
  border-bottom-left-radius: 6px;
}
.sohbet li:nth-child(odd)::after {
  left: 0;
  background: var(--renk-buz-koyu);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* sağ balonlar */
.sohbet li:nth-child(even) {
  align-self: flex-end;
  background: var(--renk-beyaz);
  box-shadow: var(--golge-2);
  border-bottom-right-radius: 6px;
}
.sohbet li:nth-child(even)::after {
  right: 0;
  background: var(--renk-beyaz);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

@media (min-width: 64rem) {
  .neden__izgara { grid-template-columns: 1.1fr 0.9fr; gap: var(--bosluk-8); }
}

/* 3. Çalışma ilkelerimiz */
.ilkeler-bolumu { padding-top: 0; }
.ilkeler-bolumu__izgara {
  display: grid;
  gap: var(--bosluk-5);
  align-items: start;
}
.ilkeler {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ilke {
  border-top: 1px solid var(--renk-cizgi);
  padding-block: var(--bosluk-5);
}
.ilke:last-child { padding-bottom: 0; }
.ilke h3 {
  font-size: var(--yazi-buyuk);
  margin-bottom: var(--bosluk-2);
  display: flex;
  align-items: baseline;
  gap: var(--bosluk-3);
}
/* ilke başlığının önünde küçük balon işareti */
.ilke h3::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 2px;
  background: var(--renk-mercan);
  transform: translateY(-2px);
}
.ilke p { margin: 0; max-width: 40rem; }

@media (min-width: 64rem) {
  .ilkeler-bolumu__izgara { grid-template-columns: 0.75fr 1.25fr; gap: var(--bosluk-8); }
  .ilkeler-bolumu__baslik {
    position: sticky;
    top: calc(var(--ust-menu-yukseklik) + var(--bosluk-6));
  }
  .ilke:first-child { border-top: 0; padding-top: 0; }
}

/* 4. Yöntemler paneli */
.yontemler-bolumu { padding-top: 0; }
.yontemler-paneli { gap: 0; }
.yontemler-paneli h2 { margin-bottom: var(--bosluk-6); }
.yontemler--genis dd { line-height: 1.7; }
@media (min-width: 64rem) {
  .yontemler--genis { column-gap: var(--bosluk-8); row-gap: var(--bosluk-7); }
}

/* 5. Dijital araçlarla destek */
.dijital { margin-inline: var(--bosluk-2); }
.dijital__izgara {
  display: grid;
  gap: var(--bosluk-6);
  align-items: center;
}
.dijital__cizim { width: 9rem; height: auto; }
.dijital .metin .dugme { margin-top: var(--bosluk-2); }
@media (min-width: 48rem) {
  .dijital { margin-inline: var(--bosluk-4); }
  .dijital__izgara { grid-template-columns: auto 1fr; gap: var(--bosluk-8); }
  .dijital__cizim { width: 13rem; }
}
@media (min-width: 64rem) {
  .dijital__izgara { padding-left: var(--bosluk-8); }
}

/* 6. Açık konuşalım */
.acik-konusma__izgara {
  display: grid;
  gap: var(--bosluk-4);
}
.acik-konusma__metin {
  margin: 0;
  font-size: var(--yazi-orta);
  line-height: 1.65;
  color: var(--renk-lacivert);
  max-width: 44rem;
}
@media (min-width: 64rem) {
  .acik-konusma__izgara { grid-template-columns: 0.75fr 1.25fr; gap: var(--bosluk-8); }
  .acik-konusma__metin { font-size: var(--yazi-buyuk); line-height: 1.6; }
}

/* ==========================================================================
   Atölye
   ========================================================================== */

.sayfa-basi__dugmeler { margin-top: var(--bosluk-6); }

/* Başlık: yayındaki araçların logoları, hafif eğik iki kart */
/* Kartlar yan yana ve kademeli durur; birbirinin logosunu örtmez */
.logo-yigini {
  position: relative;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1 / 0.74;
  justify-self: center;
}
.logo-yigini__kart {
  position: absolute;
  width: 48%;
  height: auto;
  background: var(--renk-beyaz);
  border-radius: 24px;
  box-shadow: var(--golge-3);
}
.logo-yigini__kart--1 { top: 2%; left: 1%; rotate: -5deg; }
.logo-yigini__kart--2 { bottom: 2%; right: 1%; rotate: 4deg; }
@media (min-width: 64rem) {
  .logo-yigini { max-width: 28rem; justify-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  .logo-yigini__kart { animation: balon-belir 480ms var(--egri) both; }
  .logo-yigini__kart--1 { animation-delay: 150ms; }
  .logo-yigini__kart--2 { animation-delay: 330ms; }
}

/* Yayındaki araçlar: logolu ayrıntı kartları */
.arac-detaylar {
  display: grid;
  gap: var(--bosluk-5);
}
.arac-detay {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-4);
  background: var(--renk-beyaz);
  border-radius: var(--kose-buyuk);
  padding: var(--bosluk-5);
  box-shadow: var(--golge-2);
}
.arac-detay__logo {
  width: 8.5rem;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--renk-cizgi);
}
.arac-detay__govde {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.arac-detay h3 { font-size: var(--yazi-b3); margin-bottom: var(--bosluk-2); }
.arac-detay__tanim {
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: var(--yazi-orta);
  color: var(--renk-lacivert-yumusak);
  line-height: 1.45;
  margin-bottom: var(--bosluk-3);
}
.arac-detay__kimler {
  margin: auto 0 var(--bosluk-5);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--renk-cizgi);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--bosluk-2);
}
.arac-detay__kimler dt { font-weight: 600; color: var(--renk-lacivert); }
.arac-detay__kimler dt::after { content: ":"; }
.arac-detay__kimler dd { margin: 0; }
.arac-detay .dugme { align-self: flex-start; }

@media (min-width: 48rem) {
  .arac-detay { padding: var(--bosluk-6); }
  .arac-detay__logo { width: 10rem; }
}
@media (min-width: 64rem) {
  .arac-detaylar { grid-template-columns: 1fr 1fr; gap: var(--bosluk-6); }
}

/* Yakında: bağlantısız, sönük kartlar */
.yakindakiler { margin-inline: var(--bosluk-2); }
@media (min-width: 48rem) { .yakindakiler { margin-inline: var(--bosluk-4); } }
.araclar--iki .arac p + p { margin-top: var(--bosluk-2); }
.arac__tanim { font-weight: 600; color: var(--renk-lacivert-yumusak); }
@media (min-width: 48rem) {
  .araclar--iki { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 72rem) {
  .araclar--iki { grid-template-columns: 1fr 1fr; gap: var(--bosluk-6); }
}

/* ==========================================================================
   Öğrenci Pusulası
   ========================================================================== */

/* Sayfadaki simgelerin kaynağı (görünmez) */
.svg-kaynak { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Başlıktaki küçük not: kilit simgesiyle */
.sayfa-basi__not {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  margin: var(--bosluk-5) 0 0;
  font-weight: 500;
  color: var(--renk-lacivert-yumusak);
  line-height: 1.5;
}
.sayfa-basi__not svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* Başlık çizimi: önce pusula, sonra çevresindeki beş bölüm (yalnızca bir kez) */
@media (prefers-reduced-motion: no-preference) {
  .pusula-cemberi .merkez,
  .pusula-cemberi .baglar,
  .pusula-cemberi .uydu,
  .pusula-cemberi .nokta {
    transform-box: fill-box;
    transform-origin: center;
    animation: balon-belir 420ms var(--egri) both;
  }
  .pusula-cemberi .merkez { animation-delay: 100ms; }
  .pusula-cemberi .baglar { animation-delay: 320ms; }
  .pusula-cemberi .uydu-1 { animation-delay: 420ms; }
  .pusula-cemberi .uydu-2 { animation-delay: 520ms; }
  .pusula-cemberi .uydu-3 { animation-delay: 620ms; }
  .pusula-cemberi .uydu-4 { animation-delay: 720ms; }
  .pusula-cemberi .uydu-5 { animation-delay: 820ms; }
  .pusula-cemberi .nokta { animation-delay: 1000ms; }
}

/* Portalda neler var? — başlık ve beş bölüm aynı ızgarada */
.ozellikler {
  display: grid;
  gap: var(--bosluk-6);
}
.ozellikler .bolum__giris { margin-bottom: 0; }

/* Telefon: simge solda, metin sağda */
.ozellik {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--bosluk-4);
  align-content: start;
  border-top: 1px solid var(--renk-cizgi);
  padding-top: var(--bosluk-5);
}
.ozellik > :not(.ozellik__ikon) { grid-column: 2; }
.ozellik__ikon {
  grid-row: 1 / span 2;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--renk-buz);
  display: grid;
  place-items: center;
}
.ozellik__ikon svg { width: 1.75rem; height: 1.75rem; }
.ozellik h3 { font-size: var(--yazi-buyuk); margin: var(--bosluk-2) 0 var(--bosluk-2); }
.ozellik p { margin: 0; }

@media (min-width: 48rem) {
  .ozellikler { grid-template-columns: 1fr 1fr; gap: var(--bosluk-7) var(--bosluk-6); }
  .ozellik { grid-template-columns: 1fr; }
  .ozellik > :not(.ozellik__ikon) { grid-column: 1; }
  .ozellik__ikon { grid-row: auto; width: 3.5rem; height: 3.5rem; margin-bottom: var(--bosluk-4); }
  .ozellik__ikon svg { width: 2rem; height: 2rem; }
  .ozellik h3 { margin-top: 0; }
  .ozellik p { max-width: 32ch; }
}
@media (min-width: 64rem) {
  .ozellikler { grid-template-columns: repeat(3, 1fr); column-gap: var(--bosluk-7); }
}

/* Nasıl giriş yapılır? — buz mavisi bant */
.giris-adimlari { margin-inline: var(--bosluk-2); }
@media (min-width: 48rem) { .giris-adimlari { margin-inline: var(--bosluk-4); } }

/* Gizlilik: lacivert panel */
.gizlilik-paneli { align-items: center; }
.gizlilik-paneli__metin p { margin-bottom: var(--bosluk-4); max-width: 40rem; font-size: var(--yazi-orta); }
/* Telefon ve tablet: kilit metnin üstünde, küçük */
.gizlilik-paneli__cizim { width: 6rem; height: auto; order: -1; }
@media (min-width: 64rem) {
  .gizlilik-paneli { grid-template-columns: 1fr auto; gap: var(--bosluk-8); }
  .gizlilik-paneli__cizim { width: 12rem; margin-right: var(--bosluk-5); order: 0; }
}

/* Sık sorulan sorular (Yaklaşım'daki ilkeler düzeniyle) */
.sss-bolumu { padding-top: 0; }
.sss-bolumu .ilke h3 { text-wrap: balance; } /* son satırda tek kelime kalmasın */

/* Başlıkta satırı belirli bir yerden bölmek için (ör. "Portalla ilgili / yardıma mı …") */
.baslik-satir { display: block; }

/* ==========================================================================
   İletişim
   ========================================================================== */

/* Başlık çizimi: soru balonu, yanıt balonu, zarf (yalnızca bir kez) */
@media (prefers-reduced-motion: no-preference) {
  .sohbet-cizimi .balon,
  .sohbet-cizimi .zarf,
  .sohbet-cizimi .nokta {
    transform-box: fill-box;
    transform-origin: center;
    animation: balon-belir 460ms var(--egri) both;
  }
  .sohbet-cizimi .balon-soru { transform-origin: 10% 100%; animation-delay: 150ms; }
  .sohbet-cizimi .balon-yanit { transform-origin: 90% 100%; animation-delay: 550ms; }
  .sohbet-cizimi .zarf { animation-delay: 850ms; }
  .sohbet-cizimi .nokta { animation-delay: 1050ms; }
}

/* İletişim kanalları: WhatsApp öne çıkar, diğer ikisi yanında */
.kanallar {
  display: grid;
  gap: var(--bosluk-5);
}
.kanal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--renk-beyaz);
  border-radius: var(--kose-buyuk);
  padding: var(--bosluk-5);
  box-shadow: var(--golge-2);
}
.kanal__ikon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--renk-buz);
  display: grid;
  place-items: center;
  margin-bottom: var(--bosluk-4);
  flex: none;
}
.kanal__ikon svg { width: 2rem; height: 2rem; }
.kanal h3 {
  font-size: var(--yazi-orta);
  color: var(--renk-lacivert-yumusak);
  margin-bottom: var(--bosluk-1);
}
.kanal__deger {
  font-family: var(--yazi-baslik);
  font-weight: 800;
  font-size: var(--yazi-b3);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--renk-lacivert);
  white-space: nowrap;
  margin-bottom: var(--bosluk-2);
}
.kanal__not { margin-bottom: var(--bosluk-5); }
.kanal .dugme { margin-top: auto; }

/* Öne çıkan kanal: lacivert kart */
.kanal--one {
  background: var(--renk-lacivert);
  color: var(--renk-zemin-metin-acik);
  box-shadow: var(--golge-3);
}
.kanal--one .kanal__ikon { background: var(--renk-beyaz); }
.kanal--one h3 { color: var(--renk-acik-mavi); }
.kanal--one .kanal__deger { color: var(--renk-beyaz); }
.kanal--one .dugme:focus-visible { outline-color: var(--renk-acik-mavi); }

@media (min-width: 48rem) {
  .kanallar { grid-template-columns: 1.1fr 1fr; gap: var(--bosluk-5); }
  .kanal { padding: var(--bosluk-6); }
  .kanal--one { grid-row: span 2; justify-content: center; }
  .kanal--one .kanal__deger { font-size: var(--yazi-b2); }
  .kanal--one .dugme { margin-top: 0; }
}
@media (min-width: 64rem) {
  .kanallar { gap: var(--bosluk-6); }
  .kanal--one { padding: var(--bosluk-7); }
  .kanal--one .kanal__ikon { width: 4.5rem; height: 4.5rem; }
  .kanal--one .kanal__ikon svg { width: 2.5rem; height: 2.5rem; }
  /* Telefon ve E-posta: simge solda, metin sağda */
  .kanal:not(.kanal--one) {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    column-gap: var(--bosluk-5);
    align-content: start;
  }
  .kanal:not(.kanal--one) > :not(.kanal__ikon) { grid-column: 2; }
  .kanal:not(.kanal--one) .kanal__ikon { grid-row: 1 / span 4; margin-bottom: 0; }
  .kanal:not(.kanal--one) .dugme { justify-self: start; }
}

/* Görüşmeler: buz mavisi bantta iki beyaz kart */
.gorusme-bolumu { margin-inline: var(--bosluk-2); }
.gorusme-bolumu .bolum__giris h2 { text-wrap: balance; } /* son satırda tek kelime kalmasın */
.gorusmeler {
  display: grid;
  gap: var(--bosluk-4);
}
.gorusme {
  background: var(--renk-beyaz);
  border-radius: 20px;
  padding: var(--bosluk-5);
  box-shadow: var(--golge-2);
}
.gorusme h3 { font-size: var(--yazi-buyuk); margin-bottom: var(--bosluk-2); }
.gorusme p { margin: 0; }
.gorusme__yer {
  font-weight: 600;
  color: var(--renk-lacivert);
}
@media (min-width: 48rem) {
  .gorusme-bolumu { margin-inline: var(--bosluk-4); }
  .gorusmeler { grid-template-columns: 1fr 1fr; gap: var(--bosluk-5); }
  .gorusme { padding: var(--bosluk-6); }
}
@media (min-width: 72rem) {
  .gorusmeler { gap: var(--bosluk-6); }
}

/* ==========================================================================
   İçerikler
   ========================================================================== */

/* Başlık çizimi: önce ekran, sonra kitap (yalnızca bir kez) */
@media (prefers-reduced-motion: no-preference) {
  .okuma-cizimi .ekran,
  .okuma-cizimi .kitap,
  .okuma-cizimi .nokta {
    transform-box: fill-box;
    transform-origin: center;
    animation: balon-belir 460ms var(--egri) both;
  }
  .okuma-cizimi .ekran { animation-delay: 150ms; }
  .okuma-cizimi .kitap { transform-origin: 50% 100%; animation-delay: 500ms; }
  .okuma-cizimi .nokta { animation-delay: 850ms; }
}

/* Son satırda tek kelime kalmasın */
.icerikler-sayfasi .bolum__giris h2 { text-wrap: balance; }

/* İki eş platform kartı (İletişim'deki .kanal kartlarıyla) */
@media (min-width: 48rem) {
  .kanallar--iki { grid-template-columns: 1fr 1fr; }
}
/* Geniş ekran: iki karttaki düğmeler aynı hizada (kartın altında) */
@media (min-width: 64rem) {
  .kanallar--iki .kanal { grid-template-rows: auto auto 1fr auto; }
  .kanallar--iki .kanal .dugme { align-self: end; }
}

/* Konular: konuşma balonu biçiminde etiketler */
.konular-bolumu { margin-inline: var(--bosluk-2); }
@media (min-width: 48rem) { .konular-bolumu { margin-inline: var(--bosluk-4); } }
.konular {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
}
.konular li {
  background: var(--renk-beyaz);
  border-radius: 22px 22px 22px 6px;
  padding: var(--bosluk-3) var(--bosluk-5);
  box-shadow: var(--golge-1);
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: var(--yazi-orta);
  line-height: 1.4;
  color: var(--renk-lacivert);
}
@media (min-width: 64rem) {
  .konular { gap: var(--bosluk-4); max-width: 60rem; }
  .konular li { font-size: var(--yazi-buyuk); padding: var(--bosluk-4) var(--bosluk-6); border-radius: 28px 28px 28px 8px; }
}

/* Yakında: kesik çizgili kutu (Atölye'deki "Yakında" kartlarıyla aynı dil) */
.yakinda-kutusu {
  border: 2px dashed rgba(21, 49, 74, 0.25);
  border-radius: var(--kose-buyuk);
  padding: var(--bosluk-6) var(--bosluk-5);
}
.yakinda-kutusu h2 { font-size: var(--yazi-b3); color: var(--renk-lacivert-yumusak); margin-bottom: var(--bosluk-3); }
.yakinda-kutusu p { margin: 0; font-size: var(--yazi-orta); max-width: 40rem; }
@media (min-width: 64rem) {
  .yakinda-kutusu { padding: var(--bosluk-7); }
}

/* Dijital araçlar: lacivert panel */
.uygulama-bolumu { padding-top: 0; }
.uygulama-paneli { align-items: center; }
.uygulama-paneli h2 { text-wrap: balance; }
.uygulama-paneli__metin p { margin-bottom: var(--bosluk-5); max-width: 40rem; font-size: var(--yazi-orta); }
/* Telefon ve tablet: çizim metnin üstünde, küçük */
.uygulama-paneli__cizim { width: 6rem; height: auto; order: -1; }
@media (min-width: 64rem) {
  .uygulama-paneli { grid-template-columns: 1fr auto; gap: var(--bosluk-8); }
  .uygulama-paneli__cizim { width: 12rem; margin-right: var(--bosluk-5); order: 0; }
}

/* ==========================================================================
   KVKK ve Gizlilik: sade okuma sayfası (çizim ve animasyon yok)
   ========================================================================== */

.sayfa-basi--yalin .sayfa-basi__alt { max-width: 40rem; }
.yasal-tarih {
  margin: var(--bosluk-4) 0 0;
  font-weight: 500;
  color: var(--renk-lacivert-yumusak);
}

.yasal__izgara {
  display: grid;
  gap: var(--bosluk-7);
  align-items: start;
}

/* İçindekiler */
.icindekiler {
  background: var(--renk-buz);
  border-radius: 20px;
  padding: var(--bosluk-5);
}
.icindekiler__baslik {
  font-size: var(--yazi-orta);
  letter-spacing: 0;
  margin-bottom: var(--bosluk-2);
}
.icindekiler__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.icindekiler__liste a {
  display: block;
  padding-block: 0.625rem; /* parmakla rahat dokunulsun: en az 44px */
  line-height: 1.5;
  color: var(--renk-lacivert);
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  transition: color var(--sure-kisa) var(--egri);
}
.icindekiler__liste li + li a { border-top: 1px solid var(--renk-cizgi); }
.icindekiler__liste a:hover { color: var(--renk-mercan-koyu); text-decoration: underline; text-decoration-color: var(--renk-mercan); }
.icindekiler__liste a:active { color: var(--renk-mercan-daha-koyu); }

/* Metin: yaklaşık 70 karakterlik satırlar */
.yasal-metin { max-width: 32rem; }
.yasal-metin section + section { margin-top: var(--bosluk-7); }
.yasal-metin h2 {
  font-size: var(--yazi-b3);
  margin-bottom: var(--bosluk-4);
  text-wrap: balance;
}
.yasal-metin p:last-child { margin-bottom: 0; }
.bolunmez { white-space: nowrap; } /* "e-posta" satır sonunda "e-" / "posta" diye bölünmesin */
.yasal-metin ul {
  list-style: none;
  margin: 0 0 var(--bosluk-4);
  padding: 0;
  display: grid;
  gap: var(--bosluk-2);
}
.yasal-metin ul:last-child { margin-bottom: 0; }
.yasal-metin li {
  position: relative;
  padding-left: var(--bosluk-5);
}
.yasal-metin li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--renk-acik-mavi);
}
.yasal-metin a {
  color: var(--renk-lacivert);
  font-weight: 500;
  text-decoration-color: var(--renk-mercan);
  text-decoration-thickness: 1.5px;
}
.yasal-metin a:hover { color: var(--renk-mercan-koyu); }
.yasal-metin a:active { color: var(--renk-mercan-daha-koyu); }

/* Geniş ekran: içindekiler solda ve sayfa kaydırılırken görünür kalır */
@media (min-width: 64rem) {
  .yasal__izgara { grid-template-columns: 18rem minmax(0, 1fr); gap: var(--bosluk-8); }
  .icindekiler {
    position: sticky;
    top: calc(var(--ust-menu-yukseklik) + var(--bosluk-5));
    padding: var(--bosluk-5) var(--bosluk-5) var(--bosluk-4);
  }
  .icindekiler__liste a { padding-block: 0.4rem; }
}

/* ==========================================================================
   Ortak: telefonda buz mavisi bantlar
   Bandın iç alt boşluğu + sonraki bölümün üst boşluğu = toplam 64px
   (diğer bölümler arasındaki ölçüyle aynı). Tüm sayfalardaki .bolum--buz bantları için geçerli.
   ========================================================================== */
@media (max-width: 47.99rem) {
  .bolum--buz { padding-bottom: var(--bosluk-6); }
  .bolum--buz + .bolum { padding-top: var(--bosluk-6); }
}