/* ==========================================================================
   ANA SAYFA STILLERI  (views/pages/home.ejs)
   --------------------------------------------------------------------------
   Yukleme: fonts -> tokens -> site -> pages/home (home.ejs body icinde link).
   KURAL: Ciplak HEX yok - sadece var(--token). Mobile-first (docs/09 §1.1).
   Kirilma noktalari SADECE @media icinde literal px olabilir (docs/09 §1.2):
   480 = --bp-sm, 768 = --bp-md, 1024 = --bp-lg, 1280 = --bp-xl.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. DOODLE ORTAK KURALLARI (docs/05 §7.2 + docs/09 §3.9)
   -------------------------------------------------------------------------- */
.doodle {
  position: absolute;
  z-index: var(--z-doodle);           /* icerigin ALTINDA */
  pointer-events: none;
  user-select: none;
  inline-size: var(--doodle-size, 64px);
  block-size: auto;
  display: none;                       /* varsayilan: gizli */
}
.doodle--always { display: block; }
@media (min-width: 640px) { .doodle--m { display: block; } }
@media (min-width: 1024px) { .doodle--d { display: block; } }

/* Cok yavas "yuzme" - sadece hareket isteyen kullanicida (docs/05 §7.3) */
@media (prefers-reduced-motion: no-preference) {
  .doodle--float  { animation: doodle-float 7s var(--ease-in-out) infinite; }
  .doodle--float2 { animation: doodle-float 9s var(--ease-in-out) infinite 1.2s; }
  .doodle--spin   { animation: doodle-spin 26s linear infinite; }
}
@keyframes doodle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}
@keyframes doodle-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   1. HERO (docs/09 §3.1)
   -------------------------------------------------------------------------- */
.home-hero {
  position: relative;
  /* Yukseklik birimi YOK - hero yuksekligi iceriginden dogar (docs/09 §1.7).
     Alt bosluk: ozellik seridinin ust dalgasi buraya tasar. */
  padding-block: var(--sp-8) calc(var(--section-y-sm) + var(--wave-h) + var(--sp-6));
}
@media (min-width: 1024px) {
  /* Ilk ekran cok kisa kaliyordu; kurumsal bir nefes payi verilir. */
  .home-hero { padding-block-start: var(--sp-12); }
}

/* Basligin ustundeki kucuk guven rozeti */
.home-hero__rozet {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-block-end: var(--sp-4);
  padding: 6px var(--sp-3) 6px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  color: var(--ink-strong);
}
.home-hero__rozet-nokta {
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--green-500, var(--ink-green));
  box-shadow: 0 0 0 3px rgb(from var(--green-500, #4ca771) r g b / 0.18);
  flex: none;
}


.home-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}

.home-hero__content {
  position: relative;
  z-index: var(--z-raised);           /* doodle'larin ustunde */
}

.home-hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-extrabold);
  color: var(--ink-strong);
  margin-block-end: var(--sp-5);
}
.home-hero__line { display: block; width: fit-content; } /* kalp dogru metin sonuna otursun */
.home-hero__line--pink {
  position: relative;
  /* >=24px buyuk metin - marka pembesi AA buyuk-metin esigini gecer (docs/09 §3.1) */
  color: var(--pink-500);
}

/* Basligin yanindaki kalp - her ekranda 1 adet, kucuk */
.doodle--kalp {
  --doodle-size: 20px;
  inset-block-start: -0.35em;
  inset-inline-end: -26px;
  position: absolute;
}
@media (min-width: 1024px) { .doodle--kalp { --doodle-size: 28px; inset-inline-end: -38px; } }

.home-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-muted);
  max-width: var(--measure-tight);
  margin-block-end: var(--sp-6);
}

/* Butonlar: <480px dikey yigin tam genislik; >=480px yan yana (docs/09 §3.1) */
.home-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.home-hero__actions .btn { width: 100%; }
@media (min-width: 480px) { /* --bp-sm */
  .home-hero__actions { flex-direction: row; flex-wrap: wrap; }
  .home-hero__actions .btn { width: auto; flex: 1 1 200px; max-width: 320px; }
}
@media (min-width: 1024px) { /* --bp-lg */
  .home-hero__actions .btn { flex: 0 0 auto; }
}

/* Gorsel bloku */
.home-hero__media-wrap { position: relative; }

.home-hero__media {
  position: relative;
  z-index: var(--z-raised);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;                 /* mobil 4:3 (docs/09 §3.1) */
}
@media (min-width: 1024px) { .home-hero__media { aspect-ratio: 3 / 2; } }
.home-hero__art,
.home-hero__photo { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-hero__media picture { display: contents; }

/* Gokkusagi/gunes/kalp gibi susler fotografin USTUNDE durur (mockup) */
.home-hero .doodle:not(.doodle--blob) { z-index: calc(var(--z-raised) + 1); }

/* Sari amorf blob - gorselin arkasinda, her ekranda */
.doodle--blob {
  --doodle-size: 115%;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
}

/* Gulen gunes - fotografin SOL ust kosesi (mockup). Gokkusagi sag ustte
   duruyor; ikisi ayni koseye konursa ust uste biniyordu. */
.doodle--gunes {
  --doodle-size: 36px;
  z-index: calc(var(--z-raised) + 1);
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  inset-inline-end: auto;
}
@media (min-width: 1024px) {
  .doodle--gunes {
    --doodle-size: 56px;
    inset-block-start: var(--sp-4);
    inset-inline-start: var(--sp-4);
  }
}

/* Masaustu doodle'lari */
.doodle--ucak { --doodle-size: 52px; inset-block-start: -8px; inset-inline-end: 6%; }
/* Gokkusagi mockup'ta fotografin SAG USTUNDE - basligin uzerine binmemeli */
.doodle--gokkusagi {
  --doodle-size: 84px;
  inset-block-start: 4px;
  inset-inline-end: 8px;
  inset-inline-start: auto;
}
.doodle--yildiz-1 { --doodle-size: 26px; inset-block-end: -6px; inset-inline-end: -20px; }
.doodle--yildiz-2 { --doodle-size: 18px; inset-block-start: 12%; inset-inline-start: -12px; }
.doodle--yaprak { --doodle-size: 40px; inset-block-end: -14px; inset-inline-start: 2px; }
@media (min-width: 1024px) { .doodle--yaprak { inset-inline-start: -14px; inset-block-end: 6px; } }

/* Masaustu hero: iki sutun */
@media (min-width: 1024px) { /* --bp-lg */
  .home-hero { padding-block-start: var(--sp-12); }
  .home-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-12); }
}
/* 768+: ozellik seridi kart oldu, ust dalga yok -> hero alt boslugu normale doner */
@media (min-width: 768px) {
  .home-hero { padding-block-end: var(--section-y-sm); }
}

/* --------------------------------------------------------------------------
   2. INSTAGRAM SERIDI ISKELETI - su an gizli, A9'da dolacak
   -------------------------------------------------------------------------- */
/* #ig-serit gorunurlugu artik feedService kontrol eder (onayli gonderi yoksa partial hic basilmaz) */
.home-ig__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
}
.home-ig__title { font-size: var(--fs-h4); }
.home-ig__handle {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-pink);
  white-space: nowrap;
}
.home-ig__rail { overflow-x: auto; overscroll-behavior-inline: contain; }


/* --------------------------------------------------------------------------
   3. OZELLIK SERIDI (docs/09 §3.3: dikey liste -> 2 -> 3 -> 5 sutun)
   -------------------------------------------------------------------------- */
/* Mockup: krem zemin uzerinde yuvarlak koseli BEYAZ KART (tam genislik degil) */
@media (min-width: 768px) {
  .home-features {
    background: transparent;              /* bolum zemini krem kalir */
    padding-block: var(--sp-10);
  }
  .home-features > .container {
    background: var(--bg-surface);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-md);
    padding: var(--sp-10) var(--sp-8);
  }
  /* Kart geldigi icin bolumun kendi dalgasi gereksiz */
  .home-features > svg[class*="wave"],
  .home-features > .wave { display: none; }
}
.features-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.feature {
  display: grid;
  grid-template-columns: var(--icon-circle-md) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-4);
  border-block-end: var(--bw-hair) solid var(--border-soft);
}
.feature:last-child { border-block-end: none; }

.feature__title {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: var(--fw-semibold);
  color: var(--ink-strong);
  margin-block-end: var(--sp-1);
}
.feature__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);            /* beyaz zeminde 5.84:1 (docs/09 §3.3) */
}

@media (min-width: 480px) { /* --bp-sm: 2 sutun, 5. oge tam genislik */
  .features-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); }
  .feature { border-block-end: none; padding-block: var(--sp-3); }
  .feature:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 768px) { /* --bp-md: 3 sutun */
  .features-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature:nth-child(5) { grid-column: auto; }
}
@media (min-width: 1024px) { /* --bp-lg: mockup'taki 5 sutun, dikey dizilim */
  .features-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-8); }
  .feature {
    /* ikon / baslik / aciklama ayri satirlarda -> 5 ogenin BASLIKLARI ayni hizada
       (subgrid ile satir yukseklikleri paylasilir; desteklenmezse auto'ya duser) */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 3;
    justify-items: center;
    text-align: center;
    gap: var(--sp-4);
    padding-block: 0;
  }
  .features-list { grid-template-rows: auto auto auto; align-items: start; }
  .feature .icon-circle { inline-size: var(--icon-circle-lg); block-size: var(--icon-circle-lg); }
  .feature .icon-circle svg { width: 30px; height: 30px; }
  /* Sutunlar arasinda ince ayirici - bes oge tek bir seride dagilmasin */
  .feature + .feature { border-inline-start: var(--bw-hair) solid var(--border-soft); }
  .features-list { gap: 0; }
  .feature { padding-inline: var(--sp-5); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .feature .icon-circle { transition: transform var(--dur-base, 220ms) var(--ease-out, ease); }
  .feature:hover .icon-circle { transform: translateY(-3px) scale(1.04); }
}

/* Cift katmanli ust dalga mobilde TEK katmana iner (docs/09 §3.8) */
.home-features .wave--top path[opacity] { display: none; }
@media (min-width: 768px) { .home-features .wave--top path[opacity] { display: block; } }

/* --------------------------------------------------------------------------
   4. HAKKIMIZDA (docs/09 §3.4)
   Mobil sira: etiket+baslik -> foto+rozet -> metin+liste+buton
   -------------------------------------------------------------------------- */
.home-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "media" "body";
  gap: var(--sp-6);
  align-items: center;
}
.home-about__head { grid-area: head; }
.home-about__media-wrap { grid-area: media; }
.home-about__body { grid-area: body; }

.home-about__head .eyebrow { margin-block-end: var(--sp-2); }
.home-about__title { max-width: 18ch; }
.home-about__title-pink { color: var(--pink-500); } /* h2 boyutu >=24px: buyuk metin AA */

.home-about__media-wrap {
  position: relative;
  /* Rozet dikeyde %50 tasar - alttaki icerige carpmasin */
  margin-block-end: var(--sp-4);
}
.home-about__media {
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 2;
}
.home-about__art,
.home-about__photo { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-about__media picture { display: contents; }

/* Sari "10+ Yillik Tecrube" rozeti - sol altta, %50 tasarak (docs/09 §3.4) */
.about-badge {
  position: absolute;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);      /* mockup: fotografin SAG ALT kosesi */
  inset-inline-start: auto;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  max-inline-size: 62%;
  padding: var(--sp-2-5) var(--sp-4);
  background: var(--fill-accent);
  color: var(--on-fill-accent);       /* sari uzerine LACIVERT - asla beyaz (docs/05 §2.3) */
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-sm);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
}
.about-badge__icon { width: 18px; height: 18px; flex: none; }

.home-about__text { margin-block-end: var(--sp-5); }

.about-checks { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-6); }
.about-checks__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  color: var(--ink-strong);
  font-weight: var(--fw-semibold);
}
.about-checks__dot {
  display: grid; place-items: center;
  inline-size: 28px; block-size: 28px;
  border-radius: var(--r-circle);
  background: var(--fill-primary);    /* mor daire + beyaz tik */
  color: var(--ink-inverse);
}
.about-checks__icon { width: 15px; height: 15px; }

.home-about__cta .btn { width: 100%; }
@media (min-width: 480px) { .home-about__cta .btn { width: auto; } }

@media (min-width: 1024px) { /* --bp-lg: sol metin / sag foto */
  .home-about__grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas: "head media" "body media";
    column-gap: var(--sp-16);
    row-gap: var(--sp-2);
    align-items: center;
  }
  .home-about__media-wrap { margin-block-end: 0; }
  /* Masaustunde rozet fotografin sag alt kosesinden biraz disari tasarak "yuzer" */
  .about-badge {
    inset-inline-start: auto;                        /* SOL set edilirse eleman gerilir */
    inset-inline-end: calc(-1 * var(--sp-6));
    inset-block-end: var(--sp-6);
    max-inline-size: max-content;
  }
}

/* --------------------------------------------------------------------------
   5. EGITIM PROGRAMLARIMIZ (docs/09 §3.5: 2x2 grid, yatay kaydirma YOK)
   -------------------------------------------------------------------------- */
.home-programs__head {
  text-align: center;
  max-width: var(--measure-tight);
  margin-inline: auto;
  margin-block-end: var(--sp-8);
}
.home-programs__title { color: var(--ink-purple); margin-block-end: var(--sp-2); }
.home-programs__lead { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); margin-inline: auto; }

.programs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 320px'te bile tasmaz */
  gap: var(--sp-3);
}
@media (min-width: 768px) { /* --bp-md: 4 sutun */
  .programs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
}

.program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-4);                /* mobil dolgu (docs/09 §3.5) */
  border-radius: var(--r-xl);          /* mobilde 24px */
  min-height: 100%;
}
@media (min-width: 768px) {
  .program-card { padding: var(--sp-6); border-radius: var(--r-2xl); }
}
@media (min-width: 1280px) { /* --bp-xl */
  .program-card { padding: var(--sp-8); }
}

.program-card__icon {
  inline-size: var(--icon-circle-sm);  /* mobil 44px */
  block-size: var(--icon-circle-sm);
  background: var(--bg-surface);       /* pastel-200 zeminden ayrissin diye beyaz daire */
  margin-block-end: var(--sp-3);
}
.program-card__icon svg { width: 20px; height: 20px; }
@media (min-width: 1024px) {
  .program-card__icon { inline-size: var(--icon-circle-lg); block-size: var(--icon-circle-lg); }
  .program-card__icon svg { width: 30px; height: 30px; }
}
.program-card .icon-circle--pink { color: var(--ink-pink); }
.program-card .icon-circle--blue { color: var(--ink-blue); }
.program-card .icon-circle--green { color: var(--ink-green); }
.program-card .icon-circle--orange { color: var(--ink-orange); }

.program-card__age {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--ink-body);
  margin-block-end: var(--sp-1);
}
.program-card__title {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  margin-block-end: var(--sp-2);
}
@media (min-width: 1024px) { .program-card__title { font-size: var(--fs-h4); } }
.program-card__link { color: var(--ink-strong); text-decoration: none; }

.program-card__text {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--ink-body);              /* pastel-200 zeminde ink-muted KULLANILMAZ (docs/09 §3.5) */
  margin-block-end: var(--sp-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;               /* mobilde 2 satir */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .program-card__text { font-size: var(--fs-sm); line-height: var(--lh-sm); -webkit-line-clamp: 3; }
}

/* Renkli daire ok butonu - gorsel 40px + 44px dokunma hedefi (::after karttaki link) */
.program-card__arrow {
  margin-block-start: auto;
  align-self: flex-end;
  display: grid; place-items: center;
  inline-size: 40px; block-size: 40px;
  border-radius: var(--r-circle);
  color: var(--ink-inverse);
  transition: var(--t-move);
}
@media (min-width: 1024px) { .program-card__arrow { inline-size: var(--tap-min); block-size: var(--tap-min); } }
.program-card__arrow-icon { width: 18px; height: 18px; }
.program-card__arrow--pink { background: var(--fill-secondary); }
.program-card__arrow--blue { background: var(--fill-blue); }
.program-card__arrow--green { background: var(--fill-green); }
.program-card__arrow--orange { background: var(--fill-orange); }
.program-card__arrow--purple { background: var(--fill-primary); }
.program-card__arrow--yellow { background: var(--fill-accent); color: var(--on-fill-accent); }
@media (hover: hover) {
  .program-card:hover .program-card__arrow { transform: translateX(4px); }
}

/* --------------------------------------------------------------------------
   6. ISTATISTIK BANDI + SARI ZIYARET KARTI (docs/09 §3.6-3.7)
   -------------------------------------------------------------------------- */
.home-stats {
  /* Dalgalarin onceki/sonraki bolumlere tasma payi */
  margin-block: calc(var(--wave-h) + var(--sp-4));
}

.home-stats__layout { display: grid; grid-template-columns: minmax(0, 1fr); }

.stats-band__item {
  display: grid;
  grid-template-rows: auto auto auto;   /* ikon / rakam / etiket - hepsi ayni hizada */
  justify-items: center;
  align-content: start;
  gap: var(--sp-1);
  /* Rakamlar mor zeminde yuzuyordu; her biri kendi hafif kutusunda durur */
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-xl);
  background: rgb(255 255 255 / 0.08);
}
.stats-band__icon { display: grid; place-items: center; color: var(--ink-inverse); opacity: 0.85; }
.stats-band__icon-svg { width: 28px; height: 28px; }
.stats-band__value { font-variant-numeric: tabular-nums; white-space: nowrap; }  /* '10+ Yıl' tek satir */

/* Sari ziyaret karti */
.visit-card {
  background: var(--fill-accent);
  color: var(--on-fill-accent);        /* TUM metin lacivert - sari uzerine asla beyaz */
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  text-align: center;
}
@media (min-width: 768px) { .visit-card { padding: var(--sp-8); } }

.visit-card__icon {
  display: grid; place-items: center;
  margin-block-end: var(--sp-3);
  color: var(--on-fill-accent);
}
.visit-card__calendar { width: 64px; height: 64px; }
.visit-card__title {
  font-size: var(--fs-h3);
  color: var(--on-fill-accent);
  margin-block-end: var(--sp-2);
}
.visit-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  margin-inline: auto;
  margin-block-end: var(--sp-5);
  max-width: 34ch;
}
.visit-card__btn { width: 100%; }
@media (min-width: 480px) {
  .visit-card__btn { width: auto; min-width: 240px; }
}

/* Mobil: kart bandin ALTINDA, krem zeminde */
.home-stats__card--mobile { margin-block-start: calc(var(--wave-h) + var(--sp-8)); }
.home-stats__card--desktop { display: none; }

@media (min-width: 1024px) { /* --bp-lg: kart bandin YANINDA */
  .home-stats__card--mobile { display: none; }
  .home-stats__card--desktop { display: block; }
  .home-stats__layout {
    /* 1.5/1 + 16 birim bosluk sag karti asiri buyutuyordu */
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
    gap: var(--sp-10);
    align-items: center;
  }
  .stats-band__grid { align-content: center; }
  .visit-card { text-align: start; }
  .visit-card__icon { justify-content: start; place-items: start; }
  .visit-card__text { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   7. BOLUM RITMI (sonradan eklendi)
   Bolumler arasi dikey bosluk gozle bakildiginda tutarsizdi: bazi yerlerde
   fazla bos alan, bazi yerlerde sikisiklik vardi. Tek bir olcek uygulanir.
   -------------------------------------------------------------------------- */
.home-about { padding-block: var(--section-y-sm); }
.home-programs { padding-block: var(--section-y-sm); }
@media (min-width: 1024px) {
  .home-about { padding-block: var(--section-y); }
  .home-programs { padding-block: var(--section-y); }
}

/* Bolum basliklarinda ortak nefes */
.home-programs__head { margin-block-end: var(--sp-8); }
@media (min-width: 1024px) { .home-programs__head { margin-block-end: var(--sp-10); } }

/* Program kartlari: duz pastel dikdortgenlerdi - hafif derinlik ve
   uzerine gelince yukselme eklenir, ok dugmesi karta yapisik durmasin. */
.program-card {
  box-shadow: var(--shadow-xs);
  border: var(--bw-hair) solid rgb(255 255 255 / 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .program-card {
    transition: transform var(--dur-base, 220ms) var(--ease-out, ease),
                box-shadow var(--dur-base, 220ms) var(--ease-out, ease);
  }
  .program-card:hover,
  .program-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}
/* Kartin alt kismindaki ok her kartta AYNI hizada dursun */
.program-card__text { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Bugunun yemek menusu (ana sayfa)
   Menu yalnizca /veliler-icin sayfasindaydi; veliler icin en cok bakilan
   bilgi oldugu icin ana sayfaya kucuk bir kart olarak eklendi.
   -------------------------------------------------------------------------- */
.home-menu { padding-block: var(--sp-6); }

.menu-today {
  background: var(--bg-surface);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
@media (min-width: 768px) {
  .menu-today { padding: var(--sp-6) var(--sp-7); }
}

.menu-today__head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
}
.menu-today__ikon {
  display: grid; place-items: center; flex: none;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--r-circle);
  background: var(--soft-green); color: var(--ink-strong);
}
.menu-today__ikon svg { inline-size: 24px; block-size: 24px; }
.menu-today__baslik { margin: 0; font-size: var(--fs-h5); }
.menu-today__tarih { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
/* Bagalanti sona itilir; dar ekranda alta iner */
.menu-today__tumu {
  margin-inline-start: auto;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--ink-pink); text-decoration: none;
}
.menu-today__tumu:hover { text-decoration: underline; }

.menu-today__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3);
}
@media (min-width: 768px) {
  .menu-today__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
}
.menu-today__ogun {
  display: grid; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--bg-page-alt, var(--cream));
  min-inline-size: 0;
}
.menu-today__ogun-ad {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--ink-purple); text-transform: uppercase; letter-spacing: 0.03em;
}
.menu-today__ogun-deger {
  font-size: var(--fs-sm); color: var(--ink-body);
  overflow-wrap: anywhere;   /* uzun yemek adi kutuyu tasirmasin */
}
.menu-today__tatil {
  margin: 0; padding: var(--sp-4);
  border-radius: var(--r-lg); background: var(--soft-yellow);
  font-size: var(--fs-sm); color: var(--ink-body);
}

@media (max-width: 479.98px) {
  .menu-today__tumu { margin-inline-start: 0; flex-basis: 100%; }
}

/* "Bugün Programımızda" karti - menu kartiyla ayni govde, mor vurgu. */
.menu-today--program { border-inline-start-color: var(--purple-400); }
.menu-today--program .menu-today__ikon { color: var(--purple-500); }
.prg-akis { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.prg-akis__satir {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-3);
  align-items: baseline; padding-block: var(--sp-2);
}
.prg-akis__satir + .prg-akis__satir { border-block-start: var(--bw-hair) solid var(--border); }
.prg-akis__saat { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-purple, var(--purple-600)); white-space: nowrap; }
.prg-akis__metin { overflow-wrap: break-word; }
@media (max-width: 480px) { .prg-akis__satir { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* "Devamını gör": ilk 2 satirin disindakiler kapali gelir.
   JS yoksa (html.no-js) hepsi acik, dugme gizli - icerik kaybolmaz. */
.prg-akis--kisa:not(.is-acik) .prg-akis__satir--fazla { display: none; }
html.no-js .prg-akis--kisa .prg-akis__satir--fazla { display: grid; }
html.no-js .prg-devam { display: none; }
.prg-devam {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  inline-size: 100%; min-block-size: var(--tap-min, 44px);
  margin-block-start: var(--sp-2); padding: var(--sp-2);
  background: none; border: 0; border-block-start: var(--bw-hair) solid var(--border);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--ink-pink); cursor: pointer;
}
.prg-devam:hover { text-decoration: underline; }
.prg-devam:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset); border-radius: var(--r-sm);
}
.prg-devam__ok { inline-size: 18px; block-size: 18px; flex: none; transition: transform 200ms ease; }
.prg-devam[aria-expanded="true"] .prg-devam__ok { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .prg-devam__ok { transition: none; } }

/* ---------- Aylik bulten karti (yemek kartinin ustunde) ---------- */
.bulten-kart {
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm); padding: var(--sp-6);
  border-inline-start: 4px solid var(--yellow-500, #FFC93C);
}
.bulten-kart__donem {
  margin: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); color: var(--ink-muted);
}
.bulten-kart__baslik { font-size: var(--fs-h5); margin: 0 0 var(--sp-3); }
.bulten-kart__govde > :first-child { margin-block-start: 0; }
.bulten-kart__govde > :last-child { margin-block-end: 0; }
.bulten-kart__govde p { margin-block: 0 var(--sp-3); line-height: 1.65; }
.bulten-kart__govde ul { margin-block: 0 var(--sp-3); padding-inline-start: var(--sp-5); }
.bulten-kart__govde li { margin-block-end: var(--sp-1); }

/* ---------- Veli yorumlari: sagdan sola akan serit ---------- */
.home-yorumlar { overflow: hidden; }
.yorum-serit {
  /* Kenarlarda yumusak solma - kartlar aniden kesilmesin. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.yorum-serit__ray {
  list-style: none; margin: 0; padding: var(--sp-2) 0;
  display: flex; gap: var(--sp-4); width: max-content;
  animation: yorum-ak 48s linear infinite;
}
/* Liste iki kez basildigi icin -%50 tam bir tur eder; dikis yeri gorunmez. */
@keyframes yorum-ak {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Okumak isteyen dursun. */
.yorum-serit:hover .yorum-serit__ray,
.yorum-serit:focus-within .yorum-serit__ray { animation-play-state: paused; }

.yorum-kart {
  flex: 0 0 min(320px, 78vw);
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.yorum-kart__yildiz { margin: 0; color: var(--yellow-500, #FFC93C); font-size: var(--fs-lead); letter-spacing: 2px; line-height: 1; }
.yorum-kart__metin { margin: 0; flex: 1; line-height: 1.6; font-size: var(--fs-sm); overflow-wrap: break-word; }
.yorum-kart__kim { margin: 0; display: grid; gap: 1px; }
.yorum-kart__ad { font-weight: var(--fw-bold); color: var(--ink-pink); }
.yorum-kart__alt { font-size: var(--fs-xs); color: var(--ink-muted); letter-spacing: 0.02em; }

/* Hareket azaltma acikken AKIS YOK: serit sabit bir izgaraya doner. */
@media (prefers-reduced-motion: reduce) {
  .yorum-serit { -webkit-mask-image: none; mask-image: none; }
  .yorum-serit__ray {
    animation: none; width: auto; flex-wrap: wrap; justify-content: center;
  }
  /* Ikinci (gizli) kopya tekrar okunmasin. */
  .yorum-serit__ray .yorum-kart[aria-hidden="true"] { display: none; }
}

/* Kayan seritte AZ kart varsa akmak yerine ortala: 1-2 kartla surekli donen
   bir serit bozuk gorunuyordu (kullanicinin bildirdigi "boş görünüyor"). */
.yorum-serit[data-az] { -webkit-mask-image: none; mask-image: none; }
.yorum-serit[data-az] .yorum-serit__ray {
  animation: none; width: auto; justify-content: center; flex-wrap: wrap;
}
.yorum-serit[data-az] .yorum-kart[aria-hidden="true"] { display: none; }

/* Yorum kartindaki aile fotografi - istege bagli, yoksa kart yine duzgun. */
.yorum-kart__foto {
  inline-size: 64px; block-size: 64px; border-radius: 50%;
  object-fit: cover; flex: none; align-self: flex-start;
  border: 3px solid var(--white); box-shadow: var(--shadow-sm);
}
/* Yonetim ekraninda mevcut fotograf onizlemesi */
.yrm-foto { display: flex; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-2); }
.yrm-foto img { inline-size: 56px; block-size: 56px; border-radius: 50%; object-fit: cover; }

/* ---------- Hero slayti (galeriden yatay fotograflar, 3 sn) ----------
   Ilk kare <picture> icindeki site gorseli; galeri kareleri onun USTUNE mutlak
   konumlu eklenir. Yalniz iki katman one cikar: .is-aktif ustte, .is-onceki
   gecis bitene kadar altinda (z-index sayaci buyuyup dugmeyi ortmesin). */
.hero-slayt__kare {
  position: absolute; inset: 0; z-index: 0;
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  opacity: 0;
}
.hero-slayt__kare.is-onceki { z-index: 1; opacity: 1; }
.hero-slayt__kare.is-aktif { z-index: 2; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-slayt__kare { transition: opacity 700ms var(--ease-out, ease); }
}
.hero-slayt__dugme {
  position: absolute; z-index: 3;
  inset-block-end: var(--sp-3); inset-inline-start: var(--sp-3);
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: rgb(23 31 56 / 0.55); color: #fff; cursor: pointer;
}
.hero-slayt__dugme[hidden] { display: none; }
.hero-slayt__dugme:hover { background: rgb(23 31 56 / 0.75); }
.hero-slayt__dugme:focus-visible {
  outline: var(--focus-ring-width) solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-ring);
}
/* Sitenin genel "svg { display: block }" kurali hidden ozniteligini eziyor;
   iki ikon (durdur + oynat) birden gorunuyordu (canli ekran goruntusunde goruldu). */
.hero-slayt__dugme svg[hidden] { display: none; }