/* Zümra Akademi vitrin klonu — tasarım tokenları.
   Kaynak sitenin hesaplanmış stillerinden (notlar/SPEC.md). */

/* Marka fontları: dosyalar henüz yok (lisanslılar yapımcıda). Dosya gelirse
   fonts/ klasörüne atınca otomatik devreye girer; o zamana dek canlı siteyle
   birebir aynı fallback (system-ui) render edilir. */
@font-face {
  font-family: 'Rosmatika';
  /* Markadan gelen dosya tek Regular kesim (DEMO etiketli TTF). 400-800
     aralığına bağlıyoruz: kalın kesim gelene dek extrabold'lar tarayıcının
     faux-bold'uyla çizilir — kaynak sitede de durum bu. Lisans dosyası
     netleşince woff2'ye çevirip bu bloğa kesim başına satır eklenecek. */
  src: url('fonts/Rosmatika.ttf') format('truetype');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  /* Markanın ilettiği ikinci font Axiforma değil Neubau Pro çıktı; gövde
     rolü için kayıtlı duruyor. Kaynak site her şeyi Rosmatika ile dizdiği
     için şimdilik hiçbir kural kullanmıyor — bilinçli. */
  font-family: 'Neubau Pro';
  src: url('fonts/NeubauPro.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --za-purple: #533089;        /* ana mor */
  --za-purple-deep: #4b2a7a;   /* hero kart moru */
  --za-purple-dark: #5c3598;
  --za-lilac: #cb6ce6;
  --za-lilac-soft: #c77dff;
  --za-sky: #0ea5e9;
  --za-paper: #f6f4fa;
  --za-ink: #2b2140;
}

html {
  /* Bilinçli karar: kaynak site de 'Rosmatika' DEKLARE eder ama font
     dosyaları canlıda 404 — onaylanan görünüm, yedek sistem sans'ının
     görünümüdür. Gerçek Rosmatika'yı yükleyince site "aslına" değil
     "niyetine" benziyordu; müşteri görüneni istiyor. Marka fontları
     fonts/ altında hazır; markadan "gerçekten Rosmatika'ya geçin" kararı
     çıkarsa bu satıra 'Rosmatika', eklemek yeterli. */
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  scroll-behavior: smooth;
}

/* Kâğıt dokulu açık bölümler — orijinal kural: dokunun üstünde %72 beyaz
   örtü (ipeksi görünümün sırrı), üst köşeler 24px yuvarlak, derin gölge. */
.paper-section {
  background-image: url('assets/textured-background1-HBBY58P6.jpg');
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  box-shadow: 0 30px 70px #0000002e;
  overflow: hidden;
}
.paper-section::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: #ffffffb8;
}
.paper-section > * { position: relative; z-index: 1; }

/* SABİT ARKA PLAN KATMANI — mor zemin + grid çizgileri + hover canvas'ı.
   Tüm sayfa boyunca viewport'a sabit durur; kâğıt bölümler üzerinden kayar.
   (Kaynak sitedeki mimari: tek fixed katman + şeffaf mor bölümler.) */
.za-fixed-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--za-purple);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 90px 90px;
}
.za-fixed-bg canvas { position: absolute; inset: 0; }

/* İçerik sabit katmanın üstünde akar */
main { position: relative; z-index: 1; }

/* Hero'da arka plana saçılmış alfabe glifleri */
.glyph {
  position: absolute;
  color: rgba(255, 255, 255, 0.10);
  font-weight: 700;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

/* Süreç zaman çizelgesi numarası */
.step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: #fff;
  color: var(--za-purple);
  font-weight: 800;
  font-size: 1.5rem;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12);
  flex: none;
}

/* SSS akordeonu: details işaretleyicisini gizle */
.faq details > summary { list-style: none; cursor: pointer; }
.faq details > summary::-webkit-details-marker { display: none; }
.faq details .faq-icon::before { content: '+'; }
.faq details[open] .faq-icon::before { content: '−'; }


/* ═══════════ ANİMASYON KATMANI (canlı siteyle birebir değerler) ═══════════ */
:root {
  --za-dur: .9s;
  --za-ease: cubic-bezier(.22, 1, .36, 1);
  --za-pink: #c86bf0;
}

/* — Hero giriş kademesi — */
@keyframes za-hero-in { to { opacity: 1; transform: translateY(0) translate(0) scale(1); } }
@keyframes za-hero-stagger { to { opacity: 1; transform: translateY(0); } }
.za-hero-card {
  opacity: 0;
  transform: translateY(18px) translate(-10px) scale(.985);
  transform-origin: 0;
  animation: .9s var(--za-ease) .12s forwards za-hero-in;
}
.za-hero-eyebrow { opacity: 0; transform: translateY(8px);  animation: .72s var(--za-ease) .22s forwards za-hero-stagger; }
.za-hero-title   { opacity: 0; transform: translateY(10px); animation: .76s var(--za-ease) .32s forwards za-hero-stagger; }
.za-hero-desc    { opacity: 0; transform: translateY(10px); animation: .76s var(--za-ease) .43s forwards za-hero-stagger; }
.za-hero-btn     { opacity: 0; transform: translateY(10px); animation: .76s var(--za-ease) .52s forwards za-hero-stagger; }

/* — Süzülen alfabe harfleri — */
@keyframes za-letter-float {
  0%   { transform: translateZ(0) rotate(var(--rot, 0deg)); }
  50%  { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot, 0deg)); }
  100% { transform: translateZ(0) rotate(var(--rot, 0deg)); }
}
@keyframes za-letter-fade { 0% { opacity: .55; } 50% { opacity: .92; } 100% { opacity: .55; } }
.za-float-letter {
  position: absolute;
  color: rgba(255, 255, 255, .9);
  letter-spacing: .06em;
  font-weight: 600;
  text-shadow: 0 0 10px #cb6ce638, 0 0 22px #cb6ce624, 0 0 36px #ffffff0d;
  will-change: transform, opacity;
  user-select: none;
  pointer-events: none;
  animation:
    za-letter-float var(--dur, 10s) ease-in-out var(--delay, 0s) infinite,
    za-letter-fade calc(var(--dur, 10s) * .9) ease-in-out var(--delay, 0s) infinite;
}

/* — Sürekli süzülme (balon vb.) — */
@keyframes zaFloatY { 0% { transform: translateY(0); } 50% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
.za-float-y { will-change: transform; animation: 2.8s ease-in-out infinite zaFloatY; }

/* — "online" damga döngüsü — */
@keyframes zaStampLoop {
  0%  { opacity: 1;   transform: translateY(0) scale(1) rotate(0); }
  6%  { opacity: .15; transform: translateY(-46px) scale(.68) rotate(-10deg); }
  12% { opacity: 1;   transform: translateY(0) scale(1.18) rotate(2deg); }
  15% { transform: translateY(0) scale(.96) rotate(-1deg); }
  19% { transform: translateY(0) scale(1.03) rotate(.6deg); }
  22% { transform: translateY(.6px) scale(1) rotate(-.6deg); }
  25% { transform: translateY(-.6px) scale(1) rotate(.5deg); }
  28% { transform: translateY(.3px) scale(1) rotate(-.3deg); }
  35% { transform: translateY(0) scale(1) rotate(0); }
  100%{ opacity: 1;   transform: translateY(0) scale(1) rotate(0); }
}
.za-stamp { transform-origin: 42% 72%; will-change: transform, opacity; animation: 4.8s cubic-bezier(.18,.9,.2,1) infinite zaStampLoop; }

/* — Scroll reveal — */
.za-reveal {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(28px) scale(.98);
  transition: opacity .9s var(--za-ease), transform .9s var(--za-ease), filter .9s var(--za-ease);
  will-change: opacity, transform, filter;
}
.za-reveal.is-inview { will-change: auto; }
.za-reveal.is-inview { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
.za-reveal--delay { transition-delay: .12s; }
.za-reveal--delay2 { transition-delay: .24s; }
.za-reveal--delay3 { transition-delay: .36s; }

/* — Header / nav — canlı tasarım: açıkken TAM GENİŞLİK beyaz bar;
   logo sol-üst köşeye bitişik (köşesiz), nav bar içinde ortalı,
   hamburger sağ uçta bar yüksekliğinde soluk lila şerit. — */
.za-nav__bar {
  opacity: 0;
  transition: opacity var(--za-dur) var(--za-ease);
}
.za-nav.is-open .za-nav__bar { opacity: 1; }

.za-nav__center {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--za-dur) var(--za-ease);
}
.za-nav.is-open .za-nav__center { opacity: 1; pointer-events: auto; }
.za-nav__panel { transition: transform var(--za-dur) var(--za-ease); transform: translateY(-8px); }
.za-nav.is-open .za-nav__panel { transform: translateY(0); }

.za-nav__brand, .za-nav__toggle {
  transition: transform var(--za-dur) var(--za-ease),
    background-color var(--za-dur) var(--za-ease),
    color var(--za-dur) var(--za-ease);
  will-change: transform;
}

/* Hamburger: kapalıyken mor zeminde lila blok + beyaz çizgiler;
   açıkken beyaz barda soluk lila şerit + mor çizgiler */
.za-nav__toggle { background: color-mix(in srgb, var(--za-lilac-soft) 80%, transparent); color: #fff; }
.za-nav.is-open .za-nav__toggle { background: #efe8f9; color: var(--za-purple); }
.za-burger { display: grid; gap: 5px; width: 26px; }
.za-burger i { display: block; height: 3px; border-radius: 2px; background: currentColor; }

.za-nav__link { position: relative; padding-bottom: 10px; }
.za-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0%;
  height: 2px;
  border-radius: 2px;
  background: var(--za-purple);
  transition: width .22s var(--za-ease);
}
.za-nav__link:hover::after, .za-nav__link.is-active::after { width: 100%; }



/* ── Hero kartı: genişlik ve sağ dolgu akışkan ──────────────────────────
   build.css statik üretim; yeni utility sınıfı üretilemediği için bu
   davranış düz CSS. 72vw sınırı dar masaüstünde görsel kolonu ezmesin
   diye; mobilde kart tam genişlik, 7rem'lik sağ dolgu 2.5rem'e iner. */
.za-hero-card { max-width: min(900px, 72vw); padding-right: 7rem; }
@media (max-width: 767px) {
  .za-hero-card { max-width: 100%; padding-right: 2.5rem; }
}

/* Dar masaüstünde (768-1100) hero çıkartması daralan görsel kolonunda
   kartın arkasında kalıyordu — kenara yanaşır, bir tık küçülür. */
@media (min-width: 768px) and (max-width: 1100px) {
  .za-float-y { right: 3%; width: 10rem; }
}

/* ── Eğitim Süreci: kaynak 950px'te iki kolon gösteriyor — md'den itibaren
   ayrıl (Tailwind lg bekliyordu, klon o yüzden erken tek kolona düşüyordu). */
.za-process-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
  .za-process-grid { grid-template-columns: 1fr 1.2fr; gap: 4rem; }
}

/* ── Mobil menü: bar sabit kalır, menü liste olarak AŞAĞI açılır ─────────
   Kaynak sitenin deseni birebir: 72px barın altına tam genişlik beyaz panel
   (0 14px 40px gölge), her satır px-5/py-3, 14px/700/uppercase, sağda ok.
   Masaüstündeki yatay panel koreografisi (translateX'li logo/hamburger)
   mobilde tamamen devre dışı — clone.js de bu kırılımda transform basmaz.
   1080 eşiği clone.js isMobileNav() ile AYNI olmak zorunda: 900'de,
   901-1080 bandında ortalanmış 6 link sol marka bloğunun altına giriyordu. */
@media (max-width: 1080px) {
  .za-nav__bar { opacity: 1; } /* bar mobilde hep görünür — menü ondan sarkar */

  .za-nav .za-nav__center {
    top: 72px;
    bottom: auto;
    display: block;
    background: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
    transform: translateY(-10px);
  }
  .za-nav.is-open .za-nav__center { transform: none; }

  .za-nav__panel { transform: none !important; padding: 8px 0; }
  .za-nav__panel ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 14px;
  }

  .za-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
  }
  /* Hover alt çizgisi mobilde yok; yerine kaynaktaki gibi satır sonunda ok. */
  .za-nav__link::after,
  .za-nav__link:hover::after,
  .za-nav__link.is-active::after {
    position: static;
    width: auto;
    height: auto;
    background: none;
    content: "›";
    font-size: 18px;
    line-height: 1;
    color: var(--za-purple);
    opacity: .5;
  }

  /* Beyaz barda hamburger: mor çizgiler, soluk lila zemin — kapalıyken de. */
  .za-nav__toggle { background: #efe8f9; color: var(--za-purple); }
}

/* — Footer yırtık kâğıt kenarı — */
.za-torn {
  height: 42px;
  background: url('assets/textured-background1-HBBY58P6.jpg');
  background-size: cover;
  -webkit-mask-image: radial-gradient(22px 12px at 20px 100%, #0000 98%, #000),
    radial-gradient(20px 10px at 70px 100%, #0000 98%, #000),
    radial-gradient(26px 12px at 130px 100%, #0000 98%, #000),
    radial-gradient(18px 10px at 190px 100%, #0000 98%, #000),
    radial-gradient(24px 12px at 260px 100%, #0000 98%, #000),
    linear-gradient(#000, #000);
  mask-image: radial-gradient(22px 12px at 20px 100%, #0000 98%, #000),
    radial-gradient(20px 10px at 70px 100%, #0000 98%, #000),
    radial-gradient(26px 12px at 130px 100%, #0000 98%, #000),
    radial-gradient(18px 10px at 190px 100%, #0000 98%, #000),
    radial-gradient(24px 12px at 260px 100%, #0000 98%, #000),
    linear-gradient(#000, #000);
  -webkit-mask-size: 320px 100%;
  mask-size: 320px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

@media (prefers-reduced-motion: reduce) {
  .za-float-letter, .za-float-y, .za-stamp { animation: none !important; }
  .za-reveal { opacity: 1; filter: none; transform: none; transition: none; }
}


/* — Bayrak rozetleri (flag-icons, MIT) — */
.fi { display: inline-block; width: 27px; height: 20px; border-radius: 3px; background-size: cover; background-position: 50%; flex: none; }
.fi-gb { background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20480'%3e%3cpath%20fill='%23012169'%20d='M0%200h640v480H0z'/%3e%3cpath%20fill='%23FFF'%20d='m75%200%20244%20181L562%200h78v62L400%20241l240%20178v61h-80L320%20301%2081%20480H0v-60l239-178L0%2064V0z'/%3e%3cpath%20fill='%23C8102E'%20d='m424%20281%20216%20159v40L369%20281zm-184%2020%206%2035L54%20480H0zM640%200v3L391%20191l2-44L590%200zM0%200l239%20176h-60L0%2042z'/%3e%3cpath%20fill='%23FFF'%20d='M241%200v480h160V0zM0%20160v160h640V160z'/%3e%3cpath%20fill='%23C8102E'%20d='M0%20193v96h640v-96zM273%200v480h96V0z'/%3e%3c/svg%3e"); }
.fi-de { background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20480'%3e%3cpath%20fill='%23fc0'%20d='M0%20320h640v160H0z'/%3e%3cpath%20fill='%23000001'%20d='M0%200h640v160H0z'/%3e%3cpath%20fill='red'%20d='M0%20160h640v160H0z'/%3e%3c/svg%3e"); }
.fi-fr { background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20480'%3e%3cpath%20fill='%23fff'%20d='M0%200h640v480H0z'/%3e%3cpath%20fill='%23000091'%20d='M0%200h213.3v480H0z'/%3e%3cpath%20fill='%23e1000f'%20d='M426.7%200H640v480H426.7z'/%3e%3c/svg%3e"); }
.fi-ir { background-image: url('assets/ir-cCIgaNf6.svg'); }
.fi-sa { background-image: url('assets/sa-Dh79zbT9.svg'); }

/* — Yorum şeridi (marquee): iki sıra, zıt yönler, hover'da durur — */
@keyframes za-marquee-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes za-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.za-marquee {
  overflow: hidden;
  /* Kenarlarda yumuşak giriş-çıkış: kartlar kesilerek değil, erîyerek girer. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.za-marquee__track { display: flex; gap: 1.25rem; width: max-content; will-change: transform; }
.za-marquee__track--left  { animation: za-marquee-left 70s linear infinite; }
.za-marquee__track--right { animation: za-marquee-right 48s linear infinite; }
.za-marquee:hover .za-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .za-marquee__track { animation: none !important; } }

/* ── Öğrenci yorumu kartları ────────────────────────────────────────────
   Ekran görüntüsü yerine gerçek metin: her ekranda net okunur, seçilebilir,
   ekran okuyucu görür ve arama motoru indeksler. Görsellerde bunların hiçbiri
   yoktu. */
.za-quote {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  width: min(84vw, 25rem);
  padding: 1.75rem;
  border-radius: 1.25rem;
  background: #fff;
  color: var(--za-ink);
  box-shadow: 0 10px 28px #00000030;
}

.za-quote__mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  fill: var(--za-lilac);
  opacity: .55;
}

.za-quote__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: -0.01em;
}

.za-quote__by {
  margin-top: auto;
  padding-top: .25rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--za-ink) 55%, transparent);
}

/* Şerit kartları aynı yükseklikte hizalasın; farklı uzunluktaki alıntılar
   sıçramasın. */
.za-marquee__track { align-items: stretch; }