/* AnalizPro — iddaa marka hafızası: canlı yeşil + koyu füme, cam katmanlar */
@charset "UTF-8";

:root {
    /* Zemin — derin antrasit / füme */
    --bg-deep: #0c0e12;
    --bg-panel: rgba(18, 22, 28, 0.82);
    --bg-card: rgba(22, 28, 36, 0.72);
    --bg-hover: rgba(32, 40, 52, 0.88);
    --border: rgba(255, 255, 255, 0.08);
    --border-accent: rgba(0, 184, 92, 0.35);

    /* Marka yeşili — iddaa canlı ton */
    --accent: #00b85c;
    --accent-bright: #1ee878;
    --accent-dim: #00924a;
    --accent-deep: #006b38;
    --accent-emerald: #00d68f;
    --accent-glow: rgba(0, 184, 92, 0.45);
    --accent-glow-soft: rgba(30, 232, 120, 0.18);

    --gold: #f0c14a;
    --gold-deep: #d4a017;
    --lion: #ffb347;
    --cta-contrast: #ff9f2e;
    --cta-contrast-deep: #e07a12;

    --text: #e8ecf4;
    --text-muted: #9aa8bc;
    --text-strong: #f8fafc;

    --glass-blur: 14px;
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --radius-lg: 14px;
    --radius-md: 10px;
    --space-section: 1.35rem;
    --font-display: "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
    --transition-glow: box-shadow 0.28s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.22s ease, background 0.22s ease;
}

/* ——— Tipografi (semantik etiketler — yalnızca görsel) ——— */
h1 {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 4vw, 2.15rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--text-strong);
    margin: 0 0 0.85em;
}

h2 {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.5vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--text-strong);
    margin: 0 0 0.75em;
}

h3 {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    margin: 0 0 0.55em;
}

p,
ul,
ol {
    margin-bottom: 0.85em;
}

p:last-child,
ul:last-child {
    margin-bottom: 0;
}

body {
    background: var(--bg-deep);
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(0, 184, 92, 0.12), transparent 55%),
        radial-gradient(ellipse 60% 40% at 100% 50%, rgba(0, 107, 56, 0.08), transparent 50%),
        linear-gradient(180deg, #0e1014 0%, #0a0c10 100%);
    color: var(--text);
    line-height: 1.55;
    letter-spacing: 0.01em;
}

/* ——— Cam kart katmanı (ortak) ——— */
.glass-surface,
.sidebar,
.sidebar-bulletin,
.panel-wizard,
.panel-right,
.site-topbar,
.wizard-unified,
.pricing-card,
.pricing-pay-info__card,
.analysis-section,
.analysis-details,
.sync-progress-panel,
.sport-card,
.landing-seo-intro,
.match-analysis-wrap > .analysis-block,
.guarantee-coupon-panel,
.auth-card,
.admin-card {
    background: var(--bg-card);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.site-topbar {
    background: rgba(12, 14, 18, 0.92);
    border-bottom-color: var(--border);
}

.sidebar,
.panel-wizard {
    background: var(--bg-panel);
}

.panel-right,
.match-analysis-wrap {
    background: transparent;
}

/* ——— Üst menü ——— */
.site-topbar__brand {
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-topbar__link--active,
.site-topbar__link:hover {
    color: var(--accent-bright);
}

.site-topbar__btn--primary {
    background: linear-gradient(145deg, var(--accent-bright) 0%, var(--accent) 45%, var(--accent-deep) 100%);
    color: #041a0f !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 4px 20px var(--accent-glow-soft);
    transition: var(--transition-glow);
}

.site-topbar__btn--primary:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 24px var(--accent-glow),
        0 6px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

/* ——— Yeşil gradyan butonlar (sihirbaz, odak) ——— */
.wizard-control--primary,
.wizard-control--guarantee,
.odd-btn:hover,
.odd-btn--in-coupon {
    background: linear-gradient(155deg, var(--accent-bright) 0%, var(--accent) 42%, var(--accent-deep) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #031a0e !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 4px 16px var(--accent-glow-soft);
    transition: var(--transition-glow);
}

.wizard-control--primary:hover,
.wizard-control--guarantee:hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 22px var(--accent-glow),
        0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.wizard-control--value {
    background: linear-gradient(155deg, rgba(240, 193, 74, 0.35), rgba(255, 159, 46, 0.2)) !important;
    border-color: rgba(255, 179, 71, 0.45) !important;
    color: var(--gold) !important;
}

/* ——— Satın Al — yeşil arka planda kontrast vurgu ——— */
.pricing-cta--buy {
    background: linear-gradient(
        155deg,
        #ffd966 0%,
        var(--cta-contrast) 38%,
        var(--cta-contrast-deep) 100%
    ) !important;
    color: #1a0f02 !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0 0 1px rgba(255, 159, 46, 0.25),
        0 14px 36px -8px rgba(255, 159, 46, 0.55),
        0 6px 18px rgba(0, 0, 0, 0.4) !important;
    transition: var(--transition-glow);
}

.pricing-cta--buy::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 50%);
}

.pricing-cta--buy:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 28px rgba(255, 159, 46, 0.65),
        0 18px 40px -6px rgba(255, 159, 46, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.45) !important;
}

.pricing-cta--buy.pricing-cta--gold {
    background: linear-gradient(
        155deg,
        #fff4c4 0%,
        var(--gold) 40%,
        var(--gold-deep) 100%
    ) !important;
    color: #1f1404 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 32px rgba(240, 193, 74, 0.45),
        0 14px 36px -8px rgba(212, 160, 23, 0.5) !important;
}

.pricing-cta--buy.pricing-cta--gold:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 0 36px rgba(240, 193, 74, 0.6),
        0 18px 40px -6px rgba(212, 160, 23, 0.55) !important;
}

/* ——— Fiyat vitrini & landing grid ——— */
.page-pricing,
.pricing-page {
    padding: 1.75rem 1.25rem 3rem;
}

.pricing-vitrin__grid {
    gap: 1.15rem;
}

.pricing-card {
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.1rem;
    gap: 0.65rem;
    transition: var(--transition-glow);
}

.pricing-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--glass-shadow), 0 0 24px var(--accent-glow-soft);
}

.pricing-card--premium {
    border-color: rgba(240, 193, 74, 0.4);
    box-shadow: var(--glass-shadow), 0 0 20px rgba(240, 193, 74, 0.12);
}

.pricing-card--current {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pricing-card__price {
    color: var(--accent-bright);
}

.pricing-vitrin__title,
.landing-seo-intro__title {
    color: var(--accent-bright);
}

.pricing-vitrin__sub,
.landing-seo-intro p {
    line-height: 1.65;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* ——— Landing ——— */
.landing,
.page-landing .landing {
    background: transparent;
}

.landing__glow {
    background:
        radial-gradient(circle at 25% 15%, rgba(0, 184, 92, 0.14), transparent 42%),
        radial-gradient(circle at 75% 60%, rgba(0, 107, 56, 0.1), transparent 45%);
}

.landing-hero__brand {
    background: linear-gradient(135deg, #fff, var(--accent-bright), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
}

.landing-hero__cta--primary {
    background: linear-gradient(145deg, var(--accent-bright), var(--accent), var(--accent-deep));
    color: #031a0e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 24px var(--accent-glow-soft);
    transition: var(--transition-glow);
}

.landing-hero__cta--primary:hover {
    box-shadow: 0 0 28px var(--accent-glow), 0 8px 28px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.landing-hero__cta--ghost {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    border-color: var(--glass-border);
}

.landing-seo-intro {
    padding: 1.25rem 1.15rem;
    border-radius: var(--radius-lg);
    margin-top: 1.5rem;
}

.sport-card:hover {
    border-color: var(--accent);
    box-shadow: var(--glass-shadow), 0 0 20px var(--accent-glow-soft);
}

/* ——— Analiz paneli ——— */
.analysis-section,
.analysis-details {
    border-radius: var(--radius-md);
    margin-bottom: var(--space-section);
    overflow: hidden;
}

.analysis-section__title {
    color: var(--accent-bright);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    padding: 0.7rem 0.9rem;
    background: linear-gradient(90deg, rgba(0, 184, 92, 0.12), transparent);
    border-bottom: 1px solid var(--border);
}

.match-analysis-wrap {
    padding: 0.5rem 0.65rem 1rem;
}

.match-analysis-wrap h2,
.simple-main-rec h2 {
    color: var(--text-strong);
    margin-bottom: 0.65em;
}

.top-scores strong {
    color: var(--accent-bright);
}

.poisson-table th {
    color: var(--accent-bright);
}

.sync-progress-bar {
    background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
}

.coupon-result-summary,
.simple-confidence__pct {
    color: var(--accent-bright);
}

/* ——— Bülten & layout ferahlık ——— */
.app-layout--triple {
    gap: 0;
}

.fixture-list {
    padding: 0.5rem 0.35rem;
}

.fixture-row {
    border-radius: 8px;
    margin-bottom: 2px;
    transition: background 0.15s ease;
}

.fixture-row:hover,
.fixture-row.is-active {
    background: var(--bg-hover);
}

.brand {
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
}

@media (max-width: 900px) {
    .pricing-vitrin__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pricing-page {
        padding: 1.25rem 0.85rem 2rem;
    }

    .landing-hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .landing-hero__cta {
        text-align: center;
        width: 100%;
        max-width: 300px;
        box-sizing: border-box;
    }
}

.site-flash-list {
    max-width: 960px;
    margin: 0 auto 1rem;
    padding: 0 1rem;
}

.site-flash {
    margin: 0 0 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md, 10px);
    font-size: 0.9rem;
    line-height: 1.45;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    background: rgba(22, 28, 36, 0.85);
}

.site-flash--warning {
    border-color: rgba(240, 193, 74, 0.45);
    color: var(--gold, #f0c14a);
    background: rgba(240, 193, 74, 0.08);
}

.site-flash--info {
    border-color: rgba(0, 184, 92, 0.35);
    color: var(--accent-bright, #1ee878);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}
