/* ============================================================
   Ortak UI: ikonlar + katmanlı slider (her iki tema için).
   Renkler CSS değişkenleriyle; temalar style.css'te override eder.
   ============================================================ */

/* ---- İkonlar ---- */
.icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.brand-icon { color: inherit; }
.pay-icon {
  height: 24px; width: auto; display: inline-block; vertical-align: middle;
  background: #fff; border-radius: 4px; padding: 2px 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.pay-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ============================================================
   SLIDER
   ============================================================ */
.hero {
  position: relative;
  width: var(--hero-w, 100%);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background: var(--hero-bg, #0d0d10);
  --sl-speed: .6s;
}
.hero-viewport { position: relative; width: 100%; }

/* Slide: arka görsel tuvali (oran ayarlardan; varsayılan 16:5). */
.hero-slide {
  position: absolute;
  inset: 0;
  aspect-ratio: var(--slide-ratio, 16 / 5);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sl-speed) ease;
  overflow: hidden;
}
/* Aktif slide akışa girer → viewport yüksekliğini o belirler. */
.hero-slide.is-active { position: relative; opacity: 1; visibility: visible; z-index: 1; }

/* Geçiş tipi: kaydırma (slide) */
.hero.tr-slide .hero-viewport { display: flex; transition: transform var(--sl-speed) ease; }
.hero.tr-slide .hero-slide {
  position: relative; inset: auto; flex: 0 0 100%;
  opacity: 1; visibility: visible; transition: none;
}

/* Slide içindeki tam-alan tıklama linki (simple mod) */
.hero-slide-link { position: absolute; inset: 0; z-index: 2; }

/* ---- Katman tuvali ---- */
.layer-canvas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.slide-layer { position: absolute; max-width: 92%; pointer-events: auto; z-index: 3; }
.slide-layer .sl-anim { will-change: transform, opacity; }

.sl-text { line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.28); white-space: pre-line; }
.sl-badge-txt {
  display: inline-block; padding: .3em .7em; border-radius: 999px;
  color: #fff; line-height: 1.1; box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
/* Kutu/Blok arka plandır: her zaman diğer katmanların ARKASINDA durur */
.slide-layer.sl-box { z-index: 1; }
.sl-box-fill { display: block; width: 100%; height: 100%; border-radius: 10px; }

/* Slide butonları */
.slide-btn {
  display: inline-block; padding: 13px 30px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .3px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.slide-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.sl-btn-primary { background: var(--hero-accent, #e11d63); color: #fff; }
.sl-btn-dark    { background: #111; color: #fff; }
.sl-btn-light   { background: #fff; color: #111; }
.sl-btn-outline { background: transparent; color: #fff; border: 2px solid #fff; }

/* Simple mod başlık overlay'i */
.simple-caption { display: flex; padding: 4% 6%; }
.simple-caption .sl-caption { max-width: 560px; }
.simple-caption.pos-left   { justify-content: flex-start; align-items: center; text-align: left; }
.simple-caption.pos-center { justify-content: center; align-items: center; text-align: center; }
.simple-caption.pos-right  { justify-content: flex-end; align-items: center; text-align: right; }
.sl-caption h2 {
  margin: 0 0 12px; font-size: clamp(24px, 4.2vw, 54px); line-height: 1.1;
  color: var(--hero-title, #fff); text-shadow: 0 2px 14px rgba(0,0,0,.32);
}
.sl-caption p {
  margin: 0 0 20px; font-size: clamp(14px, 1.7vw, 20px);
  color: var(--hero-sub, #f1f1f1); text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

/* ---- Oklar ---- */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.82); color: #111; cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease, transform .15s ease;
}
.hero-arrow:hover { background: #fff; }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }
.hero-arrow:active { transform: translateY(-50%) scale(.94); }

/* ---- Noktalar ---- */
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 5;
  display: flex; gap: 9px; justify-content: center;
}
.hero-dot {
  width: 11px; height: 11px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.5); padding: 0; transition: background .2s, transform .2s;
}
.hero-dot.active { background: #fff; transform: scale(1.25); }

/* ============================================================
   Katman giriş animasyonları (slide aktif olunca çalışır)
   ============================================================ */
.hero-slide:not(.is-active) .sl-anim { opacity: 0; }
.hero-slide:not(.is-active) .anim-none { opacity: 1; }
.hero-slide.is-active .sl-anim {
  animation-duration: .7s; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  animation-delay: var(--sl-delay, 0ms);
}
.hero-slide.is-active .anim-none { animation: none; opacity: 1; }
.hero-slide.is-active .anim-fade       { animation-name: slFade; }
.hero-slide.is-active .anim-fade-up    { animation-name: slFadeUp; }
.hero-slide.is-active .anim-fade-down  { animation-name: slFadeDown; }
.hero-slide.is-active .anim-fade-left  { animation-name: slFadeLeft; }
.hero-slide.is-active .anim-fade-right { animation-name: slFadeRight; }
.hero-slide.is-active .anim-zoom       { animation-name: slZoom; }

@keyframes slFade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes slFadeUp    { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes slFadeDown  { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes slFadeLeft  { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes slFadeRight { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes slZoom      { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero.tr-slide .hero-viewport { transition: none; }
  .hero-slide.is-active .sl-anim { animation: none; opacity: 1; }
}

/* ---- Mobil: daha uzun oran, okunur metin ---- */
@media (max-width: 720px) {
  .hero-slide { aspect-ratio: 3 / 4; }
  .hero-arrow { width: 38px; height: 38px; }
  .hero-arrow.prev { left: 8px; } .hero-arrow.next { right: 8px; }
  .slide-btn { padding: 11px 22px; font-size: 14px; }
  .simple-caption { padding: 6% 7%; }
}

/* ---- Dil seçici (bayraklı açılır menü) ---- */
.lang-dd { position: relative; }
.lang-dd summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; font-weight: 600; user-select: none;
}
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-caret { font-style: normal; font-size: .7em; opacity: .8; transition: transform .15s; }
.lang-dd[open] .lang-caret { transform: rotate(180deg); }
.lang-dd ul {
  position: absolute; top: 100%; left: 0; z-index: 200; min-width: 170px; margin: 4px 0 0;
  padding: 6px; list-style: none; background: #fff; color: #1f2430;
  border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 28px rgba(20,25,40,.16);
}
.lang-dd ul a {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 7px;
  color: #1f2430; font-weight: 500; white-space: nowrap;
}
.lang-dd ul a:hover { background: #f3f4f6; color: #1f2430; }
.lang-dd ul a.on { background: #eef1f6; font-weight: 700; }
.flag { display: inline-block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: 0 0 auto; }
.flag-txt {
  width: 21px; height: 15px; font-size: 9px; font-weight: 700; display: inline-grid;
  place-items: center; background: #e5e7eb; color: #374151;
}

/* ---- Ürün yanı bilgi blokları ---- */
.info-blocks { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.info-line { flex-basis: 100%; margin: 0; font-size: .93rem; color: #4b5563; }
.info-img-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; cursor: pointer;
  background: #fff; border: 1.5px solid #d8dbe2; border-radius: 999px;
  font-weight: 600; font-size: .88rem; color: #1f2430;
  transition: border-color .15s, box-shadow .15s;
}
.info-img-btn:hover { border-color: var(--hero-accent, #e11d63); box-shadow: 0 3px 10px rgba(0,0,0,.08); }

/* Fare paralaksı sarmalayıcısı: yumuşak takip */
.sl-par { will-change: transform; transition: transform .18s ease-out; }

/* Renk maskesi: arka görselin üzerine binen renk katmanı (içeriğin altında) */
.slide-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Kutu katmanı: animasyon/paralaks sarmalayıcıları yükseklik zincirini kırmasın
   (slide-layer %h → sarmalayıcılar auto kalınca kutu 0 yükseklikte görünmüyordu) */
.slide-layer.sl-box .sl-anim,
.slide-layer.sl-box .sl-par { height: 100%; }

/* ---- Katman ÇIKIŞ animasyonları: slide değişmeden hemen önce oynar (is-leaving) ---- */
.hero-slide.is-leaving .sl-anim.out-fade       { animation: slOutFade .38s ease-in both; }
.hero-slide.is-leaving .sl-anim.out-fade-up    { animation: slOutUp .38s ease-in both; }
.hero-slide.is-leaving .sl-anim.out-fade-down  { animation: slOutDown .38s ease-in both; }
.hero-slide.is-leaving .sl-anim.out-fade-left  { animation: slOutLeft .38s ease-in both; }
.hero-slide.is-leaving .sl-anim.out-fade-right { animation: slOutRight .38s ease-in both; }
.hero-slide.is-leaving .sl-anim.out-zoom       { animation: slOutZoom .38s ease-in both; }

@keyframes slOutFade  { to { opacity: 0; } }
@keyframes slOutUp    { to { opacity: 0; transform: translateY(-34px); } }
@keyframes slOutDown  { to { opacity: 0; transform: translateY(34px); } }
@keyframes slOutLeft  { to { opacity: 0; transform: translateX(-46px); } }
@keyframes slOutRight { to { opacity: 0; transform: translateX(46px); } }
@keyframes slOutZoom  { to { opacity: 0; transform: scale(.82); } }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-leaving .sl-anim { animation: none; }
}