/* index.html sayfasına özel stiller */

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(160deg, var(--renk-ana-acik) 0%, var(--renk-zemin) 70%);
  padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px);
  overflow: hidden;
}

.hero__izgara {
  display: grid;
  gap: 40px;
  align-items: center;
}

.hero__metin { min-width: 0; }

.hero h1 { margin-bottom: 0.45em; }

.hero__vurgu { color: var(--renk-vurgu-koyu); }

/* Kartvizitteki hizmet vurgusu: kısa rozet satırı */
.hero__hizmetler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.hero__hizmetler li {
  padding: 5px 12px;
  border: 1px solid var(--renk-kenar);
  border-radius: 999px;
  background: var(--renk-zemin);
  color: var(--renk-ana-koyu);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}

.hero__aciklama {
  font-size: 1.08rem;
  color: var(--renk-metin-soluk);
  max-width: 560px;
  margin-bottom: 28px;
}

.hero__butonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.hero__guven {
  display: grid;
  gap: 10px;
}

.hero__guven li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.hero__guven svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--renk-basari);
  color: var(--renk-zemin);
}

.hero__gorsel {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.hero__svg { width: 100%; height: auto; }

.hs-zemin { fill: var(--renk-ana-acik); }
.hs-govde { fill: var(--renk-zemin); stroke: var(--renk-ana); stroke-width: 5; }
.hs-cizgi { stroke: var(--renk-ana); stroke-width: 4; }
.hs-ekran { fill: var(--renk-ana-koyu); }
.hs-dugme { fill: var(--renk-kenar); }
.hs-dugme-vurgu { fill: var(--renk-vurgu); }
.hs-kapak { fill: var(--renk-zemin-alt); stroke: var(--renk-ana); stroke-width: 6; }
.hs-cam { fill: var(--renk-ana-acik); stroke: var(--renk-kenar); stroke-width: 3; }
.hs-dalga { stroke: var(--renk-ana); stroke-width: 4; stroke-linecap: round; fill: none; }
.hs-ayak { fill: var(--renk-ana-koyu); }
.hs-rozet { fill: var(--renk-vurgu); stroke: var(--renk-zemin); stroke-width: 6; }
.hs-anahtar { fill: var(--renk-zemin); }

/* 4 güven maddesi: dar ekranda alt alta, genişte 2×2 */
@media (min-width: 560px) {
  .hero__guven { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 28px; }
}

@media (min-width: 960px) {
  .hero__izgara { grid-template-columns: 1.15fr 0.85fr; gap: 56px; }
}

/* ---------- Hizmet kartları ---------- */

.hizmet-karti {
  display: flex;
  flex-direction: column;
}

.hizmet-karti h3 { margin-bottom: 0.4em; }

.hizmet-karti p { margin-bottom: 18px; }

.hizmet-karti__bag {
  margin-top: auto;
  font-weight: 600;
  display: inline-flex;
  gap: 6px;
  align-self: flex-start;
}

.hizmet-karti--cagri {
  background: var(--renk-ana-acik);
  border-color: var(--renk-ana-acik);
  justify-content: center;
}

.hizmet-karti--cagri .buton { align-self: flex-start; margin-top: auto; }

/* 4'lü ızgarada dar sütunlar için biraz daha sıkı iç boşluk */
@media (min-width: 960px) {
  .hizmet-listesi .hizmet-karti { padding: 24px; }
}

/* ---------- Süreç ---------- */

.surec__adim {
  position: relative;
  text-align: center;
  padding: 0 8px;
}

.surec__no {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--renk-ana);
  color: var(--renk-zemin);
  font-family: var(--font-baslik);
  font-size: 1.35rem;
  font-weight: 700;
  box-shadow: 0 0 0 8px var(--renk-ana-acik);
  position: relative;
  z-index: 1;
}

.surec__adim h3 { margin-bottom: 0.4em; }

.surec__adim p { color: var(--renk-metin-soluk); margin: 0; }

@media (min-width: 960px) {
  .surec__adim:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28px;
    left: calc(50% + 40px);
    width: calc(100% - 80px + 24px);
    border-top: 2px dashed var(--renk-kenar);
  }
}

/* ---------- Neden biz ---------- */

.avantajlar .kart h3 { margin-bottom: 0.4em; }

/* ---------- Yaptığımız işler önizleme (galeri bileşeni galeri.css'te) ---------- */


/* ---------- Google yorumları ----------
   Bölüm Google İşletme Profili açılana kadar hidden'dır. Kendi zemini alt
   tondadır; görünür olduğunda ardından gelen .bolum zeminleri tersine döner.
   Böylece gizliyken mevcut sıra (beyaz / alt / beyaz) bozulmaz, görünürken
   beyaz / alt / beyaz / alt sırası kendiliğinden oluşur. */

.google-yorumlar { background: var(--renk-zemin-alt); }

.google-yorumlar:not([hidden]) ~ .bolum { background: var(--renk-zemin-alt); }
.google-yorumlar:not([hidden]) ~ .bolum--alt { background: var(--renk-zemin); }

.google-yorumlar__baslik { margin-bottom: 28px; }

.google-yorumlar__yildizlar {
  width: 110px;
  height: auto;
  margin: 0 auto 16px;
  color: var(--renk-vurgu);
}

.google-yorumlar__butonlar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 479px) {
  .google-yorumlar__butonlar .buton { width: 100%; }
}

/* ---------- SSS (ortak .sss bileşeni style.css'te) ---------- */

.sss__alt {
  text-align: center;
  margin: 28px 0 0;
  color: var(--renk-metin-soluk);
}


.sss__alt a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- İletişim ve konum (harita bileşeni harita.css'te) ---------- */

.iletisim-konum {
  display: grid;
  gap: 24px;
  align-items: stretch;
}

.iletisim-konum__bilgi {
  font-style: normal;
  min-width: 0;
}

.iletisim-konum__liste {
  display: grid;
  gap: 22px;
}

.iletisim-konum__liste li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.iletisim-konum__ikon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--yaricap-kucuk);
  background: var(--renk-ana-acik);
  color: var(--renk-ana);
}

.iletisim-konum__ikon svg { width: 22px; height: 22px; }

.iletisim-konum__ikon--whatsapp {
  background: var(--renk-whatsapp);
  color: var(--renk-zemin);
}

.iletisim-konum__etiket {
  display: block;
  font-size: 0.85rem;
  color: var(--renk-metin-soluk);
}

.iletisim-konum__deger {
  display: inline-block;
  font-weight: 600;
  color: var(--renk-metin);
  overflow-wrap: anywhere;
}

a.iletisim-konum__deger {
  color: var(--renk-ana);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a.iletisim-konum__deger:hover { color: var(--renk-vurgu-koyu); }

/* Servis Hattı numarası kartvizitteki gibi büyük ve belirgin */
.iletisim-konum__deger--hat {
  font-family: var(--font-baslik);
  font-size: clamp(1.3rem, 4.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.iletisim-konum__harita { min-width: 0; }

@media (min-width: 960px) {
  .iletisim-konum { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px; }
}

/* Çağrı bandı ortak bileşendir (style.css). */

@media (max-width: 479px) {
  .hero__butonlar .buton { width: 100%; }
}