/* =================================================================
   YON — Sık Sorulan Sorular (SSS) — tüm sayfalar
   deploy-marker: yon-faq-v2
   .yh-faq · .yc-faq · .gm-faq · .ychk-faq · .gm-faq-list · …
   ================================================================= */

:root {
    --yon-faq-radius: var(--h-radius, 12px);
    --yon-faq-gap: 12px;
    --yon-faq-accent: var(--h-blue, #667afa);
    --yon-faq-accent-2: var(--h-blue-dark, #6366f1);
    --yon-faq-accent-text: var(--h-blue-text, #c7d2fe);
    --yon-faq-accent-soft: var(--h-blue-soft, rgba(102, 122, 250, 0.14));
    --yon-faq-open: var(--h-green, #34d399);
    --yon-faq-open-soft: var(--h-green-soft, rgba(52, 211, 153, 0.12));
    --yon-faq-surface: var(--h-bg-card, #2f3144);
    --yon-faq-raised: var(--h-bg-raised, #333548);
    --yon-faq-border: var(--h-border, #32394e);
    --yon-faq-text: var(--h-text, #d7d8e6);
    --yon-faq-muted: var(--h-text-muted, #9192a5);
    --yon-faq-num-size: 36px;
}

body.yonv2-body {
    --yon-faq-accent: var(--v2-primary, #5b6ef5);
    --yon-faq-accent-2: var(--v2-primary-2, #4553d8);
    --yon-faq-accent-text: #a5b0ff;
    --yon-faq-accent-soft: var(--v2-primary-soft, rgba(91, 110, 245, 0.14));
    --yon-faq-open: var(--v2-success, #22c55e);
    --yon-faq-open-soft: var(--v2-success-soft, rgba(34, 197, 94, 0.14));
    --yon-faq-surface: var(--v2-panel, #1a1c26);
    --yon-faq-raised: var(--v2-panel-2, #21232f);
    --yon-faq-border: var(--v2-line, #2b2e3c);
    --yon-faq-text: var(--v2-fg, #e9ebf2);
    --yon-faq-muted: var(--v2-fg-muted, #9ba1b5);
}

@keyframes yon-faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes yon-faq-glow {
    0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2), inset 4px 0 0 var(--yon-faq-open); }
    50% { box-shadow: 0 12px 32px color-mix(in srgb, var(--yon-faq-open) 18%, transparent), inset 4px 0 0 var(--yon-faq-open); }
}

/* ── Bölüm kabuğu ── */
.yh-faq.yh-section,
.yc-faq,
.gm-faq,
.ychk-faq,
.yca-faq,
.ygw-faq,
.ypa-faq,
.gw-faq {
    padding: 28px 0 48px;
}

.yh-section-shell--faq,
.yh-faq .yh-section-shell,
.yc-faq .yc-shell,
.gm-faq .gm-shell,
.yca-faq .yh-section-shell,
.ygw-faq .yh-section-shell,
.ypa-faq .yh-section-shell,
.gw-faq .yh-section-shell {
    position: relative;
    padding: 20px 22px;
    border-radius: calc(var(--yon-faq-radius) + 4px);
    border: 1px solid color-mix(in srgb, var(--yon-faq-accent) 14%, var(--yon-faq-border));
    background:
        radial-gradient(ellipse 90% 70% at 100% -10%, color-mix(in srgb, var(--yon-faq-accent) 9%, transparent), transparent 58%),
        radial-gradient(ellipse 60% 50% at 0% 100%, color-mix(in srgb, var(--yon-faq-open) 5%, transparent), transparent 55%),
        linear-gradient(165deg, color-mix(in srgb, var(--yon-faq-raised) 90%, transparent) 0%, var(--yon-faq-surface) 100%);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

.yh-section-shell--faq::before,
.yh-faq .yh-section-shell::before,
.yc-faq .yc-shell::before,
.gm-faq .gm-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--yon-faq-accent), var(--yon-faq-open), transparent 85%);
    opacity: 0.85;
    pointer-events: none;
}

/* Checkout — kabuk yok, kendi kartı */
.ychk-faq {
    margin-top: 18px;
    padding: 18px 18px 6px;
    border-radius: calc(var(--yon-faq-radius) + 4px);
    border: 1px solid color-mix(in srgb, var(--yon-faq-accent) 14%, var(--yon-faq-border));
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--yon-faq-accent) 7%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--yon-faq-raised) 88%, transparent), var(--yon-faq-surface));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* ── Liste + numaralandırma ── */
.yh-faq__list,
.yc-faq__list,
.gm-faq__list,
.ychk-faq__list,
[class*="-faq__list"] {
    display: flex;
    flex-direction: column;
    gap: var(--yon-faq-gap);
    counter-reset: yon-faq-n;
}

/* ── Kart ── */
.yh-faq__item,
.yc-faq__item,
.gm-faq__item,
.ychk-faq__item,
[class*="-faq__item"] {
    counter-increment: yon-faq-n;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--yon-faq-border) 88%, transparent);
    border-radius: calc(var(--yon-faq-radius) + 2px);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--yon-faq-raised) 94%, transparent) 0%,
        color-mix(in srgb, var(--yon-faq-surface) 98%, transparent) 100%
    );
    overflow: hidden;
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease,
        background 0.22s ease;
}

.yh-faq__item:last-child,
.yc-faq__item:last-child,
.gm-faq__item:last-child,
.ychk-faq__item:last-child,
[class*="-faq__item"]:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--yon-faq-border) 88%, transparent);
}

.yh-faq__item:hover,
.yc-faq__item:hover,
.gm-faq__item:hover,
.ychk-faq__item:hover,
[class*="-faq__item"]:hover {
    border-color: color-mix(in srgb, var(--yon-faq-accent) 32%, var(--yon-faq-border));
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.yh-faq__item.is-open,
.yc-faq__item.is-open,
.gm-faq__item.is-open,
.ychk-faq__item.is-open,
[class*="-faq__item"].is-open {
    border-color: color-mix(in srgb, var(--yon-faq-open) 48%, var(--yon-faq-border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--yon-faq-open-soft) 40%, var(--yon-faq-raised)) 0%,
        color-mix(in srgb, var(--yon-faq-surface) 96%, transparent) 100%
    );
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.22),
        inset 4px 0 0 var(--yon-faq-open);
    transform: translateY(-2px);
    animation: yon-faq-glow 2.4s ease-in-out 1;
}

/* ── Soru butonu ── */
.yh-faq__q,
.yc-faq__q,
.gm-faq__q,
.ychk-faq__q,
[class*="-faq__q"],
.yh-faq .yh-btn--accordion,
.yc-faq .yc-btn--accordion,
.gm-faq .gm-btn--accordion {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    min-height: 58px;
    padding: 16px 18px !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
    font-size: 14.5px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    color: var(--yon-faq-text) !important;
    white-space: normal;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

/* Numara rozeti */
.yh-faq__q::before,
.yc-faq__q::before,
.gm-faq__q::before,
.ychk-faq__q::before,
[class*="-faq__q"]::before,
.yh-faq .yh-btn--accordion::before,
.yc-faq .yc-btn--accordion::before {
    content: counter(yon-faq-n, decimal-leading-zero);
    flex: 0 0 var(--yon-faq-num-size);
    width: var(--yon-faq-num-size);
    height: var(--yon-faq-num-size);
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--yon-faq-accent-text);
    background: color-mix(in srgb, var(--yon-faq-accent) 14%, var(--yon-faq-raised));
    border: 1px solid color-mix(in srgb, var(--yon-faq-accent) 28%, var(--yon-faq-border));
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.yh-faq__q > span,
.yc-faq__q > span,
.gm-faq__q > span,
.ychk-faq__q > span,
[class*="-faq__q"] > span,
.yh-faq .yh-btn--accordion > span {
    flex: 1 1 auto;
    min-width: 0;
}

.yh-faq__q i,
.yc-faq__q i,
.gm-faq__q i,
.ychk-faq__q i,
[class*="-faq__q"] i,
.yh-faq .yh-btn--accordion i,
.yc-faq .yc-btn--accordion i {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin-left: auto;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    font-size: 18px;
    color: var(--yon-faq-muted);
    background: color-mix(in srgb, var(--yon-faq-surface) 80%, var(--yon-faq-raised));
    border: 1px solid color-mix(in srgb, var(--yon-faq-border) 80%, transparent);
    transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1), color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.yh-faq__q:hover,
.yc-faq__q:hover,
.gm-faq__q:hover,
.ychk-faq__q:hover,
[class*="-faq__q"]:hover,
.yh-faq .yh-btn--accordion:hover,
.yc-faq .yc-btn--accordion:hover {
    background: color-mix(in srgb, var(--yon-faq-accent-soft) 60%, transparent) !important;
    color: var(--yon-faq-accent-text) !important;
    transform: none !important;
}

.yh-faq__q:hover::before,
.yc-faq__q:hover::before,
.gm-faq__q:hover::before,
.ychk-faq__q:hover::before,
[class*="-faq__q"]:hover::before,
.yh-faq .yh-btn--accordion:hover::before {
    background: color-mix(in srgb, var(--yon-faq-accent) 22%, var(--yon-faq-raised));
    border-color: color-mix(in srgb, var(--yon-faq-accent) 42%, var(--yon-faq-border));
}

.yh-faq__q:focus-visible,
.yc-faq__q:focus-visible,
.ychk-faq__q:focus-visible,
[class*="-faq__q"]:focus-visible,
.yh-faq .yh-btn--accordion:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--yon-faq-accent) 65%, transparent);
    outline-offset: -2px;
}

.yh-faq__item.is-open .yh-faq__q,
.yc-faq__item.is-open .yc-faq__q,
.gm-faq__item.is-open .gm-faq__q,
.ychk-faq__item.is-open .ychk-faq__q,
[class*="-faq__item"].is-open [class*="-faq__q"],
.yh-faq__item.is-open .yh-btn--accordion {
    color: var(--yon-faq-open) !important;
    background: color-mix(in srgb, var(--yon-faq-open-soft) 70%, transparent) !important;
}

.yh-faq__item.is-open .yh-faq__q::before,
.yc-faq__item.is-open .yc-faq__q::before,
.gm-faq__item.is-open .gm-faq__q::before,
.ychk-faq__item.is-open .ychk-faq__q::before,
[class*="-faq__item"].is-open [class*="-faq__q"]::before,
.yh-faq__item.is-open .yh-btn--accordion::before {
    color: var(--yon-faq-open);
    background: color-mix(in srgb, var(--yon-faq-open) 16%, var(--yon-faq-raised));
    border-color: color-mix(in srgb, var(--yon-faq-open) 38%, var(--yon-faq-border));
    transform: scale(1.04);
}

.yh-faq__item.is-open .yh-faq__q i,
.yc-faq__item.is-open .yc-faq__q i,
.gm-faq__item.is-open .gm-faq__q i,
.ychk-faq__item.is-open .ychk-faq__q i,
[class*="-faq__item"].is-open [class*="-faq__q"] i,
.yh-faq__item.is-open .yh-btn--accordion i {
    transform: rotate(180deg);
    color: var(--yon-faq-open);
    background: color-mix(in srgb, var(--yon-faq-open) 14%, transparent);
    border-color: color-mix(in srgb, var(--yon-faq-open) 34%, var(--yon-faq-border));
}

/* ── Cevap ── */
.yh-faq__a,
.yc-faq__a,
.gm-faq__a,
.ychk-faq__a,
[class*="-faq__a"] {
    position: relative;
    padding: 4px 18px 20px calc(18px + var(--yon-faq-num-size) + 14px);
    margin: 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--yon-faq-muted);
    border-top: 1px solid color-mix(in srgb, var(--yon-faq-border) 50%, transparent);
    background: color-mix(in srgb, var(--yon-faq-surface) 55%, transparent);
    animation: yon-faq-reveal 0.28s ease both;
}

.yh-faq__a::before,
.yc-faq__a::before,
.gm-faq__a::before,
.ychk-faq__a::before,
[class*="-faq__a"]::before {
    content: "";
    position: absolute;
    left: calc(18px + var(--yon-faq-num-size) + 14px);
    top: 14px;
    bottom: 18px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--yon-faq-open), color-mix(in srgb, var(--yon-faq-accent) 40%, transparent));
    opacity: 0.55;
}

.yh-faq__a p,
.yc-faq__a p,
.gm-faq__a p,
.ychk-faq__a p,
[class*="-faq__a"] p {
    margin: 0 0 10px;
    padding-left: 12px;
}

.yh-faq__a p:last-child,
[class*="-faq__a"] p:last-child {
    margin-bottom: 0;
}

/* Devam linki */
.yh-faq__link,
[class*="-faq__link"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    margin-left: 12px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: var(--yon-faq-accent-text);
    background: var(--yon-faq-accent-soft);
    border: 1px solid color-mix(in srgb, var(--yon-faq-accent) 32%, var(--yon-faq-border));
    transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s;
}

.yh-faq__link:hover,
[class*="-faq__link"]:hover {
    background: color-mix(in srgb, var(--yon-faq-accent) 20%, var(--yon-faq-raised));
    border-color: var(--yon-faq-accent);
    color: var(--yon-faq-text);
    transform: translateX(2px);
}

.yh-faq__link i,
[class*="-faq__link"] i {
    font-size: 14px;
    transition: transform 0.16s ease;
}

.yh-faq__link:hover i,
[class*="-faq__link"]:hover i {
    transform: translateX(3px);
}

/* ── Bölüm başlığı ── */
.yh-faq .yh-section-head,
.yc-faq .yc-section-head,
.gm-faq .gm-section-head,
.ychk-faq .ychk-section-title,
[class*="-faq"] .yh-section-head {
    margin-bottom: 18px;
}

.yh-faq .yh-section-head__icon,
.yc-faq .yc-section-head__icon,
.gm-faq .gm-section-head__icon {
    background: var(--yon-faq-accent-soft);
    border: 1px solid color-mix(in srgb, var(--yon-faq-accent) 32%, var(--yon-faq-border));
    color: var(--yon-faq-accent-text);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--yon-faq-accent) 22%, transparent);
}

.yh-faq .yh-section-head__title,
.yc-faq .yc-section-head__title,
.gm-faq .gm-section-head__title,
.ychk-faq .ychk-section-title,
[class*="-faq"] .yh-section-head__title {
    letter-spacing: -0.02em;
}

/* Checkout başlık */
.ychk-faq .ychk-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--yon-faq-text);
}

.ychk-faq .ychk-section-title::before {
    content: "";
    width: 4px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--yon-faq-accent), var(--yon-faq-open));
    flex-shrink: 0;
}

/* ── Oyun parası statik SSS listesi ── */
.gm-faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--yon-faq-gap);
    counter-reset: yon-faq-n;
}

.gm-faq-list li {
    counter-increment: yon-faq-n;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--yon-faq-border) 88%, transparent);
    border-radius: calc(var(--yon-faq-radius) + 2px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--yon-faq-raised) 94%, transparent), var(--yon-faq-surface));
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--yon-faq-muted);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gm-faq-list li::before {
    content: counter(yon-faq-n, decimal-leading-zero);
    flex: 0 0 var(--yon-faq-num-size);
    width: var(--yon-faq-num-size);
    height: var(--yon-faq-num-size);
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--yon-faq-accent-text);
    background: color-mix(in srgb, var(--yon-faq-accent) 14%, var(--yon-faq-raised));
    border: 1px solid color-mix(in srgb, var(--yon-faq-accent) 28%, var(--yon-faq-border));
}

.gm-faq-list li strong {
    color: var(--yon-faq-text);
    font-weight: 700;
}

.gm-faq-list li:hover {
    border-color: color-mix(in srgb, var(--yon-faq-accent) 28%, var(--yon-faq-border));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ── Sohbet kompakt SSS ── */
.ychat-faq.yh-faq {
    padding: 0;
    margin-top: 14px;
    text-align: left;
}

.ychat-faq .yh-section-shell--faq,
.ychat-faq .yh-section-shell {
    padding: 14px 16px;
    box-shadow: none;
    backdrop-filter: none;
}

.ychat-faq .yh-section-shell::before {
    display: none;
}

.ychat-faq {
    --yon-faq-num-size: 30px;
}

.ychat-faq .yh-faq__q,
.ychat-faq .yh-btn--accordion {
    min-height: 48px;
    padding: 12px 14px !important;
    font-size: 13px !important;
    gap: 10px;
}

.ychat-faq .yh-faq__a {
    padding-left: calc(14px + var(--yon-faq-num-size) + 10px);
    font-size: 12.5px;
}

/* ── v1 hesap ana sayfa uyumu ── */
.yon-home--hesap .yh-faq__a {
    padding-left: calc(18px + var(--yon-faq-num-size) + 14px) !important;
}

.yon-home--hesap .yh-faq__item.is-open {
    border-color: color-mix(in srgb, var(--yon-faq-open) 48%, var(--yon-faq-border));
}

.yon-home--hesap .yh-faq__item.is-open .yh-btn--accordion {
    color: var(--yon-faq-open) !important;
    background: color-mix(in srgb, var(--yon-faq-open-soft) 70%, transparent) !important;
}

/* ── Açık tema ── */
html[data-theme="light"] .yh-section-shell--faq,
html[data-theme="light"] .yh-faq .yh-section-shell,
html[data-theme="light"] .yc-faq .yc-shell,
html[data-theme="light"] .ychk-faq {
    background: linear-gradient(165deg, #fff 0%, #f8fafc 100%);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .yh-faq__item,
html[data-theme="light"] .yc-faq__item,
html[data-theme="light"] .ychk-faq__item,
html[data-theme="light"] [class*="-faq__item"],
html[data-theme="light"] .gm-faq-list li {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .yh-faq__item.is-open,
html[data-theme="light"] [class*="-faq__item"].is-open {
    border-color: rgba(34, 197, 94, 0.45);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.06) 0%, #fff 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .yh-faq__a,
html[data-theme="light"] [class*="-faq__a"] {
    background: #f8fafc;
    color: #64748b;
}

html[data-theme="light"] .yh-faq__q,
html[data-theme="light"] [class*="-faq__q"] {
    color: #0f172a !important;
}

html[data-theme="light"] .yh-faq__q::before,
html[data-theme="light"] [class*="-faq__q"]::before {
    background: rgba(91, 110, 245, 0.1);
    border-color: rgba(91, 110, 245, 0.22);
    color: #4338ca;
}

/* ── Hareket azaltma ── */
@media (prefers-reduced-motion: reduce) {
    .yh-faq__item,
    [class*="-faq__item"],
    .yh-faq__q i,
    [class*="-faq__q"] i,
    .yh-faq__a,
    [class*="-faq__a"] {
        animation: none !important;
        transition: none !important;
    }

    .yh-faq__item.is-open,
    [class*="-faq__item"].is-open {
        transform: none;
    }
}

/* ── Mobil ── */
@media (max-width: 640px) {
    :root {
        --yon-faq-num-size: 32px;
    }

    .yh-faq.yh-section,
    .yc-faq,
    .ychk-faq {
        padding: 20px 0 36px;
    }

    .yh-section-shell--faq,
    .yh-faq .yh-section-shell,
    .yc-faq .yc-shell {
        padding: 14px 12px;
    }

    .ychk-faq {
        padding: 14px 12px 4px;
    }

    .yh-faq__q,
    .yc-faq__q,
    .ychk-faq__q,
    .yh-faq .yh-btn--accordion {
        min-height: 52px;
        padding: 14px 14px !important;
        font-size: 13.5px !important;
        gap: 10px;
    }

    .yh-faq__a,
    [class*="-faq__a"] {
        padding: 4px 14px 16px calc(14px + var(--yon-faq-num-size) + 10px);
        font-size: 13px;
    }

    .yh-faq__a::before,
    [class*="-faq__a"]::before {
        left: calc(14px + var(--yon-faq-num-size) + 10px);
    }
}