/* ============================================================
   INDEX.CSS — Anasayfaya özel bölümler
   (hero slider, hakkımızda, misyon, hizmetler, Club Card,
    şubeler, iletişim). site.css'ten SONRA yüklenir.
   ============================================================ */

/* ============================================================
   HERO SLIDER
   ============================================================ */
.pg-hero{ position:relative; background:var(--pg-navy); }
.pg-slide{
  position:relative; min-height:660px; height:100vh; max-height:900px;
  display:flex; align-items:center; overflow:hidden;
}
.pg-slide-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }

/* ---- Slayt fotoğrafları ----
   Üç slayt da aynı istasyonun gündüz çekilmiş drone fotoğrafı: hepsi parlak, hero
   yazıları ise beyaz. Karartma tek bir reçetede (--pg-shade) toplandı, üç slayt da
   onu kullanıyor — biri değişince hepsi değişir.
   Reçete iki katman: (1) yazının durduğu sol tarafta yumuşak bir spot karartma,
   (2) tüm zemine ince bir tül (üstte navbar, altta slayt noktaları okunsun diye
   uçlarda biraz daha koyu). Fotoğrafın sağ ve orta kısmı böylece açıkta kalıyor. */
.pg-slide-bg{
  --pg-shade:
    radial-gradient(1150px 780px at 4% 52%,
      rgba(7,19,33,.80) 0%,
      rgba(7,19,33,.56) 44%,
      rgba(7,19,33,0) 74%),
    linear-gradient(180deg,
      rgba(7,19,33,.52) 0%,
      rgba(7,19,33,.20) 34%,
      rgba(7,19,33,.30) 70%,
      rgba(7,19,33,.48) 100%);
}
.pg-slide-1 .pg-slide-bg,
.pg-slide-2 .pg-slide-bg,
.pg-slide-3 .pg-slide-bg{ background-size:cover; background-repeat:no-repeat; }

/* Kadrajlar: her fotoğrafın ilgi merkezi (kanopi / totem / sahil) yazının
   olmadığı aydınlık tarafa denk gelsin diye ayrı ayrı ayarlandı. */
.pg-slide-1 .pg-slide-bg{
  background-image:var(--pg-shade),url('../Upload/Resimler/slider1.jpeg?v=20260916');
  background-position:62% center;
}
.pg-slide-2 .pg-slide-bg{
  background-image:var(--pg-shade),url('../Upload/Resimler/slider2.jpeg?v=20260916');
  background-position:58% center;
}
.pg-slide-3 .pg-slide-bg{
  background-image:var(--pg-shade),url('../Upload/Resimler/slider3.jpeg?v=20260916');
  background-position:46% center;
}
/* Asfalt dokusu: fotoğrafların üstünde gürültü yapmasın diye iyice hafifledi */
.pg-slide-bg::after{
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.10) 0 2px,transparent 2px 26px);
}
.pg-slide-art{
  position:absolute; right:-40px; bottom:-30px; width:min(46vw,560px);
  opacity:.13; color:#fff; pointer-events:none;
}
.pg-slide .container{ position:relative; z-index:3; }
.pg-hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  color:#fff; font-weight:600; font-size:.95rem;
  padding:.42rem 1rem; border-radius:100px; backdrop-filter:blur(6px);
}
/* Karartma inceldiği için yazılar fotoğrafın açık yerlerine denk gelebiliyor;
   yumuşak gölge harfleri her zeminde ayırıyor. */
.pg-hero-title{
  color:#fff; font-size:clamp(2.8rem,6.6vw,5.4rem);
  margin:20px 0 16px; max-width:15ch;
  text-shadow:0 2px 30px rgba(5,16,28,.55), 0 1px 3px rgba(5,16,28,.38);
}
.pg-hero-text{
  color:rgba(255,255,255,.90); font-size:1.16rem; max-width:52ch; margin-bottom:30px;
  text-shadow:0 1px 16px rgba(5,16,28,.62), 0 1px 2px rgba(5,16,28,.35);
}
.pg-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
/* GSAP devralmadan önce içerik gizli dursun; aksi halde ilk boyamada
   bir an görünüp kayboluyor. JS kapalıysa opacity:1 fallback devrede. */
.pg-slide [data-anim]{ opacity:0; }
.pg-slide-bg{ will-change:transform; }

/* Owl kontrolleri */
.hero-slider .owl-nav{ margin:0; }
.hero-slider .owl-nav button.owl-prev,
.hero-slider .owl-nav button.owl-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important; font-size:1.5rem !important; display:grid; place-items:center;
  transition:background .25s ease;
}
.hero-slider .owl-nav button:hover{ background:var(--pg-fire) !important; border-color:var(--pg-fire) !important; }
.hero-slider .owl-nav .owl-prev{ left:26px; }
.hero-slider .owl-nav .owl-next{ right:26px; }
.hero-slider .owl-dots{ position:absolute; left:0; right:0; bottom:48px; }
.hero-slider .owl-dots .owl-dot span{
  width:34px; height:4px; border-radius:4px; background:rgba(255,255,255,.34); margin:0 5px;
}
.hero-slider .owl-dots .owl-dot.active span{ background:var(--pg-amber); width:52px; }

/* ============================================================
   HAKKIMIZDA
   ============================================================ */
.pg-about-visual{ position:relative; }
.pg-about-img{
  border-radius:20px; height:440px;
  background:
    radial-gradient(520px 320px at 24% 18%,rgba(245,165,36,.34),transparent 60%),
    linear-gradient(150deg,#12283F,#22496E);
  position:relative; overflow:hidden;
  display:grid; place-items:center; color:rgba(255,255,255,.20); font-size:8rem;
}
.pg-about-img::after{
  content:""; position:absolute; inset:0; opacity:.20;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 34px);
}
/* Kutunun içindeki gerçek istasyon fotoğrafı (ikonun yerini aldı) */
.pg-about-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pg-badge-year{
  position:absolute; right:-14px; bottom:-22px;
  background:var(--pg-fire); color:#fff; border-radius:16px;
  padding:20px 24px; text-align:center; box-shadow:0 18px 38px rgba(238,106,30,.35);
}
.pg-badge-year strong{ font-family:'Barlow Condensed',sans-serif; font-size:2.7rem; line-height:1; display:block; }
.pg-badge-year span{ font-size:.86rem; font-weight:600; opacity:.92; }
.pg-check{ list-style:none; padding:0; margin:24px 0 30px; }
.pg-check li{ display:flex; gap:11px; align-items:flex-start; margin-bottom:11px; color:var(--pg-ink); font-weight:500; }
.pg-check i{ color:var(--pg-green); font-size:1.2rem; margin-top:3px; }

.pg-counter{ padding:8px 0; }
.pg-counter b{
  font-family:'Barlow Condensed',sans-serif; font-size:3rem; color:var(--pg-navy);
  line-height:1; display:block; font-variant-numeric:tabular-nums;
}
.pg-counter b i{ font-style:normal; color:var(--pg-fire); }
.pg-counter span{ font-size:.95rem; font-weight:600; }

/* ============================================================
   MİSYON & VİZYON
   ============================================================ */
.pg-mv{
  background:#fff; border-radius:var(--pg-r); padding:34px 30px; height:100%;
  border:1px solid var(--pg-line); transition:transform .3s ease, box-shadow .3s ease;
}
.pg-mv:hover{ transform:translateY(-5px); box-shadow:0 22px 46px rgba(16,38,63,.10); }
.pg-mv-icon{
  width:58px; height:58px; border-radius:15px; display:grid; place-items:center;
  font-size:1.6rem; margin-bottom:18px; background:var(--pg-soft); color:var(--pg-navy);
}
.pg-mv.is-featured{ background:var(--pg-navy); border-color:transparent; }
.pg-mv.is-featured h3,.pg-mv.is-featured p{ color:#fff; }
.pg-mv.is-featured p{ color:rgba(255,255,255,.80); }
.pg-mv.is-featured .pg-mv-icon{ background:var(--pg-fire); color:#fff; }

/* ============================================================
   ÜRÜN & HİZMETLER
   ============================================================ */
.pg-service{
  background:#fff; border-radius:var(--pg-r); padding:30px 26px; height:100%;
  border:1px solid var(--pg-line); position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pg-service::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--pg-fire),var(--pg-amber));
  transform:scaleY(0); transform-origin:top; transition:transform .35s ease;
}
.pg-service:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(16,38,63,.11); border-color:transparent; }
.pg-service:hover::before{ transform:scaleY(1); }
.pg-service i.pg-service-icon{ font-size:2.2rem; color:var(--pg-fire); }
.pg-service h3{ font-size:1.35rem; margin:16px 0 8px; }
.pg-service p{ font-size:.99rem; margin:0; }

/* ============================================================
   FOTO GALERİ
   ============================================================ */
.pg-gal-item{
  margin:0; border-radius:var(--pg-r); overflow:hidden; position:relative;
  background:#0C1E33; box-shadow:0 10px 26px rgba(16,38,63,.10);
}
.pg-gal-item img{
  width:100%; height:236px; object-fit:cover; display:block;
  transition:transform .5s ease, opacity .35s ease;
}
.pg-gal-item:hover img{ transform:scale(1.06); opacity:.88; }
.pg-gal-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 16px 13px;
  color:#fff; font-size:.94rem; font-weight:600; letter-spacing:.2px;
  background:linear-gradient(180deg,transparent,rgba(9,22,38,.88));
}
@media (max-width:767.98px){ .pg-gal-item img{ height:168px; } }

/* ============================================================
   FİLO KART ŞERİDİ
   ============================================================ */
.pg-fleet{
  background:linear-gradient(120deg,#10263F 0%,#1B3B5F 62%,#23507A 100%);
  border-radius:22px; padding:52px 46px; position:relative; overflow:hidden;
}
.pg-fleet::after{
  content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px;
  border-radius:50%; background:rgba(245,165,36,.16);
}
.pg-fleet h2,.pg-fleet p{ color:#fff; position:relative; z-index:2; }
.pg-fleet p{ color:rgba(255,255,255,.82); }
.pg-fleet-list{ list-style:none; padding:0; margin:22px 0 0; position:relative; z-index:2; }
.pg-fleet-list li{ color:rgba(255,255,255,.90); display:flex; gap:10px; margin-bottom:9px; }
.pg-fleet-list i{ color:var(--pg-amber); margin-top:4px; }
.pg-fleet-card{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.20);
  border-radius:18px; padding:28px; position:relative; z-index:2; backdrop-filter:blur(4px);
}
.pg-fleet-card h3{ color:#fff; }
.pg-fleet-card p{ color:rgba(255,255,255,.75); font-size:.96rem; }

/* ============================================================
   ŞUBELER
   ============================================================ */
.pg-branch-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--pg-line); border-radius:16px;
  padding:16px 20px; margin-bottom:12px;
}
.pg-branch-count{ display:flex; align-items:center; gap:10px; color:var(--pg-ink); font-weight:600; }
.pg-branch-count i{ color:var(--pg-fire); font-size:1.3rem; }
.pg-geo-msg{ font-size:.95rem; margin:0 0 26px; color:var(--pg-navy); }

.pg-filter{ display:flex; flex-wrap:wrap; gap:8px; }
.pg-filter button{
  border:1px solid var(--pg-line); background:#fff; color:var(--pg-ink);
  font-weight:600; border-radius:100px; padding:.42rem 1.1rem; font-size:.94rem;
  transition:all .25s ease;
}
.pg-filter button:hover{ border-color:var(--pg-navy); }
.pg-filter button.active{ background:var(--pg-navy); border-color:var(--pg-navy); color:#fff; }

.pg-branch{
  background:#fff; border:1px solid var(--pg-line); border-radius:var(--pg-r);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pg-branch:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(16,38,63,.12); }
.pg-branch.is-nearest{ border-color:var(--pg-fire); box-shadow:0 22px 46px rgba(238,106,30,.20); }

.pg-branch-top{
  height:148px; position:relative; overflow:hidden;
  background:
    radial-gradient(320px 180px at 78% 20%,rgba(245,165,36,.34),transparent 60%),
    linear-gradient(140deg,#12283F,#23507A);
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:16px 18px;
}
/* Fotoğraf için: .pg-branch-top içine background-image:url('img/sube1.jpg') ekleyin */
.pg-branch-watermark{ position:absolute; right:12px; bottom:-16px; color:rgba(255,255,255,.16); font-size:4.4rem; }
.pg-branch-city{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30); color:#fff;
  font-size:.82rem; font-weight:600; padding:.26rem .8rem; border-radius:100px;
  display:inline-flex; align-items:center; gap:6px; position:relative; z-index:2;
}
.pg-branch-status{
  font-size:.8rem; font-weight:600; padding:.26rem .72rem; border-radius:100px;
  display:inline-flex; align-items:center; position:relative; z-index:2; white-space:nowrap;
}
.pg-branch-status.is-open{ background:rgba(31,138,91,.26); border:1px solid rgba(110,231,175,.5); color:#9BF3C8; }
.pg-branch-status.is-closed{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.82); }
.pg-branch-status.is-closed .pg-live-dot{ background:#F5A524; animation:none; }
.pg-branch-dist{
  position:absolute; left:18px; bottom:14px; z-index:2; color:#fff; font-weight:700;
  font-size:.92rem; display:none; align-items:center; gap:7px;
}
.pg-branch-dist i{ color:var(--pg-amber); }
.pg-branch.has-dist .pg-branch-dist{ display:inline-flex; }

.pg-branch-body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.pg-branch-body h3{ font-size:1.3rem; margin-bottom:6px; }
.pg-branch-addr{ font-size:.96rem; margin:0 0 14px; }
.pg-branch-rows{ border-top:1px solid var(--pg-line); padding-top:12px; margin-bottom:12px; }
.pg-branch-rows > div{ display:flex; gap:10px; font-size:.95rem; padding:3px 0; align-items:flex-start; }
.pg-branch-rows i{ color:var(--pg-fire); margin-top:5px; font-size:.95rem; }
.pg-branch-rows a{ color:var(--pg-ink); font-weight:600; }
.pg-branch-rows a:hover{ color:var(--pg-fire); }

.pg-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; }
.pg-tags span{
  background:var(--pg-soft); color:var(--pg-navy); font-size:.8rem; font-weight:600;
  padding:.26rem .66rem; border-radius:7px; display:inline-flex; align-items:center; gap:5px;
}
.pg-tags span i{ color:var(--pg-fire); font-size:.8rem; }
/* Ana merkez şube rozeti: diğer etiketlerden ayrılsın */
.pg-tags .pg-tag-hq{ background:var(--pg-navy); color:#fff; }
.pg-tags .pg-tag-hq i{ color:var(--pg-amber); }

.pg-branch-actions{ display:flex; gap:8px; margin-top:auto; }
.pg-branch-actions .btn{ flex:1; font-size:.92rem; padding:.58rem .6rem; }

/* ============================================================
   İLETİŞİM
   ============================================================ */
/* Kartlar dört sütuna yayıldığı için ikon üstte, metin altta duruyor;
   h-100 yerine kartın kendisi satır yüksekliğini dolduruyor (row g-4 boşluğu verir). */
.pg-contact-item{
  display:flex; flex-direction:column; gap:14px; height:100%;
  background:#fff; border:1px solid var(--pg-line);
  border-radius:var(--pg-r); padding:24px 22px; margin-bottom:0;
}
.pg-contact-item i{
  width:46px; height:46px; flex:0 0 46px; border-radius:12px; display:grid; place-items:center;
  background:var(--pg-soft); color:var(--pg-fire); font-size:1.25rem;
}
.pg-contact-item > div{ display:flex; flex-direction:column; flex:1; }
.pg-contact-item h4{ font-size:1.14rem; margin:0 0 4px; }
.pg-contact-item p{ margin:0; font-size:.99rem; overflow-wrap:anywhere; }
.pg-contact-item .pg-contact-link,
.pg-contact-item .pg-contact-note{ margin-top:auto; padding-top:12px; }
.pg-contact-note{ font-size:.88rem; color:var(--pg-body); }
.pg-contact-link{
  font-size:.92rem; font-weight:600; color:var(--pg-fire); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
}
.pg-contact-link i{ font-size:.85rem; transition:transform .18s ease; }
.pg-contact-link:hover{ color:var(--pg-fire); }
.pg-contact-link:hover i{ transform:translateX(4px); }

/* Harita yanındaki hızlı arama kutusu — form kaldırılınca iletişim bölümünü dengeler. */
.pg-contact-call{
  height:100%; background:#fff; border:1px solid var(--pg-line);
  border-radius:18px; padding:26px 24px; display:flex; flex-direction:column;
}
.pg-contact-call h4{ font-size:1.14rem; margin:0 0 16px; display:flex; align-items:center; gap:10px; }
.pg-contact-call h4 i{ color:var(--pg-fire); }
.pg-call-list{ list-style:none; margin:0 0 16px; padding:0; }
.pg-call-list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-top:1px solid var(--pg-line);
}
.pg-call-list li:first-child{ border-top:0; padding-top:0; }
.pg-call-list strong{ display:block; font-size:.98rem; color:var(--pg-ink); }
.pg-call-list span{ display:block; font-size:.88rem; color:var(--pg-body); }
.pg-call-list .btn{ white-space:nowrap; }
.pg-contact-call .pg-contact-link{ margin-top:auto; }

/* .pg-form — iletişim formu düz HTML olduğu için gizlendi (index.html'de yorum içinde).
   Form geri açılırsa stiller hazır dursun diye kaldırılmadı. */
.pg-form{ background:#fff; border:1px solid var(--pg-line); border-radius:18px; padding:34px 32px; }
.pg-form .form-label{ font-weight:600; color:var(--pg-ink); font-size:.94rem; margin-bottom:5px; }
.pg-form .form-control,.pg-form .form-select{
  border:1px solid var(--pg-line); border-radius:10px; padding:.72rem .95rem; background:var(--pg-soft);
}
.pg-form .form-check-label{ font-size:.94rem; }
.pg-form .form-control:focus,.pg-form .form-select:focus{
  border-color:var(--pg-fire); box-shadow:0 0 0 3px rgba(238,106,30,.14); background:#fff;
}
.pg-map{
  height:290px; border-radius:18px; overflow:hidden; position:relative;
  background:linear-gradient(140deg,#E7EDF5,#D6E0EC);
  background-image:
    linear-gradient(rgba(16,38,63,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,38,63,.07) 1px,transparent 1px);
  background-size:100% 100%,42px 42px,42px 42px;
  display:grid; place-items:center; border:1px solid var(--pg-line);
}
.pg-map-pin{ text-align:center; }
.pg-map-pin i{ font-size:2.6rem; color:var(--pg-fire); }
.pg-map.is-tall{ height:100%; min-height:360px; }
.pg-map-frame{ width:100%; height:290px; border:0; display:block; }
/* Gerçek harita için .pg-map bloğunu şununla değiştirin:
   <iframe class="pg-map-frame" src="https://maps.google.com/maps?q=ADRES&output=embed"></iframe> */

/* ============================================================
   RESPONSIVE — anasayfa bölümleri
   ============================================================ */
@media (max-width:1199.98px){
  .hero-slider .owl-nav{ display:none; }
}
@media (max-width:991.98px){
  /* Dar ekranda yazı tüm genişliği kullanıyor; sol spot karartma yetmiyor.
     Reçete dikey ve her noktada eşit koyulukta tüle dönüyor — üç slayt da uyar. */
  .pg-slide-bg{
    --pg-shade:
      linear-gradient(180deg,
        rgba(7,19,33,.80) 0%,
        rgba(7,19,33,.70) 48%,
        rgba(7,19,33,.76) 100%);
  }
  .pg-slide{ min-height:600px; height:auto; padding:132px 0 96px; }
  .hero-slider .owl-dots{ bottom:34px; }
  .pg-fleet{ padding:38px 26px; }
  .pg-badge-year{ right:14px; }
}
@media (max-width:991.98px){
  .pg-map.is-tall{ min-height:300px; }
}
@media (max-width:575.98px){
  .pg-about-img{ height:300px; font-size:5rem; }
  .pg-form{ padding:26px 20px; }
  .pg-contact-call{ padding:22px 18px; }
  .pg-call-list li{ align-items:flex-start; }
  .pg-call-list .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .pg-slide [data-anim]{ opacity:1 !important; }
}

/* ============================================================
   CANLI DURUM NOKTASI (şube açık/kapalı rozeti)
   ============================================================ */
@keyframes pgPulse{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.35); }
}
.pg-live-dot{
  width:8px; height:8px; border-radius:50%; background:var(--pg-green);
  display:inline-block; margin-right:7px; animation:pgPulse 2s ease-in-out infinite;
}