:root{
    --bg:#0b0b0c;
    --fg:#ffffff;
    --fg-dim:#e8e8e8; /* daha beyaz metin için */
    --muted:#a8adb4;
    --card:#131316;
    --border:#34343a; /* daha belirgin sınırlar */
    --primary:#ff2e4c; /* canlı modern kırmızı */
    --primary-700:#cc1f3a;
}

html,body{
    height:100%;
    width:100%;
    overflow-x:hidden;
}
body{
    font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji",sans-serif;
    background:var(--bg);
    color:var(--fg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Tipografi ölçeği ve ritim */
h1{font-weight:700;line-height:1.15;letter-spacing:-0.01em;font-size:clamp(3rem, 4vw + 2rem, 5rem)}
h2{font-weight:600;line-height:1.2;letter-spacing:-0.01em;font-size:clamp(1.9rem, 2vw + 1rem, 2.5rem)}
h3{font-weight:600;line-height:1.25;font-size:clamp(1.5rem, 1.2vw + 1rem, 1.9rem)}
h4{font-weight:600;line-height:1.3;font-size:1.25rem}
p{line-height:1.7}
.lead{font-size:1.4rem;color:#f3f3f3}

/* Arkaplan: beyaz kareli grid */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
            linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:48px 48px, 48px 48px;
    background-position:center center;
    pointer-events:none;
    z-index:0;
}

.text-secondary-contrast{color:var(--fg-dim)!important}
.link-secondary-contrast{color:var(--fg-dim);text-decoration:none}
.link-secondary-contrast:hover{color:#e6e6e6}

.navbar{backdrop-filter:saturate(160%) blur(6px)}
.navbar-brand .logo-icon{width:36px;height:36px;border:1px solid var(--border);border-radius:10px;color:#fff}
.navbar.navbar-dark .nav-link{color:#fff}
.navbar.navbar-dark .nav-link.active, .navbar.navbar-dark .nav-link:hover{color:#fff}

.topbar{position:sticky!important;top:0;z-index:50;background:rgba(11,11,12,0.3);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:0;transition:all .3s ease;padding:0.75rem 0}
.topbar .logo-icon{width:44px;height:44px}
.topbar strong{font-size:1.1rem}
.topbar small{font-size:0.8rem}
.topbar .nav-link{font-size:1rem;font-weight:500}
.topbar .btn{font-size:1rem;padding:0.6rem 1.5rem}
.topbar.scrolled{background:#0b0b0c;backdrop-filter:saturate(150%) blur(12px)}

.hover-lift{transition:transform .2s ease, box-shadow .2s ease}
.hover-lift:hover{transform:translateY(-2px)}

.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:0;margin-top:1rem}
.hero .container{max-width:1200px}
.hero .shape{position:absolute;inset:auto;z-index:1;filter:blur(40px);opacity:.18}
.border-secondary-subtle{position:relative;z-index:2}
.shape-1{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #ff5470, transparent 60%);top:10%;left:5%}
.shape-2{width:260px;height:260px;border-radius:50%;background:radial-gradient(circle at 70% 40%, #9b5cff, transparent 60%);bottom:10%;right:10%}
.shape-3{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 50% 50%, #00d4ff, transparent 60%);top:60%;left:40%}
.bg-dark-soft{background:rgba(255,255,255,0.04)!important}
.badge{font-size:1rem;padding:0.6rem 1.2rem}

/* HERO özel stiller (referans görsele yakın) */
.heading-hero{letter-spacing:-0.02em}
.hero-desc{color:#cfd3da;max-width:640px;font-size:1.3rem}
.stats .stat-pill{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:16px;padding:20px 24px}
.stats .stat-val{font-weight:700;font-size:1.8rem}
.stats .stat-label{color:#c1c6ce;font-size:1.1rem}

.glass-panel{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));border:1px solid var(--border);border-radius:18px;padding:18px 18px 8px 18px;box-shadow:0 20px 60px rgba(0,0,0,0.45)}
.panel-header .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.panel-header .dot.red{background:#ff5f57}
.panel-header .dot.yellow{background:#febc2e}
.panel-header .dot.green{background:#28c840}
.panel-row{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,0.25);border:1px solid var(--border);border-radius:12px;padding:18px 16px;margin-bottom:16px}
.dark-card, .card, .accordion-item, .panel-row, .glass-panel{color:#fff}

/* Basit animasyonlar */
.float-circle{animation: drift 14s ease-in-out infinite alternate}
.float-circle.two{animation-duration:18s}
.mini-card{animation: pop 1.2s ease 0.3s both}
.stats .stat-pill{animation: fadeSlide .9s ease both}
.stats .stat-pill:nth-child(2){animation-delay:.1s}
.stats .stat-pill:nth-child(3){animation-delay:.2s}

/* Animasyonlu arkaplan elementleri */
body::after{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:
            radial-gradient(circle at 20% 20%, rgba(255,46,76,0.12) 0%, transparent 60%),
            radial-gradient(circle at 80% 80%, rgba(155,92,255,0.12) 0%, transparent 60%),
            radial-gradient(circle at 40% 60%, rgba(0,212,255,0.1) 0%, transparent 60%),
            radial-gradient(circle at 60% 20%, rgba(255,193,7,0.08) 0%, transparent 50%),
            radial-gradient(circle at 10% 70%, rgba(40,167,69,0.08) 0%, transparent 50%);
    animation: backgroundShift 25s ease-in-out infinite;
    pointer-events:none;
    z-index:-1;
}

/* Ek animasyonlu şekiller */
.hero::before{
    content:"";
    position:absolute;
    top:20%;
    right:15%;
    width:100px;
    height:100px;
    background:radial-gradient(circle, rgba(255,46,76,0.15), transparent);
    border-radius:50%;
    animation: float1 8s ease-in-out infinite;
    z-index:1;
}

.hero::after{
    content:"";
    position:absolute;
    bottom:30%;
    left:10%;
    width:80px;
    height:80px;
    background:radial-gradient(circle, rgba(155,92,255,0.15), transparent);
    border-radius:50%;
    animation: float2 10s ease-in-out infinite;
    z-index:1;
}

@keyframes drift{from{transform:translateY(-6px)} to{transform:translateY(6px)}}
@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeSlide{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes backgroundShift{0%,100%{opacity:0.3;transform:scale(1)}50%{opacity:0.6;transform:scale(1.1)}}
@keyframes float1{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-20px) rotate(180deg)}}
@keyframes float2{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(15px) rotate(-180deg)}}

/* Mobil merkezleme */
@media (max-width: 767.98px){
    .container, .row, .col-12, .col, .col-md-*, .col-lg-*{margin-left:auto;margin-right:auto}
    header.hero .col-lg-7, header.hero .col-lg-5{text-align:center}
    .hero .row{align-items:center;justify-content:center}
    .hero .col-lg-7, .hero .col-lg-5{display:flex;flex-direction:column;align-items:center;text-align:center}
    .stats{justify-content:center;flex-wrap:wrap;gap:1rem}
    .glass-panel{margin-top:18px;margin-left:auto;margin-right:auto}
    .mini-card{display:none}
    footer .container{flex-direction:column!important;align-items:center!important;text-align:center}
}
.panel-row .icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06)}
.panel-row .row-title{font-weight:700;font-size:1.3rem}
.panel-row .row-sub{color:#c1c6ce;font-size:1rem}

.float-circle{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 40%, rgba(255,255,255,0.08), rgba(255,255,255,0.02));filter:blur(0.3px);opacity:.9}
.float-circle.one{width:120px;height:120px;right:8%;top:38%}
.float-circle.two{width:180px;height:180px;right:2%;bottom:6%}
.mini-card{position:absolute;right:6%;bottom:-10px;background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:14px;padding:12px 16px;color:#e8e8e8;backdrop-filter:blur(6px)}

/* Footer metni mobilde taşmasın */
footer small{white-space:normal;word-break:break-word}

.btn.btn-dark{background:rgba(0,0,0,0.5);color:#fff}

/* Offcanvas modern siyah cam tasarım */
.offcanvas-glass{background:linear-gradient(180deg, rgba(20,20,22,0.92), rgba(15,15,18,0.88))!important;border-left:1px solid rgba(255,255,255,0.06);backdrop-filter:saturate(140%) blur(14px)}
.offcanvas-glass .offcanvas-header{border-bottom:1px solid rgba(255,255,255,0.06)}
.mobile-menu{padding-top:.5rem}
.mobile-menu .menu-item{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:12px;color:#fff;text-decoration:none;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
.mobile-menu .menu-item:hover{background:rgba(255,255,255,0.06)}
.mobile-menu .mi-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06)}
.mobile-menu .mi-text{font-weight:600}
.offcanvas-backdrop{background:rgba(0,0,0,0.6)}



.py-6{padding-top:4.75rem!important;padding-bottom:4.75rem!important}

.card-glass{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:16px;backdrop-filter:saturate(160%) blur(8px)}
.card-glow{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,0.45)}
.card-gradient{background:linear-gradient(135deg, rgba(255,46,76,0.16), rgba(155,92,255,0.16));border:1px solid var(--border);border-radius:18px}

.icon-circle{width:44px;height:44px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}

.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;margin-bottom:18px;padding-left:10px}
.timeline-item .dot{position:absolute;left:-2px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--primary)}

.btn-primary{--bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary-700);--bs-btn-hover-border-color:var(--primary-700)}
.btn-primary{--bs-btn-color:#fff;font-weight:600;border-width:1px;border-radius:12px}
.btn-outline-light{--bs-btn-hover-bg:rgba(255,255,255,0.12);border-radius:12px;font-weight:600}
.badge{text-transform:none;font-weight:500;letter-spacing:0}

/* Responsive helpers */
@media (max-width: 991.98px){
    .container, .row, .col, .col-*, .col-md-*, .col-lg-*{margin-left:auto;margin-right:auto}
    .navbar .btn{width:100%}
}

/* AOS tweaks for smoother feel */
[data-aos]{transition-property:transform,opacity!important}
/* AOS yüklenmezse içerikler görünür kalsın */
body:not(.aos-initialized) [data-aos]{opacity:1!important;transform:none!important}

/* Bölüm boşlukları tutarlı olsun */
.section{padding-block:4.5rem}

/* Step cards for "How it works" section */
.step-card{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:16px;padding:2rem 1.5rem;height:100%;transition:transform .2s ease}
.step-card:hover{transform:translateY(-4px)}
.step-number{width:60px;height:60px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 1.5rem}

/* Pricing Card Styles */
.pricing-card{
    background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    border:1px solid var(--border);
    border-radius:24px;
    padding:2.5rem;
    box-shadow:0 25px 60px rgba(0,0,0,0.4);
    backdrop-filter:saturate(160%) blur(12px);
    position:relative;
    overflow:hidden;
}

.pricing-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:var(--primary);
}

.pricing-header{
    text-align:center;
    margin-bottom:2.5rem;
}

.pricing-badge{
    display:inline-flex;
    align-items:center;
    background:rgba(255,46,76,0.15);
    border:1px solid rgba(255,46,76,0.3);
    border-radius:50px;
    padding:0.5rem 1rem;
    margin-bottom:1.5rem;
    font-weight:600;
    font-size:0.9rem;
    color:#fff;
}

.pricing-title{
    font-size:2.5rem;
    font-weight:700;
    margin-bottom:0.5rem;
    color:#fff;
}

.pricing-subtitle{
    color:var(--fg-dim);
    font-size:1.1rem;
    margin-bottom:1.5rem;
}

.pricing-price{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:0.5rem;
}

.price-currency{
    font-size:1.5rem;
    font-weight:600;
    color:var(--fg-dim);
}

.price-amount{
    font-size:4rem;
    font-weight:800;
    color:#fff;
    line-height:1;
}

.price-period{
    font-size:1.1rem;
    color:var(--fg-dim);
    font-weight:500;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:1.5rem;
    margin-bottom:2.5rem;
}

.feature-item{
    display:flex;
    align-items:flex-start;
    gap:1rem;
    padding:1.25rem;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:16px;
    transition:all 0.3s ease;
}

.feature-item:hover{
    background:rgba(255,255,255,0.06);
    transform:translateY(-2px);
}

.feature-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.feature-icon i{
    font-size:1.25rem;
    color:#fff;
}

.feature-content h6{
    font-size:1.1rem;
    font-weight:600;
    margin-bottom:0.5rem;
    color:#fff;
}

.feature-content p{
    color:var(--fg-dim);
    font-size:0.95rem;
    margin:0;
    line-height:1.5;
}

.pricing-cta{
    text-align:center;
}

.cta-benefits{
    display:flex;
    justify-content:center;
    gap:2rem;
    margin-bottom:1.5rem;
    flex-wrap:wrap;
}

.benefit-item{
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-weight:500;
    color:var(--fg-dim);
}

.pricing-btn{
    background:var(--primary);
    border:none;
    border-radius:16px;
    padding:1rem 2rem;
    font-size:1.1rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    transition:all 0.3s ease;
    box-shadow:0 8px 25px rgba(255,46,76,0.3);
}

.pricing-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 35px rgba(255,46,76,0.4);
}

@media (max-width: 768px){
    .pricing-card{padding:1.5rem}
    .pricing-title{font-size:2rem}
    .price-amount{font-size:3rem}
    .feature-grid{grid-template-columns:1fr;gap:1rem}
    .cta-benefits{flex-direction:column;gap:0.75rem}
}