/* ==========================================================================
   Pukka Candles — satış ve mobil düzeltmeleri (5 Ekim 2026)

   style.css'e dokunmadan üstüne yazılan kurallar. Ortak şablonda
   vitrin-ek.css'ten SONRA yükleniyor.

   İÇİNDEKİLER
     1. Satın alma rengi (CTA) ve butonlar
     2. Dokunmatik ekranda "takılı kalan hover" düzeltmesi (iOS Safari)
     3. Safari önekleri
     4. Mobil taşma ve okunurluk düzeltmeleri
     5. Ürün sayfası satın alma alanı
     6. Açıklama katlama
     7. Yapışkan satın alma çubuğu
     8. "Sepete eklendi" penceresi
     9. Öneri kartları ve şeritler
    10. Ücretsiz kargo ilerleme çubuğu
    11. Hareket azaltma
   ========================================================================== */

/* 1. Satın alma rengi ----------------------------------------------------- */

/*
   NEDEN TURUNCU-KİREMİT (#b8481a):

   - Ayrışma etkisi (Von Restorff): sayfada en çok dikkat çeken şey
     çevresinden FARKLI olandır. Sitenin geri kalanı antrasit, krem ve
     altın; satın alma düğmeleri de antrasitti ve form düğmeleriyle
     ("Mesajı gönder") aynı görünüyordu. Bu renk YALNIZCA satın alma
     eylemlerinde kullanılıyor ki göz doğrudan oraya gitsin.
   - Sıcak, doygun tonlar (turuncu/kırmızı ailesi) aciliyet ve harekete
     geçme hissi veriyor; mum ve sıcaklık temasıyla da uyumlu, altınla
     çatışmıyor.
   - Alışkanlık: Türkiye'deki alışveriş sitelerinin çoğunda "Sepete ekle"
     turuncu. Tanıdık renk, düşünmeden basılan düğme demek.
   - Erişilebilirlik: beyaz yazıyla kontrast 5.28:1 (WCAG AA ≥ 4.5).
     Basılı/hover tonu #9a3a0c: 7.04:1.
*/
:root {
  --color-cta: #b8481a;
  --color-cta-dark: #9a3a0c;
  --color-cta-soft: #fbeee6;
  --color-cta-ring: rgba(184, 72, 26, 0.35);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.btn--cta {
  background: var(--color-cta);
  border-color: var(--color-cta);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 6px;
  box-shadow: 0 8px 18px -10px rgba(154, 58, 12, 0.85);
  transition: background var(--transition), border-color var(--transition),
    transform 120ms ease, box-shadow var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.btn--cta svg {
  flex: 0 0 auto;
}

.btn--cta:active {
  background: var(--color-cta-dark);
  border-color: var(--color-cta-dark);
  transform: translateY(1px);
  box-shadow: none;
}

.btn--cta:focus-visible,
.btn--buy-now:focus-visible {
  outline: 3px solid var(--color-cta-ring);
  outline-offset: 2px;
}

.btn--cta[disabled],
.btn--buy-now[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* "Hemen al" — ikincil satın alma: aynı renk ailesi, içi boş. Ana
   düğmeyle yarışmasın ama satın alma eylemi olduğu da belli olsun. */
.btn--buy-now {
  background: #fff;
  border: 2px solid var(--color-cta);
  color: var(--color-cta-dark);
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

.btn--buy-now:active {
  background: var(--color-cta-soft);
}

@media (hover: hover) {
  .btn--cta:hover {
    background: var(--color-cta-dark);
    border-color: var(--color-cta-dark);
    color: #fff;
  }

  .btn--buy-now:hover {
    background: var(--color-cta-soft);
    color: var(--color-cta-dark);
  }
}

/* Kart üzerindeki sepet düğmesi de satın alma rengiyle ayrışsın. */
.product-action[data-add] {
  background: var(--color-cta);
  border-color: var(--color-cta);
  color: #fff;
}

@media (hover: hover) {
  .product-action[data-add]:hover {
    background: var(--color-cta-dark);
    border-color: var(--color-cta-dark);
    color: #fff;
  }
}

/* 2. Dokunmatik ekranda takılı kalan hover --------------------------------- */

/*
   iOS Safari'de dokunulan öğe :hover durumunda KALIYOR. style.css'teki
   `.btn--primary:hover { background: transparent }` yüzünden koyu düğme
   dokunduktan sonra beyaz/boş görünüyordu ("bozuldu mu?" hissi).
   Hover'ı olmayan cihazlarda hover görünümünü normal görünüme eşitle.
*/
@media (hover: none) {
  .btn--primary:hover,
  .btn--gold:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
  }

  .btn--ghost:hover {
    background: transparent;
    color: var(--color-ink);
  }

  .product-action:not([aria-pressed="true"]):not([data-add]):hover,
  .purchase__fav:not([aria-pressed="true"]):hover {
    background: rgba(255, 255, 255, 0.94);
    border-color: var(--color-line-strong);
    color: var(--color-ink);
  }
}

/* 3. Safari önekleri ------------------------------------------------------ */

/* Safari 17 ve öncesi (iOS 17 dahil) backdrop-filter'ı yalnızca önekli
   tanıyor; öneksiz kural yok sayılıyor ve başlık bulanıklaşmıyordu. */
.site-header {
  -webkit-backdrop-filter: blur(10px);
}

.cark-pop__perde {
  -webkit-backdrop-filter: blur(2px);
}

/* 4. Mobil taşma ve okunurluk --------------------------------------------- */

/*
   SEPET TAŞMASI (telefonda satırlar 426 px, ekran 375 px):
   `1fr` sütunu aslında `minmax(auto, 1fr)` — en uzun BÖLÜNEMEYEN
   kelime kadar genişliyor. Trendyol'dan gelen adlarda
   "Kase/Tabak /Anahtarlık" gibi boşluksuz parçalar var. Sütun alt
   sınırı 0'a çekildi ve uzun parçalar gerektiğinde bölünüyor.
*/
.cart-layout,
.cart-rows,
.order-grid {
  grid-template-columns: minmax(0, 1fr);
}

.cart-row {
  grid-template-columns: 96px minmax(0, 1fr);
}

.cart-row > *,
.cart-layout > *,
.product-detail > *,
.summary {
  min-width: 0;
}

.cart-row__name,
.product-detail__name,
.product-card__name,
.breadcrumb span,
.summary,
.mini-card__name,
.sticky-buy__name {
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  .cart-layout,
  .order-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .cart-row {
    grid-template-columns: 96px minmax(0, 1fr) auto auto;
  }
}

@media (max-width: 899px) {
  .cart-row {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .cart-row__figure {
    width: 84px;
  }

  .cart-row__name {
    font-size: 1.1rem;
    line-height: 1.3;
  }
}

/* Uzun ürün adı: kartta en fazla 3 satır. -webkit-line-clamp Safari'nin
   de desteklediği tek yol; display: -webkit-box şart. */
.product-card__name a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.product-detail__name {
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  line-height: 1.2;
}

/* Kırıntıdaki uzun ürün adı tek satırda kesilsin. */
.breadcrumb span:last-child {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/*
   iOS SAFARİ YAKINLAŞMA SORUNU: yazı boyutu 16 px'ten küçük bir alana
   dokunulunca Safari sayfayı yakınlaştırıyor ve kullanıcı geri
   uzaklaştırmak zorunda kalıyor. Kampanya kodu (15 px) ve yorum puanı
   seçimi bu yüzden zıplıyordu. Dokunmatik ekranda alt sınır 16 px.
*/
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* Telefonda ürün ızgarası iki sütun — tek sütunda her kart ekranı
   kaplıyordu ve 50 üründe kaydırma bitmiyordu. */
@media (max-width: 639px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 0.9rem;
  }

  .product-card__body {
    padding-top: 0.75rem;
    gap: 0.3rem;
  }

  .product-card__name {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    line-height: 1.35;
  }

  .product-card__notes,
  .product-card__meta {
    font-size: 0.8rem;
  }

  .product-card__price {
    font-size: 1rem;
    font-weight: 700;
  }

  .product-actions {
    top: 0.4rem;
    right: 0.4rem;
    gap: 0.3rem;
  }

  .product-action {
    width: 38px;
    height: 38px;
  }
}

/* Hızlı bakış: uzun ürün adı 2 rem'de dört satır tutuyordu. */
.quick-view__name {
  font-size: clamp(1.3rem, 5vw, 2rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Kategori kutuları telefonda iki sütun: tek sütunda altı büyük kutu
   üç ekran boyu tutuyordu ve altındaki ürünlere inilemiyordu. */
@media (max-width: 559px) {
  .mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .tile {
    aspect-ratio: 1;
    padding: 0.85rem;
    border-radius: 12px;
  }

  .tile__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
  }
}

/* Footer bağlantıları 19 px yüksekliğindeydi; parmakla doğru olana
   basmak zordu. En az 32 px dokunma alanı. */
@media (max-width: 899px) {
  .site-footer li a {
    display: inline-block;
    padding-block: 0.4rem;
  }
}

/* Kampanya kodu: .btn'in 2.4 rem yan boşluğu dar özet kutusunda kod
   alanını 110 px'e eziyordu ("KODUN VA…"). */
.coupon__row .btn {
  padding-inline: 1.1rem;
  letter-spacing: 0.06em;
}

/* Sabit alt öğeler iPhone'un ana ekran çizgisinin altında kalmasın. */
.toast {
  bottom: calc(var(--space-md) + var(--safe-bottom));
}

/* 5. Ürün sayfası satın alma alanı ---------------------------------------- */

.purchase--v2 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.purchase--v2 .qty {
  grid-column: 1;
}

.purchase--v2 .purchase__fav {
  grid-column: 3;
}

.purchase__ctas {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.75rem;
}

/* .purchase .btn kuralı (style.css) düğmelere 220 px alt sınır veriyor;
   iki düğme yan yana sığsın diye burada kaldırılıyor. */
.purchase--v2 .btn {
  min-width: 0;
  min-height: 56px;
  padding-inline: 1rem;
  font-size: 0.95rem;
}

.purchase__stok {
  color: var(--color-cta-dark);
  margin-right: 0.35rem;
}

.product-detail__subhead {
  margin-top: var(--space-md);
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.product-detail__description {
  line-height: 1.7;
}

/* 6. Açıklama katlama ----------------------------------------------------- */

.aciklama--kisa {
  max-height: 15rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 65%, transparent);
  mask-image: linear-gradient(#000 65%, transparent);
}

.aciklama__dugme {
  margin-top: 0.4rem;
  padding: 0.5rem 0;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--color-cta-dark);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* 7. Yapışkan satın alma çubuğu ------------------------------------------- */

.sticky-buy {
  display: none;
}

@media (max-width: 899px) {
  .sticky-buy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem calc(0.65rem + var(--safe-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -8px 24px rgba(30, 25, 15, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: translateY(110%);
    transition: transform 240ms ease;
    visibility: hidden;
  }

  .sticky-buy--acik {
    transform: translateY(0);
    visibility: visible;
  }

  .sticky-buy__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }

  .sticky-buy__name {
    font-size: 0.8rem;
    color: var(--color-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sticky-buy__price {
    font-size: 1.15rem;
    font-weight: 700;
  }

  .sticky-buy__btn {
    flex: 0 0 auto;
    min-height: 48px;
    padding-inline: 1.3rem;
  }

  /* Çubuk açıkken bildirim onun üstünde dursun. */
  .sticky-buy-acik .toast {
    bottom: calc(5.5rem + var(--safe-bottom));
  }
}

/* 8. "Sepete eklendi" penceresi ------------------------------------------- */

.sepet-penceresi[hidden] {
  display: none;
}

.sepet-penceresi {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sepet-penceresi__perde {
  position: absolute;
  inset: 0;
  background: rgba(22, 17, 12, 0.45);
  opacity: 0;
  transition: opacity 200ms ease;
}

.sepet-penceresi__kutu {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.4rem 1.2rem calc(1.2rem + var(--safe-bottom));
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(30, 25, 15, 0.25);
  transform: translateY(100%);
  transition: transform 220ms ease;
}

.sepet-penceresi--acik .sepet-penceresi__perde {
  opacity: 1;
}

.sepet-penceresi--acik .sepet-penceresi__kutu {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .sepet-penceresi {
    align-items: center;
    padding: 1rem;
  }

  .sepet-penceresi__kutu {
    border-radius: 14px;
    padding-bottom: 1.4rem;
    transform: translateY(16px);
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  .sepet-penceresi--acik .sepet-penceresi__kutu {
    transform: none;
    opacity: 1;
  }
}

/* Pencere açıkken arka plan kaymasın. */
.pencere-acik,
.pencere-acik body {
  overflow: hidden;
}

.sepet-penceresi__kapat {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-soft);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.sepet-penceresi__durum {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-weight: 700;
  color: #2f6b45;
}

.sepet-penceresi__tik {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2f6b45;
  color: #fff;
  font-size: 0.85rem;
}

.sepet-penceresi__urun {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
}

.sepet-penceresi__gorsel {
  width: 64px;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.sepet-penceresi__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sepet-penceresi__ad {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.sepet-penceresi__adet {
  margin: 0.2rem 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.sepet-penceresi__dugmeler {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem;
  margin-top: 1rem;
}

.sepet-penceresi__dugmeler .btn {
  min-height: 50px;
  padding-inline: 0.75rem;
  font-size: 0.85rem;
}

.sepet-penceresi__oneri-baslik {
  margin: 1.4rem 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 9. Öneri kartları ve şeritler -------------------------------------------- */

.upsell .section__head {
  margin-bottom: var(--space-sm);
}

/*
   Yatay kaydırılan şerit. Telefonda dört kart alt alta yerine yan yana
   kayıyor; scroll-snap Safari 11+ destekli.
*/
.mini-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 46%);
  gap: 0.9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.6rem;
  scrollbar-width: thin;
}

@media (min-width: 640px) {
  .mini-rail {
    grid-auto-columns: minmax(170px, 23%);
  }
}

.mini-rail--pencere {
  grid-auto-columns: minmax(120px, 38%);
}

/* Pencerede kare görsel: dikey görsel pencereyi ekrandan taşırıyordu. */
.mini-rail--pencere .mini-card__fig {
  aspect-ratio: 1;
}

@media (min-width: 640px) {
  .mini-rail--pencere {
    grid-auto-columns: minmax(130px, 31%);
  }
}

.mini-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mini-card__fig {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.mini-card__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mini-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.5rem;
  flex: 1;
}

.mini-card__name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.mini-card__price {
  font-weight: 700;
}

.mini-card__add {
  margin-top: auto;
  min-height: 40px;
  border: 1.5px solid var(--color-cta);
  border-radius: 6px;
  background: #fff;
  color: var(--color-cta-dark);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mini-card__add:active,
.mini-card__add[disabled] {
  background: var(--color-cta-soft);
}

@media (hover: hover) {
  .mini-card__add:hover {
    background: var(--color-cta);
    color: #fff;
  }
}

.mini-card__tukendi {
  margin-top: auto;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

/* Telefonda ürün sayfasındaki öneri ızgaraları da kayan şerit olsun —
   sekiz kart alt alta dört ekran boyu tutuyordu. */
@media (max-width: 639px) {
  .product-grid--rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 46%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.6rem;
  }

  .product-grid--rail > * {
    scroll-snap-align: start;
  }
}

/* 10. Ücretsiz kargo ilerleme çubuğu --------------------------------------- */

.kargo-ilerleme {
  margin-top: 1rem;
}

.kargo-ilerleme .summary__hint {
  margin: 0 0 0.45rem;
}

.kargo-ilerleme__bar {
  height: 8px;
  border-radius: 99px;
  background: var(--color-line);
  overflow: hidden;
}

.kargo-ilerleme__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d9783f, var(--color-cta));
  transition: width 400ms ease;
}

.kargo-ilerleme--tamam .kargo-ilerleme__bar span {
  background: #2f6b45;
}

/* 11. Hareket azaltma ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .sticky-buy,
  .sepet-penceresi__kutu,
  .sepet-penceresi__perde,
  .kargo-ilerleme__bar span,
  .btn--cta {
    transition: none;
  }
}