/* ============================================================
   SITE.CSS — Site geneli (tema, tipografi, buton, navbar, footer)
   Her sayfada yüklenir. Sayfaya özel stiller kendi dosyasındadır.
   ============================================================ */

/* ============================================================
   YARAMANLAR PETROL — Tema değişkenleri
   ============================================================ */
:root{
  --pg-navy:#10263F;        /* derin petrol lacivert */
  --pg-navy-2:#1B3B5F;
  --pg-amber:#F5A524;       /* fiyat panosu sarısı */
  --pg-fire:#EE6A1E;        /* aksiyon turuncusu */
  --pg-green:#1F8A5B;       /* çevre / EURO dizel */
  --pg-ink:#16202E;
  --pg-body:#5A6779;
  --pg-line:#DEE5EE;
  --pg-soft:#F1F4F8;        /* açık zemin */
  --pg-white:#FFFFFF;
  --pg-r:14px;
}

*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--pg-body);
  background:var(--pg-white);
  font-size:16.5px;
  line-height:1.75;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.pg-display{
  font-family:'Barlow Condensed','Barlow',sans-serif;
  color:var(--pg-ink);
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.08;
}
h2{ font-size:clamp(2.1rem,4.4vw,3.35rem); }
h3{ font-size:1.55rem; }
p{ max-width:66ch; }
a{ text-decoration:none; }
:focus-visible{ outline:3px solid var(--pg-fire); outline-offset:3px; border-radius:6px; }

.pg-section{ padding:96px 0; position:relative; }
.pg-section.is-soft{ background:var(--pg-soft); }

/* Bölüm başlığı */
.pg-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:.92rem; color:var(--pg-fire);
  margin-bottom:12px;
}
.pg-eyebrow::before{
  content:""; width:26px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--pg-fire),var(--pg-amber));
}
.pg-eyebrow.is-amber{ color:var(--pg-amber); }
.pg-lead{ font-size:1.08rem; }

/* Butonlar */
.btn{ font-weight:600; border-radius:10px; padding:.72rem 1.5rem; border:none; }
.btn-pg{ background:var(--pg-fire); color:#fff; box-shadow:0 10px 24px rgba(238,106,30,.28); }
.btn-pg:hover{ background:#d95c14; color:#fff; }
.btn-pg-dark{ background:var(--pg-navy); color:#fff; }
.btn-pg-dark:hover{ background:#0a1a2c; color:#fff; }
.btn-pg-ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.45); }
.btn-pg-ghost:hover{ background:#fff; color:var(--pg-navy); }
.btn-pg-line{ background:#fff; color:var(--pg-navy); box-shadow:inset 0 0 0 1.5px var(--pg-line); }
.btn-pg-line:hover{ box-shadow:inset 0 0 0 1.5px var(--pg-navy); color:var(--pg-navy); }

/* ============================================================
   NAVBAR
   ============================================================ */
.pg-nav{
  padding:14px 0; background:transparent;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.pg-nav.scrolled{
  background:#fff; padding:8px 0;
  box-shadow:0 6px 30px rgba(16,38,63,.10);
}
/* Marka logosu — iki sürüm aynı anda HTML'de durur, zemine göre biri gizlenir:
   navbar tepede saydam (hero) ve mobilde lacivert -> beyaz logo,
   kaydırınca (.scrolled) beyaz zemin -> asıl (koyu) logo. */
.pg-brand{ display:flex; align-items:center; }
.pg-logo{ height:60px; width:auto; display:block; transition:height .35s ease; }
.pg-logo-acikzemin{ display:none; }
.scrolled .pg-logo{ height:50px; }
.scrolled .pg-logo-koyuzemin{ display:none; }
.scrolled .pg-logo-acikzemin{ display:block; }

.pg-nav .nav-link{
  color:rgba(255,255,255,.9); font-weight:600; font-size:1rem;
  padding:.55rem .95rem !important; position:relative;
}
.pg-nav .nav-link:hover,.pg-nav .nav-link.active{ color:#fff; }
.scrolled .nav-link{ color:var(--pg-ink) !important; }
.scrolled .nav-link:hover,.scrolled .nav-link.active{ color:var(--pg-fire) !important; }
.pg-nav .nav-link::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.28rem;
  height:2px; background:var(--pg-fire); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease; border-radius:2px;
}
.pg-nav .nav-link.active::after{ transform:scaleX(1); }
.pg-nav .dropdown-toggle::after{ display:none; }
.pg-nav .dropdown-menu{
  border:none; border-radius:12px; padding:8px; margin-top:10px;
  box-shadow:0 18px 44px rgba(16,38,63,.16); min-width:230px;
}
.pg-nav .dropdown-item{ border-radius:8px; font-weight:600; color:var(--pg-ink); padding:.55rem .8rem; }
.pg-nav .dropdown-item:hover,
.pg-nav .dropdown-item.active{ background:var(--pg-soft); color:var(--pg-fire); }
/* Hover köprüsü: menü ile düğme arasındaki 10px boşlukta imleç "dışarı" düşüp
   menüyü kapatmasın. Yalnız lg üstü, yani hover'la açılan genişlikte gerekli. */
@media (min-width:992px){
  .pg-nav .dropdown-menu::before{
    content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
  }
}
/* Menü açıkken üstteki bağlantı ve ok işareti aktif görünsün */
.pg-nav .dropdown-toggle.show{ color:#fff; }
.scrolled .dropdown-toggle.show{ color:var(--pg-fire) !important; }
.pg-nav .dropdown-toggle .bi-chevron-down{ transition:transform .25s ease; display:inline-block; }
.pg-nav .dropdown-toggle.show .bi-chevron-down{ transform:rotate(180deg); }
.pg-nav-phone{ color:#fff; font-weight:700; display:flex; align-items:center; gap:8px; }
.scrolled .pg-nav-phone{ color:var(--pg-ink); }
.pg-toggler{ border:none; color:#fff; font-size:1.6rem; padding:2px 6px; }
.scrolled .pg-toggler{ color:var(--pg-ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.pg-footer{ background:var(--pg-navy); color:rgba(255,255,255,.72); padding:72px 0 0; }
.pg-footer h4{ color:#fff; font-size:1.24rem; margin-bottom:20px; }
.pg-footer p{ font-size:.99rem; }
.pg-footer-contact p{ margin-bottom:6px; }
.pg-footer-contact p:last-child{ margin-bottom:0; }
.pg-footer a{ color:rgba(255,255,255,.72); display:inline-block; padding:5px 0; transition:color .2s ease; }
.pg-footer a:hover{ color:var(--pg-amber); }
.pg-footer-brand{ display:inline-block; }
.pg-footer-logo{ height:66px; width:auto; display:block; }
.pg-social{ display:flex; gap:10px; margin-top:18px; }
.pg-social a{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center; padding:0;
  background:rgba(255,255,255,.09); color:#fff; font-size:1.1rem;
}
.pg-social a:hover{ background:var(--pg-fire); color:#fff; }
.pg-footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:54px; padding:22px 0;
  font-size:.93rem; color:rgba(255,255,255,.55);
}
.pg-top{
  position:fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:14px;
  background:var(--pg-fire); color:#fff; display:grid; place-items:center; font-size:1.3rem;
  border:none; box-shadow:0 12px 28px rgba(238,106,30,.35); z-index:60;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.pg-top.show{ opacity:1; visibility:visible; }
.pg-top:hover{ background:#d95c14; color:#fff; }

/* ============================================================
   RESPONSIVE — site geneli
   ============================================================ */
@media (max-width:991.98px){
  .pg-nav{ background:var(--pg-navy); padding:10px 0; }
  .pg-nav .navbar-collapse{
    background:#fff; border-radius:14px; margin-top:12px; padding:12px 8px;
    box-shadow:0 18px 40px rgba(16,38,63,.18);
  }
  .pg-nav .nav-link{ color:var(--pg-ink) !important; }
  .pg-nav .nav-link:hover,
  .pg-nav .nav-link.active{ color:var(--pg-fire) !important; }
  .pg-logo, .scrolled .pg-logo{ height:46px; }
  .pg-nav-phone{ color:var(--pg-ink); }
  .pg-section{ padding:70px 0; }
}
/* Yatay taşma düzeltmesi — küçük ekran.
   Bootstrap'te g-5 satırları (--bs-gutter-x:3rem) yanlara -24px negatif margin
   uygular; .container'ın yan boşluğu ise 12px'dir. Container'ın max-width'i ekran
   genişliğine eşit olduğu küçük ekranlarda aradaki 12px sayfayı yana kaydırıyor
   (sayfa 375px yerine 388px genişliğe çıkıp sağa sürükleniyordu; fixed navbar da
   bu yüzden ekranı aşıyordu). Bu ekranlarda gutter'ı 1.5rem'e çekiyoruz: negatif
   margin -12px olur ve container boşluğuyla tam dengelenir.
   Dikey boşluk (--bs-gutter-y) değişmez, satır arası aynı kalır. */
@media (max-width:575.98px){
  .container > .row.g-5{ --bs-gutter-x:1.5rem; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}