/* AK100 slider v3 — tam genişlik, modern (22 Eki 2026). Görsel sağa yaslı ve kırpılmadan
   tam yüksekliğiyle görünür; sol taraf görselin kendi krem tonuyla dolar, yazı oraya oturur. */
#mod-2 > .hp-slider-fw {
  width: 100% !important; max-width: none !important; box-sizing: border-box;
  margin: 0 0 34px !important; padding: 0 !important;
}
#mod-2 > .hp-slider-fw .hp-slider {
  --sh: clamp(440px, 34vw, 680px);
  position: relative; height: var(--sh) !important; aspect-ratio: auto !important;
  border-radius: 0 !important; overflow: hidden; background: #F3EBDF; box-shadow: none !important;
}
#mod-2 > .hp-slider-fw .hp-slide {
  background-size: auto 100% !important; background-position: right center !important;
  background-repeat: no-repeat !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
  padding: 0 0 0 calc(var(--ak-pad, 46px) + clamp(24px, 5vw, 110px)) !important; box-sizing: border-box;
}
#mod-2 > .hp-slider-fw .hp-slide::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none;
  width: calc(100% - var(--sh) * 1.5 + 340px);
  background: linear-gradient(180deg, var(--ust, #F3EBDF), var(--alt, #EFE6D9));
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 340px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 340px), transparent);
}
#mod-2 > .hp-slider-fw .hp-slide::after { content: none !important; }
#mod-2 > .hp-slider-fw .hp-slide:nth-child(1) { --ust: #F1E8DD; --alt: #F1E7DA; background-color: #F1E8DC !important; }
#mod-2 > .hp-slider-fw .hp-slide:nth-child(2) { --ust: #F6F0E8; --alt: #EDE7DF; background-color: #F1EBE4 !important; }
#mod-2 > .hp-slider-fw .hp-slide:nth-child(3) { --ust: #ECE1D4; --alt: #DFD4C6; background-color: #E6DBCD !important; }
#mod-2 > .hp-slider-fw .hp-slide:nth-child(4) { --ust: #FAF3E4; --alt: #F7EAD8; background-color: #F8EFDE !important; }

/* Yazı bloğu */
#mod-2 > .hp-slider-fw .hp-slide-title {
  position: relative !important; z-index: 2; left: auto !important; top: auto !important; transform: none !important;
  width: auto !important; max-width: min(620px, 44%) !important; margin: 0 !important;
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 22px !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
  color: #26241A !important; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(38px, 3.9vw, 74px) !important; font-weight: 600 !important;
  line-height: 1.02 !important; letter-spacing: -.5px !important;
}
#mod-2 > .hp-slider-fw .hp-slide-title::before {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 2.6px; line-height: 1; color: #8A6D1F; text-transform: uppercase;
  padding-left: 40px; background: linear-gradient(#B8962E, #B8962E) left center / 28px 1.5px no-repeat;
}
#mod-2 > .hp-slider-fw .hp-slide:nth-child(1) .hp-slide-title::before { content: 'GARNIER · GOLDEN ROSE · NIVEA'; }
#mod-2 > .hp-slider-fw .hp-slide:nth-child(2) .hp-slide-title::before { content: 'DOMESTOS · CIF · BİNGO'; }
#mod-2 > .hp-slider-fw .hp-slide:nth-child(3) .hp-slide-title::before { content: 'ELSEVE · PANTENE · ELIDOR'; }
#mod-2 > .hp-slider-fw .hp-slide:nth-child(4) .hp-slide-title::before { content: 'PARFÜM · DEODORANT · VÜCUT SPREYİ'; }

#mod-2 > .hp-slider-fw .hp-slide-btn {
  position: static !important; align-self: flex-start !important; display: inline-flex !important; align-items: center; gap: 12px;
  margin-top: 6px !important; padding: 16px 28px !important; border-radius: 999px !important;
  background: #3F5A2A !important; color: #fff !important;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .2px;
  box-shadow: 0 10px 24px -12px rgba(46, 66, 28, .7) !important;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
#mod-2 > .hp-slider-fw .hp-slide-btn::after { content: '→'; margin-left: 0 !important; transition: transform .2s ease; }
#mod-2 > .hp-slider-fw .hp-slide-btn:hover { background: #2F4620 !important; transform: translateY(-1px); opacity: 1 !important; }
#mod-2 > .hp-slider-fw .hp-slide-btn:hover::after { transform: translateX(4px); }

/* Yazının girişi */
#mod-2 > .hp-slider-fw .hp-slide.active .hp-slide-title { animation: akSlideIn .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes akSlideIn { from { opacity: 0; transform: translateY(18px) !important; } to { opacity: 1; transform: none; } }

/* Gezinme */
#mod-2 > .hp-slider-fw .hp-slider-prev,
#mod-2 > .hp-slider-fw .hp-slider-next {
  width: 46px !important; height: 46px !important; border-radius: 50% !important; border: 0 !important;
  background: rgba(255, 255, 255, .72) !important; color: #26241A !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .35) !important;
  font-size: 18px !important; opacity: 0; transition: opacity .2s ease, background .2s ease !important; z-index: 5;
}
#mod-2 > .hp-slider-fw .hp-slider-prev,
#mod-2 > .hp-slider-fw .hp-slider-next { top: auto !important; bottom: 30px !important; transform: none !important; opacity: 1 !important; width: 52px !important; height: 52px !important; }
#mod-2 > .hp-slider-fw .hp-slider-next { right: var(--ak-pad, 46px) !important; left: auto !important; }
#mod-2 > .hp-slider-fw .hp-slider-prev { right: calc(var(--ak-pad, 46px) + 64px) !important; left: auto !important; }
#mod-2 > .hp-slider-fw .hp-slider-prev:hover,
#mod-2 > .hp-slider-fw .hp-slider-next:hover { background: #fff !important; }
#mod-2 > .hp-slider-fw .hp-slider-dots {
  left: calc(var(--ak-pad, 46px) + clamp(24px, 5vw, 110px)) !important; right: auto !important; transform: none !important;
  bottom: 52px !important; display: flex; gap: 8px; z-index: 5;
}
#mod-2 > .hp-slider-fw .hp-slider-dot {
  width: 8px !important; height: 8px !important; border-radius: 999px !important; border: 0 !important;
  background: rgba(63, 90, 42, .28) !important; transition: width .3s ease, background .3s ease !important; margin: 0 !important;
}
#mod-2 > .hp-slider-fw .hp-slider-dot.active { width: 28px !important; background: #3F5A2A !important; }

/* Tablet / mobil */
@media (max-width: 900px) {
  #mod-2 > .hp-slider-fw { margin: 12px 0 22px !important; }
  #mod-2 > .hp-slider-fw .hp-slider { --sh: 440px; border-radius: 18px; }
  #mod-2 > .hp-slider-fw .hp-slide {
    background-size: auto 250px !important; background-position: right 0 top 0 !important;
    flex-direction: row !important; align-items: flex-end !important; padding: 0 22px 64px !important;
  }
  #mod-2 > .hp-slider-fw .hp-slide::before {
    width: 100%; top: 190px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 70px); mask-image: linear-gradient(180deg, transparent, #000 70px);
  }
  #mod-2 > .hp-slider-fw .hp-slide-title { max-width: 100% !important; gap: 14px !important; font-size: 32px !important; }
  #mod-2 > .hp-slider-fw .hp-slide-title::before { font-size: 9.5px; letter-spacing: 1.8px; padding-left: 30px; background-size: 20px 1.5px; }
  #mod-2 > .hp-slider-fw .hp-slide-btn { padding: 13px 22px !important; font-size: 13px !important; }
  #mod-2 > .hp-slider-fw .hp-slider-dots { left: 22px !important; bottom: 24px !important; }
  #mod-2 > .hp-slider-fw .hp-slider-prev, #mod-2 > .hp-slider-fw .hp-slider-next { display: none !important; }
}