/* ============================================================
   DS Klima — Doğal Serinlik
   Ana Stil Dosyası
   ============================================================ */

/* Arial system font - Google Fonts removed */

:root {
  /* Renk paleti */
  --koyu-yesil: #1A2D5A;
  --koyu-yesil-2: #1E3A6E;
  --zemin: #F4F6FB;
  --zemin-2: #EBF0FA;
  --vurgu-yesil: #D42B1E;
  --vurgu-yesil-acik: #E84A3D;
  --sicak-vurgu: #1E5DB0;
  --beyaz: #FFFFFF;
  --metin: #151E35;
  --metin-soluk: #4A5680;
  --cizgi: #D8E0F0;

  /* Dikkat cekici vurgu (kampanya, rozet, glow) */
  --vurgu-amber: #FF7A1A;
  --vurgu-amber-2: #FFB020;

  --font-baslik: Arial, Helvetica, sans-serif;
  --font-govde: Arial, Helvetica, sans-serif;

  --radius: 14px;
  --golge: 0 10px 30px -12px rgba(26, 45, 90, 0.20);
  --gecis: all 0.25s ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-govde);
  color: var(--metin);
  background: var(--zemin);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--koyu-yesil);
}

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.buton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: var(--gecis);
  white-space: nowrap;
}

.buton-birincil {
  background: var(--vurgu-yesil);
  color: var(--beyaz);
  box-shadow: 0 8px 22px -6px rgba(212, 43, 30, 0.55);
}
.buton-birincil:hover { background: var(--vurgu-yesil-acik); transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(212, 43, 30, 0.7); }

.buton-ikincil {
  background: transparent;
  border-color: var(--koyu-yesil);
  color: var(--koyu-yesil);
}
.buton-ikincil:hover { background: var(--koyu-yesil); color: var(--beyaz); }

.buton-whatsapp {
  background: #25D366;
  color: var(--beyaz);
  box-shadow: 0 8px 22px -6px rgba(37, 211, 102, 0.55);
}
.buton-whatsapp:hover { background: #1DA851; transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(37, 211, 102, 0.7); }

.buton-kucuk { padding: 9px 18px; font-size: 13px; }

/* ---------- Üst Bilgi Şeridi ---------- */
.ust-serit {
  background: var(--koyu-yesil);
  color: rgba(255,255,255,0.85);
  font-size: 13.5px;
}
.ust-serit .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.ust-serit-iletisim { display: flex; gap: 20px; flex-wrap: wrap; }
.ust-serit-iletisim a { display: inline-flex; align-items: center; gap: 6px; }
.ust-serit-iletisim a:hover { color: var(--vurgu-yesil-acik); }
.ust-serit-sosyal { display: flex; gap: 12px; }

/* ---------- Header / Navigasyon ---------- */
header.site-header {
  background: rgba(244, 250, 247, 0.92);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--cizgi);
}
.nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.logo {
  display: flex;
  flex-direction: column;
  font-family: var(--font-baslik);
}
.logo-img { height: 52px; width: auto; display: block; }
.logo .logo-ad {
  font-size: 26px;
  font-weight: 700;
  color: var(--koyu-yesil);
  letter-spacing: -0.5px;
}
.logo .logo-slogan {
  font-size: 12px;
  font-weight: 500;
  color: var(--vurgu-yesil);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--font-govde);
}
nav.menu { display: flex; gap: 32px; align-items: center; }
nav.menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 15px;
  color: var(--metin);
  position: relative;
  padding: 6px 0;
}
nav.menu a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--vurgu-yesil);
  transition: var(--gecis);
}
nav.menu a:hover::after, nav.menu a.aktif::after { width: 100%; }
nav.menu a.aktif { color: var(--vurgu-yesil); }

/* Serinleten Konular - Hizmetler alt menusu */
nav.menu .nav-dropdown { position: relative; }
nav.menu .nav-submenu { display: none; position: absolute; top: 100%; left: 0; margin-top: 0; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px; min-width: 210px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); z-index: 50; }
nav.menu .nav-submenu a { padding: 8px 10px; white-space: nowrap; width: 100%; color: var(--metin) !important; }
nav.menu .nav-submenu a::after { display: none; }
nav.menu .nav-dropdown:hover .nav-submenu, nav.menu .nav-dropdown:focus-within .nav-submenu { display: block; }
.menu-mobil-buton { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-mobil-buton svg { width: 26px; height: 26px; color: var(--koyu-yesil); }

.header-aksiyon { display: flex; align-items: center; gap: 14px; }

.ara-buton { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 8px; }
.ara-buton svg { width: 22px; height: 22px; color: var(--koyu-yesil); transition: var(--gecis); }
.ara-buton:hover svg { color: var(--vurgu-yesil); }
.ara-kutu { display: none; position: absolute; top: 100%; right: 0; background: var(--beyaz); box-shadow: var(--golge); border-radius: var(--radius); padding: 10px; gap: 8px; z-index: 50; }
.ara-kutu.acik { display: flex; }
.ara-kutu input { border: 1.5px solid var(--cizgi); border-radius: 8px; padding: 8px 12px; font-size: 14px; width: 220px; outline: none; }
.ara-kutu input:focus { border-color: var(--vurgu-yesil); }
.ara-kutu button { background: var(--vurgu-yesil); border: none; color: var(--beyaz); border-radius: 8px; padding: 0 14px; cursor: pointer; display: flex; align-items: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 90px 0 120px;
  background: linear-gradient(180deg, var(--zemin) 0%, var(--zemin-2) 100%);
}
.hero-akis {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}
.hero-icerik {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.hero-rozet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vurgu-yesil);
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(36px, 5.5vw, 58px);
  margin-bottom: 20px;
}
.hero h1 em {
  font-style: italic;
  color: var(--vurgu-yesil);
}
.hero p.lead {
  font-size: 18px;
  color: var(--metin-soluk);
  max-width: 540px;
  margin-bottom: 32px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-istatistik {
  display: flex;
  gap: 40px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.hero-istatistik div strong {
  display: block;
  font-family: var(--font-baslik);
  font-size: 30px;
  color: var(--koyu-yesil);
}
.hero-istatistik div span {
  font-size: 13.5px;
  color: var(--metin-soluk);
}

/* ---------- Bölüm Başlıkları ---------- */
.bolum { padding: 88px 0; }
.bolum-zemin-alt { background: var(--zemin-2); }
.bolum-baslik { max-width: 620px; margin-bottom: 52px; }
.bolum-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vurgu-yesil);
  margin-bottom: 12px;
}
.bolum-baslik h2 { font-size: clamp(28px, 3.6vw, 40px); }
.bolum-baslik p { color: var(--metin-soluk); font-size: 16.5px; }
.bolum-baslik.ortali { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Hizmet Kartları ---------- */
.grid-hizmet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.kart-hizmet {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: var(--gecis);
}
.kart-hizmet:hover {
  transform: translateY(-6px);
  box-shadow: var(--golge);
  border-color: var(--vurgu-yesil);
}
.kart-hizmet .ikon-kutu {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--zemin-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--vurgu-yesil);
}
.kart-hizmet .ikon-kutu svg { width: 26px; height: 26px; }
.kart-hizmet h3 { font-size: 19px; margin-bottom: 10px; }
.kart-hizmet p { color: var(--metin-soluk); font-size: 14.5px; margin: 0; }

/* ---------- Ürün Kategorileri (Anasayfa) ---------- */
.grid-kategori {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.kart-kategori {
  position: relative;
  background: var(--koyu-yesil);
  border-radius: var(--radius);
  padding: 30px 26px;
  color: var(--beyaz);
  overflow: hidden;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--gecis);
}
.kart-kategori:hover { background: var(--vurgu-yesil); transform: translateY(-4px); }
.kart-kategori .ikon-kutu {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.kart-kategori .ikon-kutu svg { width: 22px; height: 22px; }
.kart-kategori h3 { color: var(--beyaz); font-size: 18px; margin-bottom: 4px; }
.kart-kategori span.adet { font-size: 13px; opacity: 0.8; }
.kart-kategori .ok-isareti {
  position: absolute;
  top: 26px; right: 24px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Ürün Kartları (Liste) ---------- */
.grid-urun {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.kart-urun {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--gecis);
  display: flex;
  flex-direction: column;
}
.kart-urun:hover { box-shadow: var(--golge); transform: translateY(-4px); border-color: var(--vurgu-yesil); }
.kart-urun-gorsel {
  width: 100%;
  aspect-ratio: 1/1;
max-width: 250px;
max-height: 250px;
margin: 0 auto;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: var(--vurgu-yesil);
}
.kart-urun-gorsel svg { width: 64px; height: 64px; opacity: 0.55; }
.kart-urun-gorsel img {
      width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  box-sizing: border-box;
}
.kart-urun-rozet {
  position: absolute;
  top: 14px; left: 14px;
  background: linear-gradient(120deg, var(--vurgu-amber), var(--vurgu-yesil));
  color: var(--beyaz);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px -2px rgba(255,122,26,0.6);
}
.kart-urun-govde { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.kart-urun-kategori { font-size: 12px; font-weight: 700; color: var(--vurgu-yesil); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; }
.kart-urun h3 { font-size: 18px; margin-bottom: 8px; }
.kart-urun p {
  font-size: 14px;
  color: var(--metin-soluk);
  margin-bottom: 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kart-urun-meta { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.etiket {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 7px;
  background: var(--zemin-2);
  color: var(--koyu-yesil-2);
  border: 1px solid var(--cizgi);
}
.kart-urun-alt {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 14px;
padding: 11px 16px;
background: var(--koyu-yesil);
border-radius: 10px;
font-weight: 700;
font-size: .88rem;
transition: var(--gecis);
}
.kart-urun-alt span { color: #fff; }
.kart-urun-alt svg { stroke: #fff; }
.kart-urun:hover .kart-urun-alt { background: var(--sicak-vurgu); }

/* ---------- Filtre Çubuğu (Ürünler Sayfası) ---------- */
.filtre-cubugu {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.filtre-cubugu a {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--cizgi);
  font-size: 14px;
  font-weight: 600;
  color: var(--metin-soluk);
  background: var(--beyaz);
  transition: var(--gecis);
}
.filtre-cubugu a:hover { border-color: var(--vurgu-yesil); color: var(--vurgu-yesil); }
.filtre-cubugu a.aktif { background: var(--koyu-yesil); border-color: var(--koyu-yesil); color: var(--beyaz); }

/* ---------- Neden Biz / Avantajlar ---------- */
.neden-biz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.neden-biz-gorsel {
  background: var(--koyu-yesil);
  border-radius: 24px;
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
}
.neden-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.neden-liste li { display: flex; gap: 16px; align-items: flex-start; }
.neden-liste .check {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--vurgu-yesil);
  color: var(--beyaz);
  display: flex; align-items: center; justify-content: center;
}
.neden-liste .check svg { width: 16px; height: 16px; }
.neden-liste h4 { margin: 0 0 4px; font-size: 16.5px; color: var(--koyu-yesil); font-family: var(--font-govde); font-weight: 700; }
.neden-liste p { margin: 0; font-size: 14.5px; color: var(--metin-soluk); }

/* ---------- CTA Şeridi ---------- */
.cta-serit {
  background: var(--koyu-yesil);
  border-radius: 28px;
  padding: 60px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  color: var(--beyaz);
  position: relative;
  overflow: hidden;
}
.cta-serit h2 { color: var(--beyaz); margin-bottom: 8px; font-size: 28px; }
.cta-serit p { color: rgba(255,255,255,0.78); margin: 0; }
.cta-aksiyon { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--koyu-yesil);
  color: rgba(255,255,255,0.75);
  padding: 24px 0 0;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-logo { font-family: var(--font-baslik); font-size: 24px; color: var(--beyaz); font-weight: 700; margin-bottom: 10px; }
.footer-slogan { color: var(--vurgu-yesil-acik); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; }
.footer-grid h4 { color: var(--beyaz); font-size: 15px; margin-bottom: 18px; font-family: var(--font-govde); font-weight: 700; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-grid ul a:hover { color: var(--beyaz); }
.footer-grid p { font-size: 14px; }
.footer-iletisim li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.footer-iletisim svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--vurgu-yesil-acik); }
.footer-alt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-alt a:hover { color: var(--beyaz); }

/* ---------- Sabit WhatsApp Butonu ---------- */
.whatsapp-sabit {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 58px; height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.6);
  z-index: 200;
  transition: var(--gecis);
}
.whatsapp-sabit:hover { transform: scale(1.08); }
.whatsapp-sabit svg { width: 30px; height: 30px; color: var(--beyaz); }

/* ---------- İç Sayfa Başlığı (breadcrumb hero) ---------- */
.sayfa-ust {
background: var(--koyu-yesil);
padding: 40px 0;
min-height: 204px;
display: flex;
align-items: center;
border-bottom: none;
position: relative;
overflow: hidden;
}

.sayfa-ust .container { position: relative; z-index: 1; }
.sayfa-ust .breadcrumb { font-size: 13.5px; color: rgba(255,255,255,0.72); margin-bottom: 14px; }
.sayfa-ust .breadcrumb a { color: rgba(255,255,255,0.92); }
.sayfa-ust .breadcrumb a:hover { color: var(--vurgu-yesil-acik); }
.sayfa-ust .breadcrumb span { color: #fff; font-weight: 700; }
.sayfa-ust h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 0; color: #fff; }

/* ---------- İletişim Sayfası ---------- */
.iletisim-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
}
.iletisim-bilgi-kart {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.iletisim-bilgi-kart .ikon-kutu {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--zemin-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--vurgu-yesil);
}
.iletisim-bilgi-kart .ikon-kutu svg { width: 22px; height: 22px; }
.iletisim-bilgi-kart h4 { font-size: 15px; margin-bottom: 4px; font-family: var(--font-govde); }
.iletisim-bilgi-kart p { margin: 0; font-size: 14.5px; color: var(--metin-soluk); }

.form-kutu {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 36px;
}
.form-grup { margin-bottom: 18px; }
.form-grup label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--koyu-yesil); }
.form-grup input, .form-grup textarea, .form-grup select {
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1.5px solid var(--cizgi);
  font-family: var(--font-govde);
  font-size: 14.5px;
  background: var(--zemin);
  transition: var(--gecis);
}
.form-grup input:focus, .form-grup textarea:focus, .form-grup select:focus {
  outline: none;
  border-color: var(--vurgu-yesil);
  background: var(--beyaz);
}
.form-grup textarea { resize: vertical; min-height: 130px; }
.form-iki-kolon { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.harita-kutu {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--cizgi);
  margin-top: 24px;
}
.harita-kutu iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ---------- Bildirimler ---------- */
.bildirim {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  margin-bottom: 20px;
}
.bildirim-basarili { background: #E5F6ED; color: #1E7A4C; border: 1px solid #BFE6D0; }
.bildirim-hatali { background: #FBEAEA; color: #B23A3A; border: 1px solid #F2C9C9; }
.bildirim-bilgi { background: #EAF2FB; color: #2C5C9E; border: 1px solid #C9DDF2; }

/* ---------- Ürün Detay ---------- */
.urun-detay-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
}
.urun-detay-gorsel {
  background: #ffffff;
  border-radius: 24px;
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  color: var(--vurgu-yesil);
  position: sticky;
  top: 110px;
  height: fit-content;
}
.urun-detay-gorsel svg { width: 120px; height: 120px; opacity: 0.5; }
.urun-detay-kategori { font-size: 13px; font-weight: 700; color: var(--vurgu-yesil); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; }
.urun-detay-grid h1 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 14px; }
.urun-detay-ozet { font-size: 16.5px; color: var(--metin-soluk); margin-bottom: 26px; }
.urun-detay-etiketler { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.urun-detay-etiketler .etiket { font-size: 13px; padding: 7px 14px; }
.urun-ozellik-listesi { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 12px; }
.urun-ozellik-listesi li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--metin); }
.urun-ozellik-listesi li svg { width: 19px; height: 19px; color: var(--vurgu-yesil); flex-shrink: 0; margin-top: 2px; }
.urun-detay-aciklama { font-size: 15.5px; color: var(--metin-soluk); margin-bottom: 30px; }
.urun-detay-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Sayfalama ---------- */
.sayfalama { display: flex; justify-content: center; gap: 8px; margin-top: 50px; }
.sayfalama a, .sayfalama span {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1.5px solid var(--cizgi);
  font-size: 14px;
  font-weight: 600;
  background: var(--beyaz);
}
.sayfalama a:hover { border-color: var(--vurgu-yesil); color: var(--vurgu-yesil); }
.sayfalama .aktif { background: var(--koyu-yesil); border-color: var(--koyu-yesil); color: var(--beyaz); }

/* ---------- Boş Durum ---------- */
.bos-durum {
  text-align: center;
  padding: 70px 20px;
  color: var(--metin-soluk);
}
.bos-durum svg { width: 56px; height: 56px; color: var(--cizgi); margin: 0 auto 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-hizmet { grid-template-columns: repeat(2, 1fr); }
  .grid-kategori { grid-template-columns: repeat(2, 1fr); }
  .grid-urun { grid-template-columns: repeat(2, 1fr); }
  .neden-biz-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .urun-detay-grid { grid-template-columns: 1fr; }
  .urun-detay-gorsel { position: static; aspect-ratio: 16/10; }
  .iletisim-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  nav.menu { display: none; }
  .menu-mobil-buton { display: flex; }
  .header-aksiyon .buton-text { display: none; }
  .grid-hizmet, .grid-kategori, .grid-urun { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .ust-serit-sosyal { display: none; }
  .cta-serit { padding: 40px 26px; flex-direction: column; text-align: center; }
  .form-iki-kolon { grid-template-columns: 1fr; }
  .hero { padding: 60px 0 80px; }
  .bolum { padding: 60px 0; }
  .hero-istatistik { gap: 28px; }
}

/* Mobil menü açık durumu */
nav.menu.acik {
  display: flex;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--beyaz);
  flex-direction: column;
  padding: 20px 24px;
  gap: 6px;
  border-bottom: 1px solid var(--cizgi);
  box-shadow: var(--golge);
}
nav.menu.acik a { padding: 12px 0; border-bottom: 1px solid var(--zemin-2); width: 100%; color: var(--metin) !important; }
nav.menu.acik a.aktif { color: var(--koyu-yesil) !important; font-weight: 700; }

/* ---------- Anasayfa Hero Slayt ---------- */
.hero-slayt-bolum {
  padding: 0;
  width: 100%;

  position: relative;
  z-index: 5;
}
.hero-slayt {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 480px;
  max-height: 860px;
  overflow: hidden;
  isolation: isolate;
}
.hero-slayt-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slayt-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-slayt-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(10, 20, 50, 0.55) 0%,
rgba(10, 20, 50, 0.20) 30%,
transparent 55%
);
pointer-events: none;
z-index: 1;
}
.hero-slayt-item.aktif {
  opacity: 1;
  visibility: visible;
}
.hero-slayt-desen {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.10) 0%, transparent 45%),
                     radial-gradient(circle at 15% 85%, rgba(255,255,255,0.08) 0%, transparent 40%);
  pointer-events: none;
}
.hero-slayt-metin {
  position: relative;
  z-index: 2;
  padding: 0 6vw 9vh;
  max-width: 700px;
  color: var(--beyaz);
  /* Metin okunabilirliği için arka plan gölgesi */
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero-slayt-rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--vurgu-amber), var(--vurgu-yesil));
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-bottom: 16px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.40);
  box-shadow: 0 4px 18px -2px rgba(255,122,26,0.55);
  animation: rozetNabiz 2.4s ease-in-out infinite;
}
@keyframes rozetNabiz {
  0%, 100% { box-shadow: 0 4px 18px -2px rgba(255,122,26,0.55); }
  50% { box-shadow: 0 4px 26px 2px rgba(255,122,26,0.85); }
}
.hero-slayt-metin h1,
.hero-slayt-metin h2 {
  font-family: var(--font-baslik);
  font-size: clamp(32px, 4.8vw, 62px);
  font-weight: 800;
  color: #ffffff !important;
  margin: 0 0 14px;
  line-height: 1.1;
  text-shadow: 0 3px 20px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.45);
  letter-spacing: -0.5px;
}
.hero-slayt-metin p {
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,0.95);
  margin: 0 0 26px;
  line-height: 1.55;
  max-width: 520px;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0,0,0,0.50);
}
.hero-slayt-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-slayt-noktalar {
  position: absolute;
  right: 5vw;
  bottom: 5vh;
  display: flex;
  gap: 10px;
  z-index: 5;
}
.hero-slayt-noktalar button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0;
  transition: var(--gecis);
}
.hero-slayt-noktalar button.aktif {
  background: var(--sicak-vurgu);
  width: 26px;
  border-radius: 5px;
}
.hero-slayt-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.14);
  color: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: var(--gecis);
  z-index: 5;
}
.hero-slayt-ok:hover {
  background: rgba(255,255,255,0.28);
}
.hero-slayt-ok-sol { left: 24px; }
.hero-slayt-ok-sag { right: 24px; }

@media (max-width: 720px) {
  .hero-slayt-bolum { padding: 0; }
  .hero-slayt { aspect-ratio: 4 / 5; max-height: 560px; min-height: 420px; border-radius: 0; }
  .hero-slayt-metin { padding: 0 24px 48px; max-width: 100%; }
  .hero-slayt-metin h2 { font-size: clamp(24px, 7vw, 32px); }
  .hero-slayt-ok { width: 36px; height: 36px; }
  .hero-slayt-ok-sol { left: 12px; }
  .hero-slayt-ok-sag { right: 12px; }
  .hero-slayt-noktalar { right: 20px; bottom: 20px; }
  .hero-slayt-cta { gap: 10px; }
  .hero-slayt-cta .buton { padding: 11px 18px; font-size: 14px; }
}



/* ---------- Hero Slayt Responsive ---------- */
@media (max-width: 1024px) {
  .hero-slayt { min-height: 420px; }
  .hero-slayt-metin { max-width: 560px; }
}
@media (max-width: 768px) {
  .hero-slayt { aspect-ratio: 4 / 5; max-height: 560px; min-height: 380px; }
  .hero-slayt-metin { padding: 0 5vw 8vh; max-width: 100%; }
  .hero-slayt-noktalar { right: 20px; bottom: 20px; }
  .hero-slayt-cta { gap: 10px; }
  .hero-slayt-cta .buton { padding: 11px 18px; font-size: 14px; }
}
@media (max-width: 480px) {
  .hero-slayt { aspect-ratio: 4 / 5; max-height: 420px; }
  .hero-slayt-metin { padding: 20px 20px 40px; }
  .hero-slayt-ok { width: 32px; height: 32px; }
}


/* ===== HERO SLAYT RESIM - OVERRIDE ===== */
.hero-slayt-resim {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
}



/* ===== ÜRÜN GALERİ ===== */
.urun-galeri {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.urun-galeri-ana {
    background: #ffffff;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1/1;
max-width: 500px;
max-height: 500px;
margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.urun-galeri-ana img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.2s ease;
}
.urun-galeri-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.galeri-thumb {
    aspect-ratio: 1/1;
    object-fit: contain;
    background: #ffffff;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.7;
    padding: 4px;
}
.galeri-thumb:hover { opacity: 1; border-color: var(--koyu-yesil); }
.galeri-thumb.aktif { opacity: 1; border-color: var(--koyu-yesil); }



/* =====================================================
   FİLTRE BAR — Dropdown
   ===================================================== */
.filtre-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(26,45,90,.06);
  position: relative;
  z-index: 100;
}

/* Dropdown wrapper */
.filtre-dd {
  position: relative;
}

/* Buton */
.filtre-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--zemin-2);
  border: 1.5px solid var(--cizgi);
  border-radius: 8px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--metin);
  white-space: nowrap;
  transition: var(--gecis);
  font-family: inherit;
}
.filtre-dd-btn:hover {
  border-color: var(--vurgu-yesil);
  background: var(--zemin);
}
.filtre-dd-aktif {
  border-color: var(--koyu-yesil) !important;
  background: #e8f4ee !important;
  color: var(--koyu-yesil) !important;
}
.filtre-dd-etiket {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--metin-soluk);
  padding-right: 6px;
  border-right: 1.5px solid var(--cizgi);
  margin-right: 2px;
  line-height: 1.2;
}
.filtre-dd-aktif .filtre-dd-etiket {
  color: var(--koyu-yesil);
  border-color: #aad4bc;
}
.filtre-dd-deger {
  font-weight: 600;
}
.filtre-dd-ok {
  margin-left: 2px;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.filtre-dd.acik .filtre-dd-ok {
  transform: rotate(180deg);
}

/* Açılır menü */
.filtre-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--beyaz);
  border: 1.5px solid var(--cizgi);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(26,45,90,.12);
  z-index: 200;
  overflow: hidden;
  padding: 4px 0;
}
.filtre-dd.acik .filtre-dd-menu {
  display: block;
  animation: ddAc .15s ease;
}
@keyframes ddAc {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.filtre-dd-item {
  display: block;
  padding: 9px 16px;
  font-size: .84rem;
  color: var(--metin);
  text-decoration: none;
  transition: background .12s;
  white-space: nowrap;
}
.filtre-dd-item:hover {
  background: var(--zemin-2);
  color: var(--koyu-yesil);
}
.filtre-dd-item.secili {
  background: #e8f4ee;
  color: var(--koyu-yesil);
  font-weight: 700;
}
.filtre-dd-item.secili::before {
  content: '✓ ';
}

/* WindFree toggle butonu */
.filtre-wf-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: var(--zemin-2);
  border: 1.5px solid #2060C0;
  border-radius: 8px;
  color: #2060C0;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--gecis);
  white-space: nowrap;
}
.filtre-wf-btn:hover {
  background: #e8f0fa;
}
.filtre-wf-aktif {
  background: #2060C0 !important;
  color: #fff !important;
}

/* Temizle butonu */
.filtre-temizle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: #fff0f0;
  border: 1.5px solid #e0a0a0;
  border-radius: 8px;
  color: #c0392b;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--gecis);
  white-space: nowrap;
  margin-left: auto;
}
.filtre-temizle-btn:hover {
  background: #D42B1E;
  border-color: #D42B1E;
  color: #fff;
}

/* Sonuç bilgisi */
.filtre-sonuc {
  font-size: .85rem;
  color: var(--metin-soluk);
  margin-bottom: 16px;
}
.filtre-sonuc strong { color: var(--metin); }

/* Boş sonuç */
.bos-sonuc {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--metin-soluk);
}
.bos-sonuc p { font-size: 1.1rem; margin-bottom: 16px; }

/* Responsive */
@media (max-width: 768px) {
  .filtre-bar { gap: 6px; padding: 10px 12px; }
  .filtre-dd-btn, .filtre-wf-btn, .filtre-temizle-btn { padding: 7px 11px; font-size: .78rem; }
  .filtre-dd-menu { min-width: 150px; }
  .filtre-temizle-btn { margin-left: 0; }
}
/* =====================================================
   TEKNİK ÖZELLİKLER TABLOSU — Ürün Detay
   ===================================================== */
.teknik-tablo-wrap {
  margin-top: 24px;
  border: 1.5px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
}
.teknik-tablo-baslik {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--metin-soluk);
  background: var(--zemin-2);
  padding: 10px 16px;
  margin: 0;
  border-bottom: 1.5px solid var(--cizgi);
}
.teknik-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.teknik-tablo tr {
  border-bottom: 1px solid var(--cizgi);
  transition: background .12s;
}
.teknik-tablo tr:last-child { border-bottom: none; }
.teknik-tablo tr:hover { background: var(--zemin-2); }
.teknik-tablo th {
  width: 42%;
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--metin-soluk);
  background: transparent;
  white-space: nowrap;
}
.teknik-tablo td {
  padding: 10px 16px;
  color: var(--metin);
  font-weight: 500;
}
@media (max-width: 480px) {
  .teknik-tablo th, .teknik-tablo td { padding: 8px 12px; font-size: .82rem; }
}

/* Teknik tablo filtre link */
.teknik-filtre-link {
  color: var(--koyu-yesil);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--gecis);
}
.teknik-filtre-link:hover {
  color: var(--vurgu-yesil-acik, #1a5c3a);
  text-decoration: underline;
}
.teknik-filtre-link svg { opacity: 0.6; }


/* ---------- Marka Seridi (Anasayfa) ---------- */
.marka-serit {
  padding: 14px 0;
  background: var(--beyaz);
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
  overflow: hidden;
}
.marka-serit-liste {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.marka-serit-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  opacity: 0.55;
  filter: grayscale(100%);
  transition: var(--gecis);
}
.marka-serit-item:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-2px);
}
.marka-serit-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 900px) {
  .marka-serit-liste { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 32px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .marka-serit-liste::-webkit-scrollbar { display: none; }
  .marka-serit-item { flex: 0 0 auto; width: 110px; height: 36px; }
}


/* =====================================================
FİLTRE SIDEBAR — E-Ticaret Stili (checkbox + marka logo + fiyat)
===================================================== */
.urunler-katman {
display: flex;
align-items: flex-start;
gap: 32px;
}
.filtre-sidebar {
width: 268px;
flex-shrink: 0;
}
.urunler-ana {
flex: 1;
min-width: 0;
width: 100%;
box-sizing: border-box;
}

.filtre-mobil-sarici { border: none; }
.filtre-mobil-buton {
display: none;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
background: var(--beyaz);
border: 1px solid var(--cizgi);
border-radius: var(--radius);
cursor: pointer;
font-weight: 700;
color: var(--koyu-yesil);
list-style: none;
box-shadow: 0 2px 8px rgba(26,45,90,.06);
}
.filtre-mobil-buton::-webkit-details-marker { display: none; }
.filtre-mobil-buton span { display: inline-flex; align-items: center; gap: 8px; }
.filtre-mobil-ok { transition: transform .2s ease; }
.filtre-mobil-sarici[open] .filtre-mobil-ok { transform: rotate(180deg); }

.filtre-sidebar-govde {
background: var(--beyaz);
border: 1px solid var(--cizgi);
border-radius: var(--radius);
padding: 18px;
position: sticky;
top: 90px;
}
.filtre-sidebar-ust {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.filtre-sidebar-ust h3 {
font-size: 1rem;
margin: 0;
}
.filtre-temizle-link {
font-size: .78rem;
font-weight: 700;
color: var(--vurgu-yesil);
text-decoration: none;
}
.filtre-temizle-link:hover { text-decoration: underline; }

.facet {
border-top: 1px solid var(--zemin-2);
padding: 12px 0;
}
.facet:first-of-type { border-top: none; padding-top: 4px; }
.facet-baslik {
display: flex;
align-items: center;
justify-content: space-between;
font-size: .82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--metin);
cursor: pointer;
list-style: none;
padding: 4px 0;
}
.facet-baslik::-webkit-details-marker { display: none; }
.facet-baslik::after {
content: '';
width: 8px; height: 8px;
border-right: 2px solid var(--metin-soluk);
border-bottom: 2px solid var(--metin-soluk);
transform: rotate(45deg);
transition: transform .2s ease;
margin-left: 8px;
}
.facet[open] > .facet-baslik::after { transform: rotate(-135deg); }

.facet-liste {
list-style: none;
margin: 8px 0 0;
padding: 0;
max-height: 220px;
overflow-y: auto;
}
.facet-liste li { margin: 0; }
.facet-item {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 4px;
font-size: .86rem;
color: var(--metin);
text-decoration: none;
border-radius: 6px;
transition: background .12s;
}
.facet-item:hover { background: var(--zemin-2); }
.facet-item.secili { color: var(--koyu-yesil); font-weight: 700; }
.facet-kutu {
width: 17px; height: 17px;
flex-shrink: 0;
border: 1.5px solid var(--cizgi);
border-radius: 5px;
display: flex; align-items: center; justify-content: center;
color: var(--beyaz);
background: var(--beyaz);
}
.facet-item.secili .facet-kutu {
background: var(--koyu-yesil);
border-color: var(--koyu-yesil);
}
.facet-metin { flex: 1; }
.facet-sayac {
font-size: .74rem;
color: var(--metin-soluk);
background: var(--zemin-2);
padding: 1px 7px;
border-radius: 999px;
}
.facet-item.secili .facet-sayac {
background: #e8f4ee;
color: var(--koyu-yesil);
}
.facet-marka-logo {
height: 22px;
max-width: 120px;
object-fit: contain;
flex: 1;
}
.facet-item-marka {
border: 1.5px solid var(--cizgi);
border-radius: 9px;
padding: 9px 10px;
margin-bottom: 6px;
background: var(--beyaz);
}
.facet-item-marka:hover { border-color: var(--vurgu-amber); background: var(--zemin-2); }
.facet-item-marka.secili { border-color: var(--koyu-yesil); background: #e8f4ee; }

.facet-fiyat-form { margin-top: 8px; }
.facet-fiyat-inputlar {
display: flex;
align-items: center;
gap: 6px;
}
.facet-fiyat-inputlar input {
width: 100%;
min-width: 0;
padding: 8px 9px;
border: 1.5px solid var(--cizgi);
border-radius: 8px;
font-size: .82rem;
font-family: inherit;
}
.facet-fiyat-inputlar span { color: var(--metin-soluk); }
.facet-fiyat-buton {
margin-top: 8px;
width: 100%;
padding: 8px;
border: none;
border-radius: 8px;
background: var(--koyu-yesil);
color: var(--beyaz);
font-weight: 700;
font-size: .82rem;
cursor: pointer;
transition: var(--gecis);
}
.facet-fiyat-buton:hover { background: var(--vurgu-yesil); }

/* Aktif filtre çipleri */
.aktif-filtreler {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.aktif-filtre-cip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #e8f4ee;
border: 1px solid #aad4bc;
border-radius: 999px;
color: var(--koyu-yesil);
font-size: .8rem;
font-weight: 600;
text-decoration: none;
transition: var(--gecis);
}
.aktif-filtre-cip:hover { background: var(--koyu-yesil); color: var(--beyaz); border-color: var(--koyu-yesil); }
.aktif-filtre-cip span { font-size: .7rem; opacity: .7; }
.aktif-filtre-temizle {
font-size: .8rem;
font-weight: 700;
color: #c0392b;
text-decoration: none;
padding: 6px 4px;
}
.aktif-filtre-temizle:hover { text-decoration: underline; }

/* Üst bar: sonuç sayısı + sıralama */
.urunler-ust-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--cizgi);
}
.urunler-sonuc-sayisi {
font-size: .9rem;
color: var(--metin-soluk);
}
.urunler-sonuc-sayisi strong { color: var(--metin); font-size: 1rem; }
.urunler-sirala {
display: flex;
align-items: center;
gap: 8px;
font-size: .84rem;
}
.urunler-sirala label { color: var(--metin-soluk); font-weight: 600; white-space: nowrap; }
.urunler-sirala select {
padding: 8px 12px;
border: 1.5px solid var(--cizgi);
border-radius: 8px;
font-size: .84rem;
font-family: inherit;
background: var(--beyaz);
color: var(--metin);
cursor: pointer;
}

.grid-urun-sidebar { grid-template-columns: repeat(3, 1fr); }
.kart-urun-fiyat {
font-weight: 800;
color: var(--koyu-yesil);
font-size: 1.05rem;
margin-top: 6px;
}

@media (max-width: 992px) {
.grid-urun-sidebar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
.urunler-katman { flex-direction: column; }
.filtre-sidebar { width: 100%; }
.filtre-mobil-buton { display: flex; }
.filtre-sidebar-govde { position: static; margin-top: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }
}

@media (max-width: 720px) {
.grid-urun-sidebar { grid-template-columns: 1fr; }
.urunler-ust-bar { flex-direction: column; align-items: flex-start; }
.urunler-sirala { width: 100%; }
.urunler-sirala select { flex: 1; }
}


@media (min-width: 901px) {
  .filtre-mobil-sarici { display: block !important; }
  .filtre-mobil-sarici > summary { display: none !important; }
  .filtre-sidebar-govde { display: block !important; }
}


/* Kapasite (BTU) Secici - Samsung tarzi */
.kapasite-secici {
margin: 16px 0;
}
.kapasite-secici-baslik {
display: block;
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--metin-soluk);
margin-bottom: 8px;
}
.kapasite-butonlar {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.kapasite-buton {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 84px;
padding: 10px 16px;
border: 1.5px solid var(--cizgi);
border-radius: 10px;
background: var(--beyaz);
color: var(--metin);
font-weight: 600;
font-size: .88rem;
text-decoration: none;
cursor: pointer;
transition: var(--gecis);
}
.kapasite-buton:hover {
border-color: var(--koyu-yesil);
color: var(--koyu-yesil);
}
.kapasite-buton.aktif {
border-color: var(--koyu-yesil);
background: var(--koyu-yesil);
color: var(--beyaz);
cursor: default;
}


/* Teknik Ozellikler - kategorize tablo (Samsung tarzi) */
.teknik-kategori-blok {
margin-bottom: 22px;
}
.teknik-kategori-blok:last-child {
margin-bottom: 0;
}
.teknik-kategori-baslik {
font-size: .95rem;
font-weight: 800;
color: var(--koyu-yesil);
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 2px solid var(--koyu-yesil);
display: inline-block;
}
.teknik-kategori-tablo {
width: 100%;
border-collapse: collapse;
font-size: .88rem;
}
.teknik-kategori-tablo tr {
border-bottom: 1px solid var(--zemin-2);
}
.teknik-kategori-tablo tr:last-child {
border-bottom: none;
}
.teknik-kategori-tablo th {
text-align: left;
font-weight: 600;
color: var(--metin-soluk);
padding: 10px 16px 10px 0;
width: 45%;
vertical-align: top;
}
.teknik-kategori-tablo td {
text-align: left;
font-weight: 700;
color: var(--metin);
padding: 10px 0;
}
@media (max-width: 600px) {
.teknik-kategori-tablo th { width: 55%; padding-right: 8px; }
}

/* Urunler (magaza) sayfasi icin daha genis konteyner */
.container:has(.urunler-katman) {
  max-width: 1440px;
}

/* ============================================================
   PANASONIC ESINLI SADE TASARIM - FAZ 4
   Ferahlik, hafif tipografi, daha az gorsel agirlik (renkler ayni)
============================================================ */
.bolum { padding: 110px 0; }
.bolum-baslik { margin-bottom: 64px; }
.bolum-baslik h2 { font-weight: 400; letter-spacing: -0.5px; }
.bolum-eyebrow { font-weight: 600; letter-spacing: 2px; }

.kart-hizmet {
  box-shadow: none;
  border: 1px solid var(--cizgi);
  transition: var(--gecis);
}
.kart-hizmet:hover {
  border-color: var(--vurgu-yesil);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(0,0,0,0.18);
}

.kart-kategori {
  box-shadow: none;
  border: 1px solid var(--cizgi);
}
.kart-kategori:hover {
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.2);
}

.kart-urun { box-shadow: none; }
.kart-urun:hover { box-shadow: 0 20px 40px -22px rgba(0,0,0,0.2); }

.grid-kategori, .grid-hizmet { gap: 28px; }

/* ============================================================
   PANASONIC ESINLI SADE TASARIM - FAZ 5
   Hizmet kartlarina gorsel (Unsplash, ucretsiz ticari kullanim)
============================================================ */
.kart-hizmet { padding: 0; overflow: hidden; }
.kart-hizmet .ikon-kutu { margin: 24px 24px 12px; }
.kart-hizmet h3 { margin-left: 24px; margin-right: 24px; }
.kart-hizmet p { margin-left: 24px; margin-right: 24px; margin-bottom: 24px; }

.kart-hizmet-gorsel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 18px;
}
.kart-hizmet-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.kart-hizmet:hover .kart-hizmet-gorsel img { transform: scale(1.05); }
.kart-hizmet-ikon {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vurgu-yesil);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.25);
}
.kart-hizmet-gorsel + h3 { margin-top: 26px; }

/* ============================================================
   PANASONIC ESINLI SADE TASARIM - FAZ 6
   Kategori kartlarina gorsel (Unsplash, ucretsiz ticari kullanim)
============================================================ */
.kart-kategori {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.kart-kategori-gorsel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.kart-kategori-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.kart-kategori:hover .kart-kategori-gorsel img { transform: scale(1.06); }
.kart-kategori .ikon-kutu {
  position: relative;
  margin: -22px 0 0 20px;
  z-index: 2;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.28);
}
.kart-kategori > div { padding: 14px 20px 20px; }
.kart-kategori .ok-isareti { top: 16px; right: 16px; z-index: 2; }

/* ============================================================
   PANASONIC ESINLI SADE TASARIM - FAZ 7
   Urun karti etiketleri: tam pill, daha yumusak
============================================================ */
.etiket { border-radius: 999px; }
/* kart-urun-alt buton stili yukarida tanimli, override kaldirildi */
.site-ruzgar-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
}

/* ---------- Calistigimiz Markalar Grid (Anasayfa) ---------- */
.marka-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.marka-kart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 20px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  transition: var(--gecis);
}
.marka-kart:hover {
  box-shadow: var(--golge);
  transform: translateY(-4px);
  border-color: var(--sicak-vurgu);
}
.marka-kart img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: var(--gecis);
}
.marka-kart:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
@media (max-width: 600px) {
  .marka-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .marka-kart { height: 80px; padding: 14px; }
  .marka-kart img { max-height: 40px; }
}


/* ---------- Quill Hizalama Siniflari (Urun Detay Aciklama) ---------- */
.urun-detay-aciklama .ql-align-center { text-align: center; }
.urun-detay-aciklama .ql-align-right { text-align: right; }
.urun-detay-aciklama .ql-align-justify { text-align: justify; }
.urun-detay-aciklama img { max-width: 100%; height: auto; border-radius: 8px; }


/* ===== Hero Istatistik Seridi (dikkat cekici) ===== */
.hero-slayt-istatistik {
  display: flex;
  gap: 28px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.hero-slayt-istatistik-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  border-left: 2px solid rgba(255,255,255,0.35);
}
.hero-slayt-istatistik-item:first-child { padding-left: 0; border-left: none; }
.hero-slayt-istatistik-item strong {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  line-height: 1.1;
}
.hero-slayt-istatistik-item span {
  font-size: 11.5px;
  color: rgba(255,255,255,0.88);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
@media (max-width: 720px) {
  .hero-slayt-istatistik { gap: 16px; margin-top: 18px; }
  .hero-slayt-istatistik-item { padding-left: 10px; }
  .hero-slayt-istatistik-item strong { font-size: 18px; }
  .hero-slayt-istatistik-item span { font-size: 10px; }
}

/* ===== Kampanya Bandi (ust cubuk uzeri, dikkat cekici) ===== */
.kampanya-bandi {
  position: relative;
  background: linear-gradient(90deg, var(--vurgu-amber), var(--vurgu-yesil), var(--sicak-vurgu), var(--vurgu-amber));
  background-size: 300% 100%;
  animation: kampanyaAkis 10s linear infinite;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 46px 9px 16px;
  letter-spacing: 0.2px;
}
.kampanya-bandi span.vurgu {
  background: rgba(255,255,255,0.22);
  padding: 2px 9px;
  border-radius: 999px;
  margin-right: 6px;
}
.kampanya-bandi .kampanya-kapat {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kampanya-bandi .kampanya-kapat:hover { background: rgba(255,255,255,0.4); }
@keyframes kampanyaAkis {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@media (max-width: 640px) {
  .kampanya-bandi { font-size: 12px; padding: 8px 40px 8px 12px; line-height: 1.4; }
}


/* ---------- Yuzen Hizli Erisim Seridi ---------- */
.yan-serit {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 150;
display: flex;
flex-direction: column;
box-shadow: var(--golge);
border-radius: 12px 0 0 12px;
overflow: hidden;
}
.yan-serit a {
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
background: var(--koyu-yesil);
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.12);
transition: var(--gecis);
position: relative;
}
.yan-serit a:last-child { border-bottom: none; }
.yan-serit a:hover { background: var(--vurgu-yesil); }
.yan-serit a .yan-serit-etiket {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
background: var(--koyu-yesil);
color: #fff;
font-size: 12.5px;
font-weight: 600;
padding: 8px 14px;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: var(--gecis);
margin-right: 10px;
}
.yan-serit a:hover .yan-serit-etiket { opacity: 1; }
@media (max-width: 780px) { .yan-serit { display: none; } }

/* ---------- Koyu Cam Efektli Ust Menu (Togg ilhamli) ---------- */
header.site-header {
background: rgba(20, 34, 68, 0.90);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.logo-img {
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
nav.menu a {
color: rgba(255,255,255,0.82);
}
nav.menu a:hover,
nav.menu a.aktif {
color: #ffffff;
}
nav.menu a::after {
background: var(--vurgu-yesil-acik);
}
.menu-mobil-buton svg {
color: #ffffff;
}

/* ---------- Anasayfa: Nav Hero Uzerine Binsin (Togg tarzi) ---------- */
header.site-header.site-header--overlay {
position: sticky;
top: 0;
z-index: 30;
background: rgba(15, 27, 56, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: -86px;
}
header.site-header.site-header--overlay + .hero-slayt-bolum {
position: relative;
z-index: 1;
}
@media (max-width: 780px) {
header.site-header.site-header--overlay {
margin-bottom: -70px;
}
}

/* ---------- Hero: Tam Ekran Yukseklik (Togg tarzi) ---------- */
.hero-slayt {
height: 100vh;
min-height: 600px;
max-height: none;
}
html.anasayfa-kaydirma {
scroll-snap-type: y proximity;
scroll-behavior: smooth;
}
html.anasayfa-kaydirma .hero-slayt-bolum {
scroll-snap-align: start;
}
html.anasayfa-kaydirma .hero-slayt-bolum--son { scroll-snap-align: none; scroll-snap-stop: normal; }

/* ---------- Hero: Asagi Kaydir Ikonu (Togg tarzi) ---------- */
.hero-scroll-asagi {
position: absolute;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background: none;
border: none;
color: rgba(255,255,255,0.9);
cursor: pointer;
}
.hero-scroll-nokta {
animation: heroScrollNokta 1.6s ease-in-out infinite;
transform-origin: center;
}
@keyframes heroScrollNokta {
0% { transform: translateY(0); opacity: 1; }
70% { transform: translateY(15px); opacity: 0; }
100% { transform: translateY(0); opacity: 0; }
}
.hero-scroll-metin {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
}
@keyframes heroScrollBounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}

.site-header .logo { margin-left: 0; }


nav.menu { margin-left: 8vw; }
@media (max-width: 1100px) { nav.menu { margin-left: 0; } }


/* Urunler sayfasi arka plani - sade beyaz */
body:has(.urunler-section), body:has(.urun-detay-grid) {
background: #ffffff;
}


/* Mobilde hero CTA butonlari ile asagi kaydir gostergesi cakismasin diye */
@media (max-width: 600px) {
.hero-scroll-asagi { display: none; }
}


/* ---------- Urun detay sayfasi iyilestirmeleri ---------- */

/* Galeri ana gorsel hover zoom */
.urun-galeri-ana{overflow:hidden;border-radius:24px;}
.urun-galeri-ana img{transition:transform .35s ease;}
.urun-galeri-ana img:hover{transform:scale(1.06);}

/* Guven / garanti rozetleri (CTA altinda) */
.urun-detay-guven{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px;}
.urun-detay-guven span{display:inline-flex;align-items:center;gap:6px;font-size:.83rem;font-weight:600;color:var(--metin-soluk);}
.urun-detay-guven span svg{color:var(--koyu-yesil);flex-shrink:0;}

/* Urun karti rozet (One Cikan) */
.kart-urun-gorsel{position:relative;}
.kart-urun-rozet{position:absolute;top:10px;left:10px;background:var(--koyu-yesil);color:#fff;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.02em;z-index:2;}

/* Benzer urunler bolumu */
.benzer-urunler-section{padding:56px 0 64px;background:#ffffff;}
.benzer-urunler-baslik{font-size:1.5rem;margin:0 0 22px;}
.grid-urun-benzer{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:1000px){.grid-urun-benzer{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.grid-urun-benzer{grid-template-columns:1fr;}}

/* Mobilde sabit teklif al butonu */
.mobil-sabit-cta{display:none;}
@media(max-width:768px){
.mobil-sabit-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:600;padding:10px 14px;background:#fff;box-shadow:0 -6px 18px rgba(0,0,0,.14);}
.mobil-sabit-cta .buton{width:100%;justify-content:center;}
body:has(.mobil-sabit-cta){padding-bottom:68px;}
}


/* ---------- Kategori/marka banner iyilestirmesi (urunler.php ust banner) ---------- */
.sayfa-ust-banner{min-height:290px;}
.sayfa-ust-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(15,22,42,0) 55%, rgba(15,22,42,.35) 100%);pointer-events:none;}
@media(max-width:768px){.sayfa-ust-banner{min-height:230px;}}


/* === Serinleten Konular (Blog) === */
.grid-yazi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 980px) { .grid-yazi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-yazi { grid-template-columns: 1fr; } }

.kart-yazi { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--radius); overflow: hidden; transition: var(--gecis); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.kart-yazi:hover { box-shadow: var(--golge); transform: translateY(-3px); }
.kart-yazi-gorsel { width: 100%; aspect-ratio: 16/10; background: var(--zemin-2); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--vurgu-yesil); }
.kart-yazi-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kart-yazi-govde { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.kart-yazi-kategori { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--vurgu-yesil); margin-bottom: 8px; }
.kart-yazi-govde h3 { font-size: 1.08rem; margin: 0 0 10px; line-height: 1.35; }
.kart-yazi-govde p { font-size: .92rem; color: var(--metin-soluk); margin: 0 0 14px; flex: 1; }
.kart-yazi-meta { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--metin-soluk); border-top: 1px solid var(--cizgi); padding-top: 12px; margin-top: auto; }

.yazi-katman { display: flex; align-items: flex-start; gap: 32px; }
.yazi-sidebar { width: 268px; flex-shrink: 0; }
.yazi-ana { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 900px) { .yazi-katman { flex-direction: column; } .yazi-sidebar { width: 100%; } }

.yazi-sidebar-kutu { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 20px; margin-bottom: 22px; }
.yazi-sidebar-kutu h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 14px; }
.yazi-kategori-liste { list-style: none; margin: 0; padding: 0; }
.yazi-kategori-liste li { margin-bottom: 2px; }
.yazi-kategori-liste a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 6px; border-radius: 6px; font-size: .9rem; color: var(--metin); text-decoration: none; transition: background .12s; }
.yazi-kategori-liste a:hover, .yazi-kategori-liste a.aktif { background: var(--zemin-2); color: var(--vurgu-yesil); }
.yazi-kategori-liste span.sayac { color: var(--metin-soluk); font-size: .82rem; }

.yazi-etiket-bulut { display: flex; flex-wrap: wrap; gap: 8px; }
.yazi-etiket { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 20px; background: var(--zemin-2); color: var(--koyu-yesil-2); border: 1px solid var(--cizgi); text-decoration: none; transition: var(--gecis); }
.yazi-etiket:hover, .yazi-etiket.aktif { background: var(--vurgu-yesil); color: var(--beyaz); border-color: var(--vurgu-yesil); }

.yazi-detay-ust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; font-size: .9rem; color: var(--metin-soluk); }
.yazi-detay-gorsel { width: 100%; border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; aspect-ratio: 16/7; }
.yazi-detay-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.yazi-paylas { display: flex; align-items: center; gap: 10px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--cizgi); }
.yazi-paylas a { width: 36px; height: 36px; border-radius: 50%; background: var(--zemin-2); display: flex; align-items: center; justify-content: center; color: var(--koyu-yesil-2); transition: var(--gecis); }
.yazi-paylas a:hover { background: var(--vurgu-yesil); color: var(--beyaz); }