/* ====================================
   ÖZEL BİLEŞENLER
   Projeye özel component'ler
   ==================================== */

/* ---------- BACKGROUND GLOW ---------- */
.bg-glow {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        /* Büyük mavi patlama - daha koyu */
        radial-gradient(circle at 0% 10%, rgba(0, 100, 200, 0.35) 0%, transparent 60%),

        /* Mor sise - daha koyu */
        radial-gradient(circle at 100% 20%, rgba(90, 0, 180, 0.32) 0%, transparent 65%),

        /* Turuncu sıcaklık - daha koyu */
        radial-gradient(circle at 10% 90%, rgba(220, 80, 0, 0.25) 0%, transparent 55%),

        /* Pembe vurgu - daha koyu */
        radial-gradient(circle at 90% 80%, rgba(200, 0, 100, 0.22) 0%, transparent 60%),

        /* Merkez ışıması - daha kontrastlı */
        radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.98) 0%, transparent 55%),

        /* İkinci merkez - daha kontrastlı */
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.96) 0%, transparent 60%),

        /* Derinlik katmanı - daha belirgin */
        radial-gradient(circle at 50% 50%, rgba(210, 230, 255, 0.9) 0%, transparent 80%),

        /* Base - hafif gri ton */
        #f5f7fa;

    background-blend-mode: overlay, overlay, overlay, overlay, normal, normal, normal, normal;
}

/* ---------- PRICE HIGHLIGHT ---------- */
.price-highlight {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
}

.price-highlight-sky {
    background: var(--sky-bg);
    border: 1px solid var(--sky-border);
    color: var(--sky-dark);
}

.price-highlight-indigo {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #4338ca;
}

/* ---------- HERO SECTION ---------- */
.hero {
    position: relative;
    text-align: center;
    max-width: 896px;
    margin: 0 auto;
}

.hero-title {
    font-size: 42px;
    line-height: 1.05;
    font-weight: var(--font-semibold);
    letter-spacing: -0.02em;
    color: var(--primary);
}

@media (min-width: 768px) {
    .hero-title {
        font-size: var(--text-6xl);
    }
}

.hero-desc {
    margin-top: var(--spacing-5);
    font-size: var(--text-lg);
    color: var(--muted);
}

@media (min-width: 768px) {
    .hero-desc {
        font-size: var(--text-xl);
    }
}

/* ---------- STATS BAR ---------- */
.stats-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-7);
}

/* ---------- DAĞILIM GRAFİĞİ ---------- */
.distribution {
    height: 160px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: var(--spacing-3);
}

.distribution-bar {
    flex: 1;
    background: #f1f5f9;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.distribution-bar-active {
    background: var(--sky);
}

.distribution-bar-high {
    background: var(--sky-light);
}

.distribution-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: #94a3b8;
    font-weight: var(--font-semibold);
}

/* ---------- SPONSOR NOTU ---------- */
.sponsor-note {
    margin-top: var(--spacing-5);
    padding: var(--spacing-4);
    border-radius: var(--radius-sm);
    background: white;
    border: 1px solid #e2e8f0;
}

.sponsor-note-label {
    font-size: var(--text-xs);
    color: var(--muted-light);
    font-weight: var(--font-semibold);
}

.sponsor-note-text {
    margin-top: var(--spacing-1);
    font-size: var(--text-sm);
    color: var(--muted);
    font-weight: var(--font-semibold);
}

/* ---------- SEGMENT BAR ---------- */
.segment-bar {
    width: 100%;
    background: #e2e8f0;
    height: 8px;
    border-radius: var(--radius-full);
}

.segment-bar-fill {
    height: 8px;
    border-radius: var(--radius-full);
}

.segment-bar-sky {
    background: var(--sky);
}

.segment-bar-emerald {
    background: var(--emerald);
}

.segment-bar-purple {
    background: var(--purple);
}

.segment-bar-amber {
    background: var(--amber);
}

/* ---------- STATS ROW ---------- */
.stats-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
    border-top: 1px solid #f1f5f9;
    padding-top: var(--spacing-6);
}

.stats-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.stats-sponsor {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-left: auto;
}

.stats-sponsor-label {
    font-size: var(--text-sm);
    color: #94a3b8;
    font-weight: var(--font-semibold);
}