body{
    margin:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:#fff;
    color:#111
}
a{
    text-decoration:none;
    color:inherit
}
.container{
    width:90%;
    max-width:1200px;
    margin:0 auto
}

/* HEADER & NAVBAR */
header{
    position:sticky;
    top:0;
    background:#fff;
    border-bottom:1px solid #eee;
    z-index:10
}
.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.7rem 0;
    gap:1.5rem
}
.logo{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:.7rem
}
.logo-main{
    font-weight:800;
    font-size:1.3rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#1f3a57
}
.logo-sub{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:#6c6f7a
}
.logo img{
    height:40px;
    object-fit:contain
}
nav ul{
    list-style:none;
    display:flex;
    gap:1.2rem;
    font-size:.9rem;
    margin:0;
    padding:0
}
nav li{
    margin:0;
    padding:0
}
nav a{
    position:relative;
    padding-bottom:.1rem;
    color:#333
}
nav a.active{
    color:#1f3a57;
    font-weight:600
}

/* BUTONLAR */
.btn{
    padding:.55rem 1.2rem;
    border-radius:999px;
    border:1px solid transparent;
    font-size:.85rem;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    transition:.2s;
    background:none;
    white-space:nowrap
}
.btn-primary{
    background:#f6b10a;
    color:#111;
    font-weight:600
}
.btn-outline{
    border-color:#e0e3ec;
    color:#1f3a57
}

/* GENEL LAYOUT */
main{
    min-height:70vh
}
section{
    padding:3rem 0
}

/* HERO */
.hero{
    padding:4rem 0 3.5rem;
    background:radial-gradient(circle at top left,#f8f9ff 0,#ffffff 55%)
}
.hero-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:3rem;
    align-items:center
}
.hero-kicker{
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#f6b10a;
    font-weight:600;
    margin-bottom:.8rem
}
.hero-title{
    font-size:2.3rem;
    line-height:1.1;
    margin-bottom:1rem;
    color:#1f3a57
}
.hero-text{
    font-size:.95rem;
    line-height:1.7;
    color:#6c6f7a;
    max-width:520px;
    margin-bottom:1.5rem
}
.hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-bottom:1.6rem
}
.hero-badge{
    padding:.35rem .8rem;
    border-radius:999px;
    border:1px solid #e0e3ec;
    font-size:.8rem;
    color:#6c6f7a;
    background:#fff
}
.hero-card{
    border-radius:1.1rem;
    border:1px solid #e0e3ec;
    background:linear-gradient(145deg,#fff,#f5f7ff);
    padding:1.5rem;
    box-shadow:0 14px 44px rgba(0,0,0,.05)
}

/* GENEL BÖLÜM BAŞLIKLARI */
.section-header{
    text-align:center;
    margin-bottom:2.4rem
}
.section-title{
    font-size:1.6rem;
    color:#1f3a57;
    margin-bottom:.4rem
}
.section-subtitle{
    font-size:.9rem;
    color:#6c6f7a;
    max-width:520px;
    margin:0 auto
}

/* PROJELER LISTESİ */
.projects-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.4rem
}
.project-card{
    border-radius:.9rem;
    overflow:hidden;
    border:1px solid #e0e3ec;
    background:#fff
}
.project-thumb{
    height:150px;
    background:linear-gradient(135deg,#1f3a57,#f6b10a);
    background-size:cover;
    background-position:center
}
.project-body{
    padding:1rem 1.1rem 1.2rem
}
.project-meta{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#6c6f7a;
    margin-bottom:.4rem
}
.project-title{
    font-size:.98rem;
    color:#1f3a57;
    margin-bottom:.3rem
}
.project-text{
    font-size:.84rem;
    color:#6c6f7a
}

/* SAYFA BAŞLIĞI */
.page-header{
    padding:3rem 0 2.4rem;
    background:linear-gradient(135deg,#1f3a57,#2e4469);
    color:#fff
}
.page-header h1{
    font-size:1.9rem;
    margin-bottom:.4rem
}
.page-header p{
    font-size:.9rem;
    color:#d1d5e4
}

/* KART GRIDLERİ, HAKKIMIZDA, REFERANSLAR, İLETİŞİM */
.cards-grid-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.5rem
}
.card{
    background:#fff;
    border-radius:.9rem;
    padding:1.4rem 1.4rem 1.5rem;
    border:1px solid #e0e3ec;
    box-shadow:0 8px 22px rgba(0,0,0,.03)
}
.card h3{
    font-size:1rem;
    color:#1f3a57;
    margin-bottom:.4rem
}
.card p{
    font-size:.87rem;
    color:#6c6f7a;
    line-height:1.6
}
.about-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:2.5rem;
    align-items:flex-start
}
.about-grid p{
    font-size:.95rem;
    color:#111;
    line-height:1.7;
    margin-bottom:1rem
}
.about-box{
    background:#f7f8fc;
    border-radius:.9rem;
    padding:1.3rem;
    border:1px solid #e0e3ec;
    font-size:.9rem;
    color:#6c6f7a
}
.refs-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem;
    font-size:.85rem
}
.ref-item{
    border-radius:999px;
    border:1px dashed #e0e3ec;
    padding:.6rem .9rem;
    text-align:center;
    color:#6c6f7a;
    background:#fff
}
.contact-layout{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:2rem
}
.contact-box{
    background:#f7f8fc;
    border-radius:.9rem;
    padding:1.5rem;
    border:1px solid #e0e3ec
}
.contact-row{
    margin-bottom:.8rem;
    font-size:.9rem;
    color:#6c6f7a
}
.contact-row strong{
    color:#1f3a57
}

/* FORM ELEMANLARI */
.form-group{
    margin-bottom:.9rem
}
label{
    display:block;
    font-size:.8rem;
    margin-bottom:.25rem;
    color:#6c6f7a
}
input,
textarea{
    width:100%;
    padding:.65rem .8rem;
    border-radius:.55rem;
    border:1px solid #e0e3ec;
    font-size:.9rem;
    outline:none;
    background:#fff
}
textarea{
    resize:vertical;
    min-height:120px
}

/* FOOTER & WHATSAPP BUTONU */
footer{
    background:#05070b;
    color:#9a9fb1;
    font-size:.8rem;
    padding:1.4rem 0;
    margin-top:2rem
}
.footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.8rem
}
.footer-links{
    display:flex;
    gap:1rem
}
.whatsapp-float{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9
}
.whatsapp-float a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    border-radius:999px;
    background:#25d366;
    color:#fff;
    font-size:1.4rem;
    box-shadow:0 8px 18px rgba(0,0,0,.25)
}

/* RESPONSIVE (TABLET & MOBİL) */
@media (max-width:900px){
    .hero-grid,
    .about-grid,
    .contact-layout{
        grid-template-columns:1fr
    }
    .projects-grid,
    .cards-grid-3{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    /* Navbar üst üste gelsin */
    .navbar{
        flex-direction:column;
        align-items:flex-start;
        gap:.6rem
    }
}

/* TELEFON DİKEY (ASIL SORUN BURADAYDI) */
@media (max-width:700px){
    /* MENÜYÜ GİZLEME! sadece sardır ve küçült */
    nav ul{
        flex-wrap:wrap;
        gap:.6rem;
    }
    nav a{
        font-size:.9rem;
    }

    .projects-grid,
    .cards-grid-3,
    .refs-grid{
        grid-template-columns:1fr
    }
}
/* Mobil menü butonu (hamburger) */
.nav-toggle{
    display:none;
    border:none;
    background:#1f3a57;
    color:#fff;
    border-radius:999px;
    width:38px;
    height:38px;
    font-size:1.2rem;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    margin-left:.5rem;
}

/* 900px ve altında: header dikey, buton görünür, menü aç/kapa */
@media (max-width: 900px){

    .navbar{
        flex-direction:column;
        align-items:flex-start;
        gap:.4rem;
    }

    .header-actions{
        display:flex;
        align-items:center;
        gap:.4rem;
        width:100%;
        justify-content:space-between;
    }

    .nav-toggle{
        display:inline-flex;
    }

    /* Menü varsayılan kapalı */
    nav ul{
        display:none;
        flex-direction:column;
        width:100%;
        padding-top:.4rem;
        border-top:1px solid #eee;
        gap:.3rem;
    }

    /* Body'ye nav-open sınıfı gelince menü açılır */
    body.nav-open nav ul{
        display:flex;
    }
}

/* 700px altında kart gridlerini tek sütuna indir (isteğe bağlı) */
@media (max-width: 700px){
    .projects-grid,
    .cards-grid-3,
    .refs-grid{
        grid-template-columns:1fr;
    }
}