/* ============================================
   KARDELEN ÇİÇEKCİNİZ - ANA STİL DOSYASI
   Renkler assets/css/tema.php üzerinden CSS değişkenleriyle gelir.
   ============================================ */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-aile);
  color: var(--renk-metin);
  background: var(--renk-arkaplan);
  font-size: 15px;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 15px; }

/* ---------- Header (referans düzen: sol arama | orta logo | sağ ikonlar) ---------- */
/* Header + kategori menüsü birlikte sabit (sticky) kalır: sayfa kaydırılınca
   üst menü kaybolmasın, arama/sepet/kategori her zaman erişilebilir olsun. */
.site-ust-sabit { position: sticky; top: 0; z-index: 150; }
.site-header { background: #fff; }
.header-ic {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 137px; gap: 20px;
}
.header-sol { display: flex; align-items: center; }
.arama-form {
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 250px;
  border-bottom: 1px solid #dcdcdc; padding-bottom: 7px;
}
.arama-form input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-size: 13.5px; color: var(--renk-metin);
}
.arama-form input::placeholder { color: #a9a9a9; }
.arama-form button { background: none; border: 0; color: #6b6b6b; display: flex; padding: 0; }
.arama-form button:hover { color: var(--renk-vurgu); }

.header-orta { display: flex; justify-content: center; }
/* Logo: sol tarafta çiçek amblemi, sağda site adı (yatay kurgu) */
.logo { display: flex; flex-direction: row; align-items: center; gap: 11px; }
.logo .logo-amblem { height: 58px; width: auto; display: block; }
.logo .logo-metin { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.logo .logo-yazi {
  font-family: var(--font-urun-ad); font-size: 33px; font-weight: 400; letter-spacing: .3px;
  color: var(--renk-baslik); line-height: 1.05;
}
.logo .logo-alt {
  font-family: var(--font-baslik); font-size: 12px; font-weight: 600; letter-spacing: 4.4px;
  color: var(--renk-vurgu); text-transform: uppercase; margin-top: 3px;
}
.logo .logo-slogan {
  font-size: 11px; letter-spacing: 2.5px; color: var(--renk-vurgu); text-transform: lowercase;
}

.header-sag { display: flex; align-items: flex-start; justify-content: flex-end; gap: 30px; }
.ikon-aksiyon {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--renk-metin); position: relative; text-align: center;
  min-width: 46px;
}
.ikon-aksiyon svg { width: 23px; height: 23px; }
.ikon-aksiyon:hover { color: var(--renk-vurgu); }
.sepet-sayac {
  position: absolute; top: -6px; right: 2px; font-style: normal;
  background: var(--renk-indirim); color: #fff; border-radius: 50%;
  min-width: 17px; height: 17px; font-size: 10.5px; display: flex; align-items: center; justify-content: center;
}

/* ---------- Kategori Menüsü (tam genişlik renkli şerit) ---------- */
.ana-menu-bar {
  background: var(--renk-menu-bg);
  border-bottom: 1px solid var(--renk-kenarlik-koyu);
}
.ana-menu { display: flex; justify-content: center; align-items: center; }
.ana-menu > li { position: relative; }
.ana-menu > li > a {
  display: flex; align-items: center; height: 54px; padding: 0 22px;
  font-size: 15px; font-weight: 400; letter-spacing: .2px;
  color: var(--renk-menu-metin);
}
.ana-menu > li:hover > a { background: rgba(0,0,0,.08); }
.ana-menu .alt-menu {
  position: absolute; left: 0; top: 100%; min-width: 230px; background: #fff;
  border: 1px solid var(--renk-kenarlik); box-shadow: 0 8px 24px rgba(0,0,0,.10);
  padding: 6px 0; display: none; z-index: 60;
}
.ana-menu > li:hover .alt-menu { display: block; }
.ana-menu .alt-menu li a { display: block; padding: 9px 18px; font-size: 14px; color: var(--renk-metin); }
.ana-menu .alt-menu li a:hover { color: var(--renk-vurgu); background: #fafafa; }
/* Hamburger: 3 çizgi (masaüstünde gizli) */
.mobil-menu-btn {
  display: none; background: none; border: 0; padding: 6px 2px;
  flex-direction: column; gap: 5px; cursor: pointer;
}
.mobil-menu-btn span { display: block; width: 26px; height: 2px; background: var(--renk-baslik); }
/* Mobil tam ekran menü panelinin başlık barı: masaüstünde kullanılmaz */
.mobil-menu-baslik { display: none; }
/* Hesap bağlantıları sadece mobil menü panelinde görünür */
.ana-menu > li.menu-hesap { display: none; }

/* ---------- Sekme / Yol Haritası ---------- */
.yol-haritasi { font-size: 12.5px; color: var(--renk-metin-ikincil); padding: 14px 0; }
.yol-haritasi a:hover { color: var(--renk-vurgu); }

/* ---------- Anasayfa Üst Alan: Banner + Yan Kolon ---------- */
/* Referans ölçüler: banner 675x277, yan kolon 460px, aradaki boşluk 15px */
.hero-alan { display: grid; grid-template-columns: 1fr 460px; gap: 15px; padding: 20px 0 0; }
.hero-banner {
  position: relative; overflow: hidden; height: 277px;
  display: flex; align-items: center; color: #fff;
}
/* Slayt: üst üste yığılır, sadece .aktif olan görünür (yumuşak geçiş) */
.hero-slayt {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden; z-index: 0;
  transition: opacity .7s ease, visibility .7s ease;
}
.hero-slayt.aktif { opacity: 1; visibility: visible; z-index: 1; }
.hero-banner .hero-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-banner .hero-perde {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(135,27,52,.94) 0%, rgba(135,27,52,.80) 34%, rgba(135,27,52,.15) 62%, rgba(135,27,52,0) 78%);
}
.hero-banner .hero-metin { position: relative; z-index: 2; padding: 0 38px; max-width: 58%; }
.hero-banner .hero-ust {
  display: block; font-size: 11px; letter-spacing: 5px; opacity: .92; margin-bottom: 7px;
  position: relative; padding-top: 12px;
}
.hero-banner .hero-ust::before {
  content: ''; position: absolute; top: 0; left: 0; width: 118px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 8px, transparent 8px 14px);
}
.hero-banner h2 {
  font-family: var(--font-baslik); font-size: 40px; font-weight: 700; letter-spacing: 3px;
  margin: 0 0 6px; line-height: 1;
}
.hero-banner .hero-alt {
  display: block; font-size: 10.5px; letter-spacing: 3.5px; opacity: .9; padding-bottom: 13px;
  position: relative; margin-bottom: 18px;
}
.hero-banner .hero-alt::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 118px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 8px, transparent 8px 14px);
}
.hero-buton {
  display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 1px solid rgba(255,255,255,.85);
  color: #fff; padding: 9px 20px; font-size: 12.5px; letter-spacing: .4px; white-space: nowrap;
}
.hero-buton i { font-size: 8px; font-style: normal; }
.hero-buton:hover { background: #fff; color: var(--renk-vurgu-hover); }
.hero-noktalar { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.hero-noktalar span,
.hero-noktalar button {
  width: 4px; height: 16px; padding: 0; border: 0; border-radius: 0;
  background: rgba(255,255,255,.55); cursor: pointer; transition: background .2s, height .2s;
}
.hero-noktalar button:hover { background: rgba(255,255,255,.85); }
.hero-noktalar span.aktif,
.hero-noktalar button.aktif { background: #fff; height: 22px; }

.hero-yan { display: flex; flex-direction: column; gap: 10px; }
.bolge-kutu { border: 1px solid var(--renk-kenarlik); background: #f9f9f9; padding: 16px 20px; }
.bolge-kutu h2 { margin: 0 0 8px; font-size: 20px; font-weight: 300; color: var(--renk-metin); line-height: 1.3; }
.bolge-kutu p { color: var(--renk-metin); font-size: 13.5px; font-weight: 300; margin: 0 0 10px; line-height: 1.5; }
.bolge-kutu select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--renk-kenarlik); background: #fff; }

/* ---------- Güven Rozetleri (yan kolon, tek satır 4 sütun) ---------- */
.rozet-kutu {
  border: 1px solid var(--renk-kenarlik); background: #fff;
  display: grid; grid-template-columns: repeat(4, 1fr); flex: 1; align-content: center;
  padding: 8px 4px; min-height: 108px;
}
.rozet { text-align: center; padding: 6px 2px; }
.rozet svg { width: 26px; height: 26px; color: var(--renk-vurgu); margin-bottom: 7px; display: inline-block; }
.rozet .baslik { font-weight: 400; font-size: 11px; letter-spacing: .2px; color: var(--renk-metin); line-height: 1.3; }
.rozet .alt { font-size: 11px; color: var(--renk-metin-ikincil); font-weight: 300; line-height: 1.3; }


/* ---------- Bölüm Başlığı ---------- */
.bolum-baslik { text-align: center; margin: 62px 0 10px; }
.bolum-baslik h3 {
  font-family: var(--font-baslik); font-size: 45px; font-weight: 600; color: var(--renk-baslik);
  margin: 0; display: inline-flex; align-items: center; gap: 22px; line-height: 1.2;
}
.bolum-baslik .yaprak { width: 88px; height: 26px; color: var(--renk-yaprak); flex: 0 0 auto; }

/* ---------- Sekmeler ---------- */
.sekme-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 42px; margin-bottom: 34px; }
.sekme-bar button {
  background: none; border: none; padding: 6px 2px;
  font-family: var(--font-baslik); font-size: 30px; font-weight: 300; color: #c3c8cc;
}
.sekme-bar button:hover { color: #93999e; }
.sekme-bar button.aktif { color: var(--renk-baslik); font-weight: 400; }
.sekme-icerik { display: none; }
.sekme-icerik.aktif { display: block; }


/* ---------- Ürün Izgarası & Kartı ---------- */
.urun-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.urun-karti {
  border: 1px solid var(--renk-kenarlik); overflow: hidden; background: #fff;
  transition: box-shadow .2s; display: flex; flex-direction: column;
}
.urun-karti:hover { box-shadow: 0 10px 28px rgba(0,0,0,.09); }
.urun-gorsel-alan { position: relative; aspect-ratio: 1/1; background: #f7f7f8; overflow: hidden; }
.urun-gorsel-alan img { width: 100%; height: 100%; object-fit: cover; }
.gorsel-yer-tutucu { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 46px; color: var(--renk-kenarlik); }
.indirim-etiketi {
  position: absolute; top: 10px; left: 10px; background: var(--renk-indirim); color: #fff;
  font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 3px;
}
.kart-aksiyonlar {
  position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateX(6px); transition: .2s;
}
.urun-karti:hover .kart-aksiyonlar { opacity: 1; transform: translateX(0); }
.kart-aksiyonlar button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--renk-kenarlik); background: #fff;
  font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.kart-aksiyonlar button.aktif-ikon { background: var(--renk-vurgu); color: #fff; border-color: var(--renk-vurgu); }
.hizli-bakis-btn {
  position: absolute; left: 10px; right: 10px; bottom: -40px; transition: bottom .2s;
  background: var(--renk-buton-bg); color: var(--renk-buton-metin); text-align: center; padding: 9px 0;
  font-size: 12.5px; font-weight: 600; border-radius: 3px; border: none;
}
.urun-karti:hover .hizli-bakis-btn { bottom: 10px; }
/* Kart alt bilgi: referansta ürün adı Lobster fontuyla ortalanır, altında GÖNDER butonu */
.urun-bilgi { padding: 20px 14px 22px; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.urun-bilgi h3 {
  font-family: var(--font-urun-ad); font-size: 18px; font-weight: 400; line-height: 1.35;
  margin: 0 0 10px; color: var(--renk-metin); flex: 1;
}
.urun-bilgi h3 a:hover { color: var(--renk-vurgu); }
.fiyat-satir { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 12px; }
.fiyat-yeni { font-size: 17px; font-weight: 700; }
.fiyat-eski { font-size: 13px; color: var(--renk-metin-ikincil); text-decoration: line-through; }
.fiyat-gizli-metin { font-size: 13px; font-weight: 600; color: var(--renk-vurgu); }
.detay-fiyat .fiyat-gizli-metin { font-size: 16px; }
.buton-grup { display: flex; gap: 8px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 22px; border-radius: 5px; font-size: 15px; font-weight: 400; border: 1px solid transparent;
  cursor: pointer; text-align: center; white-space: nowrap;
}
.btn-birincil { background: var(--renk-buton-bg); color: var(--renk-buton-metin); flex: 1; }
.buton-grup .btn-birincil { flex: 0 0 auto; }
.btn-birincil:hover { background: var(--renk-buton-hover); }
.btn-anahat { background: transparent; border-color: var(--renk-kenarlik-koyu); color: var(--renk-metin); }
.btn-anahat:hover { border-color: var(--renk-vurgu); color: var(--renk-vurgu); }
/* WhatsApp butonu her paletle aynı kalır: marka rengi korunur. */
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #1da851; }
.btn-block { width: 100%; }
.btn-lg { padding: 13px 20px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Kategori / Liste Sayfası (referans: tam genişlik, yan menü yok) ---------- */
.sayfa-h1 {
  font-family: var(--font-sayfa-baslik); font-size: 28px; font-weight: 700; color: var(--renk-baslik);
  margin: 8px 0 18px; line-height: 1.3;
}
.liste-arac-cubugu {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--renk-kenarlik); background: #f9f9f9; padding: 12px 16px; margin-bottom: 22px;
}
.liste-arac-cubugu .arac-sol { font-size: 13.5px; color: var(--renk-metin-ikincil); }
.liste-arac-cubugu .arac-sag { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.liste-arac-cubugu label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--renk-metin-ikincil); }
.liste-arac-cubugu select { height: 34px; padding: 0 10px; border: 1px solid var(--renk-kenarlik); background: #fff; font-size: 13px; }
.urun-izgara { padding-bottom: 10px; }
.bos-mesaj { padding: 60px 20px; text-align: center; color: var(--renk-metin-ikincil); grid-column: 1 / -1; }

/* ---------- Sayfalama ---------- */
.sayfalama { display: flex; justify-content: center; gap: 6px; margin: 30px 0 50px; }
.sayfalama a, .sayfalama span {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--renk-kenarlik); border-radius: 4px; font-size: 13px;
}
.sayfalama .aktif { background: var(--renk-buton-bg); color: var(--renk-buton-metin); border-color: var(--renk-buton-bg); }

/* ---------- Ürün Detay Sayfası ---------- */
/* minmax(0,1fr): içeriğin min-content genişliği kolonu taşırmasın */
.urun-detay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 30px 0 50px; }
/* Siparişi tamamla sayfası: solda form, sağda özet */
.siparis-duzen { grid-template-columns: 1.4fr minmax(0, 1fr); }
.urun-galeri .ana-gorsel { border: 1px solid var(--renk-kenarlik); border-radius: 6px; overflow: hidden; aspect-ratio: 1/1; background: #f7f7f8; margin-bottom: 10px; }
.urun-galeri .ana-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kucuk-gorseller { display: flex; gap: 8px; }
.kucuk-gorseller img { width: 70px; height: 70px; object-fit: cover; border-radius: 4px; border: 1px solid var(--renk-kenarlik); cursor: pointer; }
.detay-bilgi h1.urun-h1 {
  font-family: var(--font-urun-ad); font-size: 30px; font-weight: 400; color: var(--renk-baslik);
  margin: 0 0 12px; line-height: 1.25;
}
.detay-fiyat { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.detay-fiyat .yeni { font-size: 28px; font-weight: 700; }
.detay-fiyat .eski { font-size: 16px; text-decoration: line-through; color: var(--renk-metin-ikincil); }
.detay-aciklama { color: var(--renk-metin-ikincil); margin-bottom: 20px; }
.adet-secici { display: flex; align-items: center; border: 1px solid var(--renk-kenarlik); border-radius: 4px; width: fit-content; }
.adet-secici button { width: 36px; height: 40px; background: none; border: none; font-size: 16px; }
.adet-secici input { width: 46px; text-align: center; border: none; height: 40px; }
.satin-al-satir { display: flex; gap: 10px; margin: 20px 0; }

/* Ürün sayfası teslimat seçimleri (referans temayla aynı akış) */
.teslimat-secim { border-top: 1px solid var(--renk-kenarlik); padding-top: 20px; margin-top: 4px; }
.teslimat-secim .secim-alan { margin-bottom: 16px; }
.teslimat-secim label {
  display: block; font-size: 13.5px; color: var(--renk-metin-ikincil); margin-bottom: 7px;
}
.teslimat-secim label em { color: var(--renk-indirim); font-style: normal; }
.teslimat-secim select,
.teslimat-secim input[type="date"] {
  width: 100%; height: 42px; padding: 0 12px; background: #f5f5f5;
  border: 1px solid var(--renk-kenarlik); font-size: 14px; color: var(--renk-metin);
}
.teslimat-secim .adet-alan { max-width: 160px; }
.detay-butonlar { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
/* flex-basis + min-width:0 : uzun buton metni dar ekranda taşma yapmaz, alt satıra iner */
.detay-butonlar .btn { flex: 1 1 170px; min-width: 0; }
.btn-gonder { background: var(--renk-buton-koyu); color: var(--renk-buton-metin); }
.btn-gonder:hover { background: var(--renk-buton-koyu-hover); }
.btn-gonder:disabled { background: #9a9a9a; cursor: not-allowed; }
.detay-alt-aksiyonlar { display: flex; gap: 20px; margin-top: 16px; font-size: 13px; color: var(--renk-metin-ikincil); }
.detay-alt-aksiyonlar button { background: none; border: none; color: inherit; display: flex; align-items: center; gap: 6px; }
.detay-alt-aksiyonlar button:hover, .detay-alt-aksiyonlar .aktif-link { color: var(--renk-vurgu); }
.stok-durum { font-size: 12.5px; color: var(--renk-vurgu); font-weight: 600; margin-bottom: 6px; }

.detay-sekme-bar { display: flex; gap: 24px; border-bottom: 1px solid var(--renk-kenarlik); margin: 40px 0 0; }
.detay-sekme-bar button { background: none; border: none; padding: 12px 0; font-size: 14.5px; font-weight: 600; color: var(--renk-metin-ikincil); border-bottom: 3px solid transparent; }
.detay-sekme-bar button.aktif { color: var(--renk-metin); border-bottom-color: var(--renk-vurgu); }
.detay-sekme-icerik { padding: 24px 0; color: var(--renk-metin-ikincil); }

/* ---------- Hızlı Bakış Modal ---------- */
.modal-arka { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-arka.acik { display: flex; }
.modal-kutu { background: #fff; border-radius: 8px; max-width: 800px; width: 100%; max-height: 90vh; overflow: auto; position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.modal-kapat { position: absolute; top: 10px; right: 14px; font-size: 22px; background: none; border: none; cursor: pointer; z-index: 5; }
.modal-gorsel { aspect-ratio: 1/1; background: #f7f7f8; }
.modal-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.modal-bilgi { padding: 30px; }
.modal-bilgi h2 { margin: 0 0 10px; font-size: 20px; }

/* Sözleşme küçük penceresi: kullanıcı sayfadan ayrılmadan içeriği okuyabilir. */
.modal-kutu-sozlesme { background: #fff; border-radius: 8px; width: 100%; max-width: 620px; height: 82vh; max-height: 640px; position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal-kutu-sozlesme iframe { flex: 1; width: 100%; border: 0; display: block; }

/* ---------- Sepet ---------- */
.sepet-tablo { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.sepet-tablo th { text-align: left; border-bottom: 2px solid var(--renk-kenarlik); padding: 12px 10px; font-size: 12.5px; text-transform: uppercase; color: var(--renk-metin-ikincil); }
.sepet-tablo td { padding: 14px 10px; border-bottom: 1px solid var(--renk-kenarlik); vertical-align: middle; }
/* Kolon genişlikleri: ürün adı esner, diğerleri sabit kalır */
.sepet-tablo th:nth-child(2), .sepet-tablo td:nth-child(2) { width: 110px; white-space: nowrap; }
.sepet-tablo th:nth-child(3), .sepet-tablo td:nth-child(3) { width: 130px; }
.sepet-tablo th:nth-child(4), .sepet-tablo td:nth-child(4) { width: 110px; white-space: nowrap; font-weight: 600; }
.sepet-tablo th:nth-child(5), .sepet-tablo td:nth-child(5) { width: 70px; text-align: right; }
.sepet-urun-satir { display: flex; align-items: center; gap: 12px; }
.sepet-urun-satir img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.sepet-urun-satir a { line-height: 1.4; }
.sepet-sil { color: var(--renk-indirim); font-size: 12.5px; background: none; border: none; }
.sepet-ozet { max-width: 380px; margin-left: auto; border: 1px solid var(--renk-kenarlik); border-radius: 6px; padding: 20px; }
.sepet-ozet .satir { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.sepet-ozet .toplam { font-weight: 700; font-size: 17px; border-top: 1px solid var(--renk-kenarlik); margin-top: 8px; padding-top: 14px; }
.bos-sepet { text-align: center; padding: 70px 20px; }
.bos-sepet .ikon { font-size: 60px; color: var(--renk-kenarlik); margin-bottom: 16px; }

/* ---------- Form ---------- */
.form-alan { margin-bottom: 16px; }
.form-alan label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-alan input, .form-alan select, .form-alan textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--renk-kenarlik); border-radius: 4px; font-size: 14px;
}
.form-alan input:focus, .form-alan select:focus, .form-alan textarea:focus { outline: none; border-color: var(--renk-vurgu); }
.form-satir-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-kutu { max-width: 480px; margin: 0 auto; border: 1px solid var(--renk-kenarlik); border-radius: 8px; padding: 30px; }
.form-kutu h1 { text-align: center; font-size: 22px; margin: 0 0 20px; }
.form-mesaj-hata { background: #fdecec; color: var(--renk-indirim); padding: 10px 14px; border-radius: 4px; font-size: 13.5px; margin-bottom: 16px; }
.form-mesaj-basari { background: #eaf6f0; color: #1f7a4d; padding: 10px 14px; border-radius: 4px; font-size: 13.5px; margin-bottom: 16px; }

/* ---------- İletişim Sayfası ---------- */
/* Harita, referans site gibi container dışında tam genişlikte sayfanın en üstünde. */
.iletisim-harita-tam { width: 100%; height: 400px; }
.iletisim-harita-tam iframe { width: 100%; height: 100%; border: 0; display: block; }

.iletisim-izgara { display: grid; grid-template-columns: 320px 1fr; gap: 30px; margin: 30px 0 60px; align-items: start; }

.iletisim-bilgi-liste { border: 1px solid var(--renk-kenarlik); background: #fff; }
.iletisim-bilgi-satir { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-bottom: 1px solid var(--renk-kenarlik); }
.iletisim-bilgi-satir:last-child { border-bottom: 0; }
.iletisim-bilgi-satir .ikon-cerceve { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--renk-vurgu); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.iletisim-bilgi-satir .ikon-cerceve svg { width: 20px; height: 20px; color: var(--renk-vurgu); }
.iletisim-bilgi-satir h4 { margin: 0 0 4px; font-size: 14px; color: var(--renk-baslik); }
.iletisim-bilgi-satir p { margin: 0; font-size: 13px; color: var(--renk-metin-ikincil); line-height: 1.5; }

.iletisim-form-kutu { border: 1px solid var(--renk-kenarlik); background: #fff; padding: 34px; }
.iletisim-form-kutu h3 { margin-top: 0; font-size: 17px; }

.odeme-secenek { display: flex; gap: 14px; margin-bottom: 20px; }
.odeme-secenek label {
  flex: 1; border: 1px solid var(--renk-kenarlik); border-radius: 6px; padding: 14px; text-align: center;
  cursor: pointer; font-size: 13.5px; font-weight: 600;
}
.odeme-secenek input { display: none; }
.odeme-secenek input:checked + span { color: var(--renk-vurgu); }
.odeme-secenek label:has(input:checked) { border-color: var(--renk-vurgu); background: var(--renk-yumusak-zemin); }

/* ---------- Sipariş Onay & Takip ---------- */
.onay-kutu { text-align: center; max-width: 560px; margin: 40px auto; padding: 40px 30px; border: 1px solid var(--renk-kenarlik); border-radius: 8px; }
.onay-kutu .ikon { font-size: 60px; color: var(--renk-vurgu); margin-bottom: 16px; }
.siparis-no-kutu { background: #fafafa; border: 1px dashed var(--renk-kenarlik); border-radius: 6px; padding: 14px; font-size: 20px; font-weight: 700; letter-spacing: 1px; margin: 16px 0; }
/* Sipariş onay sayfasında seçilen ödeme yöntemine göre gösterilen bilgi kutusu */
.odeme-bilgi-kutu { margin-top: 16px; text-align: left; border-radius: 8px; padding: 14px 16px; font-size: 13.5px; line-height: 1.55; }
.odeme-bilgi-kutu p { margin: 4px 0 0; }
.odeme-bilgi-kutu .iban-no { font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--renk-baslik); }
.odeme-bilgi-havale { background: #f8f5ee; border: 1px solid #e8e2d0; }
.odeme-bilgi-kapida { background: #eef7ee; border: 1px solid #cfe8cf; }
.onay-butonlar { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.onay-butonlar .btn { flex: 1 1 170px; min-width: 0; }
/* Sipariş onay sayfasında müşteri WhatsApp'ı görmeden sayfayı kapatmasın diye
   dikkat çekici, sarı zeminli bir uyarı kutusu. */
.onay-uyari {
  margin-top: 16px; text-align: left; background: #fff6e0; border: 1px solid #f0d98c;
  border-radius: 8px; padding: 13px 16px; font-size: 13.5px; line-height: 1.55; color: #6b5310;
}
.onay-uyari strong { color: #8a6300; }
.takip-zaman-hatti { display: flex; justify-content: space-between; margin: 40px 0; }
.takip-adim { flex: 1; text-align: center; position: relative; }
.takip-adim::before {
  content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--renk-kenarlik); z-index: 0;
}
.takip-adim:first-child::before { display: none; }
.takip-adim.tamam::before { background: var(--renk-vurgu); }
.takip-nokta {
  width: 36px; height: 36px; border-radius: 50%; background: var(--renk-kenarlik); color: #fff;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; position: relative; z-index: 1; font-size: 15px;
}
.takip-adim.tamam .takip-nokta { background: var(--renk-vurgu); }
.takip-adim .etiket { font-size: 12.5px; font-weight: 600; }
.takip-adim.tamam .etiket { color: var(--renk-vurgu); }

/* ---------- Footer ---------- */
.site-footer { background: #f7f7f8; margin-top: 50px; border-top: 1px solid var(--renk-kenarlik); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; padding: 44px 0; }
.footer-kolon h4 { font-size: 14px; margin: 0 0 16px; }
.footer-kolon p, .footer-kolon a { font-size: 13px; color: var(--renk-metin-ikincil); }
.footer-kolon ul li { margin-bottom: 8px; }
.footer-kolon a:hover { color: var(--renk-vurgu); }
.footer-kolon a.btn-whatsapp, .footer-kolon a.btn-whatsapp:hover { color: #fff; }
.footer-sosyal { display: flex; gap: 10px; margin-top: 14px; }
.footer-sosyal a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--renk-kenarlik); display: flex; align-items: center; justify-content: center; }
.alt-footer { border-top: 1px solid var(--renk-kenarlik); padding: 16px 0; text-align: center; font-size: 12.5px; color: var(--renk-metin-ikincil); }

/* ---------- WhatsApp Sabit Buton ---------- */
.whatsapp-sabit {
  position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.25); z-index: 100; transition: background .15s, transform .15s;
}
.whatsapp-sabit:hover { background: #1da851; transform: scale(1.06); }

/* ---------- Mobil Alt Bar (Sipariş Takip / Hemen Ara / Sepetim) ---------- */
/* Sadece dar ekranda ve admin panelden açık ise görünür (bkz. body.alt-bar-aktif) */
.mobil-alt-bar { display: none; }

/* WhatsApp ikonu: bulunduğu butonun yazı rengini devralır */
.wa-ikon { flex: 0 0 auto; display: block; }
.buton-grup .btn-whatsapp { padding: 7px 12px; }

/* ---------- Karşılaştırma Tablosu ---------- */
.karsilastir-tablo { width: 100%; border-collapse: collapse; }
.karsilastir-tablo th, .karsilastir-tablo td { border: 1px solid var(--renk-kenarlik); padding: 12px; text-align: center; font-size: 13.5px; }
.karsilastir-tablo th { background: #fafafa; }
.karsilastir-tablo img { width: 90px; height: 90px; object-fit: cover; margin: 0 auto; border-radius: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Referans mobil header: solda hamburger, ortada logo, sağda ikonlar (tek satır) */
  .header-ic { display: flex; align-items: center; height: auto; padding: 12px 15px; gap: 10px; }
  .mobil-menu-btn { order: -1; flex: 0 0 auto; }
  .header-orta { flex: 1 1 auto; min-width: 0; }
  .header-sag { flex: 0 0 auto; }
  /* Referans temada mobilde tam genişlik arama satırı yok */
  .header-sol { display: none; }

  /* Referans mobil sekmeler: 3 eşit renkli segment, ortalı beyaz yazı */
  .sekme-bar {
    display: flex; flex-wrap: nowrap; justify-content: center;
    gap: 5px; margin-bottom: 24px;
  }
  .sekme-bar button {
    flex: 1 1 0; min-width: 0; height: 48px; padding: 5px 8px;
    background: var(--renk-menu-bg); color: var(--renk-menu-metin);
    font-family: var(--font-baslik); font-size: 14px; font-weight: 400;
    text-align: center; border: 0; border-radius: 0; line-height: 1.25;
  }
  .sekme-bar button:hover { color: var(--renk-menu-metin); }
  .sekme-bar button.aktif {
    background: var(--renk-vurgu-koyu); color: var(--renk-menu-metin);
    font-weight: 400; border-bottom-color: transparent;
  }
  .arama-form { max-width: 100%; }
  .header-orta { justify-content: flex-start; }
  /* Hesap ikonu mobilde hamburger menüye taşındı; boşalan yer logoya ayrıldı */
  .ikon-hesap { display: none; }
  .header-sag { gap: 20px; }
  .logo { gap: 9px; }
  .logo .logo-amblem { height: 46px; }
  .logo .logo-yazi { font-size: 27px; }
  .logo .logo-alt { font-size: 10px; letter-spacing: 3.4px; }
  .ikon-aksiyon svg { width: 25px; height: 25px; }
  .ana-menu-bar .container { position: relative; }

  /* Alt bar admin panelden açıksa: header'daki Sipariş Takip/Hemen Ara/Sepetim
     ikonları kalkar, yerine sayfanın altında sabit bir menü çubuğu gelir.
     Logo, boşalan alanda daha belirgin (büyük) görünür. */
  body.alt-bar-aktif .header-sag { display: none; }
  body.alt-bar-aktif .header-orta { justify-content: center; }
  body.alt-bar-aktif .logo .logo-amblem { height: 56px; }
  body.alt-bar-aktif .logo .logo-yazi { font-size: 31px; }
  body.alt-bar-aktif .logo .logo-alt { font-size: 11px; letter-spacing: 3.8px; }
  body.alt-bar-aktif { padding-bottom: 62px; }
  body.alt-bar-aktif .whatsapp-sabit { bottom: 78px; }
  .hero-alan { grid-template-columns: 1fr; gap: 12px; padding: 10px 0 0; }
  /* Referans: banner mobilde ekranın iki yanına tam yayılır ve yüksekliği dardır
     (360x148 ≈ 2.43:1). Container'ın 15px yan boşluğu negatif margin ile iptal edilir. */
  .hero-banner {
    margin-left: -15px; margin-right: -15px;
    height: auto; aspect-ratio: 360 / 152; min-height: 148px;
  }
  .hero-banner .hero-metin { max-width: 74%; padding: 0 20px; }
  .hero-banner .hero-ust { font-size: 9.5px; letter-spacing: 3.4px; padding-top: 8px; margin-bottom: 5px; }
  .hero-banner .hero-ust::before { width: 84px; }
  .hero-banner h2 { font-size: 26px; letter-spacing: 2px; margin-bottom: 4px; }
  .hero-banner .hero-alt { font-size: 9px; letter-spacing: 2.4px; padding-bottom: 8px; margin-bottom: 11px; }
  .hero-banner .hero-alt::after { width: 84px; }
  .hero-buton { padding: 6px 14px; font-size: 11px; }
  .hero-noktalar { right: 8px; }
  .hero-yan { gap: 10px; }
  .rozet-kutu { grid-template-columns: repeat(4, 1fr); }
  .iletisim-izgara { grid-template-columns: 1fr; }
  .iletisim-form-kutu { padding: 22px; }
  .iletisim-harita-tam { height: 260px; }
  .bolum-baslik { margin: 26px 0 12px; }
  /* Yapraklar başlığı ikinci satıra itmesin: süslemeleri küçültüp metni tek satırda tut */
  .bolum-baslik h3 { font-size: 26px; gap: 10px; white-space: nowrap; }
  .bolum-baslik h3 .yaprak { width: 60px; height: 18px; flex: 0 1 auto; min-width: 0; }
  .urun-izgara { grid-template-columns: repeat(2, 1fr); }
  .liste-arac-cubugu { flex-direction: column; align-items: flex-start; }
  .sayfa-h1 { font-size: 22px; }
  .urun-detay { grid-template-columns: minmax(0, 1fr); }
  .siparis-duzen { grid-template-columns: minmax(0, 1fr); }
  /* Tek kolona düşünce özet formun altında kalıyordu; kullanıcı ne sipariş
     ettiğini görmeden form dolduruyordu. Mobilde özeti formun üstüne al. */
  .siparis-ozet-kolon { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Referans mobil menü: hamburger ile açılan, ekranın tamamını değil
     sol taraftan kayan bir çekmece (drawer) panel. Arkada kararan perde
     (menu-perde) ile ana içerik hafifçe görünür, dışına dokununca kapanır. */
  .ana-menu-bar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; background: #fff;
    display: flex; flex-direction: column; overflow-y: auto; border-bottom: 0;
    width: 82vw; max-width: 320px;
    transform: translateX(-100%); transition: transform .28s ease;
    box-shadow: 6px 0 24px rgba(0,0,0,.18);
  }
  .ana-menu-bar.acik { transform: translateX(0); }
  .menu-perde {
    display: none; position: fixed; inset: 0; z-index: 199;
    background: rgba(0,0,0,.45); opacity: 0; transition: opacity .28s ease;
  }
  body.menu-acik .menu-perde { display: block; opacity: 1; }
  .mobil-menu-baslik {
    display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 auto; height: 52px; padding: 0 8px 0 16px;
    background: var(--renk-menu-bg); color: var(--renk-menu-metin);
    font-family: var(--font-baslik); font-size: 17px; letter-spacing: 1.5px;
  }
  .mobil-menu-kapat {
    background: none; border: 0; color: inherit;
    font-size: 32px; line-height: 1; padding: 0 10px; cursor: pointer;
  }
  /* Panel flex kolon olduğu için container'ın "margin: 0 auto"su genişlemeyi
     engelliyordu (auto yan margin, align-self:stretch'i iptal eder). */
  .ana-menu-bar .container { padding: 0; max-width: none; margin: 0; width: 100%; }
  /* Masaüstündeki ortalama sıfırlanır; satırlar tam genişlik olur */
  .ana-menu { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .ana-menu > li { border-bottom: 1px solid #e8e8e8; }
  .ana-menu > li:hover > a { background: none; }
  .ana-menu > li > a { height: auto; padding: 15px 18px; color: var(--renk-metin); font-size: 15px; }
  /* Akordeon: alt kategoriler kapalı başlar, başlığa dokununca açılır */
  .ana-menu > li.alt-menulu > a { justify-content: space-between; }
  .ana-menu > li.alt-menulu > a::after {
    content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 12px;
    border-right: 2px solid var(--renk-vurgu); border-bottom: 2px solid var(--renk-vurgu);
    transform: translateY(-2px) rotate(45deg); transition: transform .2s;
  }
  .ana-menu > li.alt-menulu.acik > a::after { transform: translateY(2px) rotate(-135deg); }
  .ana-menu .alt-menu {
    position: static; display: none; box-shadow: none; border: 0;
    min-width: 0; padding: 4px 0 8px; background: #fafafa;
  }
  .ana-menu > li.alt-menulu.acik .alt-menu { display: block; }
  .ana-menu .alt-menu li a { padding: 10px 32px; font-size: 14px; }
  /* Giriş/Kayıt panelin en altında, ikonlu ve ayrı bir blok olarak durur */
  .ana-menu > li.menu-hesap { display: block; border-bottom: 0; }
  .ana-menu > li.menu-hesap:first-of-type { border-top: 8px solid #f2f2f2; }
  .ana-menu > li.menu-hesap > a { display: flex; align-items: center; gap: 10px; color: var(--renk-vurgu); }
  .ana-menu > li.menu-hesap svg { width: 19px; height: 19px; flex: 0 0 auto; }
  /* Panel açıkken arka sayfa kaymasın */
  body.menu-acik { overflow: hidden; }
  .mobil-menu-btn { display: flex; }
  .modal-kutu { grid-template-columns: 1fr; }

  /* Mobil alt bar: header'daki 3 aksiyon buraya taşındığında görünür */
  body.alt-bar-aktif .mobil-alt-bar {
    display: flex; align-items: stretch; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    background: #fff; border-top: 1px solid var(--renk-kenarlik);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 12px rgba(0,0,0,.06);
  }
  body.alt-bar-aktif .mobil-alt-bar .ikon-aksiyon {
    flex: 1 1 0; min-width: 0; padding: 4px 2px;
  }
  body.alt-bar-aktif .mobil-alt-bar .ikon-aksiyon span {
    font-size: 10.5px; white-space: nowrap;
  }
}
@media (max-width: 700px) {
  /* Sepet tablosu dar ekranda taşmasın: her satır bir kart olur */
  .sepet-tablo thead { display: none; }
  .sepet-tablo, .sepet-tablo tbody, .sepet-tablo tr, .sepet-tablo td { display: block; width: auto; }
  .sepet-tablo { border-collapse: separate; }
  .sepet-tablo tr {
    border: 1px solid var(--renk-kenarlik); border-radius: 8px;
    padding: 14px; margin-bottom: 12px; position: relative;
  }
  .sepet-tablo td { border-bottom: 0; padding: 5px 0; }
  .sepet-tablo td:nth-child(2),
  .sepet-tablo td:nth-child(3),
  .sepet-tablo td:nth-child(4),
  .sepet-tablo td:nth-child(5) { width: auto; text-align: left; }
  /* Etiketli hücreler: "Fiyat: 450,00 ₺" biçiminde iki yana yaslı */
  .sepet-tablo td[data-etiket] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .sepet-tablo td[data-etiket]::before {
    content: attr(data-etiket);
    font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--renk-metin-ikincil); flex: 0 0 auto;
  }
  .sepet-tablo td:first-child { padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--renk-kenarlik); padding-right: 62px; }
  .sepet-tablo .sepet-satir-toplam { font-size: 15.5px; }
  /* "Kaldır" butonu kartın sağ üst köşesine sabitlenir */
  .sepet-tablo .sepet-sil-hucre { position: absolute; top: 12px; right: 12px; padding: 0; }
  .sepet-ozet { max-width: 100%; margin-left: 0; }
}
@media (max-width: 560px) {
  /* Çok küçük ekranda logoyu tek satırda tut, ikon yazılarını küçült */
  .logo .logo-amblem { height: 40px; }
  .logo .logo-yazi { font-size: 23px; }
  .logo .logo-alt { font-size: 8.5px; letter-spacing: 2.6px; }
  .header-sag { gap: 15px; }
  .ikon-aksiyon svg { width: 23px; height: 23px; }
  .ikon-aksiyon span { font-size: 9px; }
  .rozet-kutu { grid-template-columns: repeat(2, 1fr); min-height: 0; padding: 10px 4px; }
  .urun-izgara { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-satir-2 { grid-template-columns: 1fr; }

  /* Footer'daki bağlantı listeleri (Kurumsal/Kategoriler) mobilde akordeona
     döner: sadece başlık görünür, dokununca listesi açılır. Footer kısalır. */
  .footer-akordeon { border-top: 1px solid var(--renk-kenarlik); padding-top: 0; }
  .footer-akordeon h4 {
    cursor: pointer; margin: 0; padding: 14px 0; display: flex;
    align-items: center; justify-content: space-between;
  }
  .footer-akordeon h4::after { content: '+'; font-size: 18px; font-weight: 400; color: var(--renk-metin-ikincil); }
  .footer-akordeon.acik h4::after { content: '\2212'; }
  .footer-akordeon ul { display: none; margin: 0; padding-bottom: 14px; }
  .footer-akordeon.acik ul { display: block; }
}