/* GÜNCEL Renk paleti ve tipografi */
:root{
  --bg:#f4f6f8;          /* hafif, ferah ana arka plan */
  --header-bg:#f7f9fb;   /* header için açık ton (koyu mavi değil) */
  --surface:#fbfdff;     /* kartlar için hafif tonlu arka plan (tam beyaz değil) */
  --muted:#6b7280;       /* alt metin */
  --text:#111827;        /* koyu gri ana metin */
  --accent:#f5b400;      /* soft elektrikçi vurgusu (sarı-turuncu) */
  --accent-strong:#e6a800;
  --border:rgba(15,23,42,0.05);
  --radius:12px;

  /* CTA renkleri (mavi tonları) */
  --cta-blue:#0b74ff;
  --cta-blue-dark:#095ad6;
}

/* Font ve render iyileştirmeleri - Inter kullanılacak, yüklenme hissi azaltıldı */
html,body{
  overflow-x:hidden; /* yatay kaymayı kesinlikle engelle */
  background:var(--bg);
  color:var(--text);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6; /* okunaklı satır aralığı */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
  box-sizing:border-box;
}

/* Başlık ağırlıkları: body'den daha kalın ama aşırı değil */
h1,h2,h3,h4{ font-weight:600; letter-spacing:0.01em; color:var(--text); line-height:1.25; margin:0 0 .5rem 0; }

/* Container */
.container{
  max-width:var(--container);
  padding:0 1rem;
  margin:0 auto;
}

/* HEADER */
.site-header{
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:20;
  padding:0.4rem 0;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap);
  padding:0.9rem 0;
  flex-wrap: wrap; /* küçük ekranlarda alt alta geçişe izin ver */
  align-items: center;
  min-width: 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.85rem;
  min-width:0;
  padding:0.25rem 0.25rem;
}
.brand-text{ display:flex; flex-direction:column; gap:0.08rem; min-width:0; }
.brand-title{ font-size:1rem; color:var(--text); margin:0; }
.tagline{ margin:0; color:var(--muted); font-weight:500; font-size:0.9rem; }

/* Logo boyutlandırma ve kalite için */
.logo{
  display:block;
  width:auto;
  height:auto;
  object-fit:contain;
  max-width:70px; /* Desktop */
  flex-shrink:0;
}

/* Tablet */
@media (max-width:900px){
  .logo{ max-width:60px; }
}

/* Mobil: logo büyüklüğü sınırı 60-65px arası (isteğe göre 65) */
@media (max-width:600px){
  .logo{ max-width:65px; } /* mobilde daha belirgin ama taşma yapmaz */
  .header-inner{ justify-content:center; gap:0.5rem; }
  .brand{ justify-content:center; }
  .container{ padding:0 0.8rem; }
}

/* CTA buton - vurgu ve okunaklılık */
.call-btn{
  display:inline-block;
  background:var(--cta-blue);
  color:#fff;
  padding:0.6rem 0.9rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 6px 18px rgba(11,116,255,0.12);
  border:1px solid rgba(11,116,255,0.08);
  transition:background .15s ease, transform .08s ease;
}
.call-btn:hover{ background:var(--cta-blue-dark); transform:translateY(-1px); }

/* HERO */
.hero{
  padding:2.25rem 0;
  text-align:center;
}
.hero .lead{color:var(--muted);margin-top:0.5rem}

/* SECTIONS */
.section{padding:1.75rem 0}
.section.alt{background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);}

/* Hizmetler ızgarası */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:1rem;
}
.service-card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:1.25rem; /* daha ferah */
  box-shadow:0 8px 18px rgba(16,24,40,0.04);
  display:flex;
  gap:0.9rem;
  align-items:flex-start;
  border:1px solid rgba(10,20,40,0.02);
}
.service-card .icon{
  font-size:1.35rem;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#fff,#fff7e6);
  border-radius:10px;
  color:var(--accent);
  flex-shrink:0;
}
.service-card h4{ margin:0; font-weight:600; font-size:1rem; }
.service-card p{ margin:0; color:var(--muted); font-size:0.95rem; line-height:1.45; }

/* Responsive: mobilde kartlar tek sütun ve padding optimize */
@media (max-width:600px){
  .services-grid{ grid-template-columns:1fr; gap:0.9rem; }
  .service-card{ padding:1rem; }
  .hero{ padding:1.5rem 0; }
}

/* Harita yer tutucu ve diğer küçük iyileştirmeler */
.map-placeholder{
  margin-top:1rem;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg,#eef6ff,#fff);
  min-height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(11,116,255,0.06);
}

/* Responsive Google Maps kapsayıcısı */
.map-container{
  width:100%;
  max-width:100%;
  aspect-ratio:16/9; /* modern tarayıcılarda düzgün oran sağlar */
  position:relative;
  overflow:hidden;
  border-radius:12px;
}
.map-container iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Masaüstünde haritayı daha kompakt tut */
@media (min-width: 900px) {
  .map-container{
    height: 350px;
    max-height: 350px;
    aspect-ratio: auto; /* aspect-ratio devre dışı bırakılarak sabit yükseklik sağlanır */
  }
  .map-container iframe{
    height:100%;
  }
}

/* Çalışmalarımız - Galeri */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:1rem;
}
.gallery-item{
  background:var(--surface);
  border-radius:12px;
  overflow:hidden;
  display:block;
  aspect-ratio:4/3; /* aynı yükseklik için oran verildi */
  box-shadow:0 6px 18px rgba(16,24,40,0.04);
  border:1px solid rgba(10,20,40,0.02);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover; /* önemli: kesme ile boşluk bırakmaz */
  object-position:center;
  display:block;
  transition:transform .35s ease;
}
.gallery-item:hover img{ transform:scale(1.03); }
.section-lead{ color:var(--muted); margin-top:0.25rem; }

/* Responsive: tablet 2 sütun, mobil 1 sütun (düzeltmeler: mobilde sabit yükseklik ve merkezleme) */
@media (max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  /* Mobil: tek sütun, sabit ve tutarlı yükseklik, içerik ortalanmış */
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-item{
    aspect-ratio: unset; /* mobilde sabit yükseklik kullanılacak */
    height:220px; /* sabit, tutarlı yükseklik */
    display:flex; /* içeriği tam ortala ve taşmayı önle */
    align-items:center;
    justify-content:center;
  }
  .gallery-item img{
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    object-fit:cover; /* kapsayıcıyı tamamen doldurur, boşluk olmaz */
    object-position:center;
    display:block;
  }
}

/* Küresel görüntü netliği */
img{ image-rendering: auto; -webkit-font-smoothing:antialiased; }