@font-face {
    font-family: 'Baristo';
    src: url('../fonts/baristo/Baristo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Baloo 2';
    src: url('../fonts/baloo2/Baloo2-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Baloo 2';
    src: url('../fonts/baloo2/Baloo2-Bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Baloo 2';
    src: url('../fonts/baloo2/Baloo2-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Baloo 2';
    src: url('../fonts/baloo2/Baloo2-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ══════════════════════════════════════
   VARIABLES & RESET
══════════════════════════════════════ */
:root {
    --bg:        #080808;
    --bg-card:   #111111;
    --bg-input:  #1a1a1a;
    --border:    #2a2a2a;
    --text:      #ffffff;
    --muted:     #707070;
    --green:     #06cd57;
    --peach:     #e5b395;   /* marka aksanı — kontur, hover, odak */
    --blue:      #008BFF;
    --orange:    #FF6600;
    --red:       #FF0019;
    --font:      'Baloo 2', sans-serif;
    --font-head: 'Baloo 2', sans-serif;
    --radius:    14px;
    --shadow:    0 8px 32px rgba(255, 255, 255, 0.6);
}

button, input, select, textarea { font-family: 'Baloo 2', sans-serif; }

.rw-section,
.fe-section {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ══════════════════════════════════════
   TİPOGRAFİ SİSTEMİ
══════════════════════════════════════ */
h1, h2, h3,
.rw-modal-title,
.fe-title, .fe-overlay-title {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    color: #ffffff;
}

.rw-tagline, .rw-step-label, .rw-modal-sub,
.fe-sub, .fe-overlay-msg, .fe-platform-desc,
.fe-timer-label, .fe-product-meta, .rw-gdpr span {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 500;
    color: var(--muted);
}

/* ══════════════════════════════════════
   AUTH GATE
══════════════════════════════════════ */
.rw-auth-gate {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.rw-auth-gate-box {
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.rw-auth-gate-icon  { font-size: 56px; line-height: 1; margin-bottom: 4px; }

.rw-auth-gate-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.rw-auth-gate-sub {
    font-family: 'Baloo 2', sans-serif;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 8px;
}

.rw-auth-gate-login {
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
}

.rw-auth-gate-login:hover { color: #fff; }

body.rw-gated .rw-section *,
body.rw-gated .fe-section * {
    pointer-events: none !important;
}

/* ══════════════════════════════════════
   WHEEL SECTION
══════════════════════════════════════ */
.rw-section {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px 60px;
}

.rw-header {
    text-align: center;
    margin-bottom: 32px;
}

.rw-logo {
    font-family: 'Baristo', var(--font-head);
    font-size: 45px;
    font-weight: normal;
    color: #ffffff;
    display: block;
    margin-bottom: 6px;
}

.rw-tagline {
    font-size: 14px;
    color: var(--muted);
}

/* ══════════════════════════════════════
   3 SÜTUN LAYOUT
══════════════════════════════════════ */
.rw-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.rw-col-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.rw-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ══════════════════════════════════════
   ATLII KARINCA (MERRY-GO-ROUND)
══════════════════════════════════════ */
.mgr-wrap {
    position: relative;
    width: 580px;
    margin: -100px auto 32px;
}

.mgr-svg {
    width: 100%;
    height: auto;
    display: block;
}

.mgr-3d {
    width: 100%;
    height: 400px;
    display: block;
    background: transparent;
    margin-top: 50px;
}

.mgr-scene {
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    transform: translateY(calc(-35% + 30px));
    height: 200px;
    perspective: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.rw-carousel {
    pointer-events: auto;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    position: absolute;
}

.rw-card {
    position: absolute;
    width: 100px;
    height: 130px;
    left: -50px;
    top: -65px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px;
    backface-visibility: hidden;
    border: 2px solid rgba(255,255,255,0.25);
    overflow: visible;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.rw-card::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, rgba(233,196,106,1), rgba(233,196,106,0.55));
    border-radius: 1px;
}

.rw-card-emoji { font-size: 26px; line-height: 1; }
.rw-card-svg   { width: 36px; height: 36px; display: block; }
/* Kart iç yüksekliği sabit: 130 - 20 (padding) - 4 (border) = 106px.
   Uzun ürün adları 4 satıra sarıp içeriği taşırıyor, görsel kartın dışına
   çıkıyordu. Etiket 2 satıra kırpıldı (…), böylece toplam
   70 (görsel) + 4 (gap) + 29 (2 satır) = 103px → sığıyor. */
.rw-card-label {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.rw-card-sub {
    font-size: 9px;
    text-align: center;
    opacity: 0.8;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rw-card-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    flex-shrink: 0;
}

.rw-spin-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: -50px;
}

.rw-spin-btn {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    background: transparent;
    border: 2.5px solid var(--peach);
    border-radius: 50px;
    padding: 8px 48px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.rw-spin-btn:hover:not(:disabled) {
    background: rgba(229,179,149,0.10);
    box-shadow: 0 0 18px rgba(229,179,149,0.35);
}

.rw-spin-btn:disabled {
    background: var(--green);
    border-color: var(--green);
    color: #ffffff;
    opacity: 1;
    cursor: not-allowed;
}

.rw-cooldown-msg {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.3px;
}

.rw-prize-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rw-prize-img {
    width: 160px;
    height: 160px;
    border-radius: 14px;
    background: #141414;
    border: 2px solid var(--peach);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rw-prize-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rw-prize-label {
    font-family: 'Baloo 2', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    max-width: 160px;
    line-height: 1.3;
}

/* Yan kart etiketleri BEYAZ (sadece desktop — mobil kuralları aşağıda, dokunulmadı).
   Not: eskiden bu renkler kartın hangi çark dilimine ait olduğunu söylüyordu.
   Beyaza alınca o bağ görsel olarak kayboluyor; segment rengi artık yalnızca
   çarkta ve ödül listesindeki noktalarda görünüyor. */
.rw-col-side .rw-prize-label { color: var(--text); }

/* ══════════════════════════════════════
   MOBILE WHEEL LAYOUT (wp_is_mobile)
══════════════════════════════════════ */
.rw-m-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.rw-m-center .mgr-wrap {
    width: 100%;
    max-width: 400px;
    margin: -50px auto 0;
    transform-origin: top center;
    transform: perspective(600px) rotateX(-8deg);
}

.rw-m-center .rw-spin-area {
    margin-top: -20px;
}

.rw-m-prize-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    margin-top: 28px;
}

.rw-m-prize-grid .rw-prize-img {
    width: 100%;
    height: 130px;
}

.rw-m-prize-grid .rw-prize-label {
    font-size: 13px;
    max-width: 100%;
}

.rw-prize-label--1 { color: #FF0019; }
.rw-prize-label--2 { color: #008BFF; }
.rw-prize-label--3 { color: #FF6600; }
.rw-prize-label--4 { color: #00FF66; }

/* ══════════════════════════════════════
   MODALS & OVERLAYS
══════════════════════════════════════ */
/* top: var(--rc-hdr-h, 0px) — header'ın altından başla.
   Fallback 0 BİLEREK: mobilde main.js yüklenmediği için --rc-hdr-h hiç
   set edilmez → 0 → bugünkü tam ekran davranışı aynen sürer. free.css
   her iki cihazda yükleniyor, o yüzden bu fallback mobili koruyor.
   overflow-y: auto — modal ekrandan uzunsa üstü kesilip erişilmez
   kalmasın; galeri eklenince modal boyu büyüdü. */
.rw-overlay {
    display: none;
    position: fixed;
    top: var(--rc-hdr-h, 0px);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.rw-overlay.active { display: flex; }

.rw-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 24px;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
    animation: modalIn 0.3s ease;
}

/* Kazanma modalı: şeftali kontur + üstten yumuşak aksan.
   Kaybetme modalı sade kalır — kazanç görsel olarak ayrışsın. */
#rwWinOverlay .rw-modal {
    border: 2px solid var(--peach);
    box-shadow: 0 0 0 1px rgba(229,179,149,0.15), 0 18px 50px rgba(0,0,0,0.65);
    padding-top: 28px;
    position: relative;
    overflow: hidden;
}
#rwWinOverlay .rw-modal::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--peach), transparent);
}

@keyframes modalIn {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.rw-modal-emoji  { font-size: 48px; line-height: 1; }
.rw-modal-title  { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--text); text-align: center; }
.rw-modal-prize  {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 800;
    color: var(--peach);          /* marka aksanı — ödül adı kartın kahramanı */
    text-align: center;
    line-height: 1.3;
    margin: 0;
}
.rw-modal-sub    { font-size: 13px; color: var(--muted); text-align: center; }
.rw-step-label   { font-size: 13px; color: var(--muted); text-align: center; }

.rw-btn {
    width: 100%;
    padding: 13px 0;
    border-radius: 50px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.15s;
    border: none;
    text-align: center;
}

.rw-btn:hover:not(:disabled) { transform: translateY(-1px); }
.rw-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.rw-btn--green { background: var(--green); color: #000; }
.rw-btn--green:hover:not(:disabled) { background: #04b34b; }

.rw-btn--outline {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--muted);
}
.rw-btn--outline:hover:not(:disabled) { border-color: var(--peach); color: var(--text); }

.rw-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}
.rw-input:focus { border-color: var(--peach); }
.rw-input::placeholder { color: var(--muted); }

.rw-gdpr {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    width: 100%;
}

.rw-gdpr input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--green);
    cursor: pointer;
}

.rw-gdpr span { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* İsteğe bağlı izin kutusu — zorunlu alanlardan görsel olarak ayrışsın.
   Müşteri "bunu işaretlemek zorunda mıyım?" diye düşünmesin. */
.rw-gdpr--optional {
    background: rgba(255,255,255,0.02);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 10px 12px;
}

.rw-status { font-size: 13px; text-align: center; min-height: 18px; }
.rw-status--ok  { color: var(--green); }
.rw-status--err { color: var(--red); }

.rw-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(6,205,87,0.1);
    border: 2px solid var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--green);
    font-weight: 700;
}

/* Başarı adımı düz bir <div>'di: .rw-modal'ın flex ortalaması yalnızca DOĞRUDAN
   çocuklarına işliyor, bu yüzden içerideki yeşil daire sola yaslı kalıyor ve
   Close butonu metne yapışıyordu. Kendisi de flex sütun oluyor.
   JS display'i '' olarak set ediyor (block değil), bu kural geçerli kalır. */
#rwStepSuccess {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.rw-success-msg {
    font-size: 14px;
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
}

/* ══════════════════════════════════════
   CONFETTI
══════════════════════════════════════ */
#rwConfetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 900;
    overflow: hidden;
}

.rw-confetti-piece {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0deg);    opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ══════════════════════════════════════
   FOLLOW & EARN SECTION
══════════════════════════════════════ */
.fe-section {
    padding: 0 20px 80px;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

.fe-header {
    text-align: center;
    padding-top: 0;
    padding-bottom: 36px;
    margin-top: -44px;
}

.fe-title {
    font-family: var(--font-head);
    font-size: 46px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.fe-sub {
    font-size: 18px;
    color: var(--muted);
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.7;
}

.fe-list { display: flex; flex-direction: column; gap: 8px; }

.fe-row {
    display: grid;
    grid-template-columns: 56px 1fr 210px 260px;
    align-items: center;
    gap: 16px;
    background: #141414;
    border: 1px solid #1e1e1e;
    border-left: 3px solid var(--row-accent, #333);
    border-radius: 12px;
    padding: 14px 18px;
    transition: background 0.2s, box-shadow 0.2s;
}

.fe-row:hover:not(.claimed) {
    background: #191919;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}

.fe-row.claimed { opacity: 0.6; border-left-color: var(--green); }

.fe-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.fe-icon img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }

.fe-icon--pinterest  { background: #E60023; }
.fe-icon--youtube    { background: #FF0000; }
.fe-icon--facebook   { background: #1877F2; }
.fe-icon--instagram  { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.fe-icon--x          { background: #111; border: 1.5px solid #444; }
.fe-icon--behance    { background: #1769FF; }

.fe-platform-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.fe-platform-name {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fe-platform-desc { font-size: 15px; color: var(--muted); white-space: nowrap; }

.fe-btn {
    font-family: 'Baloo 2', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text);
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
    width: 100%;
    text-align: center;
    margin-left: -100px;
}

.fe-btn:hover:not(.claimed-btn):not(:disabled) {
    border-color: var(--peach);
    color: var(--peach);
    background: rgba(229,179,149,0.06);
    box-shadow: 0 0 14px rgba(229,179,149,0.14);
}

.fe-btn.claimed-btn {
    border-color: var(--green);
    color: var(--green);
    background: rgba(6,205,87,0.08);
    cursor: default;
    opacity: 0.85;
}

.fe-product-preview { display: flex; align-items: center; gap: 14px; }

/* Bağ kurulmuş follow ödülü — yan kartlarla aynı davranış:
   duruşta şeftali çerçeve, üstüne gelince parlama. */
.fe-product-preview--clickable {
    cursor: pointer;
    transition: transform .2s ease;
}
.fe-product-preview--clickable:hover { transform: translateY(-2px); }
.fe-product-preview--clickable:hover .fe-product-thumb {
    box-shadow: 0 0 16px rgba(229,179,149,0.45);
}
.fe-product-preview--clickable:focus-visible {
    outline: 2px solid var(--peach);
    outline-offset: 4px;
    border-radius: 12px;
}

.fe-product-thumb {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--peach);
    background: linear-gradient(135deg, var(--row-accent, #2a2a2a) 0%, #111 100%);
    transition: box-shadow .2s;
}

.fe-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fe-product-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }

.fe-product-name { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.25; white-space: normal; }
.fe-product-meta  { font-size: 13px; color: var(--muted); }
.fe-product-pages { font-size: 13px; color: var(--muted); }

.fe-product-free {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: var(--green);
    border-radius: 999px;
    padding: 3px 14px;
    display: inline-block;
    width: fit-content;
    line-height: 1.6;
    margin-top: 2px;
}

/* ══════════════════════════════════════
   FOLLOW OVERLAY
══════════════════════════════════════ */
.fe-overlay {
    display: none;
    position: fixed;
    top: var(--rc-hdr-h, 0px);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.92);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    backdrop-filter: blur(6px);
}

.fe-overlay.active { display: flex; }

.fe-overlay-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 28px;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
    animation: modalIn 0.3s ease;
}

.fe-overlay-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.fe-overlay-title { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--text); text-align: center; }
.fe-overlay-msg   { font-size: 17px; color: var(--muted); text-align: center; line-height: 1.7; }

.fe-claim-overlay {
    display: none;
    position: fixed;
    top: var(--rc-hdr-h, 0px);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 2100;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.fe-claim-overlay.active { display: flex; }

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════ */
@media (max-width: 479px) {
    .rw-logo  { font-size: 22px; }
    .fe-title { font-size: 32px; letter-spacing: 2px; }
    .fe-section { padding: 0 14px 60px; }

    /* NOT #14: reduce card size on mobile so wheel looks larger */
    .rw-card { width: 82px; height: 108px; left: -41px; top: -54px; }
    .rw-card-img { width: 60px; height: 60px; }
    .rw-card-label { font-size: 9px; }
    .rw-card-svg { width: 28px; height: 28px; }

    .fe-row {
        grid-template-columns: 36px 1fr 110px;
        grid-template-areas:
            "icon info    product"
            "btn  btn     product";
        gap: 6px 10px;
        padding: 12px 14px;
        align-items: start;
    }

    .fe-icon            { grid-area: icon; width: 36px; height: 36px; }
    .fe-platform-info   { grid-area: info; }
    .fe-btn             { grid-area: btn; margin-left: 0; }
    .fe-product-preview { grid-area: product; flex-direction: column; align-items: flex-start; gap: 6px; }
    .fe-product-thumb   { width: 100%; height: 80px; border-radius: 8px; }
    .fe-product-info    { width: 100%; }
    .fe-product-name    { font-size: 12px; max-width: 100%; }
    .fe-platform-name   { font-size: 17px; }
}

/* ══════════════════════════════════════
   LIVE CHAT WIDGET
══════════════════════════════════════ */
#rc-chat-widget {
    position: fixed;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    right: calc(28px + env(safe-area-inset-right, 0px));
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

#rcChatBtn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #00D8FF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,216,255,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
    color: #000;
}
#rcChatBtn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,216,255,0.5); }

#rc-chat-panel {
    width: 340px;
    background: #0d0d0d;
    border: 1px solid #1e1e1e;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
}
#rc-chat-panel.rc-chat-hidden { display: none; }

.rc-chat-head {
    background: #111;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #1e1e1e;
}
.rc-chat-head-info { display: flex; align-items: center; gap: 10px; }

.rc-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-family: 'Baristo', serif;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rc-chat-name   { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; color: #fff; }
.rc-chat-status { font-family: 'Baloo 2', sans-serif; font-size: 11px; color: #06cd57; }

.rc-chat-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #707070;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    line-height: 0;
}
.rc-chat-close:hover { color: #fff; }

.rc-chat-msgs {
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 260px;
    max-height: 320px;
}
.rc-chat-msgs::-webkit-scrollbar { width: 4px; }
.rc-chat-msgs::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }

.rc-chat-msg { display: flex; flex-direction: column; max-width: 82%; }
.rc-chat-msg--admin    { align-self: flex-start; }
.rc-chat-msg--customer { align-self: flex-end; }

.rc-chat-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-family: 'Baloo 2', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}
.rc-chat-msg--admin .rc-chat-bubble {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #fff;
    border-bottom-left-radius: 4px;
}
.rc-chat-msg--customer .rc-chat-bubble {
    background: #06cd57;
    color: #000;
    font-weight: 600;
    border-bottom-right-radius: 4px;
}

.rc-chat-time {
    font-family: 'Baloo 2', sans-serif;
    font-size: 10px;
    color: #707070;
    margin-top: 3px;
    padding: 0 4px;
}
.rc-chat-msg--customer .rc-chat-time { text-align: right; }

.rc-chat-form {
    padding: 12px;
    border-top: 1px solid #1e1e1e;
    display: flex;
    gap: 8px;
    align-items: center;
}

#rcChatInput {
    flex: 1;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px 14px;
    font-family: 'Baloo 2', sans-serif;
    font-size: 13px;
    color: #fff;
    outline: none;
    transition: border-color 0.2s;
}
#rcChatInput:focus { border-color: #06cd57; }
#rcChatInput::placeholder { color: #707070; }

#rcChatSend {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #00D8FF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
    color: #000;
    line-height: 0;
}
#rcChatSend:hover { background: #00b8d9; }

/* ════════════════════════════════════════════════════
   AŞAMA 3 — Ürün modalı · tıklanabilir yan kart · ödül listesi
   (Hepsi desktop. Mobil markup'ı bunları hiç render etmiyor.)
════════════════════════════════════════════════════ */

/* ── Tıklanabilir yan kart ── */
.rw-prize-card--clickable {
    cursor: pointer;
    transition: transform .2s ease;
}
.rw-prize-card--clickable:hover { transform: translateY(-4px); }
.rw-prize-card--clickable:hover .rw-prize-img {
    box-shadow: 0 0 16px rgba(229,179,149,0.45);
}
.rw-prize-card--clickable:focus-visible {
    outline: 2px solid var(--peach);
    outline-offset: 4px;
    border-radius: var(--radius);
}

/* ── Ürün modalı ── */
/* Modal iskeleti SABİT: başlık uzun ya da fotoğraf çok olsa da yükseklik
   değişmesin. Her satır kendi yerini baştan ayırıyor — ürünler arası
   geçişte kutu zıplamıyor. */
.rw-modal--prod {
    position: relative;
    width: 380px;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    border-color: var(--peach);
    gap: 14px;
}

/* Başlık: en fazla 2 satır, ama HER ZAMAN 2 satırlık yer kaplar.
   Kısa başlıkta da uzun başlıkta da kutu aynı boyda kalır. */
.rw-modal--prod .rw-modal-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    min-height: 2.5em;
    font-size: 22px;
    margin: 0;
}

/* Alt metin ve fiyat: tek satırlık yer her zaman ayrılı */
.rw-modal--prod .rw-prod-sub   { min-height: 1.2em; margin: 0; }
.rw-modal--prod .rw-prod-price { min-height: 1.3em; margin: 0; }

.rw-prod-close {
    position: absolute;
    top: 10px; right: 12px;
    background: none; border: none;
    color: var(--muted);
    font-size: 18px; line-height: 1;
    cursor: pointer; padding: 4px;
}
.rw-prod-close:hover { color: var(--text); }

.rw-prod-gal { position: relative; }

/* Ürün görselleri 1080×1440 (dikey) = 3:4. Kare kutuya 'cover' ile
   basmak üstten-alttan kırpıyordu. Kutu artık kaynağın oranında: kırpma yok.
   object-fit: contain — farklı oranda bir görsel gelirse kırpmak yerine
   sığdırsın; ürün görselinde içerik kaybı kabul edilemez. */
.rw-prod-img {
    width: 240px;
    aspect-ratio: 3 / 4;         /* 1080×1440 */
    border-radius: var(--radius);
    background: #141414;
    border: 2px solid var(--peach);
    overflow: hidden;
}
.rw-prod-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Galeri okları ── */
.rw-gal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 17px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.rw-gal-nav:hover        { background: rgba(0,0,0,.9); border-color: var(--peach); }
.rw-gal-nav--prev        { left: -13px; }
.rw-gal-nav--next        { right: -13px; }
.rw-gal-nav[hidden]      { display: none; }

.rw-gal-count {
    position: absolute;
    bottom: 8px; right: 8px;
    background: rgba(0,0,0,.7);
    color: #ddd;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
}
.rw-gal-count[hidden] { display: none; }

/* ── Küçük görseller ── */
/* TEK SIRA + yatay kaydırma. Eskiden flex-wrap:wrap idi: 12 fotoğraflı
   ürün 3 sıra yapıp modalı iki katına çıkarıyordu. Artık kaç fotoğraf
   olursa olsun yükseklik sabit — fazlası yana kayar. */
.rw-gal-thumbs {
    display: flex;
    gap: 6px;
    /* safe center: az fotoğrafta ortalar, taşınca baştan başlar
       (düz 'center' taşan şeritte ilk görselleri erişilmez kılardı) */
    justify-content: safe center;
    flex-wrap: nowrap;
    width: 240px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--peach) transparent;
}
.rw-gal-thumbs::-webkit-scrollbar        { height: 4px; }
.rw-gal-thumbs::-webkit-scrollbar-track  { background: transparent; }
.rw-gal-thumbs::-webkit-scrollbar-thumb  { background: var(--peach); border-radius: 4px; }
.rw-gal-thumbs[hidden] { display: none; }

.rw-gal-thumb {
    width: 42px;
    flex: 0 0 42px;              /* kaydırma şeridinde sıkışmasın */
    aspect-ratio: 3 / 4;         /* büyük görselle aynı oran */
    padding: 0;
    border: 1px solid rgba(229,179,149,0.35);
    border-radius: 7px;
    overflow: hidden;
    background: #141414;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s, border-color .2s;
}
.rw-gal-thumb img       { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw-gal-thumb:hover     { opacity: .85; }
.rw-gal-thumb.is-active { opacity: 1; border-color: var(--peach); }

.rw-prod-sub {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    margin: 0;
}

.rw-prod-price {
    font-size: 15px;
    color: var(--text);
    text-align: center;
    margin: 0;
}
.rw-prod-price s        { color: var(--muted); }
.rw-prod-price strong   { color: var(--text); }

/* ── Ödül listesi (çark üstündeki çipler) ── */
.rw-prizelist {
    /* .rw-section zaten 1300px sınırlıyor — burada ayrıca daraltma, tek satır sığmıyor */
    width: 100%;
    margin: 0 auto 36px;   /* çarkla iç içe girmesin */
    text-align: center;
}

.rw-prizelist-items {
    list-style: none;
    margin: 0;
    padding: 0 8px;
    display: flex;
    flex-wrap: nowrap;          /* tek satır */
    justify-content: center;
    gap: 10px;
}

.rw-prizelist-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;        /* çip kendi içinde kırılmasın */
    gap: 8px;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    background: var(--bg-card);
    border: 1.5px solid var(--peach);
    border-radius: 999px;
    padding: 8px 16px;
    transition: box-shadow .2s;
}
/* Metin beyaz — durum bilgisini soldaki renkli nokta taşıyor. */
.rw-prizelist-item--nowin { color: var(--text); opacity: .55; }
.rw-prizelist-item:hover  { box-shadow: 0 0 12px rgba(229,179,149,0.35); }

/* Güvenlik ağı: ürün adları uzarsa ya da ekran darsa taşma yerine alt satıra insin.
   Tek satır isteniyor ama taşan bir satır, iki satırdan kötüdür. */
@media (max-width: 1150px) {
    .rw-prizelist-items { flex-wrap: wrap; }
}

.rw-prizelist-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rw-prizelist-txt { line-height: 1.3; }