/* =========================================================================
   Luvi Psikoloji — tema
   Tasarım taslaklarından çıkarıldı: lacivert başlık + turuncu gradyan vurgu,
   sıcak krem zeminler, yumuşak beyaz kartlar, pastel ikon kutuları,
   el yazısı süs notları, yeşil WhatsApp şeridi.

   HEX değerler YALNIZ bu :root bloğunda. Başka yerde çıplak renk yazılmaz.
   ========================================================================= */

:root {
  /* Zeminler — logonun beyaz/krem dünyası */
  --krem:        #FFFAF3;
  --krem-2:      #FDF3E6;
  --krem-3:      #FBE9D5;
  --beyaz:       #FFFFFF;

  /* Metin — taslakta başlıklar lacivert, gövde ılık gri */
  --lacivert:    #16375C;
  --lacivert-2:  #1E4B78;
  --gri:         #64748B;
  --gri-2:       #94A3B8;

  /* Marka turuncusu (logodan) */
  --turuncu:     #F97316;
  --turuncu-koy: #EA580C;
  --turuncu-ack: #FB923C;
  --amber:       #FBBF24;
  --amber-ack:   #FDE68A;

  /* Yardımcı renkler */
  --yesil:       #22C55E;
  --yesil-koy:   #15803D;
  --yesil-zem:   #ECFDF3;
  --mavi-zem:    #EFF6FF;
  --pembe-zem:   #FEF2F2;
  --seftali-zem: #FFF1E4;
  --sari-zem:    #FEF6E0;

  --kenar:       #F3E5D2;
  --kenar-2:     #E8EEF5;
  --hata:        #B42318;

  --golge-s:     0 2px 10px rgba(22, 55, 92, .05);
  --golge:       0 10px 30px rgba(22, 55, 92, .07);
  --golge-b:     0 22px 48px rgba(22, 55, 92, .11);
  --golge-tur:   0 10px 24px rgba(249, 115, 22, .28);

  --r:           18px;
  --r-b:         26px;
  --r-k:         12px;

  --baslik-yazi: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --govde-yazi:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --el-yazisi:   "Caveat", "Segoe Script", cursive;

  --en:          1200px;
  --bosluk:      clamp(18px, 4vw, 32px);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--krem);
  color: var(--gri);
  font-family: var(--govde-yazi);
  font-size: clamp(.97rem, .94rem + .16vw, 1.03rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--baslik-yazi);
  color: var(--lacivert);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--turuncu-koy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }

:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 3px; border-radius: 6px; }

/* --- iskelet ------------------------------------------------------------ */
.kabuk { width: 100%; max-width: var(--en); margin-inline: auto; padding-inline: var(--bosluk); }
.bolum { padding-block: clamp(48px, 7vw, 88px); position: relative; }
.bolum--krem { background: linear-gradient(180deg, var(--krem-2), var(--krem)); }
.bolum--beyaz { background: var(--beyaz); }
.bolum--dar { padding-block: clamp(36px, 5vw, 60px); }

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lacivert); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-k) 0;
}
.atla:focus { left: 0; }

/* --- başlık blokları ----------------------------------------------------- */
.uste { /* eyebrow */
  display: block; font-size: .8rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--turuncu); margin-bottom: 12px;
}
.bolum-basi { max-width: 60ch; margin-bottom: clamp(26px, 3.5vw, 44px); }
.bolum-basi--orta { margin-inline: auto; text-align: center; }
.bolum-basi p { color: var(--gri); }
.bolum-basi h2 { margin-bottom: .35em; }

.cizgi-alt { position: relative; padding-bottom: 14px; }
.cizgi-alt::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 4px;
  border-radius: 4px; background: linear-gradient(90deg, var(--turuncu), var(--amber));
}
.bolum-basi--orta .cizgi-alt::after { left: 50%; transform: translateX(-50%); }

.vurgu { color: var(--turuncu); }
.el-yazisi {
  font-family: var(--el-yazisi); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.7rem);
  line-height: 1.35; color: var(--lacivert-2); opacity: .85;
}
.el-yazisi--tur { color: var(--turuncu-koy); }

/* --- düğmeler ------------------------------------------------------------ */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.dugme:hover { text-decoration: none; }
.dugme--birincil {
  background: linear-gradient(135deg, var(--turuncu), var(--turuncu-ack));
  color: #fff; box-shadow: var(--golge-tur);
}
.dugme--birincil:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(249, 115, 22, .34); }
.dugme--beyaz { background: var(--beyaz); color: var(--lacivert); box-shadow: var(--golge-s); }
.dugme--beyaz:hover { transform: translateY(-2px); box-shadow: var(--golge); }
.dugme--cizgi { background: var(--beyaz); border-color: rgba(249, 115, 22, .45); color: var(--turuncu-koy); }
.dugme--cizgi:hover { border-color: var(--turuncu); background: var(--seftali-zem); }
.dugme--yesil { background: var(--yesil); color: #fff; box-shadow: 0 10px 22px rgba(34, 197, 94, .3); }
.dugme--yesil:hover { transform: translateY(-2px); background: var(--yesil-koy); }
.dugme--kucuk { padding: 9px 18px; font-size: .87rem; }
.dugme--tam { width: 100%; }
.dugme--buyuk { padding: 16px 32px; font-size: 1rem; }

.yuvarlak-ok {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--seftali-zem); color: var(--turuncu);
  transition: background-color .15s ease, transform .15s ease;
}

/* --- üst bar ------------------------------------------------------------- */
.ust {
  position: sticky; top: 0; z-index: 60; background: var(--beyaz);
  box-shadow: 0 1px 0 rgba(22, 55, 92, .06), 0 6px 24px rgba(22, 55, 92, .04);
}
.ust__ic { display: flex; align-items: center; gap: 18px; min-height: 78px; }
.marka { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.marka:hover { text-decoration: none; }
.marka img { width: 48px; height: 48px; }
.marka__ad { display: grid; line-height: 1; gap: 4px; }
.marka__ad strong {
  font-family: var(--baslik-yazi); font-size: 1.28rem; font-weight: 700;
  letter-spacing: .18em; color: var(--turuncu);
}
.marka__ad span { font-size: .66rem; letter-spacing: .32em; color: var(--turuncu-ack); font-weight: 700; }

.gezinti { display: flex; align-items: center; gap: 2px; }
.gezinti__kalem { position: relative; }
.gezinti__bag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem;
  color: var(--lacivert); background: none; border: 0; font-family: inherit; cursor: pointer;
}
.gezinti__bag:hover { color: var(--turuncu-koy); text-decoration: none; }
.gezinti__bag[aria-current="page"], .gezinti__kalem--etkin > .gezinti__bag {
  color: var(--turuncu); position: relative;
}
.gezinti__kalem--etkin > .gezinti__bag::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--turuncu);
}
.gezinti__bag svg { transition: transform .15s ease; }
.gezinti__bag[aria-expanded="true"] svg { transform: rotate(180deg); }

.acilir {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--beyaz); border: 1px solid var(--kenar-2); border-radius: var(--r);
  box-shadow: var(--golge-b); padding: 18px; z-index: 70;
}
.acilir[hidden] { display: none; }
.acilir--sade { min-width: 240px; display: grid; gap: 2px; }
/* Eski mega kuralı kaldırıldı; yeni mega ızgarası aşağıda (.mega). */
.acilir__grup h4 {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--turuncu); margin-bottom: 10px; display: flex; align-items: center; gap: 7px;
}
.acilir__grup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.acilir a {
  display: block; padding: 8px 10px; border-radius: 10px;
  color: var(--lacivert); font-size: .92rem; font-weight: 600; line-height: 1.35;
}
.acilir a:hover { background: var(--seftali-zem); color: var(--turuncu-koy); text-decoration: none; }
.acilir a small { display: block; font-weight: 500; color: var(--gri-2); font-size: .8rem; }

.ust__eylem { display: flex; align-items: center; gap: 10px; }
.wa-yuvarlak {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--yesil); color: #fff; box-shadow: 0 8px 18px rgba(34, 197, 94, .32);
}
.wa-yuvarlak:hover { background: var(--yesil-koy); text-decoration: none; transform: translateY(-2px); }

.menu-dugme {
  display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--kenar-2);
  background: var(--beyaz); color: var(--lacivert); cursor: pointer; place-items: center;
}

/* --- kahraman (hero) ----------------------------------------------------- */
.kahraman {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--krem-2) 0%, var(--krem) 45%, var(--krem-3) 100%);
  padding-block: clamp(36px, 5vw, 64px) clamp(60px, 8vw, 96px);
}
.kahraman__ic { position: relative; display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 940px) { .kahraman__ic { grid-template-columns: 1.02fr .98fr; } }
.kahraman h1 { margin-bottom: .35em; }
.kahraman h1 .vurgu { position: relative; white-space: nowrap; }
.kahraman h1 .vurgu::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: .1em;
  border-radius: 99px; background: linear-gradient(90deg, var(--turuncu), var(--amber));
  opacity: .55;
}
.kahraman__giris { font-size: 1.03rem; max-width: 54ch; }
.kahraman__eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.kahraman__rozet { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; }
.kahraman__rozet span { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--lacivert); }
.kahraman__rozet svg { color: var(--turuncu); }

/* Fotoğraf yerine geçen sıcak görsel alan (gerçek foto panelden yüklenince
   aynı çerçeveye oturur) */
.gorsel-cerceve {
  position: relative; border-radius: var(--r-b); overflow: hidden;
  background: linear-gradient(140deg, var(--seftali-zem), var(--sari-zem) 55%, var(--yesil-zem));
  box-shadow: var(--golge-b); aspect-ratio: 4 / 3; display: grid; place-items: center;
}
.gorsel-cerceve img { width: 100%; height: 100%; object-fit: cover; }
.gorsel-cerceve--yuvarlak { aspect-ratio: 1; border-radius: 50%; }
.gorsel-cerceve__ic { display: grid; justify-items: center; gap: 14px; padding: 26px; text-align: center; }
.gorsel-cerceve__ic svg { color: var(--turuncu); opacity: .75; }
.gorsel-cerceve__ic span { font-family: var(--el-yazisi); font-size: 1.4rem; color: var(--turuncu-koy); }

.not-kagit {
  position: absolute; z-index: 2; background: rgba(255, 255, 255, .86);
  border-radius: 16px; padding: 10px 16px; box-shadow: var(--golge);
  font-family: var(--el-yazisi); font-size: 1.15rem; color: var(--lacivert-2); line-height: 1.25;
}
.not-kagit--sag-ust { top: 16px; right: 16px; }
.not-kagit--sol-alt { left: 16px; bottom: 16px; }

/* Botanik süsler */
.yaprak { position: absolute; color: var(--yesil); opacity: .16; pointer-events: none; z-index: 0; }
.yaprak--sol-ust { top: -20px; left: -30px; transform: rotate(-25deg); }
.yaprak--sag-alt { right: -30px; bottom: -20px; transform: rotate(155deg); }

/* --- güven şeridi (hero altı) -------------------------------------------- */
.guven {
  position: relative; z-index: 3; margin-top: clamp(-48px, -4vw, -32px);
  background: var(--beyaz); border-radius: var(--r-b); box-shadow: var(--golge);
  padding: clamp(18px, 2.4vw, 26px);
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.guven__kalem { display: flex; align-items: center; gap: 12px; }
.guven__kalem strong { display: block; color: var(--lacivert); font-size: .96rem; font-family: var(--baslik-yazi); }
/* Yalnız metin span'i: bu kural eskiden tüm span'leri kapsıyordu ve
   .ikon-kutu'nun display:grid ayarını ezip ikonu köşeye itiyordu. */
.guven__kalem span span { font-size: .84rem; color: var(--gri-2); line-height: 1.4; display: block; }

/* --- ikon kutuları -------------------------------------------------------- */
.ikon-kutu {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--seftali-zem); color: var(--turuncu); flex: none;
}
.ikon-kutu--yesil { background: var(--yesil-zem); color: var(--yesil-koy); }
.ikon-kutu--sari  { background: var(--sari-zem);  color: var(--amber); }
.ikon-kutu--mavi  { background: var(--mavi-zem);  color: var(--lacivert-2); }
.ikon-kutu--pembe { background: var(--pembe-zem); color: #E11D48; }
.ikon-kutu--kucuk { width: 42px; height: 42px; border-radius: 13px; }
.ikon-kutu--buyuk { width: 62px; height: 62px; border-radius: 20px; }

/* --- kartlar --------------------------------------------------------------- */
.izgara { display: grid; gap: clamp(14px, 2vw, 22px); }
.izgara--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.izgara--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.izgara--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.kart {
  background: var(--beyaz); border: 1px solid var(--kenar); border-radius: var(--r);
  padding: clamp(18px, 2.2vw, 26px); box-shadow: var(--golge-s);
  display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kart--bag:hover { transform: translateY(-3px); box-shadow: var(--golge); border-color: rgba(249, 115, 22, .35); text-decoration: none; }
.kart--bag:hover .yuvarlak-ok { background: var(--turuncu); color: #fff; }
.kart h3 { margin: 0; }
.kart h3 small { display: block; font-weight: 500; font-size: .82rem; color: var(--gri-2); margin-top: 3px; }
.kart p { color: var(--gri); font-size: .94rem; margin: 0; }
.kart__alt { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kart__bag { color: var(--turuncu-koy); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }

.hizmet-kart { padding-block: clamp(20px, 2.4vw, 28px); }
.hizmet-kart .ikon-kutu { margin-bottom: 4px; }

/* konu/özellik kartı — küçük, iki satırlı */
.mini-kart {
  display: flex; align-items: center; gap: 14px; background: var(--beyaz);
  border: 1px solid var(--kenar); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--golge-s);
}
.mini-kart strong { display: block; color: var(--lacivert); font-family: var(--baslik-yazi); font-size: .95rem; }
.mini-kart span { font-size: .85rem; color: var(--gri-2); }
.mini-kart--bag:hover { border-color: rgba(249, 115, 22, .4); text-decoration: none; }
.mini-kart--bag:hover .yuvarlak-ok { background: var(--turuncu); color: #fff; }

/* --- adımlar ------------------------------------------------------------- */
.adimlar { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.adim {
  background: var(--beyaz); border: 1px solid var(--kenar); border-radius: var(--r);
  padding: 26px 20px 20px; box-shadow: var(--golge-s); position: relative; text-align: left;
}
.adim__no {
  position: absolute; top: -16px; left: 20px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--baslik-yazi); font-weight: 700; font-size: .95rem; color: #fff;
  background: linear-gradient(135deg, var(--turuncu), var(--turuncu-ack));
  box-shadow: var(--golge-tur);
}
.adim .ikon-kutu { margin-bottom: 12px; }
.adim h3 { font-size: 1rem; margin-bottom: 6px; }
.adim p { font-size: .88rem; color: var(--gri); margin: 0; }

/* --- kişi kartı ----------------------------------------------------------- */
.kisi-kart { padding: 0; overflow: hidden; }
.kisi-kart__gorsel { aspect-ratio: 1 / 1; background: linear-gradient(140deg, var(--seftali-zem), var(--sari-zem)); display: grid; place-items: center; }
.kisi-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kisi-kart__bas {
  font-family: var(--baslik-yazi); font-size: 2rem; font-weight: 700; color: var(--turuncu);
}
.kisi-kart__ic { padding: 18px 20px 22px; display: grid; gap: 8px; }
.kisi-kart h3 { font-size: 1.02rem; margin: 0; }
.kisi-kart__unvan { color: var(--turuncu); font-weight: 700; font-size: .87rem; }
.kisi-kart p { font-size: .88rem; }
.rozetler { display: flex; flex-wrap: wrap; gap: 6px; }
.rozet {
  background: var(--krem-2); color: var(--gri); border-radius: 999px;
  padding: 4px 11px; font-size: .76rem; font-weight: 600;
}
.rozet--tur { background: var(--seftali-zem); color: var(--turuncu-koy); }
.rozet--yesil { background: var(--yesil-zem); color: var(--yesil-koy); }

/* --- yazı kartı ----------------------------------------------------------- */
.yazi-kart { padding: 0; overflow: hidden; }
.yazi-kart__gorsel { aspect-ratio: 16 / 10; background: linear-gradient(140deg, var(--sari-zem), var(--yesil-zem)); display: grid; place-items: center; }
.yazi-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.yazi-kart__ic { padding: 16px 20px 20px; display: grid; gap: 9px; }
.yazi-kart h3 { font-size: 1.05rem; margin: 0; }
.yazi-kart p { font-size: .89rem; }
.tarih { display: inline-flex; align-items: center; gap: 7px; font-size: .81rem; color: var(--gri-2); font-weight: 600; }

.one-cikan {
  display: grid; gap: 0; background: var(--beyaz); border: 1px solid var(--kenar);
  border-radius: var(--r-b); overflow: hidden; box-shadow: var(--golge);
}
@media (min-width: 820px) { .one-cikan { grid-template-columns: 1.05fr .95fr; } }
.one-cikan__ic { padding: clamp(22px, 3vw, 34px); display: grid; gap: 12px; align-content: center; }
.one-cikan__gorsel { min-height: 240px; background: linear-gradient(140deg, var(--seftali-zem), var(--sari-zem)); display: grid; place-items: center; }
.one-cikan__gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* --- yan sütun ------------------------------------------------------------ */
.iki-sutun { display: grid; gap: clamp(20px, 3vw, 34px); align-items: start; }
@media (min-width: 960px) { .iki-sutun { grid-template-columns: minmax(0, 1fr) 340px; } }
.yan-kart {
  background: var(--beyaz); border: 1px solid var(--kenar); border-radius: var(--r);
  padding: 22px; box-shadow: var(--golge-s); display: grid; gap: 14px;
}
.yan-kart h3 { font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.yan-kart--sicak { background: linear-gradient(160deg, var(--seftali-zem), var(--krem)); border-color: rgba(249, 115, 22, .22); }
.yan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.yan-liste a { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-k); }
.yan-liste a:hover { background: var(--krem-2); text-decoration: none; }
.yan-liste__gorsel { width: 58px; height: 46px; border-radius: 10px; flex: none; background: linear-gradient(140deg, var(--sari-zem), var(--yesil-zem)); overflow: hidden; }
.yan-liste__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.yan-liste strong { display: block; color: var(--lacivert); font-size: .89rem; font-weight: 600; line-height: 1.35; font-family: var(--baslik-yazi); }

/* Hızlı bilgiler (hizmet detay) */
.bilgi-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bilgi-liste li { display: flex; gap: 12px; align-items: flex-start; }
.bilgi-liste strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gri-2); }
.bilgi-liste span { color: var(--lacivert); font-weight: 600; font-size: .94rem; }

/* --- alıntı / not kutuları ------------------------------------------------ */
.alinti {
  background: var(--seftali-zem); border-radius: var(--r); padding: 20px 24px;
  border-left: 4px solid var(--turuncu); color: var(--lacivert-2);
  font-family: var(--el-yazisi); font-size: 1.35rem; line-height: 1.4;
}
.alinti cite { display: block; font-family: var(--govde-yazi); font-size: .82rem; font-style: normal; color: var(--gri-2); margin-top: 8px; }

.not-kutu {
  background: linear-gradient(160deg, var(--sari-zem), var(--krem)); border: 1px solid var(--kenar);
  border-radius: var(--r); padding: 26px; display: grid; gap: 10px; place-items: center; text-align: center;
}

/* --- liste (onaylı) ------------------------------------------------------- */
.onay-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.onay-liste li { display: flex; gap: 11px; align-items: flex-start; font-size: .94rem; }
.onay-liste svg { color: var(--yesil); flex: none; margin-top: 3px; }

/* --- SSS ------------------------------------------------------------------ */
.sss { display: grid; gap: 10px; }
.sss details { background: var(--beyaz); border: 1px solid var(--kenar); border-radius: var(--r); padding: 2px 20px; }
.sss details[open] { border-color: rgba(249, 115, 22, .35); box-shadow: var(--golge-s); }
.sss summary {
  cursor: pointer; padding: 16px 0; list-style: none; display: flex; gap: 14px; align-items: center;
  color: var(--lacivert); font-weight: 700; font-family: var(--baslik-yazi); font-size: .98rem;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary .yuvarlak-ok { margin-left: auto; }
.sss details[open] summary .yuvarlak-ok { background: var(--turuncu); color: #fff; }
.sss__cevap { padding: 0 0 18px; color: var(--gri); font-size: .94rem; }

/* --- filtre çipleri -------------------------------------------------------- */
.cipler { display: flex; flex-wrap: wrap; gap: 10px; }
.cip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  background: var(--beyaz); border: 1px solid var(--kenar); color: var(--lacivert);
  font-weight: 600; font-size: .88rem; cursor: pointer; font-family: inherit;
}
.cip:hover { border-color: var(--turuncu-ack); text-decoration: none; }
.cip[aria-pressed="true"], .cip--etkin {
  background: linear-gradient(135deg, var(--turuncu), var(--turuncu-ack)); color: #fff; border-color: transparent;
  box-shadow: var(--golge-tur);
}
.cip svg { color: currentColor; }

/* --- WhatsApp şeridi ------------------------------------------------------- */
.wa-serit {
  background: linear-gradient(120deg, var(--yesil-zem), #F3FBF6);
  border: 1px solid #D6F2E1; border-radius: var(--r-b);
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 32px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
.wa-serit__ic { display: flex; align-items: center; gap: 16px; margin-right: auto; }
.wa-serit strong { display: block; color: var(--lacivert); font-family: var(--baslik-yazi); }
.wa-serit span { color: var(--gri); font-size: .93rem; }
.wa-serit__ikon { width: 52px; height: 52px; border-radius: 16px; background: var(--yesil); color: #fff; display: grid; place-items: center; flex: none; }

/* --- CTA şeridi ------------------------------------------------------------ */
.cta-serit {
  position: relative; overflow: hidden; border-radius: var(--r-b);
  background: linear-gradient(120deg, var(--krem-3), var(--seftali-zem) 60%, var(--sari-zem));
  padding: clamp(26px, 4vw, 44px);
  display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center;
}
.cta-serit__ic { margin-right: auto; max-width: 56ch; }
.cta-serit h2 { margin-bottom: .3em; }
.cta-serit p { margin: 0; }

/* --- sayfa başlığı (iç sayfalar) ------------------------------------------ */
.sayfa-basi {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--krem-2), var(--krem) 55%, var(--krem-3));
  padding-block: clamp(30px, 4vw, 54px) clamp(34px, 5vw, 64px);
}
.sayfa-basi__ic { position: relative; display: grid; gap: 28px; align-items: center; }
@media (min-width: 940px) { .sayfa-basi__ic--gorselli { grid-template-columns: 1.05fr .95fr; } }
.iz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .84rem; color: var(--gri-2); margin-bottom: 14px; }
.iz a { color: var(--gri-2); font-weight: 600; }
.iz a:hover { color: var(--turuncu-koy); }
.iz span { color: var(--gri-2); }

/* --- makale gövdesi -------------------------------------------------------- */
.makale { max-width: 74ch; color: var(--gri); }
.makale h2 { margin-top: 1.5em; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); }
.makale h3 { margin-top: 1.3em; }
.makale ul, .makale ol { padding-left: 1.25em; }
.makale li { margin-bottom: .45em; }
.makale blockquote {
  margin: 1.5em 0; padding: 16px 22px; border-left: 4px solid var(--turuncu);
  background: var(--seftali-zem); border-radius: 0 var(--r) var(--r) 0; color: var(--lacivert-2);
}
.makale img { border-radius: var(--r); margin-block: 1.4em; }
.makale a { text-decoration: underline; text-underline-offset: 3px; }

/* --- form ------------------------------------------------------------------ */
.form { display: grid; gap: 16px; }
.form__satir { display: grid; gap: 16px; }
@media (min-width: 700px) { .form__satir--2 { grid-template-columns: 1fr 1fr; } }
.alan { display: grid; gap: 7px; }
.alan label { font-weight: 700; font-size: .9rem; color: var(--lacivert); }
.alan label .istege { font-weight: 500; color: var(--gri-2); }
.alan input, .alan select, .alan textarea {
  font: inherit; color: var(--lacivert); width: 100%;
  padding: 13px 16px; border-radius: var(--r-k);
  border: 1px solid var(--kenar); background: var(--krem);
}
.alan input::placeholder, .alan textarea::placeholder { color: var(--gri-2); }
.alan textarea { min-height: 150px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none; border-color: var(--turuncu-ack); background: var(--beyaz);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .16);
}
.alan--hata input, .alan--hata select, .alan--hata textarea { border-color: var(--hata); }
.alan__hata { color: var(--hata); font-size: .86rem; font-weight: 600; }
.onam { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.onam input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--turuncu); }
.bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bildirim { border-radius: var(--r-k); padding: 15px 18px; font-weight: 600; border: 1px solid; font-size: .93rem; }
.bildirim--ok { background: var(--yesil-zem); border-color: #ABEFC6; color: var(--yesil-koy); }
.bildirim--hata { background: #FEF3F2; border-color: #FECDCA; color: var(--hata); }

.iletisim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.iletisim-liste li { display: flex; gap: 14px; align-items: flex-start; }
.iletisim-liste strong { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gri-2); }
.iletisim-liste a, .iletisim-liste span { color: var(--lacivert); font-weight: 600; font-size: .96rem; }
.iletisim-liste a:hover { color: var(--turuncu-koy); }

/* --- boş durum -------------------------------------------------------------- */
.bos {
  border: 1px dashed var(--kenar); border-radius: var(--r); background: var(--beyaz);
  padding: clamp(26px, 4vw, 44px); text-align: center; display: grid; gap: 12px; justify-items: center;
}

/* --- alt bilgi -------------------------------------------------------------- */
.alt { background: var(--krem-2); border-top: 1px solid var(--kenar); margin-top: clamp(40px, 6vw, 72px); }
.alt__ic { display: grid; gap: 32px; padding-block: clamp(36px, 5vw, 56px); }
@media (min-width: 900px) { .alt__ic { grid-template-columns: 1.3fr .8fr 1fr 1.1fr; } }
.alt h4 { font-size: .95rem; margin-bottom: 14px; color: var(--lacivert); }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.alt a { color: var(--gri); font-size: .92rem; }
.alt a:hover { color: var(--turuncu-koy); }
.alt__marka { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.alt__marka img { width: 46px; height: 46px; }
.alt__slogan { font-family: var(--el-yazisi); font-size: 1.3rem; color: var(--turuncu-koy); line-height: 1.2; margin-bottom: 10px; }
.alt__metin { font-size: .89rem; color: var(--gri); max-width: 34ch; }
.sosyal { display: flex; gap: 10px; margin-top: 16px; }
.sosyal a {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--beyaz); border: 1px solid var(--kenar); color: var(--turuncu);
}
.sosyal a:hover { background: var(--turuncu); color: #fff; border-color: transparent; }
.alt__harita {
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--kenar); background: var(--beyaz);
  padding: 14px; display: grid; gap: 8px; margin-top: 14px;
}
.alt__harita span { font-size: .84rem; color: var(--gri-2); }
.alt__bar {
  border-top: 1px solid var(--kenar); padding-block: 16px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--gri-2);
}
.alt__bar ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* --- mobil ------------------------------------------------------------------ */
@media (max-width: 1040px) {
  .menu-dugme { display: grid; }
  .ust__eylem .dugme--birincil span { display: none; }
  .gezinti {
    position: fixed; inset: 78px 0 auto 0; z-index: 65;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--beyaz); padding: 14px var(--bosluk) 24px;
    box-shadow: var(--golge-b); max-height: calc(100dvh - 78px); overflow-y: auto;
  }
  .gezinti[hidden] { display: none; }
  .gezinti__bag { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 1rem; }
  .acilir {
    position: static; transform: none; width: 100%; box-shadow: none; border: 0;
    border-left: 2px solid var(--kenar); border-radius: 0; padding: 4px 0 10px 14px; margin-left: 12px;
  }
  .mega, .mega--kurumsal { grid-template-columns: 1fr; }
}
@media (min-width: 1041px) {
  .gezinti[hidden] { display: flex; }
}
@media (max-width: 620px) {
  .ust__ic { min-height: 68px; gap: 10px; }
  .gezinti { inset-block-start: 68px; }
  .marka img { width: 40px; height: 40px; }
  .marka__ad strong { font-size: 1.05rem; letter-spacing: .14em; }
  .marka__ad span { font-size: .58rem; letter-spacing: .26em; }
  .dugme { padding: 12px 20px; }
}

/* Grup başlığı altındaki hizmet ızgarası — CSP satır içi stile izin vermiyor,
   bu yüzden aralık sınıfla veriliyor. */
.izgara--altbosluk { margin-bottom: 34px; }

/* =========================================================================
   MEGA MENÜ — sağ tarafta görsel paneli
   Menü kalemi üzerine gelince panel o kaleme ait görseli ve özeti gösterir.
   ========================================================================= */
.acilir--mega { width: min(1060px, 94vw); padding: 0; display: block; }
.mega { display: grid; gap: 0; overflow: hidden; border-radius: var(--r); }
@media (min-width: 1041px) {
  .mega { grid-template-columns: minmax(0, 1fr) 300px; }
  .mega--kurumsal { grid-template-columns: 240px minmax(0, 1fr) 290px; }
}
.mega__gruplar {
  display: grid; gap: 18px; padding: 22px 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr));
  align-content: start;
}
.mega__tanitim {
  padding: 24px; background: linear-gradient(160deg, var(--seftali-zem), var(--krem));
  display: grid; gap: 10px; align-content: start;
}
.mega__tanitim h4 { font-size: 1.15rem; margin: 0; }
.mega__tanitim p { font-size: .87rem; color: var(--gri); margin: 0; line-height: 1.55; }

.mega__gorsel {
  position: relative; overflow: hidden; min-height: 260px;
  background: linear-gradient(150deg, var(--seftali-zem), var(--sari-zem));
  display: grid; align-items: end;
}
.mega__gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .32s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.mega__gorsel img.solmus { opacity: 0; }
.mega__gorsel-ic {
  position: relative; z-index: 3; padding: 18px;
  background: linear-gradient(to top, rgba(20, 44, 72, .88), rgba(20, 44, 72, .1) 78%, transparent);
  color: #fff; display: grid; gap: 5px;
}
.mega__gorsel-ic strong { font-family: var(--baslik-yazi); font-size: 1.02rem; }
.mega__gorsel-ic span { font-size: .84rem; opacity: .92; line-height: 1.45; }

.mega__bag { display: block; padding: 9px 10px; border-radius: 10px; }
.mega__bag strong { display: block; font-size: .92rem; font-weight: 600; color: var(--lacivert); line-height: 1.32; }
.mega__bag small { display: block; font-size: .78rem; color: var(--gri-2); font-weight: 500; margin-top: 2px; }
.mega__bag:hover, .mega__bag:focus-visible { background: var(--seftali-zem); text-decoration: none; }
.mega__bag:hover strong { color: var(--turuncu-koy); }

.mega__alt {
  grid-column: 1 / -1; border-top: 1px solid var(--kenar); background: var(--krem);
  padding: 12px 24px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-size: .85rem; color: var(--gri);
}
.mega__alt a { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================================
   ÇOCUK TEMASI — balonlar
   Çocukla ilgili menü grubunda ve çocuk sayfalarının kahraman alanında
   yavaşça yükselen balonlar. Hareket azaltma tercihinde tamamen kapanır.
   ========================================================================= */
.balonlar { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.balon {
  position: absolute; bottom: -80px; width: 24px; height: 30px;
  border-radius: 50% 50% 47% 47%; opacity: 0; animation: balon-ucus 11s linear infinite;
}
.balon::after {
  content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 20px;
  background: rgba(22, 55, 92, .22);
}
.balon:nth-child(1) { left: 8%;  background: #FDBA74; animation-duration: 10s; }
.balon:nth-child(2) { left: 25%; background: #FCD34D; animation-duration: 13s; animation-delay: 1.6s; }
.balon:nth-child(3) { left: 43%; background: #86EFAC; animation-duration: 11.5s; animation-delay: .7s; }
.balon:nth-child(4) { left: 62%; background: #93C5FD; animation-duration: 14s; animation-delay: 2.5s; }
.balon:nth-child(5) { left: 79%; background: #FDA4AF; animation-duration: 12s; animation-delay: .3s; }
.balon:nth-child(6) { left: 92%; background: #FB923C; animation-duration: 15s; animation-delay: 3.2s; }
@keyframes balon-ucus {
  0%   { transform: translateY(0) rotate(-5deg); opacity: 0; }
  12%  { opacity: .85; }
  50%  { transform: translateY(-52%) rotate(5deg); }
  86%  { opacity: .8; }
  100% { transform: translateY(-118%) rotate(-4deg); opacity: 0; }
}
.balonlar[hidden] { display: none; }

/* Çocuk temalı kahraman alanı: daha neşeli zemin */
.kahraman--cocuk, .sayfa-basi--cocuk {
  background: linear-gradient(135deg, #FFF3E0 0%, var(--krem) 45%, #EAF7EE 100%);
}

/* =========================================================================
   HAREKET — kaydırmayla beliren bölümler, üst barın küçülmesi
   ========================================================================= */
/* Gizleme sınıfını JS ekler; JavaScript kapalıysa içerik olduğu gibi görünür
   ve ekranın üstündeki öğeler hiç gizlenmez (yanıp sönme olmaz). */
.anim-bekliyor { opacity: 0; transform: translateY(20px); }
[data-anim].gorundu {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-anim].gorundu:nth-child(2) { transition-delay: .07s; }
[data-anim].gorundu:nth-child(3) { transition-delay: .14s; }
[data-anim].gorundu:nth-child(4) { transition-delay: .21s; }
[data-anim].gorundu:nth-child(5) { transition-delay: .28s; }
[data-anim].gorundu:nth-child(6) { transition-delay: .35s; }

.ust { transition: box-shadow .2s ease; }
.ust--kucuk { box-shadow: 0 2px 24px rgba(22, 55, 92, .13); }
.ust--kucuk .ust__ic { min-height: 64px; }
.ust__ic, .marka img { transition: min-height .2s ease, width .2s ease, height .2s ease; }
.ust--kucuk .marka img { width: 40px; height: 40px; }

.gorsel-cerceve img { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.gorsel-cerceve:hover img { transform: scale(1.045); }

.sallanan { animation: sallan 6s ease-in-out infinite; }
@keyframes sallan {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(2deg); }
}

/* =========================================================================
   SAĞ ALT BUTON YIĞINI — WhatsApp + yukarı çık
   Yukarı çık düğmesi en altta, WhatsApp onun üzerinde durur.
   ========================================================================= */
.yigin {
  position: fixed; right: clamp(14px, 2.5vw, 26px); bottom: clamp(14px, 2.5vw, 26px);
  z-index: 80; display: grid; gap: 12px; justify-items: end;
}
.yigin__dugme {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; position: relative; padding: 0;
  box-shadow: 0 12px 26px rgba(22, 55, 92, .22);
  transition: transform .18s ease, box-shadow .18s ease, opacity .25s ease, visibility .25s;
}
.yigin__dugme:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 32px rgba(22, 55, 92, .28); }
.yigin__wa { background: linear-gradient(135deg, #25D366, #128C7E); }
.yigin__wa:hover { text-decoration: none; }
.yigin__yukari {
  background: linear-gradient(135deg, var(--turuncu), var(--turuncu-ack));
  opacity: 0; visibility: hidden; transform: translateY(12px);
}
.yigin__yukari.gorunur { opacity: 1; visibility: visible; transform: none; }

.yigin__wa::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .5); animation: nabiz 2.8s ease-out infinite;
}
@keyframes nabiz {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* Sohbet balonu — "Desteğe mi ihtiyacınız var?" */
.sohbet {
  position: relative; width: min(290px, calc(100vw - 40px)); background: var(--beyaz);
  border: 1px solid var(--kenar); border-radius: 18px 18px 6px 18px;
  box-shadow: var(--golge-b); padding: 14px;
  display: grid; grid-template-columns: 38px 1fr 24px; gap: 10px; align-items: start;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.96);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility .32s;
}
.sohbet.gorunur { opacity: 1; visibility: visible; transform: none; }
.sohbet__avatar {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: var(--seftali-zem); display: grid; place-items: center;
}
.sohbet__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sohbet__metin strong { display: block; font-size: .83rem; color: var(--lacivert); font-family: var(--baslik-yazi); }
.sohbet__metin p { margin: 3px 0 0; font-size: .85rem; color: var(--gri); line-height: 1.45; }
.sohbet__kapat {
  background: none; border: 0; color: var(--gri-2); cursor: pointer; padding: 2px;
  line-height: 0; border-radius: 6px;
}
.sohbet__kapat:hover { color: var(--lacivert); background: var(--krem-2); }
.sohbet__cevap { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sohbet__cevap a {
  font-size: .78rem; font-weight: 700; padding: 7px 13px; border-radius: 999px;
  background: var(--yesil-zem); color: var(--yesil-koy);
}
.sohbet__cevap a:hover { background: var(--yesil); color: #fff; text-decoration: none; }
.sohbet__cevap a.sohbet__cevap--tur { background: var(--seftali-zem); color: var(--turuncu-koy); }
.sohbet__cevap a.sohbet__cevap--tur:hover { background: var(--turuncu); color: #fff; }

@media (max-width: 620px) {
  .yigin__dugme { width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .balon, .yigin__wa::before, .sallanan { animation: none !important; }
  [data-anim] { opacity: 1; transform: none; }
  .sohbet { transition: none; }
}

/* Mega menü grup başlıkları ve listeleri */
.mega__grup h4 {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--turuncu); margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
}
.mega__grup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

/* Fare köprüsü: buton ile panel arasındaki 10px boşlukta imleç menüden
   çıkmış sayılıyor ve menü kapanıyordu. Görünmez bir şerit boşluğu kapatır. */
.acilir::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}

/* İkon kutusu dayanıklılık: element kapsamlı kurallar (ör. ".guven__kalem span")
   sınıf kuralını ezebiliyor. Aynı özgüllükte ve dosyanın sonunda tekrar
   tanımlanınca kutu her yerde ortalı kalır. */
span.ikon-kutu, a.ikon-kutu, div.ikon-kutu { display: grid; place-items: center; }
.ikon-kutu svg { display: block; }