/* ============================================================
   PANTRA ÖZEL DÜZELTMELER
   Bu dosyayı styles.css'ten SONRA header.twig içine ekleyin:
   <link rel="stylesheet" href="catalog/view/theme/ht01/stylesheet/css/pantra-duzeltmeler.css">
   ============================================================ */

/* ------------------------------------------------------------
   1) HEADER MENÜ DÜZELTMESİ
   Sorun: Alt menüler (.sub-menu) "position:absolute" ile
   konumlanıyor ama üst menü öğesi (.menu-item) "position:relative"
   DEĞİL. Bu yüzden hangi menüye basılırsa basılsın, alt menü
   sayfadaki sabit bir noktaya (submenu-default: left:-110px) göre
   açılıyor; bu da "Üst Giyim"e basınca menünün "Kurumsal"ın altında
   açılmış gibi görünmesine sebep oluyor.

   Çözüm: Her menü öğesini kendi referans noktası yapıyoruz, böylece
   alt menü her zaman doğru üst öğenin tam altında açılır.
   ------------------------------------------------------------ */
.box-nav-ul .menu-item {
  position: relative;
}
.box-nav-ul .submenu-default {
  left: 0;
  right: auto;
}

/* ------------------------------------------------------------
   2) MOBİLDE SLIDER YAZI BOYUTU (Ana Sayfa Slaytı)
   Ana sayfanızda kullanılan gerçek slider dosyasını (slideshow.twig)
   inceleyip gerçek class'ları buldum: .slider-women .wrap-slider .box-content h1

   ÖNEMLİ NOT: "Font bozuldu" şikayetiniz muhtemelen bu sorunla aynı kökten
   geliyordu — galeri dosyamızdaki bir kural yanlışlıkla TÜM SİTENİN fontunu
   (Cormorant Garamond yerine düz bir sans-serif font) değiştiriyordu. Bunu
   yukarıda düzelttik (bkz. urun-galeri.css). Bu düzeltmeden sonra slider
   yazısı muhtemelen zaten normal/eski boyutuna dönecek, çünkü temanın kendi
   mobil kuralı (h1 için 34px) doğru fontla birlikte daha küçük görünür.

   Yine de ekstra güvenlik için, ana sayfa slaytının başlığını mobilde biraz
   daha küçültüyoruz (temanın kendi 34px mobil değerinden biraz daha aşağı):
   ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
  .slider-women .wrap-slider .box-content h1 {
    font-size: 28px !important;
    line-height: 34px !important;
  }
  .slider-women .wrap-slider .box-content p {
    font-size: 16px !important;
    line-height: 20px !important;
  }
}

/* ------------------------------------------------------------
   3) ÜRÜN AÇIKLAMASI - Sepete Ekle/Kalp butonunun altına taşındı
   product.twig içinde "description" artık burada da basılıyor.
   Buradaki kutuyu sağ kolonun diğer metinleriyle uyumlu, biraz
   daha sade/küçük punto ile gösteriyoruz (alttaki "Ürün Resimleri"
   sekmesindeki görsel galeri ile karışmasın diye görsel olarak
   ayırt edici bir üst çizgi eklendi).
   ------------------------------------------------------------ */
.product-short-description {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #e7e0d3);
  color: #6b6b6b;
  font-size: 14px;
  line-height: 1.7;
}
.product-short-description-content {
  max-height: 6.8em !important; /* ~4 satır */
  overflow: hidden !important;
  transition: max-height 0.3s ease;
}
.product-short-description.expanded .product-short-description-content {
  max-height: 1000px !important;
}
.product-short-description p {
  margin: 0;
}
.product-short-description-toggle {
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  color: var(--pantra-accent, #b5651d);
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

/* ------------------------------------------------------------
   4) ÜRÜN KARTLARI - MOBİLDE GÖRSEL YARISI KESİLİYORDU (kök sebep bulundu)
   Kaynak: vvsstyle.css içinde ürün kartı görseli SABİT bir yüksekliğe
   (height:340px) ve "object-position: top" ile ayarlanmış. Bu, ekran
   genişliği ne olursa olsun görseli hep aynı 340px yükseklikte kesiyor.
   Masaüstünde kartlar dar olduğu için fark edilmiyor, ama mobilde kart tek
   sütun ve çok daha geniş olduğu için görsel çok daha fazla büyütülüp
   kırpılıyor — ürünün sadece bir kısmı görünüyor.

   Çözüm: mobilde sabit piksel yükseklik yerine, ekran genişliğine göre
   orantılı ölçeklenen bir "aspect-ratio" (en-boy oranı) kullanıyoruz.
   Böylece görsel her zaman aynı ORANDA görünür, ekran genişliği
   büyüdükçe/küçüldükçe kırpma oranı bozulmaz.
   ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
  .vvsgUrunlerAnasayfa .prod-img {
    height: auto !important;
    aspect-ratio: 3 / 4;
  }
  .vvsgUrunlerAnasayfa .prod-img img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ------------------------------------------------------------
   5) ÜRÜN KARTLARINDA FİYAT RENGİ SİYAH
   ------------------------------------------------------------ */
.vvsgUrunlerAnasayfa .prod-text .price span.discounted {
  color: #000 !important;
}

/* ------------------------------------------------------------
   6) "SEPETE EKLE" BUTONU - "HEMEN AL" İLE AYNI RENK
   "Hemen Al" butonunun rengi (.fg-gray: #54565b, hover #2f2f2f)
   "Sepete Ekle" butonuna (#button-cart) da uygulanıyor.
   ------------------------------------------------------------ */
#button-cart.fg-cart-button {
  background-color: #54565b !important;
}
#button-cart.fg-cart-button:hover {
  background-color: #2f2f2f !important;
}

/* ------------------------------------------------------------
   7) FİYAT RENGİ SİYAH - Ürün Detay Sayfası + Ana Sayfa
   Kaynak: bu fiyatlar `var(--fgrootcolor)` veya `var(--primary)` adlı,
   admin panelinden ayarlanan bir "tema rengi" değişkenini kullanıyor
   (muhtemelen kırmızı/kırmızımsı ayarlanmış). Bu değişkeni SİTE GENELİNDE
   değiştirmiyoruz (başka yerlerde kasıtlı kullanılıyor olabilir), sadece
   fiyat metinlerini hedef alıp siyaha zorluyoruz.
   ------------------------------------------------------------ */
/* Ürün detay sayfası (mevcut fiyat; üstü çizili eski fiyat hariç) */
body .pro-detail-prize .prodetail__price:not(.old__price) {
  color: #000 !important;
}

/* Ana sayfa ürün listeleri (latest.twig / home_categories.twig) */
body .home-categories .card-product-info .price .text_primary {
  color: #000 !important;
}

/* ------------------------------------------------------------
   8) ÜRÜN DETAY SAYFASI - ADET SAYISI RENGİ SİYAH
   ------------------------------------------------------------ */
#input-quantity {
  color: #000 !important;
}

/* ------------------------------------------------------------
   9) "BENZER ÜRÜNLER" BAŞLIĞI - YAZI + ÇERÇEVE SİYAH
   ------------------------------------------------------------ */
.related-product-area h2.sec__title {
  color: #000 !important;
  border-color: #000 !important;
}

/* ------------------------------------------------------------
   10) "DEVAMINI GÖR / DAHA AZ GÖSTER" LİNKİ SİYAH
   ------------------------------------------------------------ */
.product-short-description-toggle {
  color: #000 !important;
}

/* ------------------------------------------------------------
   11) ANA SAYFA "YENİ SEZON ŞIKLIĞI" BUTONU - YAZI GÖRÜNMÜYORDU
   Sebep: buton açık/beyaz arka planlı ("btn-light-icon"), ama yazı rengi
   de beyaz kalıyordu (üstündeki bölümden miras) - beyaz üstüne beyaz,
   görünmez oluyordu. Sadece bu bölüme özel siyaha çevirdik.
   ------------------------------------------------------------ */
section.flat-spacing-19 .tf-btn.btn-light-icon {
  color: #000 !important;
  border: 1px solid #000 !important;
  background-color: #fff !important;
}

/* ------------------------------------------------------------
   12) FOOTER LOGO - MOBİLDE ORTADA DEĞİL, SOLA HİZALI OLSUN
   Sorun: Mobilde footer'daki logo, altındaki adres/telefon
   yazılarıyla aynı noktadan başlamak yerine ortada görünüyordu.
   Adres metni geniş olduğu için ortalanma orada fark edilmiyor,
   ama dar olan logo kutusunda belirgin bir boşluk oluşuyordu.

   Çözüm: Logonun bulunduğu kutuyu ve linki, olası tüm ortalama
   yöntemlerine (text-align, flex hizalama) karşı sola sabitliyoruz.
   ------------------------------------------------------------ */
@media only screen and (max-width: 991px) {
  .footer .footer-infor,
  .footer .footer-logo {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .footer .footer-logo a {
    display: block !important;
    width: fit-content !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer .footer-logo img {
    display: block !important;
    margin: 0 !important;
    float: none !important;
  }
  .footer .footer-infor > .footer-logo {
    margin-left: 0 !important;
  }
}

/* ------------------------------------------------------------
   13) TÜM SİTE - PEMBE/KIRMIZI VURGU RENKLERİ SİYAH OLSUN
   Bu tema, sayfalama (pagination) aktif sayfa rengi, link hover
   rengi, ikon vurguları gibi tüm "pembe/kırmızı" renkleri tek bir
   CSS değişkeninden (--primary) besliyor. Kaynağı (styles.css)
   :root içinde --primary: #db1215 (kırmızı) olarak tanımlı.
   Burada bu değişkeni siyaha çevirerek TÜM sitede pembe/kırmızı
   görünen her yeri (pagination, hover, vurgular vb.) tek seferde
   siyah-beyaz temaya uyduruyoruz.
   ------------------------------------------------------------ */
:root {
  --primary: #000000 !important;
  --red_1: #000000 !important;
  --fgrootcolor: #000000 !important;
}

/* Footer koyu (siyah) arkaplanlı olduğu için üstteki genel siyah
   hover rengi orada görünmez oluyor - footer linkleri için ayrıca
   beyaza çeviriyoruz. */
.footer ul.footer-menu-list li a:hover {
  color: #ffffff !important;
}

/* ------------------------------------------------------------
   14) ÜRÜN LİSTESİ SAYFALAMA (1, 2, |<, <, >, >|) - AKTİF SAYFA
   Bu sayfalama PHP tarafında (system/) üretiliyor, tam CSS sınıf
   adını göremedik. Olası tüm sayfalama bileşen sınıflarını
   (Bootstrap page-item/page-link ve temanın kendi pagination-item /
   pagination-link sınıfları) tek seferde siyaha sabitliyoruz.
   ------------------------------------------------------------ */
.pagination .page-item.active .page-link,
.pagination .page-link.active,
.pagination .active > .page-link,
.wg-pagination .active .pagination-item,
.tf-pagination-list .active .pagination-link,
ul.pagination li.active a,
ul.pagination li.active span {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Aktif olmayan sayfalama kutularının pembe/mor çerçevesi de siyaha dönsün */
.pagination .page-item .page-link,
.wg-pagination .pagination-item,
.tf-pagination-list .pagination-link,
ul.pagination li a,
ul.pagination li span {
  border-color: #000000 !important;
}

/* ------------------------------------------------------------
   15) SAYFALAMA - GERÇEK KAYNAK: vvsstyle.css (.pagination>li>a)
   Bu dosya eski tip (Bootstrap 3) ".pagination>li>a" seçicileri
   kullanıyor ve pembe rengi (#d4a593) hem normal, hem aktif, hem
   de mouse üzerine gelince (:hover) durumunda uyguluyor. Üçünü de
   siyaha sabitliyoruz.
   ------------------------------------------------------------ */
.pagination > li > a,
.pagination > li > span {
  color: #000000 !important;
  border-color: #000000 !important;
  background: #ffffff !important;
}

.pagination > li.active > a,
.pagination > li.active > span,
.pagination > li > a:hover,
.pagination > li.active > a:hover,
.pagination > li > span:hover,
.pagination > li.active > span:hover {
  color: #ffffff !important;
  border-color: #000000 !important;
  background-color: #000000 !important;
}

/* ------------------------------------------------------------
   16) ÜRÜN SEÇENEKLERİ (BEDEN vb.) - STOKTA OLMAYAN SEÇENEK
   Sorun: Stoğu biten bir beden (örn. XL) seçenek listesinden
   tamamen kayboluyordu (bkz. product.php düzeltmesi). Artık
   product.twig içinde bu seçenekler "disabled" olarak render
   ediliyor ve yanlarında "(Stokta Yok)" yazıyor. Burada sadece
   görsel olarak soluklaştırıp tıklanamaz hale getiriyoruz.
   ------------------------------------------------------------ */
#product select option:disabled {
  color: #999999;
}

.radio.out-of-stock {
  opacity: 0.5;
}
.radio.out-of-stock label {
  cursor: not-allowed;
}
.radio.out-of-stock .text-muted {
  color: #999999 !important;
  font-size: 12px;
  font-style: italic;
}