/* ==========================================

   PREMIUM HERO SLIDER  (js/slider-premium.js)

   Klasik slider'dan bağımsızdır; tüm sınıflar "ph-" ile başlar.
   Geri dönmek için: yedek/slider-klasik.html içindeki talimat.

   - Perde geçişi (clip-path), Ken Burns zoom
   - Başlık satırları maskeden kayarak gelir
   - Süre çubuklu navigasyon (otomatik geçişi çubuk bitişi tetikler)

========================================== */


.ph {

    --ph-sure: 6500ms;
    --ph-gecis: 1200ms;
    --ph-yesil: #6d983b;

    position: relative;

    width: 100%;

    height: 100svh;

    min-height: 620px;

    overflow: hidden;

    color: #fff;

    background: #111;

}


/* ==========================================
   SLAYTLAR
========================================== */

.ph-slaytlar {

    position: absolute;

    inset: 0;

    margin: 0;

    padding: 0;

    list-style: none;

}


.ph-slayt {

    position: absolute;

    inset: 0;

    z-index: 0;

    visibility: hidden;

    overflow: hidden;

}


.ph-slayt.is-onceki {

    z-index: 1;

    visibility: visible;

}


.ph-slayt.is-aktif {

    z-index: 2;

    visibility: visible;

}


/* Perde: yeni slayt sağdan açılır (geri giderken soldan) */

.ph-slayt.is-giriyor {

    animation: phPerde var(--ph-gecis) cubic-bezier(.77, 0, .18, 1) both;

}


.ph-slayt.is-giriyor.is-geri {

    animation-name: phPerdeGeri;

}


@keyframes phPerde {

    from { clip-path: inset(0 0 0 100%); }

    to   { clip-path: inset(0 0 0 0); }

}


@keyframes phPerdeGeri {

    from { clip-path: inset(0 100% 0 0); }

    to   { clip-path: inset(0 0 0 0); }

}


/* Görsel + Ken Burns */

.ph-gorsel {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.14);

}


.ph-slayt.is-aktif .ph-gorsel,

.ph-slayt.is-onceki .ph-gorsel {

    animation: phZoom calc(var(--ph-sure) + var(--ph-gecis) + 1500ms) cubic-bezier(.25, .46, .45, .94) both;

}


@keyframes phZoom {

    from { transform: scale(1.14); }

    to   { transform: scale(1); }

}


/* Karartma: klasik slider'daki .hero-overlay kullanılır */

.ph .hero-overlay {

    z-index: 1;

}


/* Mobil: üstte biraz daha koyu geçiş, şeffaf navbar'daki beyaz logo belirgin olsun
   (mevcut karartmanın üstüne ek katman) */
@media (max-width: 767.98px) {

    .ph .hero-overlay::before {

        content: "";

        position: absolute;

        inset: 0 0 auto;

        height: 30%;

        background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 100%);

    }

}


/* ==========================================
   YAZILAR
========================================== */

.ph-icerik {

    position: absolute;

    z-index: 3;

    top: 39%;

    left: 50%;

    width: 100%;

    max-width: 1320px;

    padding: 0 24px;

    transform: translate(-50%, -50%);

    pointer-events: none;

}


.ph-ust {

    display: inline-flex;

    align-items: center;

    margin-bottom: 20px;

    font-size: clamp(14px, 1.3vw, 19px);

    font-weight: 600;

    letter-spacing: 3px;

    opacity: 0;

}


.ph-baslik {

    max-width: 900px;

    margin: 0;

    font-size: clamp(38px, 4.2vw, 64px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;

}


/* Her satır kendi maskesinde */

.ph-satir {

    display: block;

    overflow: hidden;

    padding-bottom: .06em;

}


.ph-satir > span {

    display: inline-block;

    transform: translateY(110%);

}


/* Aktif slaytta giriş */

.ph-slayt.is-aktif .ph-ust {

    animation: phBelir .8s ease .35s both;

}


.ph-slayt.is-aktif .ph-satir > span {

    animation: phSatir 1s cubic-bezier(.2, .8, .2, 1) both;

    animation-delay: .55s;

}


.ph-slayt.is-aktif .ph-satir:nth-child(2) > span {

    animation-delay: .68s;

}


.ph-slayt.is-aktif .ph-satir:nth-child(3) > span {

    animation-delay: .81s;

}


/* Önceki slaytın yazısı perdenin altında yerinde kalsın */

.ph-slayt.is-onceki .ph-ust {

    opacity: 1;

}


.ph-slayt.is-onceki .ph-satir > span {

    transform: none;

}


@keyframes phBelir {

    from { opacity: 0; transform: translateY(12px); }

    to   { opacity: 1; transform: none; }

}


@keyframes phSatir {

    from { transform: translateY(110%); }

    to   { transform: none; }

}


/* ==========================================
   NAVİGASYON (masaüstü: sağda dikey liste)
========================================== */

/* Navigasyon tüm ekranlarda GÖRÜNMEZ (geçiş otomatik, mobilde parmakla kaydırma).
   display:none KULLANMA: otomatik geçişi .ph-dolum animasyonu tetikliyor,
   görünmez olsa da çalışmaya devam etmeli.
   Listeyi geri göstermek için visibility / pointer-events satırlarını sil. */

.ph-nav {

    position: absolute;

    visibility: hidden;

    pointer-events: none;


    z-index: 7;

    top: 39%;

    right: max(24px, calc((100vw - 1320px) / 2 + 24px));

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 18px;

    transform: translateY(-50%);

}


.ph-nav-liste {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.ph-nav-btn {

    display: grid;

    grid-template-columns: 150px;

    align-items: center;

    row-gap: 8px;

    padding: 0;

    color: #fff;

    text-align: left;

    background: none;

    border: 0;

    cursor: pointer;

    opacity: .55;

    transition: opacity .3s ease;

}


.ph-nav-btn:hover,

.ph-nav-btn.is-aktif {

    opacity: 1;

}


.ph-nav-btn:focus-visible {

    outline: 2px solid var(--ph-yesil);

    outline-offset: 6px;

}


.ph-nav-ad {

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* Süre çubuğu */

.ph-cubuk {

    grid-column: 1;

    position: relative;

    display: block;

    height: 2px;

    overflow: hidden;

    background: rgba(255, 255, 255, .25);

    border-radius: 2px;

}


.ph-dolum {

    position: absolute;

    inset: 0;

    background: #fff;

    transform: scaleX(0);

    transform-origin: left center;

}


.ph-nav-btn.is-aktif .ph-dolum {

    animation: phDolum var(--ph-sure) linear both;

}


.ph-nav-btn.is-gecti .ph-dolum {

    transform: scaleX(1);

    opacity: .5;

}


@keyframes phDolum {

    from { transform: scaleX(0); }

    to   { transform: scaleX(1); }

}


/* Sekme gizliyken / navigasyon üzerindeyken çubuk ve zoom bekler */

.ph.is-durdu .ph-dolum,

.ph.is-durdu .ph-gorsel {

    animation-play-state: paused !important;

}


/* Alt kartlar slaytların üstünde */

.ph .hero-features {

    z-index: 6;

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1199.98px) {

    .ph-nav-btn {

        grid-template-columns: 110px;

    }

    .ph-nav-ad {

        font-size: 12px;

    }

}


/* ==========================================
   MOBİL / TABLET
========================================== */

@media (max-width: 991.98px) {

    .ph {

        height: 720px;

        min-height: 0;

    }

    .ph-icerik {

        top: 35%;

    }

    .ph-baslik {

        font-size: 42px;

    }

}


@media (max-width: 575.98px) {

    .ph {

        height: 100svh;

        min-height: 600px;

    }

    .ph-icerik {

        top: 30%;

        left: 50%;

        width: calc(100% - 48px);

        padding: 0;

    }

    .ph-ust {

        margin-bottom: 14px;

        font-size: 15px;

        letter-spacing: 1.5px;

    }

    .ph-baslik {

        font-size: 34px;

        line-height: 1.12;

        letter-spacing: -.5px;

    }

}


/* ==========================================
   HAREKETİ AZALT: perde, zoom ve satır kayması yok
========================================== */

@media (prefers-reduced-motion: reduce) {

    .ph-slayt.is-giriyor {

        animation: phSade .5s ease both;

    }

    .ph-gorsel,

    .ph-slayt.is-aktif .ph-gorsel,

    .ph-slayt.is-onceki .ph-gorsel {

        animation: none;

        transform: none;

    }

    .ph-slayt.is-aktif .ph-ust,

    .ph-slayt.is-aktif .ph-satir > span {

        animation: none;

        opacity: 1;

        transform: none;

    }

    @keyframes phSade {

        from { opacity: 0; }

        to   { opacity: 1; }

    }

}


/* ==========================================
   MOBİL / TABLET: aktif slayt çubukları
   hero-features kutusunun altında görünür
   (masaüstünde navigasyon görünmez kalır)
========================================== */

@media (max-width: 991.98px) {

    .ph-nav {

        top: auto;

        right: 24px;

        bottom: 16px;

        left: 24px;

        flex-direction: row;

        align-items: center;

        transform: none;

        visibility: visible;

        pointer-events: auto;

    }

    .ph-nav-liste {

        flex: 1;

        flex-direction: row;

        gap: 6px;

    }

    .ph-nav-liste li {

        flex: 1;

    }

    .ph-nav-btn {

        display: block;

        width: 100%;

        padding: 6px 0;

        opacity: 1;

    }

    .ph-nav-ad {

        display: none;

    }

    .ph-cubuk {

        height: 3px;

    }

}


@media (max-width: 575.98px) {

    .ph-nav {

        right: 14px;

        bottom: 8px;

        left: 14px;

    }

    /* Çubuklara yer açmak için kutu biraz yukarıda */

    .ph .hero-features {

        bottom: 34px;

    }

}


/* ==========================================
   MOBİL: slider ekranın ~%88'i
   Altta bir sonraki bölümün başı görünsün,
   ziyaretçi sayfanın devam ettiğini anlasın.
========================================== */

@media (max-width: 575.98px) {

    .ph {

        height: 88svh;

        min-height: 560px;

    }

}


/* Mobil: slider yazıları biraz daha aşağıda, dikeyde ortaya yakın */

@media (max-width: 575.98px) {

    .ph-icerik {

        top: 44%;

    }

}


/* ==========================================
   MASAÜSTÜ: slider = ekran yüksekliği - 215px (en az 540, en fazla 840px)
   İlk açılışta altta kısayol kartlarının ikonları görünsün,
   ziyaretçi sayfanın devam ettiğini anlasın.
========================================== */

@media (min-width: 992px) {

    .ph {

        /* Ekran yüksekliğinden kısayol ikonları için pay bırak */
        height: min(calc(100svh - 215px), 840px);

        min-height: 540px;

    }

}



/* Masaüstü: kısalan slider'da başlık navbar + bilgi şeridine yaklaşmasın */

@media (min-width: 992px) {

    .ph-icerik {

        top: 44%;

    }

}


/* ==========================================
   SLIDER YÜKSEKLİĞİ (iç sayfa bannerından biraz yüksek)
   slider: 530 / 430 / 590px  (.page-banner: 460 / 380 / 320px)

   Önceki yükseklik kurallarının hepsini ezer.
   Kısa alanda sığsın diye içerik banner gibi ALTTAN
   hizalanır, yazı boyutları yüksekliğe göre küçültüldü.
   Buton (.ph-cta) içeriğin altında, çubuklar en altta.
========================================== */


/* MASAÜSTÜ: 600px */

.ph {

    height: 600px;

    min-height: 0;

}


/* Laptop ekranlarında aynı yerleşim: büyük ekrandaki oran korunur
   (en fazla 600px; laptopta görünen alanın ~%72'si). Kısa ekranda orantılı kısalır,
   altındaki kısayol kartları yine ilk ekranda görünür. */
@media (min-width: 992px) {

    .ph {

        height: min(600px, 72svh);

        min-height: 460px;

    }

}


.ph-icerik {

    top: auto;

    bottom: 130px;

    transform: translateX(-50%);

}


.ph-ust {

    margin-bottom: 12px;

    font-size: 15px;

    letter-spacing: 2.5px;

}


.ph-baslik {

    font-size: clamp(34px, 3.3vw, 50px);

    line-height: 1.1;

    letter-spacing: -1px;

}


.ph-cta {

    top: auto !important;

    bottom: 50px !important;

}


/* TABLET: 380px */

@media (max-width: 991.98px) {

    .ph {

        height: 430px;

        min-height: 0;

    }

    .ph-icerik {

        top: auto;

        bottom: 110px;

    }

    .ph-ust {

        font-size: 14px;

    }

    .ph-baslik {

        font-size: 36px;

    }

    .ph-cta {

        bottom: 44px !important;

    }

}


/* MOBİL: 320px */

@media (max-width: 767.98px) {

    .ph {

        height: 320px;

        min-height: 0;

    }

    .ph-icerik {

        top: auto;

        bottom: 92px;

        left: 50%;

        width: calc(100% - 48px);

        padding: 0;

    }

    .ph-ust {

        margin-bottom: 8px;

        font-size: 12px;

        letter-spacing: 1.5px;

    }

    .ph-baslik {

        font-size: 26px;

        line-height: 1.15;

        letter-spacing: -.3px;

    }

    .ph-cta {

        left: 24px !important;

        bottom: 34px !important;

        gap: 10px;

        padding: 11px 18px;

        font-size: 12px;

        letter-spacing: 1.5px;

    }

    .ph-cta span {

        font-size: 14px;

    }

    /* Çubuklar en altta, butonun altında */

    .ph-nav {

        right: 24px;

        bottom: 6px;

        left: 24px;

    }

    .ph-nav-btn {

        padding: 6px 0;

    }

}


/* Mobil: slider biraz daha yüksek (banner 320px'ten farklı) */

@media (max-width: 767.98px) {

    .ph {

        height: 590px;

    }

    .ph-icerik {

        bottom: 120px;

    }

    .ph-baslik {

        font-size: 28px;

    }

}


/* Kısa telefon ekranı (ör. 375x667): slider biraz alçak,
   altındaki hızlı erişim kartları ilk ekranda görünsün */

@media (max-width: 767.98px) and (max-height: 700px) {

    .ph {

        height: 480px;

    }

}


/* Görselin önemli kısmı altta olan slaytlar (ör. slide5: tente üstte, mağazalar altta) */

.ph-gorsel--alt {

    object-position: center 68%;

    transform-origin: center 68%;

}


/* Odak ortanın biraz altında (ör. slide7: kale kapısı ve kuleler) */

.ph-gorsel--ust {

    object-position: center 18%;

    transform-origin: center 18%;

}


.ph-gorsel--orta-alt {

    object-position: center 58%;

    transform-origin: center 58%;

}


/* Geniş açı: odak ortada (ör. slide7: kalenin kuleleri ve kapısı), yakınlaşma efekti var */

.ph-gorsel--genis {

    object-position: center 50%;

    transform-origin: center 50%;

}


/* ==========================================
   GİRİŞE DOĞRU YAKINLAŞMA (ör. slide7: lunapark kalesi kapısı)
   Geniş açıyla başlar, slayt boyunca alt ortadaki
   mağaza girişine doğru yavaşça yaklaşır.
========================================== */

.ph-gorsel--giris {

    /* Kadraj alta yakın: kemerli kapı ve içerisi tam görünsün */
    object-position: center 80%;

    transform: scale(1);

    /* Yakınlaşma tam kapının ortasına */
    transform-origin: 50% 75%;

}


.ph-slayt.is-aktif .ph-gorsel--giris,

.ph-slayt.is-onceki .ph-gorsel--giris {

    animation-name: phZoomGiris;

}


@keyframes phZoomGiris {

    from { transform: scale(1); }

    to   { transform: scale(1.18); }

}


@media (prefers-reduced-motion: reduce) {

    .ph-slayt.is-aktif .ph-gorsel--giris,

    .ph-slayt.is-onceki .ph-gorsel--giris {

        animation: none;

        transform: none;

    }

}


/* ==========================================
   SLIDER BUTONLARI (.ph-cta-grup; panel > Ana Sayfa > Slider Butonları)
   Butonlar başlıkla aynı sol hizada, yan yana; grup en fazla
   600px genişler (sığmazsa alt satıra geçer, başlık alanını aşmaz).
   Mobilde (767px ve altı) alt alta, aynı genişlikte; 2+ butonda
   başlık yukarı kayar (.ph-cta-grup--coklu).
   .ph-cta--cizgi: şeffaf, beyaz çerçeveli ikincil buton.
   Hava durumu (.ph-hava) grubun dışında, tablette sağ altta.
========================================== */

.ph-cta-grup {

    position: absolute;

    z-index: 6;

    bottom: 50px;

    left: calc(max(0px, (100% - 1320px) / 2) + 24px);

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

    max-width: min(600px, calc(100% - 48px));

}

.ph-cta-grup .ph-cta {

    position: static !important;

    top: auto !important;

    bottom: auto !important;

    left: auto !important;

}

.ph-cta--cizgi {

    color: #fff;

    background: rgba(0, 0, 0, .22);

    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9);

    -webkit-backdrop-filter: blur(6px);

    backdrop-filter: blur(6px);

}

.ph-cta--cizgi:hover,
.ph-cta--cizgi:focus-visible,
.ph-cta--cizgi:active {

    box-shadow: none;

}

@media (max-width: 991.98px) {

    .ph-cta-grup {

        bottom: 44px;

    }

}

@media (max-width: 767.98px) {

    .ph-cta-grup {

        bottom: 34px;

        left: 24px;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        max-width: calc(100% - 48px);

    }

    .ph-cta-grup .ph-cta {

        justify-content: space-between;

    }

    .ph:has(.ph-cta-grup--coklu) .ph-icerik {

        bottom: 168px;

    }

    .ph-cta-grup .ph-hava {

        display: none !important;

    }

}

/* ==========================================
   CANLI RENKLER: HAFİF KARARTMA
   Eski karartma (style.css .hero-overlay) fotoğrafın tamamını
   %15-65 siyahla örtüyordu: altın / kırmızı tonlar kahverengiye dönüyordu.
   Yeni: koyuluk sadece yazının arkasında (sol), orta ve sağ açık.
   Okunurluk için yazılara yumuşak gölge, görsele hafif canlılık.
========================================== */

.ph .hero-overlay {

    background:
        linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 16%),
        linear-gradient(90deg, rgba(0, 0, 0, .36) 0%, rgba(0, 0, 0, .20) 32%, rgba(0, 0, 0, .03) 60%, rgba(0, 0, 0, 0) 100%);

}

.ph .ph-gorsel {

    filter: saturate(1.08) contrast(1.03);

}

.ph .ph-ust,
.ph .ph-baslik {

    text-shadow: 0 2px 16px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);

}

@media (max-width: 575.98px) {

    .ph .hero-overlay {

        background: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, .18) 100%);

    }

}


/* ==========================================
   SLIDER YÜKSEKLİĞİ SEÇENEKLERİ (panel > Ana Sayfa > Slider)
   Sınıf yoksa yukarıdaki varsayılan yükseklikler geçerli
   (masaüstü %72 / en fazla 600px, tablet 430px, mobil 590px).
   ph--masa-*  : 768px ve üstü (tablet + masaüstü)
   ph--mobil-* : 767px ve altı
   Navbar slider'ın üstünde durduğu için %100 = ekranın tamamı.
   En az yükseklik: yazı + butonlar sığsın (masaüstü 460px, mobil 440px).
========================================== */

@media (min-width: 768px) {

    .ph.ph--masa-100 {

        height: 100svh;

        min-height: 460px;

    }

    .ph.ph--masa-90 {

        height: 90svh;

        min-height: 460px;

    }

    .ph.ph--masa-80 {

        height: 80svh;

        min-height: 460px;

    }

    .ph.ph--masa-70 {

        height: 70svh;

        min-height: 460px;

    }

    .ph.ph--masa-60 {

        height: 60svh;

        min-height: 460px;

    }

    .ph.ph--masa-50 {

        height: 50svh;

        min-height: 460px;

    }

}

@media (max-width: 767.98px) {

    .ph.ph--mobil-100 {

        height: 100svh;

        min-height: 440px;

    }

    .ph.ph--mobil-90 {

        height: 90svh;

        min-height: 440px;

    }

    .ph.ph--mobil-80 {

        height: 80svh;

        min-height: 440px;

    }

    .ph.ph--mobil-70 {

        height: 70svh;

        min-height: 440px;

    }

    .ph.ph--mobil-60 {

        height: 60svh;

        min-height: 440px;

    }

    .ph.ph--mobil-50 {

        height: 50svh;

        min-height: 440px;

    }

}