/* ======================================================================
   1. DEĞİŞKENLER (VARIABLES)
   ====================================================================== */
:root {
  --color-primary: #182786;
  --color-accent: #350FD9;
  --color-accent-2: #0F6AD9;
  --color-white: #FFFFFF;
  --color-bg: var(--color-white);
  --color-text: rgba(24, 39, 134, 0.92);
  --color-text-light: rgba(24, 39, 134, 0.78);
  --color-text-muted: rgba(24, 39, 134, 0.62);
  --color-border: rgba(24, 39, 134, 0.18);
  --color-border-light: rgba(24, 39, 134, 0.12);
  --color-bg-alt: rgba(204, 205, 219, 0.28);
  
  --font-display: "Roboto Condensed", system-ui, sans-serif;
  --font-family: "Quicksand", system-ui, sans-serif;
  --line-height: 1.65;
  --container-max: 1200px;
  --header-offset: 110px;
  
    --spacing-xs: 10px;
  --spacing-sm: 15px; --spacing-md: 20px; --spacing-lg: 30px; --spacing-xl: 40px; --spacing-xxl: 50px; --spacing-section: 80px;
  --transition-fast: 0.25s ease;
  --shadow-card: 0 14px 36px rgba(24, 39, 134, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, html { margin: 0; padding: 0; font-family: var(--font-family); color: var(--color-text); line-height: var(--line-height); background-color: var(--color-bg); }
a { color: inherit; text-decoration: none; transition: var(--transition-fast); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; padding: 0; margin: 0; }
section, footer { scroll-margin-top: var(--header-offset); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Konteyner Ayarı */
.container { width: min(var(--container-max), 100%); margin: 0 auto; padding: 0 5%; }

/* Tipografi */
h1, h2, h3, .section-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
p, li, input, textarea { font-family: var(--font-family); font-weight: 500; letter-spacing: 0.1px; }

/* ======================================================================
   HERO SHELL
   ====================================================================== */
.hero-shell { position: relative; overflow: hidden; color: var(--color-white); }
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(135deg, rgba(24, 39, 134, 0.88) 0%, rgba(15, 106, 217, 0.68) 50%, rgba(53, 15, 217, 0.74) 100%), url("assets/hero-bg.jpg");
  background-size: cover; background-position: center; transform: scale(1.00); animation: heroAnim 20s infinite alternate ease-in-out;
}
@keyframes heroAnim { 0% { transform: scale(1.0); } 100% { transform: scale(1.10); } }
.hero-shell > :not(.hero-bg) { position: relative; z-index: 3; }

/* ======================================================================
   HEADER (DYNAMIC BACKGROUND & COLORS)
   ====================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; width: 100%;
  
  /* Varsayılan (Tepede) */
  background-image: url('assets/banner1.jpeg');
  background-size: cover; background-position: center; background-blend-mode: overlay;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); box-shadow: none;
  transition: all 0.4s ease;
  
}

/* Header'a özel Konteyner Ayarı (DAHA GENİŞ OLSUN DİYE) */
.site-header .container {
  padding-left: 10px; /* Sola daha yakın (Eskiden %5 yani ~60px idi) */
  padding-right: 10px; /* Sağa daha yakın */
  max-width: 100%; /* Tam genişliği kullanabilsin */
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; min-height: 90px;
}

/* --- SCROLLED (AŞAĞI İNERKEN) DURUMU --- */
.site-header.scrolled { 

  /* 2. Beyaz perdeyi %90'dan %60'a çektik (0.6). 
     Böylece alttaki resim çok daha net belli olacak. */
  background-image: url('assets/banner1.jpeg');
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Çizgi ve gölge ayarları */
  border-bottom: 1px solid rgba(24, 39, 134, 0.15);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5); /* Gölgeyi de yumuşattık */
  
  /* Backdrop filter: Eğer resim yüklenmezse arkadaki içerik buzlu cam gibi görünsün (Güvenlik önlemi) */
  backdrop-filter: blur(10px); 
}

/* Sol Blok: Logo + Butonlar */
.header-branding {
  display: flex; align-items: center;
  gap: 40px; /* BURAYI ARTIRDIK: Logo ile Tuşlar arası açıldı */
}

/* Logo */
.brand-logo-square {
  width: 80px; height: 80px; object-fit: cover; border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.8); transition: border-color 0.4s ease;
}
.site-header.scrolled .brand-logo-square { border-color: rgba(255, 255, 255); }

/* Sağ Kolon (Butonlar) */
.brand-info-col {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}

/* Telefon Butonu */
.mini-phone-btn {
  font-size: 20px; font-weight: 700; display: flex; align-items: center;
  padding: 10px 16px; border-radius: 8px; transition: all 0.3s;
  color: #FFFFFF; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
}
.mini-phone-btn:hover { background: #FFFFFF; color: #182786; }

/* Sosyal İkonlar */
.mini-social-group { display: flex; gap: 10px; }
.mini-icon {
  font-size: 16px; display: flex; align-items: center; transition: all 0.3s;
  color: rgba(255,255,255,0.85);
}
.mini-icon:hover { color: #FFFFFF; transform: scale(1.15); }

/* Scrolled Renk Değişimleri */
.site-header.scrolled .mini-phone-btn {
  color: #FFFFFF; background: rgba(255, 255, 255, 0.18); border-color: #FFFFFF;
}
.site-header.scrolled .mini-phone-btn:hover { background: #182786; color: #FFFFFF; }
.site-header.scrolled .mini-icon {color: #FFFFFF; }
.site-header.scrolled .mini-icon:hover { color: #182786; }

/* Menü */
.site-nav {
  display: flex;
  flex-direction: column; /* Alt alta diz */
  align-items: flex-end;  /* Sağa yasla */
  justify-content: center;
  gap: 5px; /* Satırlar arası boşluk */
}

/* Linkler (Anasayfa, Hakkımda vb.): Kendi içinde yan yana kalsın */
.site-nav ul {
  display: flex;
  gap: 20px; /* Linkler arası boşluk */
  align-items: center;
}

/* Sosyal Medya İkonları Grubu */
.site-nav .mini-social-group {
  display: flex;
  align-items: center;
  gap: 10px; /* İkonlar arası boşluk */
  margin-right: 2px; /* Linklerle hizayı ince ayarlamak için */
}

/* Linklerin görünümü (Değişmedi, aynen koruyoruz) */
.site-nav a {
  font-size: 15px; 
  font-weight: 600; 
  padding: 4px 4px; 
  border-radius: 8px; 
  position: relative; 
  transition: all 0.3s;
  color: #FFFFFF;
}
.site-nav a:hover { background: rgba(255, 255, 255, 0.15); }

/* Scrolled durumunda renkler (Değişmedi) */
.site-header.scrolled .site-nav a { color: #ffffff; }
.site-header.scrolled .site-nav a:hover { background: rgb(255, 255, 255, 0.15); }


/* ======================================================================
   HERO & SECTIONS
   ====================================================================== */
.hero { position: relative; min-height: 80vh; display: flex; align-items: center; color: var(--color-white); overflow: hidden; padding-top: var(--header-offset); }
.hero-content { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xl); padding: 90px 0; }
.hero-text { flex: 1; text-align: left; padding: var(--spacing-xl); border-left: 4px solid rgba(255, 255, 255, 0.90); background: linear-gradient(90deg, rgba(24, 39, 134, 0.42) 0%, rgba(24, 39, 134, 0) 100%); }
.hero h1 { font-size: clamp(32px, 4.2vw, 56px); margin: 0 0 10px 0; font-weight: 700; text-shadow: 2px 2px 10px rgba(0,0,0,0.3); }
.hero-subtitle { margin-bottom: 20px; font-size: 14px; letter-spacing: 4px; opacity: 0.9; }
.hero-image { flex: 1; display: flex; justify-content: flex-end; align-items: center; max-width: 600px; }
.hero-image img { max-height: 500px; width: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }

.btn { display: inline-block; padding: 12px 24px; border-radius: 10px; font-weight: 700; letter-spacing: 1px; transition: 0.3s; font-family: var(--font-display); }
.btn-primary { background: var(--color-primary); color: #fff; border: 2px solid var(--color-primary); }
.btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); }
.btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-dark { background: var(--color-primary); color: #fff; }

.section { padding: var(--spacing-section) 0; text-align: center; }
.section-title { font-size: 32px; margin-bottom: 50px; display: inline-block; position: relative; color: var(--color-primary); }
.section-title::after { content: ""; display: block; width: 60%; height: 3px; margin: 10px auto 0; background: var(--color-accent); }
.section-panel { background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); text-align: left; }

/* Services */
.services { background: var(--color-bg-alt); }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.service-item { background: #fff; padding: 30px; border-radius: 16px; box-shadow: var(--shadow-card); border: 1px solid rgba(0,0,0,0.05); transition: 0.3s; }
.service-item:hover { transform: translateY(-5px); }
.service-num { font-size: 40px; color: var(--color-accent-2); font-weight: 900; opacity: 0.8; }
.service-title { font-size: 20px; color: var(--color-primary); margin: 10px 0; }
.service-desc { font-size: 14px; color: var(--color-text-muted); }

/* About */
.about { padding-top: 80px; }
.about-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; }
.about-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge { padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--color-primary); background: rgba(24, 39, 134, 0.08); }
.about-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.about-portrait img { width: 100%; border-radius: 16px; box-shadow: var(--shadow-card); }

/* Testimonials & Footer */
.testimonials { background: var(--color-primary); color: #fff; }
.testimonials .section-title { color: #fff; }
.slider-container { max-width: 800px; margin: 0 auto; overflow: hidden; }
.slider-track { display: flex; width: 100%; transition: transform 0.5s; }
.slide { min-width: 100%; padding: 0 20px; text-align: center; }
.quote { font-size: 20px; font-style: italic; margin-bottom: 20px; opacity: 0.9; }

.footer { 
  padding: 60px 0; 
  background: #fff; 
  border-top: 1px solid #eee; 
}

.footer-inner { 
  display: flex; 
  justify-content: center; /* DEĞİŞİKLİK: Sağa/Sola yaslamak yerine ortaladık */
  flex-wrap: wrap; 
  gap: 80px; /* İki kutu arasındaki boşluğu ayarladık */
}

/* Sol (Bilgi) ve Sağ (Form) kutularının ayarları */
.contact-info, .contact-form {
  flex: 1;            /* Eşit büyüklükte olmaya çalışsınlar */
  min-width: 300px;   /* Mobilde çok küçülmesin */
  max-width: 500px;   /* Masaüstünde çok genişleyip kenara kaçmasın */
}

.contact-info h3, .contact-form h3 { 
  color: var(--color-primary); 
  margin-bottom: 15px; 
  font-size: 40px;
}

.contact-title { 
  color: var(--color-text-light); 
  font-weight: 700; 
  letter-spacing: 1px; 
}

.form-group { margin-bottom: 15px; }

input, textarea { 
  width: 100%; 
  padding: 12px 14px; 
  border: 1px solid var(--color-border); 
  background: rgba(204, 205, 219, 0.10); 
  border-radius: 12px; 
  font-family: inherit; 
}

.bottom-bar { 
  background: var(--color-primary); 
  color: #fff; 
  text-align: center; 
  padding: 15px; 
  font-size: 13px; 
}

/* Listings Page */
.listings-header { padding-top: 160px; padding-bottom: 40px; text-align: center; color: #fff; }
.listings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.listing-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: 0.3s; }
.listing-card:hover { transform: translateY(-8px); }
.card-image { height: 220px; overflow: hidden; position: relative; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.listing-card:hover .card-image img { transform: scale(1.05); }
.card-badge { position: absolute; top: 15px; left: 15px; background: var(--color-accent); color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 12px; font-weight: 700; z-index: 2; }
.listing-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }

/* Tooltip */
[data-tooltip]:hover::after {
  content: attr(data-tooltip); position: absolute; top: 120%; left: 50%; transform: translateX(-50%);
  background: #182786; color: #fff; padding: 4px 8px; font-size: 11px; border-radius: 4px; pointer-events: none; white-space: nowrap; z-index: 99;
}

/* --- Hamburger Menü (Varsayılan: BEYAZ) --- */
.hamburger-menu {
  display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001;
}
.hamburger-menu .bar {
  display: block; width: 25px; height: 3px; 
  background-color: #FFFFFF !important; /* Mavi zemin üstünde BEYAZ görünsün */
  margin: 5px 0; border-radius: 3px; transition: all 0.3s ease-in-out;
}


.hero { position: relative; min-height: 80vh; display: flex; align-items: center; color: var(--color-white); overflow: hidden; padding-top: var(--header-offset); }
.hero-content { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xl); padding: 90px 0; }
.hero-text { flex: 1; text-align: left; padding: var(--spacing-xl); border-left: 4px solid rgba(255, 255, 255, 0.90); background: linear-gradient(90deg, rgba(24, 39, 134, 0.42) 0%, rgba(24, 39, 134, 0) 100%); }
.hero h1 { font-size: clamp(32px, 4.2vw, 56px); margin: 0 0 10px 0; font-weight: 700; text-shadow: 2px 2px 10px rgba(0,0,0,0.3); }
.hero-subtitle { margin-bottom: 20px; font-size: 14px; letter-spacing: 4px; opacity: 0.9; }
.hero-image { flex: 1; display: flex; justify-content: flex-end; align-items: center; max-width: 600px; }
.hero-image img { max-height: 500px; width: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }

.btn { display: inline-block; padding: 12px 24px; border-radius: 10px; font-weight: 700; letter-spacing: 1px; transition: 0.3s; font-family: var(--font-display); }
.btn-primary { background: var(--color-primary); color: #fff; border: 2px solid var(--color-primary); }
.btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); }
.btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-dark { background: var(--color-primary); color: #fff; }

.section { padding: var(--spacing-section) 0; text-align: center; }
.section-title { font-size: 32px; margin-bottom: 50px; display: inline-block; position: relative; color: var(--color-primary); }
.section-title::after { content: ""; display: block; width: 60%; height: 3px; margin: 10px auto 0; background: var(--color-accent); }
.section-panel { background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); text-align: left; }

/* Services */
.services { background: var(--color-bg-alt); }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.service-item { background: #fff; padding: 30px; border-radius: 16px; box-shadow: var(--shadow-card); border: 1px solid rgba(0,0,0,0.05); transition: 0.3s; }
.service-item:hover { transform: translateY(-5px); }
.service-num { font-size: 40px; color: var(--color-accent-2); font-weight: 900; opacity: 0.8; }
.service-title { font-size: 20px; color: var(--color-primary); margin: 10px 0; }
.service-desc { font-size: 14px; color: var(--color-text-muted); }

/* About */
.about { padding-top: 80px; }
.about-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; }
.about-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge { padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--color-primary); background: rgba(24, 39, 134, 0.08); }
.about-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.about-portrait img { width: 100%; border-radius: 16px; box-shadow: var(--shadow-card); }

/* Testimonials & Footer */
.testimonials { background: var(--color-primary); color: #fff; }
.testimonials .section-title { color: #fff; }
.slider-container { max-width: 800px; margin: 0 auto; overflow: hidden; }
.slider-track { display: flex; width: 100%; transition: transform 0.5s; }
.slide { min-width: 100%; padding: 0 20px; text-align: center; }
.quote { font-size: 20px; font-style: italic; margin-bottom: 20px; opacity: 0.9; }

.footer { padding: 60px 0; background: #fff; border-top: 1px solid #eee; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.contact-info h3, .contact-form h3 { color: var(--color-primary); margin-bottom: 15px; }
input, textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: #f9f9fc; margin-bottom: 15px; }
.bottom-bar { background: var(--color-primary); color: #fff; text-align: center; padding: 15px; font-size: 13px; }

/* Listings Page */
.listings-header { padding-top: 160px; padding-bottom: 40px; text-align: center; color: #fff; }
.listings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.listing-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: 0.3s; }
.listing-card:hover { transform: translateY(-8px); }
.card-image { height: 220px; overflow: hidden; position: relative; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.listing-card:hover .card-image img { transform: scale(1.05); }
.card-badge { position: absolute; top: 15px; left: 15px; background: var(--color-accent); color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 12px; font-weight: 700; z-index: 2; }
.listing-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }

/* Tooltip */
[data-tooltip]:hover::after {
  content: attr(data-tooltip); position: absolute; top: 120%; left: 50%; transform: translateX(-50%);
  background: #182786; color: #fff; padding: 4px 8px; font-size: 11px; border-radius: 4px; pointer-events: none; white-space: nowrap; z-index: 99;
}

/* Hamburger & Mobile */
.hamburger-menu { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001; }
.hamburger-menu .bar { width: 25px; height: 3px; background: #fff; /* Tepedeyken Beyaz Çizgi */ margin: 5px 0; transition: 0.3s; }
.site-header.scrolled .hamburger-menu .bar { background: #182786; /* Aşağıda Mavi Çizgi */ }

/* ======================================================================
   5. HERO BÖLÜMÜ
   ====================================================================== */
.hero {
  position: relative; min-height: 80vh; display: flex; align-items: center;
  color: var(--color-white); overflow: hidden; padding-top: var(--header-offset);
}
.hero-content {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-xl); padding: 90px 0;
}
.hero-text {
  flex: 1; text-align: left; padding: var(--spacing-xl);
  border-left: 4px solid rgba(255, 255, 255, 0.90);
  background: linear-gradient(90deg, rgba(24, 39, 134, 0.42) 0%, rgba(24, 39, 134, 0) 100%);
}
.hero h1 {
  font-size: clamp(32px, 4.2vw, 56px); margin: 0 0 var(--spacing-sm) 0;
  letter-spacing: 1px; font-weight: 700;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.30);
}
.hero-subtitle {
  margin: 0 0 var(--spacing-md) 0; font-size: 14px; letter-spacing: 5px;
  text-transform: uppercase; opacity: 0.95; color: rgba(255, 255, 255, 0.92);
}
.hero-lead {
  margin: 0 0 var(--spacing-lg) 0; color: rgba(255, 255, 255, 0.92); max-width: 60ch;
}
.hero-image {
  flex: 1; display: flex; justify-content: flex-end; align-items: center; max-width: 640px;
}
.hero-image img {
  max-height: 520px; width: 100%; object-fit: cover; border-radius: 12px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
  transition: transform var(--transition-fast);
}
.hero-image img:hover { transform: scale(1.04); }

/* Butonlar */
.btn {
  display: inline-block; padding: 12px 18px; border-radius: 12px;
  font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  cursor: pointer; border: 2px solid transparent; transition: var(--transition-fast);
  font-family: var(--font-display);
}
.btn-primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.btn-primary:hover {
  background: var(--color-accent); border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(53, 15, 217, 0.3);
}
.btn-ghost { background: transparent; color: var(--color-white); border-color: rgba(255, 255, 255, 0.70); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.92); }
.btn-dark { background: var(--color-accent); color: var(--color-white); }
.btn-dark:hover { background: var(--color-accent-2); }

/* ======================================================================
   6. GENEL BÖLÜMLER (SECTIONS) & HİZMETLER
   ====================================================================== */
.section { padding: var(--spacing-section) 0; text-align: center; }

.section-title {
  font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 var(--spacing-xxl) 0;
  letter-spacing: 2px; display: inline-block; position: relative; color: var(--color-primary);
}
.section-title::after {
  content: ""; display: block; width: 56%; height: 2px; margin: var(--spacing-xs) auto 0;
  background: linear-gradient(90deg, var(--color-accent-2), var(--color-accent));
}

.section-panel {
  background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 18px; padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 18px 54px rgba(0,0,0,0.20); text-align: left;
}

/* Services */
.services { background-color: var(--color-bg-alt); }
.grid-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-lg);
}
.service-item {
  background: var(--color-white); padding: var(--spacing-xl); box-shadow: var(--shadow-card);
  text-align: left; border-radius: 16px; border: 1px solid rgba(24, 39, 134, 0.16);
  transition: transform 0.25s;
}
.service-item:hover { transform: translateY(-6px); }
.service-num { font-size: 42px; color: var(--color-accent-2); font-weight: 900; margin-bottom: var(--spacing-sm); }
.service-title { font-size: 18px; color: var(--color-primary); margin-bottom: 10px; }
.service-desc { font-size: 14px; color: var(--color-text-muted); }

/* ======================================================================
   7. HAKKIMDA (PREMIUM LAYOUT)
   ====================================================================== */
.about { padding-top: calc(var(--spacing-section) - 10px); }

.about-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--spacing-lg); flex-wrap: wrap; margin-bottom: var(--spacing-lg);
}
.about-head .section-title { margin-bottom: 0; }

.about-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: 13px;
  color: var(--color-primary); background: rgba(204, 205, 219, 0.34); border: 1px solid rgba(24, 39, 134, 0.16);
}

.about-hero {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--spacing-xl);
  align-items: center; text-align: left;
}
.about-lead { margin: 0 0 var(--spacing-md) 0; font-size: 16px; color: var(--color-text); }
.about-body { margin: 0 0 var(--spacing-sm) 0; color: var(--color-text-light); }
.about-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: var(--spacing-md); }

.about-portrait img {
  width: 100%; max-width: 420px; margin-left: auto; border-radius: 18px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(24, 39, 134, 0.16);
}

/* ======================================================================
   8. TESTIMONIALS & FOOTER
   ====================================================================== */
.testimonials { background-color: var(--color-primary); color: var(--color-white); }
.testimonials .section-title { color: var(--color-white); }
.testimonials .section-title::after { background: linear-gradient(90deg, rgba(15, 106, 217, 0.96), rgba(53, 15, 217, 0.96)); }

.slider-container { max-width: 820px; margin: 0 auto; overflow: hidden; position: relative; }
.slider-track { display: flex; width: 100%; transition: transform 0.5s ease; }
.slide { min-width: 100%; padding: 0 20px; text-align: center; }
.quote { font-size: 18px; font-style: italic; max-width: 800px; margin: 0 auto 20px; }
.slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.35); cursor: pointer; }
.dot.active { background: #fff; opacity: 1; }

/* Footer */
.footer { background-color: var(--color-white); padding: 70px 0; border-top: 1px solid var(--color-border-light); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-xl); }
.contact-info h3, .contact-form h3 { color: var(--color-primary); margin-bottom: 10px; }
.contact-title { color: var(--color-text-light); font-weight: 700; letter-spacing: 1px; }
.form-group { margin-bottom: 15px; }
input, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-border);
  background: rgba(204, 205, 219, 0.10); border-radius: 12px; font-family: inherit;
}
.bottom-bar { background-color: var(--color-primary); color: rgba(255,255,255,0.95); text-align: center; padding: 20px; font-size: 12px; }

/* ======================================================================
   9. İLANLAR SAYFASI (LISTINGS SPECIFIC)
   ====================================================================== */
.listings-header {
  padding-top: 140px; padding-bottom: 40px; text-align: center; color: var(--color-white);
}
.hero-title-small {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px);
  margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.hero-subtitle-small { font-size: 14px; letter-spacing: 3px; opacity: 0.9; margin-top: 10px; }

/* Grid Mantığı: 1 veya 2 ilan varsa ortalar, fazlaysa sola dizer */
.listings-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px;
}
.listings-grid:has(> :last-child:nth-child(1)) { display: flex; justify-content: center; }
.listings-grid:has(> :last-child:nth-child(2)) { display: flex; justify-content: center; flex-wrap: wrap; }
.listings-grid:has(> :last-child:nth-child(-n+2)) .listing-card { width: 100%; max-width: 400px; }

.listing-card {
  background: var(--color-white); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-card); border: 1px solid rgba(24, 39, 134, 0.1);
  display: flex; flex-direction: column; transition: transform 0.3s ease;
}
.listing-card:hover { transform: translateY(-8px); }
.card-image { position: relative; height: 220px; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.listing-card:hover .card-image img { transform: scale(1.05); }
.card-badge {
  position: absolute; top: 15px; left: 15px; background: var(--color-accent);
  color: white; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; z-index: 2;
}
.badge-rent { background: #28a745; }
.listing-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.listing-body h3 { margin: 0 0 8px 0; font-size: 18px; color: var(--color-primary); }
.listing-location { font-size: 14px; color: var(--color-text-muted); margin-bottom: 15px; }
.listing-details {
  display: flex; gap: 15px; font-size: 13px; font-weight: 600; color: var(--color-text);
  margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--color-border-light);
}
.listing-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.price { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--color-accent-2); }
.btn-text { font-size: 13px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; }

/* ======================================================================
   10. TOOLTIPS (İPUCU BALONCUKLARI)
   ====================================================================== */
.logo-link, .mini-phone-btn { position: relative; }

/* Tooltip Baloncuğu */
.logo-link:hover::after, .mini-phone-btn:hover::after {
  content: attr(data-tooltip);
  position: absolute; top: 120%; left: 50%; transform: translateX(-50%);
  background-color: #182786; color: #ffffff;
  padding: 5px 10px; font-size: 12px; border-radius: 4px;
  white-space: nowrap; pointer-events: none; z-index: 99;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  animation: fadeInTooltip 0.2s ease-in-out;
}

/* Tooltip Ok İşareti */
.logo-link:hover::before, .mini-phone-btn:hover::before {
  content: ""; position: absolute; top: 105%; left: 50%; transform: translateX(-50%);
  border-width: 6px; border-style: solid;
  border-color: transparent transparent #182786 transparent;
  animation: fadeInTooltip 0.2s ease-in-out;
}

@keyframes fadeInTooltip {
  from { opacity: 0; transform: translate(-50%, 5px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ======================================================================
   11. HAMBURGER MENÜ VE MOBİL (RESPONSIVE)
   ====================================================================== */
.hamburger-menu {
  display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001;
}
.hamburger-menu .bar {
  display: block; width: 25px; height: 3px; background-color: #182786;
  margin: 5px 0; border-radius: 3px; transition: all 0.3s ease-in-out;
}


/* ======================================================================
   MOBİL AYARLARI (TEMİZLENMİŞ & FİNAL VERSİYON)
   ====================================================================== */

@media (max-width: 768px) {

  /* 1. HEADER & BANNER (Filtresiz, Net Görünüm) */
  .site-header {
    /* Arkaplan rengini ve karışım modunu sıfırlıyoruz */
    background-blend-mode: normal !important;
    
    /* Sadece resmi koyuyoruz (Filtre/Perde yok) */
    background-image: url('assets/banner1.jpeg') !important;
    
    /* Görseli ortala ve alanı kapla */
    background-position: 45% 145% !important;
    background-size: 200% !important;
    background-repeat: no-repeat !important;
    
    min-height: 120px;
  }

  /* Aşağı inince (Scrolled) */
  .site-header.scrolled {
    background-image: url('assets/banner1.jpeg') !important;
  }

  .site-header .container {
    padding-left: 5%;
    padding-right: 5%;
  }

  .header-inner {
    flex-wrap: wrap;
    min-height: 100px;
  }

  /* 2. SOL KISIM (LOGO + BİLGİLER) */
  .header-branding {
    order: 1;
    flex: 1;
    gap: 15px;
  }

  .brand-logo-square {
    width: 60px;
    height: 60px;
  }

  .mini-phone-btn {
    font-size: 11px;
    padding: 4px 8px;
  }

  /* 3. HAMBURGER MENÜ (HER DURUMDA MAVİ) */
  .hamburger-menu {
    display: block;
    order: 2;
    margin-left: auto;
  }

  /* Çubuklar: Tepede de olsa, aşağı da inse hep MAVİ */
  .hamburger-menu .bar {
    background-color: #ffffff !important;
  }
  .site-header.scrolled .hamburger-menu .bar {
    background-color: #ffffff !important;
  }
  .hamburger-menu.active .bar {
    background-color: #ffffff !important;
  }

  /* Animasyon */
  .hamburger-menu.active .bar:nth-child(2) { opacity: 0; }
  .hamburger-menu.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger-menu.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* 4. AÇILIR MENÜ PANELİ (HEADER ALTINDA) */
  .site-nav {
    position: absolute !important;
    top: 100% !important; /* Header'ın bittiği yer */
    left: 0 !important;
    width: 100% !important;
    height: auto !important; /* İçerik kadar uza */
    background: #ffffff !important;
    
    padding: 20px 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    border-top: 1px solid rgba(0,0,0,0.05);
    
    /* Gizleme Efekti */
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 998;
    order: 3;

    display: flex !important;      /* Flex yapısını koru */
    flex-direction: column !important; /* Mobilde ALT ALTA dizilsin */
    align-items: center !important;
  }

  .site-nav.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .site-nav a {
    color: #182786 !important; /* Linkler hep mavi */
    font-size: 16px;
    font-weight: 700;
  }
  
  /* Mobilde ikonlar menünün içinde ortalı */
  .site-nav .mini-social-group {
    justify-content: center;
    margin-top: 15px;
  }
  .site-nav .mini-social-group .mini-icon {
    color: #182786;
  }

  /* 5. HAKKIMDA BÖLÜMÜ (ORTALI & ALT ALTA) */
  .about-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Yazı Üstte */
  .about-hero > div:first-child {
    order: 1;
    width: 100%;
  }

  /* Butonlar Ortada */
  .about-actions {
    justify-content: center !important;
    margin-bottom: 30px;
  }

  /* Resim Altta */
  .about-portrait {
    order: 2;
    width: 100%;
    margin: 0 !important;
    display: flex;
    justify-content: center;
  }

  .about-portrait img {
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  /* Diğer Bölümler */
  .hero-content {
    flex-direction: column-reverse;
    padding: 40px 0;
    gap: 30px;
  }
  .hero-image {
    width: 60%;
    justify-content: center;
  }
  .listings-header {
    padding-top: 180px;
  }
  .about-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .about-badges {
    justify-content: center;
  }
  .section-title {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
  }
  .footer-inner {
    flex-direction: column;
  }
  .mini-phone-btn { top: 45px; left: 42.5px;  }
}

/* Küçük Ekranlar (480px altı) */
@media (max-width: 480px) {
  .hero-image { width: 35%; }
  .brand-logo-square { width: 50px; height: 50px; }
  .mini-phone-btn { font-size: 12px; }
}