/* =========================================================
   4K Home Deco — animasyonlar
   Tümü "hareketi azalt" ayarı açık kullanıcılarda devre dışı.
   ========================================================= */

/* 2) Kartlarda üzerine gelme (hover) */
.banner-item, .gallery-item, .info-card, .kfg .card, .detail-grid figure { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1); }
.banner-item img, .gallery-item img, .kfg .card-img .pv, .detail-grid figure img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.banner-item, .gallery-item, .kfg .card-img, .detail-grid figure { overflow: hidden; }
@media (hover: hover) {
  .banner-item:hover, .gallery-item:hover, .info-card:hover, .kfg .card:hover, .detail-grid figure:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(35,33,29,.13); }
  .banner-item:hover img, .gallery-item:hover img, .kfg .card:hover .card-img .pv, .detail-grid figure:hover img { transform: scale(1.05); }
}

@media (prefers-reduced-motion: no-preference) {

  /* 1) Kaydırınca beliren bölümler */
  html.anim .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--rv-d, 0s); }
  html.anim .rv.in { opacity: 1; transform: none; }

  /* 3) Perdenin inip plise katlarını açması (ürün sayfası ve konfigüratör önizlemesi) */
  .gal-main .pv-blind, .sum-img .pv-blind, .fin-img .pv-blind { animation: blindDown .9s cubic-bezier(.22,1,.36,1) both; transform-origin: top; }
  .gal-main .pv-blind::after, .sum-img .pv-blind::after, .fin-img .pv-blind::after { animation: pleatOpen .9s cubic-bezier(.22,1,.36,1) both; }
  @keyframes blindDown { from { height: 8%; } to { height: 64%; } }
  @keyframes pleatOpen { from { background-size: 100% 3px; opacity: .6; } to { background-size: 100% 10px; opacity: 1; } }
  /* sineklik önizlemesi (SVG) yumuşak geçiş */
  .kfg #sSumImg svg, .kfg #sFinImg svg { animation: fadeIn .45s ease both; }

  /* 4) Konfigüratör geçişleri */
  .kfg .step:not([hidden]) { animation: stepIn .45s cubic-bezier(.22,1,.36,1) both; }
  .kfg .opt.open .opt-b { animation: fadeUp .35s cubic-bezier(.22,1,.36,1) both; }
  .kfg .step-msg:not([hidden]) { animation: shake .4s ease both; }
  .price-flash { animation: priceFlash .6s ease; }
  @keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
  @keyframes priceFlash { 0% { color: inherit; } 30% { color: #1FAF5A; transform: scale(1.08); } 100% { color: inherit; transform: none; } }
  .kfg #grand, .kfg #sGrand { display: inline-block; transform-origin: right center; }
}