/* ==========================================================================
   Funny's Snack — Şans Çarkı (ana sayfa kartı + popup)
   ========================================================================== */

/* Card
   ========================================================================== */

.spin {
  padding-bottom: 48px;
}

.spin-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 32px;
  padding: 44px 48px;
  border-radius: var(--radius-lg);
  background: var(--c-navy);
  color: var(--c-white);
  overflow: hidden;
}

.spin-card__eyebrow {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .8;
}

.spin-card__title {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.12;
  text-transform: uppercase;
}

.spin-card__text {
  max-width: 420px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
}

.spin-card__btn {
  margin-top: 26px;
}

/* Kartın sağındaki dekoratif çark: yarısı kartın dışına taşar */
.spin-card__visual {
  align-self: stretch;
  position: relative;
}

.wheel--mini {
  position: absolute;
  top: 50%;
  left: 0;
  width: 360px;
  transform: translateY(-50%);
}

.wheel--mini .wheel__svg {
  animation: wheel-idle 24s linear infinite;
}

@keyframes wheel-idle {
  to { transform: rotate(360deg); }
}

/* Wheel
   ========================================================================== */

.wheel {
  position: relative;
  width: min(100%, 340px);
  margin: 8px auto 0;
}

.wheel__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* wheel.js'teki SPIN_DURATION ile aynı süre */
  transition: transform 5.2s cubic-bezier(.12, .7, .1, 1);
}

.wheel__rim {
  fill: var(--c-white);
}

.wheel__segment {
  stroke: var(--c-white);
  stroke-width: 2;
}

.wheel__label {
  font-family: var(--font-display);
  font-stretch: 115%;
  font-weight: 900;
  font-size: 26px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.wheel__unit {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .1em;
  text-anchor: middle;
  dominant-baseline: middle;
}

.wheel__light {
  fill: #FFC531;
}

.wheel__hub {
  fill: var(--c-white);
  stroke: var(--c-bg);
  stroke-width: 4;
}

/* Üstteki ok */
.wheel__pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 1;
  width: 34px;
  height: 42px;
  background: var(--c-navy);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25));
}

/* Modal
   ========================================================================== */

.spin-modal {
  text-align: center;
}

.spin-modal .modal__subtitle {
  margin-bottom: 26px;
}

.spin-result {
  min-height: 1.5em;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 400;
}

.spin-result.is-win {
  font-family: var(--font-display);
  font-stretch: 115%;
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--c-red);
  animation: result-pop .4s ease;
}

@keyframes result-pop {
  from { opacity: 0; transform: scale(.8); }
}

/* Hak yokken çark soluk */
.spin-modal.is-empty .wheel {
  opacity: .45;
  filter: grayscale(.6);
}

.spin-modal.is-empty .spin-result {
  font-weight: 500;
  color: var(--c-red);
}

.spin-modal__btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .wheel--mini .wheel__svg {
    animation: none;
  }
}

/* Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .spin-card {
    grid-template-columns: 1fr;
    padding: 32px 28px 0;
  }

  /* Mobilde çark kartın altından yarım görünür */
  .spin-card__visual {
    height: 150px;
  }

  .wheel--mini {
    top: 0;
    left: 50%;
    width: 300px;
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .spin {
    padding-bottom: 32px;
  }

  .spin-card__title {
    font-size: 22px;
  }

  .spin-card__btn {
    width: 100%;
  }
}