/* ============================================================
   Anasayfa hero'su: three.js urun vitrini (views/inc/hero3d.ejs)
   ============================================================ */

.h3d { --h3d-a: 14, 139, 180; --h3d-b: 63, 202, 144; }
.h3d[data-tema="ig"] { --h3d-a: 131, 58, 180; --h3d-b: 253, 29, 29; }
.h3d[data-tema="x"] { --h3d-a: 71, 85, 105; --h3d-b: 14, 139, 180; }
.h3d[data-tema="cloud"] { --h3d-a: 14, 139, 180; --h3d-b: 63, 202, 144; }

.h3d-title { font-size: clamp(1.7rem, 3vw, 2.45rem); margin-bottom: 1.25rem; }

/* ---------- urun sekmeleri ---------- */
.h3d-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.h3d-tab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--ar-border-color);
  border-radius: 50rem;
  background: var(--ar-body-bg);
  color: var(--ar-body-color);
  font-size: 0.875rem; font-weight: 600;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.h3d-tab:hover { border-color: rgba(var(--h3d-a), 0.5); }
.h3d-tab.active {
  border-color: rgb(var(--h3d-a));
  color: rgb(var(--h3d-a));
  box-shadow: 0 6px 18px rgba(var(--h3d-a), 0.22);
}
.dark-mode .h3d-tab.active { color: #fff; background: rgba(var(--h3d-a), 0.35); }

/* ---------- secili urun karti ---------- */
.h3d-spot { min-height: 300px; transition: opacity 0.25s, transform 0.25s; }
.h3d-spot.degisiyor { opacity: 0; transform: translateY(8px); }
.h3d-platform { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--ar-gray-600); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.h3d-name { font-family: 'Sora', 'Inter', sans-serif; font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.h3d-features { margin-bottom: 1.25rem; }
.h3d-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin-bottom: 1rem; }
.h3d-price .lbl { font-size: 0.8rem; color: var(--ar-gray-600); text-transform: uppercase; letter-spacing: 0.05em; }
.h3d-price .fiyatYaz, .h3d-price .fiyatYazTL { font-size: 1.75rem; font-weight: 800; color: var(--ar-heading-color); line-height: 1; }
.h3d-price .save { font-size: 0.8rem; font-weight: 600; color: var(--ar-success); background: rgba(var(--ar-success-rgb), 0.12); border-radius: 50rem; padding: 0.2rem 0.6rem; }

/* ---------- 3D sahne ---------- */
.h3d-stage { position: relative; height: 560px; }
.h3d-glow {
  position: absolute; inset: 8% 4% 0;
  background:
    radial-gradient(50% 45% at 50% 55%, rgba(var(--h3d-a), 0.28), transparent 70%),
    radial-gradient(35% 30% at 70% 80%, rgba(var(--h3d-b), 0.22), transparent 70%);
  filter: blur(10px);
  transition: background 0.8s;
  pointer-events: none;
}
.h3d-fallback { position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: opacity 0.6s; }
@media (min-width: 992px) { .h3d-fallback.home-hero-img { margin: 0 0 0 -8%; width: 116%; } }
.h3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s; touch-action: pan-y; cursor: grab; }
.h3d-canvas.surukle { cursor: grabbing; }
.h3d-canvas.tikla { cursor: pointer; }
.h3d.is-3d .h3d-canvas { opacity: 1; }
.h3d.is-3d .h3d-fallback { opacity: 0; }
.h3d-hint {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  display: none; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ar-gray-600); opacity: 0.8; pointer-events: none;
}
.h3d.is-3d .h3d-hint { display: inline-flex; }

@media (max-width: 991.98px) {
  .h3d-stage { height: 440px; }
  .h3d-spot { min-height: 0; }
}
@media (max-width: 575.98px) {
  .h3d-stage { height: 380px; margin: 0 -0.75rem; }
}
@media (max-width: 575.98px) {
  .h3d-buy .btn { padding: 0.5rem 1.1rem; font-size: 0.875rem; }
}