/* Designed & Developed by Alihan Balkan | +90 538 073 87 16 */
/* =========================================================
   HERO — tam kare (full-bleed) görsel slider
========================================================= */
.hero{position:relative;padding-block:0 clamp(1.5rem,3vw,2.5rem);}
.hero-stage{
  position:relative;
  width:100vw;margin-left:calc(-50vw + 50%);
  margin-top:calc(-1 * var(--header-h, 88px) - 1px);
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg-primary);
}
@media (max-width:640px){
  .hero-stage{aspect-ratio:9/16;}
}
.hero-slide__media{position:absolute;inset:0;z-index:0;}
.hero-slide__media img{width:100%;height:100%;object-fit:cover;}
/* Yumuşak, organik karartma — sabit bir panel/kutu değil; içerik
   bölgesinde yoğunlaşıp kenarları belirsiz şekilde arka plana
   karışan, merkezi kaydırılmış bir radial-gradient dokusu. */
.hero-slide__scrim{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 62% 75% at 84% 82%,
    rgba(8,7,6,.6) 0%,
    rgba(8,7,6,.46) 22%,
    rgba(8,7,6,.3) 40%,
    rgba(8,7,6,.15) 58%,
    rgba(8,7,6,.05) 74%,
    transparent 88%);
  pointer-events:none;
}
.hero-slide__content{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 var(--container-pad) clamp(1.6rem,4vw,3rem);
  display:flex;flex-direction:column;align-items:flex-end;
  text-align:right;
}
@media (min-width:641px){
  .hero-slide__content{padding-right:calc(var(--container-pad) + 3rem);}
}
.hero-slide__eyebrow{margin-bottom:1rem;color:var(--color-orange);}
.hero-slide__title{margin-bottom:1rem;color:var(--bg-primary);max-width:34rem;}
.hero-slide__title em{font-style:italic;color:var(--color-orange);}
.hero-slide__text{font-size:1.08rem;color:rgba(245,240,233,.92);margin-bottom:1.6rem;max-width:34rem;text-shadow:0 1px 12px rgba(0,0,0,.25);}
.hero-slide__actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:flex-end;}
.hero-slide__actions .btn--ghost{color:var(--bg-primary);border-color:rgba(245,240,233,.5);}
.hero-slide__actions .btn--ghost:hover{border-color:var(--bg-primary);background:rgba(245,240,233,.12);}
.hero-slide__note{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:rgba(245,240,233,.85);}
.hero-slide__note .icon{width:1.1em;height:1.1em;color:var(--color-orange);}
.hero-slide__break{display:none;}
@media (max-width:640px){
  .hero-slide__break{display:block;content:'';}
  .hero-slide__scrim{
    background:radial-gradient(ellipse 90% 55% at 60% 88%,
      rgba(8,7,6,.68) 0%,
      rgba(8,7,6,.52) 24%,
      rgba(8,7,6,.32) 44%,
      rgba(8,7,6,.15) 62%,
      transparent 82%);
  }
  .hero-slide__eyebrow{font-size:.66rem;margin-bottom:.7rem;}
  .hero-slide__title{font-size:clamp(1.5rem,7.5vw,2rem);margin-bottom:.7rem;}
  .hero-slide__text{font-size:.86rem;margin-bottom:1.1rem;}
  .hero-slide__actions{gap:.6rem;}
  .hero-slide__actions .btn{padding:.8rem 1.4rem;font-size:.72rem;}
}

.hero-controls{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.6rem;}
.hero-arrow{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--color-ink);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
  background:rgba(255,255,255,.3);
  border-color:rgba(255,255,255,.45);
  box-shadow:none;
}
.hero-arrow:hover{transform:scale(1.08);background:rgba(255,255,255,.48);}
.hero-arrow .icon{width:1.2em;height:1.2em;}
.hero-arrow--prev .icon{transform:rotate(180deg);}
.hero-dots{display:flex;gap:.55rem;}
.hero-dot{
  -webkit-appearance:none;appearance:none;
  width:9px;height:9px;min-width:9px;min-height:9px;flex:none;
  padding:0;border:0;margin:0;border-radius:50%;
  background:rgba(28,26,23,.22);
  transition:background var(--dur-fast), transform var(--dur-fast);
}
.hero-dot.is-active{background:var(--color-orange);transform:scale(1.25);}

/* =========================================================
   Genel bölüm dekorları
========================================================= */
.section--tinted{background:var(--bg-secondary);}
.section--ink{background:var(--color-ink);color:var(--bg-primary);}
.section--ink h2,.section--ink h3{color:var(--bg-primary);}
.section--ink .section-head p{color:var(--color-fog);}
.section-head-row{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.5rem);}
.section-head-row .section-head{margin-bottom:0;}

/* =========================================================
   Eğitimler bölümü (anasayfa desteği)
========================================================= */
.programs-intro{max-width:40rem;}

/* Eğitimler sayfası — tam liste (kompakt grid + çapa) */
.program-list-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;
}
.program-list-item{scroll-margin-top:7rem;}

/* Hazırlık grid'inde öne çıkan program (ör. Konservatuvar): ayrı,
   tam genişlikte ve belirgin bir alan olarak konumlanır. */
.program-list-item--featured{grid-column:1 / -1;}
.program-card--featured{
  border:1.5px solid var(--color-orange);
  position:relative;
  background:linear-gradient(120deg,var(--color-anthracite),var(--color-anthracite-deep));
  color:var(--bg-primary);
}
.program-card--featured::before{
  content:'Öne Çıkan Program';
  position:absolute;top:-.7rem;left:1.5rem;
  background:var(--color-orange);color:var(--color-paper);
  font-family:var(--font-accent);font-size:.68rem;letter-spacing:.08em;
  padding:.35rem .8rem;border-radius:var(--radius-pill);
}
html[lang="en"] .program-card--featured::before{content:'Featured Program';}
.program-card--featured .program-card__body h3,
.program-card--featured .program-card__body p{color:var(--bg-primary);}
.program-card--featured .program-card__summary{color:var(--color-fog);}
.program-card--featured .program-card__icon{color:var(--color-orange);}
.program-card--featured .program-card__foot{border-top-color:rgba(245,240,233,.18);}
.program-card--featured .program-card__format{color:var(--color-fog);}
/* Bu varyant koyu, yatay bir "öne çıkan" şeridi olarak tasarlandığı
   için fotoğraf medyasını kullanmaz — kart üstündeki foto yerine
   kendi karanlık/turuncu vurgusuyla öne çıkar. */
.program-card--featured .program-card__media{display:none;}
@media (min-width:640px){
  .program-card--featured{
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.6rem;
    padding:1.8rem 2rem;
  }
  .program-card--featured .program-card__body{padding:0;}
  .program-card--featured .program-card__foot{border-top:0;padding-top:0;margin-top:0;flex-direction:column;align-items:flex-end;gap:.6rem;}
}

/* =========================================================
   Kids bölüm/sayfa
========================================================= */
.kids-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:end;}
/* Fotoğraf top:-15px ile yukarı kaydırılmış (bkz. .kids-hero__visual);
   metin sütunu da aynı miktarda kaydırılmazsa align-items:end ile
   hesaplanan ortak alt hiza, fotoğrafın gerçek (kaydırılmış) görsel
   kenarıyla birebir örtüşmez. Aynı ofset burada da uygulanarak şeridin
   alt kenarı fotoğrafın bittiği noktayla piksel piksel hizalanır.
   (top kullanılıyor, margin değil: mobilde tek sütuna düşünce her ikisi
   de aynı miktarda yukarı kayıyor ve göreli hizaları korunuyor; üst/alt
   sayfa boşluğundaki net kayma page-intro--centered tarafında telafi
   ediliyor — aşağıya bakın.) */
.kids-hero__copy{position:relative;top:-15px;}
@media (max-width:860px){.kids-hero{grid-template-columns:1fr;gap:1.8rem;}}
.kids-hero__visual{
  position:relative;top:-15px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);
}
/* Fotoğrafın kendi üst/alt kenarındaki iz (vinyet/ton farkı) alttaki
   seam ile karışmasın diye üstten 15px, alttan 35px kırpılıyor. */
.kids-hero__visual img{width:100%;display:block;margin-top:-15px;margin-bottom:-35px;}

/* =========================================================
   Hazırlık bölümü — akademik/ciddi
========================================================= */
/* Tanışma dersi kutusuyla aynı görsel dilde (gradient + glow) ama daha
   açık/ferah bir ton — akademik alan sıcak kremden turuncuya geçiyor. */
.prep-panel{
  background:linear-gradient(160deg,#fdfaf6 0%,#fbf1e6 55%,#f8ead9 100%);
  color:var(--color-ink);
  border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3.2vw,2.6rem);
  position:relative;overflow:hidden;
  border:1px solid rgba(244,123,41,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-soft);
}
.prep-panel::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 55% at 96% 0%, rgba(244,123,41,.07), rgba(244,123,41,0) 70%);
}
.prep-panel::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 55% at 0% 100%, rgba(255,255,255,.3), rgba(255,255,255,0) 70%);
}
.prep-panel .section-head,.prep-panel .prep-timeline,.prep-panel>div:last-child,.prep-panel__head{position:relative;z-index:1;}
.prep-panel .section-head p{color:var(--color-anthracite);}
.prep-panel__head{margin-bottom:1.5rem;align-items:flex-start;}
.prep-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;position:relative;z-index:1;}
@media (max-width:900px){.prep-timeline{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.prep-timeline{grid-template-columns:1fr;}}
.prep-step{border-top:2px solid var(--color-orange);padding-top:1rem;}
.prep-step__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.prep-step__num{font-family:var(--font-accent);color:var(--color-orange-dark);font-size:.78rem;letter-spacing:.12em;}
.prep-step__icon{width:1.15em;height:1.15em;color:var(--color-orange);opacity:.7;flex:none;}
.prep-step h4{color:var(--color-ink);margin-block:.4rem .5rem;}
.prep-step p{color:var(--color-anthracite);font-size:.9rem;}

/* =========================================================
   Tanışma dersi + Ön Kayıt formu bölümü
========================================================= */
/* Form ve WhatsApp kutusu her ekran boyutunda alt alta durur; WhatsApp
   kutusu formla aynı genişlikte, kompakt bir "ek" gibi görünür. */
.registration-panel{
  display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,1.75rem);
  max-width:44rem;margin-inline:auto;
}
.registration-form-card{
  background:var(--color-paper);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.6rem);box-shadow:var(--shadow-soft);
}
.registration-aside{display:block;width:100%;}

/* =========================================================
   KVKK onayı ve aydınlatma metni katmanı
========================================================= */
.form-consent{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;
  align-items:start;margin-top:.2rem;
}
.form-consent__box{
  width:20px;height:20px;flex:none;margin-top:.15rem;
  accent-color:var(--color-orange);cursor:pointer;
}
/* Seçici bilerek iki sınıflı: components.css'teki `.form-field label`
   kuralı (büyük harf, dar punto, harf aralığı) bundan daha yüksek
   önceliğe sahipti ve onay metnini de büyük harfe çeviriyordu. */
.form-consent .form-consent__label{
  font-family:var(--font-body);
  font-size:.85rem;line-height:1.5;color:var(--color-anthracite);cursor:pointer;
  text-transform:none;letter-spacing:normal;font-weight:400;
}
.form-consent .form-field__error{grid-column:2;}
/* Metni açan bağlantı bir <button>; bağlantı gibi görünmesi için sıfırlanır. */
.form-consent__link{
  font:inherit;color:var(--color-orange-dark);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;
  padding:0;background:none;border:none;cursor:pointer;
}

.kvkk-modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,2.5rem);
  background:rgba(12,11,10,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease-premium), visibility 0s linear .25s;
}
.kvkk-modal.is-open{opacity:1;visibility:visible;transition:opacity .25s var(--ease-premium), visibility 0s linear 0s;}
.kvkk-modal__panel{
  position:relative;width:min(680px,100%);max-height:82vh;
  display:flex;flex-direction:column;
  background:var(--color-paper);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  transform:translateY(14px);transition:transform .25s var(--ease-premium);
}
.kvkk-modal.is-open .kvkk-modal__panel{transform:none;}
.kvkk-modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.3rem 1.5rem;border-bottom:1px solid var(--color-fog);flex:none;
}
.kvkk-modal__head h3{font-size:clamp(1.1rem,2.4vw,1.4rem);}
.kvkk-modal__close{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(28,26,23,.06);color:var(--color-anthracite);
  transition:background var(--dur-fast),color var(--dur-fast);
}
.kvkk-modal__close .icon{width:1.15em;height:1.15em;}
.kvkk-modal__body{
  padding:1.2rem 1.5rem 1.6rem;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  font-size:.9rem;line-height:1.65;color:var(--color-anthracite);
}
.kvkk-modal__body h4{
  font-size:.95rem;margin-top:1.2rem;margin-bottom:.35rem;color:var(--color-ink);
}
.kvkk-modal__body h4:first-child{margin-top:0;}
.kvkk-modal__body p{margin-bottom:.7rem;max-width:none;}
.kvkk-modal__body ul{margin:0 0 .7rem;padding-left:1.1rem;list-style:disc;}
.kvkk-modal__body li{margin-bottom:.3rem;}
.kvkk-modal__body a{color:var(--color-orange-dark);text-decoration:underline;}

@media (hover:hover){
  .form-consent__link:hover{color:var(--color-orange);}
  .kvkk-modal__close:hover{background:var(--color-orange);color:var(--color-paper);}
}

/* Tanışma Dersi / WhatsApp kutusu: Liquid Glass estetiği — yarı saydam,
   buzlu cam (backdrop-blur) bir yüzey üzerinde WhatsApp yeşili tonları
   ve hafif ışık hüzmeleri (glow). */
.whatsapp-callout{
  position:relative;overflow:hidden;
  /* Arka plan BİLEREK DÜZ RENK (gradyan değil), opak ve çerçevesiz.
     Önce diyagonal bir gradyan vardı (koyu -> parlak yeşil); ama bu,
     köşeden köşeye farklı taban parlaklığı yarattığı için ÜSTÜNE konan
     birebir aynı ışık efektleri bile köşeden köşeye farklı GÖRÜNÜYORDU
     (aynı el fenerinin karanlık duvarda belirgin, aydınlık duvarda güçsüz
     görünmesi gibi — fiziksel bir zorunluluk, ışığın kendisiyle ilgili
     değil). Bunu telafi etmek için önce köşeye göre farklı ışık opaklığı,
     sonra ışığın altına "vignette" katmanı denenmişti; ikisi de ek
     karmaşıklık gerektiriyordu. Zemin düz renk olunca sorun kökünden
     ortadan kalkıyor: dört köşe de aynı tabanda olduğu için AYNI ışık
     opaklığı otomatik olarak dört köşede de AYNI görünüyor.
     Renk, gradyanın orta durağıyla aynı (#1f3d2c) — koyu, WhatsApp
     temasına uygun bir orman yeşili; backdrop-filter/border kaldırılması
     ve önceki beyazlık düzeltmesiyle ilgili not hâlâ geçerli: bunlar
     yuvarlak köşenin dışında kalan kare alanlarda açık renkli lekeler
     bırakıyordu, bu yüzden backdrop-filter yok, çerçeve yok. */
  background-color:#1f3d2c;
  background-image:url("/assets/img/whatsapp-pattern.svg");
  background-size:180px 180px;
  background-repeat:repeat;
  background-position:center top;
  color:var(--bg-primary);
  border-radius:var(--radius-lg);
  /* Üst boşluk alt boşluktan daha az: kutu üstten hafifçe sıkıştırılarak
     hem toplam yükseklik azaltılır hem de içerik (ikon+başlık+metin+buton)
     kutunun ortasına daha yakın oturur. */
  padding:1.3rem 1.8rem 1.9rem;
  display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;
  text-align:center;
  box-shadow:var(--shadow-lift);
}
/* Dört köşe TEK ortak kuraldan gelir; boyut, renk, opaklık, blur ve konum
   TAMAMEN simetrik. Zemin artık düz renk olduğu için bu basit/uniform
   yaklaşım dört köşede de GERÇEKTEN aynı görünür — ek dengeleme gerekmez. */
.whatsapp-callout__glow{
  position:absolute;width:160px;height:160px;border-radius:50%;
  background:rgba(37,211,102,.18);filter:blur(38px);pointer-events:none;
}
.whatsapp-callout__glow--a{top:-60px;right:-50px;}
.whatsapp-callout__glow--b{bottom:-60px;left:-50px;}
.whatsapp-callout__glow--c{top:-60px;left:-50px;}
.whatsapp-callout__glow--d{bottom:-60px;right:-50px;}
.whatsapp-callout__head{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.whatsapp-callout__logo{width:2.3em;height:2.3em;color:#25D366;flex:none;}
.whatsapp-callout__heading{display:flex;flex-direction:column;gap:.55rem;}
.whatsapp-callout h3{
  color:var(--bg-primary);position:relative;z-index:1;
  font-size:clamp(1.3rem,2vw,1.75rem);
  text-transform:uppercase;letter-spacing:.02em;
}
.whatsapp-callout__subtitle{
  font-family:var(--font-accent);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:#5fe08a;position:relative;z-index:1;
}
.whatsapp-callout p{color:var(--color-fog);font-size:.92rem;position:relative;z-index:1;max-width:34ch;}
.whatsapp-callout .btn--whatsapp{position:relative;z-index:1;margin-top:.4rem;}

/* Sürekli ama göz yormayan pulse/glow — rengi --pulse-rgb ile ayarlanır
   (varsayılan WhatsApp yeşili), Ön Kayıt gibi başka öğelerde de kullanılır. */
.btn--pulse{position:relative;--pulse-rgb:37,211,102;}
.btn--pulse::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(var(--pulse-rgb),.55);
  animation:btn-pulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes btn-pulse{
  0%{box-shadow:0 0 0 0 rgba(var(--pulse-rgb),.45);}
  70%{box-shadow:0 0 0 14px rgba(var(--pulse-rgb),0);}
  100%{box-shadow:0 0 0 0 rgba(var(--pulse-rgb),0);}
}
@media (prefers-reduced-motion: reduce){
  .btn--pulse::after{animation:none;}
}

/* =========================================================
   Kurumsal / founder
========================================================= */
.founder-block{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
@media (max-width:900px){.founder-block{grid-template-columns:1fr;}}
.founder-block__visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);}
.founder-block__visual img{width:100%;}
.founder-block__quote{
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.2rem,2vw,1.6rem);
  color:var(--color-ink);border-left:3px solid var(--color-orange);padding-left:1.3rem;margin-block:1.4rem;
}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media (max-width:860px){.values-grid{grid-template-columns:1fr;}}
.value-card{background:var(--color-paper);border-radius:var(--radius-md);padding:1.6rem;box-shadow:var(--shadow-soft);}
.value-card .icon{width:1.7em;height:1.7em;color:var(--color-orange);margin-bottom:.8rem;}
.value-card h3{font-size:clamp(1.05rem,1.6vw,1.3rem);}
/* Kurumsal sayfasında dört kart var (üçü mevcut + sertifika kartı);
   3 sütunda son kart yalıtılmış kalmasın diye burada 2x2 düzene geçilir.
   Kids sayfasındaki (üç kartlı) values-grid kullanımı etkilenmez. */
@media (min-width:861px){
  body[data-page="kurumsal"] .values-grid{grid-template-columns:repeat(2,1fr);}
}

/* Kurucu kimliği — klasik bir "kurucu tanıtımı" değil, sahne kimliğini
   (Peçeli Adam) hissettiren, arka planda darbuka fotoğrafı bulunan bir
   "sanatçı imzası" kartı. Kutu, fotoğrafın kendi oranına (7:5) yakın
   tutulur; böylece object-fit:cover neredeyse hiç kırpma yapmaz.
   Kartın etrafına Drum Show bölümündeki ile BİREBİR aynı ambiyans
   ışıması (stage glow) eklenir. Kartın kendisi opak kalır (fotoğrafın
   kendi opaklığı yeterli); "cam" denemesi kaldırıldı.
   Alttaki stage glow--b, çerçevenin altına taşıp yumuşak bir ışıma
   bırakacak şekilde tasarlandı (bkz. video-showcase'teki aynı çözüm);
   ama bu taşma miktarı, bölümün kendi alt boşluğundan fazla olursa
   ışımanın bulanık kuyruğu hemen altındaki section-seam'in düz
   rengiyle keskin biçimde kesişip "çakıp kaybolan" bozuk bir görüntü
   oluşturuyordu. Ekstra alt boşlukla (margin-bottom) ışığa tam
   sönümlenecek kadar nötr alan bırakılıyor. */
.founder-signature-stage{position:relative;width:100%;max-width:min(720px,100%);margin-inline:auto;margin-bottom:clamp(2rem,7vw,4.5rem);}
.founder-signature-stage__glow{position:absolute;border-radius:50%;filter:blur(44px);pointer-events:none;z-index:0;}
.founder-signature-stage__glow--a{width:260px;height:260px;background:rgba(244,123,41,.5);top:-110px;left:4%;}
.founder-signature-stage__glow--b{width:220px;height:220px;background:rgba(244,123,41,.4);bottom:-95px;right:6%;}
.founder-signature-stage__glow--c{width:190px;height:190px;background:rgba(37,211,102,.28);top:32%;right:calc(-1 * var(--container-pad) + 6px);}
.founder-signature-stage__glow--d{width:190px;height:190px;background:rgba(45,175,190,.28);top:30%;left:calc(-1 * var(--container-pad) + 6px);}
.founder-signature-stage__glow--e{width:165px;height:165px;background:rgba(64,140,230,.24);top:60%;left:calc(-1 * var(--container-pad) + 12px);}
@media (max-width:640px){
  .founder-signature-stage__glow{filter:blur(30px);}
  .founder-signature-stage__glow--a{top:-60px;width:170px;height:170px;}
  .founder-signature-stage__glow--b{bottom:-50px;width:150px;height:150px;}
  .founder-signature-stage__glow--c{width:100px;height:100px;background:rgba(37,211,102,.4);}
  .founder-signature-stage__glow--d{width:100px;height:100px;background:rgba(45,175,190,.4);}
  .founder-signature-stage__glow--e{width:85px;height:85px;background:rgba(64,140,230,.36);}
}
.founder-signature{
  position:relative;z-index:1;overflow:hidden;
  width:100%;aspect-ratio:7/5;
  border-radius:2.5rem;
  background:var(--color-ink);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  box-shadow:var(--shadow-lift);
}
.founder-signature__image{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  opacity:.55;
}
.founder-signature__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(20,18,16,.35) 0%, rgba(20,18,16,.78) 100%);
}
.founder-signature__glow{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none;z-index:2;}
.founder-signature__glow--a{width:220px;height:220px;background:rgba(244,123,41,.28);top:-70px;left:-60px;}
.founder-signature__glow--b{width:180px;height:180px;background:rgba(244,123,41,.16);bottom:-60px;right:-40px;}
.founder-signature__body{
  position:relative;z-index:3;max-width:26rem;margin-inline:auto;
  padding:1rem clamp(1.2rem,4vw,2rem);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
}
.founder-signature__eyebrow{
  font-family:var(--font-accent);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-orange);
}
.founder-signature__body h2{color:var(--bg-primary);margin-top:.2rem;font-size:clamp(1.4rem,4vw,2.1rem);line-height:1.1;}
.founder-signature__role{
  font-family:var(--font-accent);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(245,240,233,.65);margin-top:.3rem;
}
.founder-signature__alias{
  font-family:var(--font-display);font-style:italic;font-size:.95rem;
  color:var(--color-orange);margin-top:.3rem;
}
.founder-signature__alias strong{font-weight:700;}
.founder-signature__text{
  color:var(--color-fog);font-size:clamp(.78rem,1.6vw,.9rem);line-height:1.5;margin-top:.5rem;
}
.founder-signature__linkedin{
  margin-top:.6rem;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:rgba(245,240,233,.12);color:var(--bg-primary);
  transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);
}
.founder-signature__linkedin .icon{width:1em;height:1em;}
.founder-signature__linkedin:hover{background:var(--color-orange);color:var(--color-paper);transform:translateY(-2px);}

/* Sahne performansı — otomatik oynatılan tanıtım videosu */
/* Alttaki video-showcase__glow--b, çerçevenin altına taşıp yumuşak bir
   ışıma bırakacak şekilde tasarlandı; ama bu taşma miktarı (95px), bölümün
   kendi alt boşluğundan fazla olduğunda ışımanın bulanık kuyruğu hemen
   altındaki section-seam'in kendi geçişiyle çakışıp lekeli/bozuk bir
   görüntü oluşturuyordu. Ekstra alt boşlukla ışımaya tam sönümlenecek
   kadar nötr alan bırakılıyor. */
.video-showcase{display:flex;justify-content:center;margin-top:2.5rem;margin-bottom:clamp(2rem,7vw,4.5rem);}
.video-showcase__stage{position:relative;width:100%;max-width:min(960px,100%);}
.video-showcase__glow{position:absolute;border-radius:50%;filter:blur(44px);opacity:1;pointer-events:none;z-index:0;}
.video-showcase__glow--a{width:260px;height:260px;background:rgba(244,123,41,.5);top:-110px;left:4%;}
.video-showcase__glow--b{width:220px;height:220px;background:rgba(244,123,41,.4);bottom:-95px;right:6%;}
.video-showcase__glow--c{width:190px;height:190px;background:rgba(37,211,102,.28);top:32%;right:calc(-1 * var(--container-pad) + 6px);}
.video-showcase__glow--d{width:190px;height:190px;background:rgba(45,175,190,.28);top:30%;left:calc(-1 * var(--container-pad) + 6px);}
.video-showcase__glow--e{width:165px;height:165px;background:rgba(64,140,230,.24);top:60%;left:calc(-1 * var(--container-pad) + 12px);}
@media (max-width:640px){
  .video-showcase__glow{filter:blur(30px);}
  .video-showcase__glow--a{top:-60px;width:170px;height:170px;}
  .video-showcase__glow--b{bottom:-50px;width:150px;height:150px;}
  .video-showcase__glow--c{width:100px;height:100px;background:rgba(37,211,102,.4);}
  .video-showcase__glow--d{width:100px;height:100px;background:rgba(45,175,190,.4);}
  .video-showcase__glow--e{width:85px;height:85px;background:rgba(64,140,230,.36);}
}
.video-showcase__frame{
  position:relative;z-index:1;
  width:100%;
  aspect-ratio:1920/800;
  overflow:hidden;
  border-radius:2.5rem;
  box-shadow:var(--shadow-lift);
  background:var(--color-ink);
}
.video-showcase__frame::after{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,0,0,.22), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(0,0,0,.22), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(0,0,0,.22), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,.22), transparent 32%);
}
.video-showcase__player{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 54%;
  display:block;
}

/* =========================================================
   İletişim sayfası
========================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:stretch;}
.contact-grid>*{min-width:0;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{background:var(--color-paper);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-soft);height:100%;}
.contact-map-wrap{height:100%;min-height:320px;}
.contact-map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);border:0;width:100%;height:100%;min-height:320px;display:block;}
@media (max-width:900px){.contact-map-wrap{min-height:340px;}}
.contact-detail{display:flex;gap:1rem;padding-block:1rem;border-bottom:1px solid var(--color-fog);}
.contact-detail>div{min-width:0;}
.contact-detail p,.contact-detail a{overflow-wrap:break-word;word-break:break-word;}
.contact-detail:last-child{border-bottom:0;}
.contact-detail .icon{width:1.4em;height:1.4em;color:var(--color-orange-dark);flex:none;margin-top:.15rem;}
.contact-detail h4{margin-bottom:.2rem;}

/* =========================================================
   Ortak: sayfa üstü küçük hero (iç sayfalar için)
========================================================= */
.page-intro{padding-block:clamp(2.5rem,6vw,4.5rem) 1rem;position:relative;overflow:hidden;}
.page-intro__eyebrow{margin-bottom:1rem;}
.page-intro h1{max-width:38rem;}
.page-intro p{margin-top:1rem;font-size:1.05rem;color:var(--color-anthracite);max-width:48rem;}

/* Öne çıkanlar şeridi eklenen sayfalarda (Eğitimler, Kids, Hazırlık),
   üst/alt boşluk dengeli olsun ve içerik bölümün kendi yüksekliği
   içinde dikey ortalansın diye bu değiştirici kullanılır. Yalnızca bu
   üç sayfada; diğer page-intro kullanan sayfaları (İletişim, Kurumsal,
   Ön Kayıt) etkilemez. */
.page-intro--centered{
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(2.5rem,6vw,4.5rem);
  min-height:clamp(26rem,64vh,42rem);
}
@media (max-width:640px){
  .page-intro--centered{min-height:clamp(22rem,72vh,34rem);padding-block:clamp(2rem,10vw,3rem);}
}
/* Kids sayfasında .kids-hero__copy ve .kids-hero__visual, fotoğrafla
   şeridin alt kenarını hizalamak için top:-15px ile yukarı kaydırılıyor
   (bkz. .kids-hero). Bu salt görsel bir kaydırma olduğundan (kutunun
   normal akıştaki yerini değiştirmez), page-intro'nun kendi sabit üst/alt
   sınırlarına göre üst boşluğu 15px azaltıp alt boşluğu 15px artırıyordu.
   Üst dolguyu 15px artırıp alt dolguyu 15px azaltarak bunu tam olarak
   geri dengeleniyoruz — sonuç: üst ve alt boşluk yeniden birebir eşit. */
body[data-page="kids"] .page-intro--centered{
  padding-top:calc(clamp(2.5rem,6vw,4.5rem) + 15px);
  padding-bottom:calc(clamp(2.5rem,6vw,4.5rem) - 15px);
}
@media (max-width:640px){
  body[data-page="kids"] .page-intro--centered{
    padding-top:calc(clamp(2rem,10vw,3rem) + 15px);
    padding-bottom:calc(clamp(2rem,10vw,3rem) - 15px);
  }
}
/* Paragraf ile şerit arasındaki boşuk, şeridin altındaki (bölümün kendi
   kapanışına kadar olan) boşlukla BİREBİR aynı clamp() ifadesini
   kullanır — bu sayede şerit, paragraf ile bölüm sonu arasında her
   ekran genişliğinde matematiksel olarak tam ortada durur. */
.page-intro--centered .feature-strip:not(.feature-strip--compact){margin-top:clamp(2.5rem,6vw,4.5rem);}
@media (max-width:640px){
  .page-intro--centered .feature-strip:not(.feature-strip--compact){margin-top:clamp(2rem,10vw,3rem);}
}

/* Hazırlık ve Eğitimler sayfaları — dikey mobil görünümde tüm giriş
   içeriği (eyebrow, başlık, paragraf, şerit) yatayda tam merkezlenir. */
@media (max-width:640px){
  body[data-page="hazirlik"] .page-intro .container,
  body[data-page="egitimler"] .page-intro .container{text-align:center;}
  body[data-page="hazirlik"] .page-intro h1,
  body[data-page="hazirlik"] .page-intro p,
  body[data-page="egitimler"] .page-intro h1,
  body[data-page="egitimler"] .page-intro p{margin-inline:auto;}
}

/* Kids sayfası — hero fotoğrafla yan yana düzen tek sütuna düştüğü anda
   (kendi kırılım noktası: 860px) metin bloğu da yatayda merkezlenir. */
@media (max-width:860px){
  body[data-page="kids"] .kids-hero__copy{text-align:center;}
  body[data-page="kids"] .kids-hero__copy h1,
  body[data-page="kids"] .kids-hero__copy p,
  body[data-page="kids"] .kids-hero__copy > div{margin-inline:auto;}
}

/* Ana sayfadaki Eğitimler/Kids/Hazırlık bölümleri — kendi sayfalarında
   yapılan mobil merkezleme, tutarlılık için burada da uygulanır.
   Yalnızca bu üç bölüme (#egitimler/#kids/#hazirlik) özel; diğer
   section-head-row kullanan bölümler (İletişim, Kurumsal vb.)
   etkilenmez. */
@media (max-width:640px){
  #egitimler .section-head-row,
  #kids .section-head-row,
  #hazirlik .section-head-row{flex-direction:column;align-items:center;text-align:center;}
  #egitimler .section-head,
  #kids .section-head,
  #hazirlik .section-head{text-align:center;}
}
/* Şeridin altında hemen program kartları/adımlar geldiği için (dedicated
   sayfalardan farklı olarak burada bölüm bitmiyor, başka bir blok devam
   ediyor), üstteki boşlukla (section-head-row'un kendi margin-bottom'u
   ile çakışıp aynı değere sabitlenen boşluk) eşleşsin diye şeridin
   altına da aynı standart boşluk ekleniyor — aksi halde kartlar şeride
   neredeyse yapışık duruyordu. */
#egitimler .feature-strip,
#kids .feature-strip,
#hazirlik .feature-strip{margin-bottom:clamp(2rem,4vw,3.5rem);}
/* .prep-panel__head kendi margin-bottom'unu (1.5rem) .section-head-row'un
   paylaşılan değerinin üstüne yazdığı için Hazırlık'ta üstteki boşluk
   daha dar kalıyordu — şeridin üst boşluğunu da aynı standart değere
   sabitleyip üst/alt boşluğu eşitliyoruz. */
#hazirlik .feature-strip{margin-top:clamp(2rem,4vw,3.5rem);}

/* Eğitimler ve Hazırlık (dedicated sayfalar) — giriş bölümü (şerit dahil)
   ile hemen altındaki kart/adım bölümü arasındaki boşluk, sitenin genel
   bölüm-arası standart boşluğuna (.section{padding-block}) göre gereğinden
   fazla açık duruyordu. Yalnızca bu iki sayfada ve yalnızca page-intro'dan
   hemen sonra gelen bölümün ÜST dolgusunu azaltıyoruz; sayfanın geri
   kalanındaki bölüm aralıkları (ör. Ders Formatı öncesi) değişmiyor,
   Kids sayfası da etkilenmiyor. */
body[data-page="egitimler"] .page-intro + .section,
body[data-page="hazirlik"] .page-intro + .section{
  padding-top:clamp(2rem,5vw,4rem);
}

/* Basit çizgi ayraç */
.divider-note{
  display:flex;align-items:center;gap:.8rem;margin-block:2.5rem;color:var(--color-orange-dark);
}
.divider-note::before,.divider-note::after{content:'';flex:1;height:3px;background:var(--color-fog);border-radius:3px;}
.divider-note .icon{width:1.2em;height:1.2em;}
/* Bölümler arasında bağımsız ayırıcı olarak kullanıldığında (section'ların
   kendi padding'i zaten boşluk sağladığı için) daha az dikey boşluk. */
.divider-note--section{margin-block:0;}

/* İki bölüm arasındaki renk geçişini yumuşatan, üzerinde dalgalı bir nota
   çizgisi (mini "sayfa" motifi) taşıyan ayırıcı. Hem yatay hem dikey
   ekranda aynı şekilde akıcı ölçeklenir. Notasyon, keskin bir çizim gibi
   değil zemine karışan bir doku gibi dursun diye hafifçe bulanıklaştırılır
   (bkz. .section-seam__staff / __note).

   Renk geçişi DOĞRUDAN gradyanla yapılır.
   Önceki sürümde geçiş, düz renkli bir ::after katmanının blur(20px) ile
   bulanıklaştırılıp mask-image ile soldurulmasıyla üretiliyordu. Bu kurgu
   tarayıcıya bağımlıydı: Chromium'da beklendiği gibi çalışırken iOS
   Safari'de geçiş katmanı hiç görünmüyor, dikiş baştan sona --seam-a
   kalıyor ve alt sınırda bir sonraki bölümle arasında ekranı boydan boya
   kesen keskin bir çizgi oluşuyordu.
   linear-gradient bunu yapısal olarak imkânsız kılar: 0%'da tam --seam-a,
   100%'de tam --seam-b üretir; blur/mask/kırpma sırası gibi motor
   farklarına duyarlı değildir. Uçlardaki düz bölümler (%14) eski
   bulanık geçişin yumuşak hissini korur. Ayrıca her dikişteki 20px'lik
   blur kalktığı için mobilde çizim maliyeti de düşer. */
.section-seam{
  position:relative;
  overflow:hidden;
  height:clamp(64px,10vw,112px);
  background:linear-gradient(to bottom,
    var(--seam-a) 0%,
    var(--seam-a) 14%,
    var(--seam-b) 86%,
    var(--seam-b) 100%);
}
/* Porte çizgilerindeki blur(.5px) KALDIRILDI. O bulanıklık, notasyonun
   eski "sisli" geçiş zeminine karışması için konmuştu; geçiş artık net bir
   gradyan olduğu için tek işlevi çizgileri yumuşatmak kalmıştı. Çizgiler
   yalnızca 1.4px kalınlığında ve yüksek yoğunluklu telefon ekranlarında
   .5px, bir tam aygıt pikseline denk geldiğinden gözle görülür bir netlik
   kaybı yaratıyordu. Opaklık zaten düşük (.38) olduğu için blur olmadan da
   sert değil, sadece net görünüyorlar. */
.section-seam__staff{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
/* opacity .32 -> .38: dikişin alt yarısı artık gerçekten --seam-b'ye
   koyulaştığı için (gradyan düzeltmesinden önce zemin baştan sona açık
   kalıyordu) turuncu çizgilerin oradaki parlaklık farkı ~%13 azalmıştı.
   .38, koyu yarıdaki kontrastı eski seviyesine geri getirir. */
/* vector-effect:non-scaling-stroke ZORUNLU.
   SVG'nin viewBox'ı 0 0 1200 100 ve preserveAspectRatio="none" olduğu için
   kutu orantısız gerilir; çizgi kalınlığı da bu ölçekle birlikte ezilir.
   Dikiş yüksekliği masaüstünde 112px (dikey ölçek 1.12 -> çizgi ~1.57px)
   ama mobilde 64px'e iner (ölçek 0.64 -> çizgi ~0.90px). Yani mobilde
   çizgiler BİR CSS PİKSELİNİN ALTINA düşüyordu; bu kalınlıkta hiçbir
   tarayıcı net çizemez, kenar yumuşatma çizgiyi soluk bir lekeye yayar.
   Bu yüzden sorun yalnızca telefonda görünüyordu.
   non-scaling-stroke, kalınlığı viewBox ölçeğinden bağımsız kılar: çizgi
   her ekranda tam 1.4px olarak çizilir. */
.section-seam__staff path{
  fill:none;stroke:var(--color-orange);stroke-width:1.4;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:.38;
}
/* Notalarda da aynı gerekçeyle blur(.3px) kaldırıldı; çizgilerle
   nota simgeleri arasında keskinlik farkı kalmasın. */
.section-seam__note{position:absolute;color:var(--color-orange);pointer-events:none;z-index:1;}

/* =========================================================
   Öne çıkanlar şeridi (feature-strip) — Eğitimler, Kids ve
   Hazırlık bölümlerinin/sayfalarının kendine özgü ama birbiriyle
   tutarlı bir dilde öne çıkan 4 vurguyu sıraladığı ortak bileşen.
   Temel yapı (ikon üstte, başlık altta, ince ayraçlar) sabit;
   her bölüm --brand/--kids/--prep varyantlarından biriyle kendi
   karakterine bürünür.
========================================================= */
.feature-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:2.6rem;
}
.feature-strip__item{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  padding:0 1.5rem;
  border-left:1px solid rgba(28,26,23,.12);
}
.feature-strip__item:first-child{border-left:none;}
.feature-strip__icon-badge{display:grid;place-items:center;flex:none;}
.feature-strip__icon{width:40px;height:40px;color:var(--color-orange-dark);}
.feature-strip__item h3{font-size:1.02rem;line-height:1.3;margin:0;text-align:center;}
@media (max-width:860px){
  .feature-strip{grid-template-columns:repeat(2,1fr);row-gap:1.6rem;}
  .feature-strip__item:nth-child(2n){border-left:1px solid rgba(28,26,23,.12);}
  .feature-strip__item:nth-child(2n+1){border-left:none;}
  .feature-strip__item:nth-child(n+3){padding-top:1.4rem;border-top:1px solid rgba(28,26,23,.12);}
}
@media (max-width:540px){
  .feature-strip{grid-template-columns:1fr;row-gap:1.1rem;margin-top:1.8rem;}
  .feature-strip__item{border-left:none !important;border-top:1px solid rgba(28,26,23,.12);padding-top:1.1rem;}
  .feature-strip__item:first-child{border-top:none;padding-top:0;}
}

/* --compact: Kids sayfasındaki gibi, tam genişlikli değil de dar bir
   sütun (kids-hero__copy) içinde yaşayan şeritler için — dar sütunda
   4 sütuna sıkışmasın diye 2 sütuna geçiş çok daha erken tetiklenir. */
.feature-strip--compact{margin-top:2.6rem;}
@media (max-width:1300px){
  .feature-strip--compact{grid-template-columns:repeat(2,1fr);row-gap:1.3rem;}
}

/* --brand: Eğitimler — referans görseldeki gibi sade, ince ayraçlı,
   çıplak ikon (rozet zemini yok). Sitenin ana/nötr dili. */
.feature-strip--brand .feature-strip__icon{color:var(--color-orange-dark);}

/* --kids: yuvarlak, renkli rozet zeminleri — kids-blob paletiyle aynı
   pastel tonlar; ayraç çizgisi yerine kart havası. Başlıklar zaten
   .kids-scope üzerinden Baloo 2'ye geçiyor. */
.feature-strip--kids{column-gap:1.5rem;}
.feature-strip--kids .feature-strip__item{border-left:none;padding:0;}
.feature-strip--kids .feature-strip__icon-badge{
  width:62px;height:62px;border-radius:50%;
}
.feature-strip--kids .feature-strip__icon{width:26px;height:26px;color:var(--color-orange-dark);}
.feature-strip--kids .feature-strip__item:nth-child(4n+1) .feature-strip__icon-badge{background:#ffe1c2;}
.feature-strip--kids .feature-strip__item:nth-child(4n+2) .feature-strip__icon-badge{background:#bfe3e0;}
.feature-strip--kids .feature-strip__item:nth-child(4n+3) .feature-strip__icon-badge{background:#f6c9db;}
.feature-strip--kids .feature-strip__item:nth-child(4n+4) .feature-strip__icon-badge{background:#ffd9a8;}
/* Kids kartlarında hiçbir ayraç çizgisi istenmiyor — genel şeridin
   dar ekranlarda eklediği border-top/border-left kurallarını burada
   tüm kırılım noktalarında geçersiz kılıyoruz (aksi halde satırlar
   arasında "gizli" ince bir çizgi kalıyordu). */
.feature-strip--kids .feature-strip__item{border-top:none !important;}
@media (max-width:860px){.feature-strip--kids .feature-strip__item{border-left:none !important;padding-top:0 !important;}}
@media (max-width:540px){.feature-strip--kids .feature-strip__item{padding-top:0 !important;}}

/* --prep: Hazırlık — daha yapılandırılmış/akademik: kare, çerçeveli,
   kesikli ayraçlı rozetler; prep-timeline ile aynı ciddiyette ama
   ondan görsel olarak ayrışan (kart değil şerit) bir sunum. */
.feature-strip--prep .feature-strip__item{border-left-style:dashed;border-left-color:rgba(217,99,26,.35);}
.feature-strip--prep .feature-strip__item:first-child{border-left:none;}
.feature-strip--prep .feature-strip__icon-badge{
  width:54px;height:54px;border-radius:var(--radius-sm);
  border:1.5px solid var(--color-orange);
  background:var(--color-orange-soft);
}
.feature-strip--prep .feature-strip__icon{width:24px;height:24px;color:var(--color-orange-dark);}
@media (max-width:860px){.feature-strip--prep .feature-strip__item:nth-child(2n){border-left-style:dashed;border-left-color:rgba(217,99,26,.35);}}

/* Designed & Developed by Alihan Balkan | +90 538 073 87 16 */