/* --- BASE TYPO RESET + DESIGN TOKENS --- */
:root{
  --fs-body: 1rem;        /* 16px */
  --fs-small: 0.875rem;   /* 14px */
  --fs-h1: 1.75rem;       /* 28px */
  --fs-h2: 1.375rem;      /* 22px */
  --fs-h3: 1.125rem;      /* 18px */
  --lh-body: 1.5;

  --bg:#ffffff; --text:#0b1324; --muted:#5b6b86;
  --primary:#0a2a66; --primary-600:#0d3b8a;
  --surface:#f5f7fb; --ring:rgba(30,100,220,0.25); --radius:18px;
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px; /* tek referans */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

img{max-width:100%;display:block}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1120px,92%);margin-inline:auto}

/* --- TYPOGRAPHY SCALE --- */
h1{ font-size: var(--fs-h1); line-height: 1.2; }
h2{ font-size: var(--fs-h2); line-height: 1.25; }
h3{ font-size: var(--fs-h3); line-height: 1.3; }

/* Kart / kutu içi metinler tek tip */
.card, .feature-card, .info-card, .content-card,
.card p, .feature-card p, .info-card p, .content-card p{
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* --- HEADER / NAV --- */
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:var(--text)
}

.logo img{width:36px;height:36px}

.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:6px;
  margin:0;
  cursor:pointer
}

.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  margin:5px 0
}

.nav ul{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0
}

.nav a{
  padding:10px 12px;
  border-radius:10px
}

.nav a:hover{
  background:var(--surface);
  text-decoration:none
}

@media (max-width:820px){
  .nav-toggle{display:block}
  .nav ul{
    display:none;
    position:absolute;
    right:4%;
    top:62px;
    background:#fff;
    border:1px solid #e9eef6;
    border-radius:14px;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
    padding:10px;
    flex-direction:column;
    width:220px
  }
  .nav ul.open{display:flex}
}

/* --- HERO (senin mevcut kısmınla uyumlu) --- */
.hero{position:relative;overflow:hidden;min-height:62vh;display:flex;align-items:center;isolation:isolate}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.86),rgba(255,255,255,.42) 40%,rgba(255,255,255,0) 70%),
    url('assets/img/hero-bg.jpg') right 50%/cover no-repeat,
    linear-gradient(180deg,#f0f4ff,#eaf1ff);
  z-index:-1
}
.hero-inner{padding:120px 0 100px}
.hero-title{font-size:clamp(28px,5vw,46px);line-height:1.15;margin:0 0 10px;color:var(--primary)}
.hero-sub{font-size:clamp(16px,2.6vw,22px);color:var(--muted);margin:0 0 18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  font-weight:600;
  border:1px solid transparent;
  transition:.2s ease-in-out;
  outline:none
}
.btn:focus{box-shadow:0 0 0 4px var(--ring)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-600);text-decoration:none}
.btn-ghost{background:#fff;color:var(--primary);border-color:#d8e2f2}
.btn-ghost:hover{background:#f2f6ff}
.btn-link{padding:0;border:none;background:transparent;color:var(--primary);font-weight:600}

/* --- HOME SECTIONS / CARDS --- */
.section-header{padding:36px 0 12px}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding-bottom:60px}
@media (max-width:820px){.card-grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #e9eef6;border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.06)}
.card-media img{aspect-ratio:16/10;object-fit:cover}
.card-body{padding:16px}
.card-title{margin:0 0 6px}
.card-text{color:var(--muted);margin:0 0 10px}

.page .page-header{padding:28px 0 10px}
.page .prose{padding-bottom:56px}

.product-hero{background:var(--surface);border-bottom:1px solid #e9eef6}
.product-hero-grid{display:grid;grid-template-columns:420px 1fr;gap:24px;align-items:center;padding:36px 0}
.product-hero-img{border-radius:16px;border:1px solid #e9eef6;background:#fff}
@media (max-width:880px){.product-hero-grid{grid-template-columns:1fr}}
.product-content{padding:26px 0 60px}

.feature-list{display:grid;gap:8px;padding-left:18px}

.table-wrap{overflow:auto;border:1px solid #e9eef6;border-radius:12px;background:#fff}
.table-wrap table{border-collapse:collapse;min-width:520px;width:100%}
.table-wrap th,.table-wrap td{padding:12px 14px;border-bottom:1px solid #eef3fb}
.table-wrap thead th{background:#f7faff;text-align:left}

.note{padding:14px;border-radius:12px;background:#fff7e6;border:1px solid #ffe0a3}

.site-footer{border-top:1px solid #e9eef6;background:#fbfcff;margin-top:40px}
.site-footer .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding:28px 0}
.site-footer .footer-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-bottom{padding:16px 0;border-top:1px solid #e9eef6;color:#62708a;font-size:14px}
@media (max-width:860px){.site-footer .footer-grid{grid-template-columns:1fr}}

.lead{color:var(--muted);font-size:18px}
.logo-img { height:40px; width:auto; }
.hero-mark { width:96px; height:auto; margin:0 auto 20px; display:block; }

/* Hero metinleri */
.hero .hero-title{margin:0 0 8px;}
.hero .hero-sub{margin:0 0 18px;font-size:18px;color:#e9eef6;}

/* başlığı gizlemek isterseniz açın */
/* .hero .hero-title{display:none;} */

/* === HEADER davranışı === */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;         /* ilk sayfada şeffaf */
  transition: background-color .3s ease, transform .3s ease;
  transform: translateY(-100%);    /* ilk başta yukarı gizli */
}



/* İçerik header altında kaybolmasın diye boşluk */
main { padding-top: 72px; }

.logo-img { height:40px; width:auto; }
/* Beyaz boşluk FIX: boşluğu sadece header görünürken ver */
main{padding-top:0;}                 /* varsayılan: boşluk yok */
body.header-on main{padding-top:72px;}  /* header görünürken üstten boşluk ver */

/* Header koyu zemin ve görünür durum */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;
  background:transparent;transition:background-color .3s ease, transform .3s ease;transform:translateY(-100%);}

/* Header içerik ve görünürlük */
.header .container,.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;}
.logo-img{height:96px;width:auto;}                 /* #3: logo daha büyük */
.site-header .nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:600;}  /* #3: menü beyaz */
.site-header .nav a:hover{opacity:.85;}
/* Hero hizalama ve kontrast */
.hero{position:relative;min-height:68vh;display:grid;place-items:center;border-radius:18px;margin:16px auto;overflow:hidden;
  background-position:right 50% !important; background-size:cover !important; background-repeat:no-repeat !important;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15));pointer-events:none;}
.hero .hero-inner{position:relative;z-index:2;text-align:center;padding:120px 16px 96px;}
.hero .hero-mark{width:110px;height:auto;margin:0 auto 14px;display:block;}
.hero .hero-title{margin:0 0 8px;}
.hero .hero-sub{margin:0 0 18px;font-size:18px;color:#e9eef6;}
/* === Header logo boyutu ve menü görünürlüğü === */
.site-header .logo-img{
  height:64px;                /* önce 40-56 idi, büyüttük */
  width:auto;
}

/* Küçük ekranlarda aşırı büyümesin */
@media (max-width: 768px){
  .site-header .logo-img{ height:48px; }
}

/* Koyu header zeminde menü yazıları beyaz */
.site-header .nav a{ color:#fff !important; }
.site-header .nav a:hover{ opacity:.9; }
/* === Hero marka ve metin görünürlüğü === */
.hero .hero-mark{
  width:350px;                /* logoyu büyüttük */
  height:auto;
  display:block;
  margin:0 auto 16px;
}

@media (max-width: 768px){
  .hero .hero-mark{ width:110px; }
}

/* Başlık + slogan renklerini beyaz yap */
.hero .hero-title{
  color:#ffffff !important;
  margin:0 0 8px;
  text-shadow:0 2px 6px rgba(0,0,0,.35); /* okunabilirlik */
}
.hero .hero-sub{
  color:#f2f6fb !important;
  margin:0 0 18px;
  font-size:18px;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}
/* === Hero logo boyutu === */
.hero .hero-mark{
  width: 350px;
  max-width: 80%;   /* ekranın %80’ini geçmesin */
  height:auto;
  margin:0 auto 16px;
  display:block;
}

@media (max-width: 768px){
  .hero .hero-mark{
    width: 220px;   /* mobilde daha küçük */
  }
}
/* Hero overlay'i aydınlat */
.hero::before{
  background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.05)) !important;
}
/* Alternatif: kenarlardan hafif kararma, metin ortada parlak */
.hero::before{
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.35) 85%) !important;
}
/* Overlay'i tamamen kapatmak istersen */
.hero::before{ background: none !important; }
.hero .hero-title{ color:#fff !important; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.hero .hero-sub{   color:#f2f6fb !important; text-shadow:0 1px 4px rgba(0,0,0,.35); }
.hero{
  min-height: 90vh;   /* daha yüksek hero alanı */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero .hero-sub{
  font-size: 22px;      /* daha büyük yazı */
  font-weight: 400;
  color:#f2f6fb;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
  margin-bottom: 20px;
}
@media (max-width: 768px){
  .hero .hero-sub{ font-size:18px; }
}
/* Varsayılan: Büyük ekranlar (masaüstü) */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-logo {
  width: 350px;   /* masaüstü için büyük logo */
  max-width: 100%;
}

.hero-title {
  font-size: 2.8rem;   /* masaüstü başlık */
  margin: 15px 0;
}

.hero-subtitle {
  font-size: 1.3rem;   /* masaüstü alt yazı */
}

/* Orta ekranlar (tablet yatay ve küçük laptoplar) */
@media (max-width: 1200px) {
  .hero {
    min-height: 75vh;
  }
  .hero-logo {
    width: 280px;
  }
  .hero-title {
    font-size: 2.4rem;
  }
  .hero-subtitle {
    font-size: 1.1rem;
  }
}

/* Tablet dikey */
@media (max-width: 992px) {
  .hero {
    min-height: 65vh;
  }
  .hero-logo {
    width: 220px;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
}

/* Büyük telefonlar */
@media (max-width: 768px) {
  .hero {
    min-height: 55vh;
  }
  .hero-logo {
    width: 180px;
  }
  .hero-title {
    font-size: 1.6rem;
  }
  .hero-subtitle {
    font-size: 0.9rem;
  }
}

/* Küçük telefonlar */
@media (max-width: 480px) {
  .hero {
    min-height: 45vh;
  }
  .hero-logo {
    width: 150px;
  }
  .hero-title {
    font-size: 1.4rem;
  }
  .hero-subtitle {
    font-size: 0.8rem;
  }
}
/* MOBİL NAV: hamburger görünür, liste kapalı */
@media (max-width: 992px){
  .site-header .nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:44px;height:44px; cursor:pointer;}
  .site-header #nav-list{display:none; position:fixed; top:64px; left:0; right:0;
    background:#0a1b2b; padding:10px 16px; z-index:1200; box-shadow:0 8px 24px rgba(0,0,0,.25);}
  .site-header #nav-list a{display:block; color:#fff; padding:12px 6px; font-weight:600;}
  .site-header .nav.is-open #nav-list{display:block;}
}
/* Genel (masaüstü) ufak düzen: butonları toparla */
.hero .hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.hero .hero-cta .btn{border-radius:14px; padding:12px 18px; font-weight:700}

/* Mobil uyarlamalar */
@media (max-width: 600px){
  .hero{min-height:55vh; padding:72px 16px 48px;}
  .hero .hero-mark{width:150px; height:auto; margin:0 auto 12px; display:block;}
  .hero .hero-title{font-size:9vw; line-height:1.1; margin:6px 0;}
  .hero .hero-sub{font-size:4.2vw; line-height:1.35; margin:6px 0 14px;}
  .hero .hero-cta{display:grid; gap:10px;}
  .hero .hero-cta .btn{width: 220px; justify-self:center;}
}
/* Temel buton stilleri */
.btn{border:0; outline:0; transition:.2s ease; box-shadow:0 6px 16px rgba(0,0,0,.18);}
.btn-primary{background:#0d2a5a; color:#fff;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:rgba(255,255,255,.92); color:#0d2a5a;}
.btn-ghost:hover{background:#fff;}
/* HEADER: her zaman sabit ve görünür */


/* İçerik header'ın altına insin */
main{ padding-top: 72px; }     /* header yüksekliğinize göre 64–80px arası ayarlayabilirsiniz */

/* Menü okunaklı olsun */
.site-header .nav a{ color:#fff; font-weight:600; text-decoration:none; }
.site-header .nav a:hover{ opacity:.85; }

/* Logo biraz büyük kalsın */
.logo-img{ height: 56px; width: auto; }
@media (max-width: 768px){ .logo-img{ height: 48px; } }
/* Masaüstünde CTA butonlarını gizle */
@media (min-width: 768px){
  .hero .hero-cta{ display: none !important; }
}
/* Header yüksekliği kadar otomatik boşluk - gap sıfır */
:root{ --header-h: 72px; }             /* gerekirse 68–80px arası olur */
main{ padding-top: var(--header-h); }   /* header sabitken içerik aşağı insin */

/* Olası boşluk kaynaklarını sıfırla */
.site-header{ margin:0; border-bottom:0; }
main > .hero{ margin-top:0; }           /* üst marjı olmasın */
.hero{ border-top-left-radius:0; border-top-right-radius:0; } /* üstte kıvrım yok */

/* Mobilde header daha kısa ise boşluğu dinamik ayarlayacağız (JS aşağıda) */
/* Hamburger çizgileri */
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer;}
.nav-toggle span{display:block; width:22px; height:2px; background:#fff; margin:5px 0; border-radius:2px;}

@media (max-width: 992px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto;}

  /* Menü mobilde üstten açılır */
  .site-header #nav-list{
    display:none; position:fixed; top:calc(var(--header-h)); left:0; right:0;
    background:#0a1b2b; z-index:1200; padding:10px 16px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .nav.is-open #nav-list{ display:block; }

  .site-header #nav-list a{display:block; color:#fff; padding:12px 6px; font-weight:600; text-decoration:none;}
}
/* === HEADER sabit & boşluk sıfır === */
:root{ --header-h: 72px; }
main{ padding-top: var(--header-h); }
.site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; background:#0a1b2b; }

/* === HAMBURGER görünümü === */
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer;}
.nav-toggle span{display:block; width:22px; height:2px; background:#fff; margin:5px 0; border-radius:2px;}

@media (max-width: 992px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto;}

  /* Açılır menü */
  .site-header #nav-list{
    display:none; position:fixed; top:calc(var(--header-h)); left:0; right:0;
    background:#0a1b2b; z-index:2000; padding:12px 16px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .nav.is-open #nav-list{ display:block; }
  .site-header #nav-list a{
    display:block; color:#fff; padding:12px 6px; font-weight:600; text-decoration:none;
  }

  /* Menü açıldığında arkada sayfa kaymasın */
  body.menu-open{ overflow:hidden; }
}

/* === HERO: mobilde daha küçük, CTA gizli === */
@media (max-width: 600px){
  .hero{ min-height:46vh; padding:56px 16px 28px; }
  .hero .hero-mark{ width:130px; height:auto; margin:0 auto 8px; display:block; }
  .hero .hero-title{ font-size:7vw; line-height:1.12; margin:6px 0; }
  .hero .hero-sub{   font-size:3.6vw; line-height:1.35; margin:6px 0 10px; }
  .hero .hero-cta{ display:none !important; } /* header var, CTA'ları gizledik */
}

/* Masaüstünde CTA zaten görünmesin (devam) */
@media (min-width: 768px){
  .hero .hero-cta{ display:none !important; }
}
/* Mobil hero daha kısa ve alttaki boşluk azalsın */
@media (max-width: 600px){
  .hero{
    min-height: 42vh;       /* 46 → 42 (gerekirse 40’a da çekebiliriz) */
    padding: 52px 16px 8px; /* alt boşluk 28 → 8 */
  }
  .hero .hero-mark{ width: 124px; margin: 0 auto 6px; }
  .hero .hero-title{ font-size: 6.6vw; margin: 4px 0; }
  .hero .hero-sub{   font-size: 3.4vw; margin: 4px 0 6px; }
  .hero .hero-cta{ display: none !important; } /* header var, butonları gizliyoruz */
}
/* Header sabit, menü üstte kalsın */
.site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background:#0a1b2b; }
@media (max-width: 992px){
  /* Açılır menü overlay'i üstte olsun */
  .site-header #nav-list{
    position: fixed; top: calc(var(--header-h)); left: 0; right: 0; z-index: 2000;
    display: none; background: #0a1b2b; padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
  }
  .nav.is-open #nav-list{ display:block; }
  body.menu-open{ overflow: hidden; } /* açılınca sayfa kaymasın */
}
/* ========= Mobile düzenlemeleri ========= */
@media (max-width: 768px) {

  /* A) Header logo boyutu ve hamburger hizası */
  .site-header .logo-img {
    height: 24px;          /* 18–24px arası deneyebilirsiniz */
    width: auto;
  }
  .site-header .nav-toggle {
    transform: translateY(1px); /* gerekirse 0–2px arasında ayarlayın */
  }

  /* B) Hero: yükseklik ve metin ölçekleri */
  .hero {
    min-height: 64vh;                 /* 60–68vh bandında tutmak iyi; 90vh yerine daha dengeli */
    padding-top: calc(var(--header-h) + 10px);
    padding-bottom: 18px;
    margin-bottom: 8px;               /* bir sonraki bölümle arayı kısaltır */
    background-position: center 35%;  /* kadrajı yukarı çek – fazla “siyah alt” görünmesin */
  }
  .hero .hero-mark {                  /* PROTIP işareti */
    width: clamp(140px, 40vw, 200px);
    margin-bottom: 10px;
  }
  .hero-title {
    font-size: clamp(22px, 6.2vw, 34px);
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .hero-sub {
    font-size: clamp(14px, 4vw, 18px);
    margin-bottom: 14px;
  }
  .hero-cta .btn {
    width: 100%;
    max-width: 320px;
    margin: 6px auto 0;
  }

  /* C1) Hero altındaki “koyu bant” hissini azalt (overlay/gradient) */
  /* Eğer .hero::before ile koyulaştırma yapıyorsak, mobilde daha hafif yapalım: */
  .hero::before {
    /* override */
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.28) 45%,
      rgba(0,0,0,0.34) 100%
    ) !important;
    /* İsterseniz tamamen kapatmak için:
       background: rgba(0,0,0,0.25) !important;
    */
  }

  /* C2) Hero’dan sonra gelen ilk bölümün (Öne Çıkan Ürünler) üst boşluğunu kısalt */
  .home-products,
  .section, 
  .container.section-header {
    padding-top: 16px;   /* varsa 32–64px’tir; mobilde 12–20px arasında tutmak iyi */
    margin-top: 0;
  }
}
@media (max-width: 480px) {
  .hero { min-height: 60vh; }
  .hero-title { font-size: clamp(20px, 6.8vw, 30px); }
  .hero-sub { font-size: clamp(13px, 3.8vw, 16px); }
}
/* ===== Mobil hero iyileştirmeleri ===== */
@media (max-width: 768px) {

  /* 1) Hero yüksekliği ve kadraj */
  .hero{
    min-height: 62vh;                 /* 60–66vh aralığı idealdir */
    background-position: center 20%;  /* kadrajı yukarı çek: 18–28% arası deneyebilirsin */
    margin-bottom: 8px;               /* alttaki bölüme yaklaş */
    padding-bottom: 14px;
  }

  /* 2) İçeriği yukarı taşı (header yüksekliğini de hesaba kat) */
  .hero .container.hero-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: calc(var(--header-h, 56px) + 6vh); /* daha yukarı istersen 5–6vh yap */
  }

  /* 3) İşaret + başlık + slogan ölçekleri */
  .hero .hero-mark{                 /* PROTIP işareti */
    width: clamp(140px, 38vw, 200px);
    margin-bottom: 8px;
  }
  .hero-title{
    font-size: clamp(22px, 6.2vw, 34px);
    line-height: 1.18;
    margin-bottom: 8px;
  }
  .hero-sub{
    font-size: clamp(14px, 3.9vw, 18px);
    line-height: 1.35;
    margin-bottom: 12px;
    opacity: .98;
  }

  /* 4) Overlay'i mobilde hafiflet: “altta ağır koyuluk” etkisi azalır */
  .hero::before{
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,.26) 40%,
      rgba(0,0,0,.22) 100%
    ) !important;
  }

  /* 5) Hero’dan sonraki bölümün üst boşluğunu kısalt */
  .home-products,
  .container.section-header{
    padding-top: 16px;
    margin-top: 0;
  }

  /* 6) Mobil header logosu biraz daha dengeli dursun (istersen) */
  .site-header .logo-img{
    height: 22px;       /* 22–24px; şu an 24px kullanıyorsun */
    width: auto;
  }
}
/* =========================
   MOBİL HERO DÜZELTMELERİ
   ========================= */
@media (max-width: 768px) {
  /* 1) Hero yüksekliğini kısalt, kadrajı yukarı kaydır */
  section.hero{
    min-height: 62vh !important;                 /* 60–66vh arası oynatabilirsin */
    background-position: center 18% !important;  /* alt siyahlığı azaltmak için */
    margin-bottom: 8px !important;
  }

  /* 2) İçeriği fiziksel olarak yukarı çek (özgüllüğü artırdık) */
  section.hero > .container.hero-inner{
    /* container'ın varsayılan padding'lerini etkisiz kıl */
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    /* güvenli taraftan yukarı kaldırma */
    transform: translateY(-5vh) !important;  /* daha çok istiyorsan -6vh / -7vh yap */
  }

  /* 3) Başlık / slogan boyutları */
  section.hero .hero-title{
    font-size: clamp(22px, 6.1vw, 34px) !important;
    line-height: 1.18 !important;
    margin-bottom: 8px !important;
  }
  section.hero .hero-sub{
    font-size: clamp(14px, 3.9vw, 18px) !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  /* 4) PROTIP işareti (hero-mark) boyutu */
  section.hero .hero-mark{
    width: clamp(140px, 38vw, 200px) !important;
    height: auto !important;
    margin-bottom: 8px !important;
  }

  /* 5) Overlay'i hafiflet – alttaki koyu band etkisini azaltır */
  section.hero::before{
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.14) 0%,
      rgba(0,0,0,.22) 40%,
      rgba(0,0,0,.18) 100%
    ) !important;
  }

  /* 6) Hero’dan sonraki bölümün tepesindeki boşluğu kısalt */
  .home-products,
  .container.section-header{
    margin-top: 0 !important;
    padding-top: 12px !important;
  }

  /* 7) (İstersen) mobil header logosunu biraz daha küçült */
  .site-header .logo-img{
    height: 22px !important;  /* 22–24px arası ideal */
    width: auto !important;
  }
}
/* Mobil hero düzenleme */
@media (max-width: 768px) {
  .hero {
    min-height: 70vh;      /* Yüksekliği düşür */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Yazıları ortala */
    margin-bottom: 0;       /* Alt boşluğu kaldır */
    padding-bottom: 0; 
  }

  .hero-inner {
    padding: 40px 20px 20px; /* Üstte biraz nefes aldır, altta boşluk azalt */
  }

  .hero-title {
    font-size: 1.6rem;  /* Başlık mobilde dengeli */
    margin-bottom: 10px;
  }

  .hero-sub {
    font-size: 1rem;    /* Alt yazı biraz daha küçük */
    margin-bottom: 0;
  }

  main {
    margin-top: 0 !important; /* Hero ile içerik arasındaki boşluğu yok et */
  }
}
/* Hero dışındaki tüm ana bölümlere açık gri zemin */
main > section:not(.hero) {
  background: #f7f9fc;   /* isterseniz #f5f7fa veya #f5f5f7 */
}

/* Bölüm iç boşluklarını rahatlat (isteğe bağlı)
   varsa mevcut padding kurallarınızla çakışmaz */
main > section:not(.hero) .container {
  padding-top: clamp(24px, 3.5vh, 40px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
/* Mobil hero ince ayarı */
@media (max-width: 480px) {
  .hero {
    min-height: 74vh;     /* 90vh yerine daha dengeli */
    margin-bottom: 12px;  /* hero ile sonraki bölüm arası daha kısa */
  }
  .hero-inner {
    padding-top: clamp(48px, 14vh, 120px); /* içeriği biraz yukarı al */
  }
  .hero-title {
    font-size: clamp(28px, 6.2vw, 38px);
    line-height: 1.1;
    margin-top: 6px;
  }
  .hero-sub {
    font-size: clamp(14px, 3.6vw, 18px);
  }
}
/* Hero görselinin konumunu biraz yukarı kaydır */
.hero-bg { background-position: 50% 18%; }
.products .section-title{font-size:28px;margin:24px 0}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.product-card{background:#fff;border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.06);padding:16px;text-align:center}
.product-card .media{display:block;aspect-ratio:1/1.0;background:linear-gradient(180deg,#fafafa,#f3f3f3);border-radius:12px;overflow:hidden;margin-bottom:12px}
.product-card img{width:100%;height:100%;object-fit:contain}
.product-name{font-size:18px;margin:8px 0 4px}
.product-blurb{color:#444;margin:0 0 12px}
.btn.btn-primary{display:inline-block;padding:10px 14px;border-radius:10px;background:#0a6; color:#fff; text-decoration:none}
.btn.btn-primary:hover{filter:brightness(1.05)}
body { background: #f6f8fb; }

.card { background:#fff; border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.10); overflow:hidden; }
.card-media img { background:#fafafa; padding:16px; height:220px; object-fit:contain; width:100%; }

.product-detail { max-width:1120px; margin:40px auto; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; }
@media (max-width: 960px){ .product-detail{ grid-template-columns:1fr; } }

.gallery-main { aspect-ratio:4/3; background:#fafafa; border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.08); overflow:hidden; }
.thumbs { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.thumbs img { width:100px; height:80px; object-fit:contain; background:#fff; border:1px solid #ddd; border-radius:8px; }

.pd-table { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.05); }
.pd-table th, .pd-table td { padding:12px 14px; border-bottom:1px solid #eee; text-align:left; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000; /* Header her şeyin üstünde */
}

.card-grid {
  position: relative;
  z-index: 1; /* Kartlar header'ın üstüne çıkmasın */
}
.site-header{position:sticky;top:0;z-index:1000}
.card-grid{position:relative;z-index:1}
/* === GENEL DÜZENLEMELER === */

/* 1) Varsayılan gövde boşluğunu kaldır ve gri arka planı koyulaştır */
html, body { margin: 0; padding: 0; }
body { background: #e9eef3; } /* daha koyu, yumuşak gri */

/* 2) Header her sayfada en üstte ve tıklanır kalsın */
.site-header { position: sticky; top: 0; z-index: 2000; }

/* 3) İçerik katmanları header'ın üstüne çıkmasın */
.page, .card-grid, .product-detail, .hero, .banner { position: relative; z-index: 1; }

/* 4) İlk blokların tepesindeki boşluğu sıfırla (anasayfa kahraman/hero ve diğer sayfalardaki ilk bölüm) */
.hero, .banner, .page > *:first-child { margin-top: 0 !important; }

/* 5) Koyu header üstünde menü linkleri görünür olsun */
.site-header a { color: #ffffff; }
.site-header a:hover { opacity: 0.9; }

/* 6) Ürün kartları */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap: 24px;
}
.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.14); }
.card-media img { width: 100%; height: 220px; object-fit: contain; background: #fafafa; padding: 16px; }

/* 7) Detay sayfası görsel alanları */
.product-detail { max-width: 1120px; margin: 40px auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; }
@media (max-width: 960px){ .product-detail{ grid-template-columns: 1fr; } }
.gallery-main { aspect-ratio: 4/3; background: #fafafa; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.08); overflow: hidden; }
.thumbs { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.thumbs img { width: 100px; height: 80px; object-fit: contain; background: #fff; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; }
/* Genel sıfırlama */
html, body { margin:0; padding:0; }

/* İlk içerik bloğunda üst boşlukları iptal et (hangi sınıf olursa olsun) */
main > *:first-child,
.page > *:first-child,
section:first-child,
.hero,
.banner,
.masthead {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Bazen beyaz şerit aslında üst boşluk değil, üstten gelen gradient/overlay oluyor */
.hero::before,
.banner::before,
.masthead::before {
  pointer-events: none;
}
/* Header en üstte ve kliklenebilir */
.site-header {
  position: sticky;  /* ya da fixed kullanıyorsanız kalsın */
  top: 0;
  z-index: 9999;     /* her şeyin üzerinde */
}

/* Hero/slider katmanları header'ın önüne geçmesin */
.hero, .banner, .masthead, .page, .card-grid, .product-detail {
  position: relative;
  z-index: 1;
}

/* Bazı temalarda hero resmi mutlak konumlu olur; "klik maskesi" yaratıyorsa iptal edelim */
.hero img, .banner img, .masthead img {
  pointer-events: none;              /* sadece arka plan görseli ise */
}

/* Menü linkleri görünür ve aralıklı olsun */
.site-header nav ul { display: flex; gap: 24px; align-items: center; }
.site-header nav li { list-style: none; }
.site-header nav a {
  display: inline-block;
  padding: 10px 14px;
  color: #ffffff;                    /* koyu header üstünde beyaz */
  text-decoration: none;
}
.site-header nav a:hover { opacity: .9; }
/* Daha koyu, yumuşak gri arka plan */
body { background: #dde3ea; }  /* istersen #d7dee6 bir ton daha koyu */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 24px;
}
.card { background:#fff; border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.10); overflow:hidden; transition:transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.14); }
.card-media img { width:100%; height:220px; object-fit:contain; background:#fafafa; padding:16px; }

.product-detail { max-width:1120px; margin:40px auto; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; }
@media (max-width:960px){ .product-detail{ grid-template-columns:1fr; } }
.gallery-main { aspect-ratio:4/3; background:#fafafa; border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.08); overflow:hidden; }
.thumbs { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.thumbs img { width:100px; height:80px; object-fit:contain; background:#fff; border:1px solid #ddd; border-radius:8px; cursor:pointer; }
/* === HEADER: fixed + en üstte ve tıklanır === */
:root { --header-h: 80px; } /* Header gerçek yüksekliğin farklıysa 64/80 yapabilirsin */
.site-header{
  position: fixed !important;
  top:0; left:0; right:0;
  z-index: 999999 !important; /* her şeyin üstünde */
  background:#0b2233; /* mevcut koyu renginiz */
  isolation: isolate; /* kendi stacking context'i */
}
body{
  margin:0; padding-top: var(--header-h);        /* içerik header'ın altından başlasın */
  background:#d1d7df;                             /* bir ton daha koyu gri */
}

/* === BEYAZ ŞERİTİ SIFIRLA === */
main, .page, .hero, .banner, .masthead{
  margin-top:0 !important; padding-top:0 !important;
}
header + .hero, header + main, header + .page{
  margin-top:0 !important; padding-top:0 !important;
}
.header-spacer, #header-spacer, [data-header-spacer]{
  display:none !important; /* varsa otomatik eklenen boşluk elemanı */
}

/* === HERO/SWIPER üstte görünmesin, header'ı kapatmasın === */
.hero, .banner, .masthead, .swiper, .slick-slider{
  position:relative; z-index:1;
}
.hero::before, .hero::after,
.banner::before, .banner::after,
.masthead::before, .masthead::after{
  pointer-events:none !important;
}
/* Sadece arka plan görüntüsü olan görseller tıklamayı engellemesin */
.hero img, .banner img, .masthead img{ pointer-events:none; }

/* === MENÜ BOŞLUKLARI === */
.site-header nav ul{ display:flex; gap:24px; align-items:center; margin:0; padding:0; }
.site-header nav li{ list-style:none; }
.site-header nav a{ display:inline-block; padding:10px 12px; color:#fff; text-decoration:none; }
.site-header nav a:hover{ opacity:.9; }

/* === (opsiyonel) Ürün kartları/detay sayfası katmanları header'ın altına insin === */
.page, .card-grid, .product-detail{ position:relative; z-index:1; }
:root{ --header-h:72px; } /* header yüksekliği 64/80 ise değiştir */

/* Header fixed, en üstte, tıklanabilir */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:999999; background:#0b2233; isolation:isolate;
}
body{ margin:0; padding-top:var(--header-h); }

/* Menü temel */
#nav-list{ list-style:none; margin:0; padding:0; }
#nav-list a{ text-decoration:none; color:#fff; }

/* Masaüstü */
@media (min-width:992px){
  .nav-toggle{ display:none !important; }               /* burger butonu gizle */
  #nav-list{ display:flex !important; gap:24px; align-items:center; }
  #nav-list a{ display:inline-block; padding:10px 12px; }
}

/* Mobil: kapalıyken gizli, açılınca fixed dropdown */
@media (max-width:991px){
  #nav-list{
    display:none; position:fixed; top:var(--header-h); left:0; right:0;
    flex-direction:column; gap:12px; background:#0b2233; padding:16px; z-index:999998;
  }
  .nav.is-open #nav-list{ display:flex; }
  #nav-list a{ padding:12px 8px; }
}

/* Linkler daima tıklanabilir olsun */
.site-header nav a{ position:relative; z-index:2; pointer-events:auto !important; cursor:pointer; }

/* Alt katmanlar header'ın önüne çıkmasın */
.hero, .banner, .page, .card-grid, .product-detail{ position:relative; z-index:1; }
/* Header sabit ve üstte */
:root{ --header-h:72px; }
.site-header{ position:fixed; top:0; left:0; right:0; z-index:999999; background:#0b2233; }
body{ margin:0; padding-top:var(--header-h); background:#d1d7df; }

/* İlk blok / hero üst boşluk ve radius iptal */
#anasayfa, .hero, .banner{
  margin-top:0 !important; padding-top:0 !important;
  border-top-left-radius:0; border-top-right-radius:0;
}

/* İçerik header'ın üstüne çıkmasın */
.page, .hero, .banner, .card-grid, .product-detail{ position:relative; z-index:1; }
/* Yumuşak kaydırma */
html { scroll-behavior: smooth; }

/* Fixed header için blur + opaklık animasyonu */
:root { --header-h: 72px; } /* header yüksekliği farklıysa güncelle */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 999999;
  background: rgba(11, 34, 51, .55);                /* hafif şeffaf koyu */
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  -webkit-backdrop-filter: saturate(1.15) blur(0px); /* Safari */
  backdrop-filter: saturate(1.15) blur(0px);
}
.site-header.scrolled{
  background: rgba(11, 34, 51, .88);                /* daha opak */
  -webkit-backdrop-filter: saturate(1.15) blur(8px);
  backdrop-filter: saturate(1.15) blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* İçerik header altında başlasın */
body { margin: 0; padding-top: var(--header-h); }

/* Menü aralığı + aktif link highlight */
.site-header nav ul{ display:flex; gap:24px; align-items:center; margin:0; padding:0; list-style:none; }
.site-header nav a{
  display:inline-block; padding:10px 12px; color:#fff; text-decoration:none;
  border-radius:8px;
}
.site-header nav a:hover { background: rgba(255,255,255,.08); }
.site-header nav a.active { background: rgba(255,255,255,.12); }

/* Alt katmanlar header'ın üstüne çıkmasın */
.hero, .banner, .page, .card-grid, .product-detail{ position:relative; z-index:1; }

/* Hero üstünde beyaz çizgi olmasın */
#anasayfa, .hero, .banner{ margin-top:0 !important; padding-top:0 !important; }
.thumbs .thumb.is-active img { outline:2px solid #1e90ff; outline-offset:2px; }
.zoomable { transition: transform .25s ease; }
.zoomable:hover { transform: scale(1.015); }
/* sabit header + blur (aynı kalsın) */
:root { --header-h: 72px; }
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 999999;
  background: rgba(11,34,51,.55);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  -webkit-backdrop-filter: saturate(1.15) blur(0px);
  backdrop-filter: saturate(1.15) blur(0px);
}
.site-header.scrolled{
  background: rgba(11,34,51,.88);
  -webkit-backdrop-filter: saturate(1.15) blur(8px);
  backdrop-filter: saturate(1.15) blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
body { margin: 0; padding-top: var(--header-h); }

/* header yerleşim */
.site-header .container{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header .logo{ display: flex; align-items: center; }
.site-header nav{ margin-left: auto; } /* menüyü sağa it */
.site-header nav ul{
  display: flex; gap: 28px; align-items: center; margin: 0; padding: 0; list-style: none;
}
.site-header nav a{
  display: inline-block; padding: 10px 12px; color: #fff; text-decoration: none; border-radius: 8px;
}
.site-header nav a:hover{ background: rgba(255,255,255,.08); }
.site-header nav a.active{ background: rgba(255,255,255,.12); }

/* içerik katmanları header'ın önüne çıkmasın */
.hero, .banner, .page, .card-grid, .product-detail{ position: relative; z-index: 1; }
/* anasayfa hero üstünde çizgi olmasın */
#anasayfa, .hero, .banner{ margin-top:0 !important; padding-top:0 !important; }
/* --- HEADER BLUR & OPACITY (OVERRIDE) --- */
:root { --header-h:72px; }

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:999999;
  background: rgba(11,34,51,.55) !important;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  -webkit-backdrop-filter: saturate(1.15) blur(0px);
  backdrop-filter: saturate(1.15) blur(0px);
}

.site-header.scrolled{
  background: rgba(11,34,51,.90) !important;
  -webkit-backdrop-filter: saturate(1.15) blur(8px);
  backdrop-filter: saturate(1.15) blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Menü sağa hizalı kalsın */
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.site-header nav{ margin-left:auto; }

/* --- THUMBS ACTIVE ÇERÇEVE --- */
.thumbs .thumb.is-active img{
  outline: 2px solid #1e90ff;
  outline-offset: 2px;
}
.zoomable{ transition: transform .25s ease; }
.zoomable:hover{ transform: scale(1.015); }
.site-header{
  background: rgba(11,34,51,.50) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled{
  background: rgba(11,34,51,.78) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(12px);
  backdrop-filter: saturate(1.1) blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
/* --- HEADER GLASS (dinamik) --- */
header.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 999999;
  background: rgba(11,34,51,.40) !important;         /* tepedeyken daha şeffaf */
  -webkit-backdrop-filter: saturate(1.1) blur(2px);
  backdrop-filter: saturate(1.1) blur(2px);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
header.site-header.scrolled{
  background: rgba(11,34,51,.90) !important;         /* scroll sonrası koyu/blur */
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Menü hizalama ve aktif vurgusu (gerekirse) */
header.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
header.site-header nav{ margin-left:auto; }
header.site-header nav ul{ display:flex; gap:28px; align-items:center; margin:0; padding:0; list-style:none; }
header.site-header nav a{ display:inline-block; padding:10px 12px; color:#fff; text-decoration:none; border-radius:8px; }
header.site-header nav a:hover{ background: rgba(255,255,255,.08); }
header.site-header nav a.active{ background: rgba(255,255,255,.12); }
/* === Ana sayfa: ürün kartı görsellerini büyüt === */
/* Kart içindeki görseli büyüt (daha dolu dursun) */
.home-products .card-media img{
  height: 320px;          /* önce 220px idi, büyüttük */
  width: 100%;
  object-fit: contain;
  background: #f7f9fc;
  padding: 8px;           /* çok boşluk olmasın */
  border-radius: 12px;
}

/* Bölümün dikey boşluklarını biraz kıs */
.home-products{
  padding-top: 16px;
  padding-bottom: 32px;
}

/* Farklı ekranlarda yükseklik ayarı */
@media (max-width: 991px){
  .home-products .card-media img{ height: 260px; }
}
@media (max-width: 575px){
  .home-products .card-media img{ height: 200px; }
}

/* Kartların genel görünümü biraz daha dolu ve belirgin olsun */
.home-products .card{
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* === Footer (alt bölüm): daralt ve sıkılaştır === */
.site-footer{
  padding: 28px 0 16px;      /* üst-alt boşluğu küçülttük */
  background: #0f2231;       /* mevcut koyu temayla uyumlu */
  color: #d9e3ec;
}

/* Footer grid düzeni (var olan container üzerinde) */
.site-footer .container{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;   /* 3 sütun */
  gap: 20px;
  align-items: start;
}

/* Başlık ve metin boyutları */
.site-footer h4{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.site-footer p,
.site-footer li,
.site-footer a{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #d9e3ec;
  text-decoration: none;
}

/* Liste aralıklarını sıkılaştır */
.site-footer ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

/* En alttaki telif/çizgi satırı (varsa) */
.site-footer .footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 12px;
  padding-top: 12px;
  font-size: 12px;
  color: #b8c5d1;
  text-align: center;
}

/* Küçük ekranlarda footer tek sütun olsun */
@media (max-width: 768px){
  .site-footer .container{ grid-template-columns: 1fr; }
}
/* Ana sayfanın ürün kartlarında görselleri büyüt – kesin override */
.home-products .card-media{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f7f9fc;
  padding:12px;
  border-radius:14px;
  min-height: 340px;                 /* alanı da büyütüyoruz */
}

.home-products .card-media img{
  width:100%;
  height:340px !important;           /* önceki 220px'i ezer */
  max-height:340px !important;
  object-fit:contain;
  display:block;
}

@media (max-width: 992px){
  .home-products .card-media{ min-height: 280px; }
  .home-products .card-media img{ height:280px !important; max-height:280px !important; }
}
@media (max-width: 576px){
  .home-products .card-media{ min-height: 220px; }
  .home-products .card-media img{ height:220px !important; max-height:220px !important; }
}
/* HOME ÜRÜN KARTLARI – görsel alanını büyüt ve resme %100 doldurt */
.home-products .card-media{
  display: block !important;           /* <a> block olsun */
  aspect-ratio: 4 / 3 !important;      /* sabit oran: geniş, dolu görünür */
  background: #f7f9fc;
  padding: 12px;
  border-radius: 14px;
}

.home-products .card-media img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;             /* inline height'ı ezer */
  max-height: none !important;
  object-fit: contain !important;
}

/* Daha küçük ekranlarda alanı biraz azalt */
@media (max-width: 992px){
  .home-products .card-media{ aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 576px){
  .home-products .card-media{ aspect-ratio: 4 / 3 !important; }
}
/* Masaüstünde ana sayfa ürün kartlarını genişlet */
@media (min-width: 992px){
  .home-products .card-grid{
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    gap: 28px !important;
  }
}

/* Görsel alanı dolu dursun (emin olmak için) */
.home-products .card-media{ aspect-ratio: 4/3 !important; }
.home-products .card-media img{ width:100% !important; height:100% !important; object-fit:contain !important; }
/* --- Mobilde ürün kartlarını biraz küçült --- */
@media (max-width: 576px){
  /* görsel alanını biraz basık yap ve iç dolguyu azalt */
  .home-products .card-media{
    aspect-ratio: 5 / 4 !important;   /* 4/3'ten biraz daha kısa */
    padding: 8px !important;
  }
  /* görsel yüksekliğini sınırla */
  .home-products .card-media img{
    height: auto !important;
    max-height: 240px !important;      /* gerekirse 220px yapabilirsin */
    object-fit: contain !important;
  }

  /* metinler ve boşluklar: bir tık küçült */
  .home-products .card-title{ font-size: 20px; }
  .home-products .card-text{ font-size: 15px; line-height: 1.5; }
  .home-products{ padding-top: 8px; padding-bottom: 24px; }
}
/* --- Footer'ı kompakt yap --- */
.site-footer{
  padding: 20px 0 12px;                 /* üst-alt boşluğu kısalt */
}

.site-footer .container{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr; /* 3 sıkı sütun */
  column-gap: 16px;
  row-gap: 10px;
}

.site-footer h4{
  margin: 0 0 6px;
  font-size: 15px;                      /* başlığı küçült */
}

.site-footer p,
.site-footer li,
.site-footer a{
  margin: 0;
  font-size: 10px;                      /* metni küçült */
  line-height: 1.45;                    /* satır arası dar */
}

.site-footer ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;                             /* madde araları dar */
}

.site-footer .footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 8px;
  padding-top: 8px;
  font-size: 12px;
}

/* Küçük ekranlarda tek sütun ve daha sıkı */
@media (max-width: 768px){
  .site-footer .container{ grid-template-columns: 1fr; row-gap: 8px; }
}

/* Son bölüm ile footer arası boşluğu da kısalt (anasayfa) */
.home-products{ margin-bottom: 12px !important; }
/* === MOBİL FOOTER KOMPAKT === */
@media (max-width: 576px){
  .site-footer{ padding: 14px 0 10px; }

  /* Tek sütun, daha sıkı aralıklar */
  .site-footer .container{
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  /* Büyük başlıkları küçült (firma adı dahil) */
  .site-footer h1,
  .site-footer h2,
  .site-footer h3,
  .site-footer h4{
    font-size: 18px;     /* istersen 16px yapabilirsin */
    line-height: 1.25;
    margin: 0 0 6px;
  }

  /* Metinler/dizinler daha küçük ve sıkı */
  .site-footer p,
  .site-footer li,
  .site-footer a{
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
  }

  .site-footer ul{ gap: 4px; }

  /* En alttaki telif satırı da küçülsün */
  .site-footer .footer-bottom{
    margin-top: 6px;
    padding-top: 6px;
    font-size: 11px;
  }

  /* (İSTEĞE BAĞLI) "Not" sütununu mobilde gizle
     Eğer 3. sütun "Not" ise alttaki satırı AÇ */
  /* .site-footer .container > *:nth-child(3){ display:none; } */
}
/* === MOBİL FOOTER – Not gizle + daha kompakt === */
@media (max-width: 576px){
  .site-footer{ padding: 12px 0 8px; }

  .site-footer .container{
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  /* Başlıkları ve metinleri küçült */
  .site-footer h1,
  .site-footer h2,
  .site-footer h3,
  .site-footer h4{
    font-size: 16px;
    line-height: 1.25;
    margin: 0 0 4px;
  }
  .site-footer p,
  .site-footer li,
  .site-footer a{
    font-size: 10px;
    line-height: 1.4;
    margin: 0;
  }
  .site-footer ul{ gap: 3px; }

  /* Telif satırı daha da küçük */
  .site-footer .footer-bottom{
    margin-top: 6px;
    padding-top: 6px;
    font-size: 4px;   /* diğerlerinden küçük */
  }

  /* "Not" sütununu gizle (varsa .footer-note sınıfı tercih edilir) */
  .site-footer .container > .footer-note{ display:none !important; }
  /* sınıf yoksa 3. sütunu gizle */
  .site-footer .container > :nth-child(3){ display:none !important; }
}
/* Genel sıkılaştırma */
.site-footer{ padding: 10px 0 8px; }
.site-footer h4.brand-name{ margin: 0 0 4px; }

/* Telif daha küçük */
.site-footer .footer-bottom{
  margin-top: 6px;
  padding-top: 6px;
  font-size: 10px;
  opacity: .9;
}

/* — Mobil (zaten sıkı): küçük boy ve tek sütun — */
@media (max-width: 576px){
  .site-footer .container{ grid-template-columns: 1fr; row-gap: 6px; }

  .site-footer h4.brand-name{
    font-size: 10px;        /* bir tık küçük */
    line-height: 1.2;
  }
  .site-footer p,
  .site-footer li,
  .site-footer a{
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
  }

  /* Not sütununu gizli tutalım */
  .site-footer .container > .footer-note{ display:none !important; }
  .site-footer .container > :nth-child(3){ display:none !important; }
}

/* — Masaüstünde adres/iletişim satırlarını tek satırda topla — */
/* İlk sütundaki paragrafları yan yana diz, araya • koy */
@media (min-width: 768px){
  .site-footer .container > div:first-child p{
    display: inline;
    margin: 0;
  }
  .site-footer .container > div:first-child p + p::before{
    content: " • ";
    margin: 0 8px;
    opacity: .65;
  }
}
/* MOBİL: footer marka adını en küçük ve düzenli göster */
@media (max-width: 576px){
  .site-footer .brand-name{
    font-weight: 600;
    /* mümkün olduğunca küçük: min 10px’e kadar iner */
    font-size: clamp(10px, 2.6vw, 14px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px !important;
    text-wrap: balance;
    white-space: normal;            /* satır kırılabilsin */
    word-break: break-word;         /* çok uzun kelimelerde kır */
    overflow-wrap: anywhere;        /* gerekirse herhangi yerden kır */
  }
  /* Çok dar ekranlarda bir tık daha küçült */
  @media (max-width: 360px){
    .site-footer .brand-name{ font-size: 10px !important; }
  }
}
/* ========== MOBİL FOOTER SIKI DÜZEN ========== */
@media (max-width: 576px){
  footer.site-footer{
    padding: 14px 16px !important;
  }
  footer.site-footer .container{
    /* tek sütun + küçük boşluk */
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Başlıklar ve marka adı: agresif küçültme */
  footer.site-footer .brand-name,
  footer.site-footer h1,
  footer.site-footer h2,
  footer.site-footer h3,
  footer.site-footer h4{
    font-size: 12px !important;           /* Gerekirse 11px yapabilirsin */
    line-height: 1.15 !important;
    font-weight: 600 !important;
    margin: 0 0 4px !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Paragraflar ve linkler */
  footer.site-footer p,
  footer.site-footer li,
  footer.site-footer a{
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 0 4px !important;
  }

  /* “Not” sütununu gizle */
  footer.site-footer .footer-note{
    display: none !important;
  }

  /* En alttaki telif satırı */
  footer.site-footer .footer-bottom small{
    font-size: 11px !important;    /* daha da küçültmek istersen 10px yapabilirsin */
    line-height: 1.2 !important;
  }
}
/* ========== /MOBİL FOOTER ========== */
/* ===== Footer linkleri: daha belirgin etkileşim ===== */
.site-footer .footer-col a{
  color:#cfe3ff;                        /* normal */
  text-decoration:none;
  border-bottom:1px dotted rgba(207,227,255,.35);
  padding:2px 4px;
  border-radius:6px;
  transition:color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Masaüstü (hover destekli cihazlar) */
@media (hover:hover){
  .site-footer .footer-col a:hover{
    color:#fff;
    background:rgba(255,255,255,.12);
    border-bottom-color:transparent;
    box-shadow:0 0 0 2px rgba(255,255,255,.12) inset;
  }
}

/* Klavye odak + mobil tıklama (touch) */
.site-footer .footer-col a:focus-visible,
.site-footer .footer-col a:active{
  color:#fff;
  background:rgba(255,255,255,.16);
  outline:2px solid rgba(255,255,255,.25);
  outline-offset:2px;
  border-bottom-color:transparent;
}

/* Telefon & e-posta ikonları */
.site-footer .footer-col a[href^="tel:"]::before{
  content:"\260E";  /* ☎ */
  margin-right:.6rem;
  opacity:.9;
}
.site-footer .footer-col a[href^="mailto:"]::before{
  content:"\2709";  /* ✉ */
  margin-right:.6rem;
  opacity:.9;
}
/* Footer link list: daha sıkı görünüm */
.site-footer .footer-col h3{
  margin-bottom: 0px;           /* başlık – biraz daha yakın */
}

.site-footer .link-list{
  margin-top: 4px;               /* listenin üst boşluğu kısaltıldı */
  padding: 0;
}

.site-footer .link-list li{
  margin: 4px 0;                 /* dikey aralık azaltıldı */
  line-height: 1.25;
}

/* Eğer link-list sınıfı yoksa, fallback (sadece footer içindeki ul) */
.site-footer .footer-col ul{
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.site-footer .footer-col ul li{
  margin: 4px 0;
  line-height: 1.25;
}

/* Mobilde biraz daha sıkı */
@media (max-width: 768px){
  .site-footer{ padding-top: 20px; padding-bottom: 20px; }
  .site-footer .footer-col h3{ margin-bottom: 8px; }
  .site-footer .link-list li,
  .site-footer .footer-col ul li{ margin: 3px 0; }
}
/* Genel buton animasyonları (site genelinde işe yarar) */
.btn{
  transition: background-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease, filter .2s ease;
}lı

/* Kart içindeki birincil buton – hover efekti */
.card .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(10, 25, 50, .18), 0 6px 10px rgba(10, 25, 50, .10);
  filter: brightness(1.02);
}

/* Basılı tutarken yere “otursun” */
.card .btn-primary:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(10, 25, 50, .12);
}
/* ===== Footer hizalama + Hızlı Bağlantılar sıkılaştırma ===== */

/* Masaüstünde sütunları tepeden hizala */
.site-footer .container{
  display: flex;
  align-items: flex-start;        /* hepsi aynı hizada tepeden başlasın */
  gap: 48px;                      /* sütun arası boşluk */
  flex-wrap: wrap;                /* dar ekranlarda alttan devam etsin */
}

/* Sütunların tepe boşluklarını sıfırla */
.site-footer .footer-col{
  margin-top: 0 !important;
}

/* Başlık ve liste aralıkları */
.site-footer .footer-col h3{
  margin: 0 0 10px !important;
  line-height: 1.2;
}

/* Listeyi sıkılaştır */
.site-footer .footer-col ul{
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.site-footer .footer-col ul li{
  margin: 4px 0 !important;      /* dikey aralığı kısalttık */
  line-height: 1.25;
}

/* Linkler biraz daha kompakt dursun */
.site-footer .footer-col ul li a{
  display: inline-block;
  padding: 2px 0;
}

/* Tablet ve altı: blok düzen, hafif üst boşluk */
@media (max-width: 992px){
  .site-footer .container{ display: block; }
  .site-footer .footer-col{ margin-top: 16px; }
}
/* Footer: 'Hızlı Bağlantılar' ve 'Not' sütunlarını gizle */
.site-footer .container .footer-col:nth-of-type(2),
.site-footer .container .footer-col:nth-of-type(3) {
  display: none !important;
}

/* Tek sütun düzenine dön ve bandı incelt */
.site-footer .container{
  display: block !important;
}
.site-footer{
  padding: 24px 0 10px !important;   /* üst-alt boşluğu incelttik */
}

/* Telif satırını da daha kompakt yapalım */
.site-footer .copyright{
  font-size: px !important;
  opacity: .85;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255,255,255,.12);
}
/* === Biotrics benzeri ürün sayfası stili === */
:root{
  --accent: #A6D37A;             /* açık yeşil vurgumuz */
  --ink: #0f2331;
  --muted: #6e7e8a;
  --card-bg: #f6f9fc;
}

/* Liste: geniş kartlar */
.products-landing{ padding:48px 0 24px; }
.product-wide{
  display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
  margin:72px 0;
}
.product-wide:nth-child(even){ grid-template-columns:1fr 1.1fr; }
.pw-img{ background:var(--card-bg); border-radius:18px; padding:28px; 
  box-shadow:0 24px 60px rgba(15,35,49,.10); }
.pw-img img{ width:100%; height:auto; display:block; }

.pw-copy{ color:var(--ink); }
.pw-tag{ color:var(--accent); text-transform:uppercase; letter-spacing:.14em;
  font-weight:700; font-size:13px; margin-bottom:10px; }
.pw-title{ font-size:42px; line-height:1.05; margin:0 0 12px; font-weight:800; }
.pw-title em{ font-style:normal; color:var(--accent); font-weight:800; }
.pw-desc{ color:var(--muted); font-size:17px; line-height:1.6; margin:0 0 18px; }

.pw-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* Düğmeler */
.btn{ display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:12px; font-weight:700; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn span{ position:relative; }
.btn-primary{ background:#103447; color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,52,71,.25); }

.btn-ghost{ background:#fff; color:#0c2740; box-shadow:0 6px 18px rgba(15,35,49,.12); }
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,35,49,.18); }

.btn-outline{ background:transparent; border:2px solid var(--accent); color:var(--accent); }
.btn-outline:hover{ background:var(--accent); color:#0b2a3d; transform:translateY(-2px); }

/* Düğme uçlarına küçük ok/indir görseli (ikon kullanmadan) */
.btn-ghost span::after{
  content:"›"; margin-left:8px; font-size:18px; line-height:1;
}
.btn-outline span::before{
  content:"⇩"; margin-right:8px; font-size:16px; line-height:1;
}

/* Ürün detayı: üst kahraman alanı */
.p-hero{ padding:28px 0 0; }
.hero-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
.p-hero-media{ background:var(--card-bg); border-radius:18px; padding:24px;
  box-shadow:0 24px 60px rgba(15,35,49,.10); }
.p-hero-media img{ width:100%; height:auto; display:block; }
.p-hero-copy .pw-title{ font-size:46px; }
.p-hero-copy .pw-desc{ margin:10px 0 18px; }

/* Hover yükselme/ışık efekti: sayfadaki tüm .btn-primary ve .btn-ghost için genel */
.btn-primary, .btn-ghost{ will-change:transform, box-shadow; }

/* Responsive */
@media (max-width: 992px){
  .product-wide, .hero-grid{ grid-template-columns:1fr; gap:24px; }
  .pw-title{ font-size:34px; }
  .p-hero-copy .pw-title{ font-size:36px; }
}
/* === Biotrics benzeri ürün sayfası stili === */
:root{
  --accent: #A6D37A;             /* açık yeşil vurgumuz */
  --ink: #0f2331;
  --muted: #6e7e8a;
  --card-bg: #f6f9fc;
}

/* Liste: geniş kartlar */
.products-landing{ padding:48px 0 24px; }
.product-wide{
  display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
  margin:72px 0;
}
.product-wide:nth-child(even){ grid-template-columns:1fr 1.1fr; }
.pw-img{ background:var(--card-bg); border-radius:18px; padding:28px; 
  box-shadow:0 24px 60px rgba(15,35,49,.10); }
.pw-img img{ width:100%; height:auto; display:block; }

.pw-copy{ color:var(--ink); }
.pw-tag{ color:var(--accent); text-transform:uppercase; letter-spacing:.14em;
  font-weight:700; font-size:13px; margin-bottom:10px; }
.pw-title{ font-size:42px; line-height:1.05; margin:0 0 12px; font-weight:800; }
.pw-title em{ font-style:normal; color:var(--accent); font-weight:800; }
.pw-desc{ color:var(--muted); font-size:17px; line-height:1.6; margin:0 0 18px; }

.pw-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* Düğmeler */
.btn{ display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:12px; font-weight:700; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn span{ position:relative; }
.btn-primary{ background:#103447; color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,52,71,.25); }

.btn-ghost{ background:#fff; color:#0c2740; box-shadow:0 6px 18px rgba(15,35,49,.12); }
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,35,49,.18); }

.btn-outline{ background:transparent; border:2px solid var(--accent); color:var(--accent); }
.btn-outline:hover{ background:var(--accent); color:#0b2a3d; transform:translateY(-2px); }

/* Düğme uçlarına küçük ok/indir görseli (ikon kullanmadan) */
.btn-ghost span::after{
  content:"›"; margin-left:8px; font-size:18px; line-height:1;
}
.btn-outline span::before{
  content:"⇩"; margin-right:8px; font-size:16px; line-height:1;
}

/* Ürün detayı: üst kahraman alanı */
.p-hero{ padding:28px 0 0; }
.hero-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
.p-hero-media{ background:var(--card-bg); border-radius:18px; padding:24px;
  box-shadow:0 24px 60px rgba(15,35,49,.10); }
.p-hero-media img{ width:100%; height:auto; display:block; }
.p-hero-copy .pw-title{ font-size:46px; }
.p-hero-copy .pw-desc{ margin:10px 0 18px; }

/* Hover yükselme/ışık efekti: sayfadaki tüm .btn-primary ve .btn-ghost için genel */
.btn-primary, .btn-ghost{ will-change:transform, box-shadow; }

/* Responsive */
@media (max-width: 992px){
  .product-wide, .hero-grid{ grid-template-columns:1fr; gap:24px; }
  .pw-title{ font-size:34px; }
  .p-hero-copy .pw-title{ font-size:36px; }
}
/* === Products landing (px-*) – son rötuşlar === */
.products-landing { margin-top: 48px; }

.product-wide{
  display:grid;
  grid-template-columns:minmax(260px,420px) 1fr;
  gap:56px;
  align-items:center;
  margin:72px 0;
}

/* Çift sırada görseli sağa al (Biotrics gibi zig-zag) */
.product-wide:nth-child(even){ grid-template-columns:1fr minmax(260px,420px); }
.product-wide:nth-child(even) .px-image{ order:2; }
.product-wide:nth-child(even) .px-copy{ order:1; }

/* Görsel kutusu */
.px-image{ position:relative; }
.px-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 14px 32px rgba(15,39,67,.20);
}
/* Ekrandaki beyaz/kare yer-tutucuyu kapat */
.px-image::before,
.px-image::after{ display:none !important; }

/* Metinler */
.px-tag{
  font-weight:600;
  font-size:12px;
  letter-spacing:.12em;
  color:#8ABF8A;            /* yumuşak yeşil etiket */
  margin:0 0 8px;
}
.px-title{
  font-weight:800;
  font-size:48px;
  line-height:1.05;
  color:#102A43;
  margin:0 0 12px;
}
.px-desc{
  color:#334E68;
  max-width:56ch;
  margin:0;
}

/* CTA alanı */
.px-cta{
  display:flex;
  gap:12px;
  margin-top:18px;
}
.px-cta .btn-ghost{
  padding:10px 16px;
  border:2px solid var(--accent);
  box-shadow:0 6px 14px rgba(15,39,67,.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
.px-cta .btn-ghost:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(15,39,67,.18);
}
.px-cta .btn-outline{
  padding:10px 16px;
  border:2px solid #A8CAB0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.px-cta .btn-outline:hover{ transform:translateY(-2px); }

/* Mobil yığınla */
@media (max-width: 992px){
  .product-wide{ grid-template-columns:1fr; gap:24px; margin:40px 0; }
  .px-title{ font-size:34px; }
}
/* === Products landing (px-*) – 2 sütun ve görsel kutusunu kaldır === */

/* Ebeveyn: 2 sütun (masaüstü), mobilde 1 sütun */
.products-landing{
  display:grid;
  grid-template-columns: repeat(2, minmax(320px,1fr));
  gap:56px;
  margin-top:48px;
}

/* Her ürün kartı: dikey yığın */
.product-wide{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  margin:0; /* her kartın dış boşluğunu iptal */
}

/* Görsel alanı – kutu havasını kaldır */
.px-image{
  width:100%;
  /* sabit oran istersek: */
  aspect-ratio: 16/10;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:relative;
}

/* Her ihtimale karşı placeholder pseudo'ları kapat */
.px-image::before,
.px-image::after{
  content:none !important;
  display:none !important;
}

/* Görsel: alanı doldur ama taşma olmasın */
.px-image img{
  width:100%;
  height:100%;
  object-fit:contain;      /* görsel kesilmez */
  display:block;
  background:transparent;  /* şeffaf görseller için */
}

/* Metinler */
.px-tag{
  font-weight:600;
  font-size:12px;
  letter-spacing:.12em;
  color:#8ABF8A;
  margin:0 0 8px;
}
.px-title{
  font-weight:800;
  font-size:34px;
  line-height:1.1;
  color:#102A43;
  margin:0 0 8px;
}
.px-desc{
  color:#334E68;
  max-width:56ch;
  margin:0;
}

/* CTA buton grubu + hover efekti */
.px-cta{
  display:flex;
  gap:12px;
  margin-top:14px;
}
.px-cta .btn-ghost,
.px-cta .btn-outline{
  padding:10px 16px;
  border:2px solid var(--accent, #0E8CAD);
  transition:transform .2s ease, box-shadow .2s ease;
}
.px-cta .btn-ghost{
  box-shadow:0 6px 14px rgba(15,39,67,.12);
}
.px-cta .btn-ghost:hover,
.px-cta .btn-outline:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(15,39,67,.18);
}

/* Mobil: tek sütun, daha sıkı boşluklar */
@media (max-width: 992px){
  .products-landing{ grid-template-columns:1fr; gap:32px; }
  .px-title{ font-size:28px; }
}
/* — Ürün listesi (şeffaf görseller için) — */
.products-landing{
  display:grid;
  grid-template-columns: repeat(2, minmax(360px,1fr));
  gap:48px;
  align-items:start;
  margin-top:48px;
}

/* Her ürün kartı dikey stack */
.product-wide{
  display:flex;
  flex-direction:column !important;
  gap:16px;
}

/* Görsel alanı: kutusuz/gölgesiz, şeffaf */
.px-image{
  order:1 !important;
  width:100%;
  aspect-ratio: 4 / 3;              /* PNG oranınıza uymazsa 16/10 veya 3/2 deneyin */
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:relative;
}
.px-image::before,
.px-image::after{ content:none !important; display:none !important; }

.px-copy{ order:2 !important; }

/* Görselin taşmadan, alana “contain” yerleşmesi */
.px-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:transparent;
}

/* Eski “kutu/kart” grid’i yanlışlıkla kalırsa tamamen gizle */
.container.card-grid{ display:none !important; }

@media (max-width: 992px){
  .products-landing{ grid-template-columns:1fr; gap:28px; }
  .px-image{ aspect-ratio: 16 / 10; } /* mobilde biraz daha yatay görünüm */
}
/* .container.card-grid{ display:none !important; } */
/* Eski kart düzenindeki görselleri güvene al */
.card-media img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Yeni düzen: ürün görsel alanı ve img */
.px-image{
  width:100%;
  aspect-ratio: 16/10;     /* Şeffaf PNG oranına göre 16/10, 4/3, 3/2 deneyebilirsin */
  min-height: 260px;       /* aspect-ratio desteklenmeyen tarayıcılar için emniyet */
  background:transparent;
  border-radius:0;
  box-shadow:none;
  position:relative;
}
.px-image::before,
.px-image::after{ content:none; display:none; }

.px-image img{
  width:100%;
  height:100%;
  object-fit:contain;      /* PNG’yi kırpmadan sığdır */
  display:block;
  background:transparent;
}
.products-landing{
  display:grid;
  grid-template-columns: repeat(2, minmax(360px,1fr));
  gap:48px;
  align-items:start;
  margin-top:48px;
}
.product-wide{ display:flex; flex-direction:column; gap:16px; }
@media (max-width: 992px){
  .products-landing{ grid-template-columns:1fr; gap:28px; }
  .px-image{ aspect-ratio: 16/10; }
}
/* Eski kart düzenindeki görselleri güvene al */
.card-media img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Yeni düzen: ürün görsel alanı ve img */
.px-image{
  width:100%;
  aspect-ratio: 16/10;     /* Şeffaf PNG oranına göre 16/10, 4/3, 3/2 deneyebilirsin */
  min-height: 260px;       /* aspect-ratio desteklenmeyen tarayıcılar için emniyet */
  background:transparent;
  border-radius:0;
  box-shadow:none;
  position:relative;
}
.px-image::before,
.px-image::after{ content:none; display:none; }

.px-image img{
  width:100%;
  height:100%;
  object-fit:contain;      /* PNG’yi kırpmadan sığdır */
  display:block;
  background:transparent;
}
/* --- Görselleri zorla göster (eski kart + yeni düzen) --- */
.card-media,
.px-image{
  display:block !important;
  visibility:visible !important;
  background:transparent !important;
  min-height: 220px;      /* emniyet yüksekliği */
}

.card-media img,
.px-image img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  opacity:1 !important;
  filter:none !important;
  position:relative !important;
  z-index:1 !important;
}

/* Eski “gölge / blur katmanları” varsa komple kapat */
.card-media::before,
.card-media::after,
.px-image::before,
.px-image::after{
  content:none !important;
  display:none !important;
}

/* Yanlışlıkla gizlenmiş olabilecek blokları tekrar aç */
.container.card-grid,
.products-landing{ display:block !important; }
/* === Ürün listesi: 2 kolon kart grid === */
.products-landing{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  align-items:start;
}

/* Mobilde tek kolon */
@media (max-width: 992px){
  .products-landing{ grid-template-columns:1fr; }
}

/* Kart */
.p-card{
  display:flex;
  gap:20px;
  align-items:center;
  padding:20px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  box-shadow:0 8px 24px rgba(15,25,35,.15);
}

/* Görsel kutusu – sabit oran + taşma yok */
.p-image{
  flex:0 0 380px;
  max-width:380px;
  aspect-ratio:4 / 3;        /* desteklemeyen tarayıcılar için min-height de veriyoruz */
  min-height:240px;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;
}
.p-image img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* Metin blokları */
.p-copy{ flex:1 1 auto; }
.p-tag{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#99c48f; margin-bottom:6px; }
.p-title{ font-size:32px; line-height:1.2; margin:0 0 8px 0; }
.p-title a{ color:#e8eef5; text-decoration:none; }
.p-desc{ margin:0 0 12px 0; color:#c9d3dc; }

/* CTA alanı */
.p-cta{ display:flex; gap:10px; flex-wrap:wrap; }

/* --- Güvenlik: görseli saklayan eski kurallar varsa ez --- */
.card-media,.pw-image,.px-image{ display:block !important; visibility:visible !important; }
.card-media::before,.card-media::after,
.pw-image::before,.pw-image::after{ content:none !important; display:none !important; }

/* Eski “hero” düzeni kalıntılarını etkisizleştir */
.product-wide{ display:contents !important; }  /* var ise dev bloku dağıt */

/* Ürün liste ızgarası: masaüstünde 2 sütun, mobilde 1 sütun */
.pw-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:48px;
  align-items: stretch;
}

/* Tablet ve mobilde tek sütun */
@media (max-width: 992px){
  .pw-grid{ grid-template-columns: 1fr; gap:24px; }
}

/* Kartın iç düzeni (görsel + metin) */
.product-wide{
  display:grid;
  grid-template-columns: 420px 1fr; /* geniş ekranda görsel solda metin sağda */
  gap:36px;
  padding:24px;
  border-radius:18px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 28px rgba(15,35,49,.12);
}

/* 2 sütunlu düzende alan daralınca kartı dikey moda al (görsel üstte, metin altta) */
@media (max-width: 1199px){
  .pw-grid .product-wide{ grid-template-columns: 1fr; }
}

/* Mobilde zaten dikey */
@media (max-width: 992px){
  .product-wide{ grid-template-columns: 1fr; }
}

/* Görsel kutusu ve görsel */
.pw-media{
  border-radius:16px;
  overflow:hidden;
  background:#EDF4F8;              /* şeffaf PNG’ler için yumuşak zemin */
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 16 / 10;            /* hizalı görünüm */
}
.pw-media img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

/* Başlık/özet küçük düzenlemeler */
.pw-tag{
  font-size:12px; letter-spacing:.18em; color:#84b28a;
  font-weight:700; text-transform:uppercase; margin-bottom:8px;
}
.pw-title{ font-size:40px; line-height:1.1; margin:0 0 8px 0; }
.pw-desc{ color:#6b7a86; font-size:18px; margin-bottom:16px; }

/* Detaylar butonu hover kaldırma/yükseltme */
.pw-cta .btn-primary{ transition: transform .2s, box-shadow .2s; }
.pw-cta .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(24,119,77,.28);
}
/* Sayfa ve bölüm zemini beyaz */
body,
.products-landing,
.product-detail { background:#fff; }

/* Kart: zemin ve gölgeyi kaldır, boşlukları incelt */
.product-wide{
  background:transparent;
  box-shadow:none;
  border:none;
  padding:16px 0;
}

/* Görsel kutusu: arkaplanı kaldır, köşeleri düzleştir */
.pw-media{
  background:transparent;
  border-radius:0;
  box-shadow:none;
}

/* Ürün detay kahraman alanı da beyaz/düz */
.p-hero,
.p-hero-card,
.p-hero-media{
  background:#fff !important;
  box-shadow:none !important;
  border:none !important;
}
/* ========= MOBILE FIX: Ürün kartları üst üste binmesin ========= */
@media (max-width: 768px){
  /* Liste aralıkları */
  .products-landing{
    display: grid;        /* varsa yine */
    gap: 20px;
  }

  /* Kartı tek sütun yap, sabit yükseklikleri temizle */
  .product-wide{
    display: grid;
    grid-template-columns: 1fr;  /* tek sütun */
    align-items: start;
    gap: 14px;
    padding: 16px;
    min-height: initial !important;
  }

  /* Görsel bloğu tam genişlik ve içerik taşmasın */
  .pw-media{
    order: 1;
    background: transparent;   /* kutu hissini azaltmak için */
    border-radius: 10px;       /* isterseniz 0 yapın */
    box-shadow: none;
  }
  .pw-media img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;       /* görseli kırpma */
  }

  /* Metin/başlık bloğu görselin ALTINDA ve statik konumda kalsın */
  .pw-copy{
    order: 2;
    position: static !important;
    transform: none !important;
    margin: 6px 0 0;
  }

  /* CTA satırı da ayrı sırada gelsin */
  .pw-cta{
    order: 3;
    position: static !important;
    transform: none !important;
    margin-top: 6px;
  }

  /* Varsa "BIOTRICS" etiketi (.pw-tag) overlay olmasın */
  .pw-tag{
    position: static !important;
    transform: none !important;
    margin-bottom: 4px;
  }
}
/* =============== ÜRÜN LİSTESİ 2 SÜTUN (DESKTOP) =============== */
@media (min-width: 992px){
  /* Listeyi iki sütun yap */
  .products-landing, .card-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;             /* kartlar arası boşluk */
  }

  /* Kartın kendi iç düzeni: solda görsel, sağda metin */
  .products-landing .product-wide,
  .card-grid .product-wide{
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* görsel : metin oranı */
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-radius: 16px;
    background: rgba(255,255,255,0.9); /* “beyaz kutu” hissini yumuşatır */
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    width: auto;   /* olası sabit genişlikleri iptal */
    margin: 0;
  }

  /* Kart içindeki bloklar taşmasın/üst üste binmesin */
  .product-wide .pw-media,
  .product-wide .pw-copy,
  .product-wide .pw-cta,
  .product-wide .pw-tag{
    position: static !important;
    transform: none !important;
  }

  .product-wide .pw-media img{
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

/* =============== MOBİL (tek sütun, üst üste binme fix) =============== */
@media (max-width: 991px){
  .products-landing, .card-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .product-wide{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  }
  .product-wide .pw-media,
  .product-wide .pw-copy,
  .product-wide .pw-cta,
  .product-wide .pw-tag{
    position: static !important;
    transform: none !important;
  }
  .product-wide .pw-media img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* (İSTEĞE BAĞLI) Beyaz kutuyu tamamen kaldırmak istersen:
.product-wide{ background: transparent; box-shadow: none; }
*/
/* ——— Ürün kartını tamamen "kutusuz" yap ——— */
.product-wide{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 0 !important;
}

/* Görsel güvenli olsun */
.product-wide .pw-media img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ——— LİSTEYİ 2 SÜTUN YAP (desktop) ——— */
@media (min-width: 992px){
  /* Farklı sarmalayıcı isimlerine karşı geniş kapsama */
  .products-landing,
  .products-landing.container,
  .container.products-landing,
  .card-grid,
  .container.card-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
    align-items: start !important;
  }

  /* Kart içini iki kolon yap: sol görsel / sağ metin */
  .products-landing > .product-wide,
  .card-grid > .product-wide{
    display: grid !important;
    grid-template-columns: 1.25fr 1fr !important;
    gap: 24px !important;
    align-items: center !important;
  }

  /* Kart içindeki bloklar sabit pozisyona zorlanmasın */
  .product-wide .pw-media,
  .product-wide .pw-copy,
  .product-wide .pw-cta,
  .product-wide .pw-tag{
    position: static !important;
    transform: none !important;
  }
}

/* ——— Mobil: tek sütun + üst üste binmeyi önle ——— */
@media (max-width: 991px){
  .products-landing,
  .products-landing.container,
  .container.products-landing,
  .card-grid,
  .container.card-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .products-landing > .product-wide,
  .card-grid > .product-wide{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .product-wide .pw-media,
  .product-wide .pw-copy,
  .product-wide .pw-cta,
  .product-wide .pw-tag{
    position: static !important;
    transform: none !important;
  }
}
/* Ürün listesi v2 – sade, taşma yok, kutu yok */
.products-landing{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 48px;
  align-items: start;
}
@media (max-width: 992px){
  .products-landing{ grid-template-columns: 1fr; gap: 28px; }
}

/* Kartın kutu/gölge görünümünü tamamen kaldır */
.product-wide{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible;
}

/* Kart iç yerleşim: metin görselin altında */
.pw{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pw-media{
  width: 100%;
  overflow: hidden;
  border-radius: 16px;      /* sadece görsele yumuşak köşe */
  background: transparent;
}
.pw-media img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Metinler */
.pw-copy{ padding: 0 8px; }
.pw-tag{ font-size: 12px; letter-spacing:.08em; text-transform: uppercase; color: var(--muted,#7b8794); }
.pw-title{ margin: 8px 0 6px; font-size: 40px; line-height: 1.1; }
.pw-desc{ margin: 0 0 12px; color: #5b6975; }
.pw-cta{ margin-top: 6px; }

/* Önceki denemedeki kaydırma/offset davranışlarını sıfırla */
.product-wide .pw-media,
.product-wide .pw-copy{
  transform: none !important;
}

/* Eski kart sınıfları varsa kutu/gölgeyi yine kapat */
.card, .card-body, .card-media{
  background: transparent !important;
  box-shadow: none !important;
}

/* Genel güvenlik: herhangi bir yatay taşmayı engelle */
html, body{ overflow-x: hidden; }
img{ max-width: 100%; height: auto; box-sizing: border-box; }
*{ box-sizing: border-box; }
.page.products{ background:#fff; }
/* Ürünler sayfasında ana sayfa kart grid'ini kullan */
.page.products .card-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:28px;
}
@media (max-width: 992px){
  .page.products .card-grid{ grid-template-columns: 1fr; gap:18px; }
}

/* Kartın temel görünümü (ana sayfadaki ile aynıysa opsiyonel) */
.page.products .card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  overflow:hidden;
}
.page.products .card-media img{
  width:100%; height:auto; display:block; object-fit:contain;
}
.page.products .card-actions{ display:flex; gap:10px; align-items:center; }
/* --- Masaüstü için daha büyük, ferah kartlar --- */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(480px, 1fr)); /* iki geniş sütun */
    gap: 48px;
  }
  .card {
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .08);
  }
  .card-media {
    height: 340px;         /* görsel alanını büyüt */
    padding: 28px;
  }
  .card-title { font-size: 24px; }
  .card-text  { font-size: 16px; }
}

/* Görsellerin güvenli yerleşmesi */
.card-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Sayfa genişliği – kartlar dar geliyorsa bir tık aç */
main .container,
.card-grid.container {
  max-width: 1200px;
}
body, .page { background: #fff; }
/* ——— Ürünler sayfası (yalnızca products.php) ——— */
#products-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 48px;
  align-items: start;
}

/* Kart görünümü (yalnızca ürün listesi) */
#products-list .card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(15,23,42,.08);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

#products-list .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(15,23,42,.12);
}

/* Görsel alanı */
#products-list .card-media{
  display: block;
  background: #f5f7fb;      /* PNG şeffafsa güzel durur */
  padding: 20px;
}

#products-list .card-media img{
  width: 100%;
  height: 220px;
  object-fit: contain;
  display: block;
}

/* Metinler */
#products-list .card-body{ padding: 18px 20px 20px; }
#products-list .card-title{ font-size: 22px; margin: 0 0 6px; }
#products-list .card-text{ font-size: 15px; color: #4b5563; min-height: 42px; }

/* Butonlar */
#products-list .card-actions{ padding: 14px 20px 20px; }
/* Eğer .btn-primary sınıfın varsa: */
/* #products-list .btn-primary{ background: #10b981; } */

/* Küçük ekranlar */
@media (max-width: 992px){
  #products-list{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  #products-list .card-media img{ height: 200px; }
}

@media (max-width: 600px){
  #products-list .card-media img{ height: 180px; }
}

/* Eski .card-grid kurallarıyla çakışma olursa sıfırla */
#products-list.card-grid .card{ width: auto; }

/* Sayfayı beyaz zemine almak istersen: */
body, .page { background: #fff; }
.page.products { outline: 2px dashed red !important; }        /* test: sayfa kenarında kırmızı kesik çizgi */
.products-landing .product-wide{ background:yellow !important;}/* test: kart zemini sarı olsun */

/* Slogan blok tipografisi */
.home-slogan { text-align: center; }
.home-slogan-title {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin: 12px 0 6px;
}
.home-slogan-sub {
  font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  max-width: 980px;
  margin: 0 auto 8px;
  color: #0f172a;
}/* Geri getir: hero üzerindeki metinler/CTA tekrar görünsün */
.hero .hero-title{display:block !important;}
.hero .hero-sub{display:block !important;}
.hero .hero-cta{display:flex !important;}
.hero .hero-mark{display:inline-block !important;}

.home-slogan{ margin-top:12px; }
@media (max-width:768px){
  .hero{ padding-top: calc(var(--header-h,72px) + 12px); }
}
/* === Homepage Typography Pack v1 === */

/* Temel metin rengi ve satır yüksekliği */
:root{
  --text: #0f172a;        /* koyu lacivert */
  --text-dim: #334155;    /* gri-mavi gövde metni */
}
body{ color: var(--text); line-height: 1.6; }

/* HERO (üstteki eski dinamik bölüm) */
.hero-title{
  font-weight:800;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.12;
  letter-spacing:-0.02em;
  margin: 0 0 8px;
}
.hero-sub{
  font-weight:500;
  font-size: clamp(16px, 2.2vw, 20px);
  color: #e5e7eb; /* hero üstünde okunaklı açık gri */
  max-width: 980px;
  margin: 0 auto 14px;
}

/* SLOGAN (hero altındaki yeni blok) */
.home-slogan{ text-align:center; margin-top:12px; }
.home-slogan-title{
  font-weight:800;
  font-size: clamp(28px, 4vw, 40px);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin: 10px 0 8px;
  color: var(--text);
}
.home-slogan-sub{
  font-weight:600; 
  font-size: clamp(17px, 2vw, 20px);
  line-height:1.45;
  color: var(--text);
  max-width: 980px;
  margin: 0 auto 6px;
}

/* Bölüm başlıkları – “Neden Kolajen?”, “Nasıl Çalışır?”, “Ürünler” */
.section-title,
.container > h2{
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 750;
  letter-spacing:-0.01em;
  margin: 12px 0 10px;
  color: var(--text);
}

/* Neden Kolajen – liste stili */
.features .feature-list{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px; padding-left: 0; list-style: none; margin: 8px 0 0;
}
@media (max-width: 768px){
  .features .feature-list{ grid-template-columns: 1fr; }
}
.features .feature-list li{
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px;
  padding:12px 14px; color: var(--text-dim);
}
.features .feature-list li strong{
  color: var(--text); font-weight:700;
}

/* Nasıl Çalışır – paragraf genişliği */
.how-it-works p{ max-width: 900px; color: var(--text-dim); }

/* Ürün vitrin kartları – başlık ve alt metin */
.products-grid .card h3{
  font-weight:700; font-size: clamp(16px, 2.2vw, 20px); margin: 0 0 6px;
}
.products-grid .card p{
  color: var(--text-dim); margin: 0 0 10px;
}

/* CTA buton genel (mevcut sınıfları iyileştirir) */
.btn{ border-radius:12px; padding:10px 16px; font-weight:600; }
.btn-primary{ background:#0a66c2; color:#fff; }
.btn-outline,.btn-ghost{ border:1px solid #0a66c2; color:#0a66c2; background:transparent; }

/* Hero görseli üstüne çok hafif karartma gerekiyorsa (isteğe bağlı): */
/* .hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.12); } */
/* Slogan – 3 satır stilleme */
.home-slogan{ text-align:center; margin-top:12px; background:transparent; }
.home-slogan .slogan-list{
  list-style:none; padding:0; margin:6px auto 12px; max-width:1060px;
}
.home-slogan .slogan-list li{ margin:6px 0; }
.home-slogan .slogan-list li strong{
  display:block; font-weight:800; 
  font-size:clamp(22px,3.6vw,34px); line-height:1.25;
}
.home-slogan .slogan-list li:last-child{
  font-weight:600; font-size:clamp(16px,2.2vw,20px); line-height:1.5; 
  color:#334155; /* var(--text-dim) */
}
body{ font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; }
:root{
  --brand:#0a66c2;           /* marka mavi */
  --brand-contrast:#fff;
  --brand-hover:#084f97;
}

.btn{border-radius:12px;padding:10px 16px;font-weight:600}
.btn-primary{background:var(--brand);color:var(--brand-contrast)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-outline,.btn-ghost{border:1px solid var(--brand);color:var(--brand);background:transparent}
.btn-outline:hover,.btn-ghost:hover{background:var(--brand);color:var(--brand-contrast)}
/* Slogan 3 satır – mobil iyileştirme */
@media (max-width: 480px){
  .home-slogan{padding:8px 0}
  .home-slogan .slogan-list{margin:6px 12px}
  .home-slogan .slogan-list li strong{
    font-size:20px;         /* önce 22–24'tü, 20px yaptık */
    line-height:1.28;
    letter-spacing:-0.01em;
  }
  .home-slogan .slogan-list li:last-child{
    font-size:16px;         /* gövde cümlesi */
    line-height:1.45;
  }
}
/* SLOGAN — mobil iyileştirme (yüksek öncelik) */
@media (max-width: 768px){
  .home-slogan .slogan-list{margin:6px 12px}
  .home-slogan .slogan-list li strong{
    font-size:12px !important; line-height:1.28; letter-spacing:-0.01em;
    margin:2px 0;
  }
  .home-slogan .slogan-list li:last-child{
    font-size:16px !important; line-height:1.45;
  }
}
@media (max-width: 480px){
  .home-slogan .slogan-list li strong{ font-size:20px !important; }
  .home-slogan .slogan-list li:last-child{ font-size:15px !important; }
}
/* BUTONLAR — marka maviye zorla */
:root{ --brand:#0a66c2; --brand-contrast:#fff; --brand-hover:#084f97; }

.btn{ border-radius:12px; padding:10px 16px; font-weight:600; }
.btn.btn-primary{ background:var(--brand) !important; color:var(--brand-contrast) !important; border-color:var(--brand) !important; }
.btn.btn-primary:hover,
.btn.btn-primary:focus{ background:var(--brand-hover) !important; border-color:var(--brand-hover) !important; }

.btn-outline,.btn-ghost{ border:1px solid var(--brand) !important; color:var(--brand) !important; background:transparent !important; }
.btn-outline:hover,.btn-ghost:hover{ background:var(--brand) !important; color:var(--brand-contrast) !important; }

@media (max-width: 768px){
  .home-slogan .slogan-list li strong{font-size:22px !important; line-height:1.28; letter-spacing:-0.01em; margin:2px 0;}
  .home-slogan .slogan-list li:last-child{font-size:16px !important; line-height:1.45;}
}
@media (max-width: 480px){
  .home-slogan .slogan-list li strong{font-size:20px !important;}
  .home-slogan .slogan-list li:last-child{font-size:15px !important;}
}

/* ====== SLOGAN tipografi ====== */
.home-slogan{ text-align:center; margin-top:12px; }
.home-slogan .slogan-list{ list-style:none; padding:0; margin:6px auto 12px; max-width:1060px; }
.home-slogan .slogan-list li{ margin:6px 0; }
.home-slogan .slogan-list li strong{
  display:block; font-weight:800;
  font-size:clamp(22px,3.6vw,34px); line-height:1.25;
}
.home-slogan .slogan-list li:last-child{
  font-weight:600; font-size:clamp(16px,2.2vw,20px); line-height:1.5; color:#334155;
}

/* ====== Buton rengi — marka maviye sabitle ====== */
/* ====== Buton rengi — marka turkuazı ====== */
:root{
  --brand:           #12b8a6; /* ANA turkuaz */
  --brand-hover:     #0ea696; /* Hover/koyu ton */
  --brand-contrast:  #ffffff; /* Kontrast metin rengi */
}

/* Tüm butonların temel görünümleri (mevcut stilinizi koruyorum) */
.btn{
  border-radius:12px;
  padding:10px 16px;
  font-weight:600;
}

/* Dolu (primary) ve genel .btn rengini turkuaz yap */
.btn,
.btn.btn-primary{
  background:var(--brand) !important;
  color:var(--brand-contrast) !important;
  border-color:var(--brand) !important;
}

/* Hover/Focus (dolu) */
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn:hover{
  background:var(--brand-hover) !important;
  border-color:var(--brand-hover) !important;
  color:var(--brand-contrast) !important;
}

/* Konturlu/ghost butonlar */
.btn-outline,
.btn-ghost{
  border:1px solid var(--brand) !important;
  background:transparent !important;
  color:var(--brand) !important;
}
.btn-outline:hover,
.btn-ghost:hover{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:var(--brand-contrast) !important;
}

/* Bootstrap'in outline primary varyantını da yakala */
.btn-outline-primary{
  border-color:var(--brand) !important;
  color:var(--brand) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:var(--brand-contrast) !important;
}

/* Link butonlar / vurgulu linkler */
.btn-link,
.link-primary{
  color:var(--brand) !important;
}
.btn-link:hover,
.link-primary:hover{
  color:var(--brand-hover) !important;
}


/* ====== “Neden Kolajen?” kutuları ufak parlaklık ====== */
.features .feature-list{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; padding-left:0; list-style:none; margin:8px 0 0;
}
@media (max-width:768px){ .features .feature-list{ grid-template-columns:1fr; } }
.features .feature-list li{
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:12px 14px; color:#334155;
}
.features .feature-list li strong{ color:#0f172a; font-weight:700; }

/* =========================
   PRODUCTS PAGE (moved from products.php hotfix)
   Scope: .page.products ...
========================== */

/* buraya kopyaladığınız CSS kuralları */

/* Zemin beyaz; sayfa başlığı/gölge vs. temiz */
body { background:#fff !important; }
.page.products { background:#fff !important; }
.page.products .page-header,
.page.products .hero,
.page.products .page-header::before,
.page.products .page-header::after,
.page.products .hero::before,
.page.products .hero::after{
  background:#fff !important;
  box-shadow:none !important;
  border:none !important;
  padding:0 !important;
  display:none !important;
}

/* --- LİSTE KAPSAYICI: 2 sütun (mobil 1 sütun) --- */
.page.products .products-landing.container,
.page.products .card-grid{
  max-width:1280px !important;   /* gerekirse 1360 yapabilirsiniz */
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:32px !important;           /* kartlar arası boşluk */
  align-items:center !important;
}

/* Kartların “beyaz kutu/gölge”lerini tamamen kaldır */
.page.products .product-wide,
.page.products .card{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

/* Görselleri büyüt (her iki markup için) */
.page.products .product-wide .pw-media img,
.page.products .card .card-media img{
  width:100% !important;
  height:auto !important;
  max-height:520px !important;   /* 480–560 arası zevke göre oynatabilirsiniz */
  object-fit:contain !important;
  display:block !important;
}

/* Başlık/özet/cta ufak düzen */
.page.products .pw-copy h2,
.page.products .card .card-title{ margin:0 0 10px !important; }
.page.products .pw-copy p,
.page.products .card .card-text{ margin:0 0 14px !important; }

/* MOBİL: tek sütun + taşma koruması */
@media (max-width: 992px){
  .page.products .products-landing.container,
  .page.products .card-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .page.products .product-wide .pw-media img,
  .page.products .card .card-media img{
    max-height:320px !important;
  }
  /* taşma ihtimali olan metin bloğu */
  .page.products .pw-copy{ overflow:visible !important; }
}
/* — SÜTUNLAR TEK KOLONA DÜŞÜYORSA BU BLOĞU EKLEYİN — */

/* 1) Dış grid’i kapat: (#products-list hem container hem card-grid ise) */
#products-list.container.card-grid{
  display:block !important;          /* dış kapsayıcı grid olmasın */
}

/* 2) Asıl grid: içteki .card-grid.container */
#products-list .card-grid.container,
section.card-grid.container{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:32px !important;
  align-items:start !important;
}

/* Alternatif: Bazı sürümlerde iç kapsayıcı yoksa #products-list bizzat grid olur */
#products-list.card-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:32px !important;
  align-items:start !important;
}

/* 3) Kartları normalize et: genişlik/kolon/float kısıtlarını kaldır */
.card-grid > .card,
#products-list.card-grid > .card{
  grid-column:auto / span 1 !important;
  width:auto !important;
  max-width:none !important;
  float:none !important;
  justify-self:stretch !important;
  margin:0 !important;
}
/* ——— LİSTE IZGARASI: masaüstü 2 sütun, mobil 1 sütun ——— */
#products-list.container.card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
}
@media (max-width: 992px){
  #products-list.container.card-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ——— GÖRSEL ALANI: boyutu büyüt ve orantıyı koru ——— */
.card .card-media img{
  width: 100% !important;
  height: clamp(170px, 18vw, 280px) !important; /* masaüstünde büyür */
  object-fit: contain !important;              /* kesmeden göster */
  display: block !important;
  transition: transform .25s ease, filter .25s ease;
}

/* Büyük ekranlarda biraz daha büyütelim */
@media (min-width: 1400px){
  .card .card-media img{ height: 300px !important; }
}

/* Mobilde görseli okunaklı tut (tek sütun + daha yüksek görsel) */
@media (max-width: 992px){
  .card .card-media img{ height: 240px !important; }
}
/* Hover’da minik zoom ve yumuşak gölge */
.card:hover .card-media img{
  transform: translateY(-2px) scale(1.02);
  filter: saturate(1.03);
}
.card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 6px 26px rgba(10,37,64,.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover{
  box-shadow: 0 12px 36px rgba(10,37,64,.12);
}

/* CTA butonu hafif yükselsin */
.btn.btn-primary{
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16,185,129,.28);
}
/* — LİSTE IZGARASI: asıl çalışan inner SECTION — */
.page.products #products-list > section.card-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 28px !important;
}
/* Kartların eşit durması için opsiyonel */
.page.products #products-list > section.card-grid > .card{
  height: 100%;
}

/* — MOBİL: tek sütun — */
@media (max-width: 992px){
  .page.products #products-list > section.card-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* — GÖRSELİ BÜYÜT / ORANTIYI KORU — */
.page.products .card .card-media{
  display: block !important;
  padding: 12px 12px 0 !important;
}
.page.products .card .card-media img{
  width: 100% !important;
  height: clamp(210px, 24vw, 320px) !important; /* masaüstünde daha büyük */
  object-fit: contain !important;
  display: block !important;
}

/* Çok geniş ekranlarda biraz daha büyük */
@media (min-width: 1400px){
  .page.products .card .card-media img{ height: 340px !important; }
}

/* Mobilde okunaklı yükseklik */
@media (max-width: 992px){
  .page.products .card .card-media img{ height: 240px !important; }
}
/* PRODUCTS hotfix moved from products.php */
/* buraya kopyaladığınız CSS kuralları */
/* === Contact form: kompakt düzen === */

/* Sayfa başlığı ve blok boşlukları */
.page.contact h1{ margin-bottom:12px; }
.page.contact section{ padding-top:16px; padding-bottom:16px; }

/* 2 sütun (masaüstü), dar ekranda 1 sütun */
.page.contact .form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width:768px){
  .page.contact .form-grid{ grid-template-columns:1fr; gap:10px; }
}

/* Form elemanları: daha kısa ve sıkı */
.page.contact .form-group{ margin:0; }
.page.contact label{ font-size:14px; margin-bottom:4px; }

.page.contact input[type="text"],
.page.contact input[type="email"],
.page.contact input[type="tel"],
.page.contact textarea{
  font-size:14px;
  padding:10px 12px;
  height:44px;                 /* erişilebilir minimum dokunma yüksekliği */
  border-radius:10px;
}
.page.contact textarea{
  min-height:120px;            /* mesaj alanı çok büyümesin */
  height:auto;
}

/* Buton ve alt açıklama */
.page.contact .form-actions{ margin-top:12px; display:flex; gap:10px; }
.page.contact .btn{ padding:10px 16px; font-size:14px; border-radius:12px; }
.page.contact .form-hint{ font-size:12px; margin-top:10px; color:#556; }

/* Genel genişlik (isterseniz daha da daraltabilirsiniz) */
.page.contact .container{ max-width:900px; }

/* === Ana sayfa ürün mesaj bandı hizalama düzeltmesi === */
.home .product-band.product-band--light .container{
  text-align: center;
}

.home .product-band.product-band--light .band-kicker,
.home .product-band.product-band--light .band-title,
.home .product-band.product-band--light .band-sub{
  margin-left: auto;
  margin-right: auto;
  text-align: inherit;   /* container'ın ortasını kullan */
}


/* === Ana sayfa slogan hizalama & tipografi (override) === */
.home .product-band.product-band--light{
  text-align: center;              /* hepsi ortalı */
}

/* KOLAJEN ODAKLI ÇÖZÜMLER */
.home .product-band.product-band--light .band-kicker{
  color: #4b5563;                  /* biraz daha koyu gri */
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* Yumuşak dokuda biyolojik güç. */
.home .product-band.product-band--light .band-title{
  font-weight: 700;                /* tamamı kalın */
  margin-bottom: 4px;
}

/* "biyolojik güç." her zaman alt satıra insin ve turkuaz olsun */
.home .product-band.product-band--light .band-title span{
  display: block;                  /* mutlaka bir alt satır */
  color: #00b3a4;                  /* turkuaz */
  font-weight: 800;                /* daha kalın */
}

/* Yenile, onar, güven. */
.home .product-band.product-band--light .band-sub{
  margin-top: 4px;
}

/* === Ana sayfa Hakkımızda teaser ortalama === */
.about-teaser{
  text-align: center;
}

.about-teaser .about-wrap{
  display: flex;
  justify-content: center;   /* bloğu yatayda ortaya getir */
}

.about-teaser .about-text{
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

/* Buton ortada ve düzgün dursun */
.about-teaser .btn,
.about-teaser .btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

/* === ANA SAYFA HERO METNİ ORTALAMA (desktop + mobil) === */
body.home #anasayfa.hero{
  text-align: center;
}

/* İçteki metin bloğunu ortaya topla */
body.home #anasayfa.hero .container,
body.home #anasayfa.hero .hero-inner,
body.home #anasayfa.hero .hero-text{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Başlık ve sloganda sol kaymayı engelle */
body.home #anasayfa.hero h1,
body.home #anasayfa.hero p{
  margin-left: auto;
  margin-right: auto;
}


/* === Endikasyon, Mekanik Dayanım ve diğer tekli görseller === */
.ind-images img,
.biocade-image-center img {
  width: 100%;
  max-width: 620px;
  height: auto !important;
  border-radius: 12px;
  object-fit: contain !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  margin: 12px auto;
  display: block;
}
/* === BIOCADE – Endikasyon görsellerini büyüt ve hizayı düzelt === */
body.product.biocade .biocade-indications-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* Yazı – Görsel oranı */
  gap: 32px;
}

body.product.biocade .biocade-indication-images img {
  width: 100%;
  max-width: 360px;     /* Biraz daha büyük */
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

@media (max-width: 900px){
  body.product.biocade .biocade-indications-grid {
    grid-template-columns: 1fr;
  }
  
  body.product.biocade .biocade-indication-images img {
    max-width: 280px;
    margin: 10px auto;
  }
}
/* === BIOCADE – SEM görünümü (doğru oran + 3 sütun sabit) === */
body.product.biocade .biocade-sem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 16px;
}

body.product.biocade .biocade-sem-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;     /* orijinal oranı bozmadan kırpar */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.07);
}

@media (max-width: 900px) {
  body.product.biocade .biocade-sem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  body.product.biocade .biocade-sem-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   BIOCADE DÜZELTME BLOĞU
   ========================= */

/* 1) MASAÜSTÜ – Endikasyon görsellerini büyüt */
@media (min-width: 992px) {
  body.product.biocade .biocade-indication-images img {
    max-width: 320px !important;   /* biraz daha büyük */
    width: 100% !important;
    height: auto !important;
  }
}

/* 2) MOBİL – Biocade endikasyonlarını toparla (kartlar alt alta, görseller altta) */
@media (max-width: 991px) {

  /* Grid’i kapat, kartlar tek sütun olsun */
  body.product.biocade .biocade-indications-grid {
    display: block !important;
  }

  /* Her kart tam genişlikte, blok düzen */
  body.product.biocade .biocade-indication-card {
    display: block !important;
    margin-bottom: 24px;
  }

  /* Kart içindeki metin ve listeler normal akışta kalsın */
  body.product.biocade .biocade-indication-card h3,
  body.product.biocade .biocade-indication-card p,
  body.product.biocade .biocade-indication-card ul {
    margin-left: 0;
    margin-right: 0;
  }

  /* Görsel kutusu metnin ALTINDA ve ortalı */
  body.product.biocade .biocade-indication-images {
    text-align: center;
    margin-top: 10px;
  }

  /* Görseller alt alta, ortada ve orta boyutta */
  body.product.biocade .biocade-indication-images img {
    display: block !important;
    max-width: 260px !important;
    width: 80% !important;
    height: auto !important;
    margin: 6px auto !important;
    float: none !important;
  }
}

/* 3) MOBİL – Ölçü tablosunu küçült */
@media (max-width: 768px) {
  body.product.biocade .section.section-sizes .size-fig {
    text-align: left;             /* başlığa hizalı kalsın */
  }

  body.product.biocade .section.section-sizes .size-fig img {
    max-width: 220px !important;  /* tabloyu daralt */
    width: 90% !important;
    height: auto !important;
  }
}
/* BIOCADE – Özellikler görselini küçült */
body.product.biocade .biocade-image-wrap img{
  max-width: 320px;      /* istersen 380 veya 400 yapabilirsin */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;        /* ortala */
}
/* BIOCADE – Hero ve küçük görseller (masaüstü düzeni) */
@media (min-width: 992px){

  /* Sol kolon genişliğini sabitle, hero biraz büyüsün */
  body.product.biocade .pdp{
    grid-template-columns: 440px 1fr;
  }

  /* Hero kartı dikey hizala */
  body.product.biocade .hero.card{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Büyük görsel alanı */
  body.product.biocade .hero-fig{
    width: 100%;
    margin-bottom: 12px;
  }





/* Mobilde gereksiz yüksekliği ve boşlukları azalt */
@media (max-width: 979px){
  body.product.biocade #pdp-top .hero.card{
    min-height:0 !important;
    height:auto !important;
    padding-top:12px !important;
    padding-bottom:16px !important;
  }
}

/* ===============================
   PDP HERO DÜZENİ (BIOCADE)
   =============================== */

/* 1) Genel hero kart: büyük görsel + thumbs */
body.product #pdp-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Hero kartı solda, metin bloğu sağda kalsın */
body.product #pdp-top .hero.card {
  flex: 0 0 48%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;   /* gri zemin olmasın */
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  border-radius: 16px;
}

/* Büyük görsel alanı */
body.product #pdp-top .hero-fig {
  flex: 1 1 auto;
  display: block;
}

body.product #pdp-top #pdp-hero {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;    /* görsel bozulmasın */
}

/* 2) Küçük görseller – masaüstü: sağda, alt alta */
body.product #pdp-top .thumbs {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  align-items: flex-start;
}

body.product #pdp-top .thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: none;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  cursor: pointer;
}

body.product #pdp-top .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* Aktif thumb için hafif çerçeve */
body.product #pdp-top .thumb.is-active {
  box-shadow: 0 0 0 2px #7fb800 inset;
}

/* Sağdaki metin bloğu (başlık + intro) */
body.product #pdp-top > div:nth-of-type(2) {
  flex: 1 1 50%;
}

/* ===============================
   MOBİL DÜZEN (alt alta)
   =============================== */
@media (max-width: 767px) {

  /* Hero ve metin alt alta gelsin */
  body.product #pdp-top {
    flex-direction: column;
  }

  body.product #pdp-top .hero.card {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: none;     /* mobilde daha sade */
    border-radius: 0;
    background: #ffffff;  /* gri blok kalmasın */
  }

  body.product #pdp-top .hero-fig {
    width: 100%;
  }

  body.product #pdp-top #pdp-hero {
    max-width: 100%;
  }

  /* Küçük görseller: mobilde altta, yanyana ortalı */
  body.product #pdp-top .thumbs {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
  }

  body.product #pdp-top .thumb {
    width: 64px;
    height: 64px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  }
}

/* ====== MASAÜSTÜ: HERO İÇİNDE THUMBS SAĞDA ====== */
@media (min-width: 992px) {

  /* Hero kartı yatay flex olsun */
  body.product .pdp .hero.card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: flex-start;
    background: #ffffff !important;
  }

  /* Büyük görsel alanı – solda */
  body.product .pdp .hero.card .hero-fig {
    flex: 1 1 auto;
    margin: 0;
    display: block;
  }

  body.product .pdp .hero.card #pdp-hero {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* Küçük görseller – SAĞDA, alt alta */
  body.product .pdp .hero.card .thumbs {
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    margin-left: 12px;
    margin-top: 0;
    align-items: flex-start;
  }

  body.product .pdp .hero.card .thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: none;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    cursor: pointer;
  }

  body.product .pdp .hero.card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
  }

  /* Aktif küçük görselde yeşil çerçeve */
  body.product .pdp .hero.card .thumb.is-active {
    box-shadow: 0 0 0 2px #7fb800 inset;
  }
}

/* ====== MASAÜSTÜ: HERO İÇİNDE THUMBS SAĞDA ====== */
@media (min-width: 992px) {

  /* Hero kartı yatay flex olsun */
  body.product .pdp .hero.card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: flex-start;
    background: #ffffff !important;
  }

  /* Büyük görsel alanı – solda */
  body.product .pdp .hero.card .hero-fig {
    flex: 1 1 auto;
    margin: 0;
    display: block;
  }

  body.product .pdp .hero.card #pdp-hero {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* Küçük görseller – SAĞDA, alt alta */
  body.product .pdp .hero.card .thumbs {
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    margin-left: 12px;
    margin-top: 0;
    align-items: flex-start;
  }

  body.product .pdp .hero.card .thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: none;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    cursor: pointer;
  }

  body.product .pdp .hero.card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
  }

  /* Aktif küçük görselde yeşil çerçeve */
  body.product .pdp .hero.card .thumb.is-active {
    box-shadow: 0 0 0 2px #7fb800 inset;
  }
}

/* ===== BIOCADE – masaüstünde hero alanını büyüt ===== */
@media (min-width: 992px){
  /* Sol kolon (hero) genişlesin, sağ metin biraz daralsın */
  body.product.biocade .pdp{
    grid-template-columns: minmax(420px, 780px) 0.9fr;
  }
}
/* BIOCADE – küçük görselleri büyüt (masaüstü) */
@media (min-width: 992px){
  body.product.biocade .pdp .hero.card .thumb{
    width: 92px;
    height: 92px;
  }

  body.product.biocade .pdp .hero.card .thumb img{
    object-fit: contain;
  }

  /* Büyük görsel biraz daha rahat dursun */
  body.product.biocade .pdp .hero.card #pdp-hero{
    max-height: 480px;
  }
}
/* PDP ana görsel alanı – daha büyük ve net */
.pdp .hero.card {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ana görselin kendisi */
#pdp-hero {
    display: block;
    max-width: 720px;        /* istersen 800 yapabilirsin */
    width: 100%;
    height: auto !important;
    object-fit: contain;
    image-rendering: auto;
}
/* Küçük görseller (thumbs) – biraz daha büyük ve net */
.pdp .thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdp .thumbs img {
    width: 110px !important;   /* 78'den büyük; istersen 120px de olur */
    height: auto !important;
    object-fit: contain;
    image-rendering: auto;
}
/* PDP içeriğindeki görseller – oran bozulmadan, daha net */
.pdp .pdp-body img,
.pdp .pdp-content img {
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
    image-rendering: auto;
}

/* Biocade gri blok alt cümle rengi */
.pdp-desc .pdp-sub {
    color: #333333 !important;   /* diğer metinlerle uyumlu koyu gri */
    font-weight: 500;
}
/* PDP üst bölümünde kolon oranlarını ayarla: sol geniş, sağ biraz daha dar */
@media (min-width: 992px) {
  .pdp {
    grid-template-columns: minmax(0, 64%) minmax(0, 36%);
  }
}

/* Ana hero kartın iç boşluklarını azalt – görsel daha büyük görünür */
.pdp .hero.card {
    padding: 8px 8px 24px;
}

/* Ana görseli biraz daha büyüt ve tamamen alanı kullansın */
#pdp-hero {
    display: block;
    max-width: 820px;          /* önce 720 idi, biraz daha büyüttük */
    width: 100%;
    height: auto !important;
    object-fit: contain;
    image-rendering: auto;
}

/* Küçük görsel butonları: tek renk yeşil border */
.pdp .thumb {
    padding: 0;
    border-radius: 10px;
    border: 2px solid #7FB800;     /* sadece bu yeşil görünsün */
    background-color: #fff;
}

/* İçteki img kendi border’ını kullanmasın, çizgi kalabalığı olmasın */
.pdp .thumb img {
    display: block;
    width: 110px;                  /* biraz büyütmek istersen 120 de yapabilirsin */
    height: auto !important;
    border: none;                  /* iç border’ı kaldırıyoruz */
    border-radius: 8px;
}

/* Aktif (seçili) küçük görselde de aynı yeşil etki */
.pdp .thumb.is-active,
.pdp .thumb:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #7FB800;
    border-color: #7FB800;
}

/* === Biocade küçük görseller – boyut ve tek renk çerçeve === */
body.product.biocade #pdp-top .thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Buton kutusu */
body.product.biocade #pdp-top .thumbs .thumb {
    display: block;
    padding: 0;
    border-radius: 10px;
    border: 2px solid #7FB800 !important; /* tek renk yeşil */
    background-color: #ffffff !important;
    box-shadow: none !important;          /* ikinci renk yaratan gölgeleri sil */
}

/* İçteki görsel */
body.product.biocade #pdp-top .thumbs .thumb img {
    display: block;
    width: 96px !important;   /* 78'den biraz daha büyük, ama düzeni bozmaz */
    height: auto !important;
    border: none !important;  /* ikinci çizgi olmasın */
    border-radius: 8px;
}

/* Seçili küçük görsel (isteğe bağlı hafif vurgulu) */
body.product.biocade #pdp-top .thumbs .thumb.is-active,
body.product.biocade #pdp-top .thumbs .thumb:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px #7FB800 !important;
}

body.product.biocade #pdp-hero {
    display: block;
    max-width: 840px;         /* bir tık daha büyütülmüş */
    width: 100%;
    height: auto !important;
    object-fit: contain;
    image-rendering: auto;
}
/* === BIOCADE küçük görseller: mavi efektleri kapat, yeşil yap === */
body.product.biocade #pdp-top .thumbs .thumb {
    display: block;
    padding: 0;
    border-radius: 10px;
    border: 2px solid #7FB800 !important;  /* temel çerçeve yeşil */
    background-color: #ffffff !important;
    box-shadow: none !important;
    overflow: visible !important;          /* içeriği kırpma */
}

/* Tıklanınca / fokus olunca mavi yerine yeşil kullan */
body.product.biocade #pdp-top .thumbs .thumb:focus,
body.product.biocade #pdp-top .thumbs .thumb:active,
body.product.biocade #pdp-top .thumbs .thumb:hover,
body.product.biocade #pdp-top .thumbs .thumb:focus-visible {
    outline: none !important;
    border-color: #7FB800 !important;
    box-shadow: 0 0 0 2px #7FB800 !important;  /* mavi gölge yerine yeşil */
}

/* İçteki küçük resmin boyutu – biraz küçültüp kırpmayı azaltalım */
body.product.biocade #pdp-top .thumbs .thumb img {
    display: block;
    width: 88px !important;   /* 96 → 88, daha kısa kolon */
    height: auto !important;
    border: none !important;
    border-radius: 8px;
}
/* === Biocade küçük görsellerde mavi focus/outlines TAMAMEN kapansın === */
body.product.biocade #pdp-top .thumbs .thumb,
body.product.biocade #pdp-top .thumbs .thumb img,
body.product.biocade #pdp-top .thumbs .thumb:focus,
body.product.biocade #pdp-top .thumbs .thumb:focus-visible,
body.product.biocade #pdp-top .thumbs .thumb:active,
body.product.biocade #pdp-top .thumbs .thumb:hover,
body.product.biocade #pdp-top .thumbs .thumb img:focus,
body.product.biocade #pdp-top .thumbs .thumb img:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: #7FB800 !important;  /* sadece yeşil kalsın */
}
/* === BIOCADE - Mobil küçük görsel düzeltmeleri === */
@media (max-width: 768px) {

  /* Tüm kolon görünsün, son görsel kırpılmasın */
  body.product.biocade #pdp-top .thumbs {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Dokununca çıkan mavi highlight'ı tamamen kapat */
  body.product.biocade #pdp-top .thumbs .thumb {
    -webkit-tap-highlight-color: transparent;
  }

  body.product.biocade #pdp-top .thumbs .thumb,
  body.product.biocade #pdp-top .thumbs .thumb img,
  body.product.biocade #pdp-top .thumbs .thumb:focus,
  body.product.biocade #pdp-top .thumbs .thumb:focus-visible,
  body.product.biocade #pdp-top .thumbs .thumb:active,
  body.product.biocade #pdp-top .thumbs .thumb:hover,
  body.product.biocade #pdp-top .thumbs .thumb img:focus,
  body.product.biocade #pdp-top .thumbs .thumb img:focus-visible {
      outline: none !important;
      box-shadow: none !important;
      border-color: #7FB800 !important;  /* sadece yeşil kalsın */
  }
}

/* --- TERTEMİZ HERO ALANI --- */

body.product .hero-area {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: flex-start;
  background: #fff !important;
}

body.product .hero-main {
  margin: 0;
  border-radius: 12px;
  background: #fff !important;
}
body.product #pdp-hero {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Küçük görseller */
body.product .hero-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.product .thumb {
  width: 90px;
  height: 90px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}
body.product .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.product .thumb.is-active {
  border: 2px solid #7FB800 !important;
}

/* HERO SAĞ METİN */
body.product .hero-text {
  padding-left: 16px;
}

/* Mobil düzen */
@media (max-width: 979px){

  body.product .hero-area {
    grid-template-columns: 1fr;
  }

  body.product .hero-thumbs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  body.product .thumb {
    width: 70px;
    height: 70px;
  }
}

/* === HERO / GÖRSELLER İlave Düzeltmeler === */

/* 1) Ana görseli büyüt */
body.product .hero-main img#pdp-hero {
  max-height: 560px !important;
}

/* 2) Mobilde küçük görseller büyüsün ve ortalansın */
@media (max-width: 979px){
  body.product .hero-thumbs {
    justify-content: center !important;
  }
  body.product .thumb {
    width: 90px !important;
    height: 90px !important;
  }
}

/* 3) Açıklama metni blog rengiyle aynı olsun */
body.product .hero-desc p {
  color: var(--ink) !important;
}

/* 4) Küçük görseller daha net olsun */
body.product .thumb img {
  image-rendering: crispy-edges;
  image-rendering: -webkit-optimize-contrast;
  object-fit: contain !important;
}
/* === ZORLAMALI OVERRIDE (tüm eski CSS'leri ezer) === */

/* Mobil küçük görseller */
@media (max-width: 979px){
  body.product .hero-thumbs {
    justify-content: center !important;
  }
  body.product .thumb {
    width: 90px !important;
    height: 90px !important;
  }
}

/* Açıklama metni rengi */
body.product .hero-desc p,
body.product .hero-text p,
body.product .pdp-sub {
  color: #1f2937 !important; /* blog rengi */
}
.pdp-section h3 {
  border-left: 4px solid #83c11f;
  padding-left: 10px;
}
.section-title,
.pdp-section {
  background: #f7f9fb;
  border-radius: 12px;
  padding: 16px 20px;
}
.ind-images {
  background:#fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.bloc-title {
  border-left:4px solid #83c11f;
  padding-left:10px;
  margin-bottom:16px;
}
.pdp-section h3, .pdp-section h4 {
  color:#1f2937;
  font-weight:700;
}


/* Başlığın altındaki bölüm bloğuna hafif arka plan verelim */
body.product.biocade .pdp-section{
  background:#f7f9fb;
  border-radius:14px;
  padding:18px 20px 20px;
}

/* Mikroyapı (SEM) ve benzer h3'ler section-title değilse de yakalayalım */
body.product.biocade .pdp-section h3:not(.section-title){
  color:#1f2937;
  font-weight:700;
}
/* === BIOCADE – TÜM BÖLÜM BAŞLIKLARINA YEŞİL ÇİZGİ === */
body.product.biocade h2,
 {
  border-left: 4px solid #83c11f;
  padding-left: 10px !important;
  margin-top: 32px !important;
  margin-bottom: 14px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
}
/* 1) Yeşil çizgiyi sadece içerik alanındaki başlıklara uygula */
body.product.biocade .pdp-section h2,
body.product.biocade .pdp-section h3 {
  border-left: 4px solid #83c11f;
  padding-left: 10px !important;
  margin-top: 32px !important;
  margin-bottom: 14px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
}

/* 2) Footer'daki başlıklardan yeşil çizgiyi kaldır */
body.product.biocade footer h2,
body.product.biocade footer h3 {
  border-left: none !important;
  padding-left: 0 !important;
}
/* Footer başlığını eski haline döndür (renk + çizgi yok) */
body.product.biocade footer h1,
body.product.biocade footer h2,
body.product.biocade footer h3,
body.product.biocade footer h4 {
  border-left: none !important;
  padding-left: 0 !important;
  color: #e5e7eb !important; /* footer'da istediğin metin rengi */
}
/* ====== BIOCADE DURA – Endikasyon görsel düzeni ====== */

/* Kartı iki sütun yap: solda metin, sağda görseller */
body.product.biocade-dura .pdp-block.ind-group{
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: flex-start;
}

/* Görsel kutusu */
body.product.biocade-dura .ind-images{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Küçük, derli toplu görseller */
body.product.biocade-dura .ind-images img{
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 14px;
  cursor: zoom-in;
}

/* Mobilde alt alta gelsin, daha da küçülsün */
@media (max-width: 768px){
  body.product.biocade-dura .pdp-block.ind-group{
    grid-template-columns: 1fr;
  }
  body.product.biocade-dura .ind-images{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  body.product.biocade-dura .ind-images img{
    max-width: 140px;
  }
}

/* ====== Endikasyon görseli tam ekran zoom overlay ====== */

.ind-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
}

.ind-modal img{
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  cursor: zoom-out;
}
/* Dura – SEM görüntüleri grid */
body.product.biocade-dura .dura-sem-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.product.biocade-dura .dura-sem-item img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

@media (max-width: 768px){
  body.product.biocade-dura .dura-sem-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Başlıkları ince mavi çizgiyle vurgula (sadece ürün sayfası gövdesinde) */
main.page-product .pdp-section > h2{
  position: relative;
  padding-left: 10px;
}

main.page-product .pdp-section > h2::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  border-radius: 999px;
  background:#0f8adf; /* mavi çizgi */
}
/* ===== BIOCADE DURA – Endikasyon grid'i ===== */

body.product.biocade-dura .ind-group {
  margin-top: 32px;
}

body.product.biocade-dura .ind-grid {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Metin alanı daha geniş, görsel sütunu daha dar */
body.product.biocade-dura .ind-card {
  flex: 2 1 0;
}

body.product.biocade-dura .ind-images {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Küçük kutucuklar */
body.product.biocade-dura .ind-img-btn {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

body.product.biocade-dura .ind-img-btn img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

/* Mobilde dikey hizala */
@media (max-width: 768px) {
  body.product.biocade-dura .ind-grid {
    flex-direction: column;
  }

  body.product.biocade-dura .ind-img-btn img {
    height: auto;
  }
}
/* ===== Endikasyon görseli modal'ı ===== */

.ind-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.ind-modal[hidden] {
  display: none;
}

.ind-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.ind-modal-content {
  position: absolute;
  inset: 5% 10%;
  margin: 0;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.ind-modal-content img {
  max-width: 100%;
  max-height: calc(90vh - 40px);
  object-fit: contain;
}

.ind-modal-close {
  align-self: flex-end;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

body.ind-modal-open {
  overflow: hidden;
}
/* ===== BIOCADE & DURA – Başlıkların solunda yeşil işaret ===== */
body.product.biocade main.page-product .pdp-section h2,
body.product.biocade-dura main.page-product .pdp-section h2 {
  position: relative;
  padding-left: 18px;   /* yazının solunda boşluk */
}

/* Sol tarafta yeşil dikey çizgi */
body.product.biocade main.page-product .pdp-section h2::before,
body.product.biocade-dura main.page-product .pdp-section h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.6em;
  border-radius: 999px;
  background: #7FB800;   /* Biocade yeşili */
}
/* DURA – Endikasyon kartı hizası (metin geniş, görseller dar) */
body.product.biocade-dura .pdp-block.ind-group .ind-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

body.product.biocade-dura .pdp-block.ind-group .ind-images img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
/* =========================
   BIOCADE & DURA – BAŞLIK STİLİ
   ========================= */
body.product .pdp-section > h2 {
  position: relative;
  padding-left: 24px;
  margin: 0 0 16px;
  font-weight: 700;
}

/* Sol yeşil çizgi */
body.product .pdp-section > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.8em;
  border-radius: 999px;
  background: #83c11f ; /* PROTIP/biocade yeşili */
}

/* Eski mavi çizgileri iptal et (varsa) */
body.product .pdp-section .section-title::before,
body.product .pdp-section .section-title::after {
  content: none !important;
  border: none !important;
}

/* =========================
   DURA – ENDİKASYON BLOĞU
   ========================= */
body.product.biocade-dura .ind-grid{
  display:grid;
  grid-template-columns:minmax(0,2.0fr) minmax(0,2.0fr); /* Yazı sütunu biraz dar, daha çok satır = daha uzun blok */
  gap:24px;
  align-items:flex-start;
}


body.product.biocade-dura #dura-indications-visual .ind-card {
  background: #f6fafb;
  border-radius: 16px;
  padding: 20px 24px;
}

body.product.biocade-dura #dura-indications-visual .ind-list {
  margin: 0;
  padding-left: 20px;
}

body.product.biocade-dura #dura-indications-visual .ind-images {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.product.biocade-dura #dura-indications-visual .ind-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.09);
}

/* Tablet / mobilde alt alta gelsin */
@media (max-width: 960px) {
  body.product.biocade-dura #dura-indications-visual .ind-grid {
    grid-template-columns: 1fr;
  }

  body.product.biocade-dura #dura-indications-visual .ind-images {
    flex-direction: row;
    flex-wrap: wrap;
  }

  body.product.biocade-dura #dura-indications-visual .ind-image {
    flex: 1 1 48%;
  }
}

/* =========================
   DURA – SEM GÖRSELLERİ
   (Üçü de aynı genişlikte olsun)
   ========================= */

/* Eğer SEM bölümünde bir "sem-grid" veya benzeri yoksa,
   section id'sini kullan: #dura-sem, #dura-microscopy vs.
   Şu anki HTML'inde "Mikroyapı (SEM Görüntüleri)" bölümünde
   img'ler aynı satırdaysa, hepsini eşitleyelim: */

body.product.biocade-dura .sem-row img,
body.product.biocade-dura .sem-grid img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 14px;
}

/* Farklı bir wrapper sınıfın varsa (.sem-images gibi),
   üst satıra bunu da ekleyebilirsin. */
/* === DURA – SEM görsellerini orantıla === */
body.product.biocade-dura .dura-sem-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

body.product.biocade-dura .dura-sem-grid figure {
  flex: 1 1 0;
  max-width: 33%;
}

body.product.biocade-dura .dura-sem-grid img {
  width: 100%;
  height: 260px;
  object-fit: cover;   /* Birinci küçük resmi büyütüp hepsini aynı kutuya oturtur */
  display: block;
  border-radius: 12px;
}
/* === Biocade & Dura – başlıklarda yeşil işaret === */
body.product.biocade .pdp-section > h2,
body.product.biocade-dura .pdp-section > h2,
body.product.biocade-dura #pdp-indications .section-title,
body.product.biocade-dura #sizes h2 {
  position: relative;
  padding-left: 32px;
}

body.product.biocade .pdp-section > h2::before,
body.product.biocade-dura .pdp-section > h2::before,
body.product.biocade-dura #pdp-indications .section-title::before,
body.product.biocade-dura #sizes h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 26px;
  border-radius: 999px;
  background: #83c11f;   /* istediğin yeşil */
}
/* Dura – Özellikler görseli */
body.product.biocade-dura .dura-feature-img{
  margin-top: 24px;
  text-align: center;
}
body.product.biocade-dura .dura-feature-img img{
  max-width: 380px;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
/* Dura – Özellikler görseli */
body.product.biocade-dura .dura-feature-img{
  margin-top: 24px;
  text-align: center;
}
body.product.biocade-dura .dura-feature-img img{
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
/* Dura – Cerrahi teknik görseli */
body.product.biocade-dura .dura-tech-img{
  margin-top: 24px;
  text-align: center;
}
body.product.biocade-dura .dura-tech-img img{
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 16px;
}



/* === DURA – SEM görsellerini orantıla === */
body.product.biocade-dura .dura-sem-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

body.product.biocade-dura .dura-sem-item {
  flex: 1 1 0;
  max-width: 33%;
}

body.product.biocade-dura .dura-sem-item img {
  width: 100%;
  height: 260px;   /* istersen 240 / 280 yapabilirsin */
  object-fit: cover;
  display: block;
  border-radius: 12px;
}


/* === DURA – SEM görsellerini orantıla === */
body.product.biocade-dura .dura-sem-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

body.product.biocade-dura .dura-sem-item {
  flex: 1 1 0;
  max-width: 33%;
}

body.product.biocade-dura .dura-sem-item img {
  width: 100%;
  height: 260px;    /* istersen 240 / 280 yapabilirsin */
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* ==== DURA – Endikasyon bloğu: metin geniş, görseller küçük ==== */
body.product.biocade-dura #dura-indications-visual .ind-grid{
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Sol: metin bloğu – geniş */
body.product.biocade-dura #dura-indications-visual .ind-card{
  flex: 3 1 0;   /* metin geniş */
}

/* Sağ: görseller – dar ve küçük */
body.product.biocade-dura #dura-indications-visual .ind-images{
  flex: 1 1 0;   /* sütun dar */
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

body.product.biocade-dura #dura-indications-visual .ind-image img{
  display: block;
  max-width: 220px;   /* görsel boyutu küçüldü */
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Mobilde alt alta gelsin */
@media (max-width: 768px){
  body.product.biocade-dura #dura-indications-visual .ind-grid{
    flex-direction: column;
  }

  body.product.biocade-dura #dura-indications-visual .ind-images{
    flex-direction: row;
    flex-wrap: wrap;
  }

  body.product.biocade-dura #dura-indications-visual .ind-image{
    flex: 1 1 48%;
  }

  body.product.biocade-dura #dura-indications-visual .ind-image img{
    max-width: 100%;
  }
}
/* ==== DURA – Endikasyon bloğu için ince ayar ==== */

/* Metin bloğunu daha da genişlet, görselleri daralt */
body.product.biocade-dura #dura-indications-visual .ind-card{
  flex: 4 1 0;  /* 3 yerine 4: metin daha geniş */
}

body.product.biocade-dura #dura-indications-visual .ind-images{
  flex: 1 1 0;      /* sağ blok dar */
  max-width: 240px; /* tüm sütun daha dar */
}

/* Tek tek görselleri iyice küçültelim */
body.product.biocade-dura #dura-indications-visual .ind-image img{
  max-width: 20px;   /* önce 220 idi, şimdi daha küçük */
  width: 100%;
  height: auto;
}
/* ==== DURA – Endikasyon bloğu ince ayar v2 ==== */

body.product.biocade-dura #dura-indications-visual .ind-card{
  flex: 4 1 0;          /* metin geniş */
}

body.product.biocade-dura #dura-indications-visual .ind-images{
  flex: 1 1 0;          /* sağ sütun dar */
  max-width: 260px;     /* tüm sütun biraz genişledi */
}

/* Kutu içindeki küçük görseller */
body.product.biocade-dura #dura-indications-visual .ind-image img{
  max-width: 200px;     /* önce 170/180 idi, artık biraz daha büyük */
  width: 100%;
  height: auto;
}
/* ==== DURA endikasyon zoom modal ==== */

body.no-scroll{
  overflow: hidden;
}

.ind-modal[hidden]{
  display: none;
}

.ind-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ind-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.ind-modal-inner{
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.ind-modal-inner img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.5);
}

.ind-modal-close{
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* DURA – Hero başlık bloğuna yeşil çizgi */
body.product.biocade-dura .hero-text .pdp-head {
  border-left: 4px solid #83c11f;
  padding-left: 14px;
}

/* DURA – Hero alt metin (intro) bloğuna ince yeşil çizgi */
body.product.biocade-dura .hero-text .hero-desc {
  border-left: 3px solid #83c11f;
  padding-left: 12px;
  margin-top: 10px;
}

<section class="pdp-section biocade-dura-section" id="dura-indications">

  <h2>Endikasyonlar</h2>
  
  <p>biocade® dura, primer dura kapatmanın mümkün olmadığı...</p>
  ...
</section>
/* DURA – içeriğe özel Endikasyonlar başlığına yeşil çizgi */
#dura-indications > h2 {
  border-left: 4px solid #83c11f;
  padding-left: 14px;
}

/* DURA – bu bloğun giriş paragrafına da ince yeşil vurgu */
#dura-indications > p {
  margin-top: 8px;
  border-left: 3px solid #83c11f;
  padding-left: 12px;
}
/* DURA – Endikasyonlar başlığına zorunlu yeşil çizgi */
body.product.biocade-dura #dura-indications h2 {
  border-left: 4px solid #83c11f !important;
  padding-left: 14px !important;
  margin-left: 0 !important;
}
.section-title {
  /* Eski border-left çizgisini kapatıyoruz */
  border-left: none;
  padding-left: 0;
  margin: 0 0 12px;
  font-weight: 700;
}


/* ==== DURA – içerik listelerindeki maddelere yeşil işaret ==== */
body.product.biocade-dura .biocade-dura-section ul {
  list-style: none !important; /* normal bullet'ı tamamen kapat */
  margin: 0 0 0.75rem 0;
  padding: 0;
}

body.product.biocade-dura .biocade-dura-section ul li {
  position: relative;
  padding-left: 20px;         /* solda yeşil işarete yer aç */
  margin-bottom: 6px;
}

/* Yeşil nokta / küçük kare işaret */
body.product.biocade-dura .biocade-dura-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;                 /* satır ortasına yakın */
  width: 7px;
  height: 7px;
  border-radius: 999px;        /* yuvarlak */
  background: #83c11f !important;
}

/* === DURA: Özellikler & Cerrahi Teknikler – ortak layout (masaüstü) === */

/* Bölümü 2 kolona böl: solda metin, sağda görsel */
body.product.biocade-dura #dura-features,
body.product.biocade-dura #dura-techniques {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: flex-start;
}

/* Varsayılan: tüm içerik 1. kolonda */
body.product.biocade-dura #dura-features > *:not(figure),
body.product.biocade-dura #dura-techniques > *:not(figure) {
  grid-column: 1;
}

/* Sadece figure (görsel) 2. kolona geçsin */
body.product.biocade-dura #dura-features figure,
body.product.biocade-dura #dura-techniques figure {
  grid-column: 2;
  margin: 0;            /* ekstra boşluk olmasın */
}

/* Görsel boyutu – biraz küçültülmüş */
body.product.biocade-dura #dura-features img,
body.product.biocade-dura #dura-techniques img {
  display: block;
  width: 100%;
  max-width: 560px;     /* istersen 340–380 arasında oynayabilirsin */
  height: auto;
  border-radius: 16px;
}

/* === Mobil: blok düzene geri dön === */
@media (max-width: 992px) {
  body.product.biocade-dura #dura-features,
  body.product.biocade-dura #dura-techniques {
    display: block;
  }

  body.product.biocade-dura #dura-features figure,
  body.product.biocade-dura #dura-techniques figure {
    margin-top: 16px;
  }
}

/* === DURA: Özellikler & Cerrahi Teknikler – metin solda, kutulu görsel sağda === */

/* Bölümü 2 kolona böl: solda metin, sağda görsel kartı */
body.product.biocade-dura #dura-features,
body.product.biocade-dura #dura-techniques {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: flex-start;
}

/* Tüm metin elemanları 1. kolonda kalsın */
body.product.biocade-dura #dura-features > *:not(figure),
body.product.biocade-dura #dura-techniques > *:not(figure) {
  grid-column: 1;
}

/* FIGURE = kutu: sağ kolona geçsin ve kart gibi görünsün */
body.product.biocade-dura #dura-features figure,
body.product.biocade-dura #dura-techniques figure {
  grid-column: 2;
  margin: 0;
  padding: 16px;
  background: #ffffff;              /* istersen var(--bg) yapabilirsin */
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(9, 30, 66, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kart içindeki görsel boyutu (biraz küçültülmüş / kontrollü) */
body.product.biocade-dura #dura-features img,
body.product.biocade-dura #dura-techniques img {
  display: block;
  width: 100%;
  max-width: 340px;       /* büyük gelirse 320 yapabilirsin, küçükse 360 */
  height: auto;
  border-radius: 12px;
}

/* --- Mobil: blok düzene geri dön, kart görünümü kalsın --- */
@media (max-width: 992px) {
  body.product.biocade-dura #dura-features,
  body.product.biocade-dura #dura-techniques {
    display: block;
  }

  body.product.biocade-dura #dura-features figure,
  body.product.biocade-dura #dura-techniques figure {
    margin-top: 16px;   /* metnin altında, kutu halinde dursun */
  }
}
/* === DURA: Cerrahi Teknikler – metin solda, görsel sağda (görsel ortalı, kutu küçük) === */

body.product.biocade-dura .dura-tech-two-col {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.1fr); /* sağ sütun biraz dar */
  gap: 32px;
  align-items: center; /* görseli metinle aynı dikey hizaya yaklaştır */
}

/* Metin bloğu */
body.product.biocade-dura .dura-tech-text h2 {
  margin-bottom: 16px;
}

body.product.biocade-dura .dura-tech-text p {
  margin: 0 0 12px;
}

/* Görsel kutusu */
body.product.biocade-dura .dura-tech-img {
  margin: 0;
  display: flex;
  justify-content: center;  /* kutu içinde ortala */
}

/* Görselin kendisi */
body.product.biocade-dura .dura-tech-img img {
  display: block;
  width: 100%;
  max-width: 340px;        /* kutuyu/görseli biraz küçülttük */
  height: auto;
  border-radius: 16px;
}

/* Mobilde yine alt alta gelsin */
@media (max-width: 991px) {
  body.product.biocade-dura .dura-tech-two-col {
    display: block;
  }

  body.product.biocade-dura .dura-tech-img {
    margin-top: 16px;
    justify-content: center;
  }

  body.product.biocade-dura .dura-tech-img img {
    max-width: 100%;
  }
}

/* === DURA: Cerrahi Teknikler görsel boyutunu override et === */
body.product.biocade-dura #dura-techniques .dura-tech-img img {
  max-width: 250px !important;  /* istersen 300–340 oynatabilirsin */
  width: 100%;
  height: auto;
}

/* Kutu içinde ortala */
body.product.biocade-dura #dura-techniques .dura-tech-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* === DURA: Cerrahi Tekniklerle Uyumluluk kutusu ve görsel boyutu === */

/* Kutu biraz daha sıkı olsun (üst–alt padding’i azalt) */
body.product.biocade-dura #dura-techniques {
  padding-top: 28px;
  padding-bottom: 28px;
  margin-bottom: 32px;       /* alttaki boşluğu da biraz azalt */
}

/* Görseli güvenli şekilde küçült ve ortala */
body.product.biocade-dura #dura-techniques .dura-tech-img {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Eski büyük max-width'leri bastır */
body.product.biocade-dura #dura-techniques .dura-tech-img img {
  max-width: 200px !important;   /* gerekirse 300 / 310 / 330 deneyebilirsin */
  width: 100%;
  height: auto;
  display: block;
}
/* === DURA: Cerrahi Teknikler kutusunu sayfa zeminine yaklaştır === */
body.product.biocade-dura #dura-techniques {
  background: transparent;      /* Kart beyazını kaldır, sayfa zeminini kullan */
  box-shadow: none;             /* Gölgeyi kaldır */
  border-radius: 0;             /* Köşeleri düzleştir */
  padding-left: 0;
  padding-right: 0;
  padding-top: 24px;
  padding-bottom: 24px;
  margin-top: 16px;
  margin-bottom: 24px;
}
body.product.biocade-dura #dura-techniques .dura-tech-img img {
  max-width: 200px;
  margin-top: 8px;  /* 0–8px arası oynayabilirsin */
}
/* Ürün kartı başlıkları - ortak (önce masaüstü değeri) */
.product-card h3,
.product-card h3 a,
.product-card h3 span{
  font-size: 30px !important;   /* Masaüstü için */
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Mobilde başlığı küçült */
@media (max-width: 768px){
  .product-card h3,
  .product-card h3 a,
  .product-card h3 span{
    font-size: 24px !important;  /* Mobil için */
  }
}

/* ===== BIOCADE – Mobilde hero metni düzeni ===== */
@media (max-width: 768px){
  /* Subtitle (başlığın altındaki yeşil metin) */
  body.product.biocade .pdp-head .pdp-sub{
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }

  /* Intro (hero-desc içindeki paragraf/blok) */
  body.product.biocade .hero-desc p{
    font-size: 14px !important;
    line-height: 1.7 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
    margin: 0 !important;
  }

  /* Hero-desc ile başlık arasını biraz açalım */
  body.product.biocade .hero-desc{
    margin-top: 4px !important;
  }
}


/* ============================
   BIOCADE® DURA – FİNAL DÜZEN
   Sadece biocade-dura sayfasında geçerli
   ============================ */



/* 2) Cerrahi Tekniklerle Uyumluluk başlığı: yeşil çizik + hizalama */
body.product.biocade-dura #dura-techniques h2{
  position: relative;
  padding-left: 18px;
  margin: 0 0 10px;
  font-weight: 700;
}

body.product.biocade-dura #dura-techniques h2::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.6em;
  border-radius: 999px;
  background: #7FB800;
}

/* 3) Dikey boşluklar – Endikasyon, kartlar, Cerrahi Teknikler, Mikroyapı */

/* Özet Endikasyonlar bloğu ile ilk kart arası çok kısa olsun */
body.product.biocade-dura section#dura-indications-summary{
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
}

/* Dural defekt kartı ile BOS fistülü kartı arası: minimum boşluk */
body.product.biocade-dura section#dura-indications-visual{
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* BOS kartından sonra Cerrahi Tekniklerle Uyumluluk bloğu hemen gelsin */
body.product.biocade-dura section#dura-techniques{
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* Cerrahi Tekniklerle Uyumluluk → Mikroyapı (SEM) arası da daralsın */
body.product.biocade-dura section#dura-sem{
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

/* ============================
   BIOCADE® DURA – GENEL BAŞLIK VE BOŞLUK AYARI
   (Sadece biocade-dura sayfasını etkiler)
   ============================ */

/* Tüm H2 başlıklara yeşil çizik ve daha sıkı dikey boşluk */
body.product.biocade-dura h2{
  position: relative;
  padding-left: 18px;
  margin-top: 16px;   /* üst boşluk – default’tan daha dar */
  margin-bottom: 8px; /* başlık ile altındaki metin arası */
  font-size: 1.3rem;
  font-weight: 700;
}

/* İlk H2 (Özellikler) çok yukarı yapışmasın */
body.product.biocade-dura h2:first-of-type{
  margin-top: 8px;
}


/* Başlığın hemen altındaki paragraf / liste çok uzak durmasın */
body.product.biocade-dura h2 + p,
body.product.biocade-dura h2 + ul{
  margin-top: 4px;
}

/* Listelerin altındaki boşlukları da biraz kısalım
   (Dural defekt listesi → BOS listesi arasına da etki eder) */
body.product.biocade-dura ul{
  margin-bottom: 8px;
}


/* ===== BIOCADE DURA – ENDİKASYON KARTLARI HİZALAMA ===== */

/* Kartların (Dural defekt + BOS) birbirine çok yakın durması için */
body.product.biocade-dura .ind-grid{
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/* Sağdaki görsel kolonunu biraz yukarı çek ve sağa yasla (masaüstü) */
@media (min-width: 992px){
  body.product.biocade-dura .ind-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 3.4fr) minmax(0, 2.6fr) !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }

  body.product.biocade-dura .ind-images{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-end !important;   /* sağ tarafa yaklaştırır */
    margin-top: -70px !important;       /* yukarı çeker (gerekirse -15 / -25 yapılabilir) */
  }

  body.product.biocade-dura .ind-image img{
    width: 100% !important;
    max-width: 260px !important;
    height: auto !important;
    display: block !important;
  }
}

/* DURA – içeriğe özel Endikasyonlar başlığına yeşil çizgi */
#dura-indications > h2 {
  border-left: 4px solid #83c11f;
  padding-left: 14px;
}
/* ==== BIOCADE® DURA – İKİ ENDİKASYON KARTI ARASINDAKİ BOŞLUK ==== */

/* Aynı bölüm içindeki ardışık kartların arası kısalsın */
body.product.biocade-dura #dura-indications-visual .ind-grid + .ind-grid{
  margin-top: 5px !important;  /* istersen 6–8’e de çekebilirsin */
}

/* Section üst/alt marjinini de biraz kısalım */
body.product.biocade-dura #dura-indications-visual{
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
/* =========================
   BIOCADE DURA – ENDİKASYONLAR SPACING
   ========================= */
body.product.biocade-dura #dura-indications-visual{
  padding-top: 18px;   /* (2) Endikasyonlar -> Dural defekt arası biraz artsın */
  padding-bottom: 10px;
}

body.product.biocade-dura #dura-indications-visual .ind-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items: start;
  margin: 16px 0;      /* (1) grup içi genel dikey boşluk */
}

body.product.biocade-dura #dura-indications-visual .ind-grid + .ind-grid{
  margin-top: 10px;    /* (1) Dural defekt ↔ BOS fistülü arası KISALSIN */
}

body.product.biocade-dura #dura-indications-visual .ind-images{
  justify-self: end;               /* (endikasyon görselleri sağa yaslansın) */
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.product.biocade-dura #dura-indications-visual .ind-image{ margin: 0; }

body.product.biocade-dura #dura-indications-visual .ind-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

/* =========================
   BIOCADE DURA – SEM GRID (tek satır, daha büyük)
   ========================= */
body.product.biocade-dura #dura-sem .dura-sem-grid{
  display: flex;
  gap: 26px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;        /* (3) alt satıra kaymasın */
}

body.product.biocade-dura #dura-sem .dura-sem-item{
  flex: 1 1 0;
  max-width: 260px;         /* (3) büyüsün */
}

body.product.biocade-dura #dura-sem .dura-sem-item img{
  width: 100%;
  aspect-ratio: 1 / 1;      /* kare ve güçlü görünüm */
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

/* mobilde sığmazsa 2 satıra izin verelim */
@media (max-width: 820px){
  body.product.biocade-dura #dura-sem .dura-sem-grid{ flex-wrap: wrap; }
  body.product.biocade-dura #dura-sem .dura-sem-item{ max-width: calc(50% - 13px); }
}
@media (min-width: 980px){
  body.product.biocade #biocade-features .biocade-image-wrap img{
    max-width: 280px !important;   /* 340/300 deneyebilirsin */
    width: 100% !important;
    height: auto !important;
  }
}
@media (min-width: 980px){
  body.product.biocade .biocade-indication-card{
    display: grid !important;
    grid-template-columns: minmax(0,1.35fr) minmax(0,0.95fr) !important;
    gap: 18px 26px !important;
    align-items: start !important;
  }

  /* Görsel kolonu sağda dursun */
  body.product.biocade .biocade-indication-images{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
  }

  body.product.biocade .biocade-indication-images img{
  position: static !important;
  display: block !important;
  margin: 0 0 18px 0 !important;
  transform: none !important;
}

    max-width: 320px !important;
    width: 100% !important;
    height: auto !important;
  }
}
@media (min-width: 980px){
  /* Ölçüler bloğunu sola yasla */
  body.product.biocade #sizes{
    max-width: 560px !important;   /* ihtiyaca göre 520/600 */
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  body.product.biocade #sizes figure{
    justify-content: flex-start !important;
  }

  /* Butonları da aynı genişlikte hizala */
  body.product.biocade .pdp-cta{
    max-width: 560px !important;   /* #sizes ile aynı */
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  body.product.biocade .pdp-cta .btn{
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
  }
}
/* BIOCADE: Sağ kolondaki 2 görsel birbirine yapışmasın */
@media (min-width: 980px){
  body.product.biocade .biocade-indication-images{
    display:flex !important;
    flex-direction:column !important;
    gap: 18px !important;
    align-items:flex-end !important;
  }

  /* 2. görseli aşağı kaydır (Meme Rekonstrüksiyonu hizasına yaklaşsın) */
  body.product.biocade .biocade-indication-images img:nth-child(2){
    margin-top: 200px !important;  /* 120-220 arası deneyebilirsin */
  }
}
@media (min-width: 980px){
  /* Ölçüler kartını sola yasla */
  body.product.biocade #sizes{
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-self: start !important; /* eğer bir grid içindeyse */
  }

  /* İçindeki tablo görselini kesin sola al */
  body.product.biocade #sizes figure{
    display:flex !important;
    justify-content:flex-start !important;
  }
  body.product.biocade #sizes img{
    margin-left: 0 !important;
    display:block !important;
  }
}
/* BIOCADE – Endikasyon kartları (iki kartın birleşik görünmesini düzeltir) */
body.product.biocade #biocade-indications .biocade-indication-card{
  display:grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,0.9fr);
  gap:18px 26px;
  align-items:start;

  /* kart görünümü burada olmalı */
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}

/* kartlar arasında net boşluk */
body.product.biocade #biocade-indications .biocade-indication-card + .biocade-indication-card{
  margin-top:18px;
}

/* sağ sütun: her kartta görseli sağa, yukarıya al */
body.product.biocade #biocade-indications .biocade-indication-images{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

/* görsel ölçüsü: “Meme” görselini biraz daha aşağı almak için margin-top verilebilir */
body.product.biocade #biocade-indications .biocade-indication-images img{
  max-width:320px;
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* MOBİL: alt alta diz */
@media (max-width: 900px){
  body.product.biocade #biocade-indications .biocade-indication-card{
    grid-template-columns: 1fr;
  }
  body.product.biocade #biocade-indications .biocade-indication-images{
    justify-content:center;
    margin-top:12px;
  }
  body.product.biocade #biocade-indications .biocade-indication-images img{
    max-width:320px;
  }
}
body.product.biocade #biocade-indications .biocade-indication-card:nth-of-type(2) .biocade-indication-images img{
  margin-top:10px;
}
/* BIOCADE – Masaüstünde flu görünümü düzeltme (sadece biocade) */
body.product.biocade img{
  image-rendering: auto !important;
  transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* SEM görselleri: sabit yükseklik/cover varsa flu yapar -> kaldır */
body.product.biocade .biocade-sem-grid img{
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  image-rendering: -webkit-optimize-contrast; /* Chrome/Safari’da çoğu zaman netleştirir */
}

/* Endikasyon & özellik görselleri: cover yerine contain (kırpma + blur olmasın) */
body.product.biocade #biocade-indications .biocade-indication-images img,
body.product.biocade #biocade-features .biocade-image-wrap img{
  object-fit: contain !important;
  image-rendering: -webkit-optimize-contrast;
}

/* Hero ana görsel: zaten contain ama ekstra netlik */
body.product.biocade #pdp-hero{
  object-fit: contain !important;
  image-rendering: -webkit-optimize-contrast;
}
body.product.biocade .biocade-sem-grid img{
  max-width: 520px !important; /* örnek: çok büyütmesin */
  margin: 0 auto !important;
}
/* ===============================
   BIOCADE – HERO + HERNİ NETLEŞTİRME
   (sadece biocade)
   =============================== */

/* 1) Genel: blur yapan filtre/transform varsa temizle */
body.product.biocade #pdp-hero,
body.product.biocade #biocade-indications .biocade-indication-images img{
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
  image-rendering: auto !important;
  image-rendering: -webkit-optimize-contrast;
}

/* 2) HERO: en büyük sebep upscale → hero alanını biraz daraltıp görüntüyü büyütmeyi sınırlayalım */
@media (min-width: 980px){
  body.product.biocade .hero-area{
    max-width: 720px !important;   /* 780/820 yerine daha güvenli */
  }
  body.product.biocade #pdp-hero{
    width: 100% !important;
    max-width: 720px !important;   /* görüntü 720’den fazla büyümesin */
    height: auto !important;
    max-height: 520px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }
}

/* 3) HERNİ görseli: cover/taşma olmasın, gereksiz büyümesin */
@media (min-width: 980px){
  body.product.biocade #biocade-indications .biocade-indication-images img{
    max-width: 280px !important;   /* 320 → 280 (daha az upscale) */
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}
/* =========================
   BIOCADE – MOBİL DÜZEN (SADE)
   Sadece biocade sayfası
   ========================= */
@media (max-width: 768px){

  /* 1) Grid tek kolon */
  body.product.biocade .pdp{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 2) Başlık + intro fontları küçülsün, taşma olmasın */
  body.product.biocade .product-title{
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }

  body.product.biocade .pdp-sub{
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.product.biocade .hero-desc p{
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }

  body.product.biocade .pdp-section p,
  body.product.biocade .pdp-section li{
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* 3) Hero ana görsel taşmasın */
  body.product.biocade .hero-area{ overflow:hidden !important; }
  body.product.biocade #pdp-hero{
    max-height: 380px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 4) Küçük görseller: TEK SATIR + yatay kaydırma */
  body.product.biocade .hero-thumbs{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
    justify-content: flex-start !important;
  }
  body.product.biocade .hero-thumbs .thumb{
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 72px !important;
  }

  /* 5) Endikasyon kartları: görsel alta gelsin, ortalansın */
  body.product.biocade .biocade-indication-card{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.product.biocade .biocade-indication-images img{
    margin: 0 auto !important;
    max-width: 320px !important;
  }

  /* 6) Ölçüler: sola yakın + tablo ve butonlar küçük */
  body.product.biocade #sizes{
    max-width: 270px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.product.biocade #sizes img{
    width: 250px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  body.product.biocade .pdp-cta{
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  body.product.biocade .pdp-cta .btn{
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
}
body.product.biocade .product-title span{
  color:#83c11f !important;
  font-weight:700 !important;
}
@media (max-width: 768px){
  body.product.biocade .hero-thumbs{
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  body.product.biocade .hero-thumbs .thumb{
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
  }
}


@media (max-width: 768px){
  body.product.biocade .pdp-head .pdp-sub{
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  body.product.biocade .hero-desc p{
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
  }
}
/* BIOCADE + DURA: çizgi SADECE içerik bloklarında */
body.product .pdp-scope .pdp-section .section-title,
body.product .pdp-scope .pdp-block .section-title{
  border-left: 5px solid #5aa800;
  padding-left: 12px !important;
  font-weight: 700;
  color: #1f2937;
}

/* Alt başlıklar */
body.product .pdp-scope .pdp-section .sub-title{
  border-left: 4px solid rgba(90,168,0,.55);
  padding-left: 10px !important;
  font-weight: 600;
  color: #1f2937;
}



/* Özellikler görseli */
body.product.biocade #biocade-features .biocade-image-wrap img{
  max-width: 230px !important;
}

/* SEM görselleri */
body.product.biocade #biocade-sem .biocade-sem-grid{
  gap: 12px !important;
}
body.product.biocade #biocade-sem .biocade-sem-grid img{
  max-width: 280px !important;
  margin: 0 auto !important;
}
@media (max-width: 900px){
  body.product.biocade #biocade-sem .biocade-sem-grid img{
    max-width: 240px !important;
  }
}


/* Ölçüler bloğunu sola yasla */
body.product.biocade #sizes{
  max-width: 320px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* görsel sola */
body.product.biocade #sizes figure{
  justify-content: flex-start !important;
  text-align: left !important;
}
body.product.biocade #sizes img{
  margin-left: 0 !important;
}

/* butonlar küçük + sola hizalı */
body.product.biocade .pdp-cta{
  justify-content: flex-start !important;
  gap: 6px !important;
}
body.product.biocade .pdp-cta .btn{
  padding: 4px 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
@media (max-width: 768px){
  body.product.biocade #sizes{
    max-width: 260px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.product.biocade #sizes img{
    width: 250px !important;
  }
  body.product.biocade .pdp-cta .btn{
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}


@media (max-width: 768px){
  body.product.biocade main h3{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.product.biocade .pdp-section p,
  body.product.biocade .pdp-section li{
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}
/* ===========================
   BIOCADE – MOBILE FIX PACK
   (sadece biocade sayfası)
   =========================== */

/* Güvenli kapsam */
body.product.biocade { --bioGreen:#83c11f; }

/* 1) Mobil genel fontları 11px civarı yap */
@media (max-width: 768px){
  body.product.biocade .hero-desc p,
  body.product.biocade .pdp-section p,
  body.product.biocade .pdp-section li{
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  /* Başlık (biocade®) biraz küçülsün */
  body.product.biocade .product-title,
  body.product.biocade .hero-text h1{
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }

  /* 2) Subtitle 2 satır düzgün dursun (11px) */
  body.product.biocade .pdp-sub{
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: normal !important;     /* nowrap KAPALI */
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
  }

  /* 3) 4 küçük görsel tek satıra sığsın */
  body.product.biocade .hero-thumbs{
    display:flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow: hidden !important;  /* taşmayı kes (tek satır) */
    justify-content: center !important;
  }
  body.product.biocade .hero-thumbs .thumb{
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px !important;
  }
}

/* 4) Bölüm başlıklarına yeşil çizik (Özellikler / Endikasyonlar / Mikroyapı / Ölçüler) */
body.product.biocade .section-title{
  position: relative;
  padding-left: 14px !important;
}
body.product.biocade .section-title::before{
  content:"";
  position:absolute;
  left:0; top: 0.15em;
  width:4px; height: 1.25em;
  background: var(--bioGreen);
  border-radius: 3px;
}

/* Eğer bazı yerlerde h3 başlıkları da çizik istiyorsanız */
body.product.biocade .biocade-indication-card h3{
  position: relative;
  padding-left: 14px !important;
}
body.product.biocade .biocade-indication-card h3::before{
  content:"";
  position:absolute;
  left:0; top: 0.15em;
  width:4px; height: 1.15em;
  background: var(--bioGreen);
  border-radius: 3px;
}

/* 5) Özellikler görseli + SEM görselleri biraz küçülsün */
body.product.biocade #biocade-features .biocade-image-wrap img{
  max-width: 220px !important;
}
body.product.biocade #biocade-sem .biocade-sem-grid img{
  max-width: 200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 6) Ölçüler tablosu + CTA (butonlar) sola hizalansın (biocade içinde) */
/* Sizde bazen #sizes bazen .sizes olduğu için ikisini de hedefliyorum */
body.product.biocade #sizes,
body.product.biocade .sizes{
  max-width: 520px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

body.product.biocade #sizes figure,
body.product.biocade .sizes figure{
  justify-content: flex-start !important;
  text-align: left !important;
}

body.product.biocade #sizes img,
body.product.biocade .sizes img{
  max-width: 420px !important;
  width: 100% !important;
  margin-left: 0 !important;
}

/* Butonlar: tablo hizasında, daha küçük */
body.product.biocade .pdp-cta{
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
body.product.biocade .pdp-cta .btn{
  padding: 6px 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Mobilde ölçüler + butonlar daha da kompakt */
@media (max-width: 768px){
  body.product.biocade #sizes,
  body.product.biocade .sizes{
    max-width: 280px !important;
  }
  body.product.biocade #sizes img,
  body.product.biocade .sizes img{
    max-width: 260px !important;
  }
  body.product.biocade .pdp-cta .btn{
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
}



ody.product.biocade #sizes,
body.product.biocade .sizes{
  max-width: 520px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

body.product.biocade #sizes figure,
body.product.biocade .sizes figure{
  justify-content: flex-start !important;
  text-align: left !important;
}

body.product.biocade #sizes img,
body.product.biocade .sizes img{
  max-width: 420px !important;
  width: 100% !important;
  margin-left: 0 !important;
}

/* ===========================
   BIOCADE – sizes + CTA hizası
   (sadece biocade)
   =========================== */

/* SIZES kartını sola yasla ve daralt */
body.product.biocade section#sizes.sizes{
  max-width: 520px !important;   /* masaüstü */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Header/başlık sol hizası */
body.product.biocade section#sizes.sizes .block-header{
  text-align: left !important;
}

/* Tablo görselini sola al (figure ortalanıyorsa kır) */
body.product.biocade section#sizes.sizes figure{
  margin: 10px 0 0 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
}

/* Görsel genişliği */
body.product.biocade section#sizes.sizes figure img{
  width: 320px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* CTA'yı SIZES ile aynı sol hizada tut */
body.product.biocade nav.pdp-cta{
  max-width: 520px !important;   /* SIZES ile aynı */
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* CTA butonlarını küçült */
body.product.biocade nav.pdp-cta .btn{
  padding: 6px 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Mobil: daha dar, daha küçük */
@media (max-width: 768px){
  body.product.biocade section#sizes.sizes,
  body.product.biocade nav.pdp-cta{
    max-width: 200px !important;
  }

  body.product.biocade section#sizes.sizes figure img{
    width: 230px !important;
    max-width: 100% !important;
  }

  body.product.biocade nav.pdp-cta .btn{
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
}

/* =========================
   BIOCADE – MOBIL (Ölçüler + CTA) FIX
   ========================= */
@media (max-width: 768px){

  /* Ölçüler kartı: sayfa genişliğine uy */
  body.product.biocade section#sizes.sizes{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 14px 14px !important;
  }

  /* "Biocade® mevcut boyutlar." tek satıra yaklaşsın (gerekirse kessin) */
  body.product.biocade section#sizes.sizes .block-header p{
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin: 6px 0 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Tablo görseli: kart içinde düzgün küçülsün */
  body.product.biocade section#sizes.sizes figure{
    margin: 10px 0 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
  }
  body.product.biocade section#sizes.sizes figure img{
    width: min(320px, 100%) !important;  /* gerekirse 300px de yapabilirsin */
    max-width: 100% !important;
    height: auto !important;
  }

  /* CTA: mobilde alt alta, sola hizalı ve kart genişliğinde */
  body.product.biocade nav.pdp-cta{
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  body.product.biocade nav.pdp-cta .btn{
    width: 100% !important;
    max-width: 320px !important;   /* istersen 280px */
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 768px){

  /* Kart iç boşluk */
  body.product.biocade section#sizes.sizes{
    padding: 10px 10px !important;
  }

  /* Tablo görseli daha küçük */
  body.product.biocade section#sizes.sizes figure img{
    width: min(200px, 100%) !important;   /* 260 iyi, daha da küçültmek istersen 240 */
  }

  /* CTA butonları daha küçük ve dar */
  body.product.biocade nav.pdp-cta .btn{
    max-width: 150px !important;          /* 260; daha dar istersen 240 */
    padding: 8px 10px !important;         /* buton yüksekliği küçülür */
    font-size: 11px !important;
  }

  /* "Biocade® mevcut boyutlar." yazısı */
  body.product.biocade section#sizes.sizes .block-header p{
    font-size: 10.5px !important;
  }
}
@media (max-width: 768px){

  /* CTA: tek satır, tabloyla aynı genişlik ve sola hizalı */
  body.product.biocade nav.pdp-cta{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;          /* ALT ALTA YAPMA */
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;

    width:min(180px, 100%) !important;    /* tablo genişliği ile aynı */
    margin-left:0 !important;
    margin-right:auto !important;

    overflow-x:auto !important;           /* çok dar ekranda kırmak yerine kaydır */
    -webkit-overflow-scrolling:touch;
  }

  /* Butonları yan yana sığdır */
  body.product.biocade nav.pdp-cta .btn{
    flex:0 0 auto !important;             /* satır kırma yerine sabit */
    white-space:nowrap !important;
    padding:7px 10px !important;
    font-size:9px !important;
    line-height:1.1 !important;
  }
}
@media (max-width: 768px){

  /* CTA konteyner: sola hizalı, taşarsa yana kaydır */
  body.product.biocade nav.pdp-cta{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:8px !important;
    width:min(250px, 100%) !important;  /* tabloyla uyumlu */
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  /* BUTON: genişlemesin (daralsın) */
  body.product.biocade nav.pdp-cta .btn{
    flex:0 0 auto !important;           /* büyümeyi kapatır */
    width:auto !important;              /* 100% ise ezer */
    min-width:unset !important;
    max-width:none !important;

    padding:6px 8px !important;
    font-size:10px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  /* Eğer "ghost" buton çok uzunsa biraz daha daralt */
  body.product.biocade nav.pdp-cta .btn.ghost{
    padding:6px 8px !important;
  }
}

.pdp-scope.pdp-dura .pdp-section{margin-top:22px}
.pdp-scope.pdp-dura .ind-block{
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:16px;
  padding:14px;
  margin-bottom:14px;
}
.pdp-scope.pdp-dura .section-title{margin:0 0 10px}
.pdp-scope.pdp-dura .ind-list{margin:0 0 10px;padding-left:18px}
.pdp-scope.pdp-dura .ind-images{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.pdp-scope.pdp-dura .ind-fig{
  margin:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:10px;
}
.pdp-scope.pdp-dura .ind-fig img{width:100%;height:auto;display:block}
@media (max-width: 900px){
  .pdp-scope.pdp-dura .ind-images{grid-template-columns:1fr}
}

.pdp-scope.pdp-dura .ind-summary{
  margin:0 0 12px;
  padding:12px 14px;
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:14px;
}




}
/* === PDP FINAL: SADECE ÜRÜN İÇERİĞİ BAŞLIKLARI === */
body.product .pdp-scope .pdp-section .section-title,
body.product .pdp-scope .pdp-block .section-title{
  border-left: 5px solid #5aa800;
  padding-left: 12px;
  font-weight: 700;
  color: #1f2937;
}

/* Alt başlıklar */
body.product .pdp-scope .pdp-section .sub-title{
  border-left: 4px solid rgba(90,168,0,.55);
  padding-left: 10px;
  font-weight: 600;
}

/* =========================
   FOOTER – SAFE RESET
   (styles.css EN ALT)
========================= */

/* Footer kendi alanını temiz başlatır */
footer.site-footer{
  display:block;
  width:100%;
  background:#0f2231;
  color:#d9e3ec;
  padding:16px 0 10px;
  margin:0;
  clear:both;             /* float vb. etkileri kırar */
  position:relative;
  z-index:1;
}

/* Footer'ın içi: her sayfada aynı genişlik/padding */
footer.site-footer > .container.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px;
  box-sizing:border-box;
  display:block;          /* grid/flex ne olursa olsun burada blok */
}

/* Footer içindeki tipografi (minimum, çakışmasın) */
footer.site-footer .brand-name{
  margin:0 0 6px 0;
  font-size:12px;
  line-height:1.0;
  font-weight:700;
  color:#fff;
}

footer.site-footer .footer-address{
  margin:0 0 6px 0;
  font-size:9px;
  line-height:1.0;
  opacity:.92;
  white-space:nowrap;
}

footer.site-footer .footer-meta{
  margin:0;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

footer.site-footer a.contact-link{
  font-size:9px;
  line-height:1.0;
  color:#d9e3ec;
  text-decoration:none;
  white-space:nowrap;
}

footer.site-footer .footer-bottom{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.10);
}

footer.site-footer .footer-bottom small{
  display:block;
  text-align:center;
  font-size:7.5px;
  line-height:1.0;
  opacity:.70;
}
/* =========================
   FOOTER – DESKTOP OVERRIDE
========================= */
@media (min-width: 992px){

  footer.site-footer .brand-name{
    font-size: 14px;
    line-height: 1.2;
  }

  footer.site-footer .footer-address{
    font-size: 12.5px;
    line-height: 1.3;
    white-space: normal;   /* desktop’ta taşmasın */
  }

  footer.site-footer a.contact-link{
    font-size: 12.5px;
    line-height: 1.3;
  }

  footer.site-footer .footer-bottom small{
    font-size: 11px;
    line-height: 1.3;
  }

  /* Desktop'ta sığdırma için gerekirse */
  footer.site-footer .footer-meta{
    gap: 18px;
    flex-wrap: wrap;       /* çok geniş ekranlarda daha rahat */
    white-space: normal;
  }
}

/* MOBİL */
@media (max-width:576px){
  footer.site-footer{ padding:14px 0 10px; }
  footer.site-footer > .container.footer-inner{ padding:0 14px; }

  footer.site-footer .brand-name{ font-size:14px; }
  footer.site-footer .footer-address{ font-size:11px; }

  footer.site-footer .footer-meta{
    flex-wrap:wrap;        /* çok dar ekranda alt satıra geçsin */
    gap:10px;
  }

  footer.site-footer a.contact-link{ font-size:11px; }
  footer.site-footer .footer-bottom small{ font-size:9px; }
}


/* ===== FOOTER: MOBİL ZORLA (en en alt) ===== */
@media (max-width: 576px){

  html body footer.site-footer{
    padding: 14px 0 10px !important;
  }

  html body footer.site-footer > .container.footer-inner{
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body footer.site-footer .brand-name{
    font-size: 14px !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
  }

  html body footer.site-footer .footer-address{
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    white-space: normal !important;   /* mobilde taşmasın */
  }

  html body footer.site-footer .footer-meta{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  html body footer.site-footer a.contact-link{
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  html body footer.site-footer .footer-bottom{
    margin-top: 8px !important;
    padding-top: 8px !important;
    text-align: center !important;
  }

  html body footer.site-footer .footer-bottom small{
    font-size: 9px !important;
    line-height: 1.15 !important;
    opacity: .7 !important;
  }
}


/* ===== FOOTER: TÜM SAYFALARDA AYNI + DAHA KÜÇÜK (en en alt) ===== */
@media (max-width: 576px){

  /* 1) Hangi sayfa olursa olsun iç bloğa aynı yan boşluk */
  html body footer.site-footer > .container,
  html body footer.site-footer > .container.footer-inner,
  html body footer.site-footer .container.footer-inner,
  html body footer.site-footer .footer-inner{
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2) Tamamını biraz küçült (genel ölçek) */
  html body footer.site-footer{
    padding: 10px 0 8px !important;
  }

  /* 3) Şirket adı (brand) daha küçük */
  html body footer.site-footer .brand-name{
    font-size: 9px !important;
    line-height: 0.5 !important;
    margin: 0 0 4px 0 !important;
    font-weight: 700 !important;
  }

  /* 4) Adres daha küçük + daha sıkı */
  html body footer.site-footer .footer-address{
    font-size: 7.8px !important;
    line-height: 1.15 !important;
    margin: 0 0 4px 0 !important;
    opacity: .95 !important;
  }

  /* 5) Tel + mail daha küçük + aralık dar */
  html body footer.site-footer .footer-contact p{
    margin: 0 !important;                 /* p default boşluklarını sıfırla */
  }

  html body footer.site-footer .footer-contact p:last-child{
    display: flex !important;
    align-items: center !important;
    gap: 7.8px !important;
    flex-wrap: nowrap !important;
  }

  html body footer.site-footer a.contact-link{
    font-size: 7.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  /* 6) Telif: küçücük + fazla dikkat çekmesin + ortalı kalsın */
  html body footer.site-footer .footer-bottom{
    margin-top: 6px !important;
    padding-top: 6px !important;
    padding-bottom: 0 !important;
    text-align: center !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  html body footer.site-footer .footer-bottom small{
    font-size: 6.5px !important;
    line-height: 1.0 !important;
    opacity: .65 !important;
  }
}


@media (max-width: 576px){
  footer.site-footer .footer-inner,
  footer.site-footer .footer-contact,
  footer.site-footer .footer-bottom{
    text-align: left !important;
  }

  footer.site-footer .footer-contact p:last-child{
    justify-content: flex-start !important;
  }

  footer.site-footer .footer-bottom small{
    text-align: left !important;
  }
}

footer.site-footer .brand-name{
  margin-bottom: 2px !important;  /* 4px -> 2px */
}
footer.site-footer .footer-address{
  margin-top: 0 !important;
}


@media (max-width: 576px){
  footer.site-footer .footer-bottom{
    margin-top: 0px !important;   /* 8px ise 4px yap */
    padding-top: 0px !important;
  }
}

/* =========================
   FOOTER – MOBİL ORTALI + TEK SATIR (en alta)
========================= */
@media (max-width: 576px){

  footer.site-footer{
    padding: 12px 0 10px !important;
  }

  /* Kenara yapışmayı engelle */
  footer.site-footer .footer-inner,
  footer.site-footer .container.footer-inner,
  footer.site-footer .container{
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* Tüm footer metinleri ortada */
  footer.site-footer .footer-company,
  footer.site-footer .footer-contact,
  footer.site-footer .footer-bottom{
    text-align: center !important;
  }

  /* Brand biraz daha kompakt */
  footer.site-footer .brand-name{
    margin: 0 0 4px 0 !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  /* Adres: tek satır + taşarsa ... */
  footer.site-footer .footer-address{
    margin: 0 0 6px 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: .95;
  }

  /* Tel + mail satırı: tek satır, ortalı */
  footer.site-footer .footer-contact p:last-child{
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  footer.site-footer a.contact-link{
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  /* Telif: küçük + sıkı + ortada */
  footer.site-footer .footer-bottom{
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  footer.site-footer .footer-bottom small{
    display: inline-block !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    opacity: .70 !important;
    text-align: center !important;
    max-width: 100% !important;
  }
}


@media (max-width: 576px){

  /* 1) Footer bandını incelt */
  footer.site-footer{
    padding: 8px 0 6px !important;
  }

  /* 2) İç blokların dikey boşluklarını azalt */
  footer.site-footer .brand-name{ margin: 0 0 2px 0 !important; }
  footer.site-footer .footer-address{ margin: 0 0 4px 0 !important; }

  /* Tel + mail satırı */
  footer.site-footer .footer-contact p:last-child{
    margin: 0 !important;
  }

  /* 3) Telif ile üst içerik arası boşluğu azalt */
  footer.site-footer .footer-bottom{
    margin-top: 4px !important;
    padding-top: 4px !important;
  }

  /* 4) Telif yazısını daha sıkı yap */
  footer.site-footer .footer-bottom small{
    font-size: 9px !important;
    line-height: 1.05 !important;
  }
}



/* DURA – Endikasyon görselleri boyut kontrolü */
#dura-indications .ind-images{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}

#dura-indications .dura-media{
  border-radius:12px;
  overflow:hidden;
}

#dura-indications .dura-media img{
  width:100%;
  height:220px;        /* masaüstü */
  object-fit:cover;    /* kırpar, taşma olmaz */
  display:block;
}

@media (max-width: 700px){
  #dura-indications .ind-images{ grid-template-columns: 1fr; }
  #dura-indications .dura-media img{ height:180px; }  /* mobil */
}

/* DURA – Endikasyon: metin solda, 1 görsel sağda */
body.product.biocade-dura #dura-indications .ind-row{
  display:grid;
  grid-template-columns: 1fr 320px; /* sağ sütun sabit */
  gap:14px;
  align-items:start;
  margin-top:14px;
}

body.product.biocade-dura #dura-indications .ind-figure{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(226,232,240,.9);
  background:#fff;
}

body.product.biocade-dura #dura-indications .ind-figure img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

@media (max-width: 900px){
  body.product.biocade-dura #dura-indications .ind-row{
    grid-template-columns: 1fr 280px;
  }
}
@media (max-width: 720px){
  body.product.biocade-dura #dura-indications .ind-row{
    grid-template-columns: 1fr; /* mobil: alta düşsün */
  }
  body.product.biocade-dura #dura-indications .ind-figure img{
    height:180px;
  }
}
body.product.biocade-dura #dura-indications .ind-figure img{ height:170px; }

/* =========================================================
   BIOCADE DURA – görsel boyutları (sadece bu sayfa)
   ========================================================= */
body.product.biocade-dura #dura-indications .ind-right.ind-figure{
  width: 300px;              /* sağ sütun genişliği */
  max-width: 300px;
}
body.product.biocade-dura #dura-indications .ind-right.ind-figure img{
  width: 100%;
  height: 170px;             /* endikasyon sağ görseller */
  object-fit: cover;
  display:block;
  border-radius: 12px;
}

/* Cerrahi Teknikler – kart görsellerini dengeli yap */
body.product.biocade-dura #dura-techniques .tech-fig{
  margin-top:10px;
}
body.product.biocade-dura #dura-techniques .tech-fig img{
  width: 100%;
  height: 200px;             /* büyük geldi diyorsan 170 yap */
  object-fit: cover;
  display:block;
  border-radius: 14px;
}

/* SEM – 3 görsel aynı yükseklik ve düzgün kırpma */
body.product.biocade-dura #dura-sem .sem-fig{
  margin:0;
  overflow:hidden;
  border-radius: 12px;
}
body.product.biocade-dura #dura-sem .sem-fig img{
  width: 100%;
  height: 210px;             /* SEM için ideal; 180-240 arası oynayabilirsin */
  object-fit: cover;
  display:block;
}

/* Ölçüler tablosu – çok büyükse sınırla */
body.product.biocade-dura #dura-sizes img{
  width: 100%;
  max-width: 760px;          /* masaüstünde daha derli toplu */
  height: auto;
  display:block;
  margin: 0 auto;
}

/* Mobil ince ayar */
@media (max-width: 720px){
  body.product.biocade-dura #dura-indications .ind-right.ind-figure{
    width: 100%;
    max-width: 100%;
  }
  body.product.biocade-dura #dura-indications .ind-right.ind-figure img{
    height: 160px;
  }
  body.product.biocade-dura #dura-techniques .tech-fig img{
    height: 180px;
  }
  body.product.biocade-dura #dura-sem .sem-fig img{
    height: 180px;
  }
}



/* DURA – Cerrahi teknikler: boşluk kalmasın */
body.product.biocade-dura #dura-techniques .tech-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  align-items: start;
}
body.product.biocade-dura #dura-techniques .tech-card{
  width:100%;
}
body.product.biocade-dura #dura-techniques .tech-fig img{
  width:100%;
  height: 240px;       /* çok büyükse 210 */
  object-fit: cover;
  border-radius: 14px;
  display:block;
}

/* Tablet ve altı: tek kolon */
@media (max-width: 900px){
  body.product.biocade-dura #dura-techniques .tech-grid{
    grid-template-columns: 1fr;
  }
  body.product.biocade-dura #dura-techniques .tech-fig img{
    height: 200px;
  }
}
/* DURA – Cerrahi Teknikler: alanı doldur, boşluk kalmasın */
#dura-techniques .tech-grid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}

#dura-techniques .tech-card{
  width: 100% !important;
  max-width: none !important;
}

#dura-techniques .tech-fig,
#dura-techniques figure.tech-fig{
  width: 100% !important;
  margin-top: 10px !important;
}

#dura-techniques .tech-fig img{
  width: 100% !important;
  height: 260px !important;     /* büyük/küçük için 220–300 oynat */
  object-fit: cover !important;
  display: block !important;
  border-radius: 14px !important;
}

/* Tablet + mobil: tek kolon */
@media (max-width: 900px){
  #dura-techniques .tech-grid{
    grid-template-columns: 1fr !important;
  }
  #dura-techniques .tech-fig img{
    height: 200px !important;
  }
}
/* DURA – Cerrahi Teknikler: class bağımsız (kesin etki) */
#dura-techniques{
  display:block !important;
}

#dura-techniques > *{
  max-width: 100% !important;
}

/* İçeride iki sütun düzen kur */
#dura-techniques .dura-tech-two-col,
#dura-techniques .tech-grid,
#dura-techniques .grid,
#dura-techniques .row{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 18px !important;
}

/* Eğer böyle bir wrapper yoksa, section içindeki direkt çocukları 2 kolona al */
#dura-techniques > .pdp-section,
#dura-techniques > div{
  width:100% !important;
}

/* Bölüm içindeki tüm görselleri büyüt */
#dura-techniques img{
  width:100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display:block !important;
  border-radius: 14px !important;
}

/* Mobil: tek kolon */
@media (max-width: 900px){
  #dura-techniques .dura-tech-two-col,
  #dura-techniques .tech-grid,
  #dura-techniques .grid,
  #dura-techniques .row{
    grid-template-columns: 1fr !important;
  }
  #dura-techniques img{
    height: 200px !important;
  }
}
/* DURA – Şeffaflık görsel bloğu */
#dura-transparency img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
  border-radius:14px;
}
@media (max-width:720px){
  #dura-transparency img{ height:180px; }
}

/* DURA – Özellikler: metin + görsel dengesi */
#dura-features{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;  /* metin biraz geniş, görsel sağlam */
  gap: 18px;
  align-items: start;
}

/* Liste (solda) */
#dura-features ul{
  margin: 0;
}

/* Görsel (sağda) – büyüt + ortala */
#dura-features .dura-feature-img{
  margin: 0;
  display:flex;
  justify-content:center;
  align-items:center;
}
#dura-features .dura-feature-img img{
  width: 100%;
  max-width: 420px;     /* büyütmek için 460 yapabilirsin */
  height: 240px;        /* 220–280 arası */
  object-fit: contain;  /* şeffaf ürün görsellerinde en temiz */
  display:block;
}

/* Mobil: tek kolon, görsel alta ortalı */
@media (max-width: 900px){
  #dura-features{
    grid-template-columns: 1fr;
  }
  #dura-features .dura-feature-img img{
    max-width: 520px;
    height: auto;       /* mobilde taşmasın */
  }
}
/* DURA – Özellikler: güçlü override */
#dura-features{
  display:grid !important;
  grid-template-columns: 1.25fr 0.75fr !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Sağdaki görsel kutusunu yakala (class farklı olsa bile) */
#dura-features figure{
  margin: 0 !important;
}
#dura-features figure img{
  width: 100% !important;
  max-width: 420px !important;
  height: 300px !important;
  object-fit: contain !important;
  display:block !important;
  margin: 0 auto !important;      /* ortala */
}

/* Mobil */
@media (max-width: 900px){
  #dura-features{
    grid-template-columns: 1fr !important;
  }
  #dura-features figure img{
    max-width: 520px !important;
    height: auto !important;
  }
}

/* ÖLÇÜLER: tabloyu sola hizala (Biocade + Dura ortak) */
#sizes figure{
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
}
#sizes figure img{
  margin: 0 !important;
  max-width: 360px;          /* istersen 560/600 */
  width: 100%;
  height: auto;
  display:block;
}

/* ÖLÇÜLER altındaki CTA butonlarını küçült + hizala */
#sizes + .pdp-cta{
  display:flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  justify-content: flex-start !important;
  margin-top: 12px !important;
}

#sizes + .pdp-cta .btn{
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  line-height: 1.05 !important;
  border-radius: 999px !important;
}


/* Ölçüler + altındaki CTA: aynı genişlikte hizala */
#sizes figure img{
  max-width: 360px !important;
}

#sizes{
  --sizesW: 360px;
}

/* CTA bloğunu da aynı genişliğe al */
#sizes + .pdp-cta{
  width: 100% !important;
  max-width: var(--sizesW) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}

/* Butonlar: aynı satırda daha düzgün dursun */
#sizes + .pdp-cta .btn{
  padding: 8px 10px !important;
  font-size: 0.88rem !important;
}

.pdp-block.sizes ~ .pdp-cta{
  max-width: 360px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Ölçüler tablo: masaüstü */
#sizes figure img{
  max-width: 280px !important;
  width: 100% !important;
}

/* CTA: her cihazda tek satır */
#sizes + .pdp-cta{
  max-width: 360px !important;
  margin-left: 0 !important;
  margin-right: auto !important;

  display:flex !important;
  flex-wrap: nowrap !important;        /* <-- tek satır */
  gap: 6px !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;         /* sığmazsa kaydır (satır bozmaz) */
  -webkit-overflow-scrolling: touch;
}

#sizes + .pdp-cta .btn{
  white-space: nowrap !important;
  padding: 7px 10px !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
}

/* Mobil: tablo daha küçük + butonlar daha da kompakt */
@media (max-width: 560px){
  #sizes figure img{
    max-width: 200px !important;       /* mobilde küçült */
  }
  #sizes + .pdp-cta{
    max-width: 300px !important;       /* tabloyla aynı */
  }
  #sizes + .pdp-cta .btn{
    padding: 4px 4px !important;
    font-size: 0.68rem !important;
  }
}


@media (max-width: 560px){

  /* DURA sayfasındaki tüm içerik görselleri (hero hariç) */
  #dura-features img,
  #dura-indications img,
  #dura-advantages img,
  #dura-bio img,
  #dura-techniques img,
  #dura-sem img{
    width: 100% !important;
    max-width: 340px !important;   /* biocade hissi: 320-360 arası */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* SEM görselleri biraz daha kompakt dursun */
  #dura-sem img{
    max-width: 320px !important;
  }

  /* Endikasyon görselleri de aynı ölçüde kalsın */
  #dura-indications img{
    max-width: 320px !important;
  }
}

/* ================================
   BIOCADE DURA – SEM (FINAL)
   ================================ */

/* SEM grid */
body.product.biocade-dura #dura-sem .sem-grid{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}

/* SEM figure – hepsi aynı */
body.product.biocade-dura #dura-sem .sem-fig{
  background:#f8fafc;
  padding:12px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* SEM img – BOYUT FARKINI BİTİREN ASIL KURAL */
body.product.biocade-dura #dura-sem .sem-fig img{
  width:100%;
  max-width:100%;
  height:200px;              /* masaüstü */
  object-fit:contain;
  display:block;
}

/* Mobil */
@media (max-width:560px){
  body.product.biocade-dura #dura-sem .sem-fig{
    max-width:250px;
    margin:0 auto;
  }
  body.product.biocade-dura #dura-sem .sem-fig img{
    height:180px;            /* hepsi eşit */
  }
}


@media (max-width: 768px){
  .thumbs img{
    height: 52px;
    width: auto;
    object-fit: contain;
  }
}



  

@media (max-width: 768px){
  #dura-bio ul.bullets,
  #dura-bio ul.bullets li{
    font-size: 10px !important;
    line-height: 1.45 !important;
  }
}
@media (max-width: 768px){
  #dura-bio ul.bullets li{ font-size:10px !important; line-height:1.45 !important; }
}


/* SADECE dura_produkt10.png (tablet+mobil) */
@media (max-width: 900px){
  body.product.biocade-dura #dura-indications img[src*="dura_produkt10"]{
    height: 180px !important;     /* azıcık büyüttük */
    object-fit: contain !important;
  }
}

/* Mobil: biraz daha kompakt ama yine büyük */
@media (max-width: 560px){
  body.product.biocade-dura #dura-indications img[src*="dura_produkt10"]{
    height: 175px !important;
  }
}

  /* =========================
   DURA + BIOCADE – Mobil font seti
   ========================= */
@media (max-width: 900px){

  /* 1) Bölüm başlıkları (H2) */
  body.product.biocade .section-title,
  body.product.biocade-dura .section-title{
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* 2) Alt başlıklar (H3 / sub-title) */
  body.product.biocade .sub-title,
  body.product.biocade-dura .sub-title,
  body.product.biocade .pdp-section h3,
  body.product.biocade-dura .pdp-section h3{
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  /* 3) Paragraflar + madde işaretleri (metin) */
  body.product.biocade .pdp-section p,
  body.product.biocade .pdp-section li,
  body.product.biocade .hero-desc p,
  body.product.biocade-dura .pdp-section p,
  body.product.biocade-dura .pdp-section li,
  body.product.biocade-dura .hero-desc p{
    font-size: 10px !important;
    line-height: 1.45 !important;
  }
}

  /* 3) Endikasyon alt başlıkları: kesilmesin, alt satıra insin */
  body.product.biocade .sub-title,
  body.product.biocade #biocade-indications h3,
  body.product.biocade #biocade-indications .sub-title{
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}


/* UX – Endikasyon okunurluk iyileştirmesi */
body.product.biocade-dura #dura-indications ul.bullets li,
body.product.biocade #biocade-indications ul.bullets li{
  margin-bottom: 6px;      /* nefes */
}

body.product.biocade-dura #dura-indications .ind-row,
body.product.biocade #biocade-indications .ind-row{
  margin-bottom: 18px;     /* grup ayrımı */
}

/* Mobilde biraz daha rahat */
@media (max-width: 768px){
  body.product.biocade-dura #dura-indications ul.bullets li,
  body.product.biocade #biocade-indications ul.bullets li{
    margin-bottom: 8px;
  }
}


/* UX – Başlık/İçerik nefesi (Biocade + Dura) */
body.product.biocade .pdp-section .section-title,
body.product.biocade-dura .pdp-section .section-title{
  margin-bottom: 10px;
}

body.product.biocade .pdp-section .sub-title,
body.product.biocade-dura .pdp-section .sub-title,
body.product.biocade .pdp-section h3,
body.product.biocade-dura .pdp-section h3{
  margin: 12px 0 8px;
}

/* Mobilde biraz daha rahat */
@media (max-width: 768px){
  body.product.biocade .pdp-section,
  body.product.biocade-dura .pdp-section{
    padding-top: 2px;     /* aşırı değil, sadece ferahlık */
  }

  body.product.biocade .pdp-section .section-title,
  body.product.biocade-dura .pdp-section .section-title{
    margin-bottom: 12px;
  }
}

/* UX – Mobil parmak konforu */
@media (max-width: 768px){

  /* Butonlar biraz daha rahat */
  body.product .pdp-cta .btn{
    padding: 10px 14px;
  }

  /* Linkli başlıklar ve tıklanabilir metinler */
  body.product a{
    padding-top: 2px;
    padding-bottom: 2px;
  }

  /* Liste içinde dokunma arası */
  body.product ul.bullets li{
    padding-top: 2px;
    padding-bottom: 2px;
  }
}




/* Hakkımızda Hero */
.about-hero{
  position: relative;
  min-height: 40vh;           /* ana sayfadan kısa */
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 4vw, 56px);
  color: #fff;
  overflow: hidden;
}

/* Arka plan görseli */
.about-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/about/about-hero.jpg") center/cover no-repeat;

  filter: blur(2px);
  transform: scale(1.05);     /* blur kenarlarını gizler */
  z-index: 0;
}

/* Koyu overlay */
.about-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11,18,32,.16); /* %25–30 ideal */
  z-index: 1;
}

/* Metin katmanı */
.about-hero .content{
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.about-hero h1{
  margin: 0 0 6px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
}

.about-hero .subtitle{
  font-size: clamp(16px, 2.2vw, 20px);
  opacity: .95;
}

/* Mobil küçük ayar */
@media (max-width: 560px){
  .about-hero{ min-height: 38vh; padding: 22px; }
  .about-hero::before{ filter: blur(2.5px); }
  .about-hero::after{ background: rgba(11,18,32,.32); }
}

.about-hero{ margin-bottom: 14px; }

/* HERO boyut + odak ayarı */
.about-hero{
  min-height: 38vh;           /* masaüstünde daha makul */
}

.about-hero::before{
  background-position: center 70% !important; /* alt kısmı daha çok göster */
}

/* Başlık boyutunu küçült */
.about-hero h1{
  font-size: clamp(22px, 3vw, 32px) !important;
  margin: 0 0 6px !important;
}

/* Mobilde daha da kısa + başlık daha küçük */
@media (max-width: 640px){
  .about-hero{ min-height: 26vh !important; padding: 18px !important; }
  .about-hero h1{ font-size: 22px !important; }
  .about-hero .subtitle{ font-size: 14.5px !important; }
}

/* === ABOUT HERO: yükseklik + font final ayar === */

/* 1) Hero yüksekliğini düşür (desktop + mobile) */
.about-hero{
  min-height: clamp(220px, 32vh, 340px) !important;  /* daha kısa, her ekrana uyar */
  padding: clamp(18px, 3vw, 44px) !important;
}

/* 2) Masaüstünde alt kısmı biraz daha göster (mobil hissine yaklaşır) */
.about-hero::before{
  background-position: center 68% !important;
}

/* 3) Başlık ve sloganı küçült */
.about-hero h1{
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.12 !important;
  margin: 0 0 6px !important;
}

.about-hero .subtitle{
  font-size: clamp(14px, 1.6vw, 18px) !important;
  line-height: 1.35 !important;
}

/* 4) Mobil: daha da kısa ve daha küçük font */
@media (max-width: 640px){
  .about-hero{
    min-height: clamp(180px, 24vh, 240px) !important;
    padding: 16px !important;
  }
  .about-hero::before{
    background-position: center 58% !important;
  }
  .about-hero h1{ font-size: 16px !important; }
  .about-hero .subtitle{ font-size: 12px !important; }
}


/* === ABOUT HERO FINAL OVERRIDE (EN ALTA) === */

/* HERO yüksekliği: min-height yerine height -> kesin kısalır */
body .about-hero{
  height: clamp(200px, 28vh, 320px) !important;
  min-height: 0 !important;
  padding: clamp(16px, 3vw, 40px) !important;
}

/* Görsel odağı: altı daha görünsün */
body .about-hero::before{
  background-position: center 70% !important;
}

/* Başlık + slogan: kesin küçülür (yüksek seçicilik) */
body .about-hero .content h1{
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.12 !important;
  margin: 0 0 6px !important;
}

body .about-hero .content .subtitle{
  font-size: clamp(13.5px, 1.4vw, 17px) !important;
  line-height: 1.35 !important;
}

@media (max-width: 768px){
  body .about-hero{
    height: clamp(140px, 22vh, 240px) !important;
    padding: 14px 16px !important;
  }
  body .about-hero::before{
    background-position: center 60% !important;
  }
  body .about-hero .content h1{ font-size: 15px !important; }
  body .about-hero .content .subtitle{ font-size: 12.5px !important; }
}

@media (max-width: 768px){
  body .about-hero .content .subtitle{
    font-size: 10.5px !important;      /* 12–13 arası ideal */
    line-height: 1.12 !important;
    letter-spacing: -0.2px !important; /* çok hafif daraltır */
  }
}

/* ABOUT - cards */
#page-about .about-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 6px;
}

#page-about .about-card{
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: rgba(248,250,252,.7);
}

#page-about .about-card h3{
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.2;
}

#page-about .about-card p{
  margin: 0;
}

#page-about .about-list{
  margin-top: 6px;
}

#page-about .about-note{
  margin-top: 10px;
}

@media (max-width: 900px){
  #page-about .about-cards{ grid-template-columns: 1fr; }
}


/* ABOUT süsleme (metne dokunmadan) */
#page-about .about-page{
  padding-top: 22px;
}

#page-about .about-block{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 16px 16px 12px;
  background: rgba(248,250,252,.65);
}

#page-about .about-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

#page-about .about-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,.70);
}

#page-about .about-card h2{
  margin-top: 0;
}

#page-about .about-list{
  margin: 8px 0 0;
  padding-left: 18px;
}

@media (max-width: 900px){
  #page-about .about-grid-2{
    grid-template-columns: 1fr;
  }
}

#page-about .about-card h2,
#page-about .about-block h1{
  position: relative;
  padding-left: 12px;
}

#page-about .about-card h2::before,
#page-about .about-block h1::before{
  content:"";
  position:absolute;
  left:0; top:0.25em;
  width:4px; height:1.1em;
  border-radius:999px;
  background: rgba(13, 148, 136, .9); /* teal hissi (PROTIP tonuna yakın) */
}

@media (hover:hover){
  #page-about .about-card{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  #page-about .about-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
  }
}
#page-about .about-page{
  max-width: 1060px;   /* container genişse, içerik bu kadarla sınırlansın */
  margin: 0 auto;
}
#page-about .about-list{
  list-style: none;
  padding-left: 0;
}
#page-about .about-list li{
  position: relative;
  padding-left: 18px;
}
#page-about .about-list li::before{
  content:"";
  position:absolute;
  left:0; top:0.55em;
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(13, 148, 136, .55);
}

/* ABOUT - ikonlar (CSS ile, güvenli) */
#page-about .about-card h2{
  position: relative;
  padding-left: 34px;
}

#page-about .about-card h2::before{
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 20px;
  line-height: 1;
}

#page-about .container{
  max-width: 1100px;   /* varsa 960 / 1000 ise büyüt */
}
.about-hero{
  position: relative;
}


#page-about .about-card > h2:first-child{
  font-size: 18px;
  opacity: .85;
}


/* ABOUT: boşlukları toparla */
#page-about .about-page{
  padding-top: 18px;
  padding-bottom: 26px;
}

/* Kartlar biraz daha sıkı */
#page-about .about-block{
  padding: 14px 14px 12px;
}

#page-about .about-grid-2{
  gap: 12px;
  margin-top: 12px;
}

#page-about .about-card{
  padding: 12px 12px 10px;
}

/* CTA */
#page-about .about-cta{
  margin-top: 14px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: rgba(248,250,252,.65);
  padding: 14px;
}

#page-about .about-cta__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

#page-about .about-cta__text{
  font-size: 14px;
  opacity: .9;
}

/* Mobil: daha kompakt */
@media (max-width: 768px){
  #page-about .about-page{
    padding-top: 14px;
    padding-bottom: 18px;
  }
  #page-about .about-grid-2{
    gap: 10px;
    margin-top: 10px;
  }
  #page-about .about-cta__inner{
    flex-direction: column;
    align-items: flex-start;
  }
}
#page-about .about-cta__inner{
  display:flex;
  justify-content:center;
}


/* ABOUT CTA — mobilde ortala + butonu küçült */
#page-about .about-cta__inner{
  display:flex;
  justify-content:center;
}

@media (max-width: 768px){
  #page-about .about-cta__inner{
    justify-content:center !important;
  }

  #page-about .about-cta .btn,
  #page-about .about-cta a.btn{
    font-size: 13px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
  }
}
@media (max-width: 768px){
  #page-about .about-cta__inner{ align-items:center !important; }
}
/* ABOUT — mobil tipografi küçültme */
@media (max-width: 768px){
  #page-about .about-page p,
  #page-about .about-page li{
    font-size: 10px !important;
    line-height: 1.18 !important;
  }

  #page-about .about-page h2{
    font-size: 12px !important;
    margin: 12px 0 6px !important;
  }

  #page-about .about-block{
    padding: 12px !important;
  }

  #page-about .about-card{
    padding: 11px !important;
  }
}
@media (max-width: 768px){
  #page-about .about-cta .btn,
  #page-about .about-cta a.btn{
    font-size: 9px !important;
    padding: 6px 11px !important;
  }
}

<style id="about-en-justify-fix">
@media (max-width:768px){
  /* EN sayfada about-block yoksa: about-page içindeki “genel” paragraflar */
  main#page-about section.container.py-6.about-page > p,
  main#page-about section.container.py-6.about-page .about-block p{
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  /* Kart metinleri yine left kalsın */
  main#page-about section.container.py-6.about-page .about-card p,
  main#page-about section.container.py-6.about-page .about-card li{
    text-align: left !important;
    hyphens: none !important;
    overflow-wrap: normal !important;
  }
}
</style>



/* =========================
   HOME HERO V2 (FINAL)
   ========================= */

.hero.hero-v2{
  position:relative;
  overflow:hidden;
  min-height:50vh;
  display:flex;
  align-items:center;
  isolation:isolate;
}
@media (max-width:640px){
  .hero.hero-v2{ min-height:44vh; }
}

/* Background (WebP öncelik + JPEG fallback) */
.hero.hero-v2 .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:right 50%;

  background-image: image-set(
    url("/assets/img/hero/hero-1920.webp") type("image/webp"),
    url("/assets/img/hero/hero-1920.jpg")  type("image/jpeg")
  );
}

/* Büyük ekran */
@media (min-width:1400px){
  .hero.hero-v2 .hero-bg{
    background-image: image-set(
      url("/assets/img/hero/hero-2560.webp") type("image/webp"),
      url("/assets/img/hero/hero-2560.jpg")  type("image/jpeg")
    );
  }
}

/* Mobil */
@media (max-width:640px){
  .hero.hero-v2 .hero-bg{
    background-image: image-set(
      url("/assets/img/hero/hero-960.webp") type("image/webp"),
      url("/assets/img/hero/hero-960.jpg")  type("image/jpeg")
    );
    background-position:center 35%;
  }
}

/* Overlay */
.hero.hero-v2::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: rgba(0,0,0,.33);
  pointer-events:none;
}

/* Content */
.hero.hero-v2 .hero-inner{
  position:relative;
  z-index:2;
  padding: clamp(56px, 10vh, 110px) 0;
}

.hero.hero-v2 .hero-mark{
  width: clamp(140px, 18vw, 260px);
  height:auto;
  margin:0 0 14px;
  display:block;
}

.hero.hero-v2 .hero-title{
  color:#fff;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.12;
  margin:0 0 10px;
  font-weight:600;
}

.hero.hero-v2 .hero-sub{
  color: rgba(255,255,255,.86);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height:1.45;
  margin:0;
}
.hero.hero-v2 .hero-bg{
  background-position: 65% center; /* 50% → 65% */
}
.hero.hero-v2::before{
  background: radial-gradient(
    120% 80% at 50% 45%,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.35) 70%
  );
}
@media (max-width:640px){
  .hero.hero-v2{
    min-height:38vh;   /* 44vh → 38vh */
  }

  .hero.hero-v2 .hero-inner{
    padding-top: 72px;
    padding-bottom: 56px;
  }
}

/* ===== HERO V2 FIX (MOBIL + DESKTOP) ===== */

/* 2A) Hero’nun üst boşluğu / gereksiz margin varsa sıfırla */
#anasayfa.hero.hero-v2{
  margin-top: 0 !important;
}

/* 2B) Mobilde kesin kısalsın */
@media (max-width: 640px){
  #anasayfa.hero.hero-v2{
    min-height: 36vh !important;     /* 44→36 daha net kısalır */
  }
  #anasayfa.hero.hero-v2 .hero-inner{
    padding: 54px 0 46px !important; /* içerik daha kompakt */
  }
}
/* 3A) Masaüstü: alt kısmı daha çok göster (kırpmayı azalt) */
#anasayfa.hero.hero-v2 .hero-bg{
  background-position: 60% 62% !important; /* X: sağa, Y: aşağı */
}

/* 3B) Masaüstünde gereksiz aşırı yükseklik olmasın */
#anasayfa.hero.hero-v2{
  min-height: clamp(340px, 46vh, 520px) !important; /* altı kaybetme azalır */
}
#anasayfa.hero.hero-v2 .hero-inner{
  padding: clamp(54px, 8vh, 92px) 0 !important;      /* çok padding = çok crop */
}

/* 3C) Mobil: odak biraz daha aşağı */
@media (max-width: 640px){
  #anasayfa.hero.hero-v2 .hero-bg{
    background-position: 50% 60% !important;
  }
}

/* === OLD HERO: KISALTMA DENEMESİ (kolay geri dönüş) === */

/* Masaüstü */
#anasayfa.hero-old{
  min-height: clamp(280px, 40vh, 420px);  /* mümkün oldukça kısa */
}
#anasayfa.hero-old .hero-inner{
  padding: 40px 0 28px;                  /* üst-alt boşluğu azalt */
}

/* Mobil */
@media (max-width:640px){
  #anasayfa.hero-old{
    min-height: 34vh;
  }
  #anasayfa.hero-old .hero-inner{
    padding: 34px 0 22px;
  }
}
/* === OLD HERO: 1 TIK DAHA KISA (OVERRIDE) === */

/* Desktop */
#anasayfa.hero-old{
  min-height: clamp(260px, 36vh, 380px) !important;
}
#anasayfa.hero-old .hero-inner{
  padding: 34px 0 22px !important;
}

/* Mobile */
@media (max-width: 640px){
  #anasayfa.hero-old{
    min-height: 30vh !important;
  }
  #anasayfa.hero-old .hero-inner{
    padding: 28px 0 18px !important;
  }
}
/* === OLD HERO – MOBİL SON İNCE AYAR === */
@media (max-width: 640px){
  #anasayfa.hero-old{
    min-height: 26vh !important;   /* 30 → 26 : gerçekten hissedilir ama riskli değil */
  }
  #anasayfa.hero-old .hero-inner{
    padding: 22px 0 16px !important;
  }
}
/* === HOME HERO: MASAÜSTÜ 1 TIK DAHA KISA === */
@media (min-width: 641px){
  #anasayfa.hero{
    min-height: 38vh !important;              /* bir tık daha kısa */
    background-position: 60% 62% !important;  /* altı biraz daha gösterir */
  }
  #anasayfa.hero .hero-inner{
    padding: 46px 0 34px !important;          /* yazı bloğu daha kompakt */
  }
}
/* === HOME: OLD HERO — MOBİL 1 TIK DAHA KISA === */
@media (max-width: 640px){
  #anasayfa.hero{
    min-height: 24vh !important;        /* bir tık daha kısa */
    background-position: center 55% !important; /* kırpma daha dengeli */
  }
  #anasayfa.hero .hero-inner{
    padding: 18px 0 12px !important;    /* içerik daha kompakt */
  }
}

/* === HERO TEXT SCALE DOWN (OLD HERO) === */

/* Masaüstü */
#anasayfa.hero-old .hero-title{
  font-size: clamp(26px, 3vw, 40px) !important; /* bir tık daha küçük */
  line-height: 1.12;
}

#anasayfa.hero-old .hero-sub{
  font-size: clamp(14px, 1.2vw, 17px) !important;
  line-height: 1.45;
}

/* Mobil */
@media (max-width: 640px){
  #anasayfa.hero-old .hero-title{
    font-size: 22px !important;
    line-height: 1.15;
  }
  #anasayfa.hero-old .hero-sub{
    font-size: 14px !important;
  }
}
/* === HERO OLD: title/sub küçült + mobilde aşağı indir === */

/* MASAÜSTÜ: 1 tık daha küçük */
#anasayfa.hero-old .hero-title{
  font-size: clamp(24px, 2.7vw, 36px) !important;
  line-height: 1.10 !important;
  margin: 0 0 8px !important;
}

#anasayfa.hero-old .hero-sub{
  font-size: clamp(13px, 1.05vw, 16px) !important;
  line-height: 1.42 !important;
}

/* HERO yüksekliği/padding (masaüstü biraz daha kompakt) */
#anasayfa.hero-old{
  min-height: clamp(280px, 34vh, 380px) !important;
}
#anasayfa.hero-old .hero-inner{
  padding: clamp(38px, 6vh, 64px) 0 !important;
}

/* MOBİL: hem küçültsün hem içerik üst sınıra yapışmasın */
@media (max-width: 640px){
  #anasayfa.hero-old{
    min-height: 32vh !important;              /* biraz daha kısa */
  }

  /* içerikleri aşağı indir (header yüksekliği kadar nefes) */
  #anasayfa.hero-old .hero-inner{
    padding: 84px 0 34px !important;          /* ÜST↑, ALT↓ */
  }

  #anasayfa.hero-old .hero-mark{
    width: 150px !important;                  /* logo/işaret biraz küçülsün */
    margin: 0 0 10px !important;
  }

  #anasayfa.hero-old .hero-title{
    font-size: 20px !important;
    line-height: 1.12 !important;
  }

  #anasayfa.hero-old .hero-sub{
    font-size: 13px !important;
  }
}
/* === MOBİL: hero büyümeden içerik biraz aşağı insin === */
@media (max-width: 640px){

  /* Yüksekliği sabitle (min-height değil, net hedef) */
  #anasayfa.hero-old{
    min-height: 26vh !important;     /* senin iyi bulduğun değer */
  }

  /* Padding'i şişirme! küçük tut */
  #anasayfa.hero-old .hero-inner{
    padding: 18px 0 12px !important;
    transform: translateY(10px);     /* içerik aşağı iner, hero büyümez */
  }

  /* İstersen başlıklar biraz küçülsün */
  #anasayfa.hero-old .hero-title{ font-size: 20px !important; }
  #anasayfa.hero-old .hero-sub{ font-size: 13px !important; }
}
/* === HERO OLD: FONT KÜÇÜLTME (desktop + mobil) === */

/* Masaüstü: 1 tık küçült */
#anasayfa.hero-old .hero-title{
  font-size: clamp(22px, 2.2vw, 32px) !important;
  line-height: 1.10 !important;
}
#anasayfa.hero-old .hero-sub{
  font-size: clamp(12.5px, 1vw, 15px) !important;
  line-height: 1.40 !important;
}

/* Mobil: belirgin küçült (büyük görünme sorunu burada) */
@media (max-width: 640px){
  #anasayfa.hero-old .hero-mark{
    width: 120px !important;
    margin-bottom: 8px !important;
  }
  #anasayfa.hero-old .hero-title{
    font-size: 12px !important;
    line-height: 1.12 !important;
    margin-bottom: 6px !important;
  }
  #anasayfa.hero-old .hero-sub{
    font-size: 11.0px !important;
    line-height: 1.35 !important;
  }
}
/* === HERO OLD: hero-mark üst sınırdan uzaklaşsın (yükseklik büyütmeden) === */
@media (max-width: 640px){
  #anasayfa.hero-old .hero-mark{
    margin-top: 14px !important;          /* 8–14 arası deneyebilirsiniz */
    /* alternatif/ek: transform ile de kaydırabilirsiniz */
    /* transform: translateY(8px); */
  }
}
/* MOBİL: hero bloğunu daha dengeli aşağı al (mark tek başına değil) */
@media (max-width: 640px){

  /* 1) Mark için verdiğin margin-top'u iptal et */
  #anasayfa.hero-old .hero-mark{
    margin-top: 0 !important;
  }

  /* 2) Tüm içerik grubunu aşağı kaydır (hero büyümeden) */
  #anasayfa.hero-old .hero-inner{
    transform: translateY(10px) !important;  /* 8–14px arası oynayabilirsin */
  }
}
@media (max-width: 640px){
  #anasayfa.hero-old .hero-title{ font-size: 17px !important; line-height: 1.12 !important; }
  #anasayfa.hero-old .hero-sub{   font-size: 1,5px !important; line-height: 1.35 !important; }
}
/* === HEADER: MOBİLDE DAHA İNCE === */
@media (max-width: 640px){
  .site-header{
    min-height: 56px;          /* varsayılan genelde 64–72px olur */
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .site-header .logo{
    max-height: 32px;          /* logo biraz küçülür */
  }

  .site-header nav a{
    padding: 8px 10px;         /* menü daha kompakt */
  }
}
/* === HEADER: MOBİLDE KÜÇÜLT (TÜM SAYFALAR) === */
@media (max-width: 640px){

  :root{ --header-h: 56px; }                 /* body padding-top bunu kullanıyorsa şart */

  header.site-header,
  .site-header{
    height: var(--header-h) !important;
    min-height: var(--header-h) !important;
  }

  /* Header iç yüksekliği çoğu zaman buradan büyür */
  header.site-header .container,
  .site-header .container{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Logo sizde bu class ile */
  .site-header .logo-img{
    height: 34px !important;                 /* 32–36 arası ideal */
    width: auto !important;
  }

  /* Menü linkleri */
  .site-header nav a{
    padding: 8px 10px !important;
  }

  /* Hamburger varsa */
  .site-header .nav-toggle{
    width: 40px !important;
    height: 40px !important;
  }
}

/* === HEADER: GLASS DARK (TÜM SAYFALAR) === */
:root{ --header-h: 72px; }

header.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 999999;
  height: var(--header-h);
  background: rgba(11,34,51,.38) !important;   /* cam gibi */
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

header.site-header a{
  color:#fff !important;                        /* menü her zaman görünsün */
}

header.site-header.scrolled{
  background: rgba(11,34,51,.88) !important;    /* scroll sonrası daha koyu */
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* içerik header altında başlamalı */
body{ padding-top: var(--header-h); }

/* mobilde header biraz daha kısa */
@media (max-width:640px){
  :root{ --header-h: 56px; }
  header.site-header{ height: var(--header-h); }
  header.site-header .container{ padding-top: 6px !important; padding-bottom: 6px !important; }
  .site-header .logo-img{ height: 34px !important; width:auto !important; }
}



/* === HEADER GLASS DARK (THEME'SIZ KİLİT) === */
:root{ --header-h: 72px; }

/* header her sayfada cam gibi koyu */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 999999;
  background: rgba(11,34,51,.38) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* scroll sonrası opaklaş */
.site-header.scrolled{
  background: rgba(11,34,51,.88) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* menü/linkler her zaman görünür */
.site-header a{
  color:#fff !important;
}
.site-header .nav-toggle span{
  background:#fff !important;
}

/* içerik header altında başlasın (varsa çakışmasın diye !important) */
body{ padding-top: var(--header-h) !important; }

/* mobilde header daha kısa */
@media (max-width: 640px){
  :root{ --header-h: 56px; }
  .site-header .container{ padding-top: 6px !important; padding-bottom: 6px !important; }
  .site-header .logo-img{ height: 34px !important; width:auto !important; }
}


/* === HEADER: default (üstte) + scroll (opak) — KİLİT === */
.site-header{
  background: rgba(11,34,51,.38) !important;   /* üstte: cam gibi koyu */
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

.site-header.scrolled{
  background: rgba(11,34,51,.88) !important;   /* scroll: daha opak koyu */
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* menü görünürlüğü */
.site-header a{ color:#fff !important; }
.site-header .nav-toggle span{ background:#fff !important; }




/* =========================
   HEADER — TEK SİSTEM (KİLİT)
   ========================= */
:root{ --header-h:72px; }

.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 999999;

  background: rgba(11,34,51,.40) !important;  /* üstte cam gibi */
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);

  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

.site-header.scrolled{
  background: rgba(11,34,51,.88) !important;  /* scroll sonrası opak */
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

body{ padding-top: var(--header-h) !important; }

/* menü görünürlüğü */
.site-header a{ color:#fff !important; }
.site-header .nav-toggle span{ background:#fff !important; }

/* Mobil header biraz daha ince */
@media (max-width:640px){
  :root{ --header-h:56px; }
  .site-header .container{ padding-top:6px !important; padding-bottom:6px !important; }
  .site-header .logo-img{ height:34px !important; width:auto !important; }
}
/* === EMERGENCY: HEADER'ı geri getir === */
.site-header{
  position: fixed !important;
  top:0; left:0; right:0;
  z-index: 999999 !important;
  transform: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-header .container{ display:flex !important; }

/* Masaüstünde menü listesi görünsün */
@media (min-width: 993px){
  #nav-list{
    display:flex !important;
    gap:24px;
    list-style:none;
    margin:0;
    padding:0;
  }
}


/* =========================
   HEADER - TEK RENK (KİLİT)
   Tüm sayfalarda sabit koyu gri
   ========================= */
:root{ --header-h:72px; }

.site-header{
  position: fixed !important;
  top:0; left:0; right:0;
  z-index: 999999 !important;

  /* koyu gri / siyaha yakın */
  background: rgba(20, 26, 34, .92) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;

  /* isterseniz cam efekti kapalı kalsın; açmak isterseniz blur ekleriz */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  transition: none !important;
}

/* scrolled / theme sınıfları artık etki etmesin */
.site-header.scrolled,
.site-header.is-scrolled,
.site-header.theme-dark,
.site-header.theme-light,
.site-header.theme-gray-solid,
.site-header.theme-clear,
.site-header.theme-clear-dark,
.site-header.theme-dark-solid{
  background: rgba(20, 26, 34, .92) !important;
  box-shadow: none !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  color:#fff !important;
}

/* linkler ve hamburger her zaman görünür */
.site-header a{ color:#fff !important; }
.site-header .nav-toggle span{ background:#fff !important; }

/* içerik header altında başlasın */
body{ padding-top: var(--header-h) !important; }

/* mobilde header biraz daha ince */
@media (max-width:640px){
  :root{ --header-h:56px; }
  .site-header .container{ padding-top:6px !important; padding-bottom:6px !important; }
  .site-header .logo-img{ height:34px !important; width:auto !important; }
}
/* ===== HEADER FINAL (TEK RENK) — EN ALTA KOYUN ===== */

/* İsterseniz footer'a benzer koyu gri: */
:root{ --header-h:72px; }

.site-header{
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:999999 !important;

  /* 1) Renk: biraz daha açık koyu gri (footer tonuna yakın) */
  background: rgba(31, 41, 55, .78) !important;   /* <-- saydam (cam gibi) */
  /* tamamen opak isterseniz: background:#1f2937 !important; */

  -webkit-backdrop-filter: saturate(1.1) blur(10px) !important;
  backdrop-filter: saturate(1.1) blur(10px) !important;

  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

.site-header a{ color:#fff !important; }
.site-header .nav-toggle span{ background:#fff !important; }

body{ padding-top: var(--header-h) !important; }

/* Mobil header incelsin (kesin) */
@media (max-width:640px){
  :root{ --header-h:56px; }

  .site-header{ min-height:var(--header-h) !important; }
  .site-header .container{ padding:6px 0 !important; }
  .site-header .logo-img{ height:20px !important; width:auto !important; }
}



/* =========================
   HEADER (SABİT, CAM GİBİ, TEK RENK)
   ========================= */
:root{
  --header-h: 72px;
}

/* Header */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999999;
  height: var(--header-h);
  background: rgba(23, 50, 71, .40);  /* footer #0f2231’a yakın, biraz daha açık + saydam */
  -webkit-backdrop-filter: saturate(1.15) blur(10px);
  backdrop-filter: saturate(1.15) blur(10px);
  transition: background .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}

/* Scroll olunca biraz daha opak */
.site-header.scrolled{
  background: rgba(15, 34, 49, .78);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  backdrop-filter: saturate(1.15) blur(12px);
}

/* Menü/link kontrast */
.site-header a{ color:#fff !important; }
.site-header .nav-toggle span{ background:#fff !important; }

/* İçerik header altında başlasın */
body{ padding-top: var(--header-h); }

/* Mobil: header biraz daha kısa */
@media (max-width: 640px){
  :root{ --header-h: 56px; }
  .site-header .container{ padding-top: 6px !important; padding-bottom: 6px !important; }
  .site-header .logo-img{ height: 34px !important; width:auto !important; }
}
/* ===== HEADER GLASS (saydam) ===== */

/* Üstte: daha saydam */
.site-header{
  background: rgba(15, 34, 49, 0.35) !important;  /* #0f2231 tonu ama saydam */
  -webkit-backdrop-filter: saturate(1.15) blur(10px);
  backdrop-filter: saturate(1.15) blur(10px);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* Scroll: daha opak */
.site-header.scrolled{
  background: rgba(15, 34, 49, 0.78) !important;
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  backdrop-filter: saturate(1.15) blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}

/* Menü her zaman görünür olsun */
.site-header a{ color:#fff !important; }
.site-header .nav-toggle span{ background:#fff !important; }



/* HEADER: glass + scroll olunca daha opak */
.site-header{
  background: rgba(15, 34, 49, 0.35) !important;   /* footer #0f2231 tonunun saydam hali */
  -webkit-backdrop-filter: saturate(1.15) blur(10px);
  backdrop-filter: saturate(1.15) blur(10px);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

.site-header.scrolled{
  background: rgba(15, 34, 49, 0.78) !important;
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  backdrop-filter: saturate(1.15) blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}

/* Menü kontrast */
.site-header a{ color:#fff !important; }
.site-header .nav-toggle span{ background:#fff !important; }

/* === HEADER (TEK STİL): cam koyu + scroll'da daha opak === */
:root{ --header-h: 72px; }

.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 999999;

  /* ÜSTTE: saydam koyu (footer tonuna yakın) */
  background: rgba(15, 34, 49, .45) !important;  /* #0f2231 benzeri */
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);

  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* Scroll olunca: daha opak */
.site-header.scrolled{
  background: rgba(15, 34, 49, .70) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}

/* Menü/linkler her zaman beyaz olsun */
.site-header a{ color:#fff !important; }
.site-header .nav-toggle span{ background:#fff !important; }

/* İçerik header altında başlasın */
body{ padding-top: var(--header-h) !important; }

/* Mobil header biraz daha kısa */
@media (max-width: 640px){
  :root{ --header-h: 56px; }
  .site-header .container{ padding-top: 6px !important; padding-bottom: 6px !important; }
  .site-header .logo-img{ height: 34px !important; width:auto !important; }
}


/* HERO ÜSTÜNDE BAŞLANGIÇTA HEADER SAYDAM OLSUN */
.home .site-header,
body.home .site-header,
body.page-home .site-header{
  background: linear-gradient(to bottom, rgba(15,23,42,.55), rgba(15,23,42,.25)) !important;
  color:#fff !important;
  border-bottom-color: transparent !important;
  box-shadow:none !important;
}

/* Menü ikon/çizgiler beyaz kalsın (gerekirse) */
.home .site-header a,
body.home .site-header a,
body.page-home .site-header a{
  color:#fff !important;
}
body.about .site-header,
body.page-about .site-header{
  background: linear-gradient(to bottom, rgba(15,23,42,.55), rgba(15,23,42,.25)) !important;
  color:#fff !important;
  border-bottom-color: transparent !important;
  box-shadow:none !important;
}



/* ===== MOBİL ANA SAYFA: SLOGAN KARTLARI TAŞMA DÜZELTME ===== */

/* 1) Yatay taşmayı tamamen kes */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* 2) Slogan kartlarını taşıyan alan güvenli genişlikte kalsın */
.sx-slogan-wrap{
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

/* 3) Liste: genişlik taşmasını engelle + grid güvenli */
.sx-slogan-list{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;

  /* Sende zaten grid olabilir, burada güvenli hale getiriyoruz */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0,1fr) taşmayı keser */
  gap: 14px;
}

/* 4) Kartların kendisi (li veya içteki kart) taşmasın */
.sx-slogan-list > li,
.sx-slogan-list .sx-slogan-card,
.sx-slogan-list .card{
  width: auto;
  max-width: 100%;
  min-width: 0;          /* çok kritik */
  overflow: hidden;      /* taşan içerik varsa kes */
}

/* 5) Mobilde tek kolon (en temiz UX) */
@media (max-width: 640px){
  .sx-slogan-list{ grid-template-columns: 1fr; }
}

/* =========================================================
   HOME / MOBIL DÜZELTME PAKETİ (SLOGAN + NEDEN KOLAJEN + BOŞLUK)
   - Neden Kolajen kart-grid sabit height sorununu kaldırır
   - Ürünler (home-products) boşsa mobilde gizler (istersen kapatılabilir)
   ========================================================= */
@media (max-width: 768px){

  /* 1) "Neden Kolajen?" kart-grid: sabit height / min-height varsa temizle */
  body.home section.container.py-6 .card-grid{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-content: start !important;   /* grid içeriği yukarı toplansın */
    grid-auto-rows: auto !important;   /* satırlar içerik kadar olsun */
  }

  /* Kartların kendisinde min-height varsa temizle */
  body.home section.container.py-6 .card-grid .card{
    height: auto !important;
    min-height: 0 !important;
  }

  /* 2) Neden Kolajen -> Hakkımızda arası fazla açılıyorsa:
        Bölümün alt boşluğunu biraz kırp */
  body.home section.container.py-6{
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }

  /* 3) Ürünler bölümü şu an boşsa mobilde gereksiz boşluk yapar:
        Boşluğu kökten almak için gizle.
        (ÜRÜNLERİ SONRA EKLEYİNCE bu satırı kapatabilirsiniz.) */
  body.home section.home-products{
    display: none !important;
  }
}
/* HOME / MOBIL: Neden Kolajen -> Hakkımızda boşluğunu kesin azalt */
@media (max-width: 768px){

  /* A) Neden Kolajen bölümünün alt boşluğu */
  body.home section.container.py-6{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* B) Ürünler bölümü: boşken yer kaplamasın (ama ileride dolarsa görünür) */
  body.home section.home-products{
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
  body.home section.home-products:empty{
    display: none !important;
  }

  /* C) Hakkımızda üst boşluğunu da kırp */
  body.home #hakkimizda.about-teaser{
    padding-top: 10px !important;
    margin-top: 0 !important;
  }
}



@media (max-width: 768px){
  body.home .home-products .products-cta{
    padding: 14px 14px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    background: var(--bg, #fff);
    text-align: center;
  }
  body.home .home-products .products-cta h2{
    font-size: 18px;
    line-height: 1.15;
    margin: 0 0 6px;
    letter-spacing: -0.2px;
  }
  body.home .home-products .products-cta p{
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 10px;
  }
  body.home .home-products .products-cta .btn{
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 10px;
  }
}





/* === Language Switch (EN/TR) - non-invasive === */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border:1px solid rgba(148,163,184,.45);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  font-size:12px;
  line-height:1;
  user-select:none;
}

.site-header.theme-gray-solid .lang-switch{
  background:rgba(255,255,255,.75);
  border-color:rgba(148,163,184,.65);
}

.site-header.theme-dark-solid .lang-switch,
.site-header.theme-clear-dark .lang-switch{
  background:rgba(15,23,42,.18);
  border-color:rgba(255,255,255,.25);
}

.lang-switch a{
  text-decoration:none !important;
  padding:6px 10px;
  border-radius:999px;
  color:inherit;
  opacity:.85;
}

.lang-switch a:hover{ opacity:1; }

.lang-switch a.is-active{
  opacity:1;
  background:rgba(20,184,166,.18); /* teal hint */
  border:1px solid rgba(20,184,166,.35);
}

.lang-switch .sep{
  opacity:.35;
  padding:0 2px;
}
/* === Language Switch: fixed top-right, smaller, always visible === */
.site-header{ position:relative; overflow:visible !important; }

.lang-switch{
  position:absolute !important;
  top:12px;
  right:14px;
  z-index:9999 !important;

  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;            /* küçüldü */
  border-radius:999px;

  font-size:11px;             /* küçüldü */
  line-height:1;
}

.lang-switch a{
  padding:4px 8px;            /* küçüldü */
  border-radius:999px;
}

/* Mobil: biraz daha kompakt + görünür */
@media (max-width: 768px){
  .lang-switch{
    top:10px;
    right:10px;
    padding:3px 5px;
    font-size:11px;
  }
  .lang-switch a{ padding:4px 7px; }
}

/* Bazı header yapılarında iç container overflow hidden olabiliyor */
.site-header *{ overflow:visible; }


/* Dil switch genel */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  z-index:9999;
}

.lang-switch a{ padding:4px 8px; border-radius:999px; text-decoration:none !important; }

/* MOBIL: fixed sağ üst */
.lang-switch.is-mobile-fixed{
  position:fixed !important;
  top:10px;
  right:10px;
  z-index:99999 !important;
}

/* Desktop’ta header içine koyunca absolute konum */
@media (min-width: 992px){
  .site-header{ position:relative; overflow:visible !important; }
  .lang-switch{
    position:absolute !important;
    top:26px;
    right:28px;
  }
}

@media (max-width: 991px){

  /* Switch'i daha küçük yap */
  .lang-switch{
    font-size:8.5px !important;
    padding:5px 5px !important;
  }
  .lang-switch a{
    padding:3px 7px !important;
  }

  /* Mobilde fixed kullanıyorsan: hamburger'ı kapatmayacak kadar aşağı */
  .lang-switch.is-mobile-fixed{
    top:50px !important;      /* 42-48 arasıyla oynayabilirsin */
    right:10px !important;
  }
}
@media (max-width: 991px){

  /* TR/EN: küçük ve stabil */
  .lang-switch{
    font-size:9.5px !important;
    padding:2px 5px !important;
    gap:3px !important;
    border-radius:999px !important;
  }
  .lang-switch a{ padding:2px 5px !important; }
  .lang-switch .sep{ padding:0 !important; }

  /* TR/EN fixed konumu: header sağ üstte */
  .lang-switch.is-mobile-fixed{
    top:10px !important;
    right:10px !important;
  }

  /* Hamburger: GERCEK tıklama alanını büyüt */
  .nav-toggle{
    position:fixed !important;
    top:10px !important;
    right:64px !important;          /* TR/EN ile çakışmasın */
    z-index:100000 !important;

    width:44px !important;          /* hit area */
    height:44px !important;         /* hit area */
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:transparent !important;
    border:0 !important;
    padding:0 !important;

    transform:none !important;      /* scale'ı kaldır: hit area zaten büyüdü */
  }

  /* Eğer ikon çizgileri ayrıysa, sadece ikonu hafif büyüt */
  .nav-toggle span,
  .nav-toggle i,
  .nav-toggle svg{
    transform:scale(1.15);
  }
}
@media (max-width: 991px){

  /* Dikey switch: EN üstte, TR altta */
  .lang-switch{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:3px !important;

    padding:3px !important;
    font-size:10px !important;
    border-radius:10px !important;
  }

  .lang-switch .sep{ display:none !important; }

  .lang-switch a{
    padding:3px 6px !important;
    text-align:center !important;
    min-width:34px;
  }

  /* Sıralama: EN üst, TR alt */
  .lang-switch a:nth-of-type(1){ order:2; } /* TR */
  .lang-switch a:nth-of-type(2){ order:1; } /* EN */

  /* Sağ üstte kalsın (fixed kullanıyorsan) */
  .lang-switch.is-mobile-fixed{
    top:10px !important;
    right:10px !important;
  }

  /* Hamburger yanında daha rahat tıklansın diye biraz sola al */
  .nav-toggle{
    right:62px !important;  /* gerekirse 56/70 oynat */
  }
}
/* Mobil menü overlay */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:9998;
}
.nav-overlay.is-show{
  opacity:1;
  pointer-events:auto;
}
/* Menü açıkken scroll kilidi */
body.menu-open{ overflow:hidden; }

/* Overlay */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:9998;
}
body.menu-open .nav-overlay{
  opacity:1;
  pointer-events:auto;
}
/* Mobil menü katman sırası: overlay altta, menü paneli üstte */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index: 9998 !important;
}
.nav-overlay.is-show{
  opacity:1;
  pointer-events:auto;
}

/* Menü paneli overlay'in üstünde olsun */
.nav.is-open{
  position:relative;
  z-index: 9999 !important;
}

/* Dil butonu ve hamburger her şeyin üstünde kalsın */
.lang-switch.is-mobile-fixed{ z-index: 100001 !important; }
.nav-toggle{ z-index: 100002 !important; }
.nav-overlay{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100vw !important;
  height:100vh !important;

  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index: 9998 !important;
}
.nav-overlay.is-show{
  opacity:1;
  pointer-events:auto;
}

/* Panel overlay'in üstünde */
.nav.is-open{ z-index: 9999 !important; position:relative; }





/* Overlay kesinlikle ekranı kaplasın ve tıklanabilir olsun */
.nav-overlay{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;

  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;         /* kapalıyken */
  z-index: 99999 !important;   /* EN ÜST: tıklamayı kesin alsın */
}

.nav-overlay.is-show{
  opacity:1;
  pointer-events:auto;         /* açıkken tıklanır */
}
.nav.is-open{
  position:relative;
  z-index: 100000 !important;
}
body.menu-open{ overflow:hidden; }

.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:9998;
}
body.menu-open .nav-overlay{
  opacity:1;
  pointer-events:auto;
}
.nav.is-open{ position:relative; z-index:9999; }
@media (max-width: 991px){
  /* Varsayılan kapalı */
  #nav-list{ display:none; }

  /* Açıkken mutlaka göster */
  .nav.is-open #nav-list{
    display:block !important;
  }
}
@media (max-width: 991px){
  #nav-list{ display:none; }
  .nav.is-open #nav-list{ display:block !important; }
}





/* Modern ayrik cizgili hamburger */
@media (max-width: 992px){
  .nav-toggle{
    width:44px;
    height:44px;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;                 /* ayrik cizgiler arasi bosluk */
    background:transparent;
    border:0;
    padding:0;
  }

  .nav-toggle span{
    width:26px;              /* daha modern: biraz daha uzun */
    height:2px;
    border-radius:999px;
    background:currentColor; /* header rengiyle uyumlu */
    opacity:.95;
    margin:0 !important;     /* eski margin'i iptal */
  }

  /* Orta cizgiyi hafif kisa yaparsak daha premium durur */
  .nav-toggle span:nth-child(2){
    width:20px;
    opacity:.85;
  }
}
@media (max-width: 992px){
  .nav-toggle:active{
    opacity:.7;
  }
}
/* ===== LANG SWITCH: EN’de kaybolmasın (force visible) ===== */
.site-header .lang-switch{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  position:relative;
  z-index:2005;
}

/* Eğer EN sayfalarda yanlışlıkla gizleyen bir kural varsa bunu ezer */
body.lang-en .site-header .lang-switch{
  display:flex !important;
}

/* Mobilde de görünür olsun */
@media (max-width: 992px){
  .site-header .lang-switch{
    display:flex !important;
  }
}


.site-header .nav .lang-switch{ display:flex !important; }



/* ===== CONTACT — Modern 2 column + cards ===== */
.page.contact #iletisim.container{ padding-top:32px; padding-bottom:44px; }
.page.contact h1{ margin: 0 0 16px; }

.page.contact .contact-layout{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:18px;
  align-items:start;
}

.page.contact .contact-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
  padding:18px;
}

.page.contact .contact-card-title{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:.3px;
}

.page.contact .contact-info-list{
  list-style:none;
  padding:0;
  margin: 0;
}
.page.contact .contact-info-list li{
  padding:10px 0;
  border-top:1px dashed #e5e7eb;
}
.page.contact .contact-info-list li:first-child{
  border-top:0;
  padding-top:0;
}
.page.contact .contact-info-list .label{
  display:block;
  font-weight:700;
  margin-bottom:4px;
}
.page.contact .contact-info-list a{
  color:inherit;
  text-decoration:none;
}
.page.contact .contact-info-list a:hover{ text-decoration:underline; }

.page.contact .contact-kvkk-link{
  margin-top:12px;
  font-size:12.5px;
  color:#64748b;
}
.page.contact .contact-kvkk-link a{ text-decoration:underline; text-underline-offset:2px; }

/* Form grid */
.page.contact .contact-form .form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.page.contact .contact-form .form-full{ grid-column:1/-1; }

.page.contact .contact-form .form-group label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}

.page.contact .contact-form input,
.page.contact .contact-form textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:14px;
}

.page.contact .contact-form input:focus,
.page.contact .contact-form textarea:focus{
  outline:none;
  border-color:#14b8a6;
  box-shadow:0 0 0 4px rgba(20,184,166,.15);
}

.page.contact .form-hint{
  display:block;
  font-size:12px;
  line-height:1.55;
  color:#64748b;
}
.page.contact .form-hint a{ text-decoration:underline; text-underline-offset:2px; }

/* Buttons row (no sticky) */
.page.contact .form-actions{
  grid-column:1/-1;
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:4px;
  position: static;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Responsive */
@media (max-width: 900px){
  .page.contact .contact-layout{ grid-template-columns:1fr; }
  .page.contact .contact-form .form-grid{ grid-template-columns:1fr; }
}
/* ===== CONTACT OVERRIDE (force 2-column cards) ===== */
.page.contact #iletisim.container { padding-top: 28px !important; padding-bottom: 44px !important; }
.page.contact h1 { margin: 0 0 16px !important; }

.page.contact .contact-layout{
  display:grid !important;
  grid-template-columns: 360px 1fr !important;
  gap:18px !important;
  align-items:start !important;
}

.page.contact .contact-card{
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  box-shadow:0 10px 28px rgba(15,23,42,.06) !important;
  padding:18px !important;
}

.page.contact .contact-card-title{
  margin:0 0 10px !important;
  font-size:18px !important;
  letter-spacing:.3px !important;
}

.page.contact .contact-info-list{ list-style:none !important; padding:0 !important; margin:0 !important; }
.page.contact .contact-info-list li{ padding:10px 0 !important; border-top:1px dashed #e5e7eb !important; }
.page.contact .contact-info-list li:first-child{ border-top:0 !important; padding-top:0 !important; }
.page.contact .contact-info-list .label{ display:block !important; font-weight:700 !important; margin-bottom:4px !important; }
.page.contact .contact-info-list a{ color:inherit !important; text-decoration:none !important; }
.page.contact .contact-info-list a:hover{ text-decoration:underline !important; }

.page.contact .contact-kvkk-link{ margin-top:12px !important; font-size:12.5px !important; color:#64748b !important; }
.page.contact .contact-kvkk-link a{ text-decoration:underline !important; text-underline-offset:2px !important; }

/* Form grid */
.page.contact .contact-form .form-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
.page.contact .contact-form .form-full{ grid-column:1/-1 !important; }

.page.contact .contact-form input,
.page.contact .contact-form textarea{
  width:100% !important;
  padding:12px 12px !important;
  border:1px solid #d1d5db !important;
  border-radius:10px !important;
  font-size:14px !important;
}

/* BUTONLAR sticky OLMASIN */
.page.contact .form-actions{
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column:1/-1 !important;
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
}

/* Mobile */
@media (max-width: 900px){
  .page.contact .contact-layout{ grid-template-columns:1fr !important; }
  .page.contact .contact-form .form-grid{ grid-template-columns:1fr !important; }
}
/* ===== CONTACT — Modern 2 column + cards ===== */
.page.contact #iletisim.container{ padding-top:32px; padding-bottom:44px; }
.page.contact h1{ margin: 0 0 16px; }

.page.contact .contact-layout{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:18px;
  align-items:start;
}

.page.contact .contact-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
  padding:18px;
}

.page.contact .contact-card-title{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:.3px;
}

.page.contact .contact-info-list{ list-style:none; padding:0; margin:0; }
.page.contact .contact-info-list li{ padding:10px 0; border-top:1px dashed #e5e7eb; }
.page.contact .contact-info-list li:first-child{ border-top:0; padding-top:0; }
.page.contact .contact-info-list .label{ display:block; font-weight:700; margin-bottom:4px; }
.page.contact .contact-info-list a{ color:inherit; text-decoration:none; }
.page.contact .contact-info-list a:hover{ text-decoration:underline; }

.page.contact .contact-kvkk-link{ margin-top:12px; font-size:12.5px; color:#64748b; }
.page.contact .contact-kvkk-link a{ text-decoration:underline; text-underline-offset:2px; }

/* Alerts */
.page.contact .alert{padding:12px 14px;border-radius:10px;margin:12px 0 16px}
.page.contact .alert-success{background:#ecfdf5;border:1px solid #10b981;color:#065f46}
.page.contact .alert-error{background:#fef2f2;border:1px solid #ef4444;color:#991b1b}

/* Form grid */
.page.contact .contact-form .form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.page.contact .contact-form .form-full{ grid-column:1/-1; }

.page.contact .contact-form .form-group label{ display:block; font-weight:600; margin-bottom:6px; }
.page.contact .contact-form input,
.page.contact .contact-form textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:14px;
}
.page.contact .contact-form input:focus,
.page.contact .contact-form textarea:focus{
  outline:none;
  border-color:#14b8a6;
  box-shadow:0 0 0 4px rgba(20,184,166,.15);
}

.page.contact .form-hint{ display:block; font-size:12px; line-height:1.55; color:#64748b; }
.page.contact .form-hint a{ text-decoration:underline; text-underline-offset:2px; }

.page.contact .form-actions{
  grid-column:1/-1;
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:4px;
}

/* Responsive */
@media (max-width: 900px){
  .page.contact .contact-layout{ grid-template-columns:1fr; }
  .page.contact .contact-form .form-grid{ grid-template-columns:1fr; }
}


/* ===== CONTACT (Mobile polish) ===== */
@media (max-width: 600px){

  /* Genel container boşlukları */
  .page.contact #iletisim.container{
    padding-top: 22px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 34px;
  }

  /* Başlık */
  .page.contact h1{
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 14px;
  }

  /* Kartlar: biraz daha kompakt */
  .page.contact .contact-card{
    padding: 14px;
    border-radius: 14px;
  }

  /* Sol kart başlığı (uzun şirket adı) */
  .page.contact .contact-card-title{
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 10px;
  }

  /* Etiketler */
  .page.contact .contact-info-list .label{
    font-size: 12px;
  }
  .page.contact .contact-info-list li{
    padding: 9px 0;
  }

  /* Form alanları */
  .page.contact .contact-form input,
  .page.contact .contact-form textarea{
    font-size: 15px;
    padding: 11px 12px;
    border-radius: 12px;
  }
  .page.contact .contact-form textarea{
    min-height: 120px;
  }

  /* Hint (KVKK/Privacy) daha okunur */
  .page.contact .form-hint{
    font-size: 12px;
    line-height: 1.5;
  }

  /* Butonlar: tek satıra sığmazsa alt alta düşsün */
  .page.contact .form-actions{
    flex-wrap: wrap;
    gap: 10px;
  }
  .page.contact .form-actions .btn{
    width: 100%;
    justify-content: center;
  }
}
/* ===== CONTACT (Mobile: form üstte, info altta + daha küçük) ===== */
@media (max-width: 600px){

  /* Grid yerine flex: sırayı kontrol edelim */
  .page.contact .contact-layout{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  /* Sıra: önce form, sonra sol kart */
  .page.contact .contact-form-card{ order:1; }
  .page.contact .contact-info{ order:2; }

  /* Kartlar daha küçük */
  .page.contact .contact-card{
    padding:12px;
    border-radius:12px;
  }

  /* Sol kart başlığı + içerik küçülsün */
  .page.contact .contact-card-title{
    font-size:13.5px;
    line-height:1.25;
    margin:0 0 8px;
  }

  .page.contact .contact-info-list .label{
    font-size:11.5px;
  }
  .page.contact .contact-info-list li{
    padding:8px 0;
  }
  .page.contact .contact-info-list span,
  .page.contact .contact-info-list a{
    font-size:13px;
    line-height:1.35;
  }

  /* Form label + alanlar küçülsün */
  .page.contact .contact-form .form-group label{
    font-size:12.5px;
  }
  .page.contact .contact-form input,
  .page.contact .contact-form textarea{
    font-size:14px;
    padding:10px 11px;
    border-radius:12px;
  }
  .page.contact .contact-form textarea{ min-height:110px; }

  /* KVKK/Privacy hint daha küçük */
  .page.contact .form-hint{
    font-size:11.5px;
    line-height:1.45;
  }
}
/* ===== CONTACT (Mobile: info kartı ekstra kompakt) ===== */
@media (max-width: 600px){

  /* Sol kart: daha ince görünüm */
  .page.contact .contact-info.contact-card{
    padding:10px 12px;
  }

  /* Şirket adı: küçük + 2 satır limit */
  .page.contact .contact-info .contact-card-title{
    font-size:12.5px;
    font-weight:700;
    line-height:1.2;
    margin:0 0 6px;

    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* 2 satır */
    overflow:hidden;
  }

  /* Liste: daha sıkı */
  .page.contact .contact-info-list li{
    padding:6px 0;
  }
  .page.contact .contact-info-list .label{
    font-size:10.8px;
    margin-bottom:2px;
  }
  .page.contact .contact-info-list span,
  .page.contact .contact-info-list a{
    font-size:12.5px;
    line-height:1.3;
  }

  /* KVKK/Privacy link: daha küçük */
  .page.contact .contact-kvkk-link{
    margin-top:8px;
    font-size:11.5px;
  }
}
/* ===== CONTACT: Desktop kartvizit + Mobile gizle ===== */

/* Masaüstü: sol kart çok dar, kartvizit gibi */
@media (min-width: 992px){
  .page.contact .contact-layout{
    display:grid;
    grid-template-columns: 240px 1fr; /* kartvizit genişliği */
    gap:18px;
    align-items:start;
  }
  .page.contact .contact-info.contact-card{
    padding:12px;
    border-radius:14px;
  }
  .page.contact .contact-info .contact-card-title{
    font-size:13px;
    line-height:1.2;
    margin:0 0 8px;
  }
  .page.contact .contact-info-list .label{ font-size:11px; }
  .page.contact .contact-info-list span,
  .page.contact .contact-info-list a{ font-size:12.5px; line-height:1.3; }
  .page.contact .contact-info-list li{ padding:7px 0; }
  .page.contact .contact-kvkk-link{ margin-top:8px; font-size:12px; }
}

/* Mobil: sol kartı gizle (footer zaten tekrar ediyor) */
@media (max-width: 600px){
  .page.contact .contact-info{ display:none !important; }
}
/* =========================================================
   CONTACT PAGE — Desktop: small business-card / Mobile: no card
   (safe scoped)
   ========================================================= */

/* Sayfa kapsayıcılarını mümkünse contact.php'de bu ID/class ile sarmalıyoruz:
   <main id="page-contact"> ... </main>
   Eğer zaten var ise aynen kullanır. Yoksa body.contact gibi mevcut bir sınıf varsa onu yaz.
*/
#page-contact .contact-layout{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

/* ===== LEFT "BUSINESS CARD" (Desktop) ===== */
#page-contact .contact-card{
  flex:0 0 280px;             /* sabit küçük kolon */
  max-width:280px;
  padding:14px 14px;
  border-radius:14px;
  font-size:12.5px;           /* küçük */
  line-height:1.35;
}

#page-contact .contact-card h3,
#page-contact .contact-card .title{
  font-size:14px;
  line-height:1.25;
  margin:0 0 10px;
  font-weight:700;
}

/* Kartın içindeki "Adres / Telefon / E-posta" gibi başlıklar çok büyüyorsa küçült */
#page-contact .contact-card .label{
  font-size:9px;
  opacity:.75;
  margin-top:10px;
}

/* ===== RIGHT FORM (Desktop) ===== */
#page-contact .contact-form{
  flex:1 1 auto;
  min-width:0;
}

/* ===== MOBILE RULES ===== */
@media (max-width: 768px){

  /* kartvizit tamamen kalksın */
  #page-contact .contact-card{ display:none !important; }

  /* form tek kolon ve biraz "dar" (kenarlardan içeri) */
  #page-contact .


/* EN PRODUCTS — SAFE SCOPE (main only). Rollback: delete block */
body.lang-en.product main{
  overflow-x: clip !important;   /* hidden yerine clip daha temiz */
}

/* main içindeki her şey viewport’u geçmesin */
body.lang-en.product main *{
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Görseller taşma yapmasın */
body.lang-en.product main img,
body.lang-en.product main svg,
body.lang-en.product main video{
  max-width: 100% !important;
  height: auto !important;
}

/* =========================================================
   EN only — biocade-dura: fix overflow + indications + SEM
   Rollback: delete this whole block.
   ========================================================= */

/* 0) EN dura sayfasında içerik sağa taşmasın */
html[lang="en"] body.product.biocade-dura main{
  overflow-x: hidden !important;
}

/* 1) Indications: INLINE grid-template-columns'i ez (asıl sorun bu) */
html[lang="en"] body.product.biocade-dura #dura-indications .ind-row{
  grid-template-columns: minmax(0,1fr) 320px !important; /* desktop */
}

/* Tablet: sağ kolon biraz küçülsün */
@media (max-width: 900px){
  html[lang="en"] body.product.biocade-dura #dura-indications .ind-row{
    grid-template-columns: minmax(0,1fr) 280px !important;
  }
}

/* Mobil: görsel metnin altına insin (tek kolon) */
@media (max-width: 720px){
  html[lang="en"] body.product.biocade-dura #dura-indications .ind-row{
    grid-template-columns: 1fr !important;
  }

  html[lang="en"] body.product.biocade-dura #dura-indications .ind-right,
  html[lang="en"] body.product.biocade-dura #dura-indications .ind-figure{
    max-width: 360px !important;
    margin: 10px auto 0 !important;
  }
}

/* 2) SEM: mobilde alt alta + dengeli */
@media (max-width: 820px){
  html[lang="en"] body.product.biocade-dura #dura-sem .sem-grid,
  html[lang="en"] body.product.biocade-dura #dura-sem .grid,
  html[lang="en"] body.product.biocade-dura #dura-sem .row,
  html[lang="en"] body.product.biocade-dura #dura-sem .images{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    justify-items: center !important;
  }

  html[lang="en"] body.product.biocade-dura #dura-sem img{
    width: 100% !important;
    max-width: 420px !important;   /* büyükse 280 yap */
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* =========================================================
   EN biocade-dura — kill horizontal scroll
   ========================================================= */

/* 1) Bu sayfada yatay taşmayı kökten kapat (header büyütmez) */
html[lang="en"] body.product.biocade-dura{
  overflow-x: hidden !important;
}

/* 2) En sık taşma sebebi: 100vw / full-bleed bloklar.
   Sadece bu sayfada, sadece main içinde normalize et. */
html[lang="en"] body.product.biocade-dura main [style*="100vw"],
html[lang="en"] body.product.biocade-dura main .full,
html[lang="en"] body.product.biocade-dura main .fullwidth,
html[lang="en"] body.product.biocade-dura main .full-bleed,
html[lang="en"] body.product.biocade-dura main .pdp,
html[lang="en"] body.product.biocade-dura main .pdp-section,
html[lang="en"] body.product.biocade-dura main .pdp-gallery,
html[lang="en"] body.product.biocade-dura main .gallery,
html[lang="en"] body.product.biocade-dura main .slider,
html[lang="en"] body.product.biocade-dura main .carousel,
html[lang="en"] body.product.biocade-dura main .swiper,
html[lang="en"] body.product.biocade-dura main .splide{
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
/* SEM görselleri büyük → mobilde daha küçük sınır */
@media (max-width: 820px){
  html[lang="en"] body.product.biocade-dura #dura-sem img{
    max-width: 260px !important;  /* 320 büyük geldi → 260 */
  }
}
/* =========================================================
   FIX ROOT CAUSE
   EN product pages: contain .pdp like TR
   Rollback: delete this block
   ========================================================= */

/* 1) EN product: pdp artık full-width değil */
html[lang="en"] body.product main .pdp{
  width: 100% !important;
  max-width: 1120px !important;   /* TR’ye yakın */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 2) Güvenli yan padding (mobilde nefes aldırır) */
html[lang="en"] body.product main .pdp{
  padding-left: 16px;
  padding-right: 16px;
}

/* 3) pdp içindeki section’lar tekrar taşmasın */
html[lang="en"] body.product main .pdp-section{
  max-width: 100%;
}
/* =========================================================
   EN product — contain ALL sections + fix thumbs overflow
   Rollback: delete this whole block
   ========================================================= */

/* 1) EN ürün sayfalarında ana içerik genişliği TR gibi olsun
      (.pdp sadece ilk bloktu; .pdp-section'lar dışarıda kalıyordu) */
html[lang="en"] body.product main > section.pdp,
html[lang="en"] body.product main > section.pdp-section{
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* 2) EN ürün sayfalarında yatay taşmayı bastır (içerik) */
html[lang="en"] body.product main{
  overflow-x: hidden !important;
}

/* 3) Küçük görseller (thumbs) taşmasın: satıra sığsın / wrap */
html[lang="en"] body.product main .thumbs{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html[lang="en"] body.product main .thumbs img{
  width: 72px !important;
  max-width: 72px !important;
  height: auto !important;
  display: block !important;
}

/* 4) Galeri sarmalayıcıları da taşma yapmasın */
html[lang="en"] body.product main .pdp-gallery,
html[lang="en"] body.product main .gallery,
html[lang="en"] body.product main .slider,
html[lang="en"] body.product main .carousel{
  max-width: 100% !important;
  overflow: hidden !important;
}
html[lang="en"] body.product main .thumbs img{
  width: 64px !important;     /* 72 -> 56 */
  max-width: 64px !important;
}
html[lang="en"] body.product main .thumbs{
  justify-content: center !important;
}
/* =========================================================
   EN PRODUCT — STOP HORIZONTAL OVERFLOW (desktop+mobile)
   Scope: EN only + main only (header etkilenmez)
   Rollback: delete this whole block.
   ========================================================= */

html[lang="en"] body.product main{
  overflow-x: hidden !important;
}

/* 1) En sık katil: 100vw / full-bleed / negatif margin / slider wrapper */
html[lang="en"] body.product main [style*="100vw"],
html[lang="en"] body.product main .full,
html[lang="en"] body.product main .fullwidth,
html[lang="en"] body.product main .full-bleed,
html[lang="en"] body.product main .pdp,
html[lang="en"] body.product main .pdp-section,
html[lang="en"] body.product main .pdp-gallery,
html[lang="en"] body.product main .gallery,
html[lang="en"] body.product main .slider,
html[lang="en"] body.product main .carousel,
html[lang="en"] body.product main .swiper,
html[lang="en"] body.product main .splide{
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 2) Main içindeki her şey viewport’u aşmasın (özellikle grid/flex children) */
html[lang="en"] body.product main *{
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 3) Görseller taşma yapmasın */
html[lang="en"] body.product main img,
html[lang="en"] body.product main svg,
html[lang="en"] body.product main video{
  max-width: 100% !important;
  height: auto !important;
}

/* 4) Dura: küçük görseller (thumbs) yatay scroll yapmasın */
html[lang="en"] body.product.biocade-dura main .thumbs{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html[lang="en"] body.product.biocade-dura main .thumbs img{
  width: 52px !important;      /* daha da küçültmek istersen 48 */
  max-width: 52px !important;
  height: auto !important;
  display: block !important;
}
/* =========================================================
   OVERRIDE (do not delete old patches)
   EN only — biocade-dura: contain + overflow + sizes + thumbs + section background
   Rollback: delete this whole block.
   ========================================================= */

html[lang="en"] body.product.biocade-dura{
  overflow-x: hidden !important;
}
html[lang="en"] body.product.biocade-dura main{
  overflow-x: hidden !important;
}

/* 1) TR-like boşluk: EN dura’da tüm ana bölümleri container gibi ortala */
html[lang="en"] body.product.biocade-dura main > section,
html[lang="en"] body.product.biocade-dura main > .container{
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* Desktop daha geniş */
@media (min-width: 1024px){
  html[lang="en"] body.product.biocade-dura main > section,
  html[lang="en"] body.product.biocade-dura main > .container{
    max-width: 1200px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* 2) “Metin kutu içinde değil” sorununu düzelt:
   Section boyaması yerine iç wrapper’a kutu görünümü ver */
html[lang="en"] body.product.biocade-dura main > section.pdp-section{
  background: transparent !important;
}

html[lang="en"] body.product.biocade-dura main > section.pdp-section > .container,
html[lang="en"] body.product.biocade-dura main > section.pdp-section > .wrap,
html[lang="en"] body.product.biocade-dura main > section.pdp-section > .inner,
html[lang="en"] body.product.biocade-dura main > section.pdp-section > div:first-child{
  background: var(--bg, #f6f7fb) !important;
  border: 1px solid var(--line, #e5e7eb) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 12px 0 !important;
  box-sizing: border-box !important;
}

/* 3) Ölçüler (sizes) soldan taşıyorsa: kesin ortala + taşmayı kapat */
html[lang="en"] body.product.biocade-dura main .sizes,
html[lang="en"] body.product.biocade-dura main #sizes{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 4) Küçük görseller scroll yapıyor: daha küçük + wrap + güvenli */
html[lang="en"] body.product.biocade-dura main .thumbs{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
html[lang="en"] body.product.biocade-dura main .thumbs img{
  width: 40px !important;      /* sığmıyorsa 36 */
  max-width: 40px !important;
  height: auto !important;
  display: block !important;
}

/* 5) Genel güvenlik: grid/flex çocukları taşma yapmasın */
html[lang="en"] body.product.biocade-dura main *{
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html[lang="en"] body.product.biocade-dura main img,
html[lang="en"] body.product.biocade-dura main svg{
  max-width: 100% !important;
  height: auto !important;
}
/* =========================================================
   OVERRIDE v2 — EN biocade-dura (patch'leri silmeden)
   Amaç: desktop boşluk + taşma fix + sizes/cta + thumbs no-scroll
   Rollback: bu bloğu sil.
   ========================================================= */

html[lang="en"] body.product.biocade-dura,
html[lang="en"] body.product.biocade-dura main{
  overflow-x: hidden !important;
}

/* 1) Desktop TR gibi boşluk: main içindeki ana blokları contain et
   (direct child değil, main içinde nerede olursa olsun) */
html[lang="en"] body.product.biocade-dura main .pdp,
html[lang="en"] body.product.biocade-dura main .pdp-section,
html[lang="en"] body.product.biocade-dura main .container{
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

@media (max-width: 820px){
  html[lang="en"] body.product.biocade-dura main .pdp,
  html[lang="en"] body.product.biocade-dura main .pdp-section,
  html[lang="en"] body.product.biocade-dura main .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 2) “full width/100vw” zorlayan inline blokları nötrle */
html[lang="en"] body.product.biocade-dura main [style*="100vw"],
html[lang="en"] body.product.biocade-dura main .full,
html[lang="en"] body.product.biocade-dura main .fullwidth,
html[lang="en"] body.product.biocade-dura main .full-bleed,
html[lang="en"] body.product.biocade-dura main .slider,
html[lang="en"] body.product.biocade-dura main .carousel,
html[lang="en"] body.product.biocade-dura main .gallery{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 3) Sizes + butonlar: taşma ve hizalama */
html[lang="en"] body.product.biocade-dura main .sizes,
html[lang="en"] body.product.biocade-dura main #sizes{
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html[lang="en"] body.product.biocade-dura main .pdp-cta{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}

html[lang="en"] body.product.biocade-dura main .pdp-cta .btn{
  white-space: nowrap !important;
}

/* 4) Thumbs: scroll yerine GRID ile kesin sığdır (en kritik) */
html[lang="en"] body.product.biocade-dura main .thumbs,
html[lang="en"] body.product.biocade-dura main [class*="thumb"]{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 36px) !important; /* sığmıyorsa 32 */
  justify-content: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html[lang="en"] body.product.biocade-dura main .thumbs img,
html[lang="en"] body.product.biocade-dura main [class*="thumb"] img{
  width: 36px !important;
  max-width: 36px !important;
  height: auto !important;
  display: block !important;
}

/* 5) Genel taşma güvenliği */
html[lang="en"] body.product.biocade-dura main *{
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html[lang="en"] body.product.biocade-dura main img,
html[lang="en"] body.product.biocade-dura main svg{
  max-width: 100% !important;
  height: auto !important;
}
/* =========================================================
   FINAL OVERRIDE — EN product pages: wide side gutters + tidy thumbs
   Affects: EN biocade + EN dura (desktop+mobile)
   Safe: header/footer not affected (main only)
   Rollback: delete this whole block.
   ========================================================= */

/* 1) Sayfanın sağ/solunda geniş boşluk (gutter) */
html[lang="en"] body.product main{
  padding-left: clamp(18px, 5vw, 80px) !important;
  padding-right: clamp(18px, 5vw, 80px) !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* 2) Ana içerik genişliğini sınırla (TR benzeri) */
html[lang="en"] body.product main .container,
html[lang="en"] body.product main .pdp,
html[lang="en"] body.product main .pdp-section{
  max-width: 1200px !important;     /* istersen 1120 yaparız */
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 3) Bazı bölümlerde arka plan section’a yayılıyorsa: genişlik taşımasın */
html[lang="en"] body.product main section{
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 4) Ölçüler (sizes) soldan taşma / hizasızlık */
html[lang="en"] body.product main .sizes,
html[lang="en"] body.product main #sizes{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 5) THUMBS: orantılı, kare, taşma yok (dura) — önceki grid yamalarını ezer */
html[lang="en"] body.product.biocade-dura main .thumbs,
html[lang="en"] body.product.biocade-dura main [class*="thumb"]{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Thumb kutuları kare ve dengeli */
html[lang="en"] body.product.biocade-dura main .thumbs img,
html[lang="en"] body.product.biocade-dura main [class*="thumb"] img{
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  object-fit: contain !important;
  display: block !important;
}
/* =========================================================
   TWEAKS — EN biocade-dura (desktop gutters + thumbs fit + CTA align)
   Rollback: delete this block.
   ========================================================= */

/* A) Desktop’ta da sağ/sol boşluk gelsin (bazı !important kurallarını ezer) */
@media (min-width: 1024px){
  html[lang="en"] body.product.biocade-dura main,
  html[lang="en"] body.product.biocade-dura main.page{
    padding-left: 72px !important;   /* daha geniş istersen 80 */
    padding-right: 72px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* İçeriği ortala ve TR benzeri max genişlik */
  html[lang="en"] body.product.biocade-dura main .container,
  html[lang="en"] body.product.biocade-dura main .pdp,
  html[lang="en"] body.product.biocade-dura main .pdp-section{
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* B) Thumbs: 1 görsel alt satıra düşmesin diye biraz küçült */
html[lang="en"] body.product.biocade-dura main .thumbs img{
  width: 48px !important;     /* 56 -> 52 */
  height: 48px !important;
  max-width: 52px !important;
  object-fit: contain !important;
}

/* C) Ölçüler altındaki butonlar: tabloyla aynı hizaya gelsin (biraz sağa kaydır) */
/* 1) Eğer CTA .sizes içinde ise */
html[lang="en"] body.product.biocade-dura main .sizes .pdp-cta{
  justify-content: flex-start !important;
  margin-left: 12px !important;  /* “biraz” sağa */
}

/* 2) Eğer CTA sizes’tan hemen sonra geliyorsa */
html[lang="en"] body.product.biocade-dura main .sizes + .pdp-cta{
  justify-content: flex-start !important;
  margin-left: 12px !important;
}
#sizes + .pdp-cta .btn{
  white-space: nowrap !important;
  padding: 7px 10px !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
}

/* Mobil: tablo daha küçük + butonlar daha da kompakt */
@media (max-width: 560px){
  #sizes figure img{
    max-width: 200px !important;       /* mobilde küçült */
  }
  #sizes + .pdp-cta{
    max-width: 300px !important;       /* tabloyla aynı */
  }
  #sizes + .pdp-cta .btn{
    padding: 4px 4px !important;
    font-size: 0.68rem !important;
  }
}


/* =========================================================
   DESKTOP GUTTERS — EN product pages (main.page is the wrapper)
   Rollback: delete this block
   ========================================================= */

html[lang="en"] body.product.lang-en main.page{
  /* içerik kenarlara yapışmasın */
  padding-left: clamp(18px, 4vw, 72px) !important;
  padding-right: clamp(18px, 4vw, 72px) !important;

  /* taşma güvenliği */
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Asıl “TR gibi” görünüm: desktop’ta içerik genişliğini sınırla ve ortala */
@media (min-width: 1024px){
  html[lang="en"] body.product.lang-en main.page{
    max-width: 1280px !important;   /* istersen 1200/1120 yaparız */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =========================================================
   EN PRODUCT — VISIBLE GUTTERS (desktop+mobile)
   Make sections contained (TR-like).
   Rollback: delete this block.
   ========================================================= */

html[lang="en"] body.product.lang-en main.page{
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* 1) Asıl etkiyi yapan: içerik bloklarını daralt + ortala */
html[lang="en"] body.product.lang-en main.page .pdp,
html[lang="en"] body.product.lang-en main.page .pdp-section{
  width: 100% !important;
  max-width: 1200px !important;     /* istersen 1120 yaparız */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Mobilde padding daha küçük */
@media (max-width: 820px){
  html[lang="en"] body.product.lang-en main.page .pdp,
  html[lang="en"] body.product.lang-en main.page .pdp-section{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 2) Eğer bazı bloklar 100vw ile zorlanıyorsa (inline veya class), bunu kır */
html[lang="en"] body.product.lang-en main.page [style*="100vw"],
html[lang="en"] body.product.lang-en main.page .full,
html[lang="en"] body.product.lang-en main.page .fullwidth,
html[lang="en"] body.product.lang-en main.page .full-bleed{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}


/* =========================================================
   EN PRODUCT: make main.page behave like TR .container
   Scope: EN only + product pages
   Rollback: delete this block.
   ========================================================= */

html[lang="en"] body.product.lang-en main.page{
  width: min(1120px, 92%) !important;  /* TR ile aynı */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;          /* TR container gibi */
  padding-right: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Desktop’ta biraz daha geniş istersen:
@media (min-width: 1200px){
  html[lang="en"] body.product.lang-en main.page{ width: min(1200px, 92%) !important; }
}



/* =========================================================
   EN product — reduce side gutters on mobile
   Rollback: delete this block.
   ========================================================= */

@media (max-width: 560px){
  html[lang="en"] body.product.lang-en main.container.pdp-scope{
    width: 98% !important;   /* 92% gibi dar ise -> 96% daha geniş */
  }
}
/* =========================================================
   EN product — MOBILE: fix too-wide gutters + thumbs fit
   Rollback: delete this block.
   ========================================================= */

@media (max-width: 560px){

  /* Mobilde en temiz: % ile oynama → 100% + küçük padding */
  html[lang="en"] body.product.lang-en main.container.pdp-scope{
    width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Thumbs kesin sığsın */
  html[lang="en"] body.product.lang-en main.container.pdp-scope .thumbs{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  html[lang="en"] body.product.lang-en main.container.pdp-scope .thumbs img{
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    object-fit: contain !important;
    display: block !important;
  }
}
@media (max-width: 560px){

  /* THUMB KUTUSU (wrapper) — a/button/li/div neyse hepsini yakala */
  html[lang="en"] body.product.lang-en main.container.pdp-scope .thumbs > *{
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Eğer img direkt <a>/<button> içindeyse onları da küçült */
  html[lang="en"] body.product.lang-en main.container.pdp-scope .thumbs a,
  html[lang="en"] body.product.lang-en main.container.pdp-scope .thumbs button{
    width: 36px !important;
    height: 36px !important;
  }

  /* THUMB GÖRSELİ */
  html[lang="en"] body.product.lang-en main.container.pdp-scope .thumbs img{
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    object-fit: contain !important;
    display: block !important;
  }
}
/* ===== EN ONLY: HERO THUMBS (mobile) — wrap + smaller boxes ===== */
@media (max-width: 768px){

  html[lang="en"] body.lang-en.product .hero-thumbs{
    display: flex !important;
    flex-wrap: wrap !important;      /* nowrap'u ezer */
    justify-content: center !important;
    gap: 4px !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  html[lang="en"] body.lang-en.product .hero-thumbs .thumb{
    width: 55px !important;
    height: 55px !important;
    flex: 0 0 55px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang="en"] body.lang-en.product .hero-thumbs .thumb img{
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
}
html[lang="en"] body.lang-en.product .hero-thumbs .thumb img{
  max-width: 50px !important;
  max-height: 50px !important;
}

/* Çok dar ekran güvenliği (opsiyonel) */
@media (max-width: 360px){
  html[lang="en"] body.lang-en.product .hero-thumbs .thumb{
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
  }
  html[lang="en"] body.lang-en.product .hero-thumbs .thumb img{
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }
}
/* NOTE: EN product.php main now uses .container .pdp-scope (working) */


/* ===== EN ONLY: hero subtitle (.pdp-sub) tweaks ===== */

/* 1) EN biocade-dura: biraz küçült (ellipsis yok, wrap serbest) */
html[lang="en"] body.lang-en.product.biocade-dura .pdp-head .pdp-sub{
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

/* 2) EN biocade: ellipsis'i kaldır, alt satıra insin */
html[lang="en"] body.lang-en.product.biocade .pdp-head .pdp-sub{
  font-size: 12px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
  max-width: 52ch !important;  /* satır boyu kontrollü dursun */
}



/* ===== EN ONLY: Home band slogan (TR gibi) — stronger selectors ===== */
html[lang="en"] body.lang-en.product section.product-band.product-band--light > .container{
  text-align: center !important;
}

/* 3 satır slogan */
html[lang="en"] body.lang-en.product section.product-band.product-band--light h2.band-title{
  margin: 10px auto 0 !important;
  max-width: 34ch !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ikinci satır span TR gibi alt satıra insin */
html[lang="en"] body.lang-en.product section.product-band.product-band--light h2.band-title > span{
  display: block !important;
  margin-top: 4px !important;
}

/* alt kısa slogan */
html[lang="en"] body.lang-en.product section.product-band.product-band--light p.band-sub{
  margin: 8px auto 0 !important;
  max-width: 42ch !important;
  font-size: 16px !important;
  line-height: 1.4 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}


html[lang="en"] body.lang-en.product .manufacturer-line{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #64748b;
  font-style: italic;
  white-space: nowrap;
}
html[lang="en"] body.lang-en.product .manufacturer-line{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #64748b;
  font-style: italic;
  white-space: nowrap;
}
@media (max-width: 560px){
  html[lang="en"] body.lang-en.product .manufacturer-line{
    font-size: 12px;
    opacity: .9;
  }
}

/* Manufacturer line – TR */
html[lang="tr"] body.product .manufacturer-line{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.2;
  color: #64748b;
  font-style: italic;
  white-space: nowrap;
}

/* Mobil – TR */
@media (max-width: 560px){
  html[lang="tr"] body.product .manufacturer-line{
    font-size: 12px;
  }
}


/* ===== HOME: Yeni markalarımız — tek, stabil stil ===== */
.home-coming-soon{
  width:100%;
  text-align:center;
  margin:12px 0 16px;
  color:inherit;
}
.home-coming-soon .cs-title{
  font-weight:700;
  font-size:13px;
  margin:0 0 4px;
  font-style:normal;
}
.home-coming-soon .cs-sub{ 
  font-style:italic;
  font-size:12px;
  opacity:.75;
  margin:0 0 8px;
}
.home-coming-soon .cs-items{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:center;
}
.home-coming-soon .cs-item{
  display:flex;
  align-items:center;
  gap:8px;
}
.home-coming-soon .cs-line{
  font-style:normal;
  font-size:14px;
  line-height:1.3;
}
.home-coming-soon .sx-icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.home-coming-soon .sx-icon > svg{
  width:14px !important;
  height:14px !important;
  display:block !important;
  stroke-width:1.6 !important;
}

/* MOBILE TIGHTEN */
@media (max-width:768px){
  .home-coming-soon{ margin:8px 0 12px !important; }
  .home-coming-soon .cs-items{ gap:4px !important; }
  .home-coming-soon .cs-item{ gap:6px !important; }
   /* eğer varsa */
}



/* HOME: Hero altı ürün isimleri – net ama abartısız */
.featured-products{
  margin-top: 10px;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  font-size: 14px;
  line-height: 1.2;
  opacity: .95;
}

.featured-products .fp-sep{ opacity:.45; }

.featured-products strong{ font-weight: 800; }

/* Mobilde alt alta daha düzenli */
@media (max-width: 768px){
  .featured-products{
    flex-direction:column;
    gap:6px;
    font-size: 13px;
  }
  .featured-products .fp-sep{ display:none; }
}


/* =========================
   HOME – Mobile gap fix
   (Neden Kolajen -> Yeni markalarımız boşluğu)
   ========================= */
@media (max-width: 768px){

  /* 1) "Neden Kolajen?" bölümünün alt boşluğunu sıfıra yaklaştır */
  body.home .container.py-6{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 2) Bu bölüm içindeki son karttan sonra ekstra boşluk kalmasın */
  body.home .container.py-6 > *:last-child{
    margin-bottom: 0 !important;
  }

  /* 3) "Yeni markalarımız" bloğunu yukarı yaklaştır */
  body.home .home-coming-soon{
    margin-top: 10px !important;    /* gerekirse 6px yap */
    padding-top: 0 !important;
  }

  /* 4) Satır araları (mobilde fazla görünüyordu) */
  body.home .home-coming-soon .cs-items{
    margin-top: 8px !important;
    gap: 6px !important;
  }
  body.home .home-coming-soon .cs-item{
    gap: 10px !important;
  }

  /* 5) Slogan kartlarını biraz daha “sakin” yap (mobil) */
  body.home .sx-card .sx-title{ font-size: 11px !important; }
  body.home .sx-card .sx-desc{ font-size: 10px !important; opacity: .82 !important; }
}
/* =========================
   HOME – Mobil boşluk KESİN düzeltme
   Slogan kartları -> Hakkımızda / Coming soon
   ========================= */
@media (max-width: 768px){

  /* 1) Hakkımızda section’ının py-6 padding’ini küçült */
  body.home section#hakkimizda.py-6{
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  /* 2) Slogan kartları alt boşluğu */
  body.home .sx-slogan-wrap{
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
  }

  /* 3) Coming soon yukarı yakın dursun */
  body.home .home-coming-soon{
    margin-top: 8px !important;
  }
}
@media (max-width: 768px){
  body.home section#hakkimizda.py-6{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  body.home .sx-slogan-wrap{
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
  }
  body.home .home-coming-soon{
    margin-top: 8px !important;
  }
}


.featured-products{
  margin-top: 10px;
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  font-size: 15px;
  line-height: 1.3;
}

.featured-products strong{
  color:#A6D37A;          /* Biotrics rengi */
  font-weight: 800;
}

.featured-products span{
  color:#0F1720;
  font-weight: 500;
}

/* Mobil: alt alta */
@media (max-width: 768px){
  .featured-products{
    flex-direction:column;
    gap:6px;
    font-size:14px;
  }
}




/* HOME – Mobil slogan kart ikonlarını küçült */
@media (max-width:768px){
  body.home .sx-slogan-wrap .sx-icon{
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }
  body.home .sx-slogan-wrap .sx-icon svg{
    width: 16px !important;
    height: 16px !important;
    display:block !important;
  }
}
@media (max-width:768px){
  
}


/* HOME – Hakkımızda’yı zorla küçült (desktop + mobil) */
body.home section#hakkimizda.about-teaser.container.py-6{
  padding-top: 12px !important;
  padding-bottom: 18px !important;
  margin-top: 8px !important;
}

body.home section#hakkimizda.about-teaser.container.py-6 h2{
  font-size: 10px !important;
  margin: 0 0 8px !important;
  line-height: 1.15 !important;
}

body.home section#hakkimizda.about-teaser.container.py-6 .lead{
  font-size: 8px !important;
  line-height: 1 !important;
  margin: 0 0 10px !important;
}

body.home section#hakkimizda.about-teaser.container.py-6 .btn{
  font-size: 8px !important;
  padding: 8px 14px !important;
}

/* HOME / MOBİL: ikonun bar gibi uzamasını kesin engelle */
@media (max-width: 768px){

  body.home section.sx-slogan-wrap ul.sx-slogan-list > li.sx-card{
    display: flex !important;
    flex-direction: row !important;  /* kritik */
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
  }

  body.home section.sx-slogan-wrap ul.sx-slogan-list > li.sx-card .sx-icon{
    flex: 0 0 26px !important;
    width: 26px !important;
    min-width: 26px !important;      /* kritik */
    max-width: 26px !important;      /* kritik */
    height: 26px !important;

    display: inline-flex !important; /* kritik */
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;           /* bar yapan padding'i kes */
    margin: 0 10px 0 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body.home section.sx-slogan-wrap ul.sx-slogan-list > li.sx-card .sx-icon::before,
  body.home section.sx-slogan-wrap ul.sx-slogan-list > li.sx-card .sx-icon::after{
    content: none !important;
    display: none !important;
  }

  body.home section.sx-slogan-wrap ul.sx-slogan-list > li.sx-card .sx-icon svg{
    width: 15px !important;
    height: 15px !important;
    display: block !important;
  }

  body.home section.sx-slogan-wrap ul.sx-slogan-list > li.sx-card .sx-text{
    flex: 1 1 auto !important;
    min-width: 0 !important;         /* ikonun alta kaymasını da engeller */
  }
}
/* ===== MOBİL: Yatay taşmayı kesin bitir (global + slogan wrap) ===== */
@media (max-width: 768px){

  html, body{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Slogan wrap: 100vw içine zorla */
  section.sx-slogan-wrap{
    width: auto !important;
    max-width: calc(100vw - 24px) !important; /* sağ/sol 12px nefes */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  section.sx-slogan-wrap .sx-slogan-list,
  section.sx-slogan-wrap .sx-card{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* MOBİL: Slogan bölümünün iki yöne taşmasını kesin resetle */
@media (max-width: 768px){

  html, body{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  section.sx-slogan-wrap{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 12px !important;   /* içeri al */
    box-sizing: border-box !important;

    overflow: hidden !important;
  }

  section.sx-slogan-wrap .sx-slogan-list{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  section.sx-slogan-wrap .sx-card{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}
/* MOBİL: ikon–metin arası daha sıkı */
@media (max-width: 768px){
  section.sx-slogan-wrap .sx-card{
    gap: 2px !important;          /* 6-8 yerine daha sıkı */
  }
  section.sx-slogan-wrap .sx-icon,
  section.sx-slogan-wrap .sx-card > div:first-child{
    margin-right: 2px !important; /* 8-10 yerine */
  }
}


FINAL — HOME: Slogan + Neden Kolajen (TEK KAYNAK)
   Renk: #0ea696 (kurumsal)
   ================================ */

/* ===== NEDEN KOLAJEN (desktop + mobil) ===== */
#neden-kolajen .card-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap:16px;
}

#neden-kolajen > h2{
  margin:12px 0 16px;
  font-size:24px;              /* desktop iyi okunur */
  line-height:1.15;
  letter-spacing:-0.25px;
}

#neden-kolajen .card{
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  border-left:4px solid #0ea696;                 /* TEK renk kaynağı */
  box-shadow:0 10px 24px rgba(14,166,150,.10);   /* hafif kurumsal gölge */
  transition: box-shadow .18s ease;
}

#neden-kolajen .card:hover{
  box-shadow:0 14px 30px rgba(14,166,150,.14);
}

#neden-kolajen .card p,
#neden-kolajen .card strong{
  color:#0F1720;
}

#neden-kolajen .card p{
  margin:0;
  line-height:1.4;
  text-align:left;       /* justify yok */
  word-spacing:normal;
}

/* Mobil: Neden Kolajen */
@media (max-width:768px){
  #neden-kolajen .card-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  #neden-kolajen > h2{
    font-size:20px;
    margin:10px 0 12px;
    letter-spacing:-0.2px;
  }

  #neden-kolajen .card{
    padding:12px 14px;
    border-radius:12px;
  }

  #neden-kolajen .card p{
    font-size:13px;
    line-height:1.4;
  }

  #neden-kolajen .card strong{
    font-size:13.5px;
  }
}

/* ===== HOME: SLOGAN kartları (kurumsal görünüm) ===== */
body.home section.sx-slogan-wrap .sx-card{
  border-left:4px solid #0ea696 !important;  /* tek renk */
  box-shadow:0 10px 24px rgba(0,0,0,.06) !important;
  border-radius:16px !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

@media (min-width:769px){
  body.home section.sx-slogan-wrap .sx-card:hover{
    transform: translateY(-3px) !important;
    box-shadow:0 16px 36px rgba(0,0,0,.10) !important;
  }

  body.home section.sx-slogan-wrap .sx-title{
    font-size:18px !important;
    letter-spacing:-0.2px !important;
  }

  body.home section.sx-slogan-wrap .sx-desc{
    font-size:14px !important;
    line-height:1.45 !important;
  }
}




  section#neden-kolajen.container.py-6 .card-grid .card p{
    font-size: 10px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }

  section#neden-kolajen.container.py-6 .card-grid .card p strong{
    font-size: 10px !important;
  }
}



/* FINAL OVERRIDE — mobile Why/Neden Kolajen h2 */
@media (max-width: 768px){
  html body #neden-kolajen > h2{
    font-size: 12px !important;
    line-height: 1.15 !important;
  }
}


/* =========================
   PDP – SIZES (Desktop only, safe)
========================= */
@media (min-width: 992px){
  #sizes{
    width: 100%;
  }

  /* Sola yapışmayı bitir: header + görseli ortala */
  #sizes .block-header,
  #sizes figure{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
  }

  /* Görseli tam doldur */
  #sizes figure img{
    display:block;
    width:100%;
    height:auto;
  }
}


/* =========================
   PDP – CTA ALIGN FIX (Desktop only)
========================= */
@media (min-width: 992px){
  .pdp-cta{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
  }
}



/* =========================
   LARGE SCREEN (1600px+) TYPOGRAPHY
   ========================= */
@media (min-width: 1600px){

  /* Genel metin */
  body{
    font-size: 17px;
    line-height: 1.65;
  }

  /* Başlıklar */
  .section-title{
    font-size: 28px;
  }

  /* Sık kullanılan metinler */
  p,
  .prod-blurb,
  .bullets li,
  .card-sub{
    font-size: 17px;
    line-height: 1.7;
  }

  /* Footer (büyük ekranlarda okunur olsun) */
  footer.site-footer .brand-name{
    font-size: 15px;
    line-height: 1.2;
  }
  footer.site-footer .footer-address,
  footer.site-footer a.contact-link{
    font-size: 13.5px;
    line-height: 1.4;
  }
  footer.site-footer .footer-bottom small{
    font-size: 12px;
    line-height: 1.4;
  }
}