/* =====================================================
   AltınDenizi · Luxury 3-Card Hover Animation System
   ---------------------------------------------------
   Aktivasyon: Admin > 3'lü Kutu Bileşeni > CSS Sınıfı:
   "ad-luxury-cards" yazıldığında otomatik devreye girer.
   threebox.tpl dosyasına dokunulmadan çalışır.
   ===================================================== */

/* Opsiyonel: Daha lüks bir font için header.tpl'ye eklenebilir
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet"> */

.cmp.threebox.ad-luxury-cards {
  padding: 80px 0 !important;
  background: radial-gradient(ellipse at top, #FFF9EC 0%, #F5F0E6 60%, #FAF6EC 100%) !important;
  position: relative;
  overflow: hidden;
  perspective: 1800px;
}

.cmp.threebox.ad-luxury-cards::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(201,169,97,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(26,77,58,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.cmp.threebox.ad-luxury-cards > .container {
  position: relative;
  z-index: 2;
}

.cmp.threebox.ad-luxury-cards [class*="container-x-"] {
  gap: 24px;
  justify-content: center;
  perspective: 1800px;
  width: 100%;
}

/* ----- CARD ----- */
.cmp.threebox.ad-luxury-cards .threebox-card {
  position: relative;
  width: calc(33.333% - 16px) !important;
  margin: 0 !important;
  background: transparent !important;
  transform-style: preserve-3d;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  will-change: transform;
  isolation: isolate;
}

.cmp.threebox.ad-luxury-cards .threebox-card figure {
  position: relative !important;
  margin: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow:
    0 6px 22px rgba(50, 35, 15, 0.18),
    0 2px 6px rgba(50, 35, 15, 0.08);
  transform-style: preserve-3d;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- IMAGE ----- */
.cmp.threebox.ad-luxury-cards .three_box_image_element {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.02);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease !important;
  z-index: 1;
}

/* ----- GRADIENT OVERLAY (override existing ::after) ----- */
.cmp.threebox.ad-luxury-cards .threebox-card figure::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 45%,
    rgba(15, 25, 20, 0.25) 65%,
    rgba(15, 25, 20, 0.78) 100%
  ) !important;
  transition: background 0.7s ease !important;
  z-index: 2;
  pointer-events: none;
}

/* ----- INNER GOLD FRAME (::before) ----- */
.cmp.threebox.ad-luxury-cards .threebox-card figure::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  pointer-events: none;
  transition:
    border-color 0.6s ease 0.15s,
    inset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

/* ----- SHIMMER LAYER (injected by JS) ----- */
.cmp.threebox.ad-luxury-cards .ad-shimmer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.cmp.threebox.ad-luxury-cards .ad-shimmer::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -80%;
  width: 55%;
  height: 400%;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 232, 175, 0.0)  45%,
    rgba(255, 232, 175, 0.30) 49%,
    rgba(255, 250, 220, 0.55) 51%,
    rgba(255, 232, 175, 0.30) 53%,
    rgba(255, 232, 175, 0.0)  58%,
    transparent 70%
  );
  transform: translateX(-120%) rotate(18deg);
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- PARTICLES (injected by JS) ----- */
.cmp.threebox.ad-luxury-cards .ad-particles {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease 0.15s;
}
.cmp.threebox.ad-luxury-cards .ad-particles span {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8, #f0d68a 45%, transparent 75%);
  box-shadow: 0 0 8px rgba(255, 216, 122, 0.9);
  opacity: 0;
}
@keyframes adFloat {
  0%   { transform: translate(0, 0) scale(0);     opacity: 0; }
  12%  { transform: translate(2px, -10%) scale(1); opacity: 1; }
  85%  { transform: translate(-6px, -95%) scale(0.9); opacity: 0.7; }
  100% { transform: translate(0, -110%) scale(0);  opacity: 0; }
}

/* ----- CAPTION (text container) ----- */
.cmp.threebox.ad-luxury-cards figcaption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  transform: translateZ(40px) !important;
  z-index: 6 !important;
  padding: 32px 26px 26px !important;
  color: #fff !important;
  text-align: left !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: auto !important;
}

.cmp.threebox.ad-luxury-cards figcaption h2,
.cmp.threebox.ad-luxury-cards figcaption h3 {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.65rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
  max-height: none !important;
  display: block !important;
  letter-spacing: -0.01em;
}

/* ----- DIVIDER LINE (injected by JS) ----- */
.cmp.threebox.ad-luxury-cards .ad-divider {
  width: 38px;
  height: 1.5px;
  background: linear-gradient(90deg, #C9A961, #E8D08C, transparent);
  margin: 14px 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

/* ----- DESCRIPTION ----- */
.cmp.threebox.ad-luxury-cards figcaption p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.94rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.55 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transform: translateY(8px);
  margin: 0 !important;
  display: block !important;
  transition:
    max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
    opacity 0.45s ease 0.32s,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.32s !important;
}

/* ----- CTA BUTTON ----- */
.cmp.threebox.ad-luxury-cards figcaption a {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 11px 22px !important;
  margin-top: 18px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #E8D08C !important;
  border: 1px solid #C9A961 !important;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.18), rgba(201, 169, 97, 0.02)) !important;
  border-radius: 4px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(22px);
  text-decoration: none !important;
  transition:
    opacity 0.5s ease 0.42s,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.42s,
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease !important;
}

/* =====================================================
   HOVER STATE — wow moment
   ===================================================== */
.cmp.threebox.ad-luxury-cards .threebox-card:hover {
  transform: translateY(-14px);
}
.cmp.threebox.ad-luxury-cards .threebox-card:hover figure {
  box-shadow:
    0 36px 70px rgba(50, 35, 15, 0.32),
    0 12px 24px rgba(50, 35, 15, 0.18),
    0 0 0 1px rgba(201, 169, 97, 0.5);
}
.cmp.threebox.ad-luxury-cards .threebox-card:hover .three_box_image_element {
  transform: scale(1.14) !important;
  filter: brightness(1.05) saturate(1.08);
}
.cmp.threebox.ad-luxury-cards .threebox-card:hover figure::after {
  background: linear-gradient(
    180deg,
    rgba(15, 25, 20, 0.15) 0%,
    rgba(15, 25, 20, 0.4)  35%,
    rgba(15, 25, 20, 0.85) 70%,
    rgba(10, 18, 14, 0.96) 100%
  ) !important;
}
.cmp.threebox.ad-luxury-cards .threebox-card:hover figure::before {
  border-color: rgba(232, 208, 140, 0.55);
  inset: 12px;
}
.cmp.threebox.ad-luxury-cards .threebox-card:hover .ad-shimmer::before {
  transform: translateX(500%) rotate(18deg);
  transition-duration: 1.2s;
  transition-delay: 0.1s;
}
.cmp.threebox.ad-luxury-cards .threebox-card:hover .ad-particles { opacity: 1; }
.cmp.threebox.ad-luxury-cards .threebox-card:hover .ad-particles span {
  animation: adFloat 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.cmp.threebox.ad-luxury-cards .threebox-card:hover figcaption h2,
.cmp.threebox.ad-luxury-cards .threebox-card:hover figcaption h3 {
  transform: translateY(-4px) !important;
}
.cmp.threebox.ad-luxury-cards .threebox-card:hover .ad-divider {
  transform: scaleX(1);
}
.cmp.threebox.ad-luxury-cards .threebox-card:hover figcaption p {
  max-height: 90px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  margin: 12px 0 0 !important;
}
.cmp.threebox.ad-luxury-cards .threebox-card:hover figcaption a {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.cmp.threebox.ad-luxury-cards figcaption a:hover {
  background: #C9A961 !important;
  color: #0E2D22 !important;
  box-shadow: 0 8px 20px rgba(201, 169, 97, 0.35);
}

/* Particle stagger (positions + delays) */
.cmp.threebox.ad-luxury-cards .ad-particles span:nth-child(1)  { left: 8%;  animation-delay: 0.0s; }
.cmp.threebox.ad-luxury-cards .ad-particles span:nth-child(2)  { left: 18%; animation-delay: 0.4s; width: 3px; height: 3px; }
.cmp.threebox.ad-luxury-cards .ad-particles span:nth-child(3)  { left: 28%; animation-delay: 0.8s; }
.cmp.threebox.ad-luxury-cards .ad-particles span:nth-child(4)  { left: 38%; animation-delay: 1.2s; width: 3px; height: 3px; }
.cmp.threebox.ad-luxury-cards .ad-particles span:nth-child(5)  { left: 48%; animation-delay: 0.2s; width: 5px; height: 5px; }
.cmp.threebox.ad-luxury-cards .ad-particles span:nth-child(6)  { left: 58%; animation-delay: 0.6s; }
.cmp.threebox.ad-luxury-cards .ad-particles span:nth-child(7)  { left: 68%; animation-delay: 1.0s; width: 3px; height: 3px; }
.cmp.threebox.ad-luxury-cards .ad-particles span:nth-child(8)  { left: 78%; animation-delay: 0.3s; }
.cmp.threebox.ad-luxury-cards .ad-particles span:nth-child(9)  { left: 88%; animation-delay: 0.7s; width: 3px; height: 3px; }
.cmp.threebox.ad-luxury-cards .ad-particles span:nth-child(10) { left: 50%; animation-delay: 1.4s; width: 5px; height: 5px; }

/* Per-card theme tints (positional - works automatically) */
.cmp.threebox.ad-luxury-cards .threebox-card:nth-child(1) .ad-shimmer::before {
  /* Cooler silvery shimmer for first card (külçe) */
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(220, 230, 240, 0.0)  45%,
    rgba(220, 230, 240, 0.35) 49%,
    rgba(245, 250, 255, 0.6)  51%,
    rgba(220, 230, 240, 0.35) 53%,
    rgba(220, 230, 240, 0.0)  58%,
    transparent 70%
  );
}
.cmp.threebox.ad-luxury-cards .threebox-card:nth-child(3) .ad-particles span {
  /* Warmer reddish-gold particles for third card (ata altın) */
  background: radial-gradient(circle, #ffd9b0, #d4943a 45%, transparent 75%);
  box-shadow: 0 0 8px rgba(212, 148, 58, 0.85);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 991.98px) {
  .cmp.threebox.ad-luxury-cards .threebox-card {
    width: calc(50% - 12px) !important;
  }
}
@media (max-width: 575.98px) {
  .cmp.threebox.ad-luxury-cards { padding: 56px 0 !important; }
  .cmp.threebox.ad-luxury-cards .threebox-card {
    width: 100% !important;
  }
  .cmp.threebox.ad-luxury-cards .threebox-card figure {
    aspect-ratio: 4 / 5;
  }
  .cmp.threebox.ad-luxury-cards figcaption h2,
  .cmp.threebox.ad-luxury-cards figcaption h3 {
    font-size: 1.4rem !important;
  }
}

/* Touch devices: always show content (no hover) */
@media (hover: none) {
  .cmp.threebox.ad-luxury-cards figcaption p {
    max-height: 90px !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 12px 0 0 !important;
  }
  .cmp.threebox.ad-luxury-cards figcaption a {
    opacity: 1 !important;
    transform: none !important;
  }
  .cmp.threebox.ad-luxury-cards .ad-divider {
    transform: scaleX(1);
  }
  .cmp.threebox.ad-luxury-cards .threebox-card figure::after {
    background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(15,25,20,0.5) 60%, rgba(10,18,14,0.92) 100%) !important;
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cmp.threebox.ad-luxury-cards *,
  .cmp.threebox.ad-luxury-cards *::before,
  .cmp.threebox.ad-luxury-cards *::after {
    animation: none !important;
    transition-duration: 0.2s !important;
  }
  .cmp.threebox.ad-luxury-cards .ad-particles span { display: none; }
}