/* ==========================================================================
   CENNETİN KUŞLARI — Online Kur'an Akademisi
   Renkler afişlerden alınmıştır.
   ========================================================================== */

:root {
  --lacivert: #16305c;
  --lacivert-koyu: #0e2145;
  --altin: #8a6220;          /* küçük metinlerde 4.5:1 kontrast sağlayan altın */
  --altin-parlak: #c99a4a;
  --altin-acik: #e9cf8f;
  --kirmizi: #a3232b;
  --kirmizi-koyu: #861b22;
  --yesil: #2b6a45;
  --yesil-koyu: #1f5234;
  --whatsapp: #15803d;
  --whatsapp-koyu: #116b33;
  --mavi: #3f8fd6;
  --gok-ust: #bfe0f8;
  --gok-alt: #eef7fe;
  --krem: #fbf8f1;
  --krem-koyu: #f4eee1;
  --beyaz: #ffffff;
  --metin: #1d2943;
  --metin-soluk: #4f5b74;
  --cizgi: #e7dfcd;

  --font-baslik: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-govde: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-el: "Dancing Script", "Brush Script MT", cursive;

  --radius: 18px;
  --radius-kucuk: 12px;
  --golge: 0 10px 30px -12px rgba(22, 48, 92, .25);
  --golge-buyuk: 0 24px 60px -20px rgba(22, 48, 92, .35);
  --ust-yukseklik: 72px;
  --kapsayici: 1180px;
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-yukseklik) + 12px); -webkit-text-size-adjust: 100%;
  /* Mac/iOS'ta sayfa kenarlarındaki "esneme" efektini kapat; olursa da üstte gökyüzü rengi görünsün */
  overscroll-behavior-y: none;
  background: var(--gok-ust);
}
body {
  margin: 0;
  font-family: var(--font-govde);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--metin);
  background: var(--krem);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
main, .alt { overflow-x: clip; } /* hiçbir öğe sayfayı yana taşıramasın */
img { height: auto; }
a { color: var(--lacivert); }
h1, h2, h3 { font-family: var(--font-baslik); color: var(--lacivert); line-height: 1.2; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

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

.kapsayici { width: 100%; max-width: var(--kapsayici); margin-inline: auto; padding-inline: 20px; }
.kapsayici.dar { max-width: 820px; }
.gorunmez { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.el-yazisi { font-family: var(--font-el); font-weight: 700; color: var(--lacivert); font-size: 1.3em; line-height: 1.3; }

.atla-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--lacivert); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.atla-link:focus { top: 12px; }

.ikon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.ikon-kucuk { width: 1em; height: 1em; opacity: .85; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75em 1.4em;
  font-family: var(--font-baslik); font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-buyuk { min-height: 56px; padding: .9em 1.7em; font-size: 1.03rem; }
.btn-kucuk { min-height: 40px; padding: .5em 1.05em; font-size: .9rem; }
.btn-blok { width: 100%; }
.btn-kirmizi { background: var(--kirmizi); color: #fff; box-shadow: 0 10px 22px -10px rgba(163, 35, 43, .7); }
.btn-kirmizi:hover { background: var(--kirmizi-koyu); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; box-shadow: 0 10px 22px -10px rgba(31, 157, 85, .7); }
.btn-whatsapp:hover { background: var(--whatsapp-koyu); }
.btn-beyaz { background: #fff; color: var(--lacivert); }
.btn-beyaz:hover { background: var(--krem); }
.btn-cizgi { background: transparent; color: var(--lacivert); border-color: rgba(22, 48, 92, .25); }
.btn-cizgi:hover { border-color: var(--lacivert); background: #fff; }
.buton-grup { display: flex; flex-wrap: wrap; gap: 12px; }
.buton-grup.merkez { justify-content: center; }

/* ---------- Üst menü ---------- */
.ust {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--ust-yukseklik);
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s;
}
.ust.kaydirildi {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 6px 24px -14px rgba(22, 48, 92, .35);
}
.ust-ic { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lacivert); }
.logo-kus { width: 44px; height: 44px; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(22, 48, 92, .18)); }
.logo-yazi { display: flex; flex-direction: column; line-height: 1.1; }
.logo-yazi strong { font-family: var(--font-baslik); font-weight: 900; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.logo-yazi small { font-family: var(--font-baslik); font-weight: 700; font-size: .75rem; color: var(--altin); text-transform: uppercase; letter-spacing: .03em; }
.logo-acik { color: #fff; }
.logo-acik .logo-yazi small { color: var(--altin-acik); }

.menu ul { display: flex; gap: 4px; }
.menu a:not(.btn) {
  display: block; padding: 10px 12px; border-radius: 10px;
  font-family: var(--font-baslik); font-weight: 700; font-size: .92rem;
  color: var(--lacivert); text-decoration: none; position: relative;
}
.menu a:not(.btn)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
  background: var(--altin-parlak); border-radius: 2px; transform: scaleX(0); transition: transform .2s ease;
}
.menu a:not(.btn):hover::after, .menu a.aktif::after { transform: scaleX(1); }
.menu { display: flex; align-items: center; gap: 14px; }

.menu-dugme {
  display: none; width: 48px; height: 48px; border-radius: 14px; border: 0;
  background: rgba(255, 255, 255, .8); color: var(--lacivert); cursor: pointer;
  align-items: center; justify-content: center; box-shadow: var(--golge);
}
.menu-dugme .ikon { width: 26px; height: 26px; }
.menu-dugme-kapat { display: none; }
.menu-dugme[aria-expanded="true"] .menu-dugme-ac { display: none; }
.menu-dugme[aria-expanded="true"] .menu-dugme-kapat { display: block; }

@media (max-width: 1023px) {
  .menu-dugme { display: inline-flex; }
  .menu {
    position: fixed; top: var(--ust-yukseklik); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 14px; border-radius: var(--radius);
    background: #fff; box-shadow: var(--golge-buyuk);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .menu.acik { opacity: 1; visibility: visible; transform: none; }
  .menu ul { flex-direction: column; gap: 2px; }
  .menu a:not(.btn) { padding: 13px 14px; font-size: 1rem; }
  .menu a:not(.btn):hover { background: var(--krem); }
  .menu a:not(.btn)::after { display: none; }
  .menu-cta { min-height: 52px; font-size: 1rem; }
}

/* ---------- Gökyüzü & bulutlar ---------- */
.gokyuzu { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bulut {
  position: absolute; display: block;
  width: 220px; height: 64px; border-radius: 64px;
  background: #fff; opacity: .85;
  filter: blur(1px);
  animation: bulut-kay 60s linear infinite;
}
.bulut::before, .bulut::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.bulut::before { width: 100px; height: 100px; left: 28px; top: -50px; }
.bulut::after { width: 76px; height: 76px; right: 34px; top: -34px; }
.b1 { top: 16%; left: -5%; transform: scale(1.1); animation-duration: 75s; }
.b2 { top: 8%; left: 55%; transform: scale(.8); opacity: .7; animation-duration: 95s; animation-delay: -30s; }
.b3 { top: 46%; left: 78%; transform: scale(1.3); animation-duration: 85s; animation-delay: -10s; }
.b4 { top: 62%; left: 8%; transform: scale(.7); opacity: .6; animation-duration: 110s; animation-delay: -50s; }
.b5 { top: 30%; left: 30%; transform: scale(.55); opacity: .55; animation-duration: 120s; animation-delay: -70s; }
@keyframes bulut-kay {
  from { translate: -10vw 0; }
  to   { translate: 30vw 0; }
}
.ucan-kus { position: absolute; width: 28px; fill: none; stroke: var(--lacivert); stroke-width: 2.4; stroke-linecap: round; opacity: .35; animation: ucus 26s linear infinite; }
.ucan-kus path { animation: kanat-cirp .6s ease-in-out infinite alternate; transform-origin: center; }
.k1 { top: 20%; left: -5%; }
.k2 { top: 26%; left: -8%; width: 20px; animation-delay: -4s; animation-duration: 30s; }
.k3 { top: 14%; left: -10%; width: 22px; animation-delay: -15s; animation-duration: 34s; }
@keyframes ucus {
  from { transform: translate(0, 0); }
  50%  { transform: translate(60vw, -20px); }
  to   { transform: translate(120vw, 10px); }
}
@keyframes kanat-cirp { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  padding: calc(var(--ust-yukseklik) + 28px) 0 120px;
  background: linear-gradient(180deg, var(--gok-ust) 0%, #dcefff 38%, var(--gok-alt) 70%, var(--krem) 100%);
  overflow: hidden;
}
.hero-izgara {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "baslik baslik" "sol sag" "eylem eylem";
  align-items: center; column-gap: 12px; row-gap: 18px;
  text-align: center;
}
.hero-baslik-alan { grid-area: baslik; }
.hero-eylem-alan { grid-area: eylem; }
.hero-kus-sol { grid-area: sol; justify-self: end; }
.hero-kus-sag { grid-area: sag; justify-self: start; }
.hero-kus { width: min(190px, 42vw); }

.durum-rozet {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px;
  padding: 8px 16px; margin-bottom: 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); box-shadow: var(--golge);
  font-size: .9rem; color: var(--metin-soluk);
}
.durum-rozet strong { color: var(--kirmizi); font-family: var(--font-baslik); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.durum-rozet .nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--kirmizi); box-shadow: 0 0 0 0 rgba(163, 35, 43, .5); animation: nabiz 2s infinite; }
.durum-devam strong, .durum-acik strong { color: var(--yesil); }
.durum-devam .nokta, .durum-acik .nokta { background: var(--yesil); animation-name: nabiz-yesil; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(163, 35, 43, .5); } 70% { box-shadow: 0 0 0 10px rgba(163, 35, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(163, 35, 43, 0); } }
@keyframes nabiz-yesil { 0% { box-shadow: 0 0 0 0 rgba(43, 106, 69, .5); } 70% { box-shadow: 0 0 0 10px rgba(43, 106, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 106, 69, 0); } }

.hero-baslik {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.75rem, min(11vw, 15vh), 6rem); line-height: .98; /* yatay telefonda ekranı kaplamasın */ letter-spacing: .005em;
  color: var(--lacivert);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .6);
}
.hero-baslik .kelime { display: block; }
.hero-alt {
  margin-top: 12px;
  font-family: var(--font-baslik); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1rem, 3.6vw, 1.65rem); letter-spacing: .03em; color: var(--altin);
}
.slogan {
  margin-top: 14px;
  font-family: var(--font-el); font-weight: 700;
  font-size: clamp(1.65rem, 5.4vw, 2.5rem); line-height: 1.2; color: var(--lacivert);
}
.hero-aciklama { max-width: 560px; margin: 0 auto 22px; color: var(--metin-soluk); font-size: 1.08rem; }
.hero-aciklama strong { color: var(--lacivert); }
.hero-eylem-alan .buton-grup { justify-content: center; }
.hero-bilgiler {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin-top: 22px; font-weight: 700; color: var(--lacivert); font-size: .95rem;
}
.hero-bilgiler li { display: inline-flex; align-items: center; gap: 7px; }
.hero-bilgiler .ikon { color: var(--altin-parlak); }

.hero-dalga { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; fill: var(--krem); z-index: 1; }

@media (min-width: 960px) {
  .hero { padding-top: calc(var(--ust-yukseklik) + 48px); padding-bottom: 150px; }
}
@media (min-width: 1200px) {
  .hero-izgara {
    grid-template-columns: 1fr minmax(0, 640px) 1fr;
    grid-template-areas: "sol baslik sag" "sol eylem sag";
    column-gap: 8px; row-gap: 26px;
  }
  .hero-izgara.kapsayici { max-width: 1340px; }
  .hero-kus { width: 100%; max-width: 330px; }
  .hero-kus-sol { justify-self: end; align-self: end; margin-bottom: -10px; }
  .hero-kus-sag { justify-self: start; align-self: end; margin-bottom: -10px; }
}

/* ---------- Kuş animasyonları ---------- */
.kus { overflow: visible; filter: drop-shadow(0 18px 22px rgba(22, 48, 92, .14)); }
.kus .kus-govde-grup { animation: suzul 5s ease-in-out infinite; }
.kus-sari .kus-govde-grup { animation-delay: -2.5s; }
.kus .kus-goz { transform-box: fill-box; transform-origin: center; animation: goz-kirp 6s infinite; }
.kus-sari .kus-goz { animation-delay: -3s; }
.kus-kanat { transform-box: fill-box; }
.kus-kanat-sol { transform-origin: 100% 90%; animation: kanat-sol 3.2s ease-in-out infinite; }
.kus-kanat-sag { transform-origin: 0% 90%; animation: kanat-sag 3.2s ease-in-out infinite; }
.kus-bulut { animation: bulut-nefes 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes suzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes goz-kirp { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes kanat-sol { 0%, 45%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20% { transform: rotate(-2deg); } }
@keyframes kanat-sag { 0%, 45%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-16deg); } 20% { transform: rotate(2deg); } }
@keyframes bulut-nefes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015, .985); } }
.hero-kus:hover .kus-kanat-sol, .hero-kus:hover .kus-kanat-sag { animation-duration: 1s; }

/* ---------- Özet şeridi ---------- */
.ozet { position: relative; z-index: 2; margin-top: -70px; }
.ozet-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ozet-kart {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: var(--radius);
  background: #fff; box-shadow: var(--golge);
  border: 1px solid rgba(22, 48, 92, .06);
}
.ozet-kart strong { display: block; font-family: var(--font-baslik); color: var(--lacivert); font-size: .98rem; line-height: 1.25; }
.ozet-kart span:not(.ozet-ikon) { display: block; color: var(--metin-soluk); font-size: .88rem; line-height: 1.35; }
.ozet-ikon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.ozet-ikon .ikon { width: 24px; height: 24px; }
@media (max-width: 479px) {
  .ozet-kart { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 900px) {
  .ozet-izgara { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .ozet-kart { padding: 20px; }
}

/* Renk yardımcıları (ikon zeminleri) */
.renk-mavi    { --vurgu: var(--mavi);     --vurgu-zemin: #e5f1fc; }
.renk-altin   { --vurgu: var(--altin);    --vurgu-zemin: #f8efdc; }
.renk-yesil   { --vurgu: var(--yesil);    --vurgu-zemin: #e3f1e8; }
.renk-kirmizi { --vurgu: var(--kirmizi);  --vurgu-zemin: #f9e4e5; }
.renk-lacivert{ --vurgu: var(--lacivert); --vurgu-zemin: #e4e9f3; }
.ozet-ikon { color: var(--vurgu); background: var(--vurgu-zemin); }

/* ---------- Bölümler ---------- */
.bolum { padding: 88px 0; position: relative; }
.bolum-desen {
  background-color: var(--krem-koyu);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23c9a35a' stroke-opacity='.18' stroke-width='1.2'%3E%3Crect x='32' y='32' width='32' height='32'/%3E%3Crect x='32' y='32' width='32' height='32' transform='rotate(45 48 48)'/%3E%3Cpath d='M0 48h25M71 48h25M48 0v25M48 71v25'/%3E%3Ccircle cx='0' cy='0' r='14'/%3E%3Ccircle cx='96' cy='0' r='14'/%3E%3Ccircle cx='0' cy='96' r='14'/%3E%3Ccircle cx='96' cy='96' r='14'/%3E%3C/g%3E%3C/svg%3E");
}
.bolum-ust { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.ust-baslik {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--font-baslik); font-weight: 800; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--altin);
}
.bolum-baslik { font-weight: 800; font-size: clamp(1.75rem, 4.4vw, 2.6rem); }
.bolum-aciklama { margin-top: 16px; color: var(--metin-soluk); font-size: 1.08rem; }
.bolum-aciklama .el-yazisi { display: block; margin-top: 6px; }

/* Afişteki altın süsleme çizgisi */
.susleme { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.susleme::before, .susleme::after { content: ""; height: 1.5px; width: 80px; background: linear-gradient(90deg, transparent, var(--altin-parlak)); }
.susleme::after { background: linear-gradient(270deg, transparent, var(--altin-parlak)); }
.susleme span { width: 10px; height: 10px; background: var(--altin-parlak); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 4px rgba(201, 154, 74, .18); }

.iki-sutun { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .iki-sutun { grid-template-columns: 1.1fr .9fr; gap: 64px; } }

/* ---------- Hakkımızda ---------- */
.giris { margin-top: 18px; font-size: 1.1rem; color: var(--metin-soluk); }
.giris strong { color: var(--lacivert); }
.ozellik-liste { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 640px) { .ozellik-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) and (max-width: 1199px) { .ozellik-liste { grid-template-columns: 1fr; } }
.ozellik-liste li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--cizgi);
}
.ozellik-liste h3 { font-size: 1rem; margin-bottom: 4px; }
.ozellik-liste p { font-size: .95rem; color: var(--metin-soluk); line-height: 1.5; }
.ozellik-ikon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: #f8efdc; color: var(--altin); }

.hakkimizda-gorsel { position: relative; display: grid; place-items: center; padding: 20px 0 0; }
.daire-zemin {
  position: absolute; width: min(420px, 90%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0%, var(--gok-ust) 70%);
  top: 0;
}
.hakkimizda-kus { position: relative; width: min(360px, 85%); }
.hadis-kart {
  position: relative; margin: -24px 0 0; max-width: 380px;
  padding: 22px 24px; border-radius: var(--radius);
  background: var(--lacivert); color: #fff; box-shadow: var(--golge-buyuk); text-align: center;
}
.hadis-kart::before {
  content: "“"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--altin-parlak); color: #fff;
  font: 900 2.2rem/58px var(--font-baslik);
}
.hadis-kart blockquote { margin: 6px 0 8px; font-family: var(--font-el); font-weight: 700; font-size: 1.55rem; line-height: 1.3; }
.hadis-kart figcaption { font-size: .85rem; color: var(--altin-acik); font-weight: 700; letter-spacing: .04em; }

/* ---------- Eğitimler ---------- */
.egitim-izgara { display: grid; gap: 18px; }
@media (min-width: 640px) { .egitim-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .egitim-izgara { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.egitim-kart {
  position: relative; overflow: hidden;
  padding: 28px 26px 26px; border-radius: 22px; background: #fff;
  border: 1px solid rgba(22, 48, 92, .07); box-shadow: var(--golge);
  transition: transform .25s ease, box-shadow .25s ease;
}
.egitim-kart::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--vurgu);
}
.egitim-kart::after {
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%;
  background: var(--vurgu-zemin); z-index: 0; transition: transform .35s ease;
}
.egitim-kart > * { position: relative; z-index: 1; }
.egitim-kart:hover { transform: translateY(-6px); box-shadow: var(--golge-buyuk); }
.egitim-kart:hover::after { transform: scale(1.25); }
.egitim-ikon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 18px; color: var(--vurgu); background: var(--vurgu-zemin); }
.egitim-ikon .ikon { width: 30px; height: 30px; }
.egitim-kart h3 { font-size: 1.22rem; margin-bottom: 8px; }
.egitim-kart p { color: var(--metin-soluk); font-size: .98rem; }

/* ---------- Takvim ---------- */
.zaman-cizelgesi { display: grid; gap: 16px; position: relative; counter-reset: adim; }
@media (min-width: 700px) {
  .zaman-cizelgesi { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .zaman-cizelgesi::before {
    content: ""; position: absolute; top: 38px; left: 16%; right: 16%; height: 3px;
    background: repeating-linear-gradient(90deg, var(--altin-acik) 0 10px, transparent 10px 18px);
  }
}
.zc-adim {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 0 18px 24px; border-radius: 22px; background: #fff; box-shadow: var(--golge);
  border: 1px solid rgba(22, 48, 92, .06);
}
.zc-nokta {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  position: relative; margin: 8px 0 10px; background: var(--krem); color: var(--altin); border: 3px solid var(--altin-acik);
}
.zc-nokta .ikon { width: 26px; height: 26px; }
.zc-adim time { font-family: var(--font-baslik); font-weight: 800; font-size: 1.25rem; color: var(--lacivert); }
.zc-adim strong { font-family: var(--font-baslik); color: var(--altin); font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; }
.zc-adim span { color: var(--metin-soluk); font-size: .93rem; }
.zc-tamam .zc-nokta { background: var(--yesil); color: #fff; border-color: #cfe5d7; }
.zc-tamam time { color: var(--metin-soluk); }
.zc-simdi { outline: 3px solid var(--yesil); outline-offset: -3px; }
.zc-simdi .zc-nokta { background: var(--yesil); color: #fff; border-color: #cfe5d7; }
.zc-etiket { margin-top: 8px; font-style: normal; font-weight: 800; font-size: .8rem; color: #fff; background: var(--yesil); padding: 4px 12px; border-radius: 999px; }
@media (min-width: 700px) { .zc-adim { padding-top: 0; } .zc-nokta { margin-top: 8px; } }

.geri-sayim {
  margin: 40px auto 0; max-width: 620px; text-align: center;
  padding: 26px 20px; border-radius: 24px; background: var(--lacivert); color: #fff; box-shadow: var(--golge-buyuk);
}
.geri-sayim p { font-weight: 700; color: var(--altin-acik); margin-bottom: 14px; }
.gs-kutular { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gs-kutular div { background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 12px 4px; }
.gs-kutular strong { display: block; font-family: var(--font-baslik); font-weight: 900; font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.gs-kutular span { font-size: .8rem; opacity: .8; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Kayıt ---------- */
.kayit-bolum { background: linear-gradient(180deg, var(--krem) 0%, #eef6fd 100%); }
.adimlar { display: grid; gap: 14px; margin-top: 28px; }
.adimlar li { display: flex; gap: 16px; align-items: flex-start; padding: 18px; background: #fff; border-radius: var(--radius); border: 1px solid var(--cizgi); }
.adim-no {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--lacivert); color: #fff; font-family: var(--font-baslik); font-weight: 900; font-size: 1.1rem;
  box-shadow: 0 0 0 5px rgba(22, 48, 92, .1);
}
.adimlar h3 { font-size: 1.05rem; margin-bottom: 3px; }
.adimlar p { color: var(--metin-soluk); font-size: .96rem; line-height: 1.5; }

.etiketler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.etiket {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; color: #fff;
  font-family: var(--font-baslik); font-size: .9rem; line-height: 1.25; box-shadow: var(--golge);
}
.etiket .ikon { width: 26px; height: 26px; }
.etiket strong { display: block; text-transform: uppercase; letter-spacing: .02em; }
.etiket small { display: block; font-weight: 600; font-size: .8rem; opacity: .92; text-transform: uppercase; }
.etiket-kirmizi { background: var(--kirmizi); }
.etiket-yesil { background: var(--yesil); }

.kayit-kart {
  position: relative; text-align: center;
  width: 100%; max-width: 480px; margin-inline: auto;
  padding: 92px 28px 28px; margin-top: 70px;
  background: #fff; border-radius: 28px; box-shadow: var(--golge-buyuk);
  border: 1px solid rgba(22, 48, 92, .06);
}
.kayit-kart-ust { position: absolute; top: -96px; left: 50%; transform: translateX(-50%); width: 190px; }
.kayit-kart h3 { font-size: 1.45rem; }
.kayit-kart > p { color: var(--metin-soluk); margin: 6px auto 18px; max-width: 320px; font-size: .97rem; }
.qr {
  width: 200px; height: 200px; margin: 0; padding: 10px; border-radius: 16px;
  background: #fff; border: 2px dashed var(--altin-acik); image-rendering: pixelated;
}
.kayit-alt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; margin-top: 16px; font-size: .95rem; color: var(--metin-soluk); }
.kayit-alt a { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; text-decoration: none; padding: 8px 4px; }
.kayit-alt a:hover { text-decoration: underline; }
@media (min-width: 900px) { .kayit-kart { margin-top: 0; } }

/* ---------- SSS ---------- */
.sss-liste { display: grid; gap: 12px; }
.sss-oge { background: #fff; border-radius: 16px; border: 1px solid var(--cizgi); transition: box-shadow .2s ease; }
.sss-oge[open] { box-shadow: var(--golge); border-color: transparent; }
.sss-oge summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; font-family: var(--font-baslik); font-weight: 700; color: var(--lacivert); font-size: 1.02rem; min-height: 56px;
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-isaret { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--krem-koyu); flex-shrink: 0; transition: transform .25s ease, background-color .2s; }
.sss-isaret::before, .sss-isaret::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--lacivert); transform: translate(-50%, -50%); border-radius: 2px; }
.sss-isaret::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s ease; }
.sss-oge[open] .sss-isaret { background: var(--altin-acik); }
.sss-oge[open] .sss-isaret::after { transform: translate(-50%, -50%) rotate(0); }
.sss-cevap p { padding: 0 20px 20px; color: var(--metin-soluk); }
.sss-not { text-align: center; margin-top: 28px; color: var(--metin-soluk); }
.sss-not a { font-weight: 800; display: inline-block; padding-block: 11px; margin-block: -11px; } /* görünümü bozmadan büyük dokunma alanı */

/* ---------- Son çağrı ---------- */
.cagri {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 80px 0; color: #fff;
  background: radial-gradient(ellipse at 50% 120%, #2b5aa0 0%, var(--lacivert) 55%, var(--lacivert-koyu) 100%);
}
.cagri .bulut { opacity: .08; }
.cagri-ic { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; }
.cagri-kus { display: none; width: 220px; }
.cagri-etiket {
  display: inline-block; padding: 6px 16px; border-radius: 999px; margin-bottom: 14px;
  background: var(--yesil); font-family: var(--font-baslik); font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
}
.cagri h2 { color: #fff; font-weight: 800; font-size: clamp(1.75rem, 4.6vw, 2.7rem); max-width: 640px; margin: 0 auto; }
.cagri-metin > p:not(.cagri-etiket) { margin: 14px auto 28px; max-width: 520px; color: rgba(255, 255, 255, .85); font-size: 1.08rem; }
@media (min-width: 1024px) {
  .cagri-ic { grid-template-columns: 220px 1fr 220px; align-items: center; }
  .cagri-kus { display: block; }
}

/* ---------- Alt bilgi ---------- */
.alt { background: var(--lacivert-koyu); color: rgba(255, 255, 255, .85); padding-top: 60px; }
.alt a { color: #fff; text-decoration: none; }
.alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.alt-izgara { display: grid; gap: 36px; padding-bottom: 44px; }
@media (min-width: 800px) { .alt-izgara { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.alt-slogan { color: var(--altin-acik); margin-top: 14px; font-size: 1.45rem; }
.alt-baslik { color: #fff; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.alt-liste { display: grid; gap: 4px; }
.alt-liste a { overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 4px 0; }
.alt-iletisim .ikon { color: var(--altin-acik); }
.alt-serit { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0; font-size: .88rem; }
.alt-serit .kapsayici { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.alt-serit .kapsayici { align-items: center; }
.alt-serit p { color: rgba(255, 255, 255, .7); }
.yukari { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }

/* ---------- Mobil çubuk & yüzen WhatsApp ---------- */
.mobil-cubuk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -8px 24px -12px rgba(22, 48, 92, .3);
  transform: translateY(110%); transition: transform .3s ease;
}
.mobil-cubuk.gorunur { transform: none; }
.mobil-cubuk .btn { min-height: 50px; padding-inline: .8em; }
@media (max-width: 767px) { body { padding-bottom: 0; } .alt { padding-bottom: 76px; } }
@media (min-width: 768px) { .mobil-cubuk { display: none; } }

.yuzen-wa {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 60px; height: 60px; border-radius: 50%; display: none; place-items: center;
  background: var(--whatsapp); color: #fff; box-shadow: 0 14px 30px -10px rgba(31, 157, 85, .7);
  transition: transform .2s ease;
}
.yuzen-wa .ikon { width: 30px; height: 30px; }
.yuzen-wa:hover { transform: scale(1.06); }
.yuzen-wa-ipucu {
  position: absolute; right: 72px; white-space: nowrap; padding: 8px 14px; border-radius: 10px;
  background: #fff; color: var(--lacivert); font-weight: 800; font-size: .9rem; box-shadow: var(--golge);
  opacity: 0; transform: translateX(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.yuzen-wa:hover .yuzen-wa-ipucu, .yuzen-wa:focus-visible .yuzen-wa-ipucu { opacity: 1; transform: none; }
@media (min-width: 768px) { .yuzen-wa { display: grid; } }

/* ---------- Kaydırınca beliren öğeler ---------- */
.js .gorun { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--gecikme, 0ms); }
.js .gorun:not(.goruldu) { opacity: 0; transform: translateY(28px); }
/* Yandan kayma sadece geniş ekranda: dar ekranda sayfayı yana taşırmasın */
@media (min-width: 1024px) {
  .js .gorun.gorun-sol:not(.goruldu) { transform: translateX(-36px); }
  .js .gorun.gorun-sag:not(.goruldu) { transform: translateX(36px); }
}

/* ---------- Yazdırma ---------- */
@media print {
  .ust, .mobil-cubuk, .yuzen-wa, .gokyuzu, .hero-dalga { display: none !important; }
  .hero { padding-top: 20px; background: none; }
}

/* ==========================================================================
   ANİMASYON KATMANI
   ========================================================================== */

/* ---------- Okuma ilerleme çubuğu ---------- */
.ilerleme {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; pointer-events: none;
  background: linear-gradient(90deg, var(--altin-parlak), #e8b65c 50%, var(--kirmizi));
  transform-origin: 0 50%; transform: scaleX(var(--ilerleme, 0));
}

/* ---------- Üst menü girişi & logo ---------- */
.ust { animation: ust-gel .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ust-gel { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
.logo:hover .logo-kus { animation: sallan .7s ease; }
@keyframes sallan { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg) scale(1.08); } 45% { transform: rotate(10deg) scale(1.08); } 70% { transform: rotate(-5deg); } }

/* ---------- Butonlarda parıltı ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-kirmizi::after, .btn-whatsapp::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
.btn-kirmizi:hover::after, .btn-whatsapp:hover::after { left: 130%; }
.btn-parla::after { animation: parla 5s ease-in-out 3s infinite; }
@keyframes parla { 0% { left: -70%; } 20%, 100% { left: 130%; } }
.btn .ikon { transition: transform .25s ease; }
.btn:hover .ikon:first-child { transform: rotate(-8deg) scale(1.12); }

/* ---------- Hero giriş koreografisi ---------- */
.giris-anim { animation: giris-yukari .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
@keyframes giris-yukari { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero-baslik .harf {
  display: inline-block;
  animation: harf-gel .75s cubic-bezier(.2, .9, .3, 1.35) calc(.2s + var(--i) * .045s) both;
}
@keyframes harf-gel {
  from { opacity: 0; transform: translateY(.55em) rotate(10deg) scale(.5); }
  to   { opacity: 1; transform: none; }
}

.yazi-efekti { display: inline-block; padding: 0 .2em; animation: yazi-yaz 1.5s cubic-bezier(.6, .1, .3, 1) 1s both; }
@keyframes yazi-yaz { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -5% -10% 0); } }

.hero-kus-sol { animation: uc-gel-sol 1.3s cubic-bezier(.25, .8, .3, 1.12) 1s both; }
.hero-kus-sag { animation: uc-gel-sag 1.3s cubic-bezier(.25, .8, .3, 1.12) 1.15s both; }
@keyframes uc-gel-sol {
  0%   { opacity: 0; transform: translate(-160px, -140px) rotate(-20deg) scale(.6); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes uc-gel-sag {
  0%   { opacity: 0; transform: translate(160px, -140px) rotate(20deg) scale(.6); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ---------- Etkileşimli kuşlar ---------- */
.hero-kus { position: relative; }
.kus-dugme {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 40%; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.kus-dugme:focus-visible { outline-offset: -6px; }
.kus .kus-zipla { transform-box: fill-box; transform-origin: 50% 100%; }
.zipliyor .kus-zipla { animation: zipla .75s cubic-bezier(.3, .7, .4, 1.4); }
.kayit-kart:hover .kus-zipla { animation: zipla .75s cubic-bezier(.3, .7, .4, 1.4); }
@keyframes zipla {
  0%   { transform: none; }
  20%  { transform: translateY(4px) scale(1.06, .92); }
  45%  { transform: translateY(-38px) scale(.96, 1.05); }
  70%  { transform: translateY(0) scale(1.08, .9); }
  85%  { transform: translateY(-6px); }
  100% { transform: none; }
}
.zipliyor .kus-kanat-sol { animation: kanat-hizli-sol .16s ease-in-out 5 alternate; }
.zipliyor .kus-kanat-sag { animation: kanat-hizli-sag .16s ease-in-out 5 alternate; }
@keyframes kanat-hizli-sol { from { transform: rotate(0); } to { transform: rotate(22deg); } }
@keyframes kanat-hizli-sag { from { transform: rotate(0); } to { transform: rotate(-22deg); } }

.kus-balon {
  position: absolute; left: 50%; top: 4%; z-index: 4;
  width: max-content; max-width: 220px; padding: 10px 16px; border-radius: 18px;
  background: var(--lacivert); color: #fff; box-shadow: 0 14px 30px -12px rgba(14, 33, 69, .55);
  border: 2px solid rgba(255, 255, 255, .9);
  font-family: var(--font-baslik); font-weight: 800; font-size: .92rem; line-height: 1.3; text-align: center;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -100%) scale(.5); transform-origin: 50% 100%;
  transition: opacity .2s ease, transform .4s cubic-bezier(.3, .8, .4, 1.5);
}
.kus-balon::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 16px;
  background: var(--lacivert); border-radius: 3px; transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid rgba(255, 255, 255, .9); border-bottom: 2px solid rgba(255, 255, 255, .9);
}
.kus-balon.acik { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.kus-balon:empty { display: none; }
@media (max-width: 1199px) {
  .hero-kus { margin-top: 30px; }
  .kus-balon { top: 6%; max-width: 160px; font-size: .82rem; padding: 8px 12px; }
}

.parcacik {
  position: absolute; left: 50%; top: 38%; z-index: 3; pointer-events: none; line-height: 1;
  font-size: var(--s, 18px); color: var(--c, var(--altin-parlak));
  animation: parcacik-uc 1.2s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes parcacik-uc {
  from { opacity: 1; transform: translate(-50%, 0) scale(.3); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--r)) scale(1.1); }
}

/* ---------- Gökyüzü: paralaks, parıltılar, tüyler ---------- */
.paralaks { position: absolute; inset: 0; will-change: transform; }
.parilti {
  position: absolute; width: var(--b, 14px); aspect-ratio: 1; opacity: 0;
  background: #f2c766;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: parilda 3.4s ease-in-out infinite;
}
.p1 { top: 15%; left: 8%;  --b: 16px; animation-delay: .4s; }
.p2 { top: 24%; left: 90%; --b: 12px; animation-delay: 1.6s; }
.p3 { top: 9%;  left: 34%; --b: 10px; animation-delay: 2.4s; }
.p4 { top: 58%; left: 94%; --b: 14px; animation-delay: .9s; }
.p5 { top: 64%; left: 4%;  --b: 11px; animation-delay: 2s; }
.p6 { top: 12%; left: 70%; --b: 15px; animation-delay: 3s; }
.p7 { top: 40%; left: 97%; --b: 9px;  animation-delay: 1.2s; }
@keyframes parilda {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0); }
  50%      { opacity: .95; transform: scale(1) rotate(90deg); }
}

.tuy { position: absolute; top: -50px; width: 18px; opacity: 0; animation: tuy-dus 17s linear infinite; }
.tuy > span { display: block; animation: tuy-salin 2.8s ease-in-out infinite alternate; }
.tuy svg { width: 100%; }
.tuy path:first-child { fill: #8fcaf5; }
.tuy-sari path:first-child { fill: #ffd447; }
.tuy .tuy-sap { fill: none; stroke: rgba(22, 48, 92, .28); stroke-width: 1.2; }
.t1 { left: 14%; animation-delay: 3s; }
.t2 { left: 84%; width: 15px; animation-delay: 8s; }
.t3 { left: 64%; width: 12px; animation-delay: 12.5s; animation-duration: 20s; }
.t4 { left: 28%; width: 14px; animation-delay: 15s; animation-duration: 19s; }
@keyframes tuy-dus {
  0%   { opacity: 0; transform: translateY(0); }
  8%   { opacity: .9; }
  80%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(105vh); }
}
@keyframes tuy-salin {
  from { transform: translateX(-26px) rotate(-35deg); }
  to   { transform: translateX(26px) rotate(35deg); }
}

/* ---------- Aşağı kaydır göstergesi ---------- */
.asagi-ok {
  display: none; position: absolute; left: 50%; bottom: 92px; z-index: 2; margin-left: -13px;
  width: 26px; height: 42px; border: 2px solid rgba(22, 48, 92, .35); border-radius: 14px;
  animation: giris-yukari .8s ease 2.2s both;
}
.asagi-ok span {
  position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px;
  background: var(--lacivert); animation: fare-tekerlek 1.8s ease-in-out infinite;
}
@keyframes fare-tekerlek { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(15px); } }
@media (min-width: 1200px) and (min-height: 820px) { .asagi-ok { display: block; } }

/* ---------- Bölüm başlıkları: süsleme çizgisi açılır ---------- */
.susleme::before, .susleme::after { transition: transform 1s cubic-bezier(.2, .7, .2, 1) .35s; }
.susleme::before { transform-origin: 100% 50%; }
.susleme::after { transform-origin: 0 50%; }
.susleme span { transition: transform .8s cubic-bezier(.3, .8, .4, 1.5) .2s; }
.js .gorun:not(.goruldu) .susleme::before, .js .gorun:not(.goruldu) .susleme::after { transform: scaleX(0); }
.js .gorun:not(.goruldu) .susleme span { transform: rotate(-135deg) scale(0); }

/* ---------- İkonlar sırayla "pıt" diye belirir ---------- */
.ozet-ikon, .egitim-ikon, .ozellik-ikon, .adim-no {
  transition: transform .65s cubic-bezier(.3, .8, .4, 1.5);
  transition-delay: calc(var(--gecikme, 0ms) + 250ms);
}
.js .gorun:not(.goruldu) .ozet-ikon,
.js .gorun:not(.goruldu) .egitim-ikon,
.js .gorun:not(.goruldu) .ozellik-ikon,
.js .gorun:not(.goruldu) .adim-no { transform: scale(0) rotate(-25deg); }

.egitim-kart:hover .egitim-ikon .ikon,
.ozet-kart:hover .ozet-ikon .ikon,
.ozellik-liste li:hover .ozellik-ikon .ikon { animation: kipir .6s ease; }
@keyframes kipir {
  0%, 100% { transform: none; }
  25% { transform: rotate(-14deg) scale(1.15); }
  50% { transform: rotate(10deg) scale(1.15); }
  75% { transform: rotate(-5deg); }
}
.ozet-kart, .ozellik-liste li, .adimlar li { transition: transform .25s ease, box-shadow .25s ease; }
.ozet-kart:hover, .ozellik-liste li:hover, .adimlar li:hover { transform: translateY(-4px); box-shadow: var(--golge-buyuk); }

/* ---------- Hakkımızda: dönen yörünge ---------- */
.daire-zemin { overflow: visible; }
.yorunge {
  position: absolute; inset: -16px; border-radius: 50%;
  border: 2px dashed rgba(201, 154, 74, .45);
  animation: don 50s linear infinite;
}
.yorunge i {
  position: absolute; top: -9px; left: calc(50% - 9px); width: 18px; height: 18px; background: var(--altin-parlak);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
@keyframes don { to { transform: rotate(360deg); } }
.hadis-kart { transition: transform .3s ease; }
.hadis-kart:hover { transform: translateY(-4px) rotate(-1deg); }

/* ---------- Takvim: çizgi çizilir, noktalar belirir ---------- */
.zaman-cizelgesi::before { transform-origin: 0 50%; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1) .3s; }
.js .zaman-cizelgesi.gorun:not(.goruldu)::before { transform: scaleX(0); }
.zc-nokta { transition: transform .6s cubic-bezier(.3, .8, .4, 1.6); }
.zc-adim:nth-child(1) .zc-nokta { transition-delay: .35s; }
.zc-adim:nth-child(2) .zc-nokta { transition-delay: .85s; }
.zc-adim:nth-child(3) .zc-nokta { transition-delay: 1.35s; }
.js .zaman-cizelgesi.gorun:not(.goruldu) .zc-nokta { transform: scale(0); }
.zc-simdi .zc-nokta::after, .zc-simdi .zc-nokta::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--yesil);
  animation: halka 2.2s ease-out infinite;
}
.zc-simdi .zc-nokta::before { animation-delay: 1.1s; }
@keyframes halka { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- QR kod tarama efekti ---------- */
.qr-kap { position: relative; width: 200px; margin: 0 auto 20px; }
.qr-tarama {
  position: absolute; left: 12px; right: 12px; top: 12px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--kirmizi), transparent);
  box-shadow: 0 0 14px 3px rgba(163, 35, 43, .35);
  animation: tara 2.8s ease-in-out infinite;
}
@keyframes tara { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(173px); } }

/* ---------- S.S.S. yumuşak açılma ---------- */
.sss-oge[open] .sss-cevap { animation: sss-ac .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sss-ac { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sss-oge summary:hover { color: var(--kirmizi); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .sss-oge::details-content { height: 0; overflow: clip; transition: height .4s cubic-bezier(.2, .7, .2, 1), content-visibility .4s allow-discrete; }
  .sss-oge[open]::details-content { height: auto; }
}

/* ---------- Son çağrı: yıldızlı gece ---------- */
.yildiz {
  position: absolute; width: var(--b); height: var(--b); border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .55); opacity: .2;
  animation: yildiz-parla 3.2s ease-in-out var(--g) infinite;
}
@keyframes yildiz-parla { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: .95; transform: scale(1); } }
.kayan-yildiz {
  position: absolute; top: 10%; left: 78%; width: 130px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff);
  animation: kayan 8s ease-in 2s infinite;
}
@keyframes kayan {
  0%   { opacity: 0; transform: translate(0, 0) rotate(155deg); }
  2%   { opacity: 1; }
  12%  { opacity: 0; transform: translate(-360px, 170px) rotate(155deg); }
  100% { opacity: 0; transform: translate(-360px, 170px) rotate(155deg); }
}
.paylas-not { margin-top: 22px; }
.paylas-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px;
  color: var(--altin-acik); font-weight: 700; text-decoration: none;
}
.paylas-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Yüzen WhatsApp: giriş ve nabız ---------- */
.yuzen-wa { animation: pop-gel .6s cubic-bezier(.3, .8, .4, 1.5) 2.6s both; }
.yuzen-wa::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--whatsapp);
  animation: halka 2.4s ease-out 3.2s infinite;
}
@keyframes pop-gel { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }

/* ---------- Hareket hassasiyeti ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .gorun:not(.goruldu) { opacity: 1; transform: none; }
  .paralaks { transform: none !important; }
}

/* ==========================================================================
   KÜÇÜK EKRAN İNCE AYARLARI
   ========================================================================== */
.logo-yazi strong, .logo-yazi small { white-space: nowrap; }

@media (max-width: 480px) {
  /* Hero ve son çağrı butonları: eşit genişlikte, tek satır */
  .hero-eylem-alan .buton-grup .btn, .cagri .buton-grup .btn { width: 100%; max-width: 360px; padding-inline: 1em; }
  .hero-eylem-alan .buton-grup, .cagri .buton-grup { justify-content: center; }
  /* Kayıt kartı */
  .kayit-kart { padding: 92px 20px 24px; }
  .kayit-kart .btn { padding-inline: 1em; font-size: .95rem; }
  .kayit-kart .btn .ikon-kucuk { display: none; }
}

@media (max-width: 380px) {
  /* Çok dar telefonlar (iPhone SE 1. nesil, küçük Android'ler) */
  .kapsayici { padding-inline: 16px; }
  .logo-kus { width: 38px; height: 38px; }
  .logo { min-height: 44px; }
  .logo-yazi strong { font-size: .95rem; }
  .logo-yazi small { display: none; } /* alt başlık zaten hero'da büyük yazıyor */
  .btn-buyuk { font-size: .98rem; }
  .ozet-izgara { gap: 10px; }
  .ozet-kart { padding: 14px; }
}