/* ===========================================================
   ServisKlima — Premium visual layer (overlay on main.css)
   Loaded AFTER main.css so it overrides safely.
   =========================================================== */

/* ============ 1. DRAMATIC TYPOGRAPHY ============ */
.section-eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.4rem 1rem;
    background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(16,185,129,.08));
    border:1px solid rgba(14,165,233,.2);
    border-radius:999px;
    font-size:.78rem;font-weight:800;letter-spacing:.08em;
    color:var(--c-primary-dark);
    text-transform:uppercase;
    box-shadow:0 4px 14px -6px rgba(14,165,233,.15)
}
.section-eyebrow::before{content:"✦";color:var(--c-accent);font-size:.7em}
.section-title{
    font-size:clamp(1.85rem,2.5vw + 1rem,3.25rem) !important;
    font-weight:900 !important;
    letter-spacing:-.035em !important;
    line-height:1.05 !important;
    margin:.85rem 0 1rem !important
}
.section-title strong,.section-title em{
    background:linear-gradient(120deg,#0EA5E9 0%,#0369A1 50%,#10B981 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    font-style:normal
}
.section-lead{
    font-size:clamp(1rem,.5vw + .9rem,1.18rem) !important;
    line-height:1.7 !important;
    max-width:660px;
    color:#475569
}
.section-head{margin-bottom:3rem !important;text-align:center}
.section-head > *{display:block;margin-left:auto;margin-right:auto}

/* ============ 2. ALTERNATING SECTION BACKGROUNDS ============ */
.section{position:relative;overflow:hidden}
.section-soft{
    background:
        radial-gradient(circle at 20% 0%,rgba(14,165,233,.06),transparent 50%),
        radial-gradient(circle at 80% 100%,rgba(16,185,129,.05),transparent 50%),
        #f8fafc;
    position:relative;
    padding:clamp(3rem,6vw,5.5rem) 0;
    overflow:hidden
}
/* İç section element'lerini transparent yap, kendi padding'leri çakışmasın */
.section-soft > .section,
.section-soft > section,
.section-soft .section{background:transparent !important;padding-top:0;padding-bottom:0}
.section-soft::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(14,165,233,.08) 1px,transparent 1px);
    background-size:32px 32px;
    mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
    pointer-events:none;opacity:.7
}
.section-soft > *{position:relative;z-index:1}

/* Dark mesh section (Process Steps / Stats için ideal) */
.section-dark{
    position:relative;
    background:
        radial-gradient(circle at 0% 0%,rgba(14,165,233,.25),transparent 50%),
        radial-gradient(circle at 100% 100%,rgba(16,185,129,.2),transparent 50%),
        linear-gradient(135deg,#0f172a 0%,#0c4a6e 100%);
    color:#fff;
    padding:clamp(3rem,6vw,5.5rem) 0;
    overflow:hidden
}
/* Çocuk section element'leri transparent yap — kendi bg'lerini ezme */
.section-dark > .section,
.section-dark > section,
.section-dark > .section > .container,
.section-dark .section{background:transparent !important;padding-top:0;padding-bottom:0}
.section-dark .section-title,.section-dark h2,.section-dark h3,.section-dark h4{color:#fff !important}
.section-dark .section-title strong,.section-dark .section-title em{
    background:linear-gradient(120deg,#22d3ee 0%,#7dd3fc 50%,#86efac 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent
}
.section-dark .section-lead,.section-dark p{color:rgba(255,255,255,.88) !important}
.section-dark .section-eyebrow{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.18) !important;color:#7dd3fc !important}
/* Süreç adımları kartları — koyu içinde okunur */
.section-dark .process-step,.section-dark .step,.section-dark .step-item{color:#fff}
.section-dark .process-step p,.section-dark .step p,.section-dark .step-item p{color:rgba(255,255,255,.85) !important}

/* Noise texture overlay (subtle film grain) */
.section-noise::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity:.04;mix-blend-mode:overlay
}

/* ============ 3. SECTION WAVE DIVIDERS ============ */
.section-divider{position:relative;width:100%;height:80px;overflow:hidden;margin-top:-1px;pointer-events:none}
.section-divider svg{display:block;width:100%;height:100%}
.section-divider-down{transform:rotate(180deg)}

/* ============ 4. PREMIUM CARDS ============ */
.card,.service-card,.area-card,.brand-card,.testimonial-card,.post-card,.helpful-item{
    position:relative;
    background:#fff;
    border:1px solid rgba(226,232,240,.7);
    border-radius:16px;
    padding:1.75rem;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .35s;
    overflow:hidden;
    isolation:isolate
}
.card::before,.service-card::before,.area-card::before,.brand-card::before,.testimonial-card::before,.post-card::before,.helpful-item::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(14,165,233,.06) 0%,transparent 60%);
    opacity:0;transition:opacity .4s;
    z-index:-1
}
.card::after,.service-card::after,.area-card::after,.brand-card::after,.testimonial-card::after,.post-card::after,.helpful-item::after{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--c-primary),var(--c-accent),var(--c-primary));
    background-size:200% 100%;
    transform:scaleX(0);transform-origin:left;
    transition:transform .5s cubic-bezier(.34,1.56,.64,1);
    border-radius:16px 16px 0 0
}
.card:hover,.service-card:hover,.area-card:hover,.brand-card:hover,.testimonial-card:hover,.post-card:hover,.helpful-item:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 48px -18px rgba(14,165,233,.25),0 12px 24px -12px rgba(15,23,42,.1);
    border-color:rgba(14,165,233,.3)
}
.card:hover::before,.service-card:hover::before,.area-card:hover::before,.brand-card:hover::before,.testimonial-card:hover::before,.post-card:hover::before,.helpful-item:hover::before{opacity:1}
.card:hover::after,.service-card:hover::after,.area-card:hover::after,.brand-card:hover::after,.testimonial-card:hover::after,.post-card:hover::after,.helpful-item:hover::after{
    transform:scaleX(1);
    animation:sk-gradient-shift 2s linear infinite
}
@keyframes sk-gradient-shift{0%{background-position:0% 0}100%{background-position:200% 0}}

/* Card image hover effect */
.card a > img,.service-card a > img,.area-card a > img,.post-card .post-thumb img,.archive-item-thumb img{transition:transform .6s cubic-bezier(.4,0,.2,1)}
.card:hover a > img,.service-card:hover a > img,.area-card:hover a > img,.post-card:hover .post-thumb img,.archive-item:hover .archive-item-thumb img{transform:scale(1.08)}

/* ============ 5. SCROLL REVEAL ============
   Önemli: reveal CSS SADECE html.reveals-on class'ı varken aktif olur.
   JS yüklenmezse veya hata varsa her şey görünür kalır.
*/
html.reveals-on .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
html.reveals-on .reveal.is-visible{opacity:1;transform:translateY(0)}
html.reveals-on .reveal-delay-1{transition-delay:.08s}
html.reveals-on .reveal-delay-2{transition-delay:.16s}
html.reveals-on .reveal-delay-3{transition-delay:.24s}
html.reveals-on .reveal-delay-4{transition-delay:.32s}
html.reveals-on .reveal-left{transform:translateX(-28px)}
html.reveals-on .reveal-left.is-visible{transform:translateX(0)}
html.reveals-on .reveal-right{transform:translateX(28px)}
html.reveals-on .reveal-right.is-visible{transform:translateX(0)}
html.reveals-on .reveal-scale{transform:scale(.92)}
html.reveals-on .reveal-scale.is-visible{transform:scale(1)}

/* Stagger grid children — sadece reveals-on class'ı varken */
html.reveals-on .grid.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
html.reveals-on .grid.reveal-stagger.is-visible > *{opacity:1;transform:translateY(0)}
html.reveals-on .grid.reveal-stagger.is-visible > *:nth-child(1){transition-delay:0ms}
html.reveals-on .grid.reveal-stagger.is-visible > *:nth-child(2){transition-delay:80ms}
html.reveals-on .grid.reveal-stagger.is-visible > *:nth-child(3){transition-delay:160ms}
html.reveals-on .grid.reveal-stagger.is-visible > *:nth-child(4){transition-delay:240ms}
html.reveals-on .grid.reveal-stagger.is-visible > *:nth-child(5){transition-delay:320ms}
html.reveals-on .grid.reveal-stagger.is-visible > *:nth-child(6){transition-delay:400ms}
html.reveals-on .grid.reveal-stagger.is-visible > *:nth-child(7){transition-delay:480ms}
html.reveals-on .grid.reveal-stagger.is-visible > *:nth-child(8){transition-delay:560ms}

/* ============ 6. STATS COUNTER (ANIMATED) ============ */
.hero-stat-num,.stat-num,.stats-num,.sk-stat-value{
    display:inline-block;
    transition:transform .3s
}

/* ============ 7. PREMIUM BUTTON UPGRADE ============ */
.btn-primary{
    background:linear-gradient(135deg,#0EA5E9 0%,#0369A1 50%,#0EA5E9 100%);
    background-size:200% 100%;
    background-position:0% 0;
    transition:background-position .6s,transform .25s,box-shadow .25s;
    box-shadow:0 10px 28px -10px rgba(14,165,233,.55),inset 0 1px 0 rgba(255,255,255,.25)
}
.btn-primary:hover{
    background-position:100% 0;
    box-shadow:0 18px 40px -10px rgba(14,165,233,.7),inset 0 1px 0 rgba(255,255,255,.3);
    transform:translateY(-2px)
}
.btn-accent{
    background:linear-gradient(135deg,#10B981 0%,#16A34A 50%,#10B981 100%);
    background-size:200% 100%;
    background-position:0% 0;
    transition:background-position .6s,transform .25s,box-shadow .25s
}
.btn-accent:hover{background-position:100% 0;transform:translateY(-2px)}

/* ============ 8. HERO POLISH ============ */
.hero-home{
    background:
        radial-gradient(circle at 15% 20%,rgba(14,165,233,.08),transparent 50%),
        radial-gradient(circle at 85% 80%,rgba(16,185,129,.06),transparent 50%),
        #fff !important;
    padding-bottom:clamp(4rem,7vw,6rem) !important
}
.hero-title{
    font-size:clamp(2.75rem,5vw + 1rem,6rem) !important;
    line-height:.98 !important;
    letter-spacing:-.04em !important
}
.hero-eyebrow{
    box-shadow:0 6px 18px -4px rgba(14,165,233,.18);
    backdrop-filter:blur(4px)
}
.hero-stat-item{
    background:linear-gradient(135deg,#fff 0%,#f8fafc 100%) !important;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.08);
    transition:transform .3s,box-shadow .3s,border-color .3s !important
}
.hero-stat-item:hover{
    transform:translateY(-4px) !important;
    box-shadow:0 16px 32px -14px rgba(14,165,233,.3) !important
}
.hero-stat-num{
    background:linear-gradient(135deg,#0EA5E9,#0369A1);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent
}

/* ============ 9. SECTION SPACING RHYTHM ============ */
.section-tldr + .section,.section-tldr + section{padding-top:clamp(2rem,4vw,3.5rem)}

/* ============ 10. DECORATIVE FLOATING SHAPES ============ */
.section-deco-shapes::before{
    content:"";position:absolute;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(14,165,233,.08),transparent 70%);
    top:-100px;right:-80px;filter:blur(40px);pointer-events:none
}
.section-deco-shapes::after{
    content:"";position:absolute;width:240px;height:240px;border-radius:50%;
    background:radial-gradient(circle,rgba(16,185,129,.06),transparent 70%);
    bottom:-80px;left:-60px;filter:blur(40px);pointer-events:none
}

/* ============ 11. DARK MODE OVERRIDES ============ */
[data-theme="dark"] .section-soft{
    background:
        radial-gradient(circle at 20% 0%,rgba(56,189,248,.08),transparent 50%),
        radial-gradient(circle at 80% 100%,rgba(34,197,94,.05),transparent 50%),
        #0f172a
}
[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .area-card,
[data-theme="dark"] .brand-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .post-card,
[data-theme="dark"] .helpful-item{background:#1e293b;border-color:#334155}
[data-theme="dark"] .section-lead{color:#cbd5e1}
[data-theme="dark"] .hero-home{
    background:
        radial-gradient(circle at 15% 20%,rgba(56,189,248,.15),transparent 50%),
        radial-gradient(circle at 85% 80%,rgba(34,197,94,.1),transparent 50%),
        #0f172a !important
}

/* ============ 12. CONTAINER WIDTHS ============ */
.container{max-width:1180px;padding:0 1.25rem}
.container-narrow{max-width:820px}
.container-wide{max-width:1340px}

/* ============ 13. REDUCE MOTION FALLBACK ============ */
html.reduce-motion .reveal,
html.reduce-motion .reveal-stagger > *{opacity:1 !important;transform:none !important;transition:none !important}