/* ============================================================
   Akıllı Yem Ürün Detay Video — Stiller
   ============================================================ */

/* ============================================================
   GALERİ ↔ ÖZET SÜTUNLARI ARASI GENEL BOŞLUK
   ------------------------------------------------------------
   ÖNEMLİ (DÜZELTİLDİ 2): Tam sayfa HTML kaynağını inceleyince
   şunu gördük — "kadence-woocommerce-css" (temanın kendi WC
   stil dosyası) bizim CSS'imizden SONRA yükleniyor. Eğer o
   dosyada ".product" için eşit özgüllükte ve !important içeren
   BİR kural varsa, SONRADAN yüklendiği için kazanıyordu (CSS'te
   eşit özgüllükte son gelen kural kazanır — !important bile bu
   kuralı değiştirmez). Bu yüzden seçicilerin özgüllüğünü,
   temanın makul hiçbir kuralının yenemeyeceği kadar YAPAY
   OLARAK ARTIRIYORUZ: sınıfı tekrarlayıp (".product.product")
   ve body'de zaten var olan "woocommerce" sınıfını da ekleyip
   (".single-product.woocommerce div.product.product").
   ============================================================ */
@media (min-width: 768px) {
    .single-product.woocommerce div.product.product {
        display: flex !important;
        flex-wrap: wrap !important;
        column-gap: 32px !important;
        row-gap: 40px !important;
    }

    .single-product.woocommerce div.product.product .images,
    .single-product.woocommerce div.product.product div.woocommerce-product-gallery {
        box-sizing: border-box !important;
        margin: 0 !important;
        width: calc(62% - 16px) !important;
        flex: 0 0 calc(62% - 16px) !important;
        max-width: calc(62% - 16px) !important;
    }
    .single-product.woocommerce div.product.product .summary.entry-summary {
        box-sizing: border-box !important;
        margin: 0 !important;
        width: calc(38% - 16px) !important;
        flex: 0 0 calc(38% - 16px) !important;
        max-width: calc(38% - 16px) !important;
    }

    /* .images ve .summary DIŞINDAKİ her şey (Müşteri Tecrübeleri,
       Açıklama/Ek bilgi sekmeleri, İlgili Ürünler) tam genişlikte
       kendi satırına düşsün — üçüncü sütun olup düzeni bozmasın. */
    .single-product.woocommerce div.product.product > *:not(.images):not(.summary) {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ============================================================
   SABİT ORAN — TÜM galeri slaytları (video + gerçek fotoğraflar)
   aynı yatay (16:9) kutuya oturur. Böylece:
   - Video hiç kırpılmadan, siyah boşluksuz tam oturur (kutu zaten
     videonun kendi doğal oranıyla birebir aynı)
   - Ürün fotoğrafları bu kutunun içine object-fit:contain ile
     sığdırılır (gerekirse küçülerek, kırpılmadan)
   - Slayt değiştikçe kutunun yüksekliği DEĞİŞMEZ, küçük resim
     şeridi yukarı/aşağı kaymaz
   ============================================================ */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;  /* Yatay video oranı — YouTube videoları bu kutuya
                               kırpılmadan/siyah boşluksuz tam oturur. Ürün
                               fotoğrafları object-fit:contain ile bu kutunun
                               içine sığdırılır (gerekirse küçülerek). */
    overflow: hidden;
}

.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    display: block;
}

.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
    /* ÖNEMLİ: img'ye artık "position: absolute" VERMİYORUZ.
       Kutuyu dolduran zaten üstteki <a> — img sadece o <a>'nın
       içinde normal akışta %100 genişlik/yükseklikte duruyor.
       Önceki sürümde img de "position:absolute !important" idi;
       bu, WooCommerce'in resme üzerine gelince açtığı yakınlaştırma
       (zoom) özelliğinin kendi eklediği satır-içi stillerle
       çakışıp o özelliği devre dışı bırakıyordu. Bu şekilde hem
       fotoğraf kutuya kırpılmadan sığıyor hem de yerli WooCommerce
       zoom'u satır-içi stilleri normal şekilde uygulayabiliyor. */
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    /* Gerçek ürün fotoğrafları kırpılmadan, olduğu gibi sığdırılır.
       !important, temanın/eklentinin resme kendi inline boyutunu
       (width/height/style) dayatmasını engellemek için gerekli —
       aksi halde resim kendi orijinal (589x915) boyutunda kalıp
       kutunun disina tasip sadece bir kosesi gorunuyordu. */
    object-fit: contain !important;
}

.aydv-video-slide {
    background: #000;
}

.aydv-video-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.aydv-video-inner iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================================
   ALT KÜÇÜK RESİM (THUMBNAIL) ŞERİDİ
   ------------------------------------------------------------
   WooCommerce/FlexSlider bu şeridi ".flex-control-nav" listesi
   olarak otomatik üretir (her <li> içinde tek bir <img> olur,
   <a> etiketi YOKTUR — bir önceki sürümdeki ":first-child a"
   seçicisi bu yüzden hiç eşleşmiyordu ve oynatma ikonu
   görünmüyordu). Burada tüm şeridi bir çerçeve içine alıyor,
   küçük resimleri belirginleştiriyor ve video küçük resmine
   gerçekten görünen bir oynatma ikonu ekliyoruz.

   Marka rengini kendi temanıza göre ayarlamak isterseniz, sadece
   aşağıdaki --aydv-accent değerini değiştirmeniz yeterli.
   ============================================================ */
:root {
    --aydv-accent: var(--global-palette3, #5b2c7a);
}

.woocommerce-product-gallery .flex-control-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 16px 0 0 !important;
    padding: 12px !important;
    background: #faf9f7;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;
}

.woocommerce-product-gallery .flex-control-nav li {
    position: relative;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 0;
}

.woocommerce-product-gallery .flex-control-nav li img {
    display: block;
    width: 80px;
    height: 80px;
    /* object-fit:cover köşeleri/kenarları kırpıyordu (özellikle video
       küçük resmi kare olmadığı için önemli kısımları taşıp
       görünmüyordu). contain ile resmin TAMAMI kutuya kırpılmadan
       sığar; kutuda boşluk kalırsa arkadaki background rengiyle
       (aşağıda) doldurulur. object-position ile de resim kutunun
       tam ortasına (hem yatay hem dikey) yerleşir — !important,
       temanın kendi img stilinin bunu ezmesine karşı. */
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    background: #f2f1ee;
    border-radius: 6px;
    border: 2px solid #fff;
    outline: 1px solid rgba(0, 0, 0, .12);
    opacity: .8;
    cursor: pointer;
    transition: opacity .2s ease, outline-color .2s ease, transform .15s ease;
}

.woocommerce-product-gallery .flex-control-nav li img:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Seçili (aktif) küçük resim — FlexSlider bu class'ı otomatik ekler */
.woocommerce-product-gallery .flex-control-nav li img.flex-active {
    opacity: 1;
    border-color: #fff;
    outline: 2px solid var(--aydv-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* Video küçük resmi (her zaman ilk sırada) üstüne oynatma ikonu.
   SADECE üründe gerçekten video varsa görünsün diye "aydv-has-video"
   body sınıfıyla sınırlandırıyoruz. */
body.aydv-has-video .woocommerce-product-gallery .flex-control-nav li:first-child::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
    pointer-events: none;
}

/* ============================================================
   BÜYÜK RESİM ÜZERİNDE MERCEK (YAKINLAŞTIRMA) EFEKTİ
   ------------------------------------------------------------
   Bu efekt artık WooCommerce/temanın kendi zoom özelliğine
   bağımlı DEĞİL — detail-video.js içinde kendi yakınlaştırma
   mantığımızı kuruyoruz, böylece tema/WC tarafında zoom neden
   çalışmıyor olursa olsun bu özellik güvenilir şekilde çalışır.
   Sadece GERÇEK fotoğraf slaytlarında aktif olur, video slaydında
   görünmez (video zaten kendi oynatıcısı).
   ============================================================ */
.aydv-zoom-lens {
    position: absolute;
    display: none;
    pointer-events: none;
    border: 2px solid #fff;
    border-radius: 6px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
    background-repeat: no-repeat;
    background-color: #fff;
    z-index: 5;
}

.woocommerce-product-gallery__image:not(.aydv-video-slide) img {
    cursor: zoom-in;
}


/* ============================================================
   GALERİ KOLONUNU GENİŞLET — 16:9 kutu genişliğe bağlı olduğu
   için, yüksekliği artırmanın tek yolu genişliği de artırmak.
   WooCommerce'in standart .images / .summary kolon bölünmesini
   hedefliyoruz (çoğu temada bu sınıflar kullanılır). Temanız
   farklı bir grid/flex sınıfı kullanıyorsa bu kural tutmayabilir
   — o durumda gerçek sınıf adlarını paylaşırsanız düzeltiriz.
   ============================================================ */
@media (min-width: 768px) {
    .single-product div.product .images,
    .single-product div.product div.woocommerce-product-gallery {
        width: 62% !important;
        flex: 0 0 62% !important;
        max-width: 62% !important;
    }
    .single-product div.product .summary.entry-summary {
        width: 38% !important;
        flex: 0 0 38% !important;
        max-width: 38% !important;
    }
}

/* ============================================================
   ÜRÜN ÖZET ALANI (entry-summary) — ÜST BOŞLUĞU KALDIR
   ------------------------------------------------------------
   Kadence, başlık ile üstündeki alan arasına biraz boşluk
   bırakıyor; galeri/video ile aynı hizada başlamıyor gibi
   görünüyordu. Bu kural TÜM ürün sayfalarında (video olsun
   olmasın) özet kolonunu biraz yukarı çekip başlığın üstündeki
   boşluğu sıfırlıyor.
   ============================================================ */
.single-product div.product .summary.entry-summary {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.single-product div.product .summary.entry-summary > .product_title {
    margin-top: 0 !important;
}

/* ============================================================
   FİYATI AÇIKLAMANIN ALTINA AL
   ------------------------------------------------------------
   Varsayılan WooCommerce sırası: Başlık → Puan → Fiyat → Kısa
   Açıklama → Sepete Ekle → Meta. İstenen sıra: Başlık → Puan →
   Kısa Açıklama → Fiyat → Sepete Ekle → Meta.

   Özet kolonunu dikey flex kutusu yapıp her doğrudan alt öğeye
   "order" vererek DOM'a hiç dokunmadan sırayı değiştiriyoruz.
   Bu kural da TÜM ürün sayfalarında geçerli (sadece video
   sayfalarında değil).

   NOT: Temanız kısa açıklamayı/fiyatı farklı bir sarmalayıcı
   içine koyuyorsa (ör. özel bir Kadence bloğu), gerçek sınıf
   adını bize iletirseniz seçicileri ona göre güncelleriz.
   ============================================================ */
.single-product div.product .summary.entry-summary {
    display: flex;
    flex-direction: column;
}

.single-product div.product .summary.entry-summary > .product_title {
    order: 1;
}

.single-product div.product .summary.entry-summary > .woocommerce-product-rating {
    order: 2;
}

.single-product div.product .summary.entry-summary > .woocommerce-product-details__short-description {
    order: 3;
}

.single-product div.product .summary.entry-summary > .price {
    order: 4;
    margin: 16px 0 !important;
}

.single-product div.product .summary.entry-summary > form.cart {
    order: 5;
}

.single-product div.product .summary.entry-summary > .product_meta {
    order: 6;
}

/* ============================================================
   FİYAT ve "ÜCRETSİZ KARGO" ROZETİ — YAPISAL (renk/boyut/kalınlık
   ARTIK BURADA DEĞİL)
   ------------------------------------------------------------
   Renk, boyut, kalınlık, arka plan ve köşe yuvarlaklığı artık
   sabit kodlanmış değil — Yönetim Paneli > Ürün Detay Video
   sayfasından ayarlanıyor ve otomatik olarak enjekte ediliyor
   (bkz. akilli-yem-urun-detay-video.php -> ozel_gorunum_css()).
   Burada sadece DÜZEN (yerleşim) ile ilgili, panelden kontrol
   edilmeyen yapısal kurallar kalıyor.

   Fiyatın kendisi:          .aydv-price-line .woocommerce-Price-amount
   "Ücretsiz Kargo" yazısı:  .aydv-kargo-badge
   ============================================================ */
.single-product div.product .summary.entry-summary .aydv-price-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
}

.single-product div.product .summary.entry-summary .aydv-kargo-badge {
    padding: 4px 10px;   /* rozetin iç boşluğu — panelde yok, sabit tutuldu */
    display: inline-block;
}

/* ============================================================
   KISA AÇIKLAMA ALANI İLE GALERİ (VİDEO) YÜKSEKLİĞİNİ EŞİTLE
   ------------------------------------------------------------
   ÖNEMLİ: Bu kurallar SADECE "aydv-has-video" class'ı <body>'de
   varken çalışır (yani üründe gerçekten video varsa). Bu class
   PHP tarafından otomatik ekleniyor. Böylece videosu OLMAYAN
   ürün sayfalarının (sekmeli Açıklama/Ek bilgi/İlgili Ürünler
   düzeni) hiç etkilenmez — önceki sürümde bu kısıtlama yoktu ve
   tüm ürün sayfalarında düzeni bozuyordu.

   .product zaten flex konteyner (yukarıdaki flex: 0 0 %62/%38
   kuralları bunu varsayıyor). align-items: stretch ile kısa
   sütun (summary), uzun sütunun (images/video) yüksekliğine
   otomatik uzatılır. Ardından summary'yi dikey flex yapıp,
   içindeki kısa açıklama kutusunu flex: 1 ile büyüterek, kutunun
   alt kenarının videonun alt kenarıyla hizalanmasını sağlıyoruz.

   NOT: Kısa açıklama kutunuzun gerçek CSS sınıfı farklıysa
   (tarayıcıda "İncele" ile kontrol edin), aşağıdaki
   ".woocommerce-product-details__short-description" satırındaki
   sınıf adını kendi sınıfınızla değiştirin. JS tarafında ayrıca
   birkaç olası sınıf otomatik deneniyor (bkz. detail-video.js).
   ============================================================ */
@media (min-width: 768px) {
    body.aydv-has-video.woocommerce div.product.product {
        display: flex !important;
        /* wrap ŞART: aşağıdaki "*:not(.images):not(.summary)" kuralıyla
           tam genişliğe zorlanan elemanların (Müşteri Tecrübeleri,
           Açıklama sekmeleri, İlgili Ürünler) ALT SATIRA düşebilmesi
           için gerekli. nowrap ile bunlar aynı satırda sıkışıp yanlış
           yere sütun gibi diziliyordu. Sütunların dar ekranda alt alta
           düşme riski ise, aşağıdaki calc(62% - 16px) / calc(38% - 16px)
           genişlikleriyle zaten çözülmüş durumda (toplam tam %100). */
        flex-wrap: wrap !important;
        align-items: stretch !important;
        /* row-gap / column-gap ayrı ayrı: sütunlar arası 32px yatay
           boşluk, satırlar arası ise 40px dikey boşluk. Tek "gap"
           kullanılsaydı ikisi de aynı olurdu. */
        column-gap: 32px !important;
        row-gap: 40px !important;
    }

    /* .images/.summary'nin genişliğini, eklenen gap'i hesaba katarak
       yeniden hesaplıyoruz (aksi halde 62% + 38% + 32px = %100'ü aşar
       ve sütunlar taşar / alt satıra kayar). Video sayfalarında bu
       kural yukarıdaki genel 62/38 kuralının yerini alır (daha
       spesifik olduğu için kazanır). */
    body.aydv-has-video.woocommerce div.product.product .images,
    body.aydv-has-video.woocommerce div.product.product div.woocommerce-product-gallery {
        box-sizing: border-box !important;
        margin: 0 !important;
        width: calc(62% - 16px) !important;
        flex: 0 0 calc(62% - 16px) !important;
        max-width: calc(62% - 16px) !important;
    }
    body.aydv-has-video.woocommerce div.product.product .summary.entry-summary {
        box-sizing: border-box !important;
        margin: 0 !important;
        width: calc(38% - 16px) !important;
        flex: 0 0 calc(38% - 16px) !important;
        max-width: calc(38% - 16px) !important;
    }

    /* .images ve .summary DIŞINDAKİ her şey (sekmeler: Açıklama/
       Ek bilgi, İlgili Ürünler vb.) tam genişlikte kendi satırına
       düşsün — flex satırına üçüncü sütun olarak girip düzeni
       bozmasın. */
    body.aydv-has-video.woocommerce div.product.product > *:not(.images):not(.summary) {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.aydv-has-video.woocommerce div.product.product .summary.entry-summary {
        display: flex !important;
        flex-direction: column !important;
    }

    body.aydv-has-video.woocommerce div.product.product .summary.entry-summary
        .woocommerce-product-details__short-description {
        /* ÖNEMLİ: flex:1 + justify-content:center KALDIRILDI.
           O kural kutuyu zorla tüm sütun boyuna uzatıp içeriği
           dikeyde ortalıyordu — bu da kutunun altında (Sipariş Ver
           butonuna kadar) devasa boş alan bırakıyordu. Artık kutu
           kendi doğal yüksekliğinde kalıyor, buton hemen altına
           yapışıyor. (Fiyat artık açıklamanın ALTINDA olduğu için
           üst boşluk burada değil, fiyatın kendi margin'inde —
           yukarıdaki ".price" kuralına bakın.) */
        flex: 0 0 auto;
    }

    /* Kutu artık sütunu doldurmuyor, dolayısıyla sütunun altında
       boş alan kalabilir. Bu boşluğu en alta (Stok kodu/Kategori/
       Marka bilgisinin bulunduğu WooCommerce standart .product_meta
       alanına) iterek, kutu ile Sipariş Ver butonunun (ve aradaki
       diğer içeriğin) birbirine yakın kalmasını sağlıyoruz. Sitenizde
       .product_meta yoksa bu kural sessizce hiçbir şey yapmaz,
       zararı olmaz. */
    body.aydv-has-video.woocommerce div.product.product .summary.entry-summary
        .product_meta {
        margin-top: auto !important;
    }
}

/* ============================================================
   ÖZEL LIGHTBOX (POPUP) — Ürün fotoğrafı büyük gösterim penceresi
   WooCommerce'in kendi PhotoSwipe'ı yerine, bu sitede güvenilir
   çalışan kendi hafif popup'ımız.
   ============================================================ */
.aydv-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    /* Daha az koyu — arkadaki sayfa hafifçe seçilsin */
    background: rgba(20, 14, 20, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    box-sizing: border-box;
}

.aydv-lightbox-overlay.aydv-lightbox-acik {
    opacity: 1;
    visibility: visible;
}

/* Resmi saran bir "çerçeve" — kapatma düğmesi artık ekranın uzak
   köşesinde değil, doğrudan RESMİN köşesinde duracak */
.aydv-lightbox-cerceve {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    max-height: 100%;
}

.aydv-lightbox-resim {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    display: block;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    transform: scale(.96);
    transition: transform .25s ease;
    background: #fff;
}

.aydv-lightbox-overlay.aydv-lightbox-acik .aydv-lightbox-resim {
    transform: scale(1);
}

/* Kapatma düğmesi: resmin sağ üst köşesinde, hafifçe üzerine taşan,
   kırmızı, belirgin bir "rozet" gibi */
.aydv-lightbox-kapat {
    position: absolute;
    top: -16px;
    right: -16px;
    box-sizing: border-box;   /* kenarlık genişliğe dahil olsun, oval olmasın */
    width: 38px;
    height: 38px;
    min-width: 38px;          /* temanın buton stillerinin genişliği ezmesine karşı */
    min-height: 38px;
    padding: 0;                /* temanın varsayılan buton iç boşluğunu sıfırla */
    margin: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #E63946;
    color: transparent;        /* eski "×" yazı karakteri artık görünmesin */
    font-size: 0;               /* yazı tabanlı hizalama sapmasını tamamen devre dışı bırak */
    line-height: 0;
    cursor: pointer;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    transition: background .2s ease, transform .2s ease;
    transform-origin: 50% 50%;  /* dönüş kesinlikle tam merkezden olsun */
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
}

/* X işaretini yazı karakteriyle DEĞİL, iki çizgiyle çiziyoruz —
   böylece yazı tipi/satır yüksekliği kaynaklı kayma (yalpalama)
   ihtimali sıfıra iner, dönüş her zaman tam merkezden olur. */
.aydv-lightbox-kapat::before,
.aydv-lightbox-kapat::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.aydv-lightbox-kapat::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.aydv-lightbox-kapat::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.aydv-lightbox-kapat:hover {
    background: #C1121F;
    transform: scale(1.12) rotate(90deg);
}

/* Popup açıkken arka planın kaymasını engelle */
body.aydv-lightbox-kilitli {
    overflow: hidden;
}

/* ============================================================
   3) ÜRÜN BAŞLIĞI ile KISA AÇIKLAMA KUTUSU ARASI BOŞLUK
   Şu an çok yapışık duruyordu, biraz nefes payı veriyoruz.
   ============================================================ */
.single-product div.product .summary.entry-summary .product_title {
    margin-bottom: 18px !important;
}

/* ============================================================
   4) KISA AÇIKLAMA ↔ FİYAT boşluğu, FİYAT ↔ BUTON boşluğuyla
   eşitlendi (ikisi de aynı küçük değer).
   ============================================================ */
.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description {
    margin-bottom: 12px !important;
}
.single-product div.product .summary.entry-summary p.price,
.single-product div.product .summary.entry-summary .aydv-price-line {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}