/* =========================================================
   PRO-FELSAN — OPTİMİZE TAM CSS (Bootstrap 5.3)
   Bu dosya eski style.css'in TAM YERİNE geçer.
   ========================================================= */

/* ---------- 0) Değişkenler ve global baz ---------- */
:root{
  --brand:#EC1D23;   /* kurumsal kırmızı */
  --ink:#1a1a1a;
}

html,body{ scroll-behavior:smooth; }
body{ color:#333; background:#fff; }
img{ max-width:100%; height:auto; display:block; }
.rounded-4{ border-radius:1rem!important; }

.section-title{ font-weight:800; letter-spacing:.4px; }

/* ---------- 1) Üst bar / navbar ---------- */
.topbar{ background:#0d0f12; color:#fff; padding:4px 0; font-size:.95rem; }
.navbar{ padding-top:.4rem; padding-bottom:.4rem; }
.navbar .nav-link{ color:#333; }
.navbar .nav-link:hover{ color:#000; }

/* ---------- 2) Butonlar ---------- */
.btn-warning{ background:var(--brand); border-color:var(--brand); color:#000; }
.btn-warning:hover{ filter:brightness(.95); }
:root{
  --brand:#2563eb;         /* mavi (değiştirebilirsin) */
  --brand-ink:#ffffff;     /* buton içi yazı rengi */
  --brand-tint:rgba(37,99,235,.08); /* hover’da açık dolgu */
}

/* ---------- 3) HERO (Carousel) ---------- */
/* Bölüm iskeleti */
.hero{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, #f7f8fb 0%, #ffffff 100%);
}
/* Carousel yükseklik stabilizasyonu */
#heroCarousel{ position:relative; }
#heroCarousel .carousel-inner{ min-height:560px; }
@media (max-width: 991.98px){
  #heroCarousel .carousel-inner{ min-height:420px; }
}
/* Fade animasyonu - sadece opacity */
.carousel.carousel-fade .carousel-item{ transition:opacity .6s ease-in-out; opacity:0; }
.carousel.carousel-fade .carousel-item.active{ opacity:1; }

/* İç hizalama */
.hero .carousel-item .row{ min-height:inherit; align-items:center; }
@media (min-width:992px){ .hero .carousel-item .row{ flex-wrap:nowrap; column-gap:28px; } }

/* Metin tarafı */
.hero .hero-copy{ position:relative; z-index:1; }
.hero .hero-title{ line-height:1.06; letter-spacing:-.2px; }
.hero .hero-lead{ font-size:1.05rem; }
.hero .hero-ctas .btn{ padding:.9rem 1.25rem; border-radius:.9rem; }
.hero .hero-ctas .btn + .btn{ margin-left:.6rem; }
@media (max-width: 991.98px){ .hero .hero-img-wrap{ margin-top:.75rem; } }

/* Görsel kartı */
.hero .hero-img-wrap{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:#0b0b0d;                 /* görsel gelmeden koyu fon */
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}
.hero .hero-img-wrap picture,
.hero .hero-img-wrap img{
  display:block; width:100%; height:auto; border-radius:inherit;
}

/* Göstergeler: sağ-alt küçük kapsül */
#heroCarousel .carousel-indicators{
  position:absolute;
  right:16px; bottom:16px; left:auto;
  margin:0; gap:8px; justify-content:flex-end;
  width:auto; z-index:5;
}
#heroCarousel .carousel-indicators [data-bs-target]{
  width:14px; height:6px; border-radius:4px; border:0;
  background:rgba(255,255,255,.65); opacity:1;
}
#heroCarousel .carousel-indicators .active{ background:#fff; }

/* Okların hit-area'sı */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{ width:52px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.2)); }

/* ---------- 4) ALT KIRMIZI CTA ŞERİDİ ---------- */
.hero-cta-wrap{ padding:0; }
.hero-cta{
  background:var(--brand); color:#fff; padding:22px 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.06) inset;
}
.hero-cta .btn{ border-color:#fff; color:#fff; }
.hero-cta .btn:hover{ background:#fff; color:var(--brand); }

/* ---------- 5) “3 Özellik” kartları ---------- */
.features-wrap .fcard{
  background:#fff; border:1px solid #eee; padding:16px;
  border-radius:16px; display:flex; gap:12px; align-items:flex-start;
}
.features-wrap .ficon{
  font-size:22px; line-height:1; background:var(--brand); color:#fff;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px;
}

/* ---------- 6) Ürün Grupları ---------- */
.group-card{
  display:block; color:inherit; text-decoration:none;
  border-radius:18px; overflow:hidden; border:1px solid #eee; background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
}
.group-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.10); }
.group-media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.group-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(0) contrast(1.05) brightness(1.02); }
.group-diagonal{
  position:absolute; inset:0 55% 0 0; background:var(--brand);
  -webkit-clip-path:polygon(0 0, 92% 0, 72% 100%, 0 100%); clip-path:polygon(0 0, 92% 0, 72% 100%, 0 100%);
  opacity:.95; mix-blend-mode:multiply;
}
.group-body{ padding:16px; }
.group-body li{ margin:.15rem 0; }

/* ---------- 7) Öne çıkan ürün kartları ---------- */
.card{ border-radius:16px; transition:transform .2s; }
.card:hover{ transform:translateY(-3px); }
.card-img-top{
  border-top-left-radius:16px; border-top-right-radius:16px;
  height:180px; object-fit:cover;                /* sabit yükseklik + düzgün kırpma */
}

/* ---------- 8) “Neden Profelsan?” kartları ---------- */
.why-card{
  background:#fff; border:1px solid #eee; border-radius:16px; padding:18px; height:100%;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.why-card .n{ font-size:40px; font-weight:800; color:rgba(0,0,0,.08); line-height:1; margin-bottom:8px; }

/* ---------- 9) Marka şeridi ---------- */
.brand-img{ max-height:36px; opacity:.8; filter:grayscale(100%); transition:.2s; }
.brand-img:hover{ opacity:1; filter:none; }

/* ---------- 10) Kırmızı aksen yardımcıları ---------- */
.accent{ color:var(--brand) !important; }     /* başlıklardaki vurgu */
.cta-wrap{ background:var(--brand); color:#fff; padding:28px 0; }
.cta-wrap .btn-outline-dark{ color:#fff; border-color:#fff; }
.cta-wrap .btn-outline-dark:hover{ background:#fff; color:var(--brand); }

/* ---------- 11) Responsive ufak dokunuşlar ---------- */
@media (max-width:991.98px){
  .hero .hero-title{ font-size: clamp(28px, 6vw, 42px); }
  .hero .hero-lead{ font-size:1rem; }
}
/* ===== HERO HOTFIX (Profelsan) — EN ALTA EKLE ===== */

/* 1) Yükseklik: min-height kaynaklı bantları kaldır, içerik kadar olsun */
#heroCarousel .carousel-inner{ min-height: unset !important; }
.hero .carousel-item .row{ min-height: auto !important; }

/* Hero bölüm padding: daha kompakt (py-5'i override eder) */
section.hero{ padding-top: 3rem !important; padding-bottom: 1.25rem !important; }

/* 2) Oklar: her zaman görselin dikey merkezinde */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  position: absolute; top:0; bottom:0;        /* tüm yüksekliği kapla */
  display:flex; align-items:center;            /* dikeyde ortala */
  width: 60px;                                 /* rahat tıklama */
  opacity: .9;
}
#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover{ opacity:1; }

/* 3) Görsel: orantılı, kırpmasız; wrapper taşmaları kesmesin */
.hero .hero-img-wrap{
  background:#0b0b0d;                          /* yüklenmeden önce koyu fon */
  overflow: hidden;                             /* sadece radius için */
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.hero .hero-img-wrap picture,
.hero .hero-img-wrap img{
  display:block;
  width:100%;
  height:auto !important;                       /* kritik: orantıyı koru */
  object-fit: contain !important;               /* kırpma yerine sığdır */
}

/* 4) Göstergeler: resmin sağ-alt köşesi */
#heroCarousel .carousel-indicators{
  position:absolute; right:16px; bottom:16px; left:auto;
  margin:0; gap:8px; width:auto; justify-content:flex-end; z-index:5;
}
#heroCarousel .carousel-indicators [data-bs-target]{
  width:14px; height:6px; border:0; border-radius:4px;
  background:rgba(255,255,255,.65); opacity:1;
}
#heroCarousel .carousel-indicators .active{ background:#fff; }

/* 5) CTA'ya geçişte gereksiz boşluğu sıfırla */
.hero + .hero-cta-wrap{ margin-top: 0 !important; }
/* ===== HERO FINAL FIX (sağ kenar kırpma yok) ===== */

/* 1) Hero görseli ve kapsayıcıda bütün clip-path / mask izlerini kapat */
.hero .hero-img-wrap,
.hero .hero-img-wrap *{
  -webkit-clip-path: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Eski pseudo overlay'leri tamamen iptal (bazı dosyalarda .hero isim alanı yoksa da kapat) */
.hero-img-wrap::before,
.hero-img-wrap::after{
  content: none !important;
  display: none !important;
}

/* 2) Görseli kesinlikle kırpma: contain + ortala + hiçbir transform olmasın */
.hero .hero-img-wrap picture,
.hero .hero-img-wrap img{
  display:block;
  width:100%;
  height:auto !important;
  object-fit: contain !important;     /* kırpmasız gösterim */
  object-position: center center !important;
  transform: none !important;
}

/* 3) Sağ kolon padding'i 0 olsun, gerçek genişlikten yemesin */
@media (min-width: 992px){
  .hero .carousel-item .col-lg-6:last-child{
    padding-right: 0 !important;
  }
}

/* 4) Oklar daima tam dikey merkezde — görselin üstünde */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  position: absolute;
  top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 60px;
  opacity: .95;
}
#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover{ opacity:1; }

/* 5) Göstergeleri biraz içeri al (kenar çakışmasını önle) */
#heroCarousel .carousel-indicators{
  right: 14px !important;
  bottom: 14px !important;
  left: auto !important;
  margin: 0 !important;
  width: auto !important;
  gap: 8px;
}

/* 6) Hero yüksekliği sadece içerik kadar — altta boş bant oluşmasın */
#heroCarousel .carousel-inner{ min-height: unset !important; }
.hero .carousel-item .row{ min-height: auto !important; }
/* ===== HERO FINAL–FINAL OVERRIDE (sağ kırpma biter) ===== */

/* 1) Her türlü clip/mask/overlay'i öldür */
.hero .hero-img-wrap,
.hero .hero-img-wrap *{
  -webkit-clip-path: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.hero .hero-img-wrap::before,
.hero .hero-img-wrap::after{ content:none !important; display:none !important; }

/* 2) Görseli kırpmadan göster + ortala */
.hero .hero-img-wrap picture,
.hero .hero-img-wrap img{
  display:block;
  width:100%;
  height:auto !important;
  object-fit: contain !important;      /* kırpma yok */
  object-position: center center !important;
  transform:none !important;
}

/* 3) Görsel ile kenar arasında 8px “nefes” boşluğu verelim
      (sağ kenar dolu görünmesin, kırpılmış hissi kalmasın) */
.hero .hero-img-wrap{
  background:#0b0b0d;
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  padding:8px !important;              /* <-- kritik */
}
.hero .hero-img-wrap img{ border-radius:16px !important; }

/* 4) Sağ sütunun sağ padding'i sıfırlansın (gerçek genişliği kullan) */
@media (min-width: 992px){
  .hero .carousel-item .col-lg-6:last-child{ padding-right:0 !important; }
}

/* 5) Oklar dikey merkezde, görselin üzerinde kalsın */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  position:absolute; top:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  width:60px; opacity:.95;
}
#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover{ opacity:1; }

/* 6) Göstergeleri biraz içeri al */
#heroCarousel .carousel-indicators{
  position:absolute; right:14px !important; bottom:14px !important;
  left:auto !important; margin:0 !important; width:auto !important; gap:8px;
}
#heroCarousel .carousel-indicators [data-bs-target]{
  width:14px; height:6px; border-radius:4px; border:0;
  background:rgba(255,255,255,.65); opacity:1;
}
#heroCarousel .carousel-indicators .active{ background:#fff; }

/* 7) Fazla yükseklik/bant yok */
#heroCarousel .carousel-inner{ min-height:unset !important; }
.hero .carousel-item .row{ min-height:auto !important; }
section.hero{ padding-top:3rem !important; padding-bottom:1.25rem !important; }
/* ===== HERO — SON OVERRIDE (çerçeve yok, sağ kırpma yok) ===== */

/* 1) Görsel kutuda padding/çerçeve/arka plan KAPAT */
.hero .hero-img-wrap{
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);     /* istersen 0 yapabilirsin */
  border-radius: 24px !important;
  overflow: hidden !important;                /* sadece radius için */
}

/* 2) Her türlü clip-path / mask / pseudo overlay'i öldür */
.hero .hero-img-wrap,
.hero .hero-img-wrap *{
  -webkit-clip-path: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
.hero .hero-img-wrap::before,
.hero .hero-img-wrap::after{
  content: none !important;
  display: none !important;
}

/* 3) Görsel KIRPMASIZ (contain) ve ortalanmış olsun */
.hero .hero-img-wrap picture,
.hero .hero-img-wrap img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;             /* kırpma yok */
  object-position: center center !important;
  transform: none !important;
  border: none !important;
  border-radius: inherit !important;
}

/* 4) Sağ kolon tam genişliğe uzansın; hiçbir overflow kesmesin */
@media (min-width: 992px){
  .hero .carousel-item .col-lg-6:last-child{
    padding-right: 0 !important;
    overflow: visible !important;
  }
}
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item{ overflow: visible !important; }

/* 5) Oklar her zaman görselin tam ortasında */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  position: absolute !important;
  top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 60px; opacity: .95;
}
#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover{ opacity: 1; }

/* 6) Göstergeleri sağ-alt köşede tut */
#heroCarousel .carousel-indicators{
  position: absolute !important;
  right: 14px !important; bottom: 14px !important; left: auto !important;
  width: auto !important; margin: 0 !important; gap: 8px;
}
#heroCarousel .carousel-indicators [data-bs-target]{
  width: 14px; height: 6px; border-radius: 4px; border: 0;
  background: rgba(255,255,255,.65); opacity: 1;
}
#heroCarousel .carousel-indicators .active{ background: #fff; }

/* 7) Yükseklik sadece içerik kadar — altta bant yok */
#heroCarousel .carousel-inner{ min-height: unset !important; }
.hero .carousel-item .row{ min-height: auto !important; }
section.hero{ padding-top: 3rem !important; padding-bottom: 1.25rem !important; }
/* === Navbar: hover ile açılma (LG ve üstü) === */
@media (min-width: 992px){
  .navbar .dropdown:hover > .dropdown-menu{
    display:block;
    animation: navFade .12s ease-out;
    margin-top:0;
  }
}

/* Açılan menü görünümü */
.navbar .dropdown-menu{
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  border-radius:.6rem;
  padding:.4rem;
  min-width:220px;
}

/* Menü item renkleri: hover/aktifte kırmızı blok */
.navbar .dropdown-item{
  border-radius:.45rem;
  padding:.55rem .85rem;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active{
  background:#EC1D23 !important;
  color:#fff !important;
}

/* Üst başlık (dropdown-toggle) hover’da biraz koyulaşsın */
@media (min-width: 992px){
  .navbar .dropdown:hover > .nav-link{ color:#000; }
}

/* ufak fade animasyonu */
@keyframes navFade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)} }
/* === Neden Profelsan Slider === */
.neden-slider-wrap{ background:#fff; }
.ns-slide{ position:relative; border-radius:24px; overflow:hidden; }
.ns-media img{ width:100%; height:auto; display:block; }

/* Overlay kutu */
.ns-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(16px, 4vw, 40px);
  color:#fff;
  /* gradient: solda hafif koyu, sağa doğru şeffaf */
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,0) 70%);
}

/* Büyük numara */
.ns-n{
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.65);
  margin-bottom: .5rem;
}

/* Eyebrow + başlık */
.ns-eyebrow{ font-weight:700; letter-spacing:.4px; opacity:.95; margin-bottom:.25rem; }
.ns-title{ font-size: clamp(24px, 3.2vw, 40px); font-weight:800; margin-bottom:.5rem; }

/* Metin + link */
.ns-desc{ max-width: 640px; font-size: clamp(14px, 1.2vw, 17px); opacity:.95; }
.ns-link{
  display:inline-flex; align-items:center; gap:6px; margin-top: .8rem;
  color:#fff; text-decoration:none; font-weight:600;
  padding:.4rem .7rem; border-radius:.6rem; border:1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(2px);
}
.ns-link:hover{ background:#EC1D23; border-color:#EC1D23; color:#fff; }

/* Kontroller ve noktalar */
#nedenSlider .carousel-control-prev,
#nedenSlider .carousel-control-next{
  width:56px; display:flex; align-items:center; justify-content:center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
#nedenSlider .carousel-indicators{
  position:absolute; right:18px; bottom:14px; left:auto; margin:0; gap:8px; width:auto;
}
#nedenSlider .carousel-indicators [data-bs-target]{
  width:14px; height:6px; border-radius:4px; border:0;
  background: rgba(255,255,255,.7); opacity:1;
}
#nedenSlider .carousel-indicators .active{ background:#fff; }

/* Mobilde overlay metin daha kompakt */
@media (max-width: 991.98px){
  .ns-overlay{
    background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 50%, rgba(0,0,0,0) 100%);
    justify-content:flex-end; padding:20px;
  }
  .ns-desc{ max-width: none; }
}
/* === Neden Profelsan — 4'lü kart slider === */
.neden-slider-wrap{ background:#fff; }
.ns-card{
  position:relative; border-radius:18px; overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  aspect-ratio: 16/9;                 /* sabit oran; kart gibi */
  background:#000;
}
.ns-media img{ width:100%; height:100%; object-fit:cover; }

.ns-ov{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px;
  color:#fff;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%);
}
.ns-n{ font-size:28px; font-weight:800; line-height:1; color:rgba(255,255,255,.8); }
.ns-eyebrow{ font-size:.9rem; font-weight:700; opacity:.95; margin-top:4px; }
.ns-title{ font-size: clamp(18px, 2.2vw, 22px); font-weight:800; margin:.15rem 0 .2rem; }
.ns-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:.2rem;
  font-size:.95rem; color:#fff; text-decoration:none;
  padding:.35rem .6rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.6);
}
.ns-link:hover{ background:#EC1D23; border-color:#EC1D23; color:#fff; }

/* Carousel okları/noktaları uyumlu dursun */
#nedenSlider .carousel-control-prev,
#nedenSlider .carousel-control-next{ width:52px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
#nedenSlider .carousel-indicators{
  position:absolute; right:14px; bottom:12px; left:auto; margin:0; gap:8px; width:auto;
}
#nedenSlider .carousel-indicators [data-bs-target]{
  width:12px; height:12px; border-radius:50%; border:0;
  background:rgba(255,255,255,.75); opacity:1;
}
#nedenSlider .carousel-indicators .active{ background:#fff; }

/* Tablet/mobilde kolonlar küçülürken yazı da ölçeklensin */
@media (max-width: 991.98px){
  .ns-n{ font-size:24px; }
  .ns-title{ font-size:18px; }
}
/* Rakamlarla Profelsan */
.stats-strip{ background:#fafafa; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
.kpi-n{ font-weight:800; font-size: clamp(22px, 4.2vw, 32px); color:#111; }
.kpi-t{ color:#666; font-size:14.5px; }
.kpi{ padding:8px 6px; }
/* === Rakamlarla Profelsan – Pro görünüm === */
:root{
  --brand:#EC1D23;
  --ink:#111;
}
.stats-pro{
  background: radial-gradient(120% 180% at 100% 0%, #fff 0, #f7f9fc 40%, #f3f6fb 100%);
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.kpi-card{
  display:flex; align-items:center; gap:14px;
  padding:18px 18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height:100%;
}
.kpi-card:hover{
  transform: translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
  border-color: rgba(236,29,35,.35);
}
.kpi-ico{
  flex:0 0 44px; height:44px; width:44px; border-radius:12px;
  display:grid; place-items:center;
  color:#fff; background:var(--brand);
  box-shadow:0 8px 18px rgba(236,29,35,.28);
}
.kpi-body{ display:flex; flex-direction:column; }
.kpi-num{
  font-weight:800; color:var(--ink);
  font-size: clamp(20px, 3.6vw, 26px);
  line-height:1.1; letter-spacing:.2px;
}
.kpi-num span{ color:var(--brand); }
.kpi-sub{
  font-size: 14.5px; color:#666; margin-top:2px;
}

/* Daha kompakt mobil */
@media (max-width: 575.98px){
  .kpi-card{ padding:16px; gap:12px; }
  .kpi-ico{ width:42px; height:42px; border-radius:10px; }
}

/* Koyu footer ile araya nefes */
.stats-pro + footer{ margin-top: 4px; }
/* Navbar hover dropdown (desktop) */
@media (min-width: 992px){
  .navbar .dropdown:hover .dropdown-menu{ display:block; margin-top:0; }
}

/* Açılan menü: kırmızı hover */
.navbar .dropdown-menu{
  border-radius: 12px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  overflow:hidden;
}
.navbar .dropdown-item{
  padding:.6rem .9rem;
}
.navbar .dropdown-item:hover{
  background:#EC1D23;
  color:#fff;
}
.navbar .dropdown-item:active{
  background:#d0181d;
  color:#fff;
}
.was-validated .form-control:valid,
.form-control.is-valid { border-color:#198754; }
.was-validated .form-control:invalid,
.form-control.is-invalid { border-color:#dc3545; }
:focus-visible{ outline:2px solid #EC1D23; outline-offset:2px; }
/* Ürün kartı mikro düzen */
.product-card .card-img-top{ height: 180px; object-fit: cover; }
.product-card .product-excerpt{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.product-media img{ display:block; width:100%; height:auto; }

/* Pagination görünümü */
.pagination .page-link{ color:#111; }
.pagination .page-item.active .page-link{ background:#111; border-color:#111; }
/* === Kurumsal — yan menü ve kartlar === */
.k-side{ padding-top:.5rem; }
.k-head{ font-weight:800; letter-spacing:.2px; margin-bottom:.5rem; }
.k-nav .k-link{
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem .65rem; border-radius:.55rem; text-decoration:none;
  color:#111; border:1px solid transparent;
}
.k-nav .k-link:hover{ background:#f6f7f9; }
.k-nav .k-link.active{
  background:#EC1D23; color:#fff; border-color:#EC1D23;
}
.k-ico{ width:28px; height:28px; display:grid; place-items:center; border-radius:.5rem;
  background:rgba(236,29,35,.12); color:#EC1D23; font-size:15px; }

/* Kartlar */
.k-card{
  display:flex; align-items:flex-start; gap:.8rem; text-decoration:none; color:inherit;
  padding:14px; border:1px solid #eee; border-radius:14px; background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.05); transition:transform .16s ease, box-shadow .16s ease;
  position:relative;
}
.k-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.10); }
.k-card-ico{ flex:0 0 42px; height:42px; display:grid; place-items:center; border-radius:10px; background:#fff3f3; font-size:18px; }
.k-card-body p{ margin-bottom:0; }
.k-card-arrow{ position:absolute; right:12px; bottom:10px; opacity:.25; }

/* Prose — içerik tipografisi */
.prose { color:#222; }
.prose h2,.prose h3,.prose h4{ margin-top:1.2em; font-weight:800; }
.prose p{ margin: .6rem 0; line-height:1.7; }
.prose img{ max-width:100%; height:auto; border-radius:12px; margin:10px 0; }
.prose ul, .prose ol{ padding-left: 1.2rem; margin:.5rem 0 .8rem; }
.prose table{ width:100%; border-collapse:collapse; margin:1rem 0; font-size:.95rem; }
.prose th, .prose td{ border:1px solid #e7e7e7; padding:.6rem .55rem; }
.prose blockquote{ border-left:4px solid #EC1D23; padding:.4rem .8rem; color:#555; background:#fff7f7; border-radius:8px; }

/* Sticky yan menü düzgün çalışsın */
@media (min-width: 992px){
  .sticky-top{ top: 86px; } /* navbar yüksekliğine göre ayarla */
}
/* NAV her zaman viewport'a göre sticksin */
nav.navbar.sticky-top {
  position: sticky !important;
  top: 0;
  z-index: 1040; /* bootstrap 1020 üstü güvenli */
}

/* Sticky'yi kilitleyen overflow'ları kapat */
.hero,
.hero .container,
.hero .carousel,
.hero .carousel-inner {
  overflow: visible !important;
}

/* Sayfa genelinde wrapperlarda sticky'yi kilitleyebilecek overflow'u kapat */
.wrapper, .site-wrapper, #page, main {
  overflow: visible !important;
}

/* Güvenli: navbar her şeyin üstünde dursun */
.topbar, .navbar {
  position: relative;
  z-index: 1040;
}
/* Katman sıralaması: topbar < navbar < dropdown */
.topbar{
  position: relative;
  z-index: 900;             /* altta kalsın */
}

nav.navbar.sticky-top{
  position: sticky;         /* mevcutsa kalsın */
  top: 0;
  z-index: 1000;            /* topbar'ın üstünde */
}

/* Açılır menü her şeyin ÜSTÜNDE olsun */
.navbar .dropdown-menu{
  z-index: 1050;            /* navbar'dan da yukarıda */
  margin-top: .25rem;       /* çizgiye değmesin diye küçük boşluk */
  overflow: visible;        /* taşma olmasın */
}
/* Menüler üstte kalsın, boşlukta kapanma olmasın */
nav.navbar.sticky-top{ z-index:1000; }
.navbar .dropdown{ position:relative; }
.navbar .dropdown-menu{
  margin-top:.4rem;          /* toggle ile menü çakışmasın */
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 28px rgba(16,24,40,.12);
  min-width:260px;
  z-index:1050;
}

/* Kırmızı hover */
:root{ --brand:#EC1D23; }
.navbar .dropdown-item{ border-radius:8px; padding:.55rem .85rem; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{ background:var(--brand); color:#fff; }

/* Ok işareti animasyonu */
.navbar .dropdown-toggle::after{ transition:transform .2s ease; }
.navbar .dropdown.show .dropdown-toggle::after{ transform:rotate(180deg); }
/* Tipografi + boşluk */
:root { --lead: 1.6; }
body { line-height: var(--lead); }
.h4, h4 { letter-spacing:.2px; }

/* Grid kartları: eşit yükseklik + görsel kırpma */
.card { border-radius: 14px; }
.card-img-top { height: 220px; object-fit: cover; }
.card-body { min-height: 110px; }
.product-title {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-bottom:.25rem;
}
.card-footer { border-top: 0; }

/* “ÜRÜNÜ İNCELE” düğmesi: belirgin ama sade */
.card-footer .btn { padding:.65rem .9rem; font-weight:600; letter-spacing:.2px; }

/* Sol yan menü (k-*) */
.k-side { border:1px solid #e6e6e6; border-radius:14px; padding:10px; background:#fff; }
.k-head { font-weight:700; padding:.6rem 1rem; border-bottom:1px solid #eee; }
.k-nav li + li { margin-top:.25rem; }
.k-link{ display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem;
  border-radius:10px; text-decoration:none; color:#222; border:1px solid transparent;}
.k-link:hover { background:#f7f7f7; border-color:#eee; }
.k-link.active { background:#dc3545; color:#fff; border-color:#dc3545; }
.k-ico{ width:22px; display:inline-flex; justify-content:center; }

/* Breadcrumb nefes aldır */
.breadcrumb { --bs-breadcrumb-divider-color:#bbb; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { opacity:.6; }

/* Sticky yan menü navbar’dan çarpmasın */
@media (min-width:992px){
  .k-side.sticky-top { top: 100px; }
}

/* Mobil kart aralığı */
@media (max-width:576px){
  .card-img-top{ height:180px; }
}
/* === Ürün Detay Görseli (kahraman) === */
.product-hero-img{
  border-radius: 8px;          /* tüm köşeler eşit */
  border: 1px solid #e6e6e6;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  max-height: 460px;
  width: 100%;
  object-fit: contain;         /* görseli kırpmadan sığdır */
  background: #fff;
}

/* === Benzer Ürünler: ana sayfa stili, yatay scroll === */
.prod-slider{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.prod-slider .prod-slide{
  scroll-snap-align: start;
}
.prod-slider .card{
  min-width: 240px;            /* mobilde tekli, md'de 2-3'lü görünüm */
}
.slider-arrows .btn{
  border-radius: 10px;
  padding: 4px 10px;
}

/* Mobil optimizasyon */
@media (max-width: 768px){
  .product-hero-img{ max-height: 320px; }
}
/* --- Kurumsal / Üretim Butonları --- */
.btn-primary:hover, .btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all .3s ease;
}
.border-start {
  border-width: 5px !important;
}
.product-sub{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
}
.product-card .card-title { line-height: 1.25; }
.object-fit-cover { object-fit: cover; }
/* === PROFELSAN ürün kartı (modern) === */
.pf-card{
  border:1px solid #e6e6e6;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pf-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  border-color:#ddd;
}
.pf-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pf-body{ padding:12px 14px 0; }
.pf-title{
  font-size:1rem;
  font-weight:600;
  margin:0 0 4px 0;
  line-height:1.25;
}
.pf-title a{ color:#111; text-decoration:none; }
.pf-title a:hover{ text-decoration:underline; }
.pf-desc{
  margin:0 0 10px 0;
  color:#6b7280; /* muted */
  font-size:.92rem;
}
.pf-foot{ padding:12px 14px 14px; margin-top:auto; }
@media (max-width:576px){
  .pf-title{ font-size:.98rem; }
  .pf-desc{ font-size:.9rem; }
}
.product-card { border-radius: 14px; overflow: hidden; }
.product-card .card-img-top { aspect-ratio: 16/9; object-fit: cover; }
/* Ürün kartı: ÜRÜNÜ İNCELE butonu */
.btn-urun{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  width:100%;
  padding:12px 16px;
  border:1px solid #d0d5dd;
  border-radius:14px;
  background:#fff;
  color:#1f2937; /* slate-800 */
  font-weight:600;
  letter-spacing:.2px;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}

.btn-urun:hover{
  transform:translateY(-1px);
  border-color:#bfc6d4;
  box-shadow:0 6px 14px rgba(16,24,40,.10);
}

.btn-urun:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(16,24,40,.10);
}

.btn-urun:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px rgba(59,130,246,.25); /* mavi focus halka */
  border-color:#60a5fa;
}

/* Ok ikonu animasyonu */
.btn-urun .icon{
  width:18px; height:18px;
  transform:translateX(0);
  transition:transform .18s ease;
  opacity:.9;
}
.btn-urun:hover .icon{ transform:translateX(4px); }

/* Kart altıyla uyum */
.card .btn-urun{ background:#fff; }
.card-footer .btn-urun{ margin-top:2px; }

/* Sistem koyu moduna küçük uyum */
@media (prefers-color-scheme: dark){
  .btn-urun{
    background:#0b0f17; color:#e5e7eb; border-color:#1f2937;
    box-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  .btn-urun:hover{
    border-color:#334155; box-shadow:0 6px 14px rgba(0,0,0,.45);
  }
}
/* Ürün kartı butonu hover (bootstrap outline'lar için) */
.card-footer .btn:hover,
.product-card .btn:hover{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-urun:hover{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
/* Özel buton */
.btn-urun:hover{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
}
/* Kart içinde kalan tüm butonlar */
.card-footer .btn:hover,
.product-card .btn:hover{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
}
/* Kart altını kart gövdesinden ayır: ince çizgi + açık zemin */
.card-footer{
  border-top: 1px solid #eef1f4 !important;
  background: #fafbff !important;
}

/* ÜRÜNÜ İNCELE — dolu kırmızı hover + okun görünür olması */
.btn-urun{
  background:#fff;
  color:#1f2937;
}
.btn-urun:hover{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
/* Ok ikonunun rengi yazı rengine uysun ve hafif boşluk olsun */
.btn-urun .icon{
  width:18px; height:18px;
  margin-left: 6px;
  fill: currentColor;        /* SVG path currentColor'dan beslensin */
  stroke: currentColor;
  transition: transform .18s ease;
}
.btn-urun:hover .icon{ transform: translateX(4px); }
/* Kart altını görselden ayır: ince çizgi + açık zemin */
.card-footer{
  border-top: 1px solid #eef1f4 !important;
  background: #fafbff !important;
}

/* ÜRÜNÜ İNCELE — hover’da dolu kırmızı + ok animasyonu */
.btn-urun{
  background:#fff; color:#1f2937; border:1px solid #d0d5dd; border-radius:14px;
  padding:12px 16px; font-weight:600; letter-spacing:.2px;
  transition:transform .18s, box-shadow .18s, border-color .18s, color .18s, background-color .18s;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
.btn-urun:hover{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
  box-shadow:0 6px 14px rgba(16,24,40,.10);
}
.btn-urun .icon{
  width:18px; height:18px; margin-left:6px; fill:currentColor; stroke:currentColor;
  transition: transform .18s ease;
}
.btn-urun:hover .icon{ transform: translateX(4px); }
/* --- ÜRÜN KARTI ALTI BUTON (tek sürüm) -------------------- */
.btn-urun{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  padding:12px 16px;
  border:1px solid #d0d5dd;
  border-radius:14px;
  background:#fff;
  color:#1f2937;                     /* slate-800 */
  font-weight:600; letter-spacing:.2px;
  text-decoration:none;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    color .18s ease,
    background-color .18s ease;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
.btn-urun:hover{
  transform: translateY(-1px);
  background: var(--brand);          /* kırmızı dolu */
  border-color: var(--brand);
  color:#fff;
  box-shadow:0 6px 14px rgba(16,24,40,.10);
}
.btn-urun:active{
  transform: translateY(0);
  box-shadow:0 2px 6px rgba(16,24,40,.10);
}
.btn-urun:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px rgba(59,130,246,.25); /* mavi focus halkası */
  border-color:#60a5fa;
}

/* Ok ikonu (SVG) */
.btn-urun .icon{
  width:18px; height:18px;
  margin-left:6px;
  fill: currentColor;                 /* SVG path rengi yazı rengiyle aynı */
  stroke: currentColor;
  transition: transform .18s ease;
}
.btn-urun:hover .icon{ transform: translateX(4px); }

/* Kart altını görselden ayır: ince çizgi + açık arka plan */
.card-footer{
  border-top:1px solid #eef1f4 !important;
  background:#fafbff !important;
}

/* Bootstrap outline butonu kullanıyorsan (yine de kırmızı hover olsun) */
.product-card .btn:hover,
.card-footer .btn:hover{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
}

/* Koyu mod küçük uyum */
@media (prefers-color-scheme: dark){
  .btn-urun{
    background:#0b0f17; color:#e5e7eb; border-color:#1f2937;
    box-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  .btn-urun:hover{
    border-color:#334155; box-shadow:0 6px 14px rgba(0,0,0,.45);
  }
}
/* stretched-link sadece card-body üzerinde kalsın */
.card .card-body{ position: relative; }

/* Footer ve buton, overlay'in ÜSTÜNDE olsun */
.card .card-footer{ position: relative; z-index: 2; }
.card .btn-urun{ position: relative; z-index: 3; }
/* ============================
   NEDEN PROFELSAN — Detay Sayfası
   ============================ */

/* Sol menü */
.np-side { background: #0b1220; border: 1px solid #1d2536; border-radius: 18px; padding: 14px; }
.np-head { color:#fff; font-weight:700; letter-spacing:.3px; margin: 4px 10px 10px; }
.np-link {
  display:flex; align-items:center; gap:12px;
  color:#e5e7eb; text-decoration:none;
  padding:12px 14px; margin:10px 6px;
  border:1px solid #1f2a44; border-radius:14px;
  background: linear-gradient(180deg,#10192b 0%, #0d1627 100%);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.np-link:hover { transform: translateY(-1px); border-color:#2a3552; box-shadow:0 6px 14px rgba(0,0,0,.25); }
.np-link.active {
  background: linear-gradient(180deg,#b91c1c 0%, #991b1b 100%);
  color:#fff; border-color:#7f1d1d; box-shadow:0 10px 18px rgba(185,28,28,.35);
}
.np-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; font-weight:700;
  background: rgba(255,255,255,.08); color:#fff;
}
.np-link.active .np-num { background: rgba(255,255,255,.18); }
.np-title { font-weight:600; }

/* Hero */
.np-hero-media { aspect-ratio: 16/9; }
.np-hero-media img { width:100%; height:100%; object-fit:cover; display:block; }
.np-ov {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.55) 100%);
}
.np-hero-caption {
  position:absolute; left:0; right:0; bottom:0; padding:24px;
  color:#fff;
}
.np-eyebrow {
  display:inline-block; background: rgba(255,255,255,.18);
  padding:6px 10px; border-radius:999px; font-weight:600; margin-bottom:8px;
  backdrop-filter: blur(2px);
}
.np-hero-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight:800; line-height:1.15; }

/* CTA blok (sayfa sonu) */
.np-cta {
  background: linear-gradient(90deg, #7f1d1d 0%, #dc2626 100%);
  color:#fff; border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 24px rgba(220,38,38,.25);
}

/* Mobil iyileştirme */
@media (max-width: 991.98px){
  .np-side { position: static !important; top:auto !important; margin-bottom: 8px; }
  .np-hero-caption { padding:16px; }
}
/* === Neden Profelsan – Blue theme + sticky ayarı === */
:root{
  --np-blue: #1e3a8a;     /* koyu mavi */
  --np-blue-600:#2563eb;  /* ana marka mavisi */
  --np-blue-50:#f5f8ff;   /* çok açık yüzey */
  --np-blue-100:#e8efff;  /* kenarlık */
  --np-ink:#0f172a;       /* koyu metin */
}

/* Sticky boşluğu azalt */
.np-sticky{ top:24px !important; } /* 100px -> 24px */

/* Sol kap */
.np-side{
  background: var(--np-blue-50);
  border: 1px solid var(--np-blue-100);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .08);
}
.np-head{ color: var(--np-ink); }

/* Liste öğeleri – daha pozitif/mavi */
.np-link{
  background:#fff;
  border:1px solid var(--np-blue-100);
  color: var(--np-ink);
  border-radius:14px;
  margin:10px 6px;
  padding:12px 14px;
  display:flex; align-items:center; gap:12px;
  transition:transform .18s, border-color .18s, box-shadow .18s, background-color .18s, color .18s;
}
.np-link:hover{
  transform: translateY(-1px);
  border-color: var(--np-blue-600);
  box-shadow: 0 8px 16px rgba(37,99,235,.15);
}
.np-link.active{
  background: var(--np-blue-600);
  color:#fff;
  border-color: var(--np-blue-600);
  box-shadow: 0 10px 20px rgba(37,99,235,.25);
}

/* Numara rozeti */
.np-num{
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700;
  background: #eef3ff; color: var(--np-blue);
}
.np-link.active .np-num{ background: rgba(255,255,255,.2); color:#fff; }

/* Hero overlay’ini biraz aydınlat */
.np-ov{
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.38) 70%, rgba(0,0,0,.48) 100%);
}

/* Mobilde sticky kapansın */
@media (max-width: 991.98px){
  .np-side{ position:static !important; }
}
/* Neden Profelsan: sticky menü */
.sticky-md { position: sticky; top: 20px; z-index: 2; }
@media (max-width: 991.98px){ .sticky-md { position: static; } } /* mobilde normal akış */

/* Güvenlik: sticky’nin çalışmasına engel olabilecek overflow */
.neden-wrap .row { overflow: visible; }

/* Kutunun üst marjını azalt (boşluk algısını düşür) */
.np-side { margin-top: 0; }
/* ---------- NEDEN PROFELSAN - STICKY MENU DÜZENİ ---------- */
.np-side {
  background: #f8faff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 100px; /* navbar altında sabitlenme mesafesi */
}

.np-side .np-head {
  font-weight: 600;
  color: #0b3d91; /* mavi tonumuz */
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.np-side ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.np-side .np-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #0b3d91;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 8px;
  background: #fff;
  transition: all .25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.np-side .np-link:hover {
  background: #e7f0ff;
  transform: translateX(4px);
}

.np-side .np-link.active {
  background: #0b57d0;
  color: #fff;
  font-weight: 600;
}

.np-side .np-link.active .np-num {
  background: #fff;
  color: #0b57d0;
}

.np-side .np-num {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e7f0ff;
  color: #0b57d0;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* sticky davranışı mobilde kapat */
@media (max-width: 991px) {
  .np-side {
    position: static;
    top: auto;
    margin-bottom: 20px;
  }
}
.np-cta{
  color:#fff;
  background: linear-gradient(135deg,#b31217 0%,#e52d27 100%);
  border-radius:24px; padding:28px 20px; box-shadow:0 10px 24px rgba(0,0,0,.12);
}
@media (min-width:992px){ .np-cta{ padding:40px 44px; } }
.np-cta .btn{ border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.15); }
/* 1) Sol menü sabit genişlik + kutular aktif/pasif aynı boyut (kayma yok) */
.np-side { width: 260px; }                 /* sabit */
@media (max-width: 991.98px){ .np-side{ width:auto; } }

.np-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.70rem 1rem;
  border:1px solid #e9ecef;
  border-radius:12px;
  line-height:1.2;
  text-decoration:none;
  color:#212529;
  box-sizing:border-box;                    /* border dahil */
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

/* Aktifte sadece renk değişsin; padding/border kalınlığı değişmesin */
.np-link.active{
  background:#0d6efd; color:#fff; border-color:#0d6efd;
  box-shadow:0 1px 6px rgba(13,110,253,.25);
}

/* Numara rozeti sabit genişlik (metin değişse de kutu oynamaz) */
.np-num{
  min-width: 32px; height: 32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-weight:600;
  background:#f1f3f5; color:#333;
}
.np-link.active .np-num{ background:rgba(255,255,255,.2); color:#fff; }

/* Liste öğeleri arası boşluk sabit */
.np-side .list-unstyled > li { margin-bottom:.6rem; }

/* 2) Büyük görsel CLS önleme: en-boy oranını rezerve et */
.np-hero, .np-cover { position:relative; border-radius:16px; overflow:hidden; }
.np-hero::before{ content:""; display:block; aspect-ratio: 16/9; } /* yer tutucu */
.np-hero > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Genel güvenlik: yatay taşmayı kapat (beklenmedik geniş elemanlar için) */
html, body { overflow-x: hidden; }
:root{ --side-w:260px; --sticky-top:88px; }   /* header boyuna göre ayarla */

.side-stick{ width:var(--side-w); }
@media (max-width:991.98px){ .side-stick{ width:auto; } }
.sticky-top{ top:var(--sticky-top); }

.side-list > li + li{ margin-top:.6rem; }

.side-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.70rem 1rem;                       /* AKTİFTE AYNI KALSIN */
  border:1px solid #e9ecef; border-radius:12px;
  text-decoration:none; color:#212529; line-height:1.2;
  box-sizing:border-box;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.side-link.active{
  background:#ef233c; color:#fff; border-color:#ef233c;  /* kalınlık/padding değişmiyor */
  box-shadow:0 1px 6px rgba(239,35,60,.25);
}

.side-ico{ width:28px; height:28px; flex:0 0 28px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:8px; background:#f1f3f5; }
.side-link.active .side-ico{ background:rgba(255,255,255,.2); color:#fff; }

.side-num{ min-width:32px; height:32px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:999px; font-weight:600; background:#f1f3f5; }
.side-link.active .side-num{ background:rgba(255,255,255,.2); color:#fff; }

.hero-wrap{ position:relative; border-radius:16px; overflow:hidden; }
.hero-wrap::before{ content:""; display:block; aspect-ratio:16/9; }  /* yükseklik rezerve */
.hero-wrap>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

html,body{ overflow-x:hidden; }  /* emniyet */
.hero-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}
/* ===== Footer ===== */
.site-footer {
  color: #e5e7eb; /* slate-200 */
  background: #0b1526; /* koyu lacivert ton */
}

.site-footer .footer-cta {
  background: linear-gradient(90deg, #0b1526 0%, #0f2342 60%, #13315c 100%);
  color: #fff;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-footer .footer-main {
  padding: 36px 0 28px;
}

.text-footer-muted { color: rgba(229,231,235,0.75); }
.text-footer-faint { color: rgba(229,231,235,0.55); }

.footer-links li { margin-bottom: .4rem; }
.footer-links a,
.site-footer .footer-link {
  color: rgba(229,231,235,0.85);
  text-decoration: none;
}
.footer-links a:hover,
.site-footer .footer-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer .btn-outline-light {
  --bs-btn-hover-color: #0b1526;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
}

.site-footer .footer-bottom {
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: #0a1220;
}

/* Küçük ekran ince ayarlar */
@media (max-width: 576px) {
  .site-footer .footer-cta .btn { width: 100%; }
}
/* Policy layout */
.policy-wrap { background: #f8fafc; }
.policy-hero { max-height: 280px; object-fit: cover; }
.policy-content h2 { margin-top: 1.25rem; font-size: 1.25rem; }
.policy-content h3 { margin-top: 1rem; font-size: 1.05rem; color:#334155; }
#policyTOC a { color:#334155; text-decoration:none; }
#policyTOC a:hover { text-decoration:underline; }
/* ==== Floating Contact FAB ==== */
.fabc-wrap{
  position:fixed; right:16px; bottom:16px; z-index:1060; /* navbar üstünde */
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.fabc-main{
  width:56px;height:56px;border:0;border-radius:50%;
  background:#111; color:#fff; display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 25px rgba(0,0,0,.25); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;
}
.fabc-main:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(0,0,0,.28); }
.fabc-main .fabc-dot{ width:5px;height:5px;border-radius:50%;background:#fff;margin:0 2px;display:inline-block; }
.fabc-list{ list-style:none;margin:0;padding:0; display:flex; flex-direction:column; gap:10px; pointer-events:none; opacity:0; transform:translateY(10px); transition:.18s ease; }
.fabc-open .fabc-list{ pointer-events:auto; opacity:1; transform:translateY(0); }
.fabc-btn{
  width:48px;height:48px;border-radius:50%; display:flex;align-items:center;justify-content:center;
  color:#fff; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.22); transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  background:#495057;
}
.fabc-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.26); }
.fabc-phone{ background:#0d6efd; }        /* Bootstrap primary */
.fabc-wa   { background:#25D366; }        /* WhatsApp yeşili */
.fabc-map  { background:#f03e3e; }        /* Kırmızı */
.fabc-tip{
  position:absolute; right:56px; background:#111; color:#fff; padding:6px 10px; border-radius:8px;
  font-size:12px; opacity:0; transform:translateX(6px); transition:.16s ease; pointer-events:none; white-space:nowrap;
}
.fabc-list li{ position:relative; }
.fabc-btn:hover + .fabc-tip{ opacity:1; transform:translateX(0); }

/* Mobilde ufalt */
@media (max-width: 575.98px){
  .fabc-main{ width:52px;height:52px; }
  .fabc-btn { width:46px;height:46px; }
  .fabc-tip{ display:none; } /* mobilde tooltip kapalı */
}
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next { display: none !important; }
#heroCarousel { position: relative; }
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); color:#fff;
  z-index: 5; cursor:pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.hero-nav:hover{ background:rgba(0,0,0,.55); }
.hero-nav.prev{ left:14px; }
.hero-nav.next{ right:14px; }

/* Okları örten bir katman varsa (banner vs) tıklanmayı engellemesin */
.hero-overlay, .hero-mask { pointer-events:none; }
/* Eski Bootstrap oklarını görünmez yap */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  display: none !important;
}
#heroCarousel .carousel-indicators{ display:none !important; }
/* Sadece Bootstrap default oklarını öldür */
#heroCarousel > .carousel-control-prev,
#heroCarousel > .carousel-control-next {
  display: none !important;
}

#heroCarousel > .carousel-control-prev .carousel-control-prev-icon,
#heroCarousel > .carousel-control-next .carousel-control-next-icon {
  display: none !important;
  background-image: none !important;
}
.hero-arrows { 
  position: absolute; 
  right: 18px; 
  bottom: 18px; 
  display: flex; 
  gap: 10px; 
  z-index: 5;
}

.hero-arrow {
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: #111;
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  opacity: .95;
}
.hero-arrow:hover { opacity: 1; transform: translateY(-1px); }
/* Galeri */
.gallery { display:grid; grid-template-columns:1fr; gap:12px; }
.gallery-hero {
  position:relative; border:1px solid #ddd; border-radius:8px; overflow:hidden; background:#fff;
}
/* Görsel boyunu YUKARIDAN SINIRLIYORUZ */
.gallery-hero img {
  width:100%;
  height:auto;
  max-height: 520px;   /* desktop sınırı */
  display:block;
  object-fit: contain;
}

@media (max-width: 991.98px){
  .gallery-hero img{ max-height: 360px; }  /* mobil/tablet sınırı */
}

/* Küçük önizlemeler */
.thumb-strip {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
  flex-wrap: wrap;         /* 2 satıra kadar sar */
  max-height: 176px;       /* 2*84 + boşluk */
}
.thumb { flex:0 0 auto; width:84px; height:84px; border:1px solid #ddd; border-radius:6px; overflow:hidden; cursor:pointer; background:#fff; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb.active { outline:2px solid #ffc107; }
#urunSlider .carousel-indicators [data-bs-target] { padding:0; background:none; }
#urunSlider .carousel-indicators .active { outline:2px solid #ffc107; }
/* Ürün açıklaması: madde işaretli liste */
.desc-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.desc-list li{
  position: relative;
  margin: 6px 0;
  padding-left: 28px; /* ikon boşluğu */
  line-height: 1.55;
}
.desc-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #198754; /* sabit şık nokta */
  box-shadow: 0 0 0 2px rgba(25,135,84,.15);
}
.desc-list li::before{ content:"✓"; left:0; top:0; transform:translateY(2px); font-weight:700; font-size:15px; color:#198754; width:auto; height:auto; background:none; box-shadow:none; }
.urun-aciklama-listesi { list-style: none; padding-left: 0; margin: 0; }
.urun-aciklama-listesi li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.urun-aciklama-listesi li::before {
  content: "•";
  color: #dc3545;  /* istersen marka rengine çekebilirsin */
  font-weight: 700;
  position: absolute; left: 0; top: 0;
}
/* Ürün detay sayfası - madde işaretleri için düzenleme */
.pro-content ul {
  list-style-type: disc; /* Nokta tipi */
  padding-left: 1.5rem; /* Soldan iç boşluk */
  color: #333; /* Metin rengi */
}

.pro-content ul li {
  color: #222; /* Metin rengi */
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 4px;
  position: relative;
}

/* Nokta rengi - tüm cihazlarda kırmızı */
.pro-content ul li::marker {
  color: #d00; /* kırmızı nokta */
}

/* iOS Safari ve Chrome mobil uyumu */
@supports not (selector(::marker)) {
  .pro-content ul li::before {
    content: "•";
    color: #d00;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }
}
/* Ürün detay – madde işaretlerini tekilleştir ve her yerde aynı göster */
.pro-content ul {
  list-style: none;          /* varsayılan noktayı tamamen kapat */
  padding-left: 1.25rem;     /* soldan boşluk */
  margin: 0 0 1rem 0;
}

.pro-content ul li {
  position: relative;
  line-height: 1.6;
  font-size: 1rem;
  margin: 0 0 6px 0;
}

/* Tek kırmızı noktamız */
.pro-content ul li::before {
  content: "";
  position: absolute;
  left: -1.25rem;            /* ul padding’i kadar geri git */
  top: 0.7em;                /* metin ortasına yakınla */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d00;          /* kırmızı */
  transform: translateY(-50%);
}

/* İsteğe bağlı: alt liste (nested) için biraz daha küçük işaret */
.pro-content ul ul li::before {
  width: 5px;
  height: 5px;
  background: #e00000;
}
/* Ürün detay — madde işareti hizası ve aralıkları (compact) */
.pro-content ul{
  list-style:none;
  margin:0 0 1rem 0;
  padding-left:0;                 /* UL boşluk yok, boşluğu LI verecek */
}

.pro-content ul li{
  position:relative;
  padding-left:1.05rem;           /* Nokta ile metin arası (daha dar) */
  margin:0 0 .35rem 0;            /* Satırlar arası */
  line-height:1.5;                /* Okunabilirlik */
}

.pro-content ul li::before{
  content:"";
  position:absolute;
  left:.25rem;                    /* Noktayı metne yaklaştır */
  top:.72em;                      /* Metinle dikey hizala */
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d00;
  transform:translateY(-50%);     /* Tam satır ortası */
}

/* İç içe listelerde biraz daha küçük ve aynı hizalı nokta */
.pro-content ul ul{ margin-top:.25rem; }
.pro-content ul ul li{ padding-left:1rem; }
.pro-content ul ul li::before{
  left:.22rem;
  width:5px;
  height:5px;
}

/* Mobilde (<=576px) bir tık daha sıkı görünüm */
@media (max-width: 576px){
  .pro-content ul li{ padding-left:.95rem; margin-bottom:.3rem; }
  .pro-content ul li::before{ left:.22rem; top:.7em; width:5.5px; height:5.5px; }
}
/* Ürün Detay: madde işaretleri — tipografik aralık ve hizalama */
.pro-content ul{
  list-style: none;
  margin: 0 0 1rem 0;
  padding-left: 0;
}

.pro-content ul li{
  position: relative;
  line-height: 1.5;
  margin: 0 0 .4rem 0;
  padding-left: 1.15em;                 /* toplam sol iç boşluk */
}

.pro-content ul li::before{
  content: "";
  position: absolute;
  left: .35em;                          /* sol kenardan noktanın merkezi */
  top: .75em;                           /* satır yüksekliğinin yarısı (~1.5/2) */
  width: .32em;                         /* madde imi çapı */
  height: .32em;
  background: #d00;
  border-radius: 50%;
  transform: translateY(-50%);          /* tam dikey ortalama */
}

/* İç içe listelerde biraz daha kompakt */
.pro-content ul ul{ margin-top: .25rem; }
.pro-content ul ul li{ padding-left: 1.05em; }
.pro-content ul ul li::before{ left: .32em; width: .28em; height: .28em; }

/* Mobil (<=576px) hafif sıkılaştırma */
@media (max-width: 576px){
  .pro-content ul li{
    padding-left: 1.15em;
    margin-bottom: .35rem;
  }
  .pro-content ul li::before{
    left: .33em;
    top: .72em;                         /* küçük ekranlarda hizayı koru */
  }
}