/* =========================
   SEZ İLAÇLAMA V5
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    color:#fff;
    overflow-x:hidden;
    line-height:1.6;

    background:
    linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.20)),
    url("home.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
/* HERO */
.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
}


.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:18px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

    backdrop-filter:blur(15px);

    z-index:999;

}

.logo{

    font-size:30px;

    font-weight:700;

    color:#00ff88;

}

.logo span{

    color:white;

}

.menu{

    display:flex;

    gap:25px;

    list-style:none;

}

.menu a{

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.menu a:hover{

    color:#00ff88;

}

.hero-content{

    max-width:800px;

}

.hero-content h1{

    font-size:58px;

    margin-bottom:20px;

    text-shadow:0 5px 15px rgba(0,0,0,.6);

}

.hero-content p{

    font-size:22px;

    margin-bottom:35px;

    color:#eee;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn{

    background:#00c853;

    color:white;

    text-decoration:none;

    padding:16px 34px;

    border-radius:50px;

    font-weight:bold;

    transition:.3s;

    box-shadow:0 10px 25px rgba(0,200,83,.35);

}

.btn:hover{

    transform:translateY(-5px);

    background:#00e676;

}/* =========================
   FİYAT HESAPLAMA
========================= */

section{
    padding:40px 20px;
}

.cam-kutu{

    max-width:650px;

    width:90%;

    margin:-120px auto 80px;

    padding:35px;

    background:rgba(20,20,20,.65);

    backdrop-filter:blur(20px);

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

    border-radius:25px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

    position:relative;

    z-index:10;

}

.cam-kutu h2{

    text-align:center;

    font-size:36px;

    color:#00ff88;

    margin-bottom:15px;

}

.cam-kutu p{

    text-align:center;

    color:#ddd;

    margin-bottom:25px;

}

select,
input{

    width:100%;

    padding:16px;

    margin-bottom:15px;

    border:none;

    border-radius:12px;

    background:#1d1d1d;

    color:#fff;

    font-size:16px;

}

button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    background:#00c853;

    color:white;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    background:#00e676;

    transform:translateY(-3px);

}

#sonuc{

    margin-top:20px;

    text-align:center;

    font-size:22px;

    font-weight:bold;

}

/* =========================
   HİZMETLER
========================= */

h2{

    text-align:center;

    font-size:42px;

    margin-bottom:40px;

}

.kartlar{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

}

.kart{

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

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

    backdrop-filter:blur(12px);

    border-radius:20px;

    padding:30px;

    text-align:center;

    transition:.3s;

}

.kart:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 40px rgba(0,255,136,.35);

}

.kart h3{

    margin-bottom:15px;

    color:#00ff88;

}/* =========================
   YORUMLAR
========================= */

.yorumlar{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
    margin-top:30px;
}

.yorum{

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

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

    backdrop-filter:blur(10px);

    border-radius:20px;

    padding:25px;

    transition:.3s;

}

.yorum:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,255,136,.35);

}

/* =========================
   İLETİŞİM
========================= */

#iletisim{

    text-align:center;

}

#iletisim p{

    font-size:20px;

    margin:10px 0;

}

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

footer{

    background:#0a0a0a;

    text-align:center;

    padding:30px;

    color:#aaa;

}

/* =========================
   MOBİL
========================= */

@media(max-width:768px){

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:18px;

}

.navbar{

padding:15px;

flex-direction:column;

gap:12px;

}

.menu{

flex-wrap:wrap;

justify-content:center;

gap:12px;

}

.logo{

font-size:24px;

}

.btn{

width:100%;

max-width:280px;

text-align:center;

}

.cam-kutu{

padding:25px;

}

h2{

font-size:30px;

}

}

/* İKİ HAREKETLİ HAMAM BÖCEĞİ */

.cockroach{
    position:fixed !important;
    width:55px !important;
    height:auto !important;
    z-index:998 !important;
    cursor:pointer;
    transition:
        left 1.4s linear,
        top 1.4s linear,
        transform .25s !important;
    filter:drop-shadow(0 3px 3px rgba(0,0,0,.5));
    user-select:none;
    -webkit-user-drag:none;
    touch-action:none;
}

@media(max-width:768px){
    .cockroach{
        width:45px !important;
    }
}
/* HAREKETLİ FARE */

#rat{
    position:fixed;
    width:95px;
    height:auto;
    left:-130px;
    bottom:20px;
    z-index:997;
    pointer-events:auto;
    cursor:pointer;
    filter:drop-shadow(0 5px 5px rgba(0,0,0,.55));
    user-select:none;
    -webkit-user-drag:none;
    touch-action:none;
}

@media(max-width:768px){
    #rat{
        width:70px;
        bottom:15px;
    }
}
/* ===========================
   İKİ HAREKETLİ SİNEK
=========================== */

.fly{
    position:fixed;
    width:60px;
    height:auto;
    left:20px;
    top:120px;
    z-index:999;
    cursor:pointer;
    transition:
        left 1.1s linear,
        top 1.1s linear,
        transform .2s;
    filter:drop-shadow(0 3px 3px rgba(0,0,0,.6));
    user-select:none;
    -webkit-user-drag:none;
    touch-action:none;
}

#fly2{
    left:auto;
    right:20px;
    top:220px;
}

@media(max-width:768px){
    .fly{
        width:48px;
    }
}