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

/* Hero Ana Alan */

.hero{

    position:relative;
    overflow:hidden;

    padding:140px 0 80px;

    min-height:100vh;

    display:flex;
    align-items:center;

}

/* Arka Plan Gradient */

.hero-bg-gradient{

    position:absolute;
    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(109,255,139,.12),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(108,99,255,.10),
            transparent 40%
        );

}

/* Arka Plan Grid */

.hero-grid{

    position:absolute;
    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:60px 60px;

    mask-image:linear-gradient(to bottom, black, transparent);

}

/* Hero Alt Geçiş */

.hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:160px;

    background:

        linear-gradient(
            to bottom,
            rgba(8,10,16,0),
            rgba(8,10,16,.80),
            #080a10
        );

    pointer-events:none;

}

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

/* Sol İçerik */

.hero-content{

    position:relative;
    z-index:3;

}

/* Badge */

.hero-badge{

    display:inline-flex;
    align-items:center;
    gap:.6rem;

    padding:10px 20px;

    border-radius:50px;

    background:rgba(109,255,139,.05);

    color:var(--dy-primary);

    margin-bottom:28px;

    font-weight:600;

    transition:
        background .35s,
        transform .35s,
        box-shadow .35s;

}


.hero-badge:hover{

    transform:translateY(-2px);

    background:rgba(109,255,139,.12);

    box-shadow:0 10px 24px rgba(109,255,139,.15);

}

/* Başlık */

.hero-content h1{

    font-size:clamp(3rem,6vw,5rem);

    line-height:1.05;

    margin-bottom:28px;

}

/* Başlık Vurgusu */

.hero-content h1 span{

    color:var(--dy-primary);

}

/* Açıklama */

.hero-content p{

    font-size:1.15rem;

    max-width:620px;

}

/* Butonlar */

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:45px;

}

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

/* Sağ Görsel Alanı */

.hero-visual{

    position:relative;

}

/* Görsel Kartı */

.hero-image{

    position:relative;

    overflow:hidden;

    border-radius:32px;

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

    box-shadow:0 35px 80px rgba(0,0,0,.45);

}

/* Görsel */

.hero-image img{

    width:100%;

    transition:.8s cubic-bezier(.22,1,.36,1);

}

/* Hover */

.hero-image:hover img{

    transform:scale(1.05);

}

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

/* Teknoloji Bölümü */



/* Hero -> Teknoloji Gradient */

.hero-tech-section::before{

content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to bottom,

            rgba(108,99,255,.04) 0%,

            rgba(108,99,255,.03) 15%,

            rgba(8,10,16,.02) 40%,

            rgba(8,10,16,.65) 75%,

            #080a10 100%

        );

    pointer-events:none;

}

/* Glow */

.hero-tech-section::after{

    content:"";

    position:absolute;

    left:50%;
    top:-170px;

    width:700px;
    height:340px;

    transform:translateX(-50%);

    background:

        radial-gradient(

            circle,

            rgba(109,255,139,.05),

            transparent 70%

        );

    filter:blur(45px);

    pointer-events:none;

}

/* Wrapper */

.hero-tech-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    margin-top:40px;

    z-index:2;

}

/* Kart */

.hero-tech-box{

    text-align:center;

}

/* Başlık */

.hero-tech-title{

    display:block;

    margin-bottom:18px;

    color:rgba(255,255,255,.60);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

/* Teknoloji Kutusu */

.hero-technologies{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    padding:22px 30px;

    overflow:hidden;

    border-radius:24px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.05),

            rgba(255,255,255,.025)

        );

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

    backdrop-filter:blur(18px);

    box-shadow:

        0 25px 60px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.05);

}

/* ==========================================================
   Teknoloji Etiketleri
   ========================================================== */

.hero-technologies span{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

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

    border:1px solid rgba(105,255,141,.15);

    color:#d1d5db;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

    user-select:none;

    transition:
        opacity .7s ease,
        color .7s ease,
        filter .7s ease,
        transform .45s cubic-bezier(.22,1,.36,1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.hero-technologies:has(span:hover) span:not(:hover){

    opacity:.55;

    color:rgba(209,213,219,.45);

    filter:blur(.15px);

    transform:scale(.97);

    transition-delay:.18s;

}

/* Hover edilen etiket */

.hero-technologies span:hover{

    opacity:1;

    color:#69ff8d;

    filter:none;

    transform:translateY(-4px) scale(1.06);

    background:rgba(109,255,139,.14);

    border-color:#69ff8d;

    box-shadow:0 12px 28px rgba(109,255,139,.22);

    transition-delay:0s;

}

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

/* Döndürme */

@keyframes dyRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

#tech-div-box {
    width: 888px;
}




/* ==========================================================
   PORTFOLIO
========================================================== */

.portfolio-card{

    display:flex;
    flex-direction:column;

    height:100%;
    overflow:hidden;

    transition:all .35s ease;

}

.portfolio-card:hover{

    transform:translateY(-8px);

    border-color:rgba(109,255,139,.35);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        0 0 25px rgba(109,255,139,.05);

}

/* İçerik */

.portfolio-info{

    position:relative;

    display:flex;
    flex-direction:column;
    flex:1;

    padding:30px;

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

}

/* Kategori */

.portfolio-category{

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

    align-self:flex-start;

    padding:6px 14px;

    margin-bottom:22px;

    border-radius:999px;

    background:rgba(109,255,139,.05);

    border:1px solid rgba(109,255,139,.18);

    color:#69ff8d;

    font-size:13px;
    font-weight:600;

    letter-spacing:.03em;

}

/* Başlık */

.portfolio-info h3{

    margin-bottom:18px;

}

.portfolio-info h3 a{

    color:#fff;

    transition:.3s;

}

.portfolio-card:hover h3 a{

    color:#69ff8d;

}

/* Açıklama */

.portfolio-info p{

    margin:0;

    color:#98A2B3;

    line-height:1.8;

    font-size:1rem;

}

/* Link */

.portfolio-link{

    display:inline-flex;
    align-items:center;

    gap:10px;

    margin-top:auto;
    padding-top:30px;

    color:#fff;

    font-weight:600;

    transition:all .3s ease;

}

.portfolio-link i{

    transition:transform .3s ease;

}

.portfolio-link:hover{

    color:#69ff8d;

}

.portfolio-link:hover i{

    transform:translateX(6px);

}

.portfolio-image{

    overflow:hidden;

}

.portfolio-image img{

    transition:transform .5s ease;

}

.portfolio-card:hover .portfolio-image img{

    transform:scale(1.05);

}

/* ==========================================================
   Why Dijital Yonca
========================================================== */

/* Kartlar */

.why-row:hover .why-card{

    opacity:.75;

    filter:blur(1px);

    transform:scale(.985);

    transition:
        opacity .35s ease,
        filter .35s ease,
        transform .35s ease;

}

/* Aktif kart */

.why-row:hover .why-card:hover{

    opacity:1;

    filter:blur(0);

    transform:scale(1.02);

    border-color:#69ff8d;

    box-shadow:
        0 18px 45px rgba(0,0,0,.30),
        0 0 25px rgba(109,255,139,.10);

}

/* ===========================
   Mobile Navigation
=========================== */

.mobile-menu-header{
    display:none;
}

@media (max-width:991px){

    body.mobile-nav-active{
        overflow:hidden;
    }

    body.mobile-nav-active::before{

        content:"";

        position:fixed;

        inset:0;

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

        backdrop-filter:blur(4px);

        z-index:998;

    }

    .mobile-nav-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .navmenu{

        position:fixed;

        top:0;

        right:-100%;

        width:320px;

        max-width:88%;

        height:100vh;

        background:#0b0b0b;

        padding:32px;

        overflow-y:auto;

        box-shadow:-20px 0 50px rgba(0,0,0,.35);

        transition:right .35s cubic-bezier(.22,1,.36,1);

        z-index:999;

    }

    body.mobile-nav-active .navmenu{

        right:0;

    }

    .mobile-menu-header{

        display:flex;

        align-items:center;

        justify-content:space-between;

        margin-bottom:35px;

        padding-bottom:20px;

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

    }

    .mobile-menu-logo{

        font-size:32px;

        font-family:"Caveat",cursive;

        color:#fff;

        font-weight:700;

    }

    .mobile-menu-close{

        width:42px;

        height:42px;

        border:none;

        background:#181818;

        color:#fff;

        border-radius:50%;

        cursor:pointer;

        transition:.25s;

    }

    .mobile-menu-close:hover{

        background:#5CF58A;

        color:#000;

    }

    .navmenu ul{

        list-style:none;

        margin:0;

        padding:0;

        display:flex;

        flex-direction:column;

        gap:6px;

    }

    .navmenu li{

        width:100%;

    }

    .navmenu a{

        display:block;

        color:#fff;

        text-decoration:none;

        font-size:18px;

        font-weight:600;

        padding:15px 0;

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

        transition:.25s;

    }

    .navmenu a:hover{

        color:#5CF58A;

        padding-left:12px;

    }

    .navmenu a.active{

        color:#5CF58A;

    }

    .dy-actions{

        display:none;

    }

}