/* ==========================================================
 * Aylık Pro+ Abone Çekilişi — /cekilis (T-20260716-02)
 * Sayfa prefix: rf-*
 * Renk: yalnızca binderim-tokens semantic token (var(--...)); hex yasaklı.
 * Dark: .theme-dark html elemanında toggle — token swapı otomatik.
 * Mobil: <=760px tek kolon, touch target >=44px.
 * ========================================================== */

/* Genislik/padding kabugu LAYOUT'tan gelir: UseWebMain -> .bx-main (max-width 1320px + 22px
   yatay padding), header satiriyla ayni hizada. rf-page ikinci kabuk KURMAZ; kurarsa
   (eski max-width:1100px) sayfa header'dan dar gorunur (kullanici bulgusu). */
.rf-page {
  max-width: none;
  margin: 0;
  padding: 16px 0 56px;
  font-family: var(--font-sans);
  color: var(--fg-2);
}

/* ---- Başlık bloğu ---- */
.rf-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 40px;
}

.rf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-fg);
}

.rf-h1 {
  margin: 2px 0 0;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--fg-1);
}

.rf-lead {
  margin: 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-3);
}

.rf-lead-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft, var(--bg-tint));
  color: var(--color-brand-fg);
  font-size: 13px;
  font-weight: 600;
}

.rf-lead-note i {
  font-size: 14px;
}

/* ---- Ana grid ---- */
.rf-grid {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 860px) {
  .rf-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Çark paneli ---- */
.rf-wheel-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2xl);
  padding: 28px 20px;
  box-shadow: var(--shadow-md);
}

.rf-wheel-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rf-wheel-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}

.rf-wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: var(--color-danger);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.rf-wheel-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: var(--bg-canvas);
  border: 3px solid var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.rf-wheel-center-icon {
  font-size: 30px;
  line-height: 1;
  color: var(--color-brand);
}

.rf-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.rf-status-phase {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-1);
}

.rf-status-countdown {
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 800;
  color: var(--color-brand);
}

.rf-user-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.rf-msg {
  margin: 0;
  color: var(--fg-2);
  font-size: 14px;
}

.rf-msg--eligible {
  color: var(--color-success);
  font-weight: 600;
}

.rf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--fg-on-brand);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: var(--shadow-brand);
  transition: transform 0.15s ease, background 0.15s ease;
}

.rf-cta:hover {
  transform: translateY(-1px);
  background: var(--color-brand-hover);
  color: var(--fg-on-brand);
}

.rf-winner-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--color-success-soft);
  border: 1px solid var(--color-success);
  color: var(--fg-1);
}

.rf-winner-banner i {
  font-size: 24px;
  color: var(--color-success);
  flex-shrink: 0;
}

.rf-winner-banner p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--fg-2);
}

/* ---- Ödül paneli ---- */
.rf-prize-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rf-clabel {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.rf-prize-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--bg-canvas);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2xl);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.rf-prize-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
  flex-shrink: 0;
}

.rf-prize-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rf-prize-name {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--fg-1);
}

.rf-prize-link {
  font-size: 13px;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}

.rf-prize-link:hover {
  text-decoration: underline;
}

.rf-prize-count {
  margin: 0;
  font-size: 13px;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.rf-winners-list {
  background: var(--bg-canvas);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2xl);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.rf-winners-ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rf-winners-ul li {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-tint);
  font-weight: 600;
  color: var(--fg-1);
}

/* ---- Bu ay için henüz ödül girilmemiş durumu ---- */
.rf-prize-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 32px 20px;
  background: var(--bg-sunken);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-2xl);
  color: var(--fg-3);
}

.rf-prize-placeholder i {
  font-size: 32px;
  color: var(--color-brand);
}

.rf-prize-placeholder p {
  margin: 0;
  font-size: 14px;
  max-width: 320px;
}

/* ---- Geçmiş çekilişler (tablo) ---- */
.rf-history {
  margin-top: 48px;
}

.rf-cmptitle {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg-1);
  margin-bottom: 16px;
}

.rf-log {
  display: flex;
  flex-direction: column;
  background: var(--bg-canvas);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.rf-log-head,
.rf-log-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 2fr;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
}

.rf-log-head {
  background: var(--bg-sunken);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.rf-log-row + .rf-log-row,
.rf-log-head + .rf-log-row {
  border-top: 1px solid var(--border-1);
}

.rf-log-prize {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rf-log-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  flex-shrink: 0;
}

.rf-log-img--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  font-size: 18px;
}

.rf-log-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
  overflow-wrap: anywhere;
}

.rf-log-date {
  font-size: 13px;
  color: var(--fg-2);
  text-transform: capitalize;
}

.rf-log-winners {
  font-size: 13px;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

.rf-log-nowin {
  color: var(--fg-3);
  font-style: italic;
}

.rf-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 40px 20px;
  background: var(--bg-sunken);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-2xl);
  color: var(--fg-3);
}

.rf-log-empty i {
  font-size: 30px;
  color: var(--color-brand);
}

.rf-log-empty p {
  margin: 0;
  font-size: 14px;
  max-width: 440px;
}

/* ---- Katılım şartları ---- */
.rf-terms {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border-1);
}

.rf-terms-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.rf-terms-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 860px;
}

.rf-terms-list li {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-3);
}

.rf-terms-list strong {
  color: var(--fg-2);
  font-weight: 700;
}

/* ---- Mobil ---- */
@media (max-width: 640px) {
  .rf-log-head {
    display: none;
  }

  .rf-log-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .rf-log-date::before,
  .rf-log-winners::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--fg-3);
  }
}

@media (max-width: 480px) {
  .rf-h1 {
    font-size: 28px;
  }

  .rf-prize-card {
    flex-direction: column;
    text-align: center;
  }
}