/* ==========================================================================
   Petra BBQ marka degiskenleri ve birden fazla widget'in paylastigi tema
   duzeltmeleri.

   style.css ve responsive.css satin alinan temanin dosyalari; tema
   guncellendiginde uzerine yazilmamalari icin markaya ait renkler ve ortak
   override'lar burada tutuluyor. head.php'de tema dosyalarindan SONRA
   yukleniyor, boylece gerekirse tema degiskenlerini de ezebilir.

   Tek bir bolume ozel stiller buraya DEGIL, ilgili widget'in kendi <style>
   blokuna yazilir; burasi sadece birden fazla yerde tekrarlanacak olanlar
   icin.
   ========================================================================== */

:root {
  /* Logodaki koyu gri. Secili varyant kartlarinda kullaniliyor. */
  --logo--grey--color: #494949;

  /* Yikici islem / hata rengi. Temada karsiligi yok; silme butonu gibi geri
     alinamayan eylemlerde kullaniliyor. */
  --hata--color: #d92d20;
}

/* --------------------------------------------------------------------------
   URUN KARTI HOVER
   Ayni kart uc yerde kullaniliyor: anasayfa carousel'i
   (widgets/carousel-product.php), "One Cikan Modellerimiz"
   (widgets/top-urunler.php) ve kategori listesi (kategori.php). Efekt uc kez
   tekrarlanmasin diye ortak sinif uzerinden tanimli.

   Tema hover'da kart cercevesini ANINDA siyaha ceviriyor
   (.products-con .product-box:hover { border-color: var(--primary--color) }).
   O ani gecis iptal edilip ayni siyah, kartin uzerine oturan bir katmanla
   asagidan yukariya aciliyor.
   -------------------------------------------------------------------------- */
.products-con .product-box:hover {
  border-color: var(--primary--color);
}

/* clip-path tercih edildi: scaleY cerceveyi de esnetip alt/ust kenari
   kalinlastirirdi, clip-path sadece gorunurlugu kirpiyor. */
.products-con .product-box::after {
  content: "";
  position: absolute;
  /* Temanin 1px cercevesinin tam uzerine otursun. */
  inset: -1px;
  border: 2px solid var(--primary--color);
  border-radius: 25px;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.55s ease-in-out;
}

.products-con .product-box:hover::after {
  clip-path: inset(0 0 0 0);
}

/* Urun gorseli hover'da buyuyor; figure kirpiyor ki kart disina tasmasin.
   Dogrudan cocuk secildi: karttaki ozet ikonlari (.speed-feature img)
   etkilenmesin. */
.products-con .product-box > figure {
  overflow: hidden;
  border-radius: 20px;
}

.products-con .product-box > figure img {
  transition: transform 0.6s ease-in-out;
}

.products-con .product-box:hover > figure img {
  transform: scale(1.1);
}

/* Dokunmatikte hover yok; efekt takili kalmasin. */
@media (hover: none) {
  .products-con .product-box::after,
  .products-con .product-box > figure img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   SSS CEVAPLARINDAKI BAGLANTILAR
   Cevap metinleri panelden HTML olarak giriliyor ve icinde ic sayfalara
   baglantilar var ("yetkili satis noktalarimiza", "garanti politikamizi"...).
   Ne tema ne Bootstrap bu baglami hedefliyordu; baglantilar Bootstrap'in
   varsayilan mavisiyle (#007bff) ve alt cizgisiz cikiyordu — marka paletinin
   disinda ve tiklanabilir oldugu belli olmayan bir gorunum.

   Kural sitedeki govde-ici baglanti kaliginin aynisi (bkz. editor-content.css:
   blog yazisi ve kurumsal sayfa metinleri): logo grisi + alt cizgi, uzerine
   gelince marka yesili.

   Secici ortak sinif uzerinden: ayni akordiyon uc yerde kullaniliyor —
   sikca-sorulan-sorular.php, widgets/faq.php (anasayfa) ve blog-detail.php
   (yaziya ozel sorular). Uc yerde de ayni gorunum olsun diye tek kural.
   -------------------------------------------------------------------------- */
.faq-con .accordion-card .card-body a {
  color: var(--logo--grey--color);
  text-decoration: underline;
  transition: color 0.2s ease-out;
}

.faq-con .accordion-card .card-body a:hover,
.faq-con .accordion-card .card-body a:focus {
  color: var(--primary--color);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   URUN KARTI GORSELI — ORAN KORUMA
   responsive.css kart gorseline sabit yukseklik veriyor (<=1199px'te 350px,
   <=991px'te 300px) ama object-fit yazmiyor. Bootstrap'in .img-fluid'i
   genisligi max-width:100% ile kirpinca kutu urunun oranini kaybediyor ve
   gorsel yatayda eziliyor. contain kutuyu oldugu gibi birakip rasteri icine
   sigdiriyor.

   Kart uc yerde ayni ikili sinifla basiliyor (products-con + products-con2):
   widgets/carousel-product.php, widgets/top-urunler.php, kategori.php ve
   view_static/arama-sonuc.php.
   -------------------------------------------------------------------------- */
.products-con2 figure img {
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   SIPARIS OZETI KARTI — ZEMIN
   Tema karta seftali tonu veriyor (--peach--color: #fff9f2, shop.css:220).
   Marka yesiline yakin notr bir tona cekiliyor; kart hem sepet hem adres
   adiminda ayni.
   -------------------------------------------------------------------------- */
.cart-con .cart-total-outer {
  /* Petra BBQ (Eyl 2026): eski yesilimsi ton yerine marka kirmizisinin
     cok acik, sicak tonu + ince kenar (sepet ve adres adimi). */
  background-color: #fcf6f5;
  border: 1px solid rgba(var(--primary--rgb), .12);
}

/* --------------------------------------------------------------------------
   FORM UYARI SERIDI
   Acik zeminli sayfalardaki formlar (iletisim, bayilik on basvuru) icin.
   Bu iki uc hata halinde sayfaya ?error=N ile donuyordu ama hicbir sey o
   parametreyi okumuyordu: kullanici bos forma donuyor, mesajinin neden
   gonderilmedigini anlamiyordu.

   Uyelik sayfalarindaki .giris-uyari'nin karsiligi; o koyu kart icin
   yazildigi ve #uyeGiris ile kapsandigi icin burada kullanilamiyor.
   -------------------------------------------------------------------------- */
.form-uyari {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid #f0c2c2;
  border-radius: 8px;
  background-color: #fdf2f2;
  color: #8a2b2b;
  font-size: 15px;
  line-height: 23px;
  text-align: left;
}

.form-uyari i {
  margin-top: 3px;
  flex-shrink: 0;
}

/* ==========================================================================
   ANASAYFA HERO — tum icerik solda tek sutunda (GT20 -> aciklama -> butonlar),
   sag taraf bos. banner.php'de tek sol sutuna alindi; burada olcu/hizalama.
   ========================================================================== */
.banner-content2 {
  padding-left: 0;          /* saga iten 100px kaldirildi */
  margin-top: 24px;         /* baslik ile aciklama arasinda nefes */
}

/* GT20 basligi kucultuldu (120px cok buyuktu); ekrana gore olceklenir. */
#anasayfaBanner .text-size-120 {
  font-size: clamp(46px, 6vw, 84px);
  line-height: 1.05;
}

.home2-wrapper .banner-con2 p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;      /* 60px -> 28px */
  max-width: 560px;         /* aciklama dar bir blok, solda */
}

/* Butonlar: orijinalden biraz kucuk AMA metin + ok sigacak sekilde
   (onceki min-width:0 metni kirpiyordu). */
#anasayfaBanner .banner-btns-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
#anasayfaBanner .primary_btn,
#anasayfaBanner .secondary_btn {
  font-size: 16px;
  height: 52px;
  line-height: 52px;
  min-width: 190px;
  border-radius: 26px;
  /* Ok dairesi 40px + sag 10px; metin dairenin altina girmesin. */
  padding-right: 58px;
}

/* Mobilde butonlar da ortali.
   responsive.css (max-width: 767px) .banner-con'a text-align: center
   veriyor; baslik ve paragraf boylece ortalaniyor. Ama .banner-btns-wrap
   display:flex ve flex kapsayicida text-align ogeleri hizalamaz -- buton
   flex-start'ta, yani solda kaliyordu. Ayni kirilimda ana eksende
   ortalaniyor. */
@media (max-width: 767px) {
  #anasayfaBanner .banner-btns-wrap {
    justify-content: center;
  }
}

/* Ok dairesi span'i orijinalde top:10px ile 60px butona gore ortalanmisti;
   52px'te kaydi. Yukseklikten bagimsiz dikey ortalama. */
#anasayfaBanner .primary_btn span,
#anasayfaBanner .secondary_btn span {
  top: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   YUKARI-CIK BUTONU (#button.show) DALGA ANIMASYONU
   Kaynak style.css'te dalga turuncu/kirmizi (rgb 235 122 2) baslayip mora
   (rgba 115 0 209) sonlaniyordu; tema disi. Ayni @keyframes adi en son
   tanimlandigi icin burada marka rengiyle (--primary--rgb) eziliyor.
   ========================================================================== */
@-webkit-keyframes spineer {
  from { box-shadow: 0 0 0 0 rgba(var(--primary--rgb), 0.5); }
  to   { box-shadow: 0 0 0 35px rgba(var(--primary--rgb), 0.01); }
}
@keyframes spineer {
  from { box-shadow: 0 0 0 0 rgba(var(--primary--rgb), 0.5); }
  to   { box-shadow: 0 0 0 35px rgba(var(--primary--rgb), 0.01); }
}

/* ==========================================================================
   URUN KARTI OZET IKONLARI
   Uc kutulu ozet blogunda (Isitma Alani / Guc / Yakit) temanin bisiklet
   PNG'leri yerine Font Awesome ikonu kullaniliyor. Kart kategori, arama
   sonucu ve anasayfa karuselinde ortak.
   ========================================================================== */

.products-con .product-box .product-feature .speed-feature .ozet-ikon {
  display: block;
  margin: 0 auto 8px;
  font-size: 24px;
  line-height: 1;
  color: var(--primary--color);
}