/* --- VALUE PROP & SOSYAL KANIT SECTION ---------------------------------- */
/* Root section refined to match hero glass + layered glow aesthetic */
.value-prop-section {
    position: relative;
    padding: 4rem 0 3.75rem;
    background:
        linear-gradient(140deg, var(--primary-dark) 0%, var(--primary) 55%, #0a121d 100%);
    /* subtle top separation echoing hero start */
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    isolation: isolate;
}

/* layered ambient glows harmonized with hero */
.value-prop-section::before,
.value-prop-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.value-prop-section::before {
    background:
        radial-gradient(ellipse at 12% 35%, var(--z-accent-glow) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 70%, var(--z-accent-glow) 0%, transparent 60%);
    mix-blend-mode: plus-lighter;
    opacity: .55;
    filter: blur(2px);
}

.value-prop-section::after {
    background:
        radial-gradient(circle at 50% 100%, var(--z-accent-glow) 0%, transparent 65%),
        radial-gradient(circle at 0% 0%, var(--z-accent-glow) 0%, transparent 55%);
    opacity: .5;
    mix-blend-mode: screen;
}

/* header spacing + subtle divider */
.vp-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2.5rem;
    position: relative;
    padding-bottom: 1.25rem;
}

.vp-header::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 110px;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--accent) 0%, var(--z-accent-glow) 60%, transparent 100%);
    border-radius: 2px;
    opacity: .9;
}

.vp-title {
    margin: 0 0 .85rem;
    font-size: clamp(2.05rem,4.1vw,2.75rem);
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 10%, var(--z-text-sec) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

/* accent span retains color gradient while title base uses light gradient */
.vp-accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.vp-accent::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    mix-blend-mode: overlay;
    opacity: 0;
    animation: vpAccentShine 4s ease-in-out infinite;
}

@keyframes vpAccentShine {
    0%, 55%, 100% { opacity: 0; }
    65% { opacity: 1; }
}

.vp-sub {
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Quick CTAs */
/* grid spacing tuned to hero proportions */
.vp-quick-cta {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 1.4rem;
    margin-bottom: 2.8rem;
}

.vp-cta-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1.5rem 1.4rem 1.55rem;
    background: linear-gradient(155deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.015) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    text-decoration: none;
    color: var(--text-primary);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: .5s cubic-bezier(.22,.61,.36,1);
    overflow: hidden;
}

/* interactive glow layer */
.vp-cta-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, var(--z-accent-glow), transparent 55%),
        radial-gradient(circle at 80% 85%, var(--z-accent-glow), transparent 60%);
    opacity: 0;
    transition: .6s ease;
    mix-blend-mode: color-dodge;
}

.vp-cta-card:hover {
    transform: translateY(-7px);
    box-shadow:
        0 12px 30px -8px rgba(0,0,0,0.55),
        0 4px 18px -4px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.08);
    border-color: var(--z-accent);
}

.vp-cta-card:hover::after { opacity: 1; }

/* icon pill aligns with hero badge visual weight */
.vp-cta-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--accent),var(--accent-dark));
    border-radius: 16px;
    color: var(--z-bg-deep);
    font-size: 1.2rem;
    box-shadow: 0 4px 22px -4px var(--z-accent-glow);
    position: relative;
    overflow: hidden;
}

.vp-cta-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 70%);
    opacity: .6;
    mix-blend-mode: overlay;
}

.vp-cta-title { margin:.25rem 0 .1rem; font-size:1.08rem; font-weight:600; letter-spacing:.2px; }
.vp-cta-desc { margin:0; font-size:.82rem; line-height:1.4; color:var(--text-secondary); }
.vp-cta-action {
    margin-top: auto;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .55px;
    text-transform: uppercase;
    color: var(--accent-light);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: .35s ease;
}

.vp-cta-card:hover .vp-cta-action { transform: translateX(5px); }

/* Sosyal Kanıt Barı */
/* social proof bar uses glass surface matching hero search wrapper tone */
.vp-social-proof {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap: 1.15rem;
    padding: 1.15rem 1.35rem;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 22px;
    margin: 0 0 2.85rem;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    position: relative;
    overflow: hidden;
}

.vp-social-proof::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, var(--z-accent-glow), transparent 70%);
    opacity: .35;
    pointer-events: none;
}

.vp-proof-item {
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:.25rem;
}

.vp-proof-value {
    font-size: 1.32rem;
    font-weight: 700;
    background: linear-gradient(135deg,var(--accent),var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: .3px;
}

.vp-proof-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .55px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Segment Kartları */
/* segment grid refined */
.vp-segments {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
    gap: 1.35rem;
}

.vp-seg-card {
    position: relative;
    padding: 1.35rem 1.2rem 1.4rem;
    background: linear-gradient(150deg, var(--z-overlay), var(--z-overlay-heavy));
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    overflow: hidden;
    transition: .5s cubic-bezier(.22,.61,.36,1);
    backdrop-filter: blur(18px) saturate(140%);
}

.vp-seg-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, var(--z-accent-glow), transparent 60%),
        radial-gradient(circle at 85% 80%, var(--z-accent-glow), transparent 65%);
    opacity: 0;
    transition: .65s ease;
    mix-blend-mode: color-dodge;
}

.vp-seg-card:hover {
    transform: translateY(-8px);
    border-color: var(--z-accent);
    box-shadow:
        0 14px 34px -8px rgba(0,0,0,.55),
        0 6px 18px -6px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,0.07);
}

.vp-seg-card:hover::before { opacity: 1; }

/* segment icon weight matches new cta icon */
.vp-seg-icon {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg,var(--accent),var(--accent-dark));
    color: var(--z-bg-deep);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 4px 18px -4px var(--z-accent-glow);
    position: relative;
}

.vp-seg-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.35), transparent 70%);
    opacity: .55;
    mix-blend-mode: overlay;
}

.vp-seg-title { margin:.45rem 0 0; font-size:1.02rem; font-weight:600; letter-spacing:.15px; }
.vp-seg-desc { margin:0; font-size:.76rem; line-height:1.42; color:var(--text-secondary); }

.vp-seg-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--accent-light);
    transition: .35s ease;
}

.vp-seg-link:hover { transform: translateX(5px); }

/* Responsive */
@media (max-width: 992px){
    .vp-quick-cta { gap:1.1rem; }
    .vp-social-proof { grid-template-columns:repeat(4,1fr); }
}

@media (max-width: 768px){
    .value-prop-section { padding:3.2rem 0 2.6rem; }
    .vp-social-proof { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 560px){
    .vp-social-proof { grid-template-columns:repeat(2,1fr); }
    .vp-quick-cta { grid-template-columns:1fr; }
    .vp-segments { grid-template-columns:1fr; }
    .vp-header { margin-bottom: 2.1rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .vp-cta-card,
    .vp-seg-card { transition:none; transform:none !important; }
}