/* Marka fontları — kendi sunucumuzdan. build-fonts.py tarafından üretilir,
   elle düzenlenmez. Latin + Türkçe alt kümesi, WOFF2. */

@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/baloo2-600.woff2') format('woff2');
}
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/baloo2-700.woff2') format('woff2');
}
@font-face{
  font-family:'Quicksand';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/quicksand-600.woff2') format('woff2');
}
@font-face{
  font-family:'Quicksand';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/quicksand-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/poppins-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/poppins-400i.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/poppins-600i.woff2') format('woff2');
}

/* ==========================================================================
   RoboVerse KIDS - site stylesheet

   Palette and type come from RoboVerseKIDS_Marka_Kiti.pdf, not from the
   Claude Design handoff (that bundle shipped stand-ins: Fredoka/Nunito and a
   green-leaning teal). Brand colours are Derin Lacivert #0A1A3F, Verse
   Turkuaz #2BB3C9 and Robo Turuncu #F0801E, used 60 / 30 / 10. The separate
   character palette (#1AA2AC, #FF7A18, #38D6E0, #FF6FA5) belongs to Robby
   himself and is only used for glow accents here.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* Robo Turuncu #F0801E - aksiyon ve odak, 10% */
  --rv-orange-100:#FDEDDD;--rv-orange-200:#FAD5B0;
  --rv-orange-300:#F6B071;--rv-orange-400:#F5964A;--rv-orange-500:#F0801E;
  --rv-orange-600:#D26B12;--rv-orange-700:#A5530B;
  /* Verse Turkuaz #2BB3C9 - yapisal cerceve ve alt basliklar, 30% */
  --rv-teal-100:#DDF2F6;--rv-teal-200:#B2E1EA;--rv-teal-300:#79CDDC;
  --rv-teal-400:#47C0D4;--rv-teal-500:#2BB3C9;--rv-teal-600:#1E93A8;--rv-teal-700:#166F80;
  /* Derin Lacivert #0A1A3F - kurumsal zemin ve ana metin, 60% */
  --rv-navy-500:#33538C;--rv-navy-600:#264173;--rv-navy-700:#1B3160;
  --rv-navy-800:#12244E;--rv-navy-900:#0A1A3F;--rv-navy-950:#061029;
  --rv-purple-500:#8E3FA0;
  /* Karakter paleti - yalnizca isik/parlama olarak */
  --rv-cyan-glow:#38D6E0;--rv-pink:#FF6FA5;--rv-gold:#F5C243;
  --rv-white:#FFFFFF;--rv-cloud:#F3F6FB;--rv-mist:#E6EBF4;--rv-fog:#CCD5E4;--rv-slate:#7F8DA8;

  --text-heading:var(--rv-navy-800);
  --text-body:var(--rv-navy-700);
  --text-on-dark:var(--rv-white);
  --text-on-dark-muted:#B6C4DC;

  /* Baslik: Baloo 2 · Alt baslik: Quicksand · Govde: Poppins */
  --font-display:"Baloo 2",system-ui,sans-serif;
  --font-sub:"Quicksand","Baloo 2",system-ui,sans-serif;
  --font-text:"Poppins","Segoe UI",system-ui,sans-serif;

  --shadow-md:0 14px 34px rgba(6,16,41,.12);
  --shadow-lg:0 22px 46px rgba(6,16,41,.18);
  --shadow-panel:0 22px 50px rgba(6,16,41,.14);
  --lip-orange:0 4px 0 var(--rv-orange-700);
  --lip-teal:0 4px 0 var(--rv-teal-700);
  --focus-ring:0 0 0 3px rgba(43,179,201,.45);
  --focus-ring-on-dark:0 0 0 3px rgba(56,214,224,.55);

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:120ms;--dur-base:200ms;

  --wrap:1180px;
  --pad-x:32px;
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:16px;line-height:1.5;
  color:var(--text-body);
  background:var(--rv-white);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;color:var(--text-heading);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--rv-teal-600);text-decoration:none;font-weight:700;transition:color var(--dur-base) var(--ease-out)}
a:hover{color:var(--rv-orange-600)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.on-dark :focus-visible{box-shadow:var(--focus-ring-on-dark)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad-x)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;background:var(--rv-orange-500);color:#fff;border-radius:0 0 12px 0;font-weight:700}
.skip-link:focus{left:0;color:#fff}

/* ---------- buttons (toy-plastic pill, hard lip) ---------- */
/* Saydam kenarlik BILEREK: `btn--outline` 2px cerceve tasiyor, digerleri
   tasimiyordu. Yukseklik padding'den hesaplandigi icin cerceveli buton
   digerlerinden 4px uzun kaliyordu — alt alta dizilen bir hero'da bu fark
   goze batiyor. Kenarligi tabana saydam olarak koyup padding'i 2px kisaltinca
   kutu boyu tum turlerde ayni oluyor, gorunum degismiyor. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;
  font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.1;
  border:2px solid transparent;border-radius:999px;cursor:pointer;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-base) var(--ease-out);
}
.btn svg{flex:0 0 auto}
.btn--sm{padding:8px 16px;font-size:14px}
.btn--lg{padding:15px 24px;font-size:18px}
.btn--primary{background:var(--rv-orange-500);color:#fff;box-shadow:var(--lip-orange)}
.btn--primary:hover{background:var(--rv-orange-400);color:#fff}
.btn--accent{background:var(--rv-teal-500);color:#fff;box-shadow:var(--lip-teal)}
.btn--accent:hover{background:var(--rv-teal-400);color:#fff}
.btn--outline{
  background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.btn--outline:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.85);color:#fff}
.btn--ghost{background:transparent;color:var(--rv-navy-700)}
.btn--ghost:hover{background:var(--rv-cloud);color:var(--rv-navy-700)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}

/* ---------- tag ---------- */
.tag{
  display:inline-flex;align-items:center;height:28px;padding:0 14px;
  border-radius:999px;font-family:var(--font-sub);font-weight:700;font-size:13px;
}
.tag--orange{background:var(--rv-orange-100);color:var(--rv-orange-700)}
.tag--teal{background:var(--rv-teal-100);color:var(--rv-teal-700)}

/* ---------- icon badge ---------- */
.badge{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
}
.badge--sm{width:56px;height:56px}
.badge--orange{background:var(--rv-orange-500)}
.badge--teal{background:var(--rv-teal-500)}
.badge svg{stroke:#fff}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:40;background:rgba(10,26,63,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.header__inner{display:flex;align-items:center;gap:28px;padding-block:18px}
.header__logo{height:58px;display:flex;align-items:center;overflow:hidden;flex:0 0 auto}
.header__logo img{height:138px;width:auto;margin:-40px 0}
.header__nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.navlink{
  padding:10px 18px;border-radius:999px;background:transparent;
  font-family:var(--font-display);font-weight:600;font-size:16px;color:#fff;
  transition:background-color var(--dur-base) var(--ease-out);
}
.navlink:hover{background:rgba(255,255,255,.14);color:#fff}
.navlink[aria-current="page"]{background:rgba(255,255,255,.18)}
.header__cta{margin-left:10px}
.navtoggle{display:none;margin-left:auto;width:46px;height:46px;align-items:center;justify-content:center;background:rgba(255,255,255,.10);border:none;border-radius:14px;color:#fff;cursor:pointer}
.navtoggle svg{stroke:#fff}

/* ---------- hero / space sections ---------- */
.space{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 18% 75%,#1E7E96 0%,#123A6B 42%,#0A1A3F 100%)}
.space--press{background:radial-gradient(120% 120% at 80% 10%,#1E7E96 0%,#123A6B 45%,#0A1A3F 100%)}
.space--videos{background:radial-gradient(120% 120% at 20% 10%,#1E7E96 0%,#123A6B 45%,#0A1A3F 100%)}
.space--contact{background:radial-gradient(120% 100% at 75% 80%,#1E7E96 0%,#123A6B 45%,#0A1A3F 100%)}
.space__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.space__inner{position:relative}

/* Yildiz alani yer yer cok parlak; beyaz basligin altina beyaz bir yildiz
   denk gelince yazi kayboluyordu. Tum hero'yu karartmak yerine yalnizca
   metin blogunun arkasina buzlu cam koyuyoruz: gorselin geri kalani el
   degmemis kaliyor.

   ONEMLI — blur TEK BASINA yetmiyor: bulanikligin parlaklikla ilgisi yok,
   patlamis beyaz bir yildizi yaymakla onu sut beyazi bir haleye cevirip
   yazinin altina seriyor. Bu yuzden camin kendisi arkasini KARARTIYOR
   (brightness). Panel sinirli oldugu icin bu bir perde degil; hero'nun geri
   kalani, maskot ve afis oldugu gibi duruyor.

   Sayilar: arkada duz beyaz (L=1.0) bir yildiz varsayalim. brightness(.5)
   onu ~#808080 yapiyor, uzerine gelen %40 lacivert tint ~#4E5157'e
   dusuruyor; beyaz yazi ile kontrast ~6:1, yani WCAG AA'nin uzerinde.
   saturate camin gri degil renkli cam gibi okunmasini sagliyor. */
.hero-copy{
  position:relative;
  padding:24px 28px;
  border-radius:28px;
  background:rgba(6,16,41,.44);
  -webkit-backdrop-filter:blur(20px) brightness(.34) saturate(1.25);
  backdrop-filter:blur(20px) brightness(.34) saturate(1.25);
  /* Ince ic kenar camin nerede bittigini belli ediyor; olmayinca panel
     karanlik bir leke gibi duruyor. */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 18px 44px rgba(6,16,41,.28);
}
/* backdrop-filter desteklenmeyen tarayicida karartma yapilamiyor; tek
   telafi daha opak bir zemin. */
@supports not (backdrop-filter:blur(1px)){
  .hero-copy{background:rgba(6,16,41,.72)}
}
.hero-copy>*:first-child{margin-top:0}
/* Lede rengi govde metni icin dogru ama camin uzerinde en zayif halka o:
   beyaz basliktan cok daha sonuk oldugu icin ayni zeminde kontrasti yariya
   duşuyor. Panel icinde bir tik acik ton kullaniliyor. */
.hero-copy .hero__lede{
  color:#C9D6EA;
  /* Camin karartamadigi tek tuk parlak noktaya karsi son emniyet: harfin
     kendi golgesi. Karartmayi daha ileri goturmek paneli siyah bir kutuya
     cevirirdi. */
  text-shadow:0 1px 14px rgba(6,16,41,.6);
}

.kicker{font-family:var(--font-sub);color:var(--rv-cyan-glow);font-weight:700;font-size:15px;letter-spacing:.14em}
.pill-kicker{display:inline-block;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.14);font-family:var(--font-sub);color:#fff;font-weight:700;font-size:14px;letter-spacing:.06em}
.hero__title{
  font-family:var(--font-display);font-weight:600;font-size:clamp(32px,4.6vw,54px);line-height:1.05;
  color:#fff;text-shadow:0 4px 26px rgba(6,16,41,.5);text-wrap:pretty;
}
.hero__title--sm{font-size:clamp(32px,5.6vw,56px);line-height:1.04}
.hero__title em{font-style:normal;color:var(--rv-orange-500)}
.hero__lede{max-width:600px;font-size:clamp(17px,2.2vw,19px);line-height:1.5;color:var(--text-on-dark-muted)}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
/* ---------- Robby'nin hareketi ----------
   Her yerleşimin kendi hareketi var. Beş kural bütün sette geçerli:

   1) Dönme merkezi AYAKLARDA. Robby bu pozların çoğunda yere basan bir
      robot; süzülme "yerçekimi yok" diyordu ve pozla çelişiyordu.
      Zıplayanlar dışında hiçbiri havalanmıyor.
   2) YÖN pozdan gelir. Jest hangi taraftaysa gövde o yana yaslanır.
      Pozlar tek tek incelendi; hangisinin nereye baktığı her keyframe'in
      üstünde yazıyor. (Bir tur boyunca beşi ters yöne eğiliyordu.)
   3) Hareket sürekli değil ARALIKLI. Sürekli kımıldayan figür arka plan
      gürültüsüne dönüşüyor; jesti anlamlı kılan öncesindeki durgunluk.
      İstisna: ürünler hero'su, çünkü o poz bir eylem (tezgâhta çalışıyor).
   4) ANTİSİPASYON eylemden yavaştır (yaklaşık 2:1). Hazırlık hızlı olursa
      okunmuyor ve hareket birdenbire olmuş gibi duruyor.
   5) SÖNÜMLENME hem genlikte hem SÜREDE daralır. Eşit aralıklarla azalan
      bir salınım mekanik duruyor.

   Ezilme ve esneme üst sınırı: zıplamalarda %9, diğer her yerde %3.
   Daha fazlası sert gövdeli bir robotta lastik gibi duruyor.

   Animasyon `transform` üzerinde, hover/dokunma parlaması `scale` ve
   `filter` üzerinde -- ayrı özellikler, birbirini ezmiyorlar.

   Giriş + döngü birleşen yerlerde sıra önemli: listede sonra gelen
   kazanıyor. Giriş `both` ile bitiş karesinde kalıyor, döngü gecikmeyle
   onun bıraktığı yerden devralıyor. Girişin bitiş karesi `--dinlenme` ve
   `--taban` ile döngünün başlangıcına eşitleniyor; eşitlenmezse birleşme
   anında Robby sıçrıyor. */
.mascot{
  width:auto;object-fit:contain;
  transform-origin:50% 100%;
  filter:drop-shadow(0 18px 30px rgba(6,16,41,.45));
}

/* Ortak giriş: yumuşak bir belirme.
   Önceki hâli yaylanmalıydı -- 16px aşağıdan gelip hedefi aşıyor, sonra
   yerine oturuyordu. Robby birden beliriyor ve zıplıyor gibi duruyordu.
   Şimdi: hafif küçükten (%98,5) gerçek boyuna açılıyor, saydamlıktan
   görünüre eriyor, çok az yukarı süzülüyor ve hedefi HİÇ aşmıyor.
   Yaylanma yok, tek yönlü ve yavaşlayarak biten bir hareket.
   Süre 900ms'ten 1,1 saniyeye çıktı; yumuşaklık büyük ölçüde süreden gelir.

   `--dinlenme` döngünün başladığı eğim, `--taban` da dinlenme yüksekliği;
   ikisi de varsayılan olarak sıfır. Giriş bu iki değerde bittiği için
   döngüye geçişte sıçrama olmuyor. */
@keyframes rv-giris{
  0%  {transform:translateY(calc(var(--taban,0px) + 7px)) rotate(var(--dinlenme,0deg)) scale(.985);opacity:0}
  40% {transform:translateY(calc(var(--taban,0px) + 3px)) rotate(var(--dinlenme,0deg)) scale(.993);opacity:.55}
  100%{transform:translateY(var(--taban,0px)) rotate(var(--dinlenme,0deg)) scale(1);opacity:1}
}

/* Ana sayfa · hero — Kendinden emin salınım
   Kollar kavuşturulmuş · simetrik
   Bu poz parmağını kaldırmıyor, kollarını kavuşturmuş duruyor. Eski hareket (iki kez yukarı dürtme) o poza ait değildi. Şimdi ağırlığını bir yandan diğerine aktarıyor, arada bir kısa bir kıkırdama sıçraması geliyor: 9px, 5px, 2px — hem küçülerek hem hızlanarak sönüyor. */
@keyframes rv-as{
  0%          {transform:rotate(-1.4deg) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  26%         {transform:rotate(1.4deg) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  52%         {transform:rotate(-1.4deg) translateY(0) scale(1,1);animation-timing-function:ease-in}
  64%         {transform:rotate(-.6deg) translateY(3px) scale(1.03,.97);animation-timing-function:ease-out}
  70%         {transform:rotate(0) translateY(-9px) scale(.98,1.02);animation-timing-function:ease-in}
  75%         {transform:rotate(0) translateY(0) scale(1.03,.97);animation-timing-function:ease-out}
  79%         {transform:rotate(0) translateY(-5px) scale(.99,1.01);animation-timing-function:ease-in}
  82%         {transform:rotate(0) translateY(0) scale(1.015,.985);animation-timing-function:ease-out}
  85%         {transform:rotate(0) translateY(-2px) scale(1,1);animation-timing-function:ease-in-out}
  100%        {transform:rotate(-1.4deg) translateY(0) scale(1,1)}
}
.mascot--as-hero{--dinlenme:-1.4deg;
  animation:rv-giris 1100ms cubic-bezier(.16,.68,.3,1) both,
            rv-as 7.5s linear 1100ms infinite;
}

/* Ana sayfa · alt bant — Buyur
   Açık avuç SOLDA · gövde sola yaslanır
   Avuç solda olduğu için gövde artık SOLA uzanıyor; önceki turda tam tersi yöne gidiyordu. Uzanmadan önce sağa doğru kısa bir hazırlık var (antisipasyon) ve bu hazırlık uzanmanın kendisinden yavaş — hareketin okunmasını sağlayan şey bu. */
@keyframes rv-ab{
  0%,58%      {transform:translate(0,0) rotate(0) scale(1,1);animation-timing-function:ease-in-out}
  68%         {transform:translate(4px,0) rotate(1.8deg) scale(1.02,.99);animation-timing-function:ease-out}
  74%         {transform:translate(-9px,-4px) rotate(-4deg) scale(.99,1.02);animation-timing-function:ease-out}
  80%         {transform:translate(-7px,-3px) rotate(-3.2deg) scale(1,1);animation-timing-function:linear}
  88%         {transform:translate(-7px,-3px) rotate(-3.2deg) scale(1,1);animation-timing-function:ease-in}
  94%         {transform:translate(2px,0) rotate(1.1deg) scale(1.01,.99);animation-timing-function:ease-out}
  97%         {transform:translate(-1px,0) rotate(-.4deg) scale(1,1);animation-timing-function:ease-out}
  100%        {transform:translate(0,0) rotate(0) scale(1,1)}
}
.mascot--as-bant{
  animation:rv-giris 1100ms cubic-bezier(.16,.68,.3,1) both,
            rv-ab 7s linear 1100ms infinite;
}

/* Tiyatro · hero — Sahneyi aç
   İşaret yukarı-SAĞDA · gövde sağa açılır
   Bu pozda işaret sağda, yön doğruydu. Değişen: hazırlık (geriye çekilme) 11 birim sürüyor, açılma 6 — yani hazırlık yaklaşık iki kat yavaş. Üstüne kısa bir "bak şuraya" vuruşu biniyor. */
@keyframes rv-ti{
  0%,54%      {transform:rotate(0) translate(0,0) scale(1,1);animation-timing-function:ease-in-out}
  65%         {transform:rotate(-2.6deg) translate(-5px,1px) scale(1.02,.99);animation-timing-function:ease-out}
  71%         {transform:rotate(5deg) translate(10px,-4px) scale(.99,1.02);animation-timing-function:ease-out}
  77%         {transform:rotate(4deg) translate(8px,-2px) scale(1,1);animation-timing-function:ease-in-out}
  84%         {transform:rotate(4deg) translate(8px,-8px) scale(.99,1.02);animation-timing-function:ease-in}
  88%         {transform:rotate(4deg) translate(8px,-2px) scale(1.02,.99);animation-timing-function:ease-in}
  95%         {transform:rotate(-1deg) translate(-1px,0) scale(1,1);animation-timing-function:ease-out}
  98%         {transform:rotate(.3deg) translate(0,0) scale(1,1);animation-timing-function:ease-out}
  100%        {transform:rotate(0) translate(0,0) scale(1,1)}
}
.mascot--ti-hero{
  animation:rv-giris 1100ms cubic-bezier(.16,.68,.3,1) both,
            rv-ti 8s linear 1100ms infinite;
}

/* Tiyatro · alt bant — Dans omuz
   Açık avuç SOLDA · salınım soldan başlar
   Salınım avucun olduğu yönden, soldan başlıyor. Asıl düzelen şey sönümlenme: genlikler 4,5° → 4,2° → 2,9° → 2° → 1,3° → 0,8° diye küçülürken aralıklar da kısalıyor (7 → 7 → 6 → 5 → 4 → 4). Önceki turda aralıklar eşitti, o yüzden sallanma mekanik duruyordu. */
@keyframes rv-tb{
  0%,56%      {transform:rotate(0) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  63%         {transform:rotate(-4.5deg) translateY(-2px) scale(.99,1.02);animation-timing-function:ease-in-out}
  70%         {transform:rotate(4.2deg) translateY(0) scale(1.02,.98);animation-timing-function:ease-in-out}
  76%         {transform:rotate(-2.9deg) translateY(-1px) scale(.99,1.01);animation-timing-function:ease-in-out}
  81%         {transform:rotate(2deg) translateY(0) scale(1.01,.99);animation-timing-function:ease-in-out}
  85%         {transform:rotate(-1.3deg) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  89%         {transform:rotate(.8deg) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  92%         {transform:rotate(-.4deg) translateY(0) scale(1,1);animation-timing-function:ease-out}
  100%        {transform:rotate(0) translateY(0) scale(1,1)}
}
.mascot--ti-bant{
  animation:rv-giris 1100ms cubic-bezier(.16,.68,.3,1) both,
            rv-tb 7s linear 1100ms infinite;
}

/* Atölyeler · hero — AMPUL!
   Parmak yukarı-SOLDA · sıçrama sola eğik
   Çömelme 10 birim, fırlama 5 — hazırlık iki kat yavaş, ampul yanmadan önce enerji biriktiği okunuyor. Parmak solda olduğu için sıçrama da hafifçe sola eğik. Ezilme %14'ten %6'ya indi. */
@keyframes rv-at{
  0%,60%      {transform:translateY(0) rotate(0) scale(1,1);animation-timing-function:ease-in}
  70%         {transform:translateY(6px) rotate(.8deg) scale(1.06,.94);animation-timing-function:ease-out}
  75%         {transform:translateY(-20px) rotate(-2.2deg) scale(.95,1.06);animation-timing-function:ease-out}
  81%         {transform:translateY(-29px) rotate(-1.2deg) scale(.99,1.01);animation-timing-function:ease-in}
  88%         {transform:translateY(0) rotate(0) scale(1.06,.94);animation-timing-function:ease-out}
  92%         {transform:translateY(-9px) rotate(-.8deg) scale(.98,1.02);animation-timing-function:ease-in}
  95%         {transform:translateY(0) rotate(0) scale(1.02,.98);animation-timing-function:ease-out}
  97%         {transform:translateY(-3px) rotate(0) scale(1,1);animation-timing-function:ease-in-out}
  100%        {transform:translateY(0) rotate(0) scale(1,1)}
}
.mascot--at-hero{
  animation:rv-giris 1100ms cubic-bezier(.16,.68,.3,1) both,
            rv-at 6s linear 1100ms infinite;
}

/* Atölyeler · alt bant — Zafer
   Yumruk yukarı-SAĞDA · dönüş sağa
   İki zıplama; yumruk sağda olduğu için havada sağa dönüyor. Yükseklik 56px'ten 38px'e, ezilme %16'dan %8'e indi. Sitedeki en hareketli maskot burası, sınır da burada duruyor. */
@keyframes rv-ay{
  0%,42%      {transform:translateY(0) rotate(0) scale(1,1);animation-timing-function:ease-in}
  52%         {transform:translateY(7px) rotate(-.8deg) scale(1.08,.92);animation-timing-function:ease-out}
  57%         {transform:translateY(-26px) rotate(3.2deg) scale(.94,1.07);animation-timing-function:ease-out}
  64%         {transform:translateY(-38px) rotate(1.8deg) scale(1,1);animation-timing-function:ease-in}
  72%         {transform:translateY(0) rotate(0) scale(1.08,.92);animation-timing-function:ease-out}
  78%         {transform:translateY(-20px) rotate(2.4deg) scale(.95,1.06);animation-timing-function:ease-in}
  85%         {transform:translateY(0) rotate(0) scale(1.06,.95);animation-timing-function:ease-out}
  90%         {transform:translateY(-7px) rotate(-1deg) scale(.99,1.02);animation-timing-function:ease-in}
  94%         {transform:translateY(0) rotate(0) scale(1.02,.98);animation-timing-function:ease-out}
  97%         {transform:translateY(-2px) rotate(0) scale(1,1);animation-timing-function:ease-in-out}
  100%        {transform:translateY(0) rotate(0) scale(1,1)}
}
.mascot--at-bant{animation:rv-ay 5s linear infinite}

/* Videolar · hero — Şuraya bak
   Parmak yukarı-SOLDA · işaret sola
   Baştan kuruldu ve bu turda yönü de düzeldi. Öncekinde iki sert itiş vardı, gövde her itişte eziliyordu ve üstelik parmak sola bakarken gövde sağa gidiyordu. Şimdi: sakin ağırlık aktarma, sağa doğru kısa bir hazırlık, TEK bir kararlı sol işaret, işaret ettiği yerde bir an duraklama, sonra hedefi biraz aşarak dönüş. */
@keyframes rv-vi{
  0%          {transform:rotate(-1.8deg) translate(0,0) scale(1,1);animation-timing-function:ease-in-out}
  24%         {transform:rotate(1.8deg) translate(0,0) scale(1,1);animation-timing-function:ease-in-out}
  48%         {transform:rotate(-1.8deg) translate(0,0) scale(1,1);animation-timing-function:ease-in-out}
  60%         {transform:rotate(2.6deg) translate(5px,0) scale(1.02,.99);animation-timing-function:ease-out}
  67%         {transform:rotate(-3.4deg) translate(-11px,-4px) scale(.99,1.02);animation-timing-function:ease-out}
  73%         {transform:rotate(-2.8deg) translate(-9px,-2px) scale(1,1);animation-timing-function:linear}
  82%         {transform:rotate(-2.8deg) translate(-9px,-2px) scale(1,1);animation-timing-function:ease-in}
  89%         {transform:rotate(1.2deg) translate(2px,0) scale(1.01,.99);animation-timing-function:ease-out}
  93%         {transform:rotate(-.5deg) translate(-1px,0) scale(1,1);animation-timing-function:ease-in-out}
  100%        {transform:rotate(-1.8deg) translate(0,0) scale(1,1)}
}
.mascot--vi-hero{--dinlenme:-1.8deg;
  animation:rv-giris 1100ms cubic-bezier(.16,.68,.3,1) both,
            rv-vi 9s linear 1100ms infinite;
}

/* Basında · hero — Büyük zıplama
   Simetrik zıplama
   Çömelme 10 birim, fırlama 6 — hazırlık yine daha yavaş. Tepede 9 birimlik bir asılı kalma var; zamanlamanın en klasik numarası ve hiçbir bedeli yok. Yükseklik 86px'ten 70px'e, ezilme %18'den %9'a indi. */
@keyframes rv-ba{
  0%          {transform:translateY(var(--taban)) rotate(0) scale(1,1);animation-timing-function:ease-in}
  10%         {transform:translateY(calc(var(--taban) + 8px)) rotate(0) scale(1.09,.91);animation-timing-function:ease-out}
  16%         {transform:translateY(calc(var(--taban) - 40px)) rotate(-1.6deg) scale(.93,1.08);animation-timing-function:ease-out}
  30%         {transform:translateY(calc(var(--taban) - 70px)) rotate(0) scale(1,1);animation-timing-function:linear}
  39%         {transform:translateY(calc(var(--taban) - 70px)) rotate(.8deg) scale(1,1);animation-timing-function:ease-in}
  53%         {transform:translateY(var(--taban)) rotate(0) scale(1.09,.91);animation-timing-function:ease-out}
  62%         {transform:translateY(calc(var(--taban) - 13px)) rotate(-.8deg) scale(.96,1.04);animation-timing-function:ease-in}
  71%         {transform:translateY(var(--taban)) rotate(0) scale(1.05,.96);animation-timing-function:ease-out}
  78%         {transform:translateY(calc(var(--taban) - 4px)) rotate(0) scale(.99,1.01);animation-timing-function:ease-in}
  84%         {transform:translateY(var(--taban)) rotate(0) scale(1.02,.98);animation-timing-function:ease-in-out}
  100%        {transform:translateY(var(--taban)) rotate(0) scale(1,1)}
}
.mascot--ba-hero{
  --zipla:70px;--taban:46px;
  animation:rv-giris 1100ms cubic-bezier(.16,.68,.3,1) both,
            rv-ba 3s linear 1100ms infinite;
}

/* İletişim · hero — Reverans
   Açık avuç SOLDA · eğilme sola
   Eğilme artık avucun olduğu yöne, sola. Eğilmeden önce ters yöne hafif bir doğrulma var ve o doğrulma eğilmeden yavaş. Doğrulurken bir kez aşıp geri geliyor. Gövde neredeyse hiç ezilmiyor. */
@keyframes rv-il{
  0%,58%      {transform:rotate(0) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  69%         {transform:rotate(1.9deg) translateY(-3px) scale(.99,1.01);animation-timing-function:ease-in}
  75%         {transform:rotate(-5.5deg) translateY(5px) scale(1.03,.97);animation-timing-function:ease-out}
  80%         {transform:rotate(-4.8deg) translateY(4px) scale(1.01,.99);animation-timing-function:linear}
  88%         {transform:rotate(-4.8deg) translateY(4px) scale(1.01,.99);animation-timing-function:ease-out}
  94%         {transform:rotate(1.3deg) translateY(-2px) scale(1,1);animation-timing-function:ease-out}
  97%         {transform:rotate(-.5deg) translateY(0) scale(1,1);animation-timing-function:ease-out}
  100%        {transform:rotate(0) translateY(0) scale(1,1)}
}
.mascot--il-hero{
  animation:rv-giris 1100ms cubic-bezier(.16,.68,.3,1) both,
            rv-il 7.4s linear 1100ms infinite;
}

/* Ürünler · hero — Tamir ritmi
   Tezgâh ve anahtar SAĞDA · burgu sağa
   Anahtar sağ elde, dişliler sağda: burgu artık sağa doğru çeviriyor ve geri gevşiyor — vida sıkmanın gerçek asimetrisi. Önceki turda simetrik sallanıyordu, o yüzden çevirmek değil titremek gibi duruyordu. */
@keyframes rv-ur{
  0%          {transform:rotate(-1.6deg) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  13%         {transform:rotate(1.6deg) translateY(-3px) scale(1,1);animation-timing-function:ease-in-out}
  26%         {transform:rotate(-1.6deg) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  39%         {transform:rotate(1.6deg) translateY(-3px) scale(1,1);animation-timing-function:ease-in-out}
  50%         {transform:rotate(-1.6deg) translateY(0) scale(1,1);animation-timing-function:ease-in}
  57%         {transform:rotate(4.4deg) translateY(-3px) scale(.99,1.02);animation-timing-function:ease-out}
  61%         {transform:rotate(-1.4deg) translateY(1px) scale(1.02,.98);animation-timing-function:ease-in}
  66%         {transform:rotate(4.4deg) translateY(-3px) scale(.99,1.02);animation-timing-function:ease-out}
  70%         {transform:rotate(-1.4deg) translateY(1px) scale(1.02,.98);animation-timing-function:ease-in}
  75%         {transform:rotate(3.6deg) translateY(-2px) scale(1,1);animation-timing-function:ease-out}
  80%         {transform:rotate(0) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  90%         {transform:rotate(-1.6deg) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  100%        {transform:rotate(-1.6deg) translateY(0) scale(1,1)}
}
.mascot--ur-hero{--dinlenme:-1.6deg;animation:rv-ur 6s linear infinite}

/* Ürünler · alt bant — Coşkulu merhaba
   El sallayan kol SOLDA · salınım soldan
   Önce sola doğru bir selam eğilmesi, hemen ardından sallanma. Genlikler 5,5° → 4,6° → 3,4° → 2,3° → 1,4° → 0,7° diye yarılanarak sönüyor, aralıklar da kısalıyor. Bir el sallamayı zarif yapan şey genliği değil bu sönümlenme eğrisi. */
@keyframes rv-ub{
  0%,44%      {transform:rotate(0) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  52%         {transform:rotate(2deg) translateY(-2px) scale(1,1);animation-timing-function:ease-in}
  59%         {transform:rotate(-4.6deg) translateY(4px) scale(1.03,.97);animation-timing-function:ease-out}
  65%         {transform:rotate(-4deg) translateY(3px) scale(1.01,.99);animation-timing-function:ease-in-out}
  71%         {transform:rotate(-5.5deg) translateY(-1px) scale(.99,1.02);animation-timing-function:ease-in-out}
  77%         {transform:rotate(4.6deg) translateY(0) scale(1.02,.98);animation-timing-function:ease-in-out}
  82%         {transform:rotate(-3.4deg) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  87%         {transform:rotate(2.3deg) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  91%         {transform:rotate(-1.4deg) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  94%         {transform:rotate(.7deg) translateY(0) scale(1,1);animation-timing-function:ease-out}
  100%        {transform:rotate(0) translateY(0) scale(1,1)}
}
.mascot--ur-bant{animation:rv-ub 7.5s linear infinite}

/* Fare ile gezinilen cihazlarda Robby'ye hafif bir tepki: buyume ve turkuaz
   bir parlama. Iki not:
   1) `transform` DEGIL `scale` kullaniliyor. Maskotta zaten transform
      uzerinde suzulme/ziplama animasyonu var; transform'a dokunmak onu
      ezerdi. `scale` ayri bir ozellik, animasyonla yan yana calisiyor.
   2) `hover:hover` sarti sart: dokunmatik ekranda :hover dokununca
      yapisiyor ve parmak kaldirilinca uzerinde kaliyor. Mobilde zaten
      surekli suzulme var, ek bir sey gerekmiyor. */
@media (hover:hover) and (pointer:fine){
  .mascot{transition:scale 380ms var(--ease-out),filter 380ms var(--ease-out)}
  .mascot:hover{
    scale:1.045;
    filter:drop-shadow(0 22px 38px rgba(6,16,41,.5)) drop-shadow(0 0 26px rgba(56,214,224,.42));
  }
}

/* Dokunmatik ekranda `:hover` diye bir sey yok, ama ayni tepkiyi vermek
   isteriz. Dokunma anina bagliyoruz: parmak Robby'nin uzerindeyken buyuyor
   ve arkasinda ayni turkuaz isik cikiyor, parmak kalkinca yerine donuyor.
   Masaustundekinden bir tik hizli, cunku dokunma anlik bir jest.
   iOS Safari `:active`'i ancak sayfada bir touch dinleyicisi varsa
   uyguluyor; site.js bos bir tane ekliyor. */
@media (hover:none){
  .mascot{
    transition:scale 200ms var(--ease-out),filter 200ms var(--ease-out);
    -webkit-tap-highlight-color:transparent;
  }
  .mascot:active{
    scale:1.05;
    filter:drop-shadow(0 22px 38px rgba(6,16,41,.5)) drop-shadow(0 0 26px rgba(56,214,224,.42));
  }
}

/* Basin sayfasindaki Robby zipliyor pozunda; suzulme yerine gercek bir
   ziplama. Iki sey onemli:

   1. Yumusatma her araliga ayri veriliyor. Tek bir egri ile tum animasyonu
      surunce tepe noktasi takiliyordu; gercek ziplamada yukselis yavaslar
      (ease-out), inis hizlanir (ease-in). Yercekimi boyle okunuyor.
   2. Yukseklik degisken: masaustunde kafa header'in altina giriyordu,
      mobilde yazinin uzerine biniyordu. --zipla degeri ekrana gore kisiliyor. */


.hero-home{display:grid;grid-template-columns:1.36fr .64fr;gap:24px;align-items:center;padding-block:52px 60px}
.hero-home .mascot{height:440px;margin-left:auto}
.hero-contact{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding-block:60px 72px}
.hero-contact .mascot{height:420px;margin-left:auto}
.hero-videos{display:flex;align-items:flex-end;gap:24px;padding-block:56px 64px}
.hero-videos__copy{flex:1}
.hero-videos .mascot{height:320px}
.hero-press{padding-block:56px 68px}

/* ---------- sections ---------- */
.section{background:var(--rv-cloud);padding-block:80px}
.section--tight{padding-block:64px 96px}
.section--flush-top{padding-top:32px}
.section__title{font-family:var(--font-display);font-weight:600;font-size:26px;color:var(--text-heading)}

/* ---------- cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cards-5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}

.card{
  display:block;background:#fff;border-radius:32px;padding:38px;
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
  color:inherit;font-weight:inherit;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:inherit}
.card__title{margin-top:24px;font-family:var(--font-display);font-weight:600;font-size:30px;color:var(--text-heading)}
.card__text{margin-top:12px;font-size:17px;line-height:1.5;color:var(--rv-navy-700)}
.card__more{margin-top:20px;font-family:var(--font-display);font-weight:600;font-size:17px}
.card__more--orange{color:var(--rv-orange-600)}
.card__more--teal{color:var(--rv-teal-600)}

/* Haber metinleri farkli uzunlukta; buton metnin ardindan akinca ayni
   satirdaki kartlarda 50px'e varan hiza kaymasi oluyordu. Kart flex kolon,
   buton dibe. */
.news{border-radius:24px;padding:34px;display:flex;flex-direction:column}
.news .news__text{flex:1}
/* Haber kartlarindaki "Habere git" butonu ortali. Once sola yasliydi;
   basin sayfasinda alt alta on bir kart var ve sola yaslanan butonlar
   sutunun icinde bosluga bakiyordu. Kart zaten bir birim, butonu da o
   birimin ortasina koyuyoruz. Butun butonlar ortali karari geregi. */
.news .btn{align-self:center}
.news--sm{padding:30px}
.news__title{margin-top:18px;font-family:var(--font-display);font-weight:600;font-size:25px;line-height:1.18;color:var(--text-heading);text-wrap:pretty}
.news--sm .news__title{margin-top:16px;font-size:22px}
.news__text{margin-top:12px;font-size:17px;line-height:1.5;color:var(--rv-navy-700)}
.news--sm .news__text{margin-top:10px;font-size:16px}
.news .btn{margin-top:22px}
.news--sm .btn{margin-top:20px;padding:11px 20px;font-size:15px}

/* ---------- videos ---------- */
.panel{background:#fff;border-radius:32px;padding:32px;box-shadow:var(--shadow-panel)}
.embed{width:100%;aspect-ratio:16/9;border:0;border-radius:24px;background:#000;display:block}
.panel__meta{margin-top:26px;display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.panel__meta>div{flex:1;min-width:280px}

.vcard{
  background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-md);
  cursor:pointer;text-align:left;border:none;padding:0;width:100%;font:inherit;color:inherit;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.vcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.vcard__thumb{display:block;position:relative;aspect-ratio:16/9;background:var(--rv-navy-900)}
.vcard__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard__body{padding:26px 28px 30px}
.vcard__title{margin-top:16px;font-family:var(--font-display);font-weight:600;font-size:23px;line-height:1.2;color:var(--text-heading)}
.vcard__text{margin-top:10px;font-size:16px;line-height:1.5;color:var(--rv-navy-700)}
.vcard .btn{margin-top:18px;padding:11px 20px;font-size:15px}

.play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:999px;background:var(--rv-orange-500);
  box-shadow:0 6px 0 var(--rv-orange-700);
  display:flex;align-items:center;justify-content:center;color:#fff;z-index:2;
}
.play svg{fill:#fff;stroke:none;margin-left:3px}
.play--sm{width:58px;height:58px;box-shadow:0 5px 0 var(--rv-orange-700)}

.short{
  position:relative;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:var(--rv-navy-900);
  box-shadow:0 14px 34px rgba(6,16,41,.14);cursor:pointer;border:none;padding:0;width:100%;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.short:hover{transform:translateY(-2px);box-shadow:0 22px 46px rgba(6,16,41,.2)}
.short img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.short__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,41,0) 45%,rgba(6,16,41,.72) 100%)}

.promo{
  background:var(--rv-navy-900);border-radius:24px;padding:38px;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.promo .space__bg{opacity:.55}
.promo__inner{position:relative}
.promo__title{font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1.1;color:#fff}
.promo__text{margin-top:14px;max-width:380px;font-size:17px;line-height:1.5;color:var(--text-on-dark-muted)}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:60;background:rgba(6,16,41,.85);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:48px;
}
.lightbox[hidden]{display:none}
.lightbox__inner{width:100%;max-width:980px}
.lightbox iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:24px;background:#000;box-shadow:0 30px 70px rgba(6,16,41,.6)}
.lightbox--tall iframe{height:min(74vh,720px);width:auto;aspect-ratio:9/16;max-width:100%;margin-inline:auto;display:block}
.lightbox__hint{margin-top:20px;text-align:center;font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--text-on-dark-muted)}

/* ---------- contact ---------- */
.contact-panel{background:#fff;border-radius:32px;padding:48px;box-shadow:var(--shadow-panel)}
.contact-panel__title{font-family:var(--font-display);font-weight:600;font-size:30px;color:var(--text-heading)}
/* Ikon ve baslik yan yana. Onceden alt alta duruyordu; ikonun sagindaki
   genislik bos kaliyor, kart da bosuna uzuyordu. Yan yana dizilince kart
   kisaliyor -- mobilde alti kutu cok daha az kaydirmayla goruluyor, web
   tarafinda da satirlar daha derli toplu. HTML'e dokunmadan, izgarayla. */
.tile{
  background:var(--rv-mist);border-radius:24px;padding:30px;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"ikon baslik" "metin metin";
  column-gap:15px;align-items:center;
}
.tile > .badge{grid-area:ikon}
.tile__title{grid-area:baslik;margin-top:0;font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.2;color:var(--text-heading)}
.tile__text{grid-area:metin;margin-top:16px;font-size:16px;line-height:1.5;color:var(--rv-navy-700)}
.social-row{margin-top:36px;padding-top:32px;border-top:1px solid var(--rv-mist);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.social-row__label{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--text-heading)}
.closer{margin-top:28px;font-style:italic;font-weight:700;font-size:19px;color:var(--rv-orange-500)}

/* ---------- footer ---------- */
.footer{background:var(--rv-navy-900);padding:64px 0 44px;color:var(--text-on-dark-muted)}
.footer__top{display:flex;align-items:flex-start;gap:56px;flex-wrap:wrap}
.footer__brand{flex:1;min-width:320px}
.footer__logo{height:52px;display:flex;align-items:center;overflow:hidden}
.footer__logo img{height:124px;width:auto;margin:-36px 0}
.footer__text{margin-top:22px;max-width:420px;font-size:17px;line-height:1.5}
/* Iletisim: telefon ve e-posta alt alta, ikonlu. Onceden ikisi ayri
   paragraftaydi ve marka blogu gereksiz uzuyordu. */
.footer__iletisim{display:flex;flex-direction:column;margin-top:16px}
.footer__iletisim a{
  display:inline-flex;align-items:center;gap:9px;min-height:40px;
  font-size:16.5px;color:#fff;font-weight:600;
}
.footer__iletisim a:hover{color:var(--rv-teal-300)}
.footer__iletisim svg{flex:0 0 auto;color:var(--rv-teal-400)}

/* Sosyal baglantilar ucuncu bir sutun harcamiyordu artik: uc yuvarlak ikon.
   Yuvarlak buton hem az yer kapliyor hem markanin hap/yuvarlak dilini
   surduruyor. Uzerine gelince turkuaz doluyor -- turkuaz sitede yapisal
   vurgu rengi, turuncu ise satin alma eylemine ayrilmis durumda. */
.footer__sosyal{display:flex;gap:12px;margin-top:20px}
.footer__sosyal a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  color:var(--text-on-dark-muted);
  transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.footer__sosyal a:hover{
  background:var(--rv-teal-500);border-color:var(--rv-teal-400);color:#fff;
  transform:translateY(-2px);
}
.footer__cols{display:flex;gap:72px;flex-wrap:wrap}
.footer__coltitle{font-family:var(--font-display);font-weight:600;font-size:17px;color:#fff}
.footer__list{margin-top:12px;display:flex;flex-direction:column;font-size:16px}
.footer__list a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-on-dark-muted);font-weight:400}
/* Farede 44px dokunma hedefi gerekmiyor; sutunlar bosu bosuna kule gibi
   uzuyordu. Dokunmatikte 44px oldugu gibi kaliyor. */
@media (hover:hover) and (pointer:fine){
  .footer__list a{min-height:36px}
}
.footer__list a:hover{color:#fff}
.footer__bottom{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer__copy{font-size:15px;color:var(--rv-slate)}
.footer__legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer__links{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--rv-slate)}
.footer__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-on-dark-muted);font-weight:400}
.footer__links a:hover{color:#fff}
.credit{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--text-on-dark-muted);font-size:14px;font-weight:700}
.credit:hover{background:rgba(255,255,255,.12);color:#fff}
.credit__dot{width:7px;height:7px;border-radius:999px;background:var(--rv-cyan-glow);display:inline-block}
.credit strong{font-family:var(--font-display);font-weight:600;color:#fff}

/* ---------- 404 ---------- */
.notfound{min-height:70vh;display:flex;align-items:center}
.notfound__inner{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding-block:80px}
.notfound .mascot{height:340px}

/* ==========================================================================
   Responsive - the prototype was desktop-only; these are additions.
   ========================================================================== */
@media (max-width:1080px){
  .cards-5{grid-template-columns:repeat(3,1fr)}
  .hero-home .mascot{height:400px}
}

@media (max-width:900px){
  :root{--pad-x:24px}
  .header__nav{
    position:fixed;inset:95px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:16px 24px 24px;margin:0;
    background:rgba(10,26,63,.985);
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 24px 40px rgba(6,16,41,.4);
  }
  .header__nav[hidden]{display:none}
  .navlink{padding:14px 18px;font-size:18px}
  .header__cta{margin:10px 0 0}
  .header__cta .btn{width:100%}
  .navtoggle{display:flex}

  .hero-copy{padding:24px 22px;border-radius:24px}
  .hero-home,.hero-contact{grid-template-columns:1fr;padding-block:56px 64px}
  /* Maskot mobilde metnin USTUNDE: sayfayi acan sey Robby, once o gorunsun.
     Masaustunde yan yana durduklari icin sira zaten dogru. */
  .hero-home .mascot{order:-1;height:300px;margin:0 auto 18px}
  .hero-contact .mascot{order:-1;height:320px;margin:0 auto 18px}
  /* column-reverse: maskot metnin ustune geciyor. Atolyeler, videolar ve
     basin sayfalari bu duzeni paylasiyor. */
  .hero-videos{flex-direction:column-reverse;align-items:stretch;padding-block:36px 56px}
  .hero-videos .mascot{height:230px;align-self:center;margin-bottom:6px}
  .hero-press{padding-block:56px 64px}

  .section{padding-block:56px}
  .section--tight{padding-block:48px 72px}
  .cards-3,.cards-2{grid-template-columns:1fr}
  .cards-5{grid-template-columns:repeat(2,1fr)}

  .card{padding:30px;border-radius:26px}
  .card__title{font-size:26px}
  .news{padding:28px}
  .panel{padding:22px;border-radius:26px}
  .contact-panel{padding:30px;border-radius:26px}
  .lightbox{padding:20px}
  .footer__top{gap:36px}
  .footer__cols{gap:40px}
  .notfound__inner{grid-template-columns:1fr;text-align:center}
  .notfound .mascot{height:240px;margin-inline:auto}
}

@media (max-width:560px){
  :root{--pad-x:20px}
  .hero__actions .btn{width:100%}
  .cards-5{grid-template-columns:repeat(2,1fr);gap:14px}
  .news__title{font-size:21px}
  .vcard__body{padding:22px 22px 26px}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}


/* ==========================================================================
   Kisa ekranlar - hero ilk ekrana sigsin
   Dizustu bilgisayarlarda tarayici cubuklari dustukten sonra gercek gorunum
   yuksekligi 650-750px'e inebiliyor. Hero sabit yukseklikte kalirsa son
   buton katlanmanin altinda kaliyor.
   ========================================================================== */
@media (min-width:901px) and (max-height:820px){
  .hero-home{padding-block:36px 42px}
  .hero-home .mascot{height:min(400px,52vh)}
  .hero-copy{padding:20px 24px}
  .hero__title{font-size:clamp(32px,4.2vw,48px)}
  .hero__lede{font-size:17px}
  .btn--lg{padding:14px 24px;font-size:17px}
}
@media (min-width:901px) and (max-height:700px){
  .hero-home{padding-block:26px 30px}
  .hero-home .mascot{height:min(330px,48vh)}
  .hero__title{font-size:clamp(28px,3.6vw,40px)}
  .hero__lede{font-size:16px;margin-top:14px!important}
  .hero-home .hero__actions{margin-top:20px!important}
}

/* ==========================================================================
   Marka kitine gore eklenen bolumler (tiyatro, atolyeler, vizyon, video)
   ========================================================================== */

/* ---------- section heads ---------- */
.section--dark{background:var(--rv-navy-900);color:var(--text-on-dark-muted)}
.section--dark h2,.section--dark h3{color:#fff}
.section--white{background:#fff}
.head{max-width:720px}
.head--center{margin-inline:auto;text-align:center}
.head__title{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4vw,42px);line-height:1.1;color:var(--text-heading)}
.section--dark .head__title{color:#fff}
.head__lede{margin-top:14px;font-size:18px;line-height:1.6;color:var(--rv-navy-700)}
.section--dark .head__lede{color:var(--text-on-dark-muted)}
.head .kicker{color:var(--rv-teal-700)}
.section--dark .head .kicker{color:var(--rv-cyan-glow)}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center}
.stat__n{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1;color:var(--rv-orange-500)}
.stat__l{margin-top:10px;font-family:var(--font-sub);font-weight:600;font-size:15px;line-height:1.35;color:var(--text-on-dark-muted)}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split--flip .split__media{order:2}
.split__media{border-radius:32px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--rv-navy-900)}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.meta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.meta{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:var(--rv-mist);font-family:var(--font-sub);font-weight:600;font-size:14px;color:var(--rv-navy-700)}
.section--dark .meta{background:rgba(255,255,255,.10);color:#fff}
.meta svg{stroke:currentColor}

/* ---------- play cards ---------- */
.play-card{background:#fff;border-radius:32px;padding:38px;box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.play-card--dark{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid rgba(255,255,255,.10)}
.play-card__title{margin-top:18px;font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1.12;color:var(--text-heading)}
.play-card--dark .play-card__title{color:#fff}
.play-card__text{margin-top:14px;font-size:17px;line-height:1.6;color:var(--rv-navy-700)}
.play-card--dark .play-card__text{color:var(--text-on-dark-muted)}
.play-card__foot{margin-top:24px;padding-top:0}

/* ---------- sahne şovu kartları (ikon + başlık yan yana) ----------
   "Robby ile Tanışma…" ve "Görev Oyunu & Komut Deneyimi". Başlıklar uzun;
   ikonun altında tam genişlikte dizilince mobilde üç satıra çıkıyor,
   masaüstünde tek satırda kalıp kartı dengesiz bırakıyordu.

   Çözüm: ikon solda, başlık sağında. Başlık sütunu daraldığı için isim
   her ekran boyunda iki satıra oturuyor. İki taraftan da sabitlendi:
   `min-height` iki satırlık yer ayırıyor (tek satıra düşemiyor, kartlar
   aynı hizada kalıyor), `line-clamp` üçüncü satırı engelliyor. Punto
   `clamp` ile kartın genişliğine göre ölçekleniyor. */
.cards-2 .play-card--dark{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"ikon baslik" "metin metin" "meta meta";
  column-gap:16px;align-items:center;
}
.cards-2 .play-card--dark > .badge{grid-area:ikon}
.cards-2 .play-card--dark .play-card__title{
  grid-area:baslik;margin-top:0;
  font-size:clamp(21px,2.4vw,27px);line-height:1.18;
  min-height:2.36em;              /* iki satırlık yer: tek satıra düşmesin */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  text-wrap:balance;              /* iki satır birbirine yakın uzunlukta */
}
.cards-2 .play-card--dark .play-card__text{grid-area:metin;margin-top:16px}
.cards-2 .play-card--dark .meta-row{grid-area:meta}

/* Ayni duzen Ada 7 sayfasindaki uclu kartlarda da (Ada 7 / Mini Ada /
   Robot Robby). Fark: bu basliklar kisa, iki satira kilitlemek yanlis
   olur. Tek satirda kaliyorlar ve punto biraz buyuk -- kart genisligine
   gore olcekleniyor, sigmadigi anda kirilmak yerine kuculuyor. */
.cards-3 .play-card--dark{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"ikon baslik" "metin metin";
  column-gap:16px;align-items:center;
}
.cards-3 .play-card--dark > .badge{grid-area:ikon}
.cards-3 .play-card--dark .play-card__title{
  grid-area:baslik;margin-top:0;
  font-size:clamp(22px,2.3vw,28px)!important;line-height:1.15;
  white-space:nowrap;                       /* satir dusmesin */
}
.cards-3 .play-card--dark .play-card__text{grid-area:metin;margin-top:16px}
.byline{margin-top:16px;font-family:var(--font-sub);font-size:15px;font-weight:600;color:var(--rv-slate)}
.play-card--dark .byline{color:#8FA2C0}

/* ---------- workshop grid ---------- */
.wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;justify-content:center}
.wcard{background:#fff;border-radius:28px;padding:32px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.wcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.wcard__head{display:flex;align-items:center;gap:16px}
.wcard__title{font-family:var(--font-display);font-weight:600;font-size:23px;line-height:1.15;color:var(--text-heading)}
.wcard__text{margin-top:14px;font-size:16px;line-height:1.6;color:var(--rv-navy-700);flex:1}
.wcard__foot{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- two-audience block ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.duo__card{border-radius:28px;padding:36px}
.duo__card--parent{background:var(--rv-navy-800);color:var(--text-on-dark-muted)}
.duo__card--child{background:var(--rv-teal-500);color:#fff}
.duo__label{font-family:var(--font-sub);font-weight:700;font-size:14px;letter-spacing:.12em}
.duo__card--parent .duo__label{color:var(--rv-cyan-glow)}
.duo__card--child .duo__label{color:rgba(255,255,255,.85)}
.duo__title{margin-top:14px;font-family:var(--font-display);font-weight:600;font-size:28px;line-height:1.15;color:#fff}
.duo__text{margin-top:12px;font-size:17px;line-height:1.6}
.duo__quote{margin-top:20px;font-style:italic;font-weight:600;font-size:17px;line-height:1.5;color:#fff}

/* ---------- press strip ---------- */
.press-strip{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.press-strip span{padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.08);font-family:var(--font-sub);font-weight:600;font-size:15px;color:#fff}

/* ---------- vision ---------- */
.vision{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vcard2{border-radius:28px;padding:32px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.vcard2__title{margin-top:20px;font-family:var(--font-display);font-weight:600;font-size:22px;color:#fff}
.vcard2__text{margin-top:10px;font-size:16px;line-height:1.6;color:var(--text-on-dark-muted)}
.soon{display:inline-block;margin-top:16px;padding:5px 12px;border-radius:999px;background:rgba(240,128,30,.18);color:var(--rv-orange-300);font-family:var(--font-sub);font-weight:700;font-size:13px;letter-spacing:.04em}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--rv-navy-900)}
.cta-band__inner{position:relative;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding-block:64px}
.cta-band .mascot{height:260px}

/* ---------- video gallery ---------- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vgrid--shorts{grid-template-columns:repeat(5,1fr);gap:20px}
.vtile{
  position:relative;display:block;border-radius:26px;overflow:hidden;background:var(--rv-navy-900);
  border:none;padding:0;width:100%;cursor:pointer;text-align:left;font:inherit;color:inherit;
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.vtile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.vtile__media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden}
.vtile--tall .vtile__media{aspect-ratio:9/16}
.vtile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-base) var(--ease-out)}
.vtile:hover .vtile__media img{transform:scale(1.04)}
.vtile__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,41,.35) 0%,rgba(6,16,41,0) 45%)}
/* 16:9 tiles carry their caption *under* the frame - YouTube thumbnails have
   their own burnt-in titles, so an overlay collides with them. */
.vtile__cap{display:flex;flex-direction:column;gap:6px;padding:22px 24px 26px;background:#fff}
.vtile__title{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.2;color:var(--text-heading)}
.vtile__sub{font-family:var(--font-sub);font-weight:600;font-size:14px;color:var(--rv-slate)}
.section--dark .vtile__cap{background:rgba(255,255,255,.06)}
.section--dark .vtile__title{color:#fff}
.section--dark .vtile__sub{color:var(--text-on-dark-muted)}

/* Dikey kucuk resimlerin bir kismi kendi yazisini tasiyor (YouTube Shorts
   kapaklari). Basligi uzerine bindirmek cakismaya yol aciyordu; o yuzden
   burada da baslik gorselin altinda duruyor. */
.vtile--tall .vtile__scrim{background:linear-gradient(180deg,rgba(6,16,41,.28) 0%,rgba(6,16,41,0) 45%)}
.vtile--tall .vtile__cap{padding:16px 18px 20px}
.vtile--tall .vtile__title{font-size:16px}
.vtile__badge{
  position:absolute;top:14px;left:14px;z-index:2;padding:5px 11px;border-radius:999px;
  background:rgba(6,16,41,.72);backdrop-filter:blur(4px);
  font-family:var(--font-sub);font-weight:700;font-size:12px;color:#fff;letter-spacing:.03em;
}

/* ---------- responsive additions ---------- */
@media (max-width:1080px){
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .vgrid--shorts{grid-template-columns:repeat(3,1fr)}
  .wcards{grid-template-columns:repeat(2,1fr)}
}
/* 768-1080 arasi tablet araligi: tek sutuna dusmek sayfayi asiri uzatiyor,
   iki sutun korunuyor. Tek sutun 700px altinda basliyor. */
@media (max-width:1080px){
  .duo,.vision{grid-template-columns:repeat(2,1fr)}
  .vision{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr);gap:28px}
  .split{grid-template-columns:1fr;gap:28px}
  .split--flip .split__media{order:0}
  .split__media img{aspect-ratio:16/10}
  .vision{grid-template-columns:1fr}
  .vgrid--shorts{grid-template-columns:repeat(2,1fr);gap:14px}
  .play-card,.wcard,.duo__card,.vcard2{padding:28px;border-radius:24px}
  .play-card--media,.wcard--photo{padding:0}
  .play-card__body{padding:26px}
  .play-card__title{font-size:26px}
  .cta-band__inner{grid-template-columns:1fr;text-align:center;padding-block:48px}
  .cta-band .mascot{height:200px;margin-inline:auto}
  .cta-band .hero__actions{justify-content:center}
}
@media (max-width:700px){
  .duo,.wcards,.vgrid,.cards-2,.cards-3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .head__lede{font-size:16px}
  .stats{gap:22px}
}

/* ---------- fotografli atolye karti ----------
   Gorsel ustte, metin altta. Fotograf kirpilmiyor: her <img> kendi oranini
   aspect-ratio olarak tasiyor ve contain ile yerlesiyor, kart yuksekligi
   gorsele gore esniyor. */
.wcard--photo{padding:0;overflow:hidden}
/* Kaynak gorsellerin oranlari farkli (0.75 - 1.0). Serbest biraktigimizda
   ayni satirdaki kart baslıklari 90-120px kayiyordu; ortak bir oran verip
   contain kullaniyoruz - cerceve kirpilmiyor, yalnizca yanlarda lacivert
   bosluk kaliyor ve gorselin kendi zemini zaten lacivert. */
/* Atolye gorselleri KIRPILMIYOR (object-fit:contain) ama kutu her kartta
   ayni kare oranda. Daha once her kutu kendi gorselinin oranini aliyordu;
   iki gorsel dikey oldugu icin ayni siradaki kartlarin metinleri farkli
   yuksekliklerden basliyor, izgara tirtikli goruniyordu. Gorsellerin
   kendi cercevesi zaten lacivert uzay zemini, bu yuzden yanlarda kalan
   bosluk fark edilmiyor. */
/* Gorselin yanlarinda kalan serit duz lacivert degil, bir yildiz haritasi:
   dugumler duzensiz durur ve her dugum yalnizca en yakin komsusuna kisa bir
   cizgiyle baglanir. Desen gomulu bir SVG olarak CSS'in icinde -- ek istek
   yok, ek dosya inmiyor. Arkasindaki vinyet ortada acilip kenarlara dogru
   kararir; gorselin arkasinda isik varmis hissi verir ve gorselin kendi
   lacivert cercevesiyle dikissiz birlesir. */
.wcard__media{
  display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
  background:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzAiIGhlaWdodD0iMTY1IiB2aWV3Qm94PSIwIDAgMTMwIDE2NSI+PGcgc3Ryb2tlPSIjN0ZFNEVFIiBzdHJva2Utd2lkdGg9Ii41NSIgb3BhY2l0eT0iLjIyIj48bGluZSB4MT0iNzAuNyIgeTE9IjU4LjkiIHgyPSI0OS4zIiB5Mj0iMjcuMyIvPjxsaW5lIHgxPSI0MC4xIiB5MT0iODQuMSIgeDI9IjU1LjUiIHkyPSIxMTcuOCIvPjxsaW5lIHgxPSI1NS4wIiB5MT0iMTU1LjAiIHgyPSIyMy44IiB5Mj0iMTQ2LjEiLz48bGluZSB4MT0iOTUuMyIgeTE9Ijk1LjgiIHgyPSIxMDguNiIgeTI9IjExNi44Ii8+PGxpbmUgeDE9Ijk3LjciIHkxPSIyMS4yIiB4Mj0iMTIwLjciIHkyPSI5LjMiLz48bGluZSB4MT0iNDkuMyIgeTE9IjI3LjMiIHgyPSIyMS4wIiB5Mj0iMjMuMyIvPjxsaW5lIHgxPSIyMy44IiB5MT0iMTQ2LjEiIHgyPSIxMC4wIiB5Mj0iMTI1LjkiLz48L2c+PGNpcmNsZSBjeD0iNzAuNyIgY3k9IjU4LjkiIHI9IjIuMjAiIGZpbGw9IiMzOEQ2RTAiIG9wYWNpdHk9Ii44MiIvPjxjaXJjbGUgY3g9IjQwLjEiIGN5PSI4NC4xIiByPSIxLjUxIiBmaWxsPSIjRkZGRkZGIiBvcGFjaXR5PSIuODIiLz48Y2lyY2xlIGN4PSI1NS4wIiBjeT0iMTU1LjAiIHI9IjEuMTgiIGZpbGw9IiNGRkZGRkYiIG9wYWNpdHk9Ii44MiIvPjxjaXJjbGUgY3g9IjU1LjUiIGN5PSIxMTcuOCIgcj0iMS42NSIgZmlsbD0iI0ZGRkZGRiIgb3BhY2l0eT0iLjgyIi8+PGNpcmNsZSBjeD0iOTUuMyIgY3k9Ijk1LjgiIHI9IjEuOTMiIGZpbGw9IiNGRkZGRkYiIG9wYWNpdHk9Ii44MiIvPjxjaXJjbGUgY3g9Ijk3LjciIGN5PSIyMS4yIiByPSIyLjMzIiBmaWxsPSIjMzhENkUwIiBvcGFjaXR5PSIuODIiLz48Y2lyY2xlIGN4PSI0OS4zIiBjeT0iMjcuMyIgcj0iMS4yNCIgZmlsbD0iI0ZGRkZGRiIgb3BhY2l0eT0iLjgyIi8+PGNpcmNsZSBjeD0iODguNSIgY3k9IjE1NC4wIiByPSIyLjA1IiBmaWxsPSIjRkZGRkZGIiBvcGFjaXR5PSIuODIiLz48Y2lyY2xlIGN4PSIxMTkuOSIgY3k9IjM3LjQiIHI9IjEuNDIiIGZpbGw9IiNGRkZGRkYiIG9wYWNpdHk9Ii44MiIvPjxjaXJjbGUgY3g9IjEyMC43IiBjeT0iOS4zIiByPSIyLjMxIiBmaWxsPSIjRkZGRkZGIiBvcGFjaXR5PSIuODIiLz48Y2lyY2xlIGN4PSIyMy44IiBjeT0iMTQ2LjEiIHI9IjIuMzYiIGZpbGw9IiMzOEQ2RTAiIG9wYWNpdHk9Ii44MiIvPjxjaXJjbGUgY3g9IjEwOC42IiBjeT0iMTE2LjgiIHI9IjIuMDgiIGZpbGw9IiNGRkZGRkYiIG9wYWNpdHk9Ii44MiIvPjxjaXJjbGUgY3g9IjExOC4wIiBjeT0iODQuOCIgcj0iMS4wNSIgZmlsbD0iI0ZGRkZGRiIgb3BhY2l0eT0iLjgyIi8+PGNpcmNsZSBjeD0iMjEuMCIgY3k9IjIzLjMiIHI9IjEuMjYiIGZpbGw9IiNGRkZGRkYiIG9wYWNpdHk9Ii44MiIvPjxjaXJjbGUgY3g9IjEwLjAiIGN5PSIxMjUuOSIgcj0iMi4yMyIgZmlsbD0iI0ZGRkZGRiIgb3BhY2l0eT0iLjgyIi8+PGNpcmNsZSBjeD0iMTguNSIgY3k9IjUyLjIiIHI9IjEuNDgiIGZpbGw9IiMzOEQ2RTAiIG9wYWNpdHk9Ii44MiIvPjwvc3ZnPg==") 0 0/130px 165px,
    radial-gradient(118% 96% at 50% 44%, #0D2456 0%, #061634 60%, #03091C 100%);
}
.wcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.wcard__body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.wcard--photo .wcard__title{margin-top:0}
.wcard--photo .wcard__text{margin-top:12px}

/* ---------- gorselli oyun karti ---------- */
.play-card--media{padding:0;overflow:hidden}
.play-card__media{display:block;position:relative;background:var(--rv-navy-900);overflow:hidden}
.play-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play-card__body{padding:34px 36px 36px;display:flex;flex-direction:column;flex:1}

/* ---------- galeri seridi ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.strip figure{margin:0;border-radius:24px;overflow:hidden;background:var(--rv-navy-800);box-shadow:var(--shadow-md)}
.strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;display:block}
.strip figcaption{padding:16px 20px 20px;font-family:var(--font-sub);font-weight:600;font-size:14px;color:var(--text-on-dark-muted)}

@media (max-width:900px){
  .strip{grid-template-columns:1fr}
  .wcard__body{padding:24px}
}

/* ---------- yasal metin sayfalari ---------- */
.legal{max-width:760px}
.legal__meta{font-family:var(--font-sub);font-weight:600;font-size:14px;color:var(--rv-slate)}
.legal h2{margin-top:44px;font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.2;color:var(--text-heading)}
.legal h2:first-of-type{margin-top:0}
.legal p{margin-top:14px;font-size:17px;line-height:1.7;color:var(--rv-navy-700)}
.legal ul{margin:14px 0 0;padding-left:22px}
.legal li{margin-top:10px;font-size:17px;line-height:1.7;color:var(--rv-navy-700)}
.legal code{display:inline-block;padding:2px 6px;border-radius:6px;background:var(--rv-mist);font-size:15px;white-space:nowrap}
@media (max-width:900px){
  .legal h2{font-size:22px;margin-top:36px}
  .legal p,.legal li{font-size:16px}
}

/* ---------- gorselsiz haber listesi ---------- */
.newslist{display:grid;gap:12px}
.newsrow{
  display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:20px;
  padding:22px 26px;border-radius:20px;background:var(--rv-cloud);
  color:inherit;font-weight:inherit;
  transition:background-color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.newsrow:hover{background:var(--rv-mist);transform:translateX(3px);color:inherit}
.newsrow__src{
  font-family:var(--font-sub);font-weight:700;font-size:14px;letter-spacing:.04em;
  color:var(--rv-teal-600);text-transform:uppercase;
}
.newsrow__title{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.25;color:var(--text-heading)}
.newsrow__go{display:flex;color:var(--rv-orange-500)}
@media (max-width:700px){
  .newsrow{grid-template-columns:1fr auto;gap:6px 16px;padding:20px 22px}
  .newsrow__src{grid-column:1/2}
  .newsrow__title{grid-column:1/2;font-size:17px}
  .newsrow__go{grid-column:2/3;grid-row:1/3}
}

/* ---------- mobil rotuslari ---------- */
@media (max-width:560px){
  /* Buzlu cam paneli satir kutusundan tasmasin */
  .hero-copy{max-width:100%;min-width:0}

  /* Butonlar tam genislikte olunca etiket iki satira dusuyordu; ic bosluk
     kisaliyor, yazi tek satirda kaliyor. */
  .btn--lg{padding:16px 20px;font-size:17px}
  .hero__actions{gap:10px}

  /* Sayilar ve kapanis bloklari ortali dursun */
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat__l{font-size:14px}

  /* Iki satira bolunen kisa etiketler tek satirda kalsin */
  .meta{font-size:13px;padding:6px 12px}
  .tag{font-size:12px;padding:0 12px}

  /* Bolum basliklarinda tek kelimelik sarkma olmasin */
  .head__title,.hero__title{text-wrap:balance}
}

/* ==========================================================================
   Mobil hizalama
   ========================================================================== */
@media (max-width:700px){
  /* "... git", "... tamami" gibi ic baglanti butonlari saga yaslansin;
     ok zaten saga bakiyor, hizasi da oraya otursun. */
  /* Mobilde eylem satirlarinin hepsi ORTALI. Onceden kimi sola, kimi saga
     yaslıydı; sayfa boyunca butonlar farkli yerlerde duruyordu. */
  .go-link,.play-card__foot,.wcard__foot{text-align:center;justify-content:center}
  /* Rozet, etiket ve olcu haplari da ortali: buton ortada dururken
     ustundeki etiket sola yaslanirsa kart iki farkli hizaya bolunuyor. */
  .meta-row,.rozet-sira,.press-strip{justify-content:center}
  .news .tag,.vcard2 .soon{align-self:center}
  .news{align-items:center;text-align:center}
  .news .news__title,.news .news__text{text-align:center}
  .legal .hero__actions,.legal .hero__actions--alt{justify-content:center}
  .kunye{text-align:center}
  .kunye__genis{grid-column:auto}

  /* Footer ortali */
  .footer{text-align:center}
  .footer__top{flex-direction:column;align-items:center;gap:32px}
  .footer__brand{min-width:0;display:flex;flex-direction:column;align-items:center}
  .footer__logo{justify-content:center}
  .footer__text{max-width:none}
  .footer__cols{width:100%;justify-content:center;gap:36px;text-align:center}
  .footer__list{align-items:center}
  .footer__bottom{flex-direction:column;align-items:center;text-align:center}
  .footer__legal{flex-direction:column;align-items:center;gap:8px}
  .footer__links{justify-content:center}

  /* Iletisim: sosyal medya satiri dagilmasin */
  .social-row{flex-direction:column;align-items:stretch;gap:12px;text-align:center}
  .social-row__label{margin-bottom:2px}
  .social-row .btn{width:100%}
  .closer{text-align:center}
}

/* ---------- mobil: hero rozeti ---------- */
@media (max-width:700px){
  /* Rozet iki satira dustugunde inline-block tum genisligi kapliyor ve
     ikinci satirin sagi bos kaliyordu. Satirlari dengeleyip ortaliyoruz;
     kutu ayni ama bosluk simetrik ve kasitli duruyor. */
  .pill-kicker{
    display:block;
    margin-inline:auto;
    text-align:center;
    text-wrap:balance;
    line-height:1.4;
    padding:9px 18px;
    letter-spacing:.04em;
  }
}

/* ---------- SSS acilir kapanir ---------- */
.faq{
  border-bottom:1px solid var(--rv-mist);
  padding:4px 0;
}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:14px;
  padding:20px 0;
  font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.3;
  color:var(--text-heading);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"+";
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--rv-teal-100);color:var(--rv-teal-700);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;font-weight:700;
  font-family:var(--font-text);
  transition:background-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
/* Acikken tire karakterine gecmek yerine artiyi 45 derece cevirip carpi
   yapiyoruz: hicbir fonta bagli degil, her yerde ayni gorunuyor. */
.faq[open] summary::before{
  transform:rotate(45deg);
  background:var(--rv-orange-100);color:var(--rv-orange-700);
}
.faq summary:hover{color:var(--rv-teal-700)}
.faq p{padding:0 0 22px 42px;font-size:17px;line-height:1.7;color:var(--rv-navy-700)}
.legal h2 + .faq{border-top:1px solid var(--rv-mist)}
@media (max-width:900px){
  .faq summary{font-size:17px;gap:12px}
  .faq p{padding-left:40px;font-size:16px}
}

/* ---------- video facade ----------
   YouTube iframe'i sayfa acilirken degil, tiklaninca yukleniyor. Her gomulu
   oynatici ~500 KB ve ucuncu taraf JS getiriyordu; dort tane vardi. */
.embed--facade{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border:0;padding:0;border-radius:24px;overflow:hidden;
  background:#000;cursor:pointer;
}
.embed--facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.embed--facade .play{width:78px;height:78px}
.embed--facade .play svg{margin-left:4px}
.embed--facade:hover .play{background:var(--rv-orange-400)}

/* Ziplama yuksekligi kucuk ekranda kisiliyor; yoksa kafa ustteki yaziya
   biniyor. */
@media (max-width:900px){
  /* Mobilde metin blogu maskotun hemen ustunde; taban asagi alinip
     genlik ona gore olculuyor. */
  .mascot--ba-hero{--zipla:50px;--taban:34px}
}

/* ---------- bilet satisi ----------
   Serit, ana sayfa bandi ve gosterim karti. Ucu de build.js icindeki tek
   kayittan uretiliyor; gosterim gecince HTML'den tamamen dusuyorlar, bu
   yuzden burada "gosterim yok" hali icin ayri bir kural gerekmiyor.

   Serit header'in USTUNDE ve sticky DEGIL: header zaten yapisik, ikisi birden
   yapisik olsaydi mobilde ilk ekranin 90 pikseli sabit cubuk olurdu. Serit
   yukari kayip gidiyor, header kaliyor. */
/* ---------- tiyatro hero'su: afiş + künye + bilet ----------
   Hero'nun kendisi bilet modülü. Daha önce hero ile ayrı bir gösterim kartı
   vardı; ikisi de aynı bilgiyi ve aynı butonu taşıyordu. Tek blokta toplayınca
   mobilde bir ekran boyu yer kazanıldı.

   Afiş çerçevesi GÖRSELİN ORANINA göre şekil alır: genişlik auto, yükseklik
   sınırlı, object-fit yok. Böylece yatay afiş de dikey afiş de boşluksuz
   oturur; afiş dosyası değiştiğinde CSS'e dokunmak gerekmez. */
/* Ana sayfadaki bant /tiyatro/#bilet adresine gidiyor; yapisik header
   basligi yutmasin diye capa hedefine ust bosluk. */
#bilet{scroll-margin-top:96px}
/* Afis solda, yazi sagda. HTML'de yazi once geliyor (ekran okuyucu ve arama
   motoru once basligi gorsun); gorsel siralamayi `row-reverse` ceviriyor.
   Afis kancadir, soldan basliyor: goz soldan sag okuyor, once afisi
   goruyor sonra tarihi ve bileti. */
.hero-bilet{display:flex;flex-direction:row-reverse;align-items:center;gap:40px;padding-block:44px 52px}
.hero-bilet__copy{flex:1 1 540px;min-width:0}
.hero-bilet__bolum{margin-top:8px;font-family:var(--font-sub);font-weight:700;font-size:17px;color:var(--rv-cyan-glow)}
.hero-bilet__kunye{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.hero-bilet__kunye li{display:flex;align-items:center;gap:10px;font-size:16.5px;line-height:1.4;color:#fff}
.hero-bilet__kunye svg{flex:0 0 auto;color:var(--rv-cyan-glow)}
.hero-bilet__kunye a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero-bilet__kunye a:hover{color:var(--rv-cyan-glow)}
.hero-bilet__not{margin-top:16px;font-size:14px;line-height:1.6;color:var(--text-on-dark-muted)}
.hero-bilet__afis{
  flex:0 1 auto;max-width:min(580px,50%);display:block;border-radius:22px;overflow:hidden;
  box-shadow:0 24px 60px rgba(6,16,41,.5);
  transition:transform var(--dur-base) var(--ease-out);
}
.hero-bilet__afis:hover{transform:translateY(-4px)}
/* Hem genislik hem yukseklik sinirli: yatay afis metin sutununu ezmesin,
   dikey afis de ekrandan tasmasin. Ikisi de ayni kurala uyar. */
.hero-bilet__afis img{display:block;width:auto;height:auto;max-width:100%;max-height:min(500px,58vh)}

/* İşaretli liste — oyunda çocukların ne yaptığını sayan blok. */
.tick-list{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.tick-list li{position:relative;padding-left:30px;font-size:17px;line-height:1.5;color:var(--rv-navy-700)}
.tick-list li::before{
  content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;
  background:var(--rv-teal-100);box-shadow:inset 0 0 0 2px var(--rv-teal-500);
}

@media (max-width:900px){
  /* Afiş önce, metin sonra: afiş kancadır, önce o görünsün. Yüksekliği
     sınırlı tutuluyor ki başlık ve bilet butonu ilk ekranda kalsın. */
  .hero-bilet{flex-direction:column-reverse;align-items:stretch;gap:18px;padding-block:20px 36px}
  .hero-bilet__afis{align-self:center;max-width:100%}
  /* Afis buyutuldu. Ust sinir "Pedagojik onayli oyun" rozetinin ilk ekranda
     kalmasina gore secildi: afis bundan buyudugunde rozet katlanmanin
     altina duyuyor ve veliye verilen ilk guven isareti kayboluyor. */
  .hero-bilet__afis img{max-height:min(420px,44vh)}
  /* Mobilde amac "Bilet al" butonunun ilk ekranda kalmasi; blok bu yuzden
     masaustundekinden bir tik daha sikisik. */
  .hero-bilet__copy{padding:20px 22px}
  .hero-bilet__copy .hero__lede{font-size:16.5px;margin-top:12px!important}
  .hero-bilet__kunye{margin-top:16px;gap:7px}
  .hero-bilet__kunye li{font-size:15.5px}
  .hero-bilet__not{margin-top:13px;font-size:13.5px}

}


/* ---------- tiyatro sayfasindaki uclu video seridi ----------
   Videolar sayfasindaki serit bese bolunuyor; burada uc video var, ayni
   sutun genisligini kullansa kartlar gereksiz daralirdi. */
.vgrid--uc{grid-template-columns:repeat(3,1fr);gap:22px;max-width:760px;margin-inline:auto}

/* ---------- gecmis gosterimler arsivi ----------
   Kayitlar gosterimler.js'ten geliyor; tarihi gecen gosterim yaklasan
   listesinden dusup buraya kendiliginden tasiniyor. Ayri liste tutulmuyor,
   bu yuzden arsiv hicbir zaman guncellemeyi unutulmus olamaz. */
.arsiv{margin:40px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.arsiv__item{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:24px;border-radius:22px;
  background:var(--rv-cloud);border:1px solid var(--rv-mist);
}
.tag--gecmis{background:var(--rv-mist);color:var(--rv-slate)}
.arsiv__tarih{display:flex;align-items:baseline;gap:8px;margin-top:16px;color:var(--rv-teal-700)}
.arsiv__d{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1}
.arsiv__m{font-family:var(--font-sub);font-weight:700;font-size:15px;letter-spacing:.02em}
.arsiv__baslik{margin-top:10px;font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.2;color:var(--text-heading)}
.arsiv__yer,.arsiv__seans{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font-size:15.5px;line-height:1.45;color:var(--rv-navy-700)}
.arsiv__seans{color:var(--rv-slate);font-size:14.5px}
.arsiv__yer svg,.arsiv__seans svg{flex:0 0 auto;margin-top:3px;color:var(--rv-slate)}

@media (max-width:900px){
  .vgrid--uc{grid-template-columns:repeat(3,1fr);gap:14px}
  .arsiv{grid-template-columns:1fr;gap:14px}
  .arsiv__item{padding:20px}
  .arsiv__d{font-size:30px}
  .arsiv__baslik{font-size:20px}
}

/* Iletisim sayfasindaki bilet kisa yolu. Bilet arayan veli "Bize Ulasin"a
   tiklayip mesaj yazmasin diye; satis bitince kendiliginden kayboluyor. */
.bilet-notu{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:18px;padding:12px 16px;border-radius:16px;
  background:rgba(240,128,30,.16);border:1px solid rgba(240,128,30,.45);
  font-size:15.5px;line-height:1.5;color:#fff;
}
.bilet-notu svg{flex:0 0 auto;margin-top:3px;color:var(--rv-orange-300)}
.bilet-notu a{color:var(--rv-orange-300);text-decoration:underline;text-underline-offset:3px}
.bilet-notu a:hover{color:#fff}

/* ---------- hero'da uc buton ----------
   Uc esit agirlikta buton iki sorun cikariyordu: hicbiri one cikmadigi icin
   hiyerarsi yoktu, dar sutunda da 2+1 tirtikli sarma yapiyordu (iletisim
   sayfasi). Birincil eylem kendi satirinda tek basina; iki ikincil secenek
   altinda yan yana ve bir tik kucuk. Etiket uzunlugu ne olursa olsun sarma
   duzeni bozulmuyor.

   Mobilde de ayni kurgu: bir tam genislik buton + altinda ikili sira. Uc
   tam genislik butonuna gore ilk ekrandan ~85px daha az yer yiyor. */
.hero__actions--alt{gap:10px}
@media (max-width:900px){
  /* Onceki hali `flex:1 1 0` idi: iki buton siranin yarisini paylasiyordu ve
     etiketler sigmayip IKI SATIRA dusuyordu. "+90 506 518 14 64" bir telefon
     numarasi -- ortasindan bolunmesi hem cirkin hem okunmaz. Sigmayan bir
     etiketi kirmaktansa butonu tam genislige almak dogru; dikeyde 45px
     fazladan yer yiyor ama iki satirlik buton zaten o yeri yiyordu. */
  .hero__actions--alt{flex-direction:column;align-items:stretch}
  .hero__actions--alt .btn{width:100%;white-space:nowrap;padding-inline:14px}
}

/* SSS sayfasi hic ic baglanti dagitmiyordu: en cok konu iceren sayfa, en az
   baglanti veren sayfaydi. Ustte tek satirlik ilgili sayfa serisi. */
.sss-yol{
  margin:0 0 32px;padding:14px 18px;border-radius:16px;
  background:var(--rv-cloud);border:1px solid var(--rv-mist);
  font-size:15.5px;line-height:1.7;color:var(--rv-slate);
}
.sss-yol a{color:var(--rv-teal-700)}

/* SSS blogunun altindaki iletisim satiri. */
.sss-alt{margin:34px 0 16px;font-size:17px;line-height:1.6;color:var(--rv-navy-700)}
.legal .hero__actions{flex-wrap:wrap}
.legal .btn--ghost{border-color:var(--rv-mist);background:var(--rv-cloud)}
.legal .btn--ghost:hover{background:var(--rv-mist)}

/* ---------- üst bilet şeridi ----------
   Önceki hâli uzun bir bilgi diziciydi (oyun adı, tarih, şehir, salon) ve
   mobilde rastgele satır kırıyordu; eylem de altı çizili bir yazıydı, buton
   gibi durmuyordu. Turuncu zemin dikkati zaten çekiyor — yazının çokluğu onu
   zayıflatıyordu.

   Şimdi: tek kısa cümle + gerçek hap butonlar. Metin `nowrap`, yani hiçbir
   genişlikte kırılmıyor; sığmazsa önce tarih, sonra ikinci butonun yazısı
   düşüyor, buton yuvarlak bir ikona dönüşüyor. */
.ticketbar{
  background:linear-gradient(90deg,var(--rv-orange-600),var(--rv-orange-500) 55%,var(--rv-orange-400));
  color:#fff;
}
.ticketbar__inner{
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding-block:9px;
}
.ticketbar__txt{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--font-sub);font-weight:700;font-size:15px;letter-spacing:.01em;
}
.ticketbar__txt svg{flex:0 0 auto}
.ticketbar__cta{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.ticketbar__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 16px;border-radius:999px;white-space:nowrap;
  border:2px solid rgba(255,255,255,.7);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:14px;line-height:1;
  transition:background-color var(--dur-base) var(--ease-out);
}
.ticketbar__btn:hover{background:rgba(255,255,255,.18);color:#fff}
/* Genis ekranda yazi, dar ekranda ikon: ikisi de HTML'de duruyor, hangisinin
   gorunecegini CSS seciyor. Boylece ekran okuyucu her durumda "Detaylar"i
   okuyabiliyor. */
.ticketbar__btn-ikon{display:none}
.ticketbar__btn--ana{
  background:#fff;color:var(--rv-orange-700);border-color:#fff;
}
.ticketbar__btn--ana:hover{background:var(--rv-orange-100);color:var(--rv-orange-700)}
/* Üst banttaki asıl eylem: nefes alan bir ışık. Turuncu bant zaten dikkat
   çekiyor ama içindeki iki butondan hangisinin asıl olduğunu söylemiyordu.
   Işık `box-shadow` üzerinde -- düzeni etkilemiyor, kaymıyor, tek bir
   pikseli bile itmiyor, sadece parlıyor. Yavaş (2,8 sn) ve tam sönüyor:
   sürekli parlayan bir buton bir süre sonra görünmez oluyor, asıl fark
   ettiren şey aradaki karanlık. `prefers-reduced-motion` açıksa duruyor. */
@keyframes rv-bilet-isik{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  50%    {box-shadow:0 0 16px 3px rgba(255,255,255,.6)}
}
.ticketbar__btn--ana{animation:rv-bilet-isik 2.8s ease-in-out infinite}

/* Gosterim yokken ayni serit, sessiz hali. Turuncu satin almaya ayrilmis
   bir renk; ortada satilacak bilet yokken orada durmasi yanlis olurdu.
   Zemin laciverde, buton turkuaza doniyor ve isik sonuyor -- acele
   edilecek bir sey yok, yalnizca bir bilgi. */
.ticketbar--sakin{background:linear-gradient(90deg,var(--rv-navy-800),var(--rv-navy-700) 60%,var(--rv-navy-800))}
.ticketbar--sakin .ticketbar__txt svg{color:var(--rv-cyan-glow)}
.ticketbar--sakin .ticketbar__btn--ana{
  animation:none;
  background:var(--rv-teal-500);border-color:var(--rv-teal-500);color:#fff;
}
.ticketbar--sakin .ticketbar__btn--ana:hover{background:var(--rv-teal-400);color:#fff}

@media (max-width:820px){
  .ticketbar__wide{display:none}
}
@media (max-width:620px){
  .ticketbar__inner{gap:10px;padding-block:8px}
  .ticketbar__txt{font-size:14px;gap:6px}
  .ticketbar__btn{padding:6px 14px;font-size:13.5px}
  /* İkinci buton yazısını kaybedip yuvarlak bir ikona dönüşüyor: yer
     kalmadığında bilgi bağlantısı kaybolmuyor, sadece küçülüyor. */
  /* Dar ekranda ikinci buton yuvarlak bir ikona iniyor. Butonun KENDI
     kenarligi halka gorevini goruyor; ikon yalnizca "i" harfi. Onceki
     denemede ikonun icinde de bir cember vardi, ic ice iki daire cikiyordu.
     Kenarlik burada kalinlastirildi: dolgun harfle ayni agirlikta dursun. */
  /* Daire "Bilet al" ile ayni yukseklikte olmali. Sabit piksel yerine olcuyu
     ikonun kendisinden turetiyoruz: 19px ikon + 2px ic bosluk + 3px kenarlik,
     iki yonde de = 29px. "Bilet al" da ayni sekilde 13,5px yazi + 6px bosluk
     + 2px kenarlik = 29px. Ikisi ayni mantikla olcüldugu icin kilitli kalıyor.
     `aspect-ratio` denendi, olmuyor: flex satirinda ana eksen olcusu icerikten
     geliyor ve oraniezip butonu yassilastiriyor. */
  .ticketbar__btn--ikinci{
    padding:2px;border-radius:50%;line-height:0;
    border-width:3px;border-color:#fff;
  }
  .ticketbar__btn-yazi{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .ticketbar__btn-ikon{display:inline-flex}
}

/* ---------- oyun künyesi ----------
   Önce tek satırda "·" ile ayrılmış bir diziydi ve mobilde etiketle isim
   birbirinden kopuyordu ("Yazan ve" alt satır "yöneten: Pınar..."). Etiket
   ve karşılığı artık ayrı satırda, birlikte kalıyor. */
/* Oyun künyesi — afiş künyesi tadında: küçük, aralıklı, sakin.
   Etiketler daktilo harfi gibi seyrek ve büyük harf; isimler marka
   yazı tipinde kalıyor, çünkü asıl okunması gereken onlar. Bu bir
   süs değil, veliye verilen bir bilgi — bu yüzden küçük ama net. */
.kunye{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 26px;
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rv-mist);
}
.kunye dt{
  font-family:var(--font-sub);font-weight:700;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--rv-slate);
}
.kunye dd{
  margin:5px 0 0;font-family:var(--font-sub);font-weight:600;
  font-size:14.5px;line-height:1.35;letter-spacing:.01em;color:var(--rv-navy-700);
}
.kunye__genis{grid-column:1 / -1}

/* ---------- mobilde atölye kartları kaydırmalı ----------
   Yedi kart alt alta dizilince sayfa uzuyor ve ziyaretçi üçüncüden sonrasını
   görmüyordu. Yatay kaydırma + hizalama: bir sonraki kartın kenarı görünür
   kalıyor, böylece kaydırılabildiği kendiliğinden anlaşılıyor.
   Kartlar `wrap`ın kenar boşluğunu aşıyor ki ekranın kenarına kadar aksın. */
@media (max-width:700px){
  .wcards{
    display:flex;grid-template-columns:none;
    /* Bu satir sart. Izgara halindeyken `.wcards` uzerinde
       `justify-content:center` var; flex'e gecerken sifirlanmazsa tasan
       icerik ORTALANIYOR ve ilk uc kart seridin soluna, kaydirmayla
       erisilemeyen bir yere dusuyor. Serit dorduncu karttan basliyormus
       gibi goruluyordu; sebebi kaydirma degil, hizalamaydi. */
    justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad-x);
    gap:16px;
    /* Kenar bosluklarini asip ekranin kenarina kadar akiyor; dikeyde de
       biraz pay var, yoksa kart golgeleri kirpiliyor ve sikisik duruyor. */
    padding:6px var(--pad-x) 12px;
    margin-inline:calc(var(--pad-x) * -1);
    scrollbar-width:none;
  }
  .wcards::-webkit-scrollbar{display:none}
  /* Kart ekranin bir tik altinda: sonraki kartin kenari hep gorunur kaliyor,
     kaydirilabildigi kendiliginden anlasiliyor. */
  .wcards > *{flex:0 0 min(86%,330px);scroll-snap-align:start}
  /* Kart 803px'ti; ekranin tamamini kapliyor, altindaki noktalar
     gorunmuyordu. Uc mudahale: gorsel tam genislige oturdu (ic bosluk
     yok), oran 1/1 yerine 4/3 oldu, metinler kisaldi. */
  .wcard{padding:20px}
  .wcard--photo{padding:0}
  .wcard--photo .wcard__media{aspect-ratio:4/3;border-radius:24px 24px 0 0}
  .wcard--photo .wcard__body{padding:18px 20px 20px}
  .kunye{grid-template-columns:1fr;gap:12px}
}

/* ---------- şerit göstergesi (noktalar) ----------
   Kaydırmalı şeridin altındaki noktalar. Etkin nokta bir hapa uzuyor —
   marka paletinde eylem rengi turuncu, gösterge de eylemin nerede olduğunu
   söylüyor; pasif noktalar sessiz gri. Noktalar site.js tarafından
   ekleniyor, çünkü yalnızca gerçekten kaydırılabilen şeritlerde anlamlı. */
.serit-nokta{display:none}
@media (max-width:700px){
  .serit-nokta{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:20px}
  .serit-nokta button{
    position:relative;width:8px;height:8px;padding:0;
    border:none;border-radius:999px;background:var(--rv-fog);cursor:pointer;
    transition:width var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out);
  }
  /* Görünen nokta küçük ama dokunma hedefi 40px: parmakla rahat vurulur. */
  .serit-nokta button::after{content:"";position:absolute;inset:-16px}
  .serit-nokta button[aria-current="true"]{width:28px;background:var(--rv-orange-500)}
  .section--dark .serit-nokta button{background:rgba(255,255,255,.28)}
  .section--dark .serit-nokta button[aria-current="true"]{background:var(--rv-orange-400)}
}

/* ---------- rozet ---------- */
.rozet-sira{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rozet{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;
  background:rgba(56,214,224,.14);border:1px solid rgba(56,214,224,.45);
  font-family:var(--font-sub);font-weight:700;font-size:14px;color:#fff;
}
.rozet svg{color:var(--rv-cyan-glow)}

/* Bölüm sonlarındaki tek butonlu paragraflar ("Gösterim takvimi için yazın",
   "Tüm videolar", "Bu gösterimler basında" gibi) mobilde ortalanıyor;
   masaüstünde metin akışıyla hizalı kalmaları doğru. */
@media (max-width:700px){
  .section p:has(> .btn),
  .split p:has(> .btn),
  .wrap > p:has(> .btn){text-align:center}
  .arsiv__item{align-items:center;text-align:center}
  .sss-alt{text-align:center}
}

/* Pedagojik onay notu. Rozet hero'da kısa duruyor; burada veliye asıl
   güven veren cümlenin kendisi yazılı. Sakin turkuaz zemin: bu bir
   satış çağrısı değil, bir güvence. */
.onay-notu{
  display:flex;align-items:flex-start;gap:11px;
  margin-top:22px;padding:14px 18px;border-radius:16px;
  background:var(--rv-teal-100);border:1px solid var(--rv-teal-200);
  font-size:15.5px;line-height:1.55;color:var(--rv-navy-700);
}
.onay-notu svg{flex:0 0 auto;margin-top:2px;color:var(--rv-teal-600)}

/* ---------- mobilde hizalama ----------
   Karar şu: KISA olan her şey ortalı, PARAGRAF olan her şey sola yaslı.

   Sebebi tipografik. Ortalanmış paragrafta her satır farklı yerden başlar;
   göz satır sonunda geri dönerken başlangıcı arar ve okuma yavaşlar. Dar
   ekranda satırlar kısa olduğu için bu geri dönüş çok sık yaşanır, yani
   zararı masaüstünden büyüktür. Başlık, kicker, etiket ve buton ise tek
   bakışta okunan bloklardır; ortalanınca dağınık değil, kurulmuş görünürler.

   Şikâyet edilen tam olarak buydu: "Müzikal · dans" gibi etiketler alt
   satıra düşüp sola yaslı kalınca sayfa kırık görünüyordu. */
@media (max-width:700px){
  .head{text-align:center;margin-inline:auto}
  .meta-row{justify-content:center}
  .section__title{text-align:center}
  .tag,.rozet-sira{align-self:center}
  .rozet-sira{justify-content:center}
  /* Paragraflar sola yaslı kalıyor: kart metni, oyun metni, SSS cevabı,
     işaretli liste. Bunlar okunacak metin, bakılacak blok değil. */
  .wcard__text,.play-card__text,.faq p,.tick-list li,.arsiv__yer,.arsiv__seans{text-align:left}
  .arsiv__item{text-align:center}
  .arsiv__yer,.arsiv__seans{justify-content:center;text-align:center}
}

/* ---------- mobil menüde Robby ----------
   Menü açılınca sağdaki boş sütundan süzülüp geliyor, el sallıyor, geri
   çekiliyor. Menü linkleri sola yaslı olduğu için sağ taraf zaten boştu.

   Maliyeti neredeyse sıfır: çekmece `display:none` olduğu için tarayıcı bu
   görseli menü İLK AÇILANA KADAR indirmiyor (60 KB). JS yok; animasyon
   `display:none`den görünüre geçince kendiliğinden bir kez çalışıyor.
   `pointer-events:none` ile dokunma hedeflerinin önüne geçmiyor, düzeni de
   etkilemiyor (mutlak konumlu). Hareketi kapalı kullanıcıda global kural
   animasyonu zaten durduruyor. */
.menu-robby{display:none}
@media (max-width:900px){
  .header__nav{position:fixed;overflow:hidden}
  .menu-robby{
    display:block;position:absolute;
    right:-6px;bottom:76px;
    width:auto;height:152px;
    pointer-events:none;
    transform-origin:60% 100%;
    filter:drop-shadow(0 14px 26px rgba(6,16,41,.45));
    animation:robby-selam 3.6s linear 1 both;
  }
}
/* Mobil menü — fırlayarak gir
   Menü sağda açıldığı için Robby sağdan giriyor, hedefi aşıp geri
   geliyor. Ardından el sallama; sallanma SOLA doğru başlıyor çünkü
   sallayan kol orada. Sönümlenme altı kademe: 7,5° → 6,2° → 4,5° →
   3° → 1,8° → 1°. Sonunda menü kapanmasa da kenara çekiliyor. */
@keyframes robby-selam{
  0%       {transform:translateX(115%) rotate(9deg) scale(.98,1.02);opacity:0;animation-timing-function:ease-out}
  14.76%   {transform:translateX(-7px) rotate(-3.6deg) scale(1.03,.97);opacity:1;animation-timing-function:ease-in-out}
  22.14%   {transform:translateX(2px) rotate(1.4deg) scale(.99,1.01);animation-timing-function:ease-in-out}
  27.88%   {transform:translateX(0) rotate(0) scale(1,1);animation-timing-function:ease-in-out}
  36.9%    {transform:translateX(0) rotate(-7.5deg) scale(.99,1.02);animation-timing-function:ease-in-out}
  45.1%    {transform:translateX(0) rotate(6.2deg) scale(1.02,.99);animation-timing-function:ease-in-out}
  52.48%   {transform:translateX(0) rotate(-4.5deg) scale(.99,1.01);animation-timing-function:ease-in-out}
  59.04%   {transform:translateX(0) rotate(3deg) scale(1.01,.99);animation-timing-function:ease-in-out}
  64.78%   {transform:translateX(0) rotate(-1.8deg) scale(1,1);animation-timing-function:ease-in-out}
  69.7%    {transform:translateX(0) rotate(1deg) scale(1,1);animation-timing-function:ease-in-out}
  73.8%    {transform:translateX(0) rotate(-.4deg) scale(1,1);animation-timing-function:ease-out}
  82%      {transform:translateX(0) rotate(0) scale(1,1)}
  88%       {transform:translateX(0) rotate(0);opacity:1}
  100%      {transform:translateX(115%) rotate(9deg);opacity:0}
}