/* ==========================================================================
   MINIK SIRINLER - TEMEL SITE STILLERI
   --------------------------------------------------------------------------
   Yukleme sirasi: fonts.css -> tokens.css -> site.css  (dagitimda tek dosya, Ç29)
   KURAL: Ciplak HEX yazma - SADECE var(--...) tokenlari (docs/tokens.css).
   Mobile-first: varsayilan stiller mobil; min-width ile genisler.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET + TEMEL
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Yatay tasma sigortasi (docs/09 §1.10 - hidden degil clip: sticky bozulmaz) */
html, body { overflow-x: clip; }

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  /* Mobil sabit alt cubuk telafisi (main.js .has-callbar ekler) */
  padding-block-end: var(--site-pad-b, 0);
}

:root {
  /* Ogenin SABIT en az yuksekligi - asla JS ile degistirilmez */
  --callbar-item-h: 56px;
  /* Cubugun olculen toplam yuksekligi (main.js yazar) - yalnizca govde telafisi icin */
  --callbar-h: 64px;
}

img, svg, video { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; padding: 0; cursor: pointer; }

a { color: var(--ink-purple); }

ul[class], ol[class] { list-style: none; padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--ink-strong);
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); font-weight: var(--fw-semibold); }

p { max-width: var(--measure); }

.icon { width: 22px; height: 22px; flex: none; }

/* Odak halkasi - cift katman (docs/05 §2.5) */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-inner-width) var(--focus-ring-inner),
              0 0 0 calc(var(--focus-ring-inner-width) + var(--focus-ring-width)) var(--focus-ring);
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--sp-4);
  z-index: calc(var(--z-nav) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--fill-dark); color: var(--ink-inverse);
  border-radius: var(--r-pill); font-weight: var(--fw-bold);
  text-decoration: none; transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   2. DUZEN YARDIMCILARI
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--text { max-width: calc(var(--container-text) + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--alt { background: var(--bg-page-alt); }
.section--surface { background: var(--bg-surface); }
.section--dark { background: var(--fill-dark); }
.section--primary { background: var(--fill-primary); }
.section--waved { position: relative; }

.stack > * + * { margin-block-start: var(--sp-4); }
.stack--lg > * + * { margin-block-start: var(--sp-8); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.text-center { text-align: center; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.text-muted { color: var(--ink-muted); }
.text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-label); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); color: var(--ink-pink);
}

/* --------------------------------------------------------------------------
   3. BUTONLAR (docs/05 §5.1)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h-md);
  padding-inline: var(--btn-px-md);
  font-family: var(--font-body);
  font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1;
  text-decoration: none;
  border: none; border-radius: var(--r-pill);
  cursor: pointer;
  transition: var(--t-color), var(--t-shadow), var(--t-move);
}
.btn:focus-visible { border-radius: var(--r-pill); }

.btn--sm { min-height: var(--btn-h-sm); padding-inline: var(--btn-px-sm); font-size: var(--fs-sm); }
.btn--lg { min-height: var(--btn-h-lg); padding-inline: var(--btn-px-lg); font-size: var(--fs-h6); }

.btn--primary { background: var(--fill-primary); color: var(--ink-inverse); box-shadow: var(--shadow-primary); }
.btn--primary:active { background: var(--fill-primary-active); transform: translateY(0); box-shadow: var(--shadow-inset); }

.btn--secondary { background: var(--fill-secondary); color: var(--ink-inverse); box-shadow: var(--shadow-secondary); }
.btn--secondary:active { background: var(--fill-secondary-active); transform: translateY(0); box-shadow: var(--shadow-inset); }

.btn--ghost {
  background: transparent; color: var(--ink-pink);
  border: var(--bw-base) solid var(--border-brand);
  box-shadow: none;
}
.btn--ghost:active { background: var(--pink-100); }

.btn--dark { background: var(--fill-dark); color: var(--ink-inverse); }
.btn--dark:active { background: var(--fill-dark-active); }

.btn--text {
  background: none; color: var(--ink-purple);
  padding-inline: var(--sp-2); box-shadow: none;
}

@media (hover: hover) {
  .btn--primary:hover { background: var(--fill-primary-hover); transform: translateY(-2px); }
  .btn--secondary:hover { background: var(--fill-secondary-hover); transform: translateY(-2px); }
  .btn--ghost:hover { background: var(--pink-50); }
  .btn--dark:hover { background: var(--fill-dark-hover); transform: translateY(-2px); }
  .btn--text:hover { text-decoration: underline; }
}

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--disabled-bg); color: var(--disabled-ink);
  box-shadow: none; transform: none; cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   4. KART (docs/05 §5.2)
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
@media (min-width: 768px) { .card { padding: var(--sp-8); } }

.card--raised { border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.card--outline { box-shadow: none; border: var(--bw-thin) solid var(--border); }

/* Program karti: pastel zemin, buyuk yaricap */
.card--tile { border-radius: var(--r-2xl); box-shadow: var(--shadow-sm); }
.card--tile-pink { background: var(--tile-pink); }
.card--tile-blue { background: var(--tile-blue); }
.card--tile-green { background: var(--tile-green); }
.card--tile-orange { background: var(--tile-orange); }

.card--clickable { position: relative; transition: var(--t-move), var(--t-shadow); }
.card--clickable .card__link::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) {
  .card--clickable:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}

.card__title { margin-block-end: var(--sp-2); }

/* --------------------------------------------------------------------------
   5. PASTEL IKON DAIRESI (docs/05 §5.3)
   -------------------------------------------------------------------------- */
.icon-circle {
  display: grid; place-items: center;
  inline-size: var(--icon-circle-md); block-size: var(--icon-circle-md);
  border-radius: var(--r-circle);
  background: var(--soft-pink);
  color: var(--ink-pink);
}
.icon-circle svg { stroke: currentColor; stroke-width: var(--icon-stroke); fill: none; width: 24px; height: 24px; }

.icon-circle--sm { inline-size: var(--icon-circle-sm); block-size: var(--icon-circle-sm); }
.icon-circle--sm svg { width: 20px; height: 20px; }
.icon-circle--lg { inline-size: var(--icon-circle-lg); block-size: var(--icon-circle-lg); }
.icon-circle--lg svg { width: 32px; height: 32px; }

.icon-circle--pink { background: var(--soft-pink); color: var(--ink-pink); }
.icon-circle--purple { background: var(--soft-purple); color: var(--ink-purple); }
.icon-circle--yellow { background: var(--soft-yellow); color: var(--ink-yellow); }
.icon-circle--green { background: var(--soft-green); color: var(--ink-green); }
.icon-circle--blue { background: var(--soft-blue); color: var(--ink-blue); }
.icon-circle--orange { background: var(--soft-orange); color: var(--ink-orange); }

/* --------------------------------------------------------------------------
   6. FORM OGELERI (docs/05 §5.4)
   -------------------------------------------------------------------------- */
.field { margin-block-end: var(--sp-5); }

.field__label {
  display: block;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--ink-strong);
  margin-block-end: var(--sp-2);
}

.field__hint {
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  color: var(--ink-muted);
  margin-block-start: var(--sp-1);
}

.field__error {
  display: flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--error-ink);
  margin-block-start: var(--sp-1);
}

.input {
  inline-size: 100%; min-block-size: var(--input-h);
  padding: var(--sp-3) var(--input-px);
  font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.4;
  color: var(--ink-strong);
  background: var(--bg-surface);
  border: var(--bw-base) solid var(--border-strong);
  border-radius: var(--r-md);
  transition: var(--t-color), var(--t-shadow);
}
.input::placeholder { color: var(--ink-muted); }
.input:hover { border-color: var(--border-hover); }
.input:focus-visible {
  outline: none; border-color: var(--fill-primary);
  box-shadow: 0 0 0 2px var(--focus-ring-inner), 0 0 0 5px var(--focus-ring);
}
.input[aria-invalid="true"] { border-color: var(--error-fill); background: var(--error-bg); }

textarea.input { min-block-size: 140px; resize: vertical; }

select.input {
  appearance: none;
  padding-inline-end: calc(var(--input-px) + 24px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234C567F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}

/* checkbox / radio - dokunma alani label ile >= 44px */
.check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  min-height: var(--tap-min);
  padding-block: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.check input {
  appearance: none; flex: none;
  width: 22px; height: 22px; margin-block-start: 2px;
  border: var(--bw-base) solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  cursor: pointer;
  transition: var(--t-color);
}
.check input[type="radio"] { border-radius: var(--r-circle); }
.check input:checked {
  background-color: var(--fill-primary);
  border-color: var(--fill-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.check input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4' fill='white'/%3E%3C/svg%3E");
}

fieldset.field { border: none; padding: 0; }
fieldset.field legend { padding: 0; }

/* --------------------------------------------------------------------------
   7. ROZET / ETIKET (docs/05 §5.6)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 28px; padding-inline: var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  white-space: nowrap;
}
.badge--accent { background: var(--fill-accent); color: var(--on-fill-accent); }
.badge--soft { background: var(--soft-purple); color: var(--ink-purple); }
.badge--outline { background: transparent; color: var(--ink-pink); border: var(--bw-thin) solid var(--border-brand); }
.badge--success { background: var(--success-bg); color: var(--success-ink); }
.badge--error { background: var(--error-bg); color: var(--error-ink); }
.badge--warning { background: var(--warning-bg); color: var(--warning-ink); }
.badge--info { background: var(--info-bg); color: var(--info-ink); }

/* --------------------------------------------------------------------------
   8. DALGALI BOLUM AYIRICI (docs/05 §6)
   -------------------------------------------------------------------------- */
.wave {
  position: absolute; inset-inline: 0;
  inline-size: 100%; block-size: var(--wave-h);
  display: block; pointer-events: none;
}
.wave--top { inset-block-start: 0; transform: translateY(-99%); }
.wave--bottom { inset-block-end: 0; transform: translateY(99%) scaleY(-1); }

/* --------------------------------------------------------------------------
   9. ISTATISTIK BANDI (docs/05 §5.8)
   -------------------------------------------------------------------------- */
.stats-band {
  background: var(--fill-primary);
  padding-block: var(--section-y-sm);
  position: relative;
}
.stats-band__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8) var(--sp-4);
  text-align: center;
}
@media (min-width: 768px) { .stats-band__grid { grid-template-columns: repeat(4, 1fr); } }
.stats-band__value {
  font-family: var(--font-heading);
  font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-h1);
  color: var(--ink-inverse);
}
.stats-band__label {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: rgb(255 255 255 / 0.88); /* %88 alt sinir - dusurme (docs/05 §5.8) */
}

/* --------------------------------------------------------------------------
   10. HEADER - YUZEN PILL NAV (docs/05 §5.5)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: var(--sp-2);
  z-index: var(--z-nav);
  padding-block-start: var(--sp-2);
}
@media (min-width: 1024px) { .site-header { top: var(--sp-4); padding-block-start: var(--sp-4); } }

.navbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--nav-h-mobile);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-nav);
  transition: var(--t-shadow);
}
@media (min-width: 1024px) {
  .navbar { min-height: var(--nav-h); border-radius: var(--r-xl); padding-inline: var(--sp-6); }
}
/* Kaydirma sonrasi (main.js .is-scrolled ekler) */
.site-header.is-scrolled .navbar {
  box-shadow: var(--shadow-md);
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(8px);
}

/* Tipografik logo - maskot yok, harf harf marka renkleri */
.brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; }
.brand__word {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.brand__word--sm { font-size: 1.25rem; }
.brand__sub {
  font-size: 0.6rem; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--ink-muted);
  margin-block-start: 2px;
}
.brand__letter--pink { color: var(--ink-pink); }
.brand__letter--purple { color: var(--ink-purple); }
.brand__letter--yellow { color: var(--ink-yellow); }
.brand__letter--green { color: var(--ink-green); }
.brand__letter--blue { color: var(--ink-blue); }
.brand__letter--orange { color: var(--ink-orange); }

.navbar__links { display: none; }
@media (min-width: 1024px) {
  .navbar__links { display: flex; align-items: center; gap: var(--sp-1); }
}
/* 1024-1365px: 7 menu ogesi + telefon + CTA dar geliyor -> sikistir.
   1024-1120 arasi EN DAR aralik (iPad yatay tam 1024): burada menu ekrandan
   tasip "Bize Ulaşın" dugmesini kirpiyordu, bir kademe daha sikilastirildi. */
@media (min-width: 1024px) and (max-width: 1365.98px) {
  .navbar { gap: var(--sp-2); padding-inline: var(--sp-4); }
  .navbar__links { gap: 0; }
  .navbar__link { padding-inline: var(--sp-2); font-size: var(--fs-xs); }
  .navbar__link.is-active::after { inset-inline: var(--sp-2); }
  .navbar__actions { gap: var(--sp-2); }
}
@media (min-width: 1024px) and (max-width: 1179.98px) {
  .navbar { gap: var(--sp-1); padding-inline: var(--sp-3); }
  .navbar__link { padding-inline: var(--sp-1); letter-spacing: -0.01em; }
  .navbar__link.is-active::after { inset-inline: var(--sp-1); }
  .navbar__actions { gap: var(--sp-1); }
  .navbar__phone { padding-inline: var(--sp-2); }
  .navbar__cta { padding-inline: var(--sp-3); }
  /* logo clamp'i bu aralikta 1.55rem'e ciktigi icin 23px tasma kaliyordu */
  .navbar .brand__word { font-size: 1.28rem; }
  .navbar .brand__sub { font-size: 0.54rem; }
}
.navbar__link {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--sp-3);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  white-space: nowrap;            /* menu ogesi ASLA iki satira bolunmez */
  color: var(--ink-strong);
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: var(--t-color);
  position: relative;
}
@media (hover: hover) { .navbar__link:hover { color: var(--ink-pink); } }
.navbar__link.is-active { color: var(--ink-pink); }
.navbar__link.is-active::after {
  content: ""; position: absolute;
  inset-inline: var(--sp-3); inset-block-end: 4px;
  height: var(--bw-thick); border-radius: var(--r-pill);
  background: var(--ink-pink);
}

.navbar__actions { display: flex; align-items: center; gap: var(--sp-3); }

.navbar__phone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-min); min-width: var(--tap-min);
  padding-inline: var(--sp-2);
  border: var(--bw-thin) solid var(--border);
  border-radius: var(--r-pill);
  color: var(--ink-pink);
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
  text-decoration: none;
}
/* Ust menude numara METNI gosterilmiyor (sigmiyor) ama baglantinin erisilebilir
   adi olmali: display:none ekran okuyucudan da gizliyordu -> gorsel olarak gizle. */
.navbar__phone-text {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.navbar__cta { white-space: nowrap; }
.navbar__actions { flex-wrap: nowrap; }
@media (min-width: 1200px) {
  .navbar__phone { padding-inline: var(--sp-4); }
}

.navbar__cta { display: none; }
@media (min-width: 1024px) { .navbar__cta { display: inline-flex; } }

.navbar__burger {
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-md);
  color: var(--ink-strong);
}
@media (min-width: 1024px) { .navbar__burger { display: none; } }

/* --------------------------------------------------------------------------
   11. MOBIL TAM EKRAN MENU (<dialog>, Ç26)
   -------------------------------------------------------------------------- */
.mobile-menu {
  border: none; padding: 0;
  width: 100vw; height: 100dvh;
  max-width: none; max-height: none;
  background: var(--bg-page);
  color: var(--ink-body);
}
.mobile-menu::backdrop { background: var(--bg-overlay); }

.mobile-menu[open] { animation: menu-slide-in var(--dur-slow) var(--ease-out); }
@keyframes menu-slide-in {
  from { transform: translateX(12%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.mobile-menu__inner {
  display: flex; flex-direction: column;
  min-height: 100%;
  padding: var(--sp-4) var(--gutter) max(var(--sp-6), env(safe-area-inset-bottom));
}
.mobile-menu__top {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--nav-h-mobile);
}
.mobile-menu__close {
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-md);
  color: var(--ink-strong);
}
.mobile-menu__links { margin-block-start: var(--sp-6); }
.mobile-menu__link {
  display: flex; align-items: center;
  min-height: 52px;
  padding-inline: var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-h5); font-weight: var(--fw-semibold);
  color: var(--ink-strong);
  text-decoration: none;
  border-radius: var(--r-md);
  border-inline-start: 4px solid transparent;
}
.mobile-menu__link.is-active {
  color: var(--ink-pink);
  border-inline-start-color: var(--ink-pink);
  background: var(--pink-50);
}
.mobile-menu__footer {
  margin-block-start: auto;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding-block-start: var(--sp-8);
}
.mobile-menu__footer .btn { width: 100%; }

/* Menu aciksa arka plan kaydirilamaz (main.js body'ye ekler) */
body.scroll-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   12. SAYFA HERO (ic sayfalarin ust bandi - yer tutucu donem)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--section-y-sm);
  text-align: center;
}
.page-hero .badge { margin-block-end: var(--sp-4); }
.page-hero__title { margin-block-end: var(--sp-3); }
.page-hero__lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--ink-muted);
  max-width: var(--measure-tight);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   13. YER TUTUCU KARTI ("yapim asamasinda" + hata sayfalari)
   -------------------------------------------------------------------------- */
.placeholder-card {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  background: var(--bg-surface);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--sp-10) var(--sp-6);
}
@media (min-width: 768px) { .placeholder-card { padding: var(--sp-12) var(--sp-10); } }
.placeholder-card__art { width: min(260px, 70%); margin-inline: auto; margin-block-end: var(--sp-6); }
.placeholder-card__title { font-size: var(--fs-h3); margin-block-end: var(--sp-3); }
.placeholder-card__text { color: var(--ink-muted); margin-inline: auto; margin-block-end: var(--sp-6); }

/* --------------------------------------------------------------------------
   14. FOOTER (koyu lacivert)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--fill-dark);
  color: var(--navy-100);
  padding-block: var(--section-y) var(--sp-8);
  margin-block-start: var(--wave-h);
}
.site-footer a { color: var(--navy-100); }
@media (hover: hover) { .site-footer a:hover { color: var(--white); } }

.site-footer__grid {
  display: grid; grid-template-columns: 1fr;
  gap: var(--sp-10);
}
@media (min-width: 768px) {
  /* DORT sutun: kurum seridi eklenince 4. blok (Iletisim) alt satira dusup
     sagda koca bir bosluk birakiyordu. */
  .site-footer__grid { grid-template-columns: 1.2fr 1.1fr 1fr; gap: var(--sp-8); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

.brand--footer .brand__word { color: var(--white); }
.brand--footer .brand__sub { color: var(--navy-300); }

.site-footer__desc { margin-block-start: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--navy-200); }

.site-footer__title {
  font-size: var(--fs-h6); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--white);
  margin-block-end: var(--sp-4);
}
.site-footer__links li { margin-block-end: var(--sp-1); }
.site-footer__links a {
  display: inline-flex; align-items: center;
  min-height: 36px;
  text-decoration: none;
  font-size: var(--fs-sm);
}
.site-footer__links--contact li { font-size: var(--fs-sm); line-height: var(--lh-sm); margin-block-end: var(--sp-2); color: var(--navy-200); }

.site-footer__social { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.site-footer__social a {
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-circle);
  background: rgb(255 255 255 / 0.08);
}
@media (hover: hover) { .site-footer__social a:hover { background: rgb(255 255 255 / 0.16); } }

.site-footer__bottom {
  margin-block-start: var(--sp-10);
  padding-block-start: var(--sp-6);
  border-block-start: var(--bw-hair) solid rgb(255 255 255 / 0.12);
  display: flex; flex-direction: column; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--navy-300);
}
@media (min-width: 768px) {
  .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
/* WCAG 2.5.8: yasal baglantilar 18px yuksekliginde kaliyor, telefonda
   parmakla isabet ettirilemiyordu. */
.site-footer__legal a {
  font-size: var(--fs-xs); color: var(--navy-300);
  display: inline-flex; align-items: center; min-block-size: var(--tap-min, 44px);
}

/* --------------------------------------------------------------------------
   15. MOBIL SABIT ALT CAGRI CUBUGU (docs/09 §2.6)
   -------------------------------------------------------------------------- */
.callbar {
  position: fixed; inset-inline: 0; inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  background: var(--bg-surface);
  border-block-start: var(--bw-hair) solid var(--border);
  box-shadow: 0 -4px 16px rgb(var(--shadow-rgb) / 0.10);
  padding-block-end: max(var(--sp-2), env(safe-area-inset-bottom));
  transform: translateY(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.callbar[hidden] { display: none; }
.callbar.is-hidden { transform: translateY(110%); }

.callbar__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: var(--callbar-item-h);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--ink-strong);
  text-decoration: none;
  border-inline-start: 1px solid var(--border-soft);
}
.callbar__item:first-child { border-inline-start: none; }
.callbar__item--call .icon { color: var(--ink-pink); }
.callbar__item--whatsapp .icon { color: var(--ink-green); }

.callbar__cta-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--fill-primary); color: var(--ink-inverse);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
}
.callbar__cta-pill .icon { width: 18px; height: 18px; }

/* Gorunurluk kurallari (docs/09 §2.6) */
@media (min-width: 1024px) { .callbar { display: none; } }
@media (orientation: landscape) and (max-height: 480px) { .callbar { display: none; } }

/* Cubuk gorunurken govde telafisi (main.js .has-callbar ekler) */
/* --callbar-h main.js tarafindan offsetHeight ile olculur ve .callbar zaten
   `padding-block-end: max(sp-2, env(safe-area-inset-bottom))` iceriyor; yani
   olculen yukseklik safe-area'yi ZATEN kapsiyor. Buraya bir daha env() eklemek
   centikli iPhone'da ~34px fazla bosluk birakiyordu (portal.css'te ayni tuzak
   daha once yasandi). */
body.has-callbar { --site-pad-b: var(--callbar-h); }

/* --------------------------------------------------------------------------
   16. GORUNUNCE BELIRME (fade-in) ANIMASYONU
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
}
/* JS yoksa veya hareket azaltma acikken icerik her zaman gorunur */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
html.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   17. TASARIM REHBERI SAYFASINA OZEL YARDIMCILAR
   -------------------------------------------------------------------------- */
.sg-section { margin-block-end: var(--sp-16); }
.sg-section > h2 { margin-block-end: var(--sp-6); padding-block-end: var(--sp-2); border-block-end: var(--bw-hair) solid var(--border); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); }
.sg-swatch { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-xs); background: var(--bg-surface); }
.sg-swatch__color { height: 64px; }
.sg-swatch__meta { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.sg-swatch__meta code { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted); display: block; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-block-end: var(--sp-4); }
.sg-demo-band { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.sg-wave-demo { position: relative; background: var(--bg-page-alt); height: 120px; margin-block-start: calc(var(--wave-h) + var(--sp-4)); border-radius: var(--r-md); }

/* --------------------------------------------------------------------------
   18. UYARI KUTULARI (.alert) - flash mesajlar + form geri bildirimi
   (auth, yonetim ve genel sayfalarda ortak; docs/05 durum renkleri)
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-block-end: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: start;
  border: var(--bw-thin) solid transparent;
}
.alert--error   { background: var(--error-bg);   color: var(--error-ink);   border-color: var(--error-border); }
.alert--success { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-border); }
.alert--info    { background: var(--blue-50);    color: var(--ink-blue);    border-color: var(--blue-200); }

/* Veli portali tanitim karti - giris butonu */
.portal-card__cta { margin-block-start: var(--sp-5); }

/* ==========================================================================
   CİLA — mikro etkileşimler. Hepsi prefers-reduced-motion'a saygılı.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Kartlar imleçle hafifçe yükselir */
  .card--tile,
  .home-features .feature,
  .event-card,
  .blog-card,
  .album-card {
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
  }
  .card--tile:hover,
  .event-card:hover,
  .blog-card:hover,
  .album-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }

  /* Özellik ikonları hafifçe canlanır */
  .feature .icon-circle { transition: transform var(--dur-fast) var(--ease-out); }
  .feature:hover .icon-circle { transform: scale(1.08) rotate(-4deg); }

  /* Fotoğraflar çerçeve içinde hafifçe yakınlaşır */
  .home-hero__media,
  .home-about__media,
  .gallery-item,
  .album-card__cover { overflow: hidden; }
  .home-hero__photo,
  .home-about__photo,
  .gallery-item img,
  .album-card__cover img { transition: transform 420ms var(--ease-out); }
  .home-about__media:hover .home-about__photo,
  .gallery-item:hover img,
  .album-card:hover .album-card__cover img { transform: scale(1.04); }

  /* Butonlarda basma hissi */
  .btn { transition: transform var(--dur-fast) var(--ease-out),
                     box-shadow var(--dur-fast) var(--ease-out),
                     background-color var(--dur-fast) var(--ease-out); }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }

  /* Bağlantılarda alt çizgi soldan sağa açılır */
  .pt-link, .ig-strip__link { background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size 220ms var(--ease-out); text-decoration: none; }
  .pt-link:hover, .ig-strip__link:hover { background-size: 100% 1.5px; text-decoration: none; }
}

/* Tek satirlik SVG ikon seti (views/partials/ikon.ejs) - currentColor ile boyanir */
.ikon { display: block; flex: none; }

/* --------------------------------------------------------------------------
   DOKUNMA HEDEFLERI - mobilde her tiklanabilir oge en az 44px yuksekliginde
   olmali (WCAG 2.5.5 / Apple HIG). Denetimde 25-32px olcülen ogeler.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Kucuk butonlar mobilde 36px kaliyordu - parmakla isabet zor */
  .btn--sm { min-block-size: var(--tap-min); }
  /* Blog basligi tek satirlik link: dokunma alani genisletilir */
  .blog-card__title a { display: inline-flex; align-items: center; min-block-size: var(--tap-min); }

  .brand,
  .brand--footer {
    min-block-size: var(--tap-min);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Kart ici "devamini oku" baglantilari */
  .card__link,
  .program-card__link,
  .ig-strip__link,
  .pt-link {
    min-block-size: var(--tap-min);
    display: inline-flex;
    align-items: center;
  }
}

/* Logo alt yazisi 9.6px cok kucuktu - okunabilir alt sinir */
.brand__sub { font-size: 11px; }   /* 9.6px okunaksizdi */

/* Klavye odağı her zaman net görünür (erişilebilirlik) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Uzun metinlerde daha rahat okuma */
.pt-card p, .msg__text { text-wrap: pretty; }
h1, h2, h3, .pt-title { text-wrap: balance; }

/* Sayfa altindaki resmi kurum amblemleri. Yuklenmedikce serit hic basilmaz.
   Amblemler YAN YANA dizilir; alt alta dizilince footer cok uzuyordu. */
.kurum-serit__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
}
.kurum-serit__oge {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  /* SABIT 76px masaustunde dar sutuna sikisip logolari egri gosteriyordu.
     Esnek taban + ust sinir: dar yerde 3'u yan yana sigar, genis yerde
     birbirinden ayrilmadan durur. */
  flex: 1 1 78px; max-inline-size: 108px; min-inline-size: 68px;
  text-align: center;
}
.kurum-serit__oge img {
  inline-size: 52px; block-size: 52px; object-fit: contain;
  background: #fff; border-radius: var(--r-md); padding: 5px;
}
.kurum-serit__ad {
  font-size: 11px; line-height: 1.3; color: var(--navy-200);
  overflow-wrap: break-word; hyphens: auto;
}


/* ---------- Uretici imzasi (Eleonor Software) ----------
   site.css her arayuzde (site + yonetim + veli/ogretmen portali + giris)
   yuklendigi icin tek tanim yetiyor.
   `currentColor` + opaklik: koyu footer'da beyaz, acik panelde koyu cikar -
   her yer icin ayri renk tanimlamaya gerek kalmiyor.
   NOT: sinif adi ".marka" DEGIL - o ad baska projelerde baslik olarak
   kullanildi; imza icin ayri ad tutuluyor. */
.uretici {
  display: block;
  text-align: center;
  margin-block-start: var(--sp-4);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: currentColor;
  /* Opaklik OLCULEREK secildi: 0.55'te 11px yazi krem zeminde 2,5:1'e
     dusuyordu (WCAG AA kucuk metin icin 4,5:1 ister). 0.9 her zeminde
     >=5:1 birakiyor; "soluk" duygusunu punto + harf araligi zaten veriyor. */
  opacity: 0.9;
  text-decoration: none;
  transition: opacity var(--dur-fast, 150ms) ease;
}
/* Koyu footer'da metin rengi neredeyse beyaz; imza okulun kendi telif
   satirindan daha parlak cikmasin diye orada soluk laciverte cekiliyor. */
/* navy-300 zaten footer'in soluk tonu (telif ve yasal baglantilar da onu
   kullaniyor); ustune opaklik binince 4,26:1'e dusuyordu. Burada opaklik 1,
   olculen kontrast 4,87:1. */
.site-footer .uretici { color: var(--navy-300); opacity: 1; }
.uretici:hover,
.uretici:focus-visible { opacity: 1; text-decoration: underline; }
/* Dar kenar cubugunda "POWERED BY ELEONOR / SOFTWARE" diye yanlis yerden
   boluniyordu. Iki parca da kendi icinde bolunmez; satir sonu ancak
   aralarinda olusur: "POWERED BY" / "ELEONOR SOFTWARE". */
.uretici span,
.uretici b { white-space: nowrap; }
.uretici b { font-weight: var(--fw-bold); letter-spacing: 0.06em; }
@media (prefers-reduced-motion: reduce) { .uretici { transition: none; } }

/* ---------- Ust menu telefon secimi ---------- */
.tel-secim { position: relative; }
.tel-secim__liste {
  position: absolute; inset-block-start: calc(100% + var(--sp-2)); inset-inline-end: 0;
  z-index: var(--z-nav);
  min-inline-size: 232px;
  background: var(--white); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, 0 12px 32px rgb(0 0 0 / 0.16));
  border: var(--bw-hair) solid var(--border);
  padding: var(--sp-2);
}
.tel-secim__baslik {
  margin: 0 0 var(--sp-1); padding-inline: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted);
}
.tel-secim__oge {
  display: flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--ink-strong); text-decoration: none;
  font-weight: var(--fw-semibold); white-space: nowrap;
}
.tel-secim__oge .icon { inline-size: 18px; block-size: 18px; color: var(--ink-pink); flex: none; }
.tel-secim__oge:hover { background: var(--navy-50); }
.tel-secim__oge:focus-visible { outline: 2px solid var(--fill-secondary); outline-offset: -2px; }