@charset "UTF-8";
/* ==========================================================================
   serviyet.com — TEMA
   public/css/tema.css

   Site geneli: token'lar, reset, topbar, header, dropdown'lar, mobil menü.
   Anasayfaya özel bileşenler (hero, banner grid, ürün tabları) anasayfa.css'te.

   NOT: Bu dosya Bootstrap'a bağımlı DEĞİLDİR. Bootstrap yüklü olsun ya da
   olmasın aynı çalışır. Sınıf öneki "srv-" değil, çakışma riski olan
   Bootstrap sınıf adlarından (row, col, header vb.) kaçınmak için
   "tb-" / "hdr-" / "dd-" / "mnu-" önekleri kullanıldı.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN'LAR
   Bu blok ileride yoda_site_ayar'dan basılabilir hale gelecek (tema desteği).
   -------------------------------------------------------------------------- */
:root {
  /* Renk */
  --srv-renk-ana:        #0B4D6B;
  --srv-renk-vurgu:      #00B4A6;
  --srv-renk-vurgu-alt:  #E8A020;
  --srv-renk-zemin-koyu: #072D40;
  --srv-renk-zemin-acik: #F4F8FA;
  --srv-renk-metin:      #2A3D47;
  --srv-renk-metin-soluk:#B8D4DF;
  --srv-renk-metin-ters: #FFFFFF;
  --srv-renk-cizgi:      rgba(255, 255, 255, .12);
  --srv-renk-ayrac:      rgba(255, 255, 255, .22);
  --srv-renk-cizgi-acik: #DDE8ED;
  --srv-renk-wa:         #25D366;

  /* Tipografi */
  --srv-font-marka:  'Cormorant Garamond', Georgia, serif;  /* sadece logo */
  --srv-font-baslik: 'Syne', system-ui, sans-serif;
  --srv-font-govde:  'DM Sans', system-ui, -apple-system, sans-serif;

  /* Ölçü */
  --srv-kap-genislik: 1280px;
  --srv-kap-padding:  20px;
  --srv-radius-s: 4px;
  --srv-radius-m: 8px;
  --srv-radius-l: 12px;
  --srv-gecis: .18s ease;

  /* ---- HİZALAMA KOLONLARI ----
     Topbar ve header aynı grid şablonunu kullanır; dikey hizalama
     buradan gelir. Eski sürümdeki JS ile piksel ölçme kaldırıldı.
     Bu 3 değeri değiştirmek iki satırı birden hizalar. */
  --srv-kol-logo: 232px;   /* logo  ↔ "…projesidir" metni     */
  --srv-kol-kat:  148px;   /* Kategoriler butonu ↔ WhatsApp   */
  --srv-kol-sag:  312px;   /* arama kutusu ↔ hesap butonları  */
}

/* --------------------------------------------------------------------------
   2. RESET / TABAN
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* GLOBAL body KURALI BİLİNÇLİ OLARAK YOK.
   main.css body'yi 'Segoe UI' 14px olarak tanımlıyor ve sitenin geri kalanı
   (ürün kartları, sepet, checkout, footer) ona göre tasarlanmış.
   tema.css main.css'ten SONRA yüklendiği için burada body'ye dokunmak
   tüm siteyi değiştirirdi. Tipografi sadece yeni bileşenlere veriliyor.
   Migrasyon bitince global geçiş tek seferde yapılır. */
.srv-tb, .srv-hdr, .srv-mnu, .srv-dd, .srv-perde {
  font-family: var(--srv-font-govde);
  font-size: 14px;
  line-height: 1.5;
  color: var(--srv-renk-metin);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; }

/* Klavye ile gezinenler için görünür odak — fare ile tıklayanı rahatsız etmez */
:focus-visible {
  outline: 2px solid var(--srv-renk-vurgu);
  outline-offset: 2px;
  border-radius: var(--srv-radius-s);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Ekran okuyucuya görünür, gözle görünmez */
.srv-gizli {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* İçeriğe atla — klavye kullanıcısı 40 tane header linkini geçmesin */
.srv-atla {
  position: absolute; left: 12px; top: -60px; z-index: 500;
  background: var(--srv-renk-vurgu); color: #fff;
  padding: 10px 18px; border-radius: var(--srv-radius-m);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: top var(--srv-gecis);
}
.srv-atla:focus { top: 12px; }

/* --------------------------------------------------------------------------
   3. ORTAK IZGARA
   Topbar ve header birebir aynı kolon şablonunu paylaşır.
   -------------------------------------------------------------------------- */
.srv-kap {
  max-width: var(--srv-kap-genislik);
  margin: 0 auto;
  padding: 0 var(--srv-kap-padding);
}

.srv-satir {
  display: grid;
  grid-template-columns: var(--srv-kol-logo) var(--srv-kol-kat) minmax(0, 1fr) var(--srv-kol-sag);
  align-items: center;
}

.srv-kol { display: flex; align-items: center; min-width: 0; position: relative; }
.srv-kol--orta { justify-content: center; }
.srv-kol--sag  { justify-content: flex-end; }

/* Kolon sınırındaki dikey ayraç çizgisi (sadece topbar'da) */
.srv-kol--ayrac::after {
  content: '';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 18px;
  background: var(--srv-renk-ayrac);
}

/* --------------------------------------------------------------------------
   4. TOPBAR
   -------------------------------------------------------------------------- */
.srv-tb {
  background: var(--srv-renk-zemin-koyu);
  border-bottom: 1px solid var(--srv-renk-cizgi);
  position: relative;
  overflow: hidden;
}
/* İnce dikey tarama dokusu — düz koyu bloğu kırıyor */
.srv-tb::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent, transparent 120px,
    rgba(255,255,255,.018) 120px, rgba(255,255,255,.018) 121px);
  pointer-events: none;
}
.srv-tb .srv-satir { height: 40px; position: relative; z-index: 1; }

.srv-tb-marka {
  font-size: 11px;
  color: rgba(184, 212, 223, .75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
}
.srv-tb-marka a {
  color: #5DD4CB; font-weight: 500; text-decoration: none;
  transition: color var(--srv-gecis);
}
.srv-tb-marka a:hover { color: #fff; }

.srv-tb-wa {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--srv-renk-metin-ters);
  font-size: 12px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: opacity var(--srv-gecis);
}
.srv-tb-wa:hover { opacity: .8; }
.srv-tb-wa i, .srv-tb-wa svg { color: var(--srv-renk-wa); flex-shrink: 0; font-size: 13px; }

/* Duyuru şeridi */
.srv-tb-duyuru {
  position: relative;
  height: 40px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.srv-tb-duyuru-item {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500;
  color: var(--srv-renk-metin-ters);
  white-space: nowrap;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s, transform .5s;
  pointer-events: none;
}
.srv-tb-duyuru-item.acik { opacity: 1; transform: none; pointer-events: auto; }

.srv-rozet {
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 20px;
}
.srv-rozet--teal   { background: var(--srv-renk-vurgu);     color: #fff; }
.srv-rozet--altin  { background: var(--srv-renk-vurgu-alt); color: #1A0E00; }

/* Hesap butonları */
.srv-tb-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: var(--srv-radius-s);
  color: var(--srv-renk-metin-soluk);
  font-size: 12px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  transition: background var(--srv-gecis), color var(--srv-gecis);
}
.srv-tb-btn:hover { background: rgba(255,255,255,.07); color: var(--srv-renk-metin-ters); }

.srv-tb-btn--giris { gap: 6px; }
.srv-tb-btn-yazi { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.srv-tb-btn-ana  { font-size: 12px; font-weight: 600; color: var(--srv-renk-metin-ters); }
.srv-tb-btn-alt  { font-size: 10px; color: rgba(184,212,223,.6); }

.srv-tb-ayrac-s {
  width: 1px; height: 14px; margin: 0 6px;
  background: var(--srv-renk-cizgi); flex-shrink: 0;
}

.srv-tb-sayac {
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--srv-renk-vurgu-alt);
  color: #1A0E00; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.srv-hdr {
  background: #fff;
  border-bottom: 2px solid #E0EAEF;
  /* Eski .site-navbar sticky idi — aynı davranış korunuyor. */
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* DİKKAT: yatay padding .srv-kap'tan gelir. Burada "padding: 10px 0" yazmak
   .srv-kap'ın 20px yan boşluğunu ezer ve header topbar'a göre 20px kayar. */
.srv-hdr .srv-satir { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }

/* Logo */
.srv-hdr-logo {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1; text-decoration: none;
}
.srv-hdr-logo-ad {
  font-family: var(--srv-font-marka);
  font-size: 32px; font-weight: 800;
  color: var(--srv-renk-ana);
  line-height: 1;
}
.srv-hdr-logo-ad em { font-style: normal; font-weight: 400; font-size: 30px; color: var(--srv-renk-vurgu); }
.srv-hdr-logo-slogan {
  margin-top: 4px;
  font-family: var(--srv-font-govde);
  font-size: 8.5px; letter-spacing: .15em; text-transform: uppercase;
  color: #7AAABB; text-align: center;
}
.srv-hdr-logo-gorsel { max-height: 46px; width: auto; }

/* Kategoriler butonu */
.srv-hdr-kat-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: 44px; width: 100%;
  background: none; border: 0; cursor: pointer;
  color: var(--srv-renk-ana);
  transition: color var(--srv-gecis);
}
.srv-hdr-kat-btn:hover { color: var(--srv-renk-vurgu); }
.srv-hdr-kat-ust { display: flex; align-items: center; justify-content: center; gap: 6px; }
.srv-hdr-kat-ad  { font-size: 15px; font-weight: 700; line-height: 1.1; }
.srv-hdr-kat-alt { font-size: 9.5px; color: #7AAABB; line-height: 1.1; }

/* Orta aksiyon butonları */
.srv-hdr-aksiyonlar {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; width: 100%;
}
.srv-hdr-aksiyon-sar { position: relative; flex: 0 1 auto; }

.srv-hdr-aksiyon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--srv-renk-cizgi-acik);
  border-radius: var(--srv-radius-m);
  background: #fff; cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--srv-gecis), background var(--srv-gecis);
}
.srv-hdr-aksiyon:hover,
.srv-hdr-aksiyon[aria-expanded="true"] {
  border-color: var(--srv-renk-vurgu);
  background: #F4FDFC;
}
.srv-hdr-aksiyon-ad  { font-size: 13.5px; font-weight: 700; color: var(--srv-renk-ana); line-height: 1.1; }
.srv-hdr-aksiyon-alt { font-size: 9.5px; color: #7AAABB; line-height: 1.1; }
.srv-hdr-aksiyon i, .srv-hdr-aksiyon svg { color: var(--srv-renk-ana); font-size: 12px; }

/* Öne çıkan aksiyon: gradient kenarlık */
.srv-hdr-aksiyon--one {
  border: 2px solid transparent;
  background:
    linear-gradient(#FAFFFE, #F0FDFB) padding-box,
    linear-gradient(135deg, #00B4A6, #0077AA, #E8A020) border-box;
}
.srv-hdr-aksiyon--one .srv-hdr-aksiyon-ad  { color: #006D66; font-weight: 800; }
.srv-hdr-aksiyon--one .srv-hdr-aksiyon-alt { color: #5AAAB5; }
.srv-hdr-aksiyon--one:hover,
.srv-hdr-aksiyon--one[aria-expanded="true"] {
  background:
    linear-gradient(#E8FAF8, #D8F5F2) padding-box,
    linear-gradient(135deg, #00B4A6, #0077AA, #E8A020) border-box;
}

/* Arama */
.srv-hdr-arama { display: flex; flex-direction: column; width: 100%; }
.srv-hdr-arama-kutu { position: relative; width: 100%; }
.srv-hdr-arama-input {
  width: 100%; height: 32px;
  padding: 0 36px 0 14px;
  border-radius: 16px;
  border: 1.5px solid var(--srv-renk-cizgi-acik);
  background: #F7FBFC;
  font-family: var(--srv-font-govde); font-size: 12.5px;
  color: var(--srv-renk-metin);
  transition: border-color var(--srv-gecis), box-shadow var(--srv-gecis);
}
.srv-hdr-arama-input::placeholder { color: #9BBCCA; }
.srv-hdr-arama-input:focus {
  outline: none;
  border-color: var(--srv-renk-vurgu);
  box-shadow: 0 0 0 3px rgba(0,180,166,.12);
  background: #fff;
}
.srv-hdr-arama-btn {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--srv-renk-vurgu);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--srv-gecis);
}
.srv-hdr-arama-btn:hover { background: #009E91; }

.srv-hdr-ipuclari {
  display: flex; align-items: center;
  margin-top: 5px; overflow: hidden;
}
.srv-hdr-ipucu-etiket {
  font-size: 10px; color: #9BBCCA;
  margin-right: 6px; flex-shrink: 0; white-space: nowrap;
}
.srv-hdr-ipucu {
  font-size: 10.5px; font-weight: 500; color: #5A8FA3;
  text-decoration: none; white-space: nowrap;
  padding: 1px 7px; border-radius: 10px;
  transition: background var(--srv-gecis), color var(--srv-gecis);
}
.srv-hdr-ipucu:hover { background: #E8F4F8; color: var(--srv-renk-ana); }
.srv-hdr-ipucu + .srv-hdr-ipucu { border-left: 1px solid #D0E4EC; }

/* Sadece mobilde görünen header parçaları */
.srv-hdr-mobil-btn, .srv-hdr-mobil-sepet { display: none; }

/* --------------------------------------------------------------------------
   6. DROPDOWN'LAR
   -------------------------------------------------------------------------- */
.srv-dd {
  display: none;
  position: absolute;
  top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: min(560px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid var(--srv-renk-cizgi-acik);
  border-radius: var(--srv-radius-l);
  box-shadow: 0 8px 32px rgba(7,45,64,.13);
  z-index: 200;
  overflow: hidden;
}
.srv-dd.acik { display: block; }

.srv-dd-serit {
  padding: 13px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.srv-dd-serit p { margin: 0; font-size: 12px; font-weight: 600; }
.srv-dd-serit a { font-size: 11px; font-weight: 700; padding: 5px 13px; border-radius: 20px; text-decoration: none; }
.srv-dd-serit--teal  { background: linear-gradient(90deg, var(--srv-renk-ana), var(--srv-renk-vurgu)); }
.srv-dd-serit--teal  p { color: #fff; }
.srv-dd-serit--teal  a { background: var(--srv-renk-vurgu-alt); color: #072D40; }
.srv-dd-serit--acik  { background: linear-gradient(90deg, #E8F4F8, #D0EAF2); }
.srv-dd-serit--acik  p { color: var(--srv-renk-ana); }
.srv-dd-serit--acik  a { background: var(--srv-renk-ana); color: #fff; }

.srv-dd-izgara {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: #EEF3F5;
}
.srv-dd-kart {
  background: #fff; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-decoration: none;
  transition: background .15s;
}
.srv-dd-kart:hover { background: #F4FDFC; }
.srv-dd-kart strong { display: block; font-size: 12px; font-weight: 700; color: var(--srv-renk-ana); margin-bottom: 2px; }
.srv-dd-kart p { margin: 0; font-size: 11px; color: #4A6670; line-height: 1.4; }
.srv-dd-eylem {
  flex-shrink: 0; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--srv-renk-vurgu);
  padding: 4px 11px; border-radius: 14px;
}

.srv-dd-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #F0F5F7;
  text-decoration: none;
  transition: background .15s;
}
.srv-dd-satir:last-child { border-bottom: 0; }
.srv-dd-satir:hover { background: #F4FDFC; }
.srv-dd-satir-gorsel {
  width: 30px; height: 30px; flex-shrink: 0;
  background: #EEF3F5; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--srv-renk-ana);
}
.srv-dd-satir-ad { flex: 1; font-size: 11.5px; font-weight: 500; color: #1A3A4A; }
.srv-dd-depo-rozet {
  font-size: 10px; font-weight: 600; color: #00897F;
  background: #E0FAF7; padding: 2px 6px; border-radius: 9px; white-space: nowrap;
}
.srv-dd-fiyat { font-size: 12px; font-weight: 700; color: var(--srv-renk-ana); white-space: nowrap; }
.srv-dd-ekle {
  font-size: 11px; font-weight: 600; color: #00897F;
  background: #fff; border: 1.5px solid var(--srv-renk-vurgu);
  padding: 3px 9px; border-radius: 5px; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
.srv-dd-ekle:hover { background: #E0FAF7; }

/* Pratik sipariş */
.srv-dd-pratik { padding: 14px 16px; }
.srv-dd-pratik-baslik { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--srv-renk-ana); }
.srv-dd-pratik-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #F0F5F7;
}
.srv-dd-pratik-satir:last-child { border-bottom: 0; }
.srv-dd-pratik-ad { flex: 1; font-size: 11.5px; font-weight: 500; color: #1A3A4A; }
.srv-dd-pratik-alt {
  padding: 10px 16px 14px;
  border-top: 1px solid #F0F5F7;
  display: flex; justify-content: flex-end;
}

.srv-adet { display: flex; align-items: center; gap: 5px; }
.srv-adet-btn {
  width: 26px; height: 26px; border-radius: 5px;
  border: 1.5px solid var(--srv-renk-cizgi-acik); background: #fff;
  color: var(--srv-renk-ana); font-size: 15px; font-weight: 600;
  cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--srv-gecis), background var(--srv-gecis);
}
.srv-adet-btn:hover { border-color: var(--srv-renk-vurgu); background: #F0FDFB; }
.srv-adet-deger {
  min-width: 20px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--srv-renk-ana);
}

.srv-btn {
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--srv-renk-vurgu);
  border: 0; border-radius: 7px;
  padding: 9px 18px; cursor: pointer;
  transition: background var(--srv-gecis);
}
.srv-btn:hover { background: #009E91; }

/* Dropdown ve mobil menü arkasındaki karartma */
.srv-perde {
  display: none;
  position: fixed; inset: 0;
  background: rgba(7,45,64,.35);
  z-index: 190;
}
.srv-perde.acik { display: block; }
.srv-perde--seffaf { background: transparent; }

/* --------------------------------------------------------------------------
   7. MOBİL MENÜ (çekmece)
   -------------------------------------------------------------------------- */
.srv-mnu {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(320px, 86vw);
  background: #fff;
  z-index: 300;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.srv-mnu.acik { transform: none; }

.srv-mnu-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--srv-renk-zemin-koyu);
  color: #fff;
}
.srv-mnu-ust-ad { font-family: var(--srv-font-marka); font-size: 22px; font-weight: 800; }
.srv-mnu-ust-ad em { font-style: normal; font-weight: 400; color: var(--srv-renk-vurgu); }
.srv-mnu-kapat {
  background: none; border: 0; color: #fff; cursor: pointer;
  padding: 6px; border-radius: var(--srv-radius-s);
  display: flex;
}
.srv-mnu-kapat:hover { background: rgba(255,255,255,.1); }

.srv-mnu-baslik {
  padding: 14px 18px 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #9BBCCA;
}
.srv-mnu-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #F0F5F7;
  font-size: 14px; font-weight: 500;
  color: var(--srv-renk-metin); text-decoration: none;
}
.srv-mnu-link:hover { background: #F4FDFC; }
.srv-mnu-link i, .srv-mnu-link svg { color: var(--srv-renk-ana); flex-shrink: 0; width: 17px; text-align: center; }
.srv-mnu-link--vurgu { color: #006D66; font-weight: 700; }

.srv-mnu-alt {
  margin-top: auto;
  padding: 16px 18px;
  background: var(--srv-renk-zemin-acik);
  border-top: 1px solid var(--srv-renk-cizgi-acik);
}
.srv-mnu-wa {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  color: var(--srv-renk-ana); text-decoration: none;
}
.srv-mnu-wa i, .srv-mnu-wa svg { color: var(--srv-renk-wa); }
.srv-mnu-alt-not { margin: 8px 0 0; font-size: 11px; color: #7AAABB; line-height: 1.5; }
.srv-mnu-alt-not a { color: var(--srv-renk-ana); }

/* ==========================================================================
   8. DUYARLI DAVRANIŞ
   ========================================================================== */

/* --- 1200px altı: kolonları daralt --- */
@media (max-width: 1200px) {
  :root { --srv-kol-logo: 200px; --srv-kol-kat: 132px; --srv-kol-sag: 280px; }
  .srv-hdr-aksiyon { padding: 0 10px; }
}

/* --- 1024px altı: duyuru şeridi ve arama ipuçları düşer --- */
@media (max-width: 1024px) {
  :root { --srv-kol-logo: 180px; --srv-kol-kat: 120px; --srv-kol-sag: 250px; }
  .srv-tb-duyuru { display: none; }
  .srv-hdr-ipuclari { display: none; }
  .srv-hdr-aksiyon-alt { display: none; }
  .srv-hdr-aksiyon { height: 40px; }
}

/* --- 900px altı: MOBİL DÜZEN --- */
@media (max-width: 900px) {

  /* Topbar: sadece WhatsApp + hesap */
  .srv-tb .srv-satir {
    grid-template-columns: 1fr auto;
    height: 38px;
  }
  .srv-tb-marka { display: none; }
  .srv-kol--ayrac::after { display: none; }
  .srv-tb-kol-marka { display: none; }
  .srv-tb-kol-wa    { grid-column: 1; }
  .srv-tb-kol-duyuru{ display: none; }
  .srv-tb-kol-hesap { grid-column: 2; }
  .srv-tb-btn-yazi  { display: none; }
  .srv-tb-btn--fav  { display: none; }

  /* Header: iki satır, sarmalı düzen */
  .srv-hdr .srv-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    /* yatay padding yine .srv-kap'tan — bkz. yukarıdaki not */
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .srv-hdr-mobil-btn {
    display: flex; align-items: center; justify-content: center;
    order: 1; flex: 0 0 auto;
    width: 40px; height: 40px;
    border: 1.5px solid var(--srv-renk-cizgi-acik);
    border-radius: var(--srv-radius-m);
    background: #fff; color: var(--srv-renk-ana);
    cursor: pointer;
  }

  .srv-hdr-kol-logo { order: 2; flex: 1 1 auto; justify-content: flex-start; }
  .srv-hdr-logo { align-items: flex-start; }
  .srv-hdr-logo-ad { font-size: 26px; }
  .srv-hdr-logo-ad em { font-size: 24px; }

  .srv-hdr-mobil-sepet {
    display: flex; align-items: center; justify-content: center;
    order: 3; flex: 0 0 auto;
    position: relative;
    width: 40px; height: 40px;
    border-radius: var(--srv-radius-m);
    color: var(--srv-renk-ana); text-decoration: none;
  }
  .srv-hdr-mobil-sepet .srv-tb-sayac {
    position: absolute; top: 2px; right: 0;
  }

  /* Arama tam genişlik, ikinci satır */
  .srv-hdr-kol-arama { order: 4; flex: 1 0 100%; }
  .srv-hdr-arama-input { height: 38px; font-size: 14px; } /* iOS zoom eşiği için 14px+ */

  /* Kategoriler butonu ve aksiyonlar çekmeceye taşındı */
  .srv-hdr-kol-kat { display: none; }
  .srv-hdr-kol-aksiyon { display: none; }

  /* Dropdown'lar mobilde kullanılmıyor */
  .srv-dd { display: none !important; }
}

@media (max-width: 480px) {
  :root { --srv-kap-padding: 14px; }
  .srv-hdr-logo-slogan { display: none; }
  .srv-hdr-logo-ad { font-size: 23px; }
  .srv-hdr-logo-ad em { font-size: 21px; }
  /* Telefon numarası küçük ekranda da kalsın: B2B'de en çok tıklanan öğe. */
  .srv-tb-wa { font-size: 11.5px; }
}


/* --------------------------------------------------------------------------
   9. FONT AWESOME UYUMU
   Inline SVG yerine mevcut FA 5 ikon setini kullanıyoruz (zaten yüklü).
   -------------------------------------------------------------------------- */
.srv-hdr-arama-btn i { color: #fff; font-size: 10px; }
.srv-hdr-kat-ust i   { font-size: 13px; }
.srv-hdr-mobil-btn i { font-size: 17px; }
.srv-hdr-mobil-sepet i { font-size: 19px; }
.srv-tb-btn i { font-size: 12px; flex-shrink: 0; }
.srv-mnu-kapat i { font-size: 18px; }
.srv-dd-satir i.fa-chevron-right { color: #7AAABB; font-size: 10px; flex-shrink: 0; }
.srv-dd-satir-gorsel i { font-size: 13px; }

/* main.css ile olası çakışmaları etkisizleştir:
   Bootstrap/main.css'te <a> ve <button> için gelen kalıtım burada kesiliyor. */
.srv-tb a, .srv-hdr a, .srv-mnu a { text-decoration: none; }
.srv-hdr-aksiyon, .srv-hdr-kat-btn, .srv-adet-btn, .srv-btn { font-family: var(--srv-font-govde); }


/* --------------------------------------------------------------------------
   10. main.css UYUMU
   Aşağıdaki kurallar main.css'teki değerleri yeni header'a göre düzeltir.
   -------------------------------------------------------------------------- */

/* Flash mesajlar main.css'te top:76px (eski header yüksekliği).
   Yeni header daha yüksek — mesajlar header'ın üstüne biniyordu. */
.flash-wrapper { top: 132px; }

/* Mobilde header iki satır (logo + arama) → alt kenarı ~149px */
@media (max-width: 900px) {
  .flash-wrapper { top: 160px; right: 12px; min-width: 0; width: calc(100vw - 24px); }
}

/* main.css'teki genel a:hover rengi yeni bileşenlere sızmasın */
.srv-tb a:hover, .srv-hdr a:hover, .srv-mnu a:hover, .srv-dd a:hover { color: inherit; }
.srv-tb-marka a:hover { color: #fff; }
.srv-hdr-ipucu:hover  { color: var(--srv-renk-ana); }
.srv-mnu-alt-not a    { color: var(--srv-renk-ana); }