.hero{
    position:relative;
    overflow:hidden;

    min-height:70vh;

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

    background:#121212;
}


.hero-brand{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:70px;
}

.hero-logo{
    width:240px;
    height:auto;
    opacity:.95;
    flex-shrink:0;
}

.hero-text{
    max-width:620px;
}


.hero-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    transform:scale(1.05);

    opacity:.35;
}

.hero-overlay{
    position:absolute;
    inset:0;


}

.hero-inner{
    position:relative;
    z-index:5;

    width:100%;
    padding:0 40px;
}

.hero-content{
    max-width:1200px;
    width:100%;
}

.hero-tag{
    display:inline-block;
    padding:10px 1px;
    border:0px solid rgba(255, 255, 255, 0.438);
    border-radius:0px;

    font-size:17px;
    letter-spacing:1px;

    margin-bottom:26px;

    opacity:.80;

    background:rgba(255, 255, 255, 0);
}

.hero h1{
    font-size:67px;
    line-height:.95;
    margin-bottom:28px;
    font-weight:800;
    letter-spacing:0px;
    
}

.hero p{
    font-size:20px;
    line-height:1.7;
    opacity:.75;
    max-width:650px;
    letter-spacing:1x;
    
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-top:40px;
}

.btn-primary{
    padding:18px 34px;
    border-radius:14px;
    background:#c79b6a;
    color:#111;
    font-weight:600;
}

.btn-secondary{
    padding:18px 34px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.1);
}


/* =========================
   HERO FLOATING WORDS
========================= */

/* =========================
   FLOATING WORDS SYSTEM
========================= */

/* =========================
   HERO WORDS (JS UYUMLU)
========================= */

.bg-words{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    color:rgb(255, 255, 255);
    z-index:1;
}

/* artık top/left yok */
.bg-words span{
    position:absolute;

    font-size:clamp(18px,2vw,42px);
    font-weight:700;
    letter-spacing:4px;

    white-space:nowrap;

    color:rgb(206, 206, 206);

    transform: translate(-50%, -50%) scale(.4);

    animation: wordFly 25s linear forwards;
    

    will-change: transform, opacity;
}

@keyframes wordFly{
    0%{
        opacity:0;
        transform: translate(-50%, -50%) scale(.3);
    }

    48%{
        opacity:.15;
    }

    60%{
        opacity:.06;
    }

    100%{
        opacity:0;
        transform:
            translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
            scale(1.4);
    }
}



.hero-text-blur{
    position:absolute;

    left:50%;
    top:50%;

    width:700px;
    height:300px;

    transform:translate(-50%, -50%);

    z-index:4;

    pointer-events:none;

    backdrop-filter:blur(60px);
    -webkit-backdrop-filter:blur(60px);




    mask-image:
      radial-gradient(circle,
      rgba(0,0,0,1) 0%,
      rgba(0, 0, 0, 0) 60%,
      transparent 100%);
}


.hero-color-layer{
    position:absolute;
    inset:0;
    z-index:1;

    background:
        radial-gradient(circle at 50% 50%,
            rgba(199,155,106,.35),
            transparent 60%),

        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.08),
            transparent 55%),

        linear-gradient(180deg,#000000 0%, #000000 100%);

    mix-blend-mode:screen;
    opacity:.9;

    filter: blur(40px);
    transform: scale(1.1);

    transition:
        background 1.5s ease,
        opacity 1s ease;

    will-change: background, opacity, filter;
}


.hero-accent{
    color:#c79b6a;

    transition:
        color 1.5s ease,
        text-shadow 1.5s ease;
}

/* =====================================================
   HERO RESPONSIVE
===================================================== */
/* =====================================================
   HERO RESPONSIVE (YENİDEN DÜZENLENMİŞ & OPTİMİZE)
===================================================== */

/* --- TABLET VE KÜÇÜK EKRANLAR (991px ve Altı) --- */
@media (max-width: 991px) {

    .hero {
        min-height: auto;
        padding: 100px 0 60px;
    }

    .hero-inner {
        padding: 0 24px;
    }

    .hero-brand {
        flex-direction: column; /* Yan yana olan logo ve metni alt alta alır */
        text-align: center;
        gap: 32px;
    }

    .hero-logo {
        width: 180px;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero h1 {
        font-size: 48px;
        line-height: 1.05;
        margin-bottom: 20px;
    }

    .hero p {
        font-size: 17px;
        line-height: 1.6;
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 32px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 16px 28px;
    }

    .hero-text-blur {
        width: 100%;
        max-width: 500px;
        height: 250px;
    }
}

/* --- TELEFON EKRANLARI (576px ve Altı) --- */
@media (max-width: 576px) {

    .hero {
        min-height: 70svh;
        padding: 80px 0 40px;
    }

    .hero-inner {
        padding: 0 16px;
    }

    .hero-brand {
        gap: 20px;
    }

    .hero-logo {
        width: 140px;
        max-width: 40vw;
    }

    .hero-tag {
        font-size: 13px;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

    .hero h1 {
        font-size: 34px;
        line-height: 1.1;
        margin-bottom: 14px;
    }

    .hero p {
        font-size: 15px;
        line-height: 1.5;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column; /* Butonlar mobilde alt alta geçer, tıklamayı kolaylaştırır */
        align-items: center;
        gap: 10px;
        margin-top: 24px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 280px; /* Butonların aşırı yayılmasını önler */
        text-align: center;
        padding: 14px 20px;
        font-size: 14px;
        white-space: nowrap;
    }

    .hero-bg {
        transform: scale(1);
    }

    .hero-color-layer {
        filter: blur(25px);
        transform: scale(1);
    }

    .hero-text-blur {
        width: 90%;
        height: 180px;
    }

    .bg-words span {
        font-size: 12px;
        letter-spacing: 1.5px;
    }
}

/* --- ÇOK KÜÇÜK TELEFONLAR (390px ve Altı) --- */
@media (max-width: 390px) {

    .hero-inner {
        padding: 0 12px;
    }

    .hero-logo {
        width: 120px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero p {
        font-size: 13.5px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 12px 16px;
        font-size: 13px;
    }
}