/* Çark-ı Felek penceresi stili: vitrin (spin-wheel.php) ve panel önizlemesi (spin-wheel/form.php) ortak. spin-wheel.php içindeki
   <style> bloğundan değişmeden taşındı (Kamila 2026-10-28, REFACTOR §15.419). */
/* === Spin Wheel Overlay === */
#spin-wheel-overlay {
    position: fixed; inset: 0; z-index: 9999998;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    font-family: var(--et-font-body, 'Inter', system-ui, sans-serif);
    animation: swOverIn .25s ease;
    overflow-y: auto;
}
@keyframes swOverIn { from { opacity: 0 } to { opacity: 1 } }

/* DÜZELTME: modalın sabit bir yükseklik/scroll sınırı yoktu (yalnızca
   overflow:hidden — taşan içerik kırpılıyor, KAYDIRILAMIYORDU). Masaüstünde
   fark edilmez ama mobilde (özellikle required_field='both' iken 3 girdi
   alanıyla veya kısa viewport'lu telefonlarda, ör. iPhone SE ~667px) modal
   içeriği viewport'tan uzun olabiliyor — kapatma butonu dahil alt/üst kısım
   ekran dışına taşıp ERİŞİLEMEZ hale geliyordu (popups.js'teki kendi popup
   kutusunun zaten sahip olduğu max-height+overflow-y:auto deseniyle aynı
   düzeltme burada da uygulanıyor). */
#spin-wheel-modal {
    position: relative; display: flex;
    background: var(--et-surface);
    border-radius: var(--card-radius, 12px);
    overflow-y: auto; overflow-x: hidden;
    max-width: 740px; width: 100%; max-height: calc(100vh - 32px);
    box-shadow: 0 24px 80px rgba(0,0,0,.3);
    animation: swModIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes swModIn { from { transform: scale(.82); opacity: 0 } to { transform: scale(1); opacity: 1 } }

#spin-close-btn {
    position: absolute; top: 12px; right: 14px; z-index: 10;
    background: rgba(255,255,255,.9); border: none; border-radius: 50%;
    width: 30px; height: 30px; font-size: 18px; line-height: 1;
    cursor: pointer; color: #555;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: background .15s, color .15s;
}
#spin-close-btn:hover { color: #111; background: #fff; }

/* === Sol bolum === */
#spin-left {
    background: var(--et-surface);
    display: flex; align-items: center; justify-content: center;
    padding: 24px 20px; flex: 0 0 auto;
}
#spin-canvas-wrap { position: relative; width: 340px; height: 340px; }
#spin-canvas { display: block; border-radius: 50%; }
#spin-pin {
    position: absolute; top: 50%; right: -8px; transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 10px solid transparent; border-bottom: 10px solid transparent;
    border-right: 22px solid var(--et-primary);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); z-index: 2;
}

/* === Sag bolum === */
#spin-right {
    flex: 1; display: flex; flex-direction: column;
    align-items: stretch; justify-content: center;
    padding: 36px 32px 28px; min-width: 0;
    background: var(--et-surface);
}

#spin-ribbon {
    display: inline-block;
    background: var(--et-primary);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; align-self: flex-start;
}

#spin-modal-title {
    display: block;
    font-size: 26px; font-weight: 800; margin: 0 0 10px;
    color: var(--et-text); line-height: 1.25;
    font-family: var(--et-font-heading, var(--et-font-body, 'Inter', sans-serif));
}
#spin-modal-desc { font-size: 14px; color: var(--et-text-muted); margin: 0 0 20px; line-height: 1.5; }

#spin-inputs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
#spin-name-input, #spin-email-input, #spin-phone-input {
    width: 100%; padding: 11px 14px; box-sizing: border-box;
    border: 1.5px solid var(--et-border);
    border-radius: var(--btn-radius, 8px);
    font-size: 15px; font-family: inherit; outline: none;
    transition: border-color .15s; color: var(--et-text);
    background: var(--et-bg);
}
#spin-name-input:focus, #spin-email-input:focus, #spin-phone-input:focus {
    border-color: var(--et-primary); background: #fff;
}
#spin-form-error { display: none; color: #dc2626; font-size: 13px; margin-bottom: 8px; }

.spin-primary-btn {
    width: 100%; padding: 13px;
    background: var(--et-primary);
    color: var(--btn-primary-text, #fff);
    border: none; border-radius: var(--btn-radius, 8px);
    font-size: 16px; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: background .15s; margin-top: 10px;
}
.spin-primary-btn:hover { background: color-mix(in srgb, var(--et-primary), black 12%); }
.spin-primary-btn:disabled { opacity: .55; cursor: default; }
#spin-privacy-note { font-size: 11px; color: var(--et-text-muted); margin: 10px 0 0; text-align: center; }

/* Panel B */
#spin-panel-spinning { text-align: center; }
#spin-spinner-icon { font-size: 52px; margin-bottom: 12px; animation: swBounce 1s ease-in-out infinite alternate; }
@keyframes swBounce { from { transform: scale(.9) } to { transform: scale(1.1) } }
#spin-spinning-text { font-size: 16px; color: var(--et-text-muted); font-weight: 600; }

/* Panel C */
#spin-panel-result { text-align: center; }
#spin-result-icon { font-size: 52px; margin-bottom: 10px; line-height: 1; }
#spin-result-icon svg { display: block; margin: 0 auto; }
#spin-spinner-icon svg { animation: spin-rotate 1s linear infinite; display: block; margin: 0 auto 10px; }
@keyframes spin-rotate { to { transform: rotate(360deg); } }
#spin-result-title {
    font-size: 22px; font-weight: 800; margin: 0 0 8px;
    color: var(--et-text);
    font-family: var(--et-font-heading, var(--et-font-body, 'Inter', sans-serif));
}
#spin-result-desc { font-size: 14px; color: var(--et-text-muted); margin: 0 0 18px; line-height: 1.5; }
#spin-coupon-box {
    background: var(--et-bg); border: 2px dashed var(--et-border);
    border-radius: var(--card-radius, 10px); padding: 12px 16px;
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px;
}
#spin-coupon-code { font-family: monospace; font-size: 20px; font-weight: 700; letter-spacing: 2.5px; color: var(--et-text); }
#spin-copy-btn {
    background: none; border: none; cursor: pointer;
    color: var(--et-primary); padding: 4px;
    display: flex; align-items: center; transition: color .15s;
}
#spin-copy-btn:hover { color: color-mix(in srgb, var(--et-primary), black 12%); }

/* Mobil */
@media (max-width: 600px) {
    #spin-wheel-modal { flex-direction: column; max-width: 340px; }
    #spin-left { padding: 20px 14px 14px; }
    #spin-canvas-wrap { width: 250px; height: 250px; }
    #spin-canvas { width: 250px; height: 250px; }
    #spin-right { padding: 20px 20px 24px; }
    #spin-modal-title { font-size: 20px; }
}