/* =========================================
   1. GENEL AYARLAR VE DEĞİŞKENLER
   ========================================= */
:root {
    /* DİMEİS KURUMSAL RENKLERİ */
    --primary-color: #00ADEF;       /* Logo Mavisi */
    --primary-hover: #008cbf;       /* Mavi Koyu Ton */
    --secondary-color: #39B54A;     /* Logo Yeşili */
    
    /* GENEL RENKLER */
    --text-color: #333333;
    --text-light: #666666;
    --bg-light: #f4f6f9;
    --white: #ffffff;
    --dark: #1a1a1a;
    --border-color: #dddddd;
}

/* Temel Sıfırlama */
* { box-sizing: border-box; }

body { 
    margin: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    color: var(--text-color); 
    line-height: 1.6; 
    background-color: var(--white);
    scroll-behavior: smooth;
}

a { text-decoration: none; color: inherit; transition: 0.3s ease; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; font-weight: 700; }
img { max-width: 100%; display: block; }

/* =========================================
   2. HEADER, MENÜ VE ÜST BAR
   ========================================= */
header { 
    background: var(--white); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}

/* Üst Bilgi Çubuğu */
.top-bar { 
    background: var(--primary-color); 
    color: var(--white); 
    padding: 8px 0; 
    text-align: center; 
    font-size: 0.9em; 
    font-weight: 600;
}
.top-bar i { margin-right: 5px; }

/* Menü Kapsayıcı */
.nav-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 10px 20px; 
}

/* Logo Ayarları */
.logo a { display: flex; align-items: center; gap: 10px; }
.logo svg { transition: transform 0.3s; }
.logo:hover svg { transform: rotate(10deg); }

/* Navigasyon Linkleri */
.menu ul { display: flex; gap: 25px; align-items: center; }
.menu ul li a { 
    font-weight: 600; 
    font-size: 1.05em; 
    color: var(--dark);
    position: relative;
}

/* Menü Alt Çizgi Efekti */
.menu ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--secondary-color);
    transition: width 0.3s;
}
.menu ul li a:hover::after, .menu ul li a.active::after { width: 100%; }
.menu ul li a:hover, .menu ul li a.active { color: var(--primary-color); }

/* =========================================
   3. HERO (VİDEO VE BANNER ALANLARI)
   ========================================= */
   
/* Ana Sayfa Video Alanı */
.video-hero { 
    position: relative; 
    width: 100%; 
    height: 80vh; 
    overflow: hidden; 
    background: #000; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.video-hero video { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    transform: translate(-50%, -50%); 
    opacity: 0.5; /* Video karartma oranı */
    z-index: 1; 
    object-fit: cover;
}
.hero-content { 
    position: relative; 
    z-index: 2; 
    color: var(--white); 
    text-align: center; 
    padding: 20px; 
    max-width: 800px;
}
.hero-content h1 { 
    font-size: 3.5em; 
    margin-bottom: 15px; 
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8); 
    line-height: 1.2;
}
.hero-content p { 
    font-size: 1.4em; 
    margin-bottom: 30px; 
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8); 
}

/* Alt Sayfa Başlıkları (Resimli Banner) */
.page-header { 
    background-size: cover; 
    background-position: center; 
    color: var(--white); 
    padding: 100px 20px; 
    text-align: center; 
    position: relative; 
}
/* Mavi Filtre Katmanı */
.page-header::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(to right, rgba(0, 173, 239, 0.8), rgba(57, 181, 74, 0.6)); 
}
.page-header h1, .page-header p { position: relative; z-index: 2; }
.page-header h1 { font-size: 2.8em; margin-bottom: 10px; }
.page-header p { font-size: 1.2em; opacity: 0.95; }

/* =========================================
   4. HİZMET KARTLARI VE IZGARA (GRID)
   ========================================= */
.section-padding { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }
.bg-light { background-color: var(--bg-light); }

.service-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
}
.service-card { 
    background: var(--white); 
    padding: 35px 25px; 
    border-radius: 10px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); 
    text-align: center; 
    transition: transform 0.3s, box-shadow 0.3s; 
    border-bottom: 3px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.service-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
    border-bottom-color: var(--secondary-color);
}
.service-card i { 
    font-size: 3.5em; 
    color: var(--primary-color); 
    margin-bottom: 20px; 
}
.service-card h3 { color: var(--dark); margin-bottom: 15px; }
.service-card p { color: var(--text-light); font-size: 0.95em; margin-bottom: 20px; flex-grow: 1; }

/* =========================================
   5. HİZMET DETAY SAYFALARI (GÜNCEL - SOL MENÜ)
   ========================================= */
.detail-container { 
    display: grid; 
    /* 1fr (Menü) - 3fr (İçerik) şeklinde oranladık */
    grid-template-columns: 1fr 3fr; 
    gap: 40px; 
    margin: 60px auto; 
    max-width: 1200px; 
    padding: 0 20px; 
}

/* Sol Taraf (Artık Sidebar Burada Olacak) */
.sidebar { 
    order: 1; /* Masaüstünde 1. sırada (Solda) göster */
    background: var(--white); 
    padding: 25px; 
    border-radius: 10px; 
    box-shadow: 0 2px 15px rgba(0,0,0,0.05); 
    height: fit-content; 
    position: sticky; 
    top: 100px; 
    border: 1px solid #eee;
}

/* Sağ Taraf (İçerik) */
.detail-content {
    order: 2; /* Masaüstünde 2. sırada (Sağda) göster */
}

.detail-content img { 
    width: 100%; 
    border-radius: 10px; 
    margin-bottom: 30px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); 
    height: 400px;
    object-fit: cover;
}
.detail-content h2 { color: var(--primary-color); font-size: 2em; margin-bottom: 20px; }
.detail-content h3 { color: var(--dark); margin-top: 30px; margin-bottom: 15px; border-left: 4px solid var(--secondary-color); padding-left: 15px; }
.detail-content p { margin-bottom: 15px; text-align: justify; }

/* Liste Stilleri */
.detail-content ul { margin: 20px 0; }
.detail-content ul li { 
    margin-bottom: 12px; 
    position: relative; 
    padding-left: 30px; 
    font-size: 1.05em;
}
.detail-content ul li::before { 
    content: '\f00c'; 
    font-family: 'Font Awesome 6 Free'; 
    font-weight: 900; 
    color: var(--secondary-color); 
    position: absolute; 
    left: 0; 
    top: 3px; 
}

/* Sidebar Menü Linkleri */
.sidebar h3 { 
    border-bottom: 2px solid var(--bg-light); 
    padding-bottom: 15px; 
    margin-bottom: 20px; 
    color: var(--primary-color); 
}
.sidebar ul li { margin-bottom: 10px; }
.sidebar ul li a { 
    display: block; 
    padding: 12px 15px; 
    background: var(--bg-light); 
    border-radius: 5px; 
    font-weight: 600; 
    color: var(--text-color);
    transition: 0.3s; 
    border-left: 4px solid transparent; 
}
.sidebar ul li a:hover, .sidebar ul li a.active { 
    background: #e6f7ff; 
    color: var(--primary-color); 
    border-left-color: var(--primary-color); 
    padding-left: 20px; 
}

/* --- MOBİL DÜZENİ --- */
@media (max-width: 900px) {
    .detail-container { 
        grid-template-columns: 1fr; /* Tek sütuna düşür */
    }
    
    .detail-content { 
        order: 1; /* Mobilde İÇERİK önce gelsin (Üstte) */
    }
    
    .sidebar { 
        order: 2; /* Mobilde MENÜ sonra gelsin (Altta) */
        margin-top: 30px;
    }
    
    .detail-content img { height: 250px; }
}

/* =========================================
   6. İLETİŞİM VE FORMLAR
   ========================================= */
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contact-info-box p { margin-bottom: 15px; font-size: 1.1em; }
.contact-info-box i { color: var(--primary-color); width: 25px; text-align: center; margin-right: 10px; }

/* Form Elemanları */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9em; color: var(--text-light); }
.form-group input, .form-group textarea, .form-group select { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid var(--border-color); 
    border-radius: 5px; 
    font-family: inherit; 
    transition: border 0.3s;
    background: #fcfcfc;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { 
    border-color: var(--primary-color); 
    outline: none; 
    background: var(--white);
}

/* Butonlar */
.btn-main, .btn-submit { 
    background: var(--secondary-color); 
    color: var(--white); 
    padding: 12px 30px; 
    border-radius: 5px; 
    font-weight: bold; 
    display: inline-block; 
    border: none; 
    cursor: pointer; 
    font-size: 1rem;
    transition: background 0.3s, transform 0.2s;
}
.btn-submit { width: 100%; background: var(--primary-color); }
.btn-main:hover { background: #2ea03e; transform: translateY(-2px); }
.btn-submit:hover { background: var(--primary-hover); transform: translateY(-2px); }

/* Uyarı Mesajları */
.alert { padding: 15px; margin-bottom: 20px; border-radius: 5px; font-weight: 500; }
.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* =========================================
   7. SABİT AKSİYON BUTONLARI (WHATSAPP/TEL)
   ========================================= */
.floating-buttons { 
    position: fixed; 
    bottom: 25px; 
    right: 25px; 
    z-index: 2000; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}
.float-btn { 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--white); 
    font-size: 28px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    transition: transform 0.3s; 
}
.float-btn:hover { transform: scale(1.1); }
.float-wa { background-color: #25D366; }
.float-call { background-color: var(--primary-color); }

/* =========================================
   8. FOOTER (ALT KISIM)
   ========================================= */
footer { 
    background: var(--dark); 
    color: #bbb; 
    padding: 60px 0 20px; 
    text-align: center; 
    margin-top: 60px; 
}
footer h3 { color: var(--white); margin-bottom: 10px; }
footer p { font-size: 0.95em; margin-bottom: 30px; }
.copyright { 
    border-top: 1px solid #333; 
    padding-top: 20px; 
    margin-top: 20px; 
    font-size: 0.85em; 
    color: #777; 
}

/* =========================================
   9. MOBİL UYUMLULUK (RESPONSIVE)
   ========================================= */
@media (max-width: 992px) {
    .hero-content h1 { font-size: 2.5em; }
}

@media (max-width: 768px) {
    /* Header & Menü */
    .nav-container { flex-direction: column; padding: 15px; }
    .menu ul { margin-top: 15px; flex-wrap: wrap; justify-content: center; gap: 15px; }
    
    /* Hero */
    .hero-content h1 { font-size: 2em; }
    .hero-content p { font-size: 1.1em; }
    
    /* Detay Sayfaları */
    .detail-container { grid-template-columns: 1fr; margin: 30px auto; }
    .sidebar { order: 2; } /* Mobilde menü içeriğin altına iner */
    .detail-content { order: 1; }
    .detail-content img { height: 250px; }
    
    /* İletişim */
    .contact-wrapper { grid-template-columns: 1fr; }
    
    /* Butonlar */
    .floating-buttons { bottom: 15px; right: 15px; }
    .float-btn { width: 50px; height: 50px; font-size: 24px; }
}
/* =========================================
   ALT HİZMET KARTLARI (GRID YAPISI)
   ========================================= */
.sub-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.sub-service-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.sub-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.sub-service-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 3px solid var(--secondary-color);
}

.sub-service-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.sub-service-content h4 {
    color: var(--dark);
    font-size: 1.1em;
    margin-bottom: 10px;
    min-height: 40px; /* Başlıkları hizalamak için */
}

.sub-service-content p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1;
}

.read-more-link {
    font-size: 0.85em;
    font-weight: bold;
    color: var(--secondary-color);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.read-more-link:hover { color: var(--primary-color); }
/* =========================================
   TOP BAR SOSYAL MEDYA DÜZENİ
   ========================================= */
.top-bar {
    padding: 0 !important; /* Varsayılan padding'i ez */
}

.top-bar-content {
    display: flex;
    justify-content: space-between; /* Biri sağa biri sola */
    align-items: center;
    height: 45px; /* Yükseklik sabitleme */
}

.tb-contact {
    font-size: 0.95em;
}

.tb-contact .sep {
    margin: 0 10px;
    opacity: 0.5;
}

.tb-social {
    display: flex;
    gap: 15px;
}

.tb-social a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1em;
    transition: 0.3s;
}

.tb-social a:hover {
    color: #fff;
    transform: scale(1.2); /* Üzerine gelince hafif büyüsün */
}

/* Mobil Düzenleme */
@media (max-width: 768px) {
    .top-bar-content {
        flex-direction: column;
        height: auto;
        padding: 10px 0;
        gap: 5px;
    }
}

/* =========================================
   10. REFERANSLAR VE GALERİ
   ========================================= */

/* Referans Grid */
.reference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    align-items: center;
    justify-items: center;
    margin-top: 40px;
}
.ref-item {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    border: 1px solid #eee;
}
.ref-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.ref-item img {
    max-height: 80px;
    max-width: 100%;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: 0.3s;
}
.ref-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Before/After Slider (Basit CSS/JS Çözümü) */
.ba-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 50px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    aspect-ratio: 16/9; /* En boy oranı */
    cursor: ew-resize;
}
.ba-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Mouse olaylarını container'a bırak */
}
.ba-img-after {
    width: 50%; /* Başlangıçta %50 */
    border-right: 3px solid #fff;
    z-index: 2;
    overflow: hidden; /* Resmi kırpmak için */
}
.ba-slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    pointer-events: none; /* Handle tıklanmasın, container sürüklensin */
}
.ba-slider-handle i {
    color: var(--primary-color);
}
.ba-label {
    position: absolute;
    top: 20px;
    padding: 5px 15px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.9em;
    border-radius: 20px;
    z-index: 5;
    pointer-events: none;
}
.label-before { right: 20px; }
.label-after { left: 20px; }

/* Galeri Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}