*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Plus Jakarta Sans', sans-serif;
    background-image:
        radial-gradient(circle at 85% -20%, rgba(138,43,226,.10) 0%, transparent 50%),
        radial-gradient(circle at 15% 120%, rgba(138,43,226,.05) 0%, transparent 40%),
        linear-gradient(180deg,#ffffff 0%,#f8f9fa 100%);
    background-attachment:fixed;
}

/* HEADER */

header{
    position:fixed;
    top:0;
    width:100%;
    background:#ffffff;
    box-shadow:0 1px 15px rgba(0,0,0,.04);
    z-index:1000;
}

.navbar{
    max-width:1440px;
    margin:0 auto;
    padding:18px 48px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* LOGO */

.logo{
    font-size:1.75rem;
    font-weight:800;
    letter-spacing:3px;
    color:#15151f;
    display:flex;
    align-items:center;
    gap:7px;
}

/* NAVBAR LOGO ANİMASYONU */
.o-circle{
    position:relative;
    width:31px;
    height:31px;
    display:inline-block;
    flex-shrink:0;
    border-radius:50%;
    transform-style:preserve-3d;
    animation:logoDonusumu 15s linear infinite;
}

.o-circle::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#c084fc,#7c3aed 70%);
    box-shadow:0 8px 24px rgba(124,58,237,.35);
    opacity:1;
    animation:morDaireGorunumu 15s linear infinite;
}

.o-circle::after{
    content:"";
    position:absolute;
    inset:-2px;
    background:url("/images/favicon.png") center / 45px 45px no-repeat;
    opacity:0;
    animation:logoGorunumu 15s linear infinite;
}

@keyframes logoDonusumu{
    0%,66.66%{transform:rotateY(0deg);}
    73.33%,93.33%{transform:rotateY(180deg);}
    100%{transform:rotateY(360deg);}
}

@keyframes morDaireGorunumu{
    0%,69.9%{opacity:1;}
    70%,96.5%{opacity:0;}
    96.6%,100%{opacity:1;}
}

@keyframes logoGorunumu{
    0%,69.9%{opacity:0;transform:scaleX(-1);}
    70%,96.5%{opacity:1;transform:scaleX(-1);}
    96.6%,100%{opacity:0;transform:scaleX(-1);}
}

/* NAVIGATION */

.nav-links{
    display:flex;
    list-style:none;
    gap:36px;
}

.nav-links li a{
    position:relative;
    text-decoration:none;
    color:#4b4b57;
    font-weight:600;
    font-size:.95rem;
    transition:.3s ease;
}

.nav-links li a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-10px;
    width:0;
    height:2px;
    background:#7c3aed;
    border-radius:20px;
    transform:translateX(-50%);
    transition:.3s ease;
}

.nav-links li a:hover{
    color:#7c3aed;
}

.nav-links li a:hover::after{
    width:70%;
}

/* NAV BUTTONS */

.nav-auth{
    display:flex;
    align-items:center;
    gap:16px;
}

.btn-login{
    text-decoration:none;
    color:#1f1f2e;
    font-weight:600;
    font-size:.95rem;
    padding:14px 26px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
    transition:.3s ease;
}

.btn-login:hover{
    border-color:#7c3aed;
    color:#7c3aed;
    box-shadow:0 8px 25px rgba(124,58,237,.12);
}

.btn-start{
    text-decoration:none;
    background:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%);
    color:#fff;
    padding:14px 28px;
    border-radius:16px;
    font-weight:700;
    font-size:.95rem;
    transition:.3s ease;
    box-shadow:0 12px 28px rgba(124,58,237,.28);
}

.btn-start:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(124,58,237,.38);
}

/* HERO */

.hero{
    min-height:92vh;
    padding:135px 25px 70px;
    background:
        radial-gradient(circle at 85% 20%, rgba(168,85,247,.16), transparent 35%),
        radial-gradient(circle at 15% 80%, rgba(124,58,237,.10), transparent 35%),
        linear-gradient(180deg,#ffffff 0%,#f8f6ff 100%);
    overflow:hidden;
}

.hero-container{
    max-width:1440px;
    margin:0 auto;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:55px;
}

.hero-badge{
    width:fit-content;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(124,58,237,.08);
    color:#6d28d9;
    font-size:.9rem;
    font-weight:700;
    margin-bottom:28px;
}

.hero-badge span{
    margin-right:8px;
}

.hero-content h1{
    font-size:4rem;
    line-height:1.08;
    letter-spacing:-2px;
    color:#171724;
    margin-bottom:28px;
}

.hero-content h1 span{
    background:linear-gradient(135deg,#7c3aed,#a855f7);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-content p{
    max-width:560px;
    font-size:1.15rem;
    line-height:1.8;
    color:#5f6072;
    margin-bottom:34px;
}

.hero-buttons{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:42px;
}

.hero-btn-primary,
.hero-btn-secondary{
    height:58px;
    padding:0 30px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    font-weight:700;
    transition:.3s ease;
}

.hero-btn-primary{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    color:#fff;
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
    box-shadow:0 18px 40px rgba(124,58,237,.30);
}

.hero-btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 50px rgba(124,58,237,.38);
}

.hero-btn-secondary{
    color:#1f1f2e;
    background:#fff;
    border:1px solid #e5e7eb;
}

.hero-btn-secondary:hover{
    border-color:#7c3aed;
    color:#7c3aed;
    transform:translateY(-3px);
}

/* HERO STATS */

.hero-stats{
    display:grid;
    grid-template-columns:1fr 1px 1fr 1px 1fr;
    align-items:center;
    gap:28px;
    margin-top:25px;
    width:100%;
    max-width:620px;
}

.stat-item{
    display:flex;
    align-items:center;
    gap:14px;
}

.stat-icon{
    position:relative;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border-radius:18px;
    background:rgba(124,58,237,.08);
    color:#7C3AED;
}

.stat-icon svg{
    position:static !important;
    width:24px !important;
    height:24px !important;
    display:block;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
}

.stat-info strong{
    display:block;
    color:#1e1e2e;
    font-size:1.35rem;
    font-weight:800;
}

.stat-info span{
    display:block;
    margin-top:4px;
    color:#77788a;
    font-size:.88rem;
}

.stat-divider{
    width:1px;
    height:48px;
    background:rgba(0,0,0,.08);
}

/* DASHBOARD PREVIEW */

.hero-preview{
    position:relative;
}

.hero-preview::before{
    content:"";
    position:absolute;
    inset:-50px;
    background:radial-gradient(circle, rgba(124,58,237,.22), transparent 60%);
    filter:blur(20px);
    z-index:0;
}

.dashboard-card{
    position:relative;
    z-index:1;
    min-height:420px;
    max-height:520px;
    display:grid;
    grid-template-columns:205px 1fr;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(124,58,237,.18);
    border-radius:30px;
    box-shadow:0 30px 80px rgba(64,33,120,.16);
    overflow:hidden;
    backdrop-filter:blur(20px);
    transition:.35s ease;
}

.dashboard-card:hover{
    transform:translateY(-6px);
    box-shadow:0 38px 95px rgba(64,33,120,.22);
}

.dashboard-sidebar{
    padding:22px 18px;
    border-right:1px solid #eee8ff;
    background:rgba(255,255,255,.72);
}

.mini-logo{
    font-size:1.25rem;
    font-weight:800;
    letter-spacing:6px;
    margin-bottom:18px;
}

.mini-logo span{
    width:16px;
    height:16px;
    display:inline-block;
    border-radius:50%;
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
    margin:0 4px;
}

.dashboard-sidebar ul{
    list-style:none;
}

.dashboard-sidebar li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    margin-bottom:4px;
    border-radius:14px;
    font-size:.82rem;
    font-weight:600;
    color:#55566b;
    transition:.25s;
}

.dashboard-sidebar li svg{
    width:16px;
    height:16px;
    stroke-width:2;
}

.dashboard-sidebar li:hover{
    background:#f7f4ff;
    color:#7c3aed;
    cursor:pointer;
}

.dashboard-sidebar li.active{
    background:rgba(124,58,237,.12);
    color:#7c3aed;
}

.dashboard-sidebar hr{
    border:none;
    height:1px;
    background:#f0ecfb;
    margin:10px 8px;
}

.dashboard-main{
    padding:24px;
}

.dashboard-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:20px;
}

.dashboard-top h3{
    font-size:1.55rem;
    color:#1e1e2e;
    margin-bottom:8px;
}

.dashboard-top p{
    color:#7a7a8c;
}

.streak-badge{
    padding:10px 14px;
    border-radius:14px;
    background:#fff7ed;
    color:#c2410c;
    font-weight:700;
    font-size:.85rem;
}

.changing-name{
    color:#7c3aed;
    display:inline-block;
    min-width:78px;
    transition:.35s ease;
}

.changing-name.fade-out{
    opacity:0;
    transform:translateY(8px);
}

.wave{
    display:inline-block;
    animation:waveHand 2.4s ease-in-out infinite;
    transform-origin:70% 70%;
}

/* DASHBOARD STATS */

.dashboard-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:16px;
}

.dash-stat{
    background:#fff;
    border:1px solid #eee8ff;
    border-radius:20px;
    padding:15px;
    box-shadow:0 10px 30px rgba(64,33,120,.06);
}

.dash-stat span{
    color:#6b6c7c;
    font-size:.82rem;
    font-weight:600;
}

.dash-stat strong{
    display:block;
    margin:10px 0;
    font-size:1.55rem;
    color:#1e1e2e;
}

.progress{
    width:100%;
    height:7px;
    background:#eee8ff;
    border-radius:999px;
    overflow:hidden;
}

.progress i{
    display:block;
    height:100%;
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
    border-radius:999px;
}

/* DASHBOARD GRAFİK + ROTA AI */
.dashboard-bottom{
    display:grid;
    grid-template-columns:1.4fr .9fr;
    gap:14px;
    align-items:stretch;
}

.chart-box,
.ai-box{
    height:205px;
    min-height:205px;
    padding:18px;
    background:#fff;
    border:1px solid #eee8ff;
    border-radius:22px;
}

.chart-box h4,
.ai-box h4{
    color:#1e1e2e;
    margin-bottom:18px;
}

.fake-chart{
    position:relative;
    height:115px;
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(180deg,#f6efff 0%,#ffffff 100%);
}

.chart-grid{
    position:absolute;
    inset:12px 12px 28px 12px;
    background-image:
        linear-gradient(to right,rgba(124,58,237,.08) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(124,58,237,.08) 1px,transparent 1px);
    background-size:42px 28px;
}

.chart-line{
    position:absolute;
    inset:12px 12px 26px 12px;
    width:calc(100% - 24px);
    height:calc(100% - 38px);
    overflow:visible;
}

.chart-area{fill:url(#chartGradient);}

.chart-path{
    fill:none;
    stroke:#7c3aed;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.chart-line circle{
    r:4;
    fill:#fff;
    stroke:#7c3aed;
    stroke-width:3;
}

.chart-days{
    position:absolute;
    left:14px;
    right:14px;
    bottom:8px;
    display:flex;
    justify-content:space-between;
    color:#8a8a9c;
    font-size:.65rem;
    font-weight:700;
}

.ai-box{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
}

.ai-box p{
    margin:0;
    color:#66677a;
    font-size:.85rem;
    line-height:1.55;
}

.ai-box button{
    justify-self:start;
    align-self:end;
    margin-top:10px;
    border:0;
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
    color:#fff;
    padding:12px 18px;
    border-radius:13px;
    font-weight:700;
    cursor:pointer;
}

/* ANIMATIONS */

@keyframes waveHand{
    0%, 100%{
        transform:rotate(0deg);
    }

    10%{
        transform:rotate(14deg);
    }

    20%{
        transform:rotate(-8deg);
    }

    30%{
        transform:rotate(14deg);
    }

    40%{
        transform:rotate(0deg);
    }
}

/* RESPONSIVE */

@media(max-width:1100px){
    .hero-container{
        grid-template-columns:1fr;
    }

    .hero-content{
        text-align:center;
    }

    .hero-content p,
    .hero-badge{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons,
    .hero-stats{
        justify-content:center;
    }
}


/* FEATURES */

.features{
    padding:80px 25px;
    background:linear-gradient(180deg,#f8f6ff 0%,#ffffff 100%);
}

.features-container{
    max-width:1440px;
    margin:0 auto;
}

.section-title{
    text-align:center;
    margin-bottom:34px;
}

.section-title h2{
    font-size:2rem;
    color:#171724;
    margin-bottom:12px;
    position:relative;
    display:inline-block;
}

.section-title h2::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-12px;
    transform:translateX(-50%);
    width:54px;
    height:4px;
    border-radius:999px;
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
}

.section-title p{
    margin-top:24px;
    color:#66677a;
    font-weight:600;
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
}

.feature-card{
    background:#fff;
    border:1px solid #eee8ff;
    border-radius:22px;
    padding:30px 18px;
    text-align:center;
    box-shadow:0 14px 40px rgba(64,33,120,.06);
    transition:.3s ease;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 55px rgba(64,33,120,.12);
    border-color:rgba(124,58,237,.25);
}

.feature-icon{
    width:76px;
    height:76px;
    margin:0 auto 22px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(124,58,237,.10);
    color:#7c3aed;
}

.feature-icon svg{
    width:34px;
    height:34px;
    stroke-width:2.4;
}

.feature-card h3{
    color:#1e1e2e;
    font-size:1.05rem;
    margin-bottom:12px;
}

.feature-card p{
    color:#66677a;
    font-size:.88rem;
    line-height:1.7;
    font-weight:600;
}

@media(max-width:1200px){
    .features-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:700px){
    .features-grid{
        grid-template-columns:1fr;
    }
}


/* ===== STATS BANNER ===== */

.stats-banner{

    max-width:1440px;

    margin:55px auto 0;

    padding:34px 45px;

    display:grid;

    grid-template-columns:1fr 1px 1fr 1px 1fr 1px 1fr;

    align-items:center;

    gap:26px;

    border-radius:26px;

    background:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%);

    box-shadow:0 28px 60px rgba(124,58,237,.35);

    color:#fff;

}

.stats-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}

.stats-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.16);

}

.stats-icon svg{

    width:28px;

    height:28px;

    stroke-width:2.2;

}

.stats-item h3{

    font-size:2rem;

    font-weight:800;

    margin-bottom:4px;

}

.stats-item span{

    font-size:.95rem;

    opacity:.9;

}

.stats-line{

    width:1px;

    height:60px;

    background:rgba(255,255,255,.25);

}

@media(max-width:1000px){

    .stats-banner{

        grid-template-columns:1fr 1fr;

        gap:30px;

    }

    .stats-line{

        display:none;

    }

}

@media(max-width:650px){

    .stats-banner{

        grid-template-columns:1fr;

        text-align:center;

    }

}

.stats-item h3{
    min-width:120px;
    text-align:left;
    font-variant-numeric:tabular-nums;
}

.stats-item h3.percent{
    min-width:70px;
}



/* PANEL SECTION */

.panel-section{
    padding:90px 25px;
    background:#fff;
    position:relative;
    overflow:hidden;
}

.panel-section::before{
    content:"";
    position:absolute;
    right:-120px;
    top:40px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(124,58,237,.12), transparent 65%);
}

.panel-container{
    max-width:1320px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;
    position:relative;
    z-index:1;
}

.panel-showcase{
    min-height:430px;
    position:relative;
}

.panel-card{
    background:rgba(255,255,255,.92);
    border:1px solid #eee8ff;
    border-radius:28px;
    box-shadow:0 30px 80px rgba(64,33,120,.14);
}

.panel-card-main{
    width:390px;
    padding:26px;
    position:absolute;
    left:50px;
    top:40px;
    z-index:2;
}

.panel-card-ai{
    width:330px;
    padding:26px;
    position:absolute;
    right:40px;
    bottom:30px;
    z-index:3;
}

.panel-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}

.panel-card-header span{
    color:#1e1e2e;
    font-weight:800;
}

.panel-card-header strong{
    padding:6px 10px;
    border-radius:999px;
    background:rgba(34,197,94,.10);
    color:#16a34a;
    font-size:.78rem;
}

.panel-mini-chart{
    height:150px;
    display:flex;
    align-items:flex-end;
    gap:12px;
    padding:18px;
    border-radius:20px;
    background:linear-gradient(180deg,#f6efff 0%,#fff 100%);
    margin-bottom:18px;
}

.panel-mini-chart span{
    flex:1;
    border-radius:999px 999px 8px 8px;
    background:linear-gradient(180deg,#8b5cf6,#6d28d9);
    box-shadow:0 10px 18px rgba(124,58,237,.20);
}

.panel-mini-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.panel-mini-stats div{
    padding:14px;
    border-radius:16px;
    background:#f8f6ff;
}

.panel-mini-stats small{
    display:block;
    color:#77788a;
    font-weight:700;
    margin-bottom:8px;
}

.panel-mini-stats b{
    color:#1e1e2e;
    font-size:1.15rem;
}

.panel-ai-icon{
    width:48px;
    height:48px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(124,58,237,.10);
    color:#7c3aed;
    margin-bottom:16px;
}

.panel-ai-icon svg{
    width:22px;
    height:22px;
}

.panel-card-ai h4{
    color:#1e1e2e;
    font-size:1.3rem;
    margin-bottom:10px;
}

.panel-card-ai p{
    color:#66677a;
    line-height:1.6;
    margin-bottom:18px;
}

.panel-task{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border-radius:14px;
    background:#f8f6ff;
    color:#55566b;
    font-weight:700;
    margin-bottom:10px;
}

.panel-task span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#7c3aed;
}

.section-kicker{
    display:inline-block;
    color:#7c3aed;
    font-weight:800;
    margin-bottom:16px;
}

.panel-content h2{
    font-size:3.2rem;
    line-height:1.08;
    letter-spacing:-1.5px;
    color:#171724;
    margin-bottom:24px;
}

.panel-content h2::first-letter{
    color:#171724;
}

.panel-content p{
    max-width:540px;
    color:#5f6072;
    font-size:1.08rem;
    line-height:1.8;
    margin-bottom:26px;
}

.panel-list{
    display:grid;
    gap:14px;
    margin-bottom:32px;
}

.panel-list div{
    display:flex;
    align-items:center;
    gap:12px;
    color:#333342;
    font-weight:700;
}

.panel-list svg{
    width:20px;
    height:20px;
    color:#7c3aed;
}

.panel-buttons{
    display:flex;
    gap:14px;
}

.panel-btn-primary,
.panel-btn-secondary{
    height:52px;
    padding:0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    text-decoration:none;
    font-weight:800;
    transition:.3s ease;
}

.panel-btn-primary{
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
    color:#fff;
    box-shadow:0 16px 36px rgba(124,58,237,.28);
}

.panel-btn-secondary{
    background:#fff;
    color:#1f1f2e;
    border:1px solid #e5e7eb;
}

.panel-btn-primary:hover,
.panel-btn-secondary:hover{
    transform:translateY(-3px);
}

@media(max-width:1000px){
    .panel-container{
        grid-template-columns:1fr;
        gap:45px;
    }

    .panel-content{
        text-align:center;
    }

    .panel-content p{
        margin-left:auto;
        margin-right:auto;
    }

    .panel-list div,
    .panel-buttons{
        justify-content:center;
    }
}


/* PREMIUM PANEL SHOWCASE */

.panel-showcase{
    position:relative;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
}

.showcase-glow{
    position:absolute;
    width:460px;
    height:460px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(124,58,237,.23) 0%,
        rgba(168,85,247,.10) 42%,
        transparent 72%
    );
    filter:blur(18px);
    z-index:-1;
}

.showcase-dashboard{
    position:relative;
    width:510px;
    padding:28px;
    border:1px solid rgba(124,58,237,.15);
    border-radius:30px;
    background:rgba(255,255,255,.92);
    box-shadow:
        0 35px 90px rgba(64,33,120,.18),
        inset 0 1px 0 rgba(255,255,255,.8);
    backdrop-filter:blur(20px);
    transform:rotate(-2deg);
    transition:.4s ease;
}

.showcase-dashboard:hover{
    transform:rotate(0deg) translateY(-6px);
}

.showcase-topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:24px;
}

.showcase-label{
    display:block;
    margin-bottom:6px;
    color:#7c3aed;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.showcase-topbar h3{
    color:#1c1c2b;
    font-size:1.35rem;
}

.showcase-date{
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border:1px solid #eee8ff;
    border-radius:12px;
    background:#faf8ff;
    color:#68687a;
    font-size:.72rem;
    font-weight:700;
}

.showcase-date svg{
    width:15px;
    height:15px;
    color:#7c3aed;
}

.showcase-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.showcase-summary span{
    display:block;
    color:#858597;
    font-size:.76rem;
    font-weight:700;
}

.showcase-summary strong{
    display:block;
    margin:4px 0;
    color:#1c1c2b;
    font-size:2rem;
}

.showcase-summary small{
    color:#16a34a;
    font-size:.7rem;
    font-weight:700;
}

.showcase-score{
    width:84px;
    height:84px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:
        radial-gradient(circle at center, #fff 56%, transparent 58%),
        conic-gradient(#7c3aed 84%, #eee8ff 0);
}

.showcase-score strong{
    margin:2px 0 0;
    font-size:1.25rem;
}

.showcase-chart{
    position:relative;
    height:190px;
    overflow:hidden;
    border-radius:22px;
    background:linear-gradient(180deg,#f7f2ff 0%,#fff 100%);
}

.showcase-chart-lines{
    position:absolute;
    inset:16px 18px 32px;
    background-image:
        linear-gradient(to right, rgba(124,58,237,.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(124,58,237,.07) 1px, transparent 1px);
    background-size:62px 38px;
}

.showcase-chart svg{
    position:absolute;
    inset:14px 16px 30px;
    width:calc(100% - 32px);
    height:calc(100% - 44px);
    overflow:visible;
}

.showcase-chart-area{
    fill:url(#showcaseArea);
}

.showcase-chart-path{
    fill:none;
    stroke:#7c3aed;
    stroke-width:5;
    stroke-linecap:round;
}

.showcase-chart-days{
    position:absolute;
    right:18px;
    bottom:10px;
    left:18px;
    display:flex;
    justify-content:space-between;
    color:#9090a0;
    font-size:.65rem;
    font-weight:700;
}

.floating-ai-card,
.floating-goal-card,
.floating-streak-card{
    position:absolute;
    z-index:4;
    border:1px solid rgba(124,58,237,.14);
    background:rgba(255,255,255,.96);
    box-shadow:0 24px 55px rgba(64,33,120,.17);
    backdrop-filter:blur(16px);
}

.floating-ai-card{
    top:40px;
    right:-5px;
    width:225px;
    display:flex;
    gap:13px;
    padding:17px;
    border-radius:20px;
    animation:floatCard 5s ease-in-out infinite;
}

.floating-icon{
    width:42px;
    height:42px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:rgba(124,58,237,.11);
    color:#7c3aed;
}

.floating-icon svg{
    width:20px;
    height:20px;
}

.floating-ai-card span,
.floating-goal-card span{
    display:block;
    color:#7c3aed;
    font-size:.7rem;
    font-weight:800;
}

.floating-ai-card strong{
    display:block;
    margin:4px 0;
    color:#1e1e2e;
    font-size:.82rem;
}

.floating-ai-card p{
    margin:0;
    color:#77788a;
    font-size:.7rem;
    line-height:1.4;
}

.floating-goal-card{
    bottom:25px;
    left:-18px;
    width:225px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:16px;
    border-radius:20px;
    animation:floatCard 6s ease-in-out infinite reverse;
}

.goal-icon{
    width:44px;
    height:44px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#f3edff;
    color:#7c3aed;
}

.goal-icon svg{
    width:21px;
    height:21px;
}

.floating-goal-card > div:last-child{
    flex:1;
}

.floating-goal-card strong{
    display:block;
    margin:4px 0 7px;
    color:#1e1e2e;
    font-size:.9rem;
}

.goal-progress{
    width:100%;
    height:6px;
    overflow:hidden;
    border-radius:999px;
    background:#eee8ff;
}

.goal-progress i{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#8b5cf6,#6d28d9);
}

.floating-streak-card{
    right:5px;
    bottom:1px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 16px;
    border-radius:18px;
}

.floating-streak-card > span{
    font-size:1.45rem;
}

.floating-streak-card strong,
.floating-streak-card small{
    display:block;
}

.floating-streak-card strong{
    color:#1e1e2e;
    font-size:.87rem;
}

.floating-streak-card small{
    margin-top:2px;
    color:#878798;
    font-size:.66rem;
}

@keyframes floatCard{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }
}

@media(max-width:1200px){
    .showcase-dashboard{
        width:470px;
    }

    .floating-ai-card{
        right:0;
    }

    .floating-goal-card{
        left:0;
    }
}

@media(max-width:650px){
    .panel-showcase{
        min-height:520px;
    }

    .showcase-dashboard{
        width:100%;
        padding:20px;
        transform:none;
    }

    .floating-ai-card{
        top:10px;
        right:5px;
        width:190px;
    }

    .floating-goal-card{
        left:5px;
        bottom:5px;
        width:190px;
    }

    .floating-streak-card{
        display:none;
    }
}


.floating-streak-card > span{
    display:inline-block;
    transform-origin:50% 85%;
    animation:flamePulse 1.4s ease-in-out infinite;
    filter:drop-shadow(0 4px 8px rgba(249,115,22,.28));
}

@keyframes flamePulse{
    0%,100%{
        transform:scale(1) rotate(-2deg);
        filter:drop-shadow(0 4px 8px rgba(249,115,22,.25));
    }

    25%{
        transform:scale(1.08) rotate(3deg);
    }

    50%{
        transform:scale(.96) rotate(-3deg);
        filter:drop-shadow(0 6px 13px rgba(249,115,22,.50));
    }

    75%{
        transform:scale(1.06) rotate(2deg);
    }
}



.floating-ai-card{
    top:40px;
    right:-5px;
    width:225px;
    display:flex;
    gap:13px;
    padding:17px;
    border-radius:20px;
    animation:floatCard 5s ease-in-out infinite;
}

.floating-goal-card{
    bottom:25px;
    left:-18px;
    width:225px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:16px;
    border-radius:20px;
    animation:floatCard 6s ease-in-out infinite reverse;
}

@keyframes floatCard{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }
}

/* KARTLARIN SOLDAN GİRİŞİ */

.floating-ai-card,
.floating-goal-card,
.floating-streak-card{
    opacity:0;
    translate:-100vw 0;

    transition:
        opacity .8s ease,
        translate 1.1s cubic-bezier(.22,1,.36,1);
}

.floating-ai-card.card-entered,
.floating-goal-card.card-entered,
.floating-streak-card.card-entered{
    opacity:1;
    translate:0 0;
}


/* ============================= */
/* TESTIMONIALS */
/* ============================= */

.testimonials-section{
    padding:95px 0;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(124,58,237,.08), transparent 28%),
        linear-gradient(180deg,#fff 0%,#faf8ff 100%);
}

.testimonials-heading{
    max-width:760px;
    margin:0 auto 48px;
    padding:0 25px;
    text-align:center;
}

.testimonials-heading > span{
    display:inline-block;
    margin-bottom:12px;
    color:#7c3aed;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.testimonials-heading h2{
    color:#171724;
    font-size:2.25rem;
    letter-spacing:-1px;
    margin-bottom:14px;
}

.testimonials-heading p{
    color:#6b6c7c;
    line-height:1.7;
}

.testimonials-marquee{
    position:relative;
    width:100%;
    overflow:hidden;
}

.testimonials-marquee::before,
.testimonials-marquee::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    z-index:5;
    width:120px;
    pointer-events:none;
}

.testimonials-marquee::before{
    left:0;
    background:linear-gradient(90deg,#faf8ff,transparent);
}

.testimonials-marquee::after{
    right:0;
    background:linear-gradient(-90deg,#faf8ff,transparent);
}

.testimonials-track{
    display:flex;
    width:max-content;
    gap:22px;
    padding:10px 0 25px;
    animation:testimonialsScroll 75s linear infinite;
    will-change:transform;
}

.testimonials-marquee:hover .testimonials-track{
    animation-play-state:paused;
}

.testimonial-card{
    width:420px;
    min-height:240px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:28px;
    border:1px solid rgba(124,58,237,.13);
    border-radius:24px;
    background:rgba(255,255,255,.92);
    box-shadow:0 18px 45px rgba(64,33,120,.08);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.testimonial-card:hover{
    transform:translateY(-6px);
    border-color:rgba(124,58,237,.28);
    box-shadow:0 26px 60px rgba(64,33,120,.14);
}

.quote-icon{
    height:34px;
    color:#7c3aed;
    font-family:Georgia, serif;
    font-size:3.5rem;
    font-weight:800;
    line-height:1;
}

.testimonial-card > p{
    min-height:88px;
    margin:14px 0 26px;
    color:#3f4050;
    font-size:.96rem;
    font-weight:600;
    line-height:1.75;
}

.testimonial-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.student{
    display:flex;
    align-items:center;
    gap:12px;
}

.student-avatar{
    width:46px;
    height:46px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#ede9fe,#d8b4fe);
    color:#6d28d9;
    font-size:.78rem;
    font-weight:800;
    box-shadow:inset 0 0 0 3px #fff;
}

.student strong,
.student span{
    display:block;
}

.student strong{
    margin-bottom:4px;
    color:#1e1e2e;
    font-size:.88rem;
}

.student span{
    color:#858597;
    font-size:.72rem;
    font-weight:600;
}

.testimonial-stars{
    flex-shrink:0;
    color:#7c3aed;
    font-size:.88rem;
    letter-spacing:2px;
}

@keyframes testimonialsScroll{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(calc(-50% - 11px));
    }
}

@media(max-width:700px){
    .testimonials-section{
        padding:70px 0;
    }

    .testimonials-heading h2{
        font-size:1.8rem;
    }

    .testimonial-card{
        width:320px;
        min-height:260px;
        padding:23px;
    }

    .testimonial-footer{
        align-items:flex-start;
        flex-direction:column;
    }

    .testimonials-marquee::before,
    .testimonials-marquee::after{
        width:45px;
    }
}

@media(prefers-reduced-motion:reduce){
    .testimonials-track{
        animation:none;
    }
}


/* ================================================= */
/* PREMIUM CTA + FOOTER */
/* ================================================= */

.footer-area{
    position:relative;
    padding:110px 25px 0;
    overflow:hidden;

    background:
        linear-gradient(
            to bottom,
            #faf8ff 0,
            #faf8ff 280px,
            #171221 280px,
            #100d18 100%
        );
}

/* ARKA PLAN IŞIKLARI */

.footer-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(10px);
}

.footer-glow-left{
    left:-180px;
    bottom:80px;
    width:500px;
    height:500px;
    background:radial-gradient(
        circle,
        rgba(124,58,237,.30),
        rgba(124,58,237,.07) 45%,
        transparent 72%
    );
}

.footer-glow-right{
    right:-220px;
    top:180px;
    width:580px;
    height:580px;
    background:radial-gradient(
        circle,
        rgba(168,85,247,.22),
        rgba(109,40,217,.06) 48%,
        transparent 72%
    );
}

/* ================================================= */
/* CTA */
/* ================================================= */

.footer-cta{
    position:relative;
    z-index:3;

    max-width:1320px;
    min-height:250px;

    margin:0 auto -72px;
    padding:48px 54px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.20);
    border-radius:32px;

    color:#fff;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(255,255,255,.20),
            transparent 26%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(216,180,254,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #8b5cf6 0%,
            #6d28d9 48%,
            #4c1d95 100%
        );

    /* ================================================= */
/* CTA - 3D CAM / METAL GOLGE EFEKTI */
/* ================================================= */

        box-shadow:
            0 70px 120px rgba(15,8,32,.52),
            0 28px 60px rgba(124,58,237,.30),
            inset 0 2px 0 rgba(255,255,255,.34),
            inset 0 -3px 10px rgba(36,14,74,.22);
}





.footer-cta-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:28px;
}

.footer-cta-icon{
    width:105px;
    height:105px;
    border-radius: 30px;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.20);
    border-radius:28px;

    color:#fff;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(14px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 18px 38px rgba(30,10,70,.18);
}

.footer-cta-icon svg{
    width:52px;
    height:52px;
    stroke-width:1.7;
}

.footer-cta-kicker{
    display:inline-block;
    margin-bottom:10px;

    color:#ddd0ff;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.13em;
}

.footer-cta-text h2{
    max-width:640px;
    margin-bottom:12px;

    font-size:2.25rem;
    line-height:1.15;
    letter-spacing:-1px;
}

.footer-cta-text h2 strong{
    color:#e9d5ff;
    font-weight:800;
}

.footer-cta-text p{
    max-width:620px;

    color:rgba(255,255,255,.76);
    font-size:.96rem;
    font-weight:500;
    line-height:1.7;
}

.footer-cta-action{
    position:relative;
    z-index:2;
    flex-shrink:0;
    text-align:center;
}

.footer-cta-button{
    min-width:292px;
    height:66px;
    padding:0 10px 0 26px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    border-radius:19px;

    background:#fff;
    color:#18121f;

    text-decoration:none;
    font-size:.96rem;
    font-weight:800;

    box-shadow:
        0 22px 46px rgba(31,12,68,.24),
        inset 0 0 0 1px rgba(124,58,237,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.footer-cta-arrow{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:15px;

    color:#fff;
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);

    transition:transform .3s ease;
}

.footer-cta-arrow svg{
    width:20px;
    height:20px;
}

.footer-cta-button:hover{
    transform:translateY(-4px);
    box-shadow:
        0 28px 58px rgba(31,12,68,.32),
        inset 0 0 0 1px rgba(124,58,237,.10);
}

.footer-cta-button:hover .footer-cta-arrow{
    transform:translate(2px,-2px);
}

.footer-cta-action small{
    display:block;
    margin-top:11px;

    color:rgba(255,255,255,.64);
    font-size:.72rem;
    font-weight:600;
}

/* ================================================= */
/* FOOTER */
/* ================================================= */

.site-footer{
    position:relative;
    z-index:1;
    padding:145px 0 30px;
    color:#d9d6e3;
    background:
        radial-gradient(circle at 12% 20%, rgba(124,58,237,.18), transparent 32%),
        radial-gradient(circle at 88% 75%, rgba(168,85,247,.12), transparent 30%),
        linear-gradient(180deg,#171221 0%,#100d18 100%);
}

.footer-container{
    position:relative;
    z-index:2;
    max-width:1320px;
    margin:0 auto;
}

.footer-main{
    display:grid;
    grid-template-columns:1.35fr 2fr 1.15fr;
    gap:75px;
    align-items:start;
}

/* MARKA */

.footer-brand{
    max-width:370px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:24px;

    color:#fff;
    font-size:1.95rem;
    font-weight:800;
    letter-spacing:4px;
}

.footer-logo-circle{
    width:32px;
    height:32px;
    border-radius:50%;

    background:
        radial-gradient(circle at 30% 25%,#d8b4fe,#8b5cf6 45%,#6d28d9 75%);

    box-shadow:
        0 0 0 5px rgba(124,58,237,.10),
        0 10px 28px rgba(124,58,237,.48);
}

.footer-brand h3{
    margin-bottom:14px;
    color:#fff;
    font-size:1.05rem;
}

.footer-brand p{
    color:#9995a7;
    font-size:.88rem;
    line-height:1.8;
}

.footer-socials{
    display:flex;
    gap:11px;
    margin-top:26px;
}

.footer-socials a{
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;

    color:#b7b2c3;
    background:rgba(255,255,255,.04);

    transition:
        transform .3s ease,
        color .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.footer-socials a:hover{
    color:#fff;
    border-color:rgba(168,85,247,.48);
    background:rgba(124,58,237,.20);
    transform:translateY(-4px);
}

.footer-socials svg{
    width:18px;
    height:18px;
}

/* LİNK GRUPLARI */

.footer-links-group{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:42px;
}

.footer-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer-column h4{
    position:relative;
    margin-bottom:23px;

    color:#fff;
    font-size:.91rem;
}

.footer-column h4::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;

    width:24px;
    height:2px;
    border-radius:999px;

    background:linear-gradient(90deg,#a855f7,#7c3aed);
}

.footer-column a{
    position:relative;
    margin-bottom:13px;

    color:#9691a3;
    font-size:.84rem;
    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-column a::before{
    content:"";
    position:absolute;
    left:-13px;
    top:50%;

    width:5px;
    height:5px;
    border-radius:50%;

    background:#8b5cf6;

    opacity:0;
    transform:translateY(-50%) scale(0);
    transition:.25s ease;
}

.footer-column a:hover{
    color:#d8b4fe;
    transform:translateX(10px);
}

.footer-column a:hover::before{
    opacity:1;
    transform:translateY(-50%) scale(1);
}

/* NEWSLETTER */

.footer-newsletter{
    padding:27px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.025)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 20px 50px rgba(0,0,0,.12);

    backdrop-filter:blur(16px);
}

.newsletter-icon{
    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:18px;

    border-radius:15px;

    color:#c4b5fd;
    background:rgba(124,58,237,.18);
}

.newsletter-icon svg{
    width:20px;
    height:20px;
}

.footer-newsletter h4{
    margin-bottom:10px;
    color:#fff;
    font-size:1rem;
}

.footer-newsletter > p{
    margin-bottom:19px;

    color:#9691a3;
    font-size:.82rem;
    line-height:1.7;
}

.newsletter-form{
    display:flex;
    align-items:center;

    padding:5px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;

    background:rgba(0,0,0,.15);

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.newsletter-form:focus-within{
    border-color:rgba(168,85,247,.58);
    box-shadow:0 0 0 4px rgba(124,58,237,.11);
}

.newsletter-form input{
    width:100%;
    min-width:0;

    padding:12px 13px;

    border:0;
    outline:0;

    color:#fff;
    background:transparent;

    font-family:inherit;
    font-size:.81rem;
}

.newsletter-form input::placeholder{
    color:#6f6a7c;
}

.newsletter-form button{
    width:42px;
    height:42px;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:12px;

    color:#fff;
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);

    cursor:pointer;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.newsletter-form button:hover{
    transform:translateX(2px);
    box-shadow:0 9px 24px rgba(124,58,237,.38);
}

.newsletter-form button svg{
    width:17px;
    height:17px;
}

.newsletter-note{
    display:block;
    margin-top:11px;

    color:#6f6a7c;
    font-size:.67rem;
    line-height:1.5;
}

/* ALT KISIM */

.footer-divider{
    height:1px;
    margin:55px 0 25px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );
}

.footer-bottom{
    margin-top:55px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.footer-bottom > p{
    margin:0;
    color:#706b7c;
    font-size:.76rem;
}

.footer-bottom-logo{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:.9rem;
    font-weight:700;
}

.footer-bottom-logo img{
    width:22px;
    height:22px;
    object-fit:contain;
}

/* ================================================= */
/* RESPONSIVE */
/* ================================================= */

@media(max-width:1100px){

    .footer-cta{
        align-items:flex-start;
    }

    .footer-cta-text h2{
        font-size:1.9rem;
    }

    .footer-main{
        grid-template-columns:1fr 1.6fr;
    }

    .footer-newsletter{
        grid-column:1 / -1;
        max-width:520px;
    }
}

@media(max-width:850px){

    .footer-area{
        padding-top:80px;
    }

    .footer-cta{
        padding:36px;
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-cta-action{
        width:100%;
        text-align:left;
    }

    .footer-cta-button{
        width:100%;
        max-width:360px;
    }

    .footer-main{
        grid-template-columns:1fr;
        gap:48px;
    }

    .footer-links-group{
        max-width:700px;
    }

    .footer-newsletter{
        grid-column:auto;
    }
}

@media(max-width:620px){

    .footer-area{
        padding-right:16px;
        padding-left:16px;
    }

    .footer-cta{
        margin-bottom:-55px;
        padding:27px;
        border-radius:25px;
    }

    .footer-cta-content{
        align-items:flex-start;
        gap:17px;
    }

    .footer-cta-icon{
        width:62px;
        height:62px;
        border-radius:19px;
    }

    .footer-cta-icon svg{
        width:32px;
        height:32px;
    }

    .footer-cta-kicker{
        font-size:.65rem;
    }

    .footer-cta-text h2{
        font-size:1.45rem;
    }

    .footer-cta-text p{
        font-size:.82rem;
    }

    .footer-cta-button{
        min-width:0;
        height:61px;
    }

    .site-footer{
        padding-top:120px;
    }

    .footer-links-group{
        grid-template-columns:1fr 1fr;
        gap:36px;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media(max-width:420px){

    .footer-cta-content{
        flex-direction:column;
    }

    .footer-links-group{
        grid-template-columns:1fr;
    }

    .footer-cta-button{
        font-size:.86rem;
    }
}






/* ================================================= */
/* FOOTER - SOSYAL MEDYA İKONLARI */
/* ================================================= */

.footer-socials{
    display:flex;
    gap:14px;
    margin-top:32px;
}

.footer-socials a{
    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);

    color:#d8b4fe;

    transition:all .35s ease;
}

.footer-socials a svg{
    width:22px;
    height:22px;
    stroke-width:2;
}

.footer-socials a:hover{
    transform:translateY(-6px) scale(1.08);

    background:#7c3aed;
    color:#fff;

    border-color:transparent;

    box-shadow:
        0 15px 35px rgba(124,58,237,.45),
        0 0 25px rgba(124,58,237,.35);
}








/* ================================================= */
/* CTA - ARKA PLAN BALON ANİMASYONLARI */
/* ================================================= */



.footer-cta::before{
    content:"";
    position:absolute;
    top:-160px;
    right:220px;

    width:380px;
    height:380px;

    border-radius:50%;
    border:1px solid rgba(255,255,255,.10);

    animation:ctaBubbleOne 7s ease-in-out infinite;
}

.footer-cta::after{
    content:"";
    position:absolute;
    right:-70px;
    bottom:-160px;

    width:360px;
    height:360px;

    border-radius:50%;
    background:rgba(255,255,255,.06);

    animation:ctaBubbleTwo 18s ease-in-out infinite;
}

@keyframes ctaBubbleOne{
    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(-18px,14px) scale(1.04);
    }
}

@keyframes ctaBubbleTwo{
    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(16px,-12px) scale(.96);
    }
}

/* ========================= */
/* SCROLL REVEAL */
/* ========================= */

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}


.scroll-indicator{
    position:absolute;
    left:50%;
    bottom:90px;
    transform:translateX(-50%);
    z-index:20;
}

.scroll-indicator a{
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    color:#7c3aed;
    font-size:.82rem;
    font-weight:700;
}

.mouse{
    width:25px;
    height:40px;
    border:2px solid rgba(124,58,237,.4);
    border-radius:20px;
    display:flex;
    justify-content:center;
    padding-top:8px;
}

.mouse span{
    width:5px;
    height:8px;
    border-radius:50px;
    background:#7c3aed;
    animation:scrollMouse 1.8s infinite;
}

/* Dar ekranlarda veya kısa laptop ekranlarında scroll göstergesini gizle */

@media (max-width:1100px), (max-height:900px){
    .scroll-indicator{
        display:none;
    }
}

@keyframes scrollMouse{

    0%{
        transform:translateY(0);
        opacity:1;
    }

    70%{
        transform:translateY(14px);
        opacity:.2;
    }

    100%{
        transform:translateY(0);
        opacity:1;
    }

}


.hero-btn-primary::before{
    content:"";
    position:absolute;

    top:-40%;
    left:-120%;

    width:70px;
    height:180%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:rotate(20deg);

    animation:buttonShine 7s linear infinite;

    pointer-events:none;
}

@keyframes buttonShine{

    0%{
        left:-120%;
    }

    15%{
        left:130%;
    }

    100%{
        left:130%;
    }

}

.chart-path{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
}

.chart-path.chart-animate{
    animation:drawChart 10s ease forwards;
}

@keyframes drawChart{
    to{
        stroke-dashoffset:0;
    }
}

.chart-line circle{
    opacity:0;
    animation:showChartPoint .35s ease forwards;
}

.chart-line circle:nth-of-type(1){ animation-delay:0s; }
.chart-line circle:nth-of-type(2){ animation-delay:0.7s; }
.chart-line circle:nth-of-type(3){ animation-delay:1s; }
.chart-line circle:nth-of-type(4){ animation-delay:1.3s; }
.chart-line circle:nth-of-type(5){ animation-delay:1.6s; }
.chart-line circle:nth-of-type(6){ animation-delay:1.9s; }
.chart-line circle:nth-of-type(7){ animation-delay:2.1s; }

@keyframes showChartPoint{
    from{
        opacity:0;
        transform:scale(0);
        transform-box:fill-box;
        transform-origin:center;
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

#aiSuggestion{
    transition:opacity .6s ease;
}

#aiSuggestion.suggestion-hide{
    opacity:.75;
}

@media(max-width:760px){
    .dashboard-bottom{
        grid-template-columns:1fr;
    }

    .chart-box,
    .ai-box{
        height:auto;
        min-height:205px;
    }
}

/* =========================================================
   HEADER — RESPONSIVE MOBİL MENÜ
========================================================= */
.logo{ text-decoration:none; }
.nav-desktop{
    flex:1; display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; min-width:0;
}
.nav-desktop .nav-links{ grid-column:2; }
.nav-desktop .nav-auth{ grid-column:3; justify-self:end; }
.nav-toggle,.mobile-nav-panel{ display:none; }

@media(max-width:1000px){
    .navbar{ padding:16px 28px; }
    .nav-links{ gap:24px; }
    .btn-login,.btn-start{ padding-left:19px; padding-right:19px; }
}
@media(max-width:860px){
    .navbar{ min-height:74px; padding:14px 20px; position:relative; }
    .logo{ position:relative; z-index:1002; font-size:1.38rem; letter-spacing:2.5px; gap:6px; }
    .o-circle{ width:27px; height:27px; }
    .nav-desktop{ display:none; }

    .nav-toggle{
        position:relative; z-index:1002; width:44px; height:44px;
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:5px; border:1px solid #e8e4ef; border-radius:14px;
        background:#fff; cursor:pointer; box-shadow:0 8px 24px rgba(64,33,120,.08);
    }
    .nav-toggle span{
        width:19px; height:2px; display:block; border-radius:99px;
        background:#24212d; transition:.25s ease;
    }
    .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2){ opacity:0; }
    .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    .mobile-nav-panel{
        position:absolute; top:calc(100% + 10px); right:16px; left:16px; z-index:1001;
        padding:16px; display:flex; flex-direction:column; gap:5px;
        border:1px solid rgba(124,58,237,.12); border-radius:22px;
        background:rgba(255,255,255,.98); box-shadow:0 24px 70px rgba(44,25,78,.18);
        backdrop-filter:blur(18px); opacity:0; visibility:hidden;
        transform:translateY(-10px) scale(.98); transform-origin:top;
        transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
    }
    .mobile-nav-panel.is-open{ opacity:1; visibility:visible; transform:none; }
    .mobile-nav-panel>a{
        padding:13px 14px; border-radius:13px; color:#3e3b49;
        text-decoration:none; font-size:.92rem; font-weight:700;
    }
    .mobile-nav-panel>a:hover{ color:#6d28d9; background:#f7f2ff; }
    .mobile-nav-actions{
        margin-top:7px; padding-top:13px; display:grid; grid-template-columns:1fr 1fr;
        gap:9px; border-top:1px solid #eee9f5;
    }
    .mobile-nav-actions .btn-login,.mobile-nav-actions .btn-start{
        min-width:0; padding:12px 10px; display:flex; align-items:center;
        justify-content:center; border-radius:13px; font-size:.84rem; text-align:center;
    }
    body.nav-open{ overflow:hidden; }
}
@media(max-width:420px){
    .navbar{ padding:13px 14px; }
    .mobile-nav-panel{ right:10px; left:10px; }
    .mobile-nav-actions{ grid-template-columns:1fr; }
}

/* =========================================================
   HERO — 3D ROTA SHOWCASE SLIDER
========================================================= */

.hero-container{
    grid-template-columns:.86fr 1.14fr;
    gap:42px;
}

.hero-showcase{
    position:relative;
    min-height:555px;
    perspective:1600px;
    isolation:isolate;
}

.showcase-light{
    position:absolute;
    inset:-80px -100px -90px -130px;
    z-index:-3;
    background:
        radial-gradient(circle at 42% 48%,rgba(255,255,255,.95) 0 16%,rgba(237,225,255,.72) 30%,rgba(190,143,255,.26) 48%,transparent 69%);
    filter:blur(7px);
}

.showcase-grid{
    position:absolute;
    inset:5% -4% 8% 5%;
    z-index:-2;
    border-radius:44px;
    opacity:.43;
    background-image:
        linear-gradient(rgba(124,58,237,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(124,58,237,.055) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
}

.showcase-stage{
    position:relative;
    height:480px;
    margin-top:12px;
    transform-style:preserve-3d;
}

.showcase-stage::after{
    content:"";
    position:absolute;
    left:15%;
    right:2%;
    bottom:5px;
    height:50px;
    z-index:-1;
    border-radius:50%;
    background:rgba(73,35,131,.16);
    filter:blur(25px);
    transform:rotateX(75deg);
}

.showcase-slide{
    position:absolute;
    top:18px;
    left:50%;
    width:min(650px,88%);
    opacity:0;
    pointer-events:none;
    transform-style:preserve-3d;
    transform-origin:center center;
    transition:
        transform .9s cubic-bezier(.2,.82,.2,1),
        opacity .7s ease,
        filter .7s ease;
}

.showcase-slide.is-active{
    z-index:4;
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateZ(80px) rotateY(-1deg) scale(1);
    filter:none;
}

.showcase-slide.is-prev{
    z-index:2;
    opacity:.52;
    transform:translateX(-78%) translateY(24px) translateZ(-150px) rotateY(12deg) scale(.80);
    filter:blur(.3px) saturate(.78);
}

.showcase-slide.is-next{
    z-index:3;
    opacity:.68;
    transform:translateX(-18%) translateY(20px) translateZ(-105px) rotateY(-13deg) scale(.84);
    filter:blur(.25px) saturate(.86);
}

.showcase-slide.is-far{
    z-index:1;
    opacity:0;
    transform:translateX(-50%) translateY(35px) translateZ(-260px) scale(.68);
}

.slide-browser{
    overflow:hidden;
    border:1px solid rgba(124,58,237,.16);
    border-radius:28px;
    background:rgba(255,255,255,.97);
    box-shadow:
        0 38px 88px rgba(63,32,115,.19),
        0 14px 32px rgba(124,58,237,.09),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter:blur(18px);
}

.slide-browser-top{
    height:43px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #f0ebf6;
    background:linear-gradient(180deg,#fff,#fbf9fe);
    color:#8b8495;
    font-size:.58rem;
    font-weight:700;
}

.browser-dots{display:flex;gap:5px}
.browser-dots i{width:7px;height:7px;border-radius:50%;background:#ddd6e7}
.browser-dots i:first-child{background:#cdbaf2}
.browser-dots i:nth-child(2){background:#ded0f7}
.browser-dots i:nth-child(3){background:#eee8f8}

.slide-screen{
    position:relative;
    height:320px;
    background:#fbfaff;
}

.dashboard-screen{
    display:grid;
    grid-template-columns:120px 1fr;
}

.slide-sidebar{
    padding:17px 13px;
    border-right:1px solid #eee8f5;
    background:linear-gradient(180deg,#fff,#faf8fd);
}

.slide-mini-logo{
    margin-bottom:17px;
    color:#1d1b24;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:3px;
}
.slide-mini-logo span{
    width:9px;height:9px;display:inline-block;margin:0 2px;border-radius:50%;
    background:linear-gradient(135deg,#a855f7,#6d28d9);
}

.slide-sidebar b{
    margin-bottom:6px;
    padding:8px 8px;
    display:flex;
    align-items:center;
    gap:7px;
    border-radius:10px;
    color:#777080;
    font-size:.49rem;
    font-weight:700;
}
.slide-sidebar b svg{width:11px;height:11px}
.slide-sidebar b.active{color:#6d28d9;background:#f0e8ff}

.slide-main{padding:18px}
.slide-welcome{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.slide-welcome small,.slide-welcome strong{display:block}
.slide-welcome small{color:#9b94a2;font-size:.47rem;font-weight:800;letter-spacing:.08em}
.slide-welcome strong{margin-top:4px;font-size:.82rem}
.slide-welcome>span{padding:6px 8px;border-radius:999px;background:#fff5e9;color:#d05d12;font-size:.48rem;font-weight:800}

.slide-stat-row{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slide-stat-row>div{
    min-width:0;
    padding:11px;
    border:1px solid #eee8f4;
    border-radius:14px;
    background:#fff;
}
.slide-stat-row small,.slide-stat-row strong{display:block}
.slide-stat-row small{color:#9992a1;font-size:.45rem;font-weight:700}
.slide-stat-row strong{margin:5px 0 8px;font-size:.72rem}
.slide-stat-row>div>i{display:block;height:5px;border-radius:99px;background:linear-gradient(90deg,#a855f7,#6d28d9)}

.slide-content-row{margin-top:9px;display:grid;grid-template-columns:1.6fr .85fr;gap:8px}
.slide-chart-card,.slide-ai-card{
    min-width:0;
    height:128px;
    padding:12px;
    border:1px solid #eee8f4;
    border-radius:15px;
    background:#fff;
}
.slide-chart-card>small{color:#968ea0;font-size:.43rem;font-weight:800;letter-spacing:.08em}
.slide-chart-card svg{width:100%;height:90px;margin-top:5px}
.slide-area{fill:url(#heroArea)}
.slide-line{fill:none;stroke:#7c3aed;stroke-width:4;stroke-linecap:round}
.slide-ai-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.slide-ai-card>span{
    width:29px;height:29px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;
    border-radius:9px;color:#7c3aed;background:#f4edff;
}
.slide-ai-card svg{width:13px}
.slide-ai-card small{color:#7c3aed;font-size:.43rem;font-weight:800}
.slide-ai-card strong{margin:4px 0;color:#312c38;font-size:.58rem}
.slide-ai-card p{color:#918a99;font-size:.48rem;line-height:1.45}

.slide-caption{
    width:80%;
    margin:-16px auto 0;
    padding:14px 18px 13px;
    position:relative;
    z-index:5;
    border:1px solid rgba(124,58,237,.12);
    border-radius:17px;
    background:rgba(255,255,255,.95);
    box-shadow:0 18px 42px rgba(64,33,120,.12);
    backdrop-filter:blur(16px);
}
.slide-caption span{color:#7c3aed;font-size:.44rem;font-weight:800;letter-spacing:.11em}
.slide-caption h3{margin:4px 0 3px;font-size:.72rem}
.slide-caption p{color:#898391;font-size:.49rem;line-height:1.45}

/* DENEME */
.exam-screen{padding:19px 21px;background:linear-gradient(145deg,#fff,#faf7ff)}
.exam-header{display:flex;align-items:flex-start;justify-content:space-between}
.exam-header small,.exam-header strong{display:block}
.exam-header small{color:#978fa0;font-size:.45rem;font-weight:800}
.exam-header strong{margin-top:4px;font-size:.8rem}
.exam-header>span{padding:6px 8px;border-radius:999px;background:#eaf8f1;color:#16855f;font-size:.48rem;font-weight:800}
.exam-score-grid{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.exam-score-grid>div{padding:10px;border:1px solid #eee8f5;border-radius:13px;background:#fff}
.exam-score-grid small,.exam-score-grid strong{display:block}
.exam-score-grid small{color:#938c9b;font-size:.43rem}.exam-score-grid strong{margin:4px 0 7px;font-size:.72rem}
.exam-score-grid i{display:block;height:4px;border-radius:99px;background:linear-gradient(90deg,#b46cf5,#6d28d9)}
.exam-chart-wrap{margin-top:9px;padding:11px 13px;border:1px solid #eee8f5;border-radius:14px;background:#fff}
.exam-chart-head{display:flex;justify-content:space-between;color:#88818f;font-size:.45rem}.exam-chart-head strong{color:#2f2b35}
.exam-bars{height:67px;margin-top:8px;display:flex;align-items:flex-end;gap:9px}
.exam-bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#c084fc,#7c3aed)}
.exam-insight{margin-top:9px;padding:9px 11px;display:flex;align-items:center;gap:8px;border-radius:12px;background:#f2ebff;color:#6c6276}
.exam-insight>span{width:25px;height:25px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;background:#fff;color:#7c3aed}.exam-insight svg{width:12px}.exam-insight p{font-size:.45rem;line-height:1.45}

/* PLAN */
.plan-screen{padding:19px 21px;background:linear-gradient(145deg,#fff,#faf8ff)}
.plan-heading{display:flex;justify-content:space-between;align-items:flex-start}
.plan-heading small,.plan-heading strong{display:block}.plan-heading small{color:#958e9d;font-size:.45rem;font-weight:800}.plan-heading strong{margin-top:4px;font-size:.82rem}.plan-heading>span{color:#6d28d9;font-size:.47rem;font-weight:800}
.plan-list{margin-top:13px;display:grid;gap:7px}
.plan-list>div{padding:9px 10px;display:grid;grid-template-columns:28px 1fr 42px;align-items:center;gap:8px;border:1px solid #eee8f5;border-radius:13px;background:#fff}
.plan-list>div>span{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#f5f1f9;color:#98909e}.plan-list svg{width:12px}
.plan-list strong,.plan-list small{display:block}.plan-list strong{font-size:.56rem}.plan-list small{margin-top:3px;color:#96909d;font-size:.43rem}.plan-list b{color:#8f8797;font-size:.45rem;text-align:right}
.plan-list .done>span{color:#16855f;background:#eaf8f1}.plan-list .current{border-color:#d8c5fa;background:#fbf8ff}.plan-list .current>span{color:#fff;background:#7c3aed}
.plan-progress{margin-top:9px;padding:10px 12px;border-radius:13px;background:#f2ebff}
.plan-progress>div{display:flex;justify-content:space-between;color:#6a6173;font-size:.46rem}.plan-progress>div strong{color:#6d28d9}
.plan-progress>b{display:block;height:5px;margin-top:7px;border-radius:99px;background:#e4d8f5;overflow:hidden}.plan-progress>b i{display:block;width:67%;height:100%;background:linear-gradient(90deg,#a855f7,#6d28d9)}

/* NOTES */
.notes-screen{padding:16px 18px;display:grid;grid-template-columns:1fr 120px;grid-template-rows:auto 1fr;gap:9px;background:linear-gradient(145deg,#fff,#faf8ff)}
.notes-tabs{grid-column:1/-1;display:flex;gap:6px}.notes-tabs span{padding:6px 9px;border-radius:999px;color:#8e8794;background:#f2eef6;font-size:.44rem;font-weight:700}.notes-tabs span.active{color:#fff;background:#7c3aed}
.notes-page{padding:14px;border:1px solid #eee8f5;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(66,36,105,.05)}
.notes-page-head{display:flex;align-items:flex-start;justify-content:space-between}.notes-page-head small,.notes-page-head strong{display:block}.notes-page-head small{color:#9b94a1;font-size:.42rem}.notes-page-head strong{margin-top:4px;font-size:.64rem}.notes-page-head>span{width:27px;height:27px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:#7c3aed;background:#f3ecff}.notes-page-head svg{width:12px}
.notes-page p{margin-top:13px;color:#6f6976;font-size:.5rem;line-height:1.65}.notes-page mark{padding:1px 3px;border-radius:3px;background:#ead9ff;color:#3f2b5a}
.notes-formula{margin-top:12px;padding:9px;border-left:3px solid #7c3aed;border-radius:8px;background:#f8f4ff;color:#5d4a73;font-size:.5rem;font-weight:700}
.notes-footer-line{margin-top:13px;padding-top:9px;border-top:1px solid #f0ebf4;display:flex;justify-content:space-between;color:#9a94a0;font-size:.39rem}.notes-footer-line strong{color:#16855f}
.notes-index{padding:12px;border:1px solid #eee8f5;border-radius:15px;background:#fff}.notes-index>small{color:#7c3aed;font-size:.42rem;font-weight:800;letter-spacing:.08em}.notes-index span{margin-top:9px;padding:7px 6px;display:block;border-radius:9px;color:#8d8694;font-size:.43rem}.notes-index span b{margin-right:5px;color:#b0a9b6}.notes-index span.active{color:#5b416f;background:#f3edff}

/* CONTROLS */
.showcase-controls{
    position:absolute;
    right:7%;
    bottom:0;
    left:7%;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
}

.showcase-controls button{
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(124,58,237,.15);
    border-radius:13px;
    color:#6d28d9;
    background:rgba(255,255,255,.92);
    box-shadow:0 10px 26px rgba(63,32,115,.09);
    cursor:pointer;
    transition:.25s ease;
}
.showcase-controls button:hover{transform:translateY(-2px);background:#7c3aed;color:#fff}
.showcase-controls button svg{width:16px}

.showcase-progress{
    min-width:180px;
    display:grid;
    grid-template-columns:24px 1fr 24px;
    align-items:center;
    gap:8px;
    color:#6f6878;
    font-size:.55rem;
    font-weight:800;
}
.showcase-progress>b{height:3px;border-radius:999px;background:#e3d8f3;overflow:hidden}
.showcase-progress>b i{display:block;width:0;height:100%;background:linear-gradient(90deg,#a855f7,#6d28d9)}

@keyframes showcaseAutoProgress{
    from{width:0}
    to{width:100%}
}

/* SOL YAZIDAN SAĞ GÖRSELE DOĞRU MOR GEÇİŞ */
.hero::after{
    content:"";
    position:absolute;
    top:80px;
    right:0;
    bottom:0;
    width:61%;
    pointer-events:none;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(124,58,237,.015) 18%,
            rgba(124,58,237,.055) 45%,
            rgba(168,85,247,.12) 72%,
            rgba(168,85,247,.18) 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 84%,transparent 100%);
}

.hero-container{position:relative;z-index:2}

@media(max-width:1100px){
    .hero-container{grid-template-columns:1fr}
    .hero-showcase{width:min(760px,100%);margin:15px auto 0}
    .showcase-stage{height:470px}
    .hero::after{width:100%;top:48%;background:linear-gradient(180deg,transparent,rgba(124,58,237,.08))}
}

@media(max-width:760px){
    .hero-showcase{min-height:500px}
    .showcase-stage{height:430px}
    .showcase-slide{width:94%}
    .showcase-slide.is-prev,.showcase-slide.is-next{opacity:.20}
    .slide-screen{height:290px}
    .slide-caption{width:88%}
    .showcase-controls{bottom:-5px}
}

@media(max-width:520px){
    .hero-showcase{min-height:455px}
    .showcase-stage{height:390px}
    .showcase-slide{top:10px;width:98%}
    .showcase-slide.is-active{transform:translateX(-50%) scale(.94)}
    .showcase-slide.is-prev,.showcase-slide.is-next{opacity:0}
    .slide-screen{height:260px}
    .dashboard-screen{grid-template-columns:82px 1fr}
    .slide-sidebar{padding:12px 8px}.slide-sidebar b{padding:6px 5px;font-size:.39rem}
    .slide-main{padding:12px}
    .slide-stat-row{gap:5px}.slide-stat-row>div{padding:8px}
    .slide-content-row{grid-template-columns:1fr}.slide-ai-card{display:none}
    .exam-score-grid{grid-template-columns:repeat(2,1fr)}
    .notes-screen{grid-template-columns:1fr}.notes-index{display:none}
    .showcase-progress{min-width:130px}
}

/* =========================================================
   HERO SHOWCASE V2
   TEK BÜYÜK GÖRSEL + PÜRÜZSÜZ RENK GEÇİŞİ
========================================================= */

.hero{
    position:relative;
    background:
        radial-gradient(
            ellipse at 88% 45%,
            rgba(170,105,245,.14) 0%,
            rgba(156,96,235,.09) 24%,
            rgba(142,79,226,.045) 43%,
            rgba(124,58,237,.018) 57%,
            transparent 72%
        ),
        radial-gradient(
            ellipse at 8% 86%,
            rgba(124,58,237,.055) 0%,
            rgba(124,58,237,.02) 38%,
            transparent 64%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fdfcff 28%,
            #faf8ff 65%,
            #f8f6ff 100%
        );
}

.hero::after{
    content:"";
    position:absolute;
    inset:80px 0 0 36%;
    width:auto;
    height:auto;
    pointer-events:none;
    background:
        radial-gradient(
            ellipse at 68% 44%,
            rgba(174,112,247,.12) 0%,
            rgba(160,91,239,.075) 26%,
            rgba(143,76,229,.035) 46%,
            rgba(124,58,237,.012) 60%,
            transparent 76%
        );
    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.18) 12%,
            rgba(0,0,0,.6) 30%,
            #000 55%,
            #000 100%
        );
}

.hero-container{
    grid-template-columns:.86fr 1.14fr;
    gap:34px;
    position:relative;
    z-index:2;
}

.hero-media-slider{
    position:relative;
    width:100%;
    min-height:570px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hero-media-glow{
    position:absolute;
    inset:2% -12% 1% -18%;
    z-index:-2;
    border-radius:50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(180,124,249,.19) 0%,
            rgba(160,93,240,.105) 28%,
            rgba(137,72,226,.048) 47%,
            rgba(124,58,237,.016) 61%,
            transparent 76%
        );
    filter:blur(25px);
}

.hero-media-frame{
    position:relative;
    width:100%;
    aspect-ratio:1.48 / 1;
    max-height:500px;
    overflow:hidden;
    border:1px solid rgba(124,58,237,.13);
    border-radius:32px;
    background:rgba(255,255,255,.86);
    box-shadow:
        0 42px 90px rgba(71,40,121,.15),
        0 14px 38px rgba(124,58,237,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter:blur(20px);
    isolation:isolate;
}

.hero-media-frame::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
    border-radius:inherit;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.54),
        inset 0 -70px 110px rgba(34,17,60,.045);
}

.hero-media-slides{
    position:absolute;
    inset:0;
}

.hero-media-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transform:scale(1.035);
    transition:
        opacity 1.15s cubic-bezier(.22,1,.36,1),
        transform 1.55s cubic-bezier(.22,1,.36,1),
        visibility 1.15s;
}

.hero-media-slide.is-active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
    z-index:2;
}

.hero-media-slide img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.hero-media-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.hero-media-placeholder::before,
.hero-media-placeholder::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(5px);
}

.hero-media-placeholder::before{
    width:58%;
    aspect-ratio:1;
    right:-14%;
    top:-24%;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.20);
}

.hero-media-placeholder::after{
    width:45%;
    aspect-ratio:1;
    left:-15%;
    bottom:-30%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
}

.placeholder-one{
    background:
        radial-gradient(circle at 72% 25%,rgba(255,255,255,.25),transparent 30%),
        linear-gradient(135deg,#ede5ff 0%,#b993ff 46%,#7c3aed 100%);
}

.placeholder-two{
    background:
        radial-gradient(circle at 20% 20%,rgba(255,255,255,.24),transparent 27%),
        linear-gradient(135deg,#fbf8ff 0%,#cdb5f8 42%,#8a55df 100%);
}

.placeholder-three{
    background:
        radial-gradient(circle at 76% 74%,rgba(255,255,255,.22),transparent 29%),
        linear-gradient(135deg,#e9e0fb 0%,#a777ef 48%,#6322c3 100%);
}

.placeholder-four{
    background:
        radial-gradient(circle at 28% 70%,rgba(255,255,255,.26),transparent 30%),
        linear-gradient(135deg,#f8f4ff 0%,#d5c2f4 42%,#9562df 100%);
}

.placeholder-mark{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:3rem;
    font-weight:800;
    letter-spacing:.22em;
    text-shadow:0 12px 32px rgba(54,23,103,.18);
}

.placeholder-mark i{
    width:58px;
    height:58px;
    margin-left:-3px;
    border-radius:50%;
    background:
        radial-gradient(circle at 30% 28%,#fff,rgba(255,255,255,.62) 32%,rgba(255,255,255,.12) 70%);
    box-shadow:
        0 16px 36px rgba(45,13,94,.18),
        inset 0 0 0 1px rgba(255,255,255,.32);
}

.placeholder-copy{
    position:absolute;
    right:34px;
    bottom:34px;
    z-index:2;
    max-width:290px;
    text-align:right;
    color:#fff;
}

.placeholder-copy small,
.placeholder-copy strong{
    display:block;
}

.placeholder-copy small{
    margin-bottom:7px;
    font-size:.65rem;
    font-weight:800;
    letter-spacing:.13em;
    opacity:.76;
}

.placeholder-copy strong{
    font-size:1rem;
    line-height:1.45;
}

.hero-media-topbar{
    position:absolute;
    top:20px;
    right:22px;
    left:22px;
    z-index:8;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.hero-media-label{
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    color:#fff;
    background:rgba(28,14,51,.16);
    backdrop-filter:blur(14px);
    font-size:.59rem;
    font-weight:800;
    letter-spacing:.13em;
}

.hero-media-counter{
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    color:#fff;
    background:rgba(28,14,51,.16);
    backdrop-filter:blur(14px);
    font-size:.55rem;
    font-weight:800;
}

.hero-media-counter i{
    width:18px;
    height:1px;
    background:rgba(255,255,255,.5);
}

.hero-media-overlay{
    position:absolute;
    right:22px;
    bottom:22px;
    left:22px;
    z-index:7;
    padding:17px 18px;
    display:grid;
    grid-template-columns:42px 1fr;
    align-items:center;
    gap:12px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            rgba(26,13,47,.44),
            rgba(46,21,83,.25)
        );
    box-shadow:0 18px 40px rgba(34,15,63,.12);
    backdrop-filter:blur(18px);
}

.hero-media-overlay>span{
    font-size:.69rem;
    font-weight:800;
    opacity:.74;
}

.hero-media-overlay small,
.hero-media-overlay strong{
    display:block;
}

.hero-media-overlay small{
    margin-bottom:4px;
    font-size:.55rem;
    font-weight:800;
    letter-spacing:.10em;
    opacity:.75;
}

.hero-media-overlay strong{
    font-size:.86rem;
}

.hero-media-nav{
    position:absolute;
    top:50%;
    z-index:10;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.25);
    border-radius:15px;
    color:#fff;
    background:rgba(29,14,53,.17);
    box-shadow:0 12px 30px rgba(42,17,78,.10);
    backdrop-filter:blur(15px);
    cursor:pointer;
    transform:translateY(-50%);
    transition:
        transform .25s ease,
        background .25s ease;
}

.hero-media-nav:hover{
    background:rgba(84,39,151,.55);
}

.hero-media-prev{
    left:20px;
}

.hero-media-next{
    right:20px;
}

.hero-media-nav svg{
    width:18px;
    height:18px;
}

.hero-media-bottom{
    width:88%;
    margin:20px auto 0;
    display:flex;
    align-items:center;
    gap:14px;
}

.hero-media-progress{
    height:3px;
    flex:1;
    overflow:hidden;
    border-radius:999px;
    background:rgba(124,58,237,.11);
}

.hero-media-progress i{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#c084fc,#7c3aed);
}

.hero-media-bottom>span{
    color:#7f7789;
    font-size:.61rem;
    font-weight:700;
    white-space:nowrap;
}

@keyframes heroMediaProgress{
    from{width:0}
    to{width:100%}
}

@media(max-width:1100px){
    .hero-container{
        grid-template-columns:1fr;
    }

    .hero-media-slider{
        width:min(820px,100%);
        min-height:auto;
        margin:22px auto 0;
    }

    .hero-media-frame{
        aspect-ratio:1.55 / 1;
    }

    .hero::after{
        inset:45% 0 0 0;
        background:
            radial-gradient(
                ellipse at 50% 45%,
                rgba(164,101,242,.11),
                rgba(124,58,237,.025) 48%,
                transparent 72%
            );
        mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 100%);
    }
}

@media(max-width:700px){
    .hero-media-frame{
        aspect-ratio:1.22 / 1;
        border-radius:25px;
    }

    .placeholder-mark{
        font-size:2rem;
    }

    .placeholder-mark i{
        width:42px;
        height:42px;
    }

    .placeholder-copy{
        right:22px;
        bottom:90px;
    }

    .hero-media-overlay{
        right:14px;
        bottom:14px;
        left:14px;
    }
}

@media(max-width:460px){
    .hero-media-frame{
        aspect-ratio:1 / 1.02;
    }

    .hero-media-topbar{
        top:13px;
        right:13px;
        left:13px;
    }

    .hero-media-nav{
        width:39px;
        height:39px;
        border-radius:12px;
    }

    .hero-media-prev{left:12px}
    .hero-media-next{right:12px}

    .placeholder-copy{
        display:none;
    }

    .hero-media-overlay{
        grid-template-columns:31px 1fr;
        padding:13px;
    }

    .hero-media-overlay strong{
        font-size:.72rem;
    }
}

/* =========================================================
   HERO SHOWCASE V3
   TEK ANA GÖRSEL + 3D DERİNLİK / GHOST SLIDES
========================================================= */

.hero-media-slider{
    perspective:1800px;
}

.hero-media-frame{
    overflow:visible;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
    isolation:visible;
}

.hero-media-frame::before{
    display:none;
}

.hero-media-slides{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    perspective:1800px;
}

.hero-media-slide{
    top:0;
    right:0;
    bottom:0;
    left:0;
    opacity:0;
    visibility:visible;
    pointer-events:none;
    transform-style:preserve-3d;
    transform-origin:center center;
    transition:
        transform 1.05s cubic-bezier(.18,.84,.22,1),
        opacity .82s ease,
        filter .82s ease;
    will-change:transform,opacity,filter;
}

.hero-media-slide .hero-media-placeholder,
.hero-media-slide img{
    border-radius:32px;
    overflow:hidden;
    border:1px solid rgba(124,58,237,.13);
    box-shadow:
        0 40px 88px rgba(71,40,121,.16),
        0 15px 38px rgba(124,58,237,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.hero-media-slide::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    border-radius:32px;
    pointer-events:none;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.46),
        inset 0 -70px 110px rgba(34,17,60,.045);
}

.hero-media-slide.is-active{
    z-index:5;
    opacity:1;
    pointer-events:auto;

    transform:translate3d(0,0,0) scale(1);

    filter:none !important;
    animation:none !important;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.hero-media-slide.is-prev{
    z-index:2;
    opacity:.12;
    transform:
        translate3d(-5.5%,12px,-120px)
        rotateY(5deg)
        scale(.94);
    filter:
        saturate(.88)
        brightness(.98);
}

.hero-media-slide.is-next{
    z-index:3;
    opacity:.16;
    transform:
        translate3d(5.5%,10px,-95px)
        rotateY(-5deg)
        scale(.95);
    filter:
        saturate(.90)
        brightness(.99);
}

.hero-media-slide.is-far{
    z-index:1;
    opacity:0;
    transform:
        translate3d(0,26px,-300px)
        scale(.78);
    filter:blur(1px);
}

.hero-media-slide.is-prev .hero-media-overlay,
.hero-media-slide.is-next .hero-media-overlay,
.hero-media-slide.is-prev .hero-media-topbar,
.hero-media-slide.is-next .hero-media-topbar{
    opacity:0;
}

.hero-media-slide.is-active.direction-forward,
.hero-media-slide.is-active.direction-backward{
    animation:none !important;
}

.hero-media-glow{
    inset:-8% -14% -12% -18%;
    background:
        radial-gradient(
            ellipse at 57% 47%,
            rgba(188,135,252,.18) 0%,
            rgba(165,102,241,.095) 29%,
            rgba(143,78,229,.045) 49%,
            rgba(124,58,237,.014) 63%,
            transparent 78%
        );
    filter:blur(32px);
}

.hero-media-frame::after{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    bottom:-36px;
    height:80px;
    z-index:-2;
    border-radius:50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(63,28,112,.18),
            rgba(124,58,237,.08) 38%,
            transparent 72%
        );
    filter:blur(22px);
    transform:rotateX(74deg);
}

.hero-media-topbar{
    z-index:12;
}

.hero-media-nav{
    z-index:14;
}

.hero-media-overlay{
    z-index:12;
}

.hero-media-bottom{
    position:relative;
    z-index:15;
    margin-top:26px;
}

@media(max-width:1100px){
    .hero-media-slide.is-prev{
        opacity:.08;
        transform:
            translate3d(-3.5%,10px,-95px)
            rotateY(4deg)
            scale(.96);
    }

    .hero-media-slide.is-next{
        opacity:.10;
        transform:
            translate3d(3.5%,9px,-80px)
            rotateY(-4deg)
            scale(.965);
    }
}

@media(max-width:700px){
    .hero-media-frame{
        overflow:hidden;
    }

    .hero-media-slide.is-prev,
    .hero-media-slide.is-next{
        opacity:.12;
        transform:
            translate3d(0,10px,-90px)
            scale(.96);
    }

    .hero-media-slide .hero-media-placeholder,
    .hero-media-slide img,
    .hero-media-slide::after{
        border-radius:25px;
    }
}

@media(max-width:460px){
    .hero-media-slide.is-prev,
    .hero-media-slide.is-next{
        opacity:0;
    }

    .hero-media-slide.is-active{
        transform:
            translate3d(0,0,20px)
            scale(1);
    }
}

@media(prefers-reduced-motion:reduce){
    .hero-media-slide.is-active.direction-forward,
    .hero-media-slide.is-active.direction-backward{
        animation:none;
    }
}