/* ==========================================
   ALPHA ALERT
   style.css
   Bölüm 1
========================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ======================
   ROOT
====================== */

:root{

    --bg:#09090F;
    --bg2:#10111B;
    --card:#171824;

    --primary:#7C3AED;
    --primary2:#A855F7;

    --text:#FFFFFF;
    --text2:#B9BCCB;

    --border:rgba(255,255,255,.07);

    --shadow:
        0 20px 60px rgba(124,58,237,.18);

    --radius:22px;

}

/* ======================
 RESET
====================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

}

/* ======================
 SCROLLBAR
====================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    var(--primary),
    var(--primary2));

    border-radius:50px;

}

/* ======================
 SELECTION
====================== */

::selection{

    background:var(--primary);

    color:white;

}

/* ======================
 LINKS
====================== */

a{

    color:inherit;

    text-decoration:none;

}

/* ======================
 IMG
====================== */

img{

    max-width:100%;

    display:block;

}

/* ======================
 GLOW
====================== */

.glow{

    position:fixed;

    width:500px;

    height:500px;

    border-radius:50%;

    background:var(--primary);

    filter:blur(180px);

    opacity:.12;

    z-index:-1;

}

.glow.one{

    left:-220px;

    top:-220px;

}

.glow.two{

    right:-220px;

    bottom:-220px;

}

/* ======================
 NAVBAR
====================== */

nav{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    padding:0 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(9,9,15,.75);

    backdrop-filter:blur(20px);

    border-bottom:1px solid var(--border);

    z-index:999;

    transition:.35s;

}

.logo{

    font-size:28px;

    font-weight:800;

    color:var(--primary2);

    letter-spacing:1px;

}

.nav-links{

    display:flex;

    list-style:none;

    gap:40px;

}

.nav-links a{

    color:#D7D7D7;

    font-weight:500;

    transition:.3s;

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-7px;

    width:0;

    height:2px;

    background:var(--primary2);

    transition:.35s;

}

.nav-links a:hover{

    color:white;

}

.nav-links a:hover::after{

    width:100%;

}

/* ======================
 MOBILE MENU BUTTON
====================== */

.menu-btn{

    display:none;

    border:none;

    background:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}

/* ======================
 HERO
====================== */

header{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 20px 60px;

    background:

    radial-gradient(circle at top,
    rgba(124,58,237,.30),
    transparent 40%),

    linear-gradient(
    var(--bg),
    var(--bg2));

}

.hero{

    max-width:900px;

}

.badge{

    display:inline-block;

    margin-bottom:28px;

    padding:10px 22px;

    border-radius:100px;

    background:rgba(124,58,237,.18);

    border:1px solid rgba(124,58,237,.35);

    color:#D8C8FF;

    font-size:14px;

    font-weight:600;

}

.hero h1{

    font-size:72px;

    line-height:1.08;

    font-weight:800;

    margin-bottom:25px;

}

.hero h1 span{

    color:var(--primary2);

}

.hero p{

    color:var(--text2);

    font-size:20px;

    line-height:1.8;

    max-width:720px;

    margin:auto;

}

/* ======================
 BUTTON
====================== */

.btn{

    display:inline-block;

    margin-top:40px;

    padding:18px 34px;

    border-radius:16px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary2));

    color:white;

    font-weight:700;

    transition:.35s;

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

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 45px

    rgba(124,58,237,.45);

}

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

.stats{

    width:90%;

    max-width:1200px;

    margin:auto;

    margin-top:-80px;

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:25px;

}

.stat{

    background:rgba(23,24,36,.85);

    border:1px solid var(--border);

    backdrop-filter:blur(18px);

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.stat:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

}

.stat h2{

    font-size:46px;

    color:var(--primary2);

    margin-bottom:10px;

}

.stat p{

    color:var(--text2);

    font-size:15px;

}

/* ======================
 SEARCH
====================== */

.search{

    width:90%;

    max-width:1200px;

    margin:60px auto;

}

.search input{

    width:100%;

    padding:18px 24px;

    border-radius:18px;

    background:#171824;

    border:1px solid var(--border);

    color:white;

    font-size:16px;

    outline:none;

    transition:.3s;

}

.search input:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 0 4px

    rgba(124,58,237,.18);

}

/* ==========================================
   ALPHA ALERT
   STYLE.CSS
   BÖLÜM 2A
==========================================*/

/* =====================
   CARDS
===================== */

.cards{

    width:90%;

    max-width:1400px;

    margin:70px auto 120px;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:30px;

}

/* =====================
   CARD
===================== */
.card{

    position:relative;

    width:360px;

    min-height:720px;

    background:#171824;

    border:1px solid rgba(255,255,255,.06);

    border-radius:24px;

    padding:30px;

    transition:.35s;

    overflow:hidden;

}
.card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:var(--shadow);

}


/* Glow */

.card::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
    linear-gradient(
    135deg,
    rgba(124,58,237,.20),
    transparent 55%);

    opacity:0;

    transition:.35s;

}

.card:hover::before{

    opacity:1;

}


/* =====================
   STATUS
===================== */

.status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    margin-bottom:24px;

}


/* Yaklaşıyor */

.status.upcoming{

    background:#2563EB22;

    color:#60A5FA;

}


/* Devam Ediyor */

.status.active{

    background:#22C55E22;

    color:#4ADE80;

}


/* Tamamlandı */

.status.finished{

    background:#EF444422;

    color:#F87171;

}


/* =====================
   COMPANY
===================== */

.company{

    font-size:28px;

    font-weight:800;

    margin-bottom:8px;

}


.symbol{

    color:var(--text2);

    font-size:15px;

    margin-bottom:24px;

}


/* =====================
   PRICE
===================== */

.price{

    font-size:42px;

    font-weight:800;

    color:var(--primary2);

    margin-bottom:28px;

}

.card-info{

    margin-top:22px;

}

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.info-row:last-child{

    border-bottom:none;

}

.info-label{

    color:#9CA3AF;

    font-size:14px;

    display:flex;

    align-items:center;

    gap:8px;

}

.info-value{

    color:#fff;

    font-weight:600;

    text-align:right;

    max-width:55%;

}

/* ===========================
   WEBSITE BUTTON
=========================== */

.website{
    position:relative;

    z-index:10;
    margin-top:24px;

    display:flex;

    justify-content:center;

}

.website-btn{
 position:relative;

    z-index:11;
    width:100%;

    height:54px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #7C3AED,
        #A855F7
    );

    color:#fff;

    text-decoration:none;

    font-weight:700;

    font-size:15px;

    transition:.3s;

    cursor:pointer;

}

.website-btn:hover{

    transform:translateY(-2px);

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

}

.website-btn:active{

    transform:scale(.98);

}
/* =====================
   BUTTON
===================== */

.card .btn{

    width:100%;

    text-align:center;

    margin-top:28px;

}


/* =====================
   EMPTY STATE
===================== */

.empty{

    width:100%;

    text-align:center;

    color:#888;

    padding:80px 20px;

    font-size:18px;

}


/* ==========================================
   ALPHA ALERT
   STYLE.CSS
   BÖLÜM 2B
==========================================*/

/* ===========================
   FADE ANIMATION
=========================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:
    opacity .7s ease,
    transform .7s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* ===========================
   CARD ANIMATION
=========================== */

.card{

    animation:cardAppear .7s ease;

}

@keyframes cardAppear{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   HERO ANIMATION
=========================== */

.hero{

    animation:heroAnimation 1s ease;

}

@keyframes heroAnimation{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   NAVBAR SCROLL
=========================== */

nav.scrolled{

    height:72px;

    background:rgba(9,9,15,.95);

    box-shadow:

    0 8px 30px rgba(0,0,0,.35);

}

/* ===========================
   HOVER EFFECT
=========================== */

.card,
.stat,
.info-box,
.btn{

    will-change:transform;

}

/* ===========================
   INPUT PLACEHOLDER
=========================== */

.search input::placeholder{

    color:#777;

}

/* ===========================
   BUTTON ACTIVE
=========================== */

.btn:active{

    transform:scale(.98);

}

/* ===========================
   LINKS
=========================== */

nav a{

    transition:.3s;

}

nav a:hover{

    color:white;

}

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

@media(max-width:1100px){

.stats{

    grid-template-columns:repeat(3,1fr);

}

.cards{

    grid-template-columns:repeat(2,1fr);

}

}

/* ===========================
   TABLET
=========================== */

@media(max-width:900px){

nav{

    padding:0 25px;

}

.menu-btn{

    display:block;

}

.nav-links{

    position:absolute;

    top:82px;

    left:0;

    width:100%;

    background:#10111B;

    flex-direction:column;

    gap:0;

    display:none;

    border-top:1px solid var(--border);

}

.nav-links.active{

    display:flex;

}

.nav-links li{

    width:100%;

}

.nav-links a{

    display:block;

    padding:18px 25px;

}

.hero h1{

    font-size:52px;

}

.hero p{

    font-size:18px;

}

.stats{

    grid-template-columns:1fr;

}



}

/* ===========================
   MOBILE
=========================== */

@media(max-width:600px){

header{

    padding-top:140px;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:16px;

}

.badge{

    font-size:13px;

}

.logo{

    font-size:23px;

}

.card{

    padding:24px;

}

.company{

    font-size:24px;

}

.price{

    font-size:34px;

}

.card-grid{

    grid-template-columns:1fr;

}

.info-box{

    padding:15px;

}

.about h2{

    font-size:32px;

}

.about p{

    font-size:16px;

}

}

/* ===========================
   LARGE SCREEN
=========================== */

@media(min-width:1600px){

.hero{

    max-width:1100px;

}

.hero h1{

    font-size:82px;

}

.cards{

    max-width:1550px;

}

}

/* ===========================
   ACCESSIBILITY
=========================== */

a:focus-visible,
button:focus-visible,
input:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:4px;

}

/* ===========================
   SMOOTH IMAGE
=========================== */

img{

    user-select:none;

    -webkit-user-drag:none;

}

/* ===========================
   LOADING
=========================== */

.loading{

    width:100%;

    text-align:center;

    color:#aaa;

    padding:80px;

    font-size:18px;

}

/* ===========================
   END
=========================== */