@charset "UTF-8";
/* ==========================================================================
   serviyet.com — ANASAYFA
   public/css/anasayfa.css

   Hero slider + banner grid'e özel stiller.
   Tema token'ları (--srv-*) tema.css'ten gelir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TAM GENİŞLİK ÇIKIŞ
   header.php: <main><div class="container"> → Bootstrap container dar tutar.
   Hero tam genişlik istiyor. "Negative margin breakout" kalıbı:
   container'ın padding'ini sıfırlayıp kendi max-width'ini yönetiyor.
   main.css'teki "main { padding: 28px 0 60px }" üstten boşluk bırakıyor —
   hero bunu sıfırlıyor (anasayfaya özel).
   -------------------------------------------------------------------------- */
.srv-hero-bolum {
  /* Container içinde kalıyor.
     max-width + negatif margin ile mevcut Bootstrap container'ını genişletiyoruz.
     PHP tarafında: AnasayfaController anasayfa görünümünde hero bölümünü
     container kapanışı/açılışı arasına alacak (3. adımda).
     Şimdilik önizleme için container içinde çalışır versiyon. */
  margin-top: -28px;
  overflow: hidden;   /* yatay taşmayı kapat */
  background: #E8EEF2;
}

/* Bootstrap 5 container'ı 12px gutter kullanır, ama 991px üstünde sabit
   olduğu için gerçek kenar mesafesini ölçmek daha güvenli.
   Basit alternatif: hero kendi max-width'ini yönetir, container'dan bağımsız. */
.srv-hero-ic {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 20px 0;  /* padding hero-bolum'dan buraya taşındı */
}

/* --------------------------------------------------------------------------
   HERO DÜZENİ  (50 / 50 — sol slider / sağ banner grid)
   -------------------------------------------------------------------------- */
.srv-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  height: 502px;
}

/* --------------------------------------------------------------------------
   SOL: SLİDER
   Görseller admin panelden yükleniyor (carousel tablosu).
   Slider burada sadece görsel çerçeve — JS carousel.js yönetiyor.
   -------------------------------------------------------------------------- */
.srv-slider {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #C8DDE8;
  height: 100%;
}

.srv-slider-track {
  display: flex;
  height: 100%;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

.srv-slide {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Görseller tam kaplar */
.srv-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Görselsiz slide (fallback — bu aşamada aktif) */
.srv-slide--fallback {
  display: flex;
  align-items: center;
  padding: 40px 44px;
}

/* Slide renkler — admin görseli olmadığında kullanılır */
.srv-slide--1 { background: linear-gradient(135deg, #0B4D6B 0%, #0e6a90 55%, #00B4A6 100%); }
.srv-slide--2 { background: linear-gradient(135deg, #072D40 0%, #0B4D6B 60%, #145e7a 100%); }
.srv-slide--3 { background: linear-gradient(135deg, #1a6b50 0%, #00956b 55%, #00B4A6 100%); }

/* Dekoratif daire (fallback slide'larında) */
.srv-slide--1::after {
  content: ''; position: absolute; right: -20px; top: -40px;
  width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255,255,255,.06); pointer-events: none;
}
.srv-slide--2::after {
  content: ''; position: absolute; right: 30px; bottom: -60px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(0,180,166,.12); pointer-events: none;
}

/* Fallback: metin katmanı */
.srv-slide-icerik {
  position: relative; z-index: 2;
  max-width: 260px;
}
.srv-slide-konu {
  font-family: var(--srv-font-baslik);
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: 10px;
}
.srv-slide-baslik {
  font-family: var(--srv-font-baslik);
  font-size: 28px; font-weight: 800;
  color: #fff;
  line-height: 1.15; letter-spacing: -.5px;
  margin-bottom: 8px;
}
.srv-slide-baslik em { color: #E8A020; font-style: normal; }
.srv-slide-alt {
  font-family: var(--srv-font-govde);
  font-size: 13px; color: rgba(255,255,255,.75);
  line-height: 1.55; margin-bottom: 20px;
}
.srv-slide-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; border-radius: 6px;
  background: #E8A020; color: #1a0e00;
  font-family: var(--srv-font-govde);
  font-size: 13px; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: background var(--srv-gecis), transform .12s;
}
.srv-slide-cta:hover { background: #d4901c; transform: translateY(-1px); color: #1a0e00; }
.srv-slide-cta.outline {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.4);
}
.srv-slide-cta.outline:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Fallback: dekoratif SVG (sağ yarı) */
.srv-slide-gorseli {
  position: absolute; right: 0; top: 0; bottom: 0; width: 55%;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 24px; overflow: hidden; pointer-events: none;
}

/* Slider kontrolleri */
.srv-slider-nokta {
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 10;
}
.srv-nokta {
  width: 8px; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.4);
  border: none; cursor: pointer;
  transition: background .2s, width .2s;
  padding: 0;
}
.srv-nokta.acik { background: #fff; width: 22px; border-radius: 4px; }

.srv-slider-ok {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
  transition: background var(--srv-gecis);
  padding: 0;
}
.srv-slider-ok:hover { background: rgba(255,255,255,.32); }
.srv-slider-ok.onceki { left: 12px; }
.srv-slider-ok.sonraki { right: 12px; }

/* --------------------------------------------------------------------------
   SAĞ: ASİMETRİK BANNER GRİD
   3 kolon × 2 satır:
     Üst:  B1 2/3 geniş | B2 1/3 dar
     Alt:  B3 1/3 dar   | B4 2/3 geniş
   -------------------------------------------------------------------------- */
.srv-banner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 247px 247px;
  gap: 8px;
  height: 502px;
}

.srv-b1 { grid-column: 1 / 3; grid-row: 1; } /* üst sol 2/3 */
.srv-b2 { grid-column: 3 / 4; grid-row: 1; } /* üst sağ 1/3 */
.srv-b3 { grid-column: 1 / 2; grid-row: 2; } /* alt sol 1/3 */
.srv-b4 { grid-column: 2 / 4; grid-row: 2; } /* alt sağ 2/3 */

.srv-banner {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: transform var(--srv-gecis), box-shadow var(--srv-gecis);
}
.srv-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Görsel banner (B1, B4) */
.srv-banner--gorsel img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Metin banner (B2, B3) */
.srv-banner--metin {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
}

/* Dekoratif daireler */
.srv-banner--metin::before {
  content: ''; position: absolute; top: -24px; right: -24px;
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255,255,255,.1); pointer-events: none;
}
.srv-banner--metin::after {
  content: ''; position: absolute; bottom: -16px; left: -16px;
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.07); pointer-events: none;
}

/* Banner renkleri */
.srv-b2-renk { background: linear-gradient(140deg, #0a2a5a 0%, #0d4a7a 60%, #0a7a8a 100%); }
.srv-b3-renk { background: linear-gradient(135deg, #0a6a8a 0%, #0aaa8a 50%, #0ab870 100%); }

/* Banner içerik */
.srv-banner-icerik { position: relative; z-index: 2; }
.srv-banner-konu {
  font-family: var(--srv-font-govde);
  display: block; font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 7px;
}
.srv-banner-baslik {
  font-family: var(--srv-font-baslik);
  font-size: 18px; font-weight: 800;
  color: #fff; line-height: 1.2;
  margin-bottom: 5px;
}
.srv-banner-alt {
  font-family: var(--srv-font-govde);
  font-size: 10.5px; color: rgba(255,255,255,.65);
  margin-bottom: 14px;
}
.srv-banner-buton {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  font-family: var(--srv-font-govde);
  font-size: 12px; font-weight: 700;
  padding: 7px 16px; border-radius: 6px;
  transition: background var(--srv-gecis);
}
.srv-banner-buton:hover { background: rgba(255,255,255,.25); color: #fff; }
.srv-banner-buton--beyaz {
  background: #fff; color: #0a6a8a; border-color: #fff;
  border-radius: 20px;
}
.srv-banner-buton--beyaz:hover { background: #e8f9f4; color: #0a6a8a; }

/* Büyük dekoratif ikon (banner sağ üst) */
.srv-banner-dekor {
  position: absolute; top: 12px; right: 16px;
  opacity: .18; pointer-events: none;
}

/* ==========================================================================
   RESPONSİVE
   ========================================================================== */

/* 1100px: banner grid satır yüksekliği kısalt */
@media (max-width: 1100px) {
  .srv-hero-layout { height: 440px; }
  .srv-banner-grid { grid-template-rows: 216px 216px; height: 440px; }
}

/* 900px: yatay → dikey stack */
@media (max-width: 900px) {
  .srv-hero-bolum { /* margin: tema.css'ten geliyor, burada sıfırlanmaz */ }
  .srv-hero-layout { grid-template-columns: 1fr; height: auto; gap: 12px; }
  .srv-slider { height: 320px; }
  .srv-banner-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px;
    height: auto;
  }
  /* Asimetrik grid tablete sığmaz — 2×2 eşit */
  .srv-b1, .srv-b2, .srv-b3, .srv-b4 { grid-column: auto; grid-row: auto; }
}

/* 600px: banner 2 kolon → 1 kolon */
@media (max-width: 600px) {
  .srv-slider { height: 260px; }
  .srv-slide-baslik { font-size: 22px; }
  .srv-banner-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .srv-banner--metin { min-height: 160px; }
  .srv-banner--gorsel { min-height: 200px; }
  .srv-hero-bolum { padding: 8px 8px 0; }
}