/* =============================================================================
   STUDIO SEOZ EDİTÖRÜ — canvas.css
   Bu dosya editör VE view.html tarafından ORTAK yüklenir. Davetiyenin
   kendi görünümüyle ilgili her şey burada — editörün panel/araç çubuğu
   gibi editöre özel arayüz kırıntıları editor-chrome.css'te, burada DEĞİL.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Petit+Formal+Script&family=Dancing+Script:wght@400;700&family=Great+Vibes&family=Parisienne&family=Cormorant+Garamond:wght@400;600&family=Playfair+Display:wght@400;600&family=Libre+Baskerville:wght@400;700&family=EB+Garamond:wght@400;600&family=Marcellus&family=Manrope:wght@400;700&family=Poppins:wght@400;700&family=Work+Sans:wght@400;700&family=Outfit:wght@400;700&family=Jost:wght@400;700&family=Pacifico&family=Baloo+2:wght@400;700&family=Fredoka:wght@400;700&family=Bungee&family=Caveat:wght@400;700&family=Inter:wght@400;700&family=Source+Sans+3:wght@400;700&family=Roboto:wght@400;700&family=IBM+Plex+Sans:wght@400;700&family=Lato:wght@400;700&display=swap');

.seoz-canvas-outer{
  width: 100%;
  display: flex;
  justify-content: center;
  background: #E9E4D8;
}

.seoz-canvas-scale-wrap{
  position: relative;
  width: 100%;
  max-width: 430px;
}

.seoz-canvas{
  position: relative;
  background: #FBF8F2;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}

.seoz-layer{
  box-sizing: border-box;
}

.seoz-text-content{
  white-space: pre-wrap;
  word-wrap: break-word;
  outline: none;
}

.seoz-image-content{
  user-select: none;
}

/* =========================================================================
   GİRİŞ SAHNESİ (FAZ 3) — editör ("Girişi Yeniden Oynat") ve view.html
   ("Baştan İzle") tarafından ORTAK kullanılır.
   ========================================================================= */
.seoz-entry-overlay{
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.seoz-entry-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* DÜZELTME (görüntüleme ölçeği): Zarf artık tam ekranı KIRPARAK doldurmuyor
   ("cover") — bunun yerine oranı korunarak ekrana SIĞDIRILIR ("contain"
   mantığı). Kaynak PNG'nin gerçek piksel boyutu (ör. 1200×1800) hiç
   değişmez; burada yalnızca GÖRÜNTÜLEME ölçeği sınırlanır.
   EK MADDE (boyutlandırma tutarlılığı): max-width/max-height artık
   editörden ayarlanabilen --seoz-entry-desktop-w / --seoz-entry-mobile-w
   CSS değişkenlerinden okunuyor — ve KART (.seoz-entry-card) ile
   BİREBİR AYNI değerleri kullanıyor. Aynı ölçüde hazırlanmış bir zarf
   ve kart artık HER ZAMAN tutarlı büyüklükte görünür.
   Zarf, kartla aynı yığılma (stacking) bağlamında karşılaştırılabilsin
   diye konumlandırılmış hale getirilir — aksi halde absolute konumlu kart
   z-index farketmeksizin her zaman üstte görünürdü. */
.seoz-entry-image{
  position: relative;
  z-index: 2;
  display: block;
  height: auto;
  width: min(var(--seoz-entry-mobile-w, 90vw), var(--seoz-entry-desktop-w, 420px));
  max-height: 78vh;
}
/* DÜZELTME (iç kart): zarfın "açılma" hissi — küçülüp solar, tekrar
   büzülmez (gerçek bir kapı gibi geri kapanmaz, yalnızca geçiş yapar). */
.seoz-entry-image.opening{
  transition: transform .45s ease, opacity .45s ease, filter .45s ease;
  transform: scale(.92) translateY(-8px);
  filter: brightness(.82);
  opacity: 0;
}
/* DÜZELTME (görüntüleme ölçeği): Kart da artık "cover" ile tam ekranı
   kırparak doldurmuyor — oranı korunarak ekrana sığdırılır ("contain"),
   taşmaz ve gereksiz büyütülmez. Konumlandırma artık inset:0 yerine
   ortalanmış (top/left %50 + transform) — çünkü kutunun boyutu artık
   görselin kendi oranına göre değişken. Zarfın ARKASINDA/İÇİNDE başlar
   (hafif aşağıda, görünmez), sonra yukarı doğru kayarak zarfın ÖNÜNE çıkar.
   EK MADDE: max-width/max-height artık .seoz-entry-image İLE BİREBİR
   AYNI CSS değişkenlerini kullanıyor (bkz. yukarıdaki not). */
.seoz-entry-card{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  height: auto;
  width: min(var(--seoz-entry-mobile-card-w, 90vw), var(--seoz-entry-desktop-card-w, 420px));
  max-height: 78vh;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 55px)) scale(.96);
  transition: transform .6s cubic-bezier(.22,.68,.36,1), opacity .5s ease;
  pointer-events: none;
}
.seoz-entry-card.emerging{
  z-index: 3;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.seoz-entry-card.leaving{
  opacity: 0;
  transform: translate(-50%, calc(-50% - 26px)) scale(.98);
}

/* EK MADDE (YENİ) — TEK KART PNG: zarf yok, tek görsel ortada ve büyük.
   AYNI boyutlandırma değişkenlerini kullanır (tutarlılık). */
.seoz-entry-card-only{
  display: block;
  height: auto;
  width: min(var(--seoz-entry-mobile-card-w, 90vw), var(--seoz-entry-desktop-card-w, 420px));
  max-height: 82vh;
}

/* EK MADDE — ÇİFT KANAT / ORTADAN AÇILAN ZARF (SON DÜZELTME):
   ESKİ TEKNİK (görseli %200 genişlikte gerip yarısını göstermek) bazı
   durumlarda görünür bir dikiş/kesik oluşturuyordu — "iki ayrı kart"
   gibi görünmesine yol açan tam olarak buydu. YENİ TEKNİK: her kanat,
   TAM BOYUTLU, HİÇ GERİLMEMİŞ, aynı görselin bir kopyasını içerir; her
   ikisi de tam olarak aynı yerde üst üste biner; yalnızca clip-path ile
   kendi %50'lik payı GÖRÜNÜR kılınır (kırpma/gerdirme değil, maskeleme).
   Bu, kapalı haldeyken görselin KESİNLİKLE TEK PARÇA görünmesini garanti
   eder. Açılış artık düz bir kaydırma değil — perspective + rotateY ile
   gerçek bir dolap kapağı/menteşe hissi verir: sol kanat kendi SOL dış
   kenarından, sağ kanat kendi SAĞ dış kenarından döner. "Hayalet" (ghost)
   görsel, gerçek en-boy oranını bozmadan dış kutunun yüksekliğini
   belirlemeye devam eder. */
.seoz-entry-dualwing{
  position: relative;
  display: block;
  width: min(var(--seoz-entry-mobile-w, 90vw), var(--seoz-entry-desktop-w, 420px));
  max-height: 78vh;
  perspective: 1600px; /* menteşe/dolap kapağı 3D hissi için gerekli */
}
.seoz-entry-dualwing-ghost{
  visibility: hidden;
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  pointer-events: none;
}
/* SON DÜZELTME (Madde 1) — İç kart en baştan zarfın İÇİNDE, hazır ve
   TAM GÖRÜNÜR durur (kendi bağımsız bir "belirme" animasyonu yoktur).
   Kanatların ARKASINDA kalması için z-index onlardan DÜŞÜK tutulur —
   kanatlar kapalıyken kartı tamamen örter; kanatlar rotateY ile
   döndükçe (bkz. .seoz-entry-wing backface-visibility:hidden) kendileri
   görünmez hale gelip altlarındaki kartı kademeli olarak ortaya çıkarır.
   Zarf ile AYNI genişlik değişkenlerini DEĞİL — Madde 2 gereği artık
   KENDİ (kart) genişlik değişkenlerini kullanır. */
.seoz-entry-card-inline{
  position: absolute;
  top: 50%; left: 50%;
  z-index: 1;
  display: block;
  height: auto;
  width: min(var(--seoz-entry-mobile-card-w, 90vw), var(--seoz-entry-desktop-card-w, 420px));
  max-height: 78vh;
  transform: translate(-50%, -50%);
}
.seoz-entry-card-inline.leaving{
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,.68,.36,1);
  opacity: 0;
  transform: translate(-50%, calc(-50% - 26px)) scale(.98);
}
.seoz-entry-wing{
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 2.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.seoz-entry-wing-left{ transform-origin: left center; }
.seoz-entry-wing-right{ transform-origin: right center; }
.seoz-entry-wing-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}
/* Görsel HİÇ gerilmez/kırpılmaz — yalnızca hangi yarısının görüneceği
   clip-path ile belirlenir. İki kanat kapalıyken TAM olarak çakışır ve
   TEK, kesiksiz bir görsel gibi görünür. */
.seoz-entry-wing-left .seoz-entry-wing-img{ clip-path: inset(0 50% 0 0); }
.seoz-entry-wing-right .seoz-entry-wing-img{ clip-path: inset(0 0 0 50%); }
/* Gerçek bir dolap kapağı gibi: menteşe dış kenarda, 3D olarak döner
   (düz yana kayma DEĞİL). 100° açı, tam açılmış + hafif dramatik bir
   his verir; boyut/konum SIÇRAMAZ, yalnızca döner. */
.seoz-entry-wing-left.opening{ transform: rotateY(-100deg); }
.seoz-entry-wing-right.opening{ transform: rotateY(100deg); }

.seoz-entry-hint{
  position: absolute;
  bottom: 40px; left: 0; right: 0;
  text-align: center;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: .8rem;
  letter-spacing: .06em;
  pointer-events: none;
  animation: seozEntryPulse 1.8s ease-in-out infinite;
}
@keyframes seozEntryPulse{ 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* MADDE 6: müzik notası çalarken çok hafif bir nabız — aktif durumu
   göze batmadan hissettirir. */
@keyframes seozNotePulse{ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.seoz-entry-skip{
  position: absolute;
  top: 18px; right: 18px;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  padding: 7px 16px;
  border-radius: 20px;
  font-family: 'Manrope', sans-serif;
  font-size: .76rem;
  z-index: 5001;
}
.seoz-replay-btn{
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 400;
  background: rgba(30,30,26,.75);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 20px;
  font-family: 'Manrope', sans-serif;
  font-size: .76rem;
  cursor: pointer;
}