/* ============================================================================
   ADVERTISEMENT-PUBLIC.CSS — Tanıtımlar
   Ana sayfadaki yatay şerit (.sg-ads) + tanıtım detay sayfası (.sa-*).
   Sekonder sayfa başlığı (.sp-header) common.css içindedir.
   ============================================================================ */


/* ============================================================================
   ANA SAYFA — YATAY TANITIM ŞERİDİ
   ============================================================================ */

.sg-ads {
    padding: 70px 0 10px;
}

/* Kaydırma alanı container dışında: dar ekranda kenara kadar akar.
   data-reveal burada KULLANILMAZ — yatay taşma ile animasyon çakışıyor. */
.sg-ads__scroller {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 6px calc((100vw - 1140px) / 2) 22px;
    scrollbar-width: thin;
}

@media (max-width: 1200px) {
    .sg-ads__scroller {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.sg-ads__scroller::-webkit-scrollbar {
    height: 6px;
}

.sg-ads__scroller::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.45);
    border-radius: 999px;
}

.sg-ad-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sg-ad-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
}

.sg-ad-card__img-wrap {
    position: relative;
    height: 180px;
    background: #f1f3f5;
    overflow: hidden;
}

/* Görsel yüklenene kadar kayan parıltı (shimmer) iskeleti.
   .is-loading sınıfını index.js, görsel yüklendiğinde (veya hata verdiğinde) kaldırır. */
.sg-ad-card__img-wrap.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #f1f3f5 20%, #e6e9ec 40%, #f7f2e2 52%, #e6e9ec 64%, #f1f3f5 85%);
    background-size: 300% 100%;
    /* 2. animasyon: JS hiç çalışmazsa iskelet 8sn sonra kendini kaldırır. */
    animation: sgAdShimmer 1.3s ease-in-out infinite,
               sgAdSkeletonFallback .3s ease 8s forwards;
    z-index: 1;
}

@keyframes sgAdShimmer {
    0% { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}

@keyframes sgAdSkeletonFallback {
    to { opacity: 0; visibility: hidden; }
}

.sg-ad-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: transform .4s ease, opacity .45s ease;
}

/* Yüklenirken görsel ve rozetler gizli; iskelet kalkınca yumuşak geçişle belirir.
   8sn'lik gecikmeli animasyon: JS çalışmazsa içerik yine de görünür olur. */
.sg-ad-card__img-wrap.is-loading .sg-ad-card__img,
.sg-ad-card__img-wrap.is-loading .sg-ad-card__badges {
    opacity: 0;
    animation: sgAdRevealFallback .3s ease 8s forwards;
}

@keyframes sgAdRevealFallback {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-ad-card__img-wrap.is-loading::after {
        animation: sgAdSkeletonFallback .3s ease 8s forwards;
        background: #f1f3f5;
    }
}

.sg-ad-card:hover .sg-ad-card__img {
    transform: scale(1.05);
}

/* Sessiz video önizlemesi: kapağın üzerine biner, ilk kare gelince belirir
   (index.js → .is-playing). Tıklama karta (bağlantıya) geçsin diye etkileşimsiz. */
.sg-ad-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}

.sg-ad-card__img-wrap.is-playing .sg-ad-card__video {
    opacity: 1;
}

.sg-ad-card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    z-index: 2; /* shimmer iskeletinin üstünde kalır */
    transition: opacity .3s ease;
}

/* Rozetler de görselle birlikte gelsin. */
.sg-ad-card__img-wrap.is-loading .sg-ad-card__badges {
    opacity: 0;
}

.sg-ad-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
}

.sg-ad-card__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 16px 18px;
    flex: 1 1 auto;
}

.sg-ad-card__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: #101418;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--lh-snug);
}

.sg-ad-card__desc {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-body);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sg-ad-card__link {
    margin-top: auto;
    padding-top: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-gold, #d4af37);
}

.sg-ad-card__link i {
    transition: transform .25s ease;
}

.sg-ad-card:hover .sg-ad-card__link i {
    transform: translateX(4px);
}


/* ============================================================================
   DETAY SAYFASI
   ============================================================================ */

.sa-detail {
    padding: 54px 0 76px;
}

/* --- Başlıktaki kırıntı yolu ve meta --- */
.sa-crumb {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.5);
}

.sa-crumb a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color var(--t-fast, .18s ease);
}

.sa-crumb a:hover {
    color: var(--color-gold, #d4af37);
}

.sa-crumb i {
    font-size: 0.65rem;
    opacity: .55;
}

/* --- Galeri sahnesi ---
   Arka planda görselin bulanık kopyası, önde kırpılmamış tam görsel:
   her en-boy oranı boşluk bırakmadan oturur. */
.sa-stage {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg, 20px);
    overflow: hidden;
    background: #0e1216;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(16, 24, 40, 0.08));
    aspect-ratio: 4 / 3;
}

.sa-stage__blur {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.15) brightness(.62);
    transform: scale(1.06);
    transition: background-image var(--t-base, .32s ease);
}

.sa-stage__surface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    display: block;
}

.sa-stage__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--t-slow, .5s ease);
}

.sa-stage:hover .sa-stage__img {
    transform: scale(1.02);
}

/* --- Sahnedeki video ---
   Sayfa açılır açılmaz sessiz oynar; görsellerle aynı sahneyi paylaşır. */
.sa-stage__video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

.sa-stage__video[hidden],
.sa-stage__surface[hidden],
.sa-stage__unmute[hidden] {
    display: none;
}

.sa-stage__unmute {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(12, 14, 18, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--t-fast, .18s ease), border-color var(--t-fast, .18s ease);
}

.sa-stage.is-video .sa-stage__unmute:not([hidden]) {
    display: inline-flex;
}

.sa-stage__unmute:hover {
    background: var(--color-gold, #d4af37);
    border-color: var(--color-gold, #d4af37);
}

/* Video oynarken: büyüt ipucu gizlenir, sayaç oynatıcı kontrollerinin
   üzerine binmesin diye üste taşınır. */
.sa-stage.is-video .sa-stage__zoom {
    display: none;
}

.sa-stage.is-video .sa-stage__counter {
    top: 14px;
    bottom: auto;
}

/* Büyüt ipucu ve sayaç rozetleri */
.sa-stage__zoom,
.sa-stage__counter {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(12, 14, 18, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    pointer-events: none;
}

.sa-stage__zoom {
    left: 14px;
    bottom: 14px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t-fast, .18s ease), transform var(--t-fast, .18s ease);
}

.sa-stage:hover .sa-stage__zoom {
    opacity: 1;
    transform: translateY(0);
}

.sa-stage__counter {
    right: 14px;
    bottom: 14px;
}

.sa-stage__counter b {
    color: var(--color-gold-light, #e8ce7b);
}

/* Sahne okları */
.sa-stage__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(12, 14, 18, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--t-fast, .18s ease), background var(--t-fast, .18s ease), transform var(--t-fast, .18s ease);
}

.sa-stage:hover .sa-stage__nav {
    opacity: 1;
}

.sa-stage__nav:hover {
    background: var(--color-gold, #d4af37);
    border-color: var(--color-gold, #d4af37);
}

.sa-stage__nav--prev { left: 14px; }
.sa-stage__nav--next { right: 14px; }

/* Dokunmatik cihazda oklar ve ipucu hep görünür */
@media (hover: none) {
    .sa-stage__nav { opacity: 1; }
    .sa-stage__zoom { opacity: 1; transform: none; }
}

/* --- Küçük görseller --- */
.sa-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 14px 2px 4px;
    scrollbar-width: thin;
}

.sa-thumbs::-webkit-scrollbar { height: 6px; }

.sa-thumbs::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.4);
    border-radius: var(--radius-pill, 999px);
}

.sa-thumb {
    position: relative;
    flex: 0 0 92px;
    height: 68px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 10px);
    overflow: hidden;
    background: #f1f3f5;
    cursor: pointer;
    opacity: .6;
    transition: opacity var(--t-fast, .18s ease), transform var(--t-fast, .18s ease), box-shadow var(--t-fast, .18s ease);
}

.sa-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: inherit;
    transition: border-color var(--t-fast, .18s ease);
}

.sa-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video küçük görseli: kapağın üzerinde oynat simgesi */
.sa-thumb--video {
    background: #0e1216;
}

.sa-thumb__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(12, 14, 18, 0.38);
    color: #fff;
    font-size: 1.5rem;
}

.sa-thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.sa-thumb.is-active {
    opacity: 1;
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.28);
}

.sa-thumb.is-active::after {
    border-color: var(--color-gold, #d4af37);
}

/* --- Bilgi kolonu --- */
.sa-info {
    position: sticky;
    top: calc(var(--nav-h-scrolled, 62px) + 20px);
    padding: 28px 26px 26px;
    border-radius: var(--radius-lg, 20px);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(16, 24, 40, 0.06));
}

.sa-info__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-display);
    color: #101418;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-heading);
    margin: 8px 0 0;
    font-family: var(--font-display);
}

.sa-info__rule {
    display: block;
    width: 52px;
    height: 3px;
    margin: 16px 0 18px;
    border-radius: var(--radius-pill, 999px);
    background: var(--gold-gradient, linear-gradient(135deg, #e8ce7b, #d4af37 45%, #996515));
}

.sa-info__desc p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-body);
    margin: 0 0 12px;
}

.sa-info__desc p:last-child { margin-bottom: 0; }

/* Künye: kartın sağ altında, dikkat çekmeyen ince satır */
.sa-info__stamp {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 14px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #f1f3f5;
    font-size: var(--fs-xs);
    color: #98a2b3;
}

.sa-info__stamp i {
    color: var(--color-gold-soft, #c9a961);
    margin-right: 4px;
}

.sa-info__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.sa-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #495057;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: var(--transition, all .2s ease-in-out);
}

.sa-share:hover {
    border-color: var(--color-gold, #d4af37);
    color: var(--color-gold-dark, #996515);
}

.sa-share.is-done {
    border-color: rgba(25, 135, 84, 0.4);
    color: #198754;
}


/* ============================================================================
   TAM EKRAN GÖRSEL GÖRÜNTÜLEYİCİ (LIGHTBOX)
   ============================================================================ */

body.sa-noscroll {
    overflow: hidden;
}

.sa-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .2s var(--ease-out, ease);
}

.sa-lightbox.is-open {
    opacity: 1;
}

.sa-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 13, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sa-lightbox__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 68px 20px;
}

.sa-lightbox__stage img {
    max-width: min(1400px, 94vw);
    max-height: calc(100vh - 136px);
    /* Mobil tarayıcılarda adres çubuğu 100vh'yi taşırır; dvh destekleyen
       tarayıcılarda gerçek görünür yükseklik kullanılır. */
    max-height: calc(100dvh - 136px);
    object-fit: contain;
    border-radius: var(--radius-sm, 10px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    transform: scale(.97);
    transition: transform .28s var(--ease-out, ease);
}

.sa-lightbox.is-open .sa-lightbox__stage img {
    transform: scale(1);
}

.sa-lightbox__close {
    position: absolute;
    /* Çentikli cihazlarda kapat butonu durum çubuğunun altında kalsın */
    top: calc(18px + env(safe-area-inset-top, 0px));
    right: 18px;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: var(--transition, all .2s ease-in-out);
}

.sa-lightbox__close:hover {
    background: var(--color-gold, #d4af37);
    border-color: var(--color-gold, #d4af37);
}

.sa-lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
    transition: var(--transition, all .2s ease-in-out);
}

.sa-lightbox__nav:hover {
    background: var(--color-gold, #d4af37);
    border-color: var(--color-gold, #d4af37);
}

.sa-lightbox__nav--prev { left: 22px; }
.sa-lightbox__nav--next { right: 22px; }

.sa-lightbox__counter {
    position: absolute;
    /* iOS ana ekran çubuğunun üzerinde kalsın */
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 7px 16px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}

.sa-lightbox__counter b {
    color: var(--color-gold-light, #e8ce7b);
}


/* ============================================================================
   DAR EKRAN
   ============================================================================ */

@media (max-width: 991px) {
    .sa-info {
        position: static;
    }
}

@media (max-width: 767px) {
    .sa-detail {
        padding: 32px 0 52px;
    }

    /* Dar ekranda kare sahne: portre görseller de yatay görseller de
       makul büyüklükte kalır (3/2'de portre görsel çok küçülüyordu). */
    .sa-stage {
        aspect-ratio: 1 / 1;
        border-radius: var(--radius-md, 14px);
    }

    .sa-stage__nav {
        width: 36px;
        height: 36px;
        font-size: .85rem;
    }

    /* Dokunmatikte "Büyüt" ipucu yer kaplıyor; sayaç yeterli. */
    .sa-stage__zoom {
        display: none;
    }

    .sa-thumb {
        flex-basis: 78px;
        height: 58px;
    }

    .sa-info {
        padding: 22px 20px;
        border-radius: var(--radius-md, 14px);
    }

    .sg-ads {
        padding: 48px 0 6px;
    }

    .sa-lightbox__stage {
        padding: 60px 10px;
    }

    .sa-lightbox__nav {
        width: 40px;
        height: 40px;
        font-size: .95rem;
    }

    .sa-lightbox__nav--prev { left: 10px; }
    .sa-lightbox__nav--next { right: 10px; }
}