/* ===================================================
   ZORLU SİGORTA - ANA STİL DOSYASI
   Son Güncelleme: Tüm düzeltmeler dahil (v2.0)
=================================================== */

/* ===== KÖK DEĞİŞKENLER ===== */
:root{
    --siyah: #0d0d0d;
    --siyah-2: #1a1a1a;
    --beyaz: #ffffff;
    --gri-koyu: #333333;
    --gri-orta: #6f6f6f;
    --gri-acik: #f4f4f4;
    --gri-cizgi: #e2e2e2;
    --gecis: all .3s ease;
}

/* ===== RESET & TEMEL AYARLAR ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:'Poppins',sans-serif;
    color:var(--siyah);
    background:var(--beyaz);
    line-height:1.7;
    overflow-x:hidden;
}
a{
    text-decoration:none;
    color:inherit;
}
ul{
    list-style:none;
}
img{
    max-width:100%;
    display:block;
}
.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

/* ===== ORTAK BÖLÜM STİLLERİ ===== */
.section-tag{
    display:inline-block;
    background:var(--siyah);
    color:var(--beyaz);
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    padding:6px 16px;
    border-radius:30px;
    margin-bottom:15px;
    font-weight:600;
}
.section-title{
    font-size:36px;
    font-weight:800;
    margin-bottom:15px;
    letter-spacing:-1px;
}
.section-desc{
    color:var(--gri-orta);
    max-width:600px;
    margin-bottom:50px;
    font-size:15px;
}
.center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

/* ===== BUTONLAR ===== */
.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:15px 32px;
    border-radius:50px;
    font-weight:600;
    font-size:14px;
    letter-spacing:.5px;
    cursor:pointer;
    border:2px solid var(--siyah);
    transition:var(--gecis);
}
.btn-siyah{
    background:var(--siyah);
    color:var(--beyaz);
}
.btn-siyah:hover{
    background:var(--beyaz);
    color:var(--siyah);
}
.btn-beyaz{
    background:var(--beyaz);
    color:var(--siyah);
}
.btn-beyaz:hover{
    background:var(--siyah);
    color:var(--beyaz);
    border-color:var(--beyaz);
}

/* ===================================================
   HEADER / NAVBAR
=================================================== */
header{
    position:fixed;
    top:0;left:0;right:0;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(8px);
    z-index:1000;
    border-bottom:1px solid var(--gri-cizgi);
    transition:var(--gecis);
}
.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    max-width:1200px;
    margin:0 auto;
}
.logo{
    font-size:24px;
    font-weight:800;
    letter-spacing:-1px;
    display:flex;
    align-items:center;
    gap:10px;
}
.logo span{
    background:var(--siyah);
    color:var(--beyaz);
    width:38px;height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

/* ===== NAV MENÜ (MASAÜSTÜ - VARSAYILAN) ===== */
.nav-menu{
    display:flex;
    gap:35px;
}
.nav-menu a{
    font-weight:500;
    font-size:15px;
    position:relative;
    padding:5px 0;
}
.nav-menu a::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:0;height:2px;
    background:var(--siyah);
    transition:var(--gecis);
}
.nav-menu a:hover::after{
    width:100%;
}

.nav-right{
    display:flex;
    align-items:center;
    gap:25px;
}
.nav-phone{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:15px;
}
.nav-phone i{
    background:var(--siyah);
    color:var(--beyaz);
    padding:10px;
    border-radius:50%;
}

/* ===== HAMBURGER BUTONU (VARSAYILAN - MASAÜSTÜNDE GİZLİ) ===== */
.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    position:relative;
    z-index:2000;
    padding:8px;
}
.hamburger span{
    width:26px;
    height:2px;
    background:var(--siyah);
    transition:var(--gecis);
    display:block;
}
/* Menü açıkken hamburger çarpıya (X) dönüşür */
.hamburger.aktif span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}
.hamburger.aktif span:nth-child(2){
    opacity:0;
}
.hamburger.aktif span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}
.hamburger.aktif span{
    background:var(--beyaz);
}

/* ===================================================
   HERO (KENDİ MP4 VİDEOMUZ + TAM ORTALANMIŞ İÇERİK)
   Video tüm cihazlarda (masaüstü + mobil) oynar
=================================================== */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--siyah);
    color:var(--beyaz);
    position:relative;
    padding-top:80px;
    overflow:hidden;
    text-align:center;
}

/* Video Wrapper - Tam Ekran Kaplama */
.hero-video-wrapper{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
.hero-video-wrapper video{
    position:absolute;
    top:50%;
    left:50%;
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    transform:translate(-50%,-50%);
    object-fit:cover;
}

/* Karartma Overlay - Metin Okunabilirliği İçin */
.hero-overlay{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    background:rgba(13,13,13,.72);
    z-index:1;
}

/* İçerik Konumlandırma */
.hero .container{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    width:100%;
}

/* Ortalanmış İçerik Kutusu */
.hero-content-center{
    max-width:750px;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:0 15px;
}

.hero-content-center .hero-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.1);
    padding:8px 18px;
    border-radius:30px;
    font-size:13px;
    margin-bottom:25px;
    letter-spacing:1px;
    border:1px solid rgba(255,255,255,.15);
}

.hero-content-center h1{
    font-size:56px;
    font-weight:800;
    line-height:1.15;
    margin-bottom:22px;
    letter-spacing:-1.5px;
}

.hero-content-center p{
    color:#dcdcdc;
    max-width:600px;
    margin:0 auto 35px auto;
    font-size:17px;
}

.hero-btns{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

/* ===================================================
   HİZMETLER
=================================================== */
.hizmetler{
    padding:100px 0;
    background:var(--beyaz);
}
.hizmet-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
    gap:28px;
}
.hizmet-card{
    background:var(--gri-acik);
    padding:35px 28px;
    border-radius:18px;
    transition:var(--gecis);
    border:1px solid transparent;
    position:relative;
    overflow:hidden;
}
.hizmet-card:hover{
    background:var(--siyah);
    color:var(--beyaz);
    transform:translateY(-8px);
    box-shadow:0 25px 40px rgba(0,0,0,.15);
}
.hizmet-icon{
    width:60px;height:60px;
    background:var(--siyah);
    color:var(--beyaz);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:22px;
    transition:var(--gecis);
}
.hizmet-card:hover .hizmet-icon{
    background:var(--beyaz);
    color:var(--siyah);
}
.hizmet-card h3{
    font-size:19px;
    font-weight:700;
    margin-bottom:10px;
}
.hizmet-card p{
    font-size:14px;
    color:var(--gri-orta);
}
.hizmet-card:hover p{
    color:#d5d5d5;
}
.hizmet-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:18px;
    font-size:13px;
    font-weight:600;
}

/* ===================================================
   NEDEN BİZ
=================================================== */
.neden-biz{
    background:var(--siyah);
    color:var(--beyaz);
    padding:90px 0;
}
.neden-biz .section-desc{
    color:#bbbbbb;
}
.neden-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:30px;
}
.neden-item{
    text-align:center;
    padding:30px 20px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:16px;
    transition:var(--gecis);
}
.neden-item:hover{
    background:rgba(255,255,255,.05);
    transform:translateY(-6px);
}
.neden-item i{
    font-size:34px;
    margin-bottom:18px;
}
.neden-item h4{
    font-size:17px;
    margin-bottom:10px;
    font-weight:700;
}
.neden-item p{
    font-size:13px;
    color:#b5b5b5;
}

/* ===================================================
   HAKKIMIZDA
=================================================== */
.hakkimizda{
    padding:100px 0;
}

.hakkimizda-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

/* --- GÖRSEL ALANI --- */
.hakkimizda-img{
    position:relative;
    width:100%;
}

.hakkimizda-img::before{
    content:'';
    position:absolute;
    top:-18px;
    left:-18px;
    width:100%;
    height:100%;
    border:3px solid var(--siyah);
    border-radius:20px;
    z-index:1;
}

.hakkimizda-img img{
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    height:480px;
    object-fit:cover;
    object-position:center top;
    border-radius:20px;
    filter:grayscale(100%);
}

/* --- METİN ALANI --- */
.hakkimizda-text p{
    color:var(--gri-orta);
    margin-bottom:20px;
    font-size:15px;
}

/* --- İSTATİSTİKLER --- */
.istatistikler{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:40px;
}
.istatistik b{
    font-size:32px;
    font-weight:800;
    display:block;
    color:var(--siyah);
}
.istatistik span{
    font-size:13px;
    color:var(--gri-orta);
}

/* ===================================================
   İLETİŞİM
=================================================== */
.iletisim{
    background:var(--gri-acik);
    padding:100px 0;
}
.iletisim-grid{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:50px;
}
.iletisim-bilgi{
    display:flex;
    flex-direction:column;
    gap:22px;
}
.iletisim-kart{
    background:var(--beyaz);
    padding:25px;
    border-radius:16px;
    display:flex;
    gap:18px;
    align-items:flex-start;
    transition:var(--gecis);
}
.iletisim-kart:hover{
    transform:translateX(6px);
    box-shadow:0 15px 30px rgba(0,0,0,.08);
}
.iletisim-kart i{
    background:var(--siyah);
    color:var(--beyaz);
    min-width:48px;height:48px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}
.iletisim-kart h4{
    font-size:15px;
    margin-bottom:5px;
    font-weight:700;
}
.iletisim-kart p{
    font-size:13.5px;
    color:var(--gri-orta);
}
.sosyal-medya{
    display:flex;
    gap:12px;
    margin-top:10px;
}
.sosyal-medya a{
    width:42px;height:42px;
    background:var(--siyah);
    color:var(--beyaz);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--gecis);
}
.sosyal-medya a:hover{
    background:var(--gri-koyu);
    transform:translateY(-4px);
}

/* --- FORM --- */
.form-kutu{
    background:var(--beyaz);
    padding:40px;
    border-radius:20px;
}
.form-basari{
    background:var(--siyah);
    color:var(--beyaz);
    padding:15px 20px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:14px;
}
.form-hata{
    background:#c0392b;
    color:var(--beyaz);
    padding:15px 20px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:14px;
}
.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;
}
.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.form-group label{
    font-size:13px;
    font-weight:600;
}
.form-group input,
.form-group select,
.form-group textarea{
    padding:14px 16px;
    border:1.5px solid var(--gri-cizgi);
    border-radius:10px;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    transition:var(--gecis);
    background:var(--beyaz);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;
    border-color:var(--siyah);
}

/* --- WHATSAPP DEVAM BUTONU (Form Sonrası) --- */
.btn-whatsapp-devam{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    margin-top:15px;
    padding:15px 20px;
    background:#25D366;
    color:var(--beyaz);
    border-radius:50px;
    font-weight:600;
    font-size:14px;
    transition:var(--gecis);
}
.btn-whatsapp-devam:hover{
    background:#1ebe5b;
    transform:translateY(-2px);
}

/* --- HARİTA --- */
.harita{
    margin-top:60px;
    border-radius:20px;
    overflow:hidden;
    filter:grayscale(100%) contrast(1.05);
    line-height:0;
}
.harita iframe{
    width:100%;
    height:350px;
    border:0;
}

/* ===================================================
   FOOTER
=================================================== */
footer{
    background:var(--siyah);
    color:#cfcfcf;
    padding:70px 0 25px;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:40px;
    margin-bottom:50px;
}
.footer-logo{
    color:var(--beyaz);
    font-size:22px;
    font-weight:800;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    gap:10px;
}
.footer-logo span{
    background:var(--beyaz);
    color:var(--siyah);
    width:34px;height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}
.footer-col h4{
    color:var(--beyaz);
    font-size:16px;
    margin-bottom:20px;
    font-weight:700;
}
.footer-col ul li{
    margin-bottom:12px;
}
.footer-col ul li a{
    font-size:14px;
    transition:var(--gecis);
}
.footer-col ul li a:hover{
    color:var(--beyaz);
    padding-left:5px;
}
.footer-alt{
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:25px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    font-size:13px;
}

/* ===================================================
   WHATSAPP FLOATING BUTONU
=================================================== */
.whatsapp-btn{
    position:fixed;
    bottom:25px;right:25px;
    width:60px;height:60px;
    background:var(--siyah);
    color:var(--beyaz);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    box-shadow:0 10px 25px rgba(0,0,0,.3);
    z-index:999;
    transition:var(--gecis);
    animation:pulse 2s infinite;
}
.whatsapp-btn:hover{
    transform:scale(1.1);
}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(0,0,0,.3);}
    70%{box-shadow:0 0 0 15px rgba(0,0,0,0);}
    100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
}

/* ===================================================
   RESPONSIVE - TABLET (max-width: 992px)
=================================================== */
@media(max-width:992px){

    /* Hero */
    .hero{
        padding-top:100px;
    }
    .hero-content-center h1{
        font-size:44px;
    }

    /* Hakkımızda */
    .hakkimizda-grid{
        grid-template-columns:1fr;
        gap:50px;
    }
    .hakkimizda-img{
        margin-left:18px;
        margin-top:10px;
    }

    /* İletişim */
    .iletisim-grid{
        grid-template-columns:1fr;
    }

    /* Footer */
    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
}

/* ===================================================
   RESPONSIVE - MOBİL (max-width: 768px)
=================================================== */
@media(max-width:768px){

    /* ===== MOBİL MENÜ (Sadece burada devreye girer) ===== */
    .nav-menu{
        position:fixed;
        top:0;right:-100%;
        width:75%;
        height:100vh;
        background:var(--siyah);
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:30px;
        transition:.4s;
        z-index:1500;
    }
    .nav-menu.aktif{
        right:0;
    }
    .nav-menu a{
        color:var(--beyaz);
        font-size:18px;
    }
    .nav-phone span{
        display:none;
    }
    .hamburger{
        display:flex;
    }

    /* Hero */
    .hero{
        min-height:90vh;
    }
    .hero-content-center h1{
        font-size:32px;
    }
    .hero-content-center p{
        font-size:15px;
    }
    .hero-content-center .hero-tag{
        font-size:12px;
        padding:6px 14px;
    }

    /* Section başlıkları */
    .section-title{
        font-size:28px;
    }

    /* Hakkımızda */
    .hakkimizda{
        padding:70px 0;
    }
    .hakkimizda-img img{
        height:300px;
    }
    .hakkimizda-img::before{
        top:-12px;
        left:-12px;
    }
    .istatistikler{
        gap:15px;
    }
    .istatistik b{
        font-size:24px;
    }

    /* Form */
    .form-row{
        grid-template-columns:1fr;
    }

    /* Footer */
    .footer-grid{
        grid-template-columns:1fr;
    }
}

/* ===================================================
   RESPONSIVE - KÜÇÜK MOBİL (max-width: 480px)
=================================================== */
@media(max-width:480px){

    /* Hero */
    .hero-content-center h1{
        font-size:26px;
    }
    .hero-btns{
        flex-direction:column;
        width:100%;
    }
    .hero-btns .btn{
        width:100%;
        justify-content:center;
    }

    /* Hakkımızda */
    .istatistikler{
        grid-template-columns:1fr;
        text-align:center;
    }
}