/* =====================================================================
   BERTA MADENİ YAĞ — Özel Stiller (Repsol lacivert + alev kimliği)
   ===================================================================== */

html { scroll-padding-top: 90px; }
body { -webkit-font-smoothing: antialiased; }

/* ----------  REPSOL ALEV GRADYANI  ---------- */
:root {
  --flame: linear-gradient(120deg, #FDB913 0%, #F5811F 40%, #EE1C2E 74%, #E4007C 100%);
}
.flame-bg { background-image: var(--flame); }
.flame-text {
  background-image: var(--flame);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Tailwind CDN'in üretmediği hover/group-hover alev durumları */
.hover\:flame-bg:hover {
  background-image: var(--flame) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.group:hover .group-hover\:flame-bg {
  background-image: var(--flame) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ----------  SCROLLBAR  ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #070E22; }
::-webkit-scrollbar-thumb { background: #1B3A6B; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #F5811F; }

/* ----------  SCROLL REVEAL  ---------- */
.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform; }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .animate-floaty { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ----------  HEADER  ---------- */
#header.scrolled { box-shadow: 0 10px 30px -12px rgba(0,0,0,.7); background: rgba(7,14,34,.92); }

/* ----------  HERO SLIDER  ---------- */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 30;
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 9999px;
  background: rgba(7,14,34,.45); border: 1px solid rgba(255,255,255,.18); color: #fff;
  backdrop-filter: blur(6px); transition: background .2s, opacity .3s, transform .2s;
  opacity: 0;
}
#heroSlider:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: var(--flame); border-color: transparent; transform: translateY(-50%) scale(1.06); }
@media (max-width: 640px) { .hero-arrow { opacity: .85; width: 40px; height: 40px; } }

.hero-dot {
  width: 10px; height: 10px; border-radius: 9999px; background: rgba(255,255,255,.35);
  transition: all .3s ease; border: 0; cursor: pointer;
}
.hero-dot:hover { background: rgba(255,255,255,.6); }
.hero-dot.active { width: 30px; background-image: var(--flame); }

/* Ken Burns — aktif slaytta hafif yavaş zoom */
.hero-img { transform: scale(1.02); }
.hero-slide.is-active .hero-img { animation: kenburns 7.5s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.09); } }

/* İçerik girişi — transition tabanlı (son durum her zaman görünür) */
.hero-content {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1) .2s, transform .7s cubic-bezier(.2,.7,.3,1) .2s;
}
.hero-slide.is-active .hero-content { opacity: 1; transform: none; }

/* İlerleme çubuğu */
@keyframes heroBar { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hero-img { animation: none; transform: scale(1.04); }
  .hero-content { opacity: 1; transform: none; }
  .hero-slide.is-active .hero-content { animation: none; }
  #heroProgress { animation: none !important; }
}

/* ----------  KÜÇÜK DETAYLAR  ---------- */
.finder-opt:active { transform: scale(.98); }
.cat-card, .prod-card { -webkit-tap-highlight-color: transparent; }

/* Ürün beyaz panelinde jpg'lerin kenar yumuşaması */
.prod-card img { image-rendering: auto; }