/* ============================================================
   SONSUZA KADAR EVET — Ana Sayfa Açılış Animasyonu (Preloader)
   Konsept: mühürlü dikey zarf açılır, davetiye kartı yükselir,
   kuğu işareti altın çizgiyle çizilir, ardından logo belirir.
   Sadece index.php'de yüklenir.
   ============================================================ */

#skePreloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 80% at 50% 18%, #3a291c 0%, #241a12 42%, #170f0a 100%);
    overflow: hidden;
    /* Bitişte perde gibi kalkar */
    transition: opacity 0.65s ease, visibility 0.65s ease;
}

/* Sayfa yüklenirken kaydırma kilitli */
html.ske-loading, html.ske-loading body { overflow: hidden; }

#skePreloader.ske-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Arka plan dokusu: yumuşak altın parıltı ── */
#skePreloader::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(closest-side, rgba(214,176,110,0.16), transparent 70%) 30% 28% / 46% 46% no-repeat,
        radial-gradient(closest-side, rgba(214,176,110,0.10), transparent 70%) 72% 72% / 52% 52% no-repeat;
    animation: skeGlow 6s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
@keyframes skeGlow {
    from { transform: scale(1) translateY(0); opacity: 0.75; }
    to   { transform: scale(1.08) translateY(-12px); opacity: 1; }
}

/* ── Uçuşan altın tozlar ── */
.ske-dust { position: absolute; inset: 0; pointer-events: none; }
.ske-dust i {
    position: absolute;
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(240, 216, 165, 0.85);
    box-shadow: 0 0 8px rgba(233, 201, 143, 0.75);
    opacity: 0;
    animation: skeDust var(--d, 7s) linear var(--delay, 0s) infinite;
    will-change: transform, opacity;
}
@keyframes skeDust {
    0%   { opacity: 0; transform: translateY(30px) scale(0.6); }
    12%  { opacity: 0.9; }
    75%  { opacity: 0.55; }
    100% { opacity: 0; transform: translateY(-190px) scale(1.15); }
}

/* ── Sahne ── */
.ske-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

/* ── Zarf: DİKEY (portre) ── */
.ske-envelope {
    position: relative;
    width: min(212px, 56vw);
    aspect-ratio: 0.72 / 1;      /* dikine zarf */
    perspective: 1100px;
    margin-bottom: 30px;
}

/* Zarfın arka gövdesi */
.ske-env-back {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 8px;
    background: linear-gradient(165deg, #efe2cd 0%, #e4d4b9 60%, #d8c5a5 100%);
    box-shadow: 0 30px 64px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* Yükselen davetiye kartı — zarfın ön cebinin ARKASINDAN çıkar */
.ske-card {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 5%;
    height: 80%;
    z-index: 3;
    box-sizing: border-box;
    border-radius: 4px;
    background: linear-gradient(180deg, #fffaf2 0%, #f8efdd 100%);
    box-shadow: 0 12px 26px rgba(0,0,0,0.30);
    display: grid;
    place-items: center;
    /* Kartın alt ~%26'lık kısmı zarfın ön cebinin arkasında kalıyor.
       Kuğu kartın tam ortasına konunca cep çizgisinde kesiliyordu;
       bu dolgu ile GÖRÜNEN alanın ortasına oturuyor. */
    padding-bottom: 34%;
    /* 20% aşağıdan başlayınca kart + gölgesi zarfın ALTINDAN taşıyordu */
    transform: translateY(6%);
    opacity: 0;
    will-change: transform, opacity;
    /* Hareket ve belirme AYRI animasyonlarda: tek eğride kart 25 ms içinde
       yarı opaklıkta "pat" diye beliriyordu. */
    animation: skeCardRise 0.78s cubic-bezier(0.30, 0.58, 0.26, 1) 0.78s forwards,
               skeCardFade 0.34s ease-out 0.78s forwards;
}
@keyframes skeCardRise {
    from { transform: translateY(6%); }
    to   { transform: translateY(-48%); }
}
@keyframes skeCardFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ske-card::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(201,169,110,0.45);
    border-radius: 2px;
    pointer-events: none;
}

/* Zarfın ÖN cebi — kartın önünde durur, kart arkasından çıkıyor gibi görünür */
.ske-env-front {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64%;
    z-index: 4;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(168deg, #f3e7d3 0%, #e7d8bd 58%, #dbc8a8 100%);
    box-shadow: 0 -6px 18px rgba(90,66,40,0.16);
    overflow: hidden;
}
/* Ön cebin ağzı: kartın çıktığı yuvayı belli eden ince gölge.
   Eskiden buradaki iki büyük üçgen ortada ters V oluşturuyor ve zarf
   açıldıktan sonra bile "hâlâ kapalı" gibi görünmesine yol açıyordu. */
.ske-env-front::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 14px;
    background: linear-gradient(180deg, rgba(120,92,55,0.20), rgba(120,92,55,0) 100%);
}
/* Cebin çok hafif yan katları — sadece derinlik için, çizgi oluşturmaz */
.ske-env-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(101deg, rgba(255,255,255,0.22) 0 18%, rgba(255,255,255,0) 19%),
        linear-gradient(259deg, rgba(255,255,255,0.22) 0 18%, rgba(255,255,255,0) 19%);
}

/* Kuğu: altın çizgiyle çizilir, sonra dolar */
.ske-swan {
    width: 54%;
    max-width: 84px;
    overflow: visible;
}
.ske-swan path {
    fill: #c9a96e;
    fill-opacity: 0;
    stroke: #e6c98f;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--len, 1400);
    stroke-dashoffset: var(--len, 1400);
    /* Süre ve gecikmeler her yolun kendi style'ında (uzunluğuna göre) */
    animation-name: skeDraw, skeFill;
    animation-timing-function: ease-in-out, ease-out;
    animation-fill-mode: forwards, forwards;
}
@keyframes skeDraw { to { stroke-dashoffset: 0; } }
@keyframes skeFill { to { fill-opacity: 1; stroke-opacity: 0.35; } }

/* ── Zarf kapağı: üstten açılır, açıldıktan sonra kartın ARKASINA geçer ── */
.ske-flap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 46%;
    transform-origin: top center;
    transform: rotateX(0deg);
    transform-style: preserve-3d;
    will-change: transform;
    z-index: 5;
    animation: skeFlapOpen 0.76s linear 0.45s forwards;
}
/* Kapak dik konuma yaklaşırken görünen yüksekliği cos(açı) ile değiştiği için
   sabit açısal hız "önce donma, sonra sıçrama" hissi veriyordu. Ara kareler
   EŞİT GÖRÜNEN YÜKSEKLİK adımlarına göre hesaplandı; zaman payları uçlarda
   biraz geniş bırakılarak yumuşak giriş/çıkış sağlandı. */
@keyframes skeFlapOpen {
    0%   { transform: rotateX(0deg);      z-index: 5; }
    13%  { transform: rotateX(-36.6deg);  z-index: 5; }
    24%  { transform: rotateX(-52.8deg);  z-index: 5; }
    34%  { transform: rotateX(-66deg);    z-index: 5; }
    43%  { transform: rotateX(-78deg);    z-index: 5; }
    51%  { transform: rotateX(-89.4deg);  z-index: 5; }
    /* Kapak dikey noktayı geçince kartın arkasında kalmalı (katman düzeltmesi) */
    52%  { transform: rotateX(-90.6deg);  z-index: 2; }
    59%  { transform: rotateX(-100.8deg); z-index: 2; }
    67%  { transform: rotateX(-112.6deg); z-index: 2; }
    76%  { transform: rotateX(-125.6deg); z-index: 2; }
    87%  { transform: rotateX(-141.3deg); z-index: 2; }
    100% { transform: rotateX(-168deg);   z-index: 2; }
}
.ske-flap-face {
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, #f3e6d0 0%, #e3d1b2 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 5px 10px rgba(90,66,40,0.22));
    border-radius: 8px 8px 0 0;
}

/* ── Mühür: markanın kuğusu ── */
.ske-seal {
    /* Kapağın (.ske-flap) çocuğu: kapak kalkarken mühür de onunla kalkar.
       Konum kapağın ucuna (üçgenin sivri noktası) göre. */
    position: absolute;
    left: 50%;
    top: 95%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    backface-visibility: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #dcbb7d, #a67b3c 58%, #75501f 100%);
    box-shadow: 0 5px 14px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.4), inset 0 -2px 5px rgba(60,38,12,0.4);
    display: grid;
    place-items: center;
    z-index: 6;
    /* Kapakla AYNI anda: mühür kapak kalkarken kırılıp düşer */
    animation: skeSealBreak 0.55s cubic-bezier(0.4, 0, 0.5, 1) 0.45s forwards;
}
/* Mumun kenarındaki düzensiz his */
.ske-seal::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 34%, rgba(214,176,110,0.42), rgba(117,80,31,0.22) 62%, transparent 72%);
}
.ske-seal-mark {
    position: relative;
    width: 56%;
    height: 56%;
    fill: #4a3315;
    opacity: 0.88;
    filter: drop-shadow(0 1px 0 rgba(255,232,190,0.45));
}
@keyframes skeSealBreak {
    0%   { transform: scale(1) rotate(0deg) translateY(0); opacity: 1; }
    22%  { transform: scale(1.14) rotate(-5deg) translateY(0); opacity: 1; }
    100% { transform: scale(0.46) rotate(-26deg) translateY(34px); opacity: 0; }
}

/* ── Logo ── */
.ske-logo {
    width: min(320px, 74vw);
    height: auto;
    opacity: 0;
    transform: translateY(12px);
    animation: skeLogoIn 0.55s ease-out 2.05s forwards;
}
@keyframes skeLogoIn { to { opacity: 1; transform: translateY(0); } }

.ske-tagline {
    margin-top: 12px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 300;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(233, 214, 183, 0.72);
    opacity: 0;
    animation: skeLogoIn 0.50s ease-out 2.25s forwards;
}

/* ── İnce altın ilerleme çizgisi ── */
.ske-bar {
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    width: min(190px, 46vw);
    height: 1px;
    background: rgba(201,169,110,0.22);
    overflow: hidden;
    z-index: 2;
}
.ske-bar i {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(90deg, transparent, #e6c98f, transparent);
    transform: translateX(-100%);
    animation: skeBar 1.5s ease-in-out infinite;
}
@keyframes skeBar { to { transform: translateX(100%); } }

/* ── Küçük ekran ── */
@media (max-width: 480px) {
    .ske-envelope { width: min(178px, 52vw); margin-bottom: 24px; }
    .ske-seal { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
    .ske-tagline { letter-spacing: 0.26em; font-size: 0.62rem; }
}
/* Alçak ekranlarda (yatay telefon) sığsın */
@media (max-height: 620px) {
    .ske-envelope { width: min(150px, 34vh); margin-bottom: 18px; }
    .ske-logo { width: min(260px, 62vw); }
}

/* ══════════════════════════════════════════════════════════
   ÇIKIŞ: davetiye kartı büyüyüp pencereyi kaplar ve dağılır —
   kamera davetiyenin içinden geçip siteye giriyormuş hissi.
   ══════════════════════════════════════════════════════════ */
#skePreloader.ske-zoom {
    animation: skeExitVeil 0.95s cubic-bezier(0.55, 0, 0.3, 1) forwards;
}
@keyframes skeExitVeil {
    0%   { opacity: 1; }
    52%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* Kart büyürken kenarları ekranda sert bir dikdörtgen olarak görünüyordu.
   Çözüm: kartın ÜSTÜNE değil ARKASINA (z-index:1, sahne z-index:2) kartla
   aynı krem rengi seriliyor. Zemin kartla aynı renge geldiği anda kartın
   kenarları kendiliğinden kayboluyor, sonra perde açılıp site görünüyor. */
#skePreloader.ske-zoom::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #fdf7ec;
    opacity: 0;
    pointer-events: none;
    animation: skeFlash 0.95s cubic-bezier(0.42, 0, 0.4, 1) forwards;
}
@keyframes skeFlash {
    0%   { opacity: 0; }
    20%  { opacity: 0.22; }
    45%  { opacity: 1; }
    100% { opacity: 1; }
}

/* Kullanıcı atladığında ya da hareket azaltma tercihinde: kısa geçiş */
#skePreloader.ske-skip {
    animation: skeExitVeil 0.32s ease forwards;
}

/* Sahne bir bütün olarak büyür; odak noktası kartın merkezi */
/* Odak noktası (--ske-ox/--ske-oy) ve gereken ölçek (--ske-zoom-scale)
   preloader.js tarafından kartın gerçek ekran konumundan hesaplanır.
   Sabit "50% 34%" değeri karta denk gelmediği için büyüme başka bir
   noktadan başlıyor gibi duruyordu. */
#skePreloader.ske-zoom .ske-stage {
    transform-origin: var(--ske-ox, 50%) var(--ske-oy, 30%);
    animation: skeStageZoom 0.95s cubic-bezier(0.62, 0, 0.28, 1) 0.05s forwards;
    will-change: transform, opacity;
}
@keyframes skeStageZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(var(--ske-zoom-scale, 9)); }
}

/* Zarf parçaları, logo ve yardımcı öğeler hızlıca çekilir;
   ekranı yalnızca büyüyen kart kaplar. */
#skePreloader.ske-zoom .ske-bar,
#skePreloader.ske-zoom .ske-dust,
#skePreloader.ske-zoom .ske-env-back,
#skePreloader.ske-zoom .ske-env-front {
    animation: skeExitFade 0.26s ease forwards;
}
/* ÖNEMLİ: çıkış animasyonu giriş animasyonunun yerine geçtiği için
   son konumu da taşımalı. Yoksa logo/alt yazı bir anda kayboluyor,
   kapak ise kapalı konuma "zıplıyordu" (kopukluk kaynağı). */
#skePreloader.ske-zoom .ske-logo,
#skePreloader.ske-zoom .ske-tagline {
    animation: skeTextOut 0.26s ease forwards;
}
@keyframes skeTextOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(0); }
}
#skePreloader.ske-zoom .ske-flap {
    animation: skeFlapOut 0.26s ease forwards;
}
@keyframes skeFlapOut {
    from { opacity: 1; transform: rotateX(-168deg); }
    to   { opacity: 0; transform: rotateX(-168deg); }
}
/* Büyürken ağır boyamalar kapatılır: akıcılık için */
#skePreloader.ske-zoom .ske-flap-face { filter: none; box-shadow: none; }
#skePreloader.ske-zoom .ske-envelope   { perspective: none; }
#skePreloader.ske-zoom .ske-env-back,
#skePreloader.ske-zoom .ske-env-front  { box-shadow: none; }
#skePreloader.ske-zoom::before         { animation: none; opacity: 0; transition: opacity 0.25s ease; }
@keyframes skeExitFade { to { opacity: 0; } }

/* Kart yaklaşırken içindeki kuğu ve ince çerçeve erir */
#skePreloader.ske-zoom .ske-swan {
    animation: skeExitFade 0.40s ease 0.18s forwards;
}
#skePreloader.ske-zoom .ske-card {
    box-shadow: none;
    animation: skeCardDissolve 0.95s ease-in forwards;
}
@keyframes skeCardDissolve {
    0%   { transform: translateY(-48%); border-radius: 4px; opacity: 1; }
    44%  { transform: translateY(-48%); border-radius: 0;   opacity: 1; }
    72%  { transform: translateY(-48%); border-radius: 0;   opacity: 0; }
    100% { transform: translateY(-48%); border-radius: 0;   opacity: 0; }
}
#skePreloader.ske-zoom .ske-card::after {
    animation: skeExitFade 0.35s ease forwards;
}

/* Hareket azaltma tercihi: yakınlaşma yok, sade geçiş */
@media (prefers-reduced-motion: reduce) {
    #skePreloader.ske-zoom .ske-stage { animation: none; }
    #skePreloader.ske-zoom::after { animation: none; opacity: 0; }
    #skePreloader.ske-zoom { animation: skeExitVeil 0.45s ease forwards; }
}

/* ── Hareket azaltma tercihi: animasyon yok, sadece logo ── */
@media (prefers-reduced-motion: reduce) {
    #skePreloader::before,
    .ske-dust i,
    .ske-bar i { animation: none; }
    .ske-envelope { display: none; }
    .ske-card, .ske-flap, .ske-seal { animation: none; }
    .ske-swan path {
        animation: none;
        stroke-dashoffset: 0;
        fill-opacity: 1;
        stroke-opacity: 0.35;
    }
    .ske-logo, .ske-tagline { animation: none; opacity: 1; transform: none; }
}