/* ============================================
   TemaSatış — site stilleri
   Palet: siyah zemin + kırmızı vurgu
   Yerleşim: solda sabit dikey menü, sağda içerik
   ============================================ */

:root {
  --renk-vurgu: #d90429;
  --renk-vurgu-acik: #ff2e4d;
  --renk-zemin: #060606;
  --renk-zemin-2: #101010;
  --renk-kart: #161616;
  --renk-baslik: #ffffff;
  --renk-metin: #9f9f9f;
  --renk-cizgi: rgba(255, 255, 255, 0.08);
  --degrade: linear-gradient(to right, #d90429, #ff2e4d);
  --font-baslik: "Rajdhani", sans-serif;
  --font-metin: "Rubik", sans-serif;
  --radius: 10px;
  --gecis: all 0.3s ease-in-out;
  --menu-genislik: 300px; /* sosyal ikonların tek satırda rahat sığması için genişletildi */
  --sayfa-yan: 48px; /* içerik alanının yan boşluğu (footer'ın tam genişliğe taşması bunu kullanır) */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Metin ayarları admin > Global Ayarlar > Yazı Ayarları'ndan gelir */
body {
  overflow-x: clip; /* tam sayfa hero'nun yatay kaydırma çubuğu açmasını önler */
  background: var(--renk-zemin);
  color: var(--metin-renk, var(--renk-metin));
  font-family: var(--font-metin);
  font-size: var(--metin-boyut, 16px);
  font-weight: var(--metin-kalinlik, 400);
  text-align: var(--metin-hiza, left);
  line-height: 1.75;
}

/* Başlıklar (h1, h2) ve alt başlıklar (h3, h4) ayrı ayarlanır */
h1, h2 {
  font-family: var(--font-baslik);
  color: var(--baslik-renk, var(--renk-baslik));
  font-weight: var(--baslik-kalinlik, 700);
  text-align: var(--baslik-hiza, left);
  line-height: 1.2;
}

h3, h4 {
  font-family: var(--altbaslik-font, var(--font-baslik));
  color: var(--altbaslik-renk, var(--renk-baslik));
  font-weight: var(--altbaslik-kalinlik, 600);
  text-align: var(--altbaslik-hiza, left);
  line-height: 1.2;
}

h1 { font-size: var(--baslik-boyut, 48px); }
h2 { font-size: calc(var(--baslik-boyut, 48px) * 0.72); margin-bottom: 28px; }
h3 { font-size: var(--altbaslik-boyut, 22px); }
h4 { font-size: calc(var(--altbaslik-boyut, 22px) * 0.85); }

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

.text-gradient {
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  color: var(--etiket-renk, var(--renk-vurgu-acik));
  font-family: var(--etiket-font, var(--font-baslik));
  font-weight: var(--etiket-kalinlik, 600);
  font-size: var(--etiket-boyut, 14px);
  text-align: var(--etiket-hiza, left);
  letter-spacing: 3px;
  margin-bottom: 12px;
}

/* ---------- SOL MENÜ ---------- */
.kenar-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--menu-genislik);
  /* --sidebar-arkaplan admin > Header'dan ayarlanır; admin panelinde bu değişken
     tanımlı olmadığı için oradaki sidebar her zaman sabit --renk-zemin-2 kalır */
  background: var(--sidebar-arkaplan, var(--renk-zemin-2));
  border-right: 1px solid var(--renk-cizgi);
  display: flex;
  flex-direction: column;
  padding: 36px 28px;
  z-index: 100;
  overflow-y: auto; /* menü öğeleri çoğalınca (ör. admin paneli) taşmasın, kaysın */
}

.logo {
  font-family: var(--font-baslik);
  font-size: 30px;
  font-weight: 700;
  /* --baslik-renk sadece SİTE sayfalarında tanımlıdır (header.ejs);
     admin panelinde bu değişken yok, otomatik olarak sabit renge düşer */
  color: var(--baslik-renk, var(--renk-baslik));
  margin-bottom: 48px;
}

.logo span {
  color: var(--renk-vurgu-acik);
}

.menu-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--metin-renk, var(--renk-metin));
  padding: 11px 16px;
  border-radius: var(--radius);
  border-left: 3px solid transparent;
  transition: var(--gecis);
}

.menu-links svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* Üzerine gelince kırmızı dolgu */
.menu-links a:hover {
  color: #fff;
  background: var(--renk-vurgu);
}

.menu-links a.aktif {
  color: var(--baslik-renk, var(--renk-baslik));
  background: rgba(217, 4, 41, 0.12);
  border-left-color: var(--renk-vurgu);
}

/* Marka bloğu: logo, kurum adı (h1) ve slogan alt alta, hepsi kendi içinde ortalı */
.marka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  text-align: center;
}

.marka-logo {
  max-width: var(--logo-boyut, 56px);
  max-height: var(--logo-boyut, 56px);
  object-fit: contain;
}

/* Kurum adı + slogan'ı birlikte dikeyde ortalayan iç sarmalayıcı */
.marka-yazi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

/* Kurum adı 3 ayrı kelimeden oluşur, her biri kendi font/renk stilini kullanır */
.kurum-adi {
  text-align: center;
  /* 1'e yakın line-height: metnin görünmez "kutu" boşluğunu azaltır, logo ile
     arasındaki boşluk sadece .marka'daki gerçek gap kadar (10px) görünür */
  line-height: 1.05;
  margin: 0;
  word-wrap: break-word;
  max-width: 100%;
  /* Koyu zemin üzerinde beyaza yakın renkler ince fontlarda soluk/gri görünebilir;
     bunlar metnin tam parlaklığında, "dolgun" görünmesini sağlar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.kurum-adi span {
  /* İnce kontur: rengin göz önünde daha "dolu" ve keskin görünmesini sağlar,
     özellikle beyaza yakın tonlarda soluk/gri hissini ortadan kaldırır */
  -webkit-text-stroke: 0.4px currentColor;
}

.kurum-adi .kelime-1 {
  font-family: var(--kelime1-font, var(--font-baslik));
  font-size: var(--kelime1-boyut, 28px);
  font-weight: var(--kelime1-kalinlik, 700);
  color: var(--kelime1-renk, #ffffff);
}

.kurum-adi .kelime-2 {
  font-family: var(--kelime2-font, var(--font-baslik));
  font-size: var(--kelime2-boyut, 28px);
  font-weight: var(--kelime2-kalinlik, 700);
  color: var(--kelime2-renk, #ff2e4d);
}

.kurum-adi .kelime-3 {
  font-family: var(--kelime3-font, var(--font-baslik));
  font-size: var(--kelime3-boyut, 28px);
  font-weight: var(--kelime3-kalinlik, 700);
  color: var(--kelime3-renk, #ffffff);
}

.marka-slogan {
  font-family: var(--slogan-font, var(--font-metin));
  font-size: var(--slogan-boyut, 13px);
  font-weight: var(--slogan-kalinlik, 400);
  color: var(--slogan-renk, var(--renk-metin));
  text-align: center;
  line-height: 1.35;
  margin: 0;
  word-wrap: break-word;
  max-width: 100%;
}

/* Admin sol menüsü */
.admin-etiket {
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--renk-vurgu-acik);
  margin: -36px 0 32px;
}

.menu-emoji {
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.siteye-don {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 16px;
  color: var(--renk-metin);
  padding: 10px 14px;
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  text-align: center;
  transition: var(--gecis);
}

.siteye-don:hover {
  color: #fff;
  background: var(--renk-vurgu);
  border-color: var(--renk-vurgu);
}

.admin-kullanici {
  font-size: 14px;
  color: var(--renk-metin);
  margin-bottom: 12px;
}

.admin-alt-butonlar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cikis-buton {
  width: 100%;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 16px;
  color: var(--renk-vurgu-acik);
  background: transparent;
  padding: 10px 14px;
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--gecis);
}

.cikis-buton:hover {
  color: #fff;
  background: var(--renk-vurgu);
  border-color: var(--renk-vurgu);
}

/* ---------- Admin giriş ekranı ---------- */
.giris-sayfasi {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--renk-zemin);
  padding: 24px;
}

.giris-kutu {
  width: 100%;
  max-width: 380px;
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 40px 32px;
}

.giris-logo {
  display: block;
  text-align: center;
  margin-bottom: 8px;
}

.giris-buton {
  width: 100%;
  margin-top: 8px;
  text-align: center;
}

/* Menünün altı: sosyal medya */
.sosyal-alan {
  margin-top: auto;
  border-top: 1px solid var(--renk-cizgi);
  padding-top: 24px;
}

/* ---------- Mobil üst şerit + hamburger (masaüstünde tamamen gizli) ---------- */
.mobil-ust-bar,
.hamburger-buton {
  display: none;
}

/* İki class'lı seçici (.mobil-iletisim-cta.btn) kasıtlı — .btn'nin display:inline-flex
   kuralı dosyada bu kuraldan sonra geldiği için tek class'la ezilirdi */
.mobil-iletisim-cta.btn {
  display: none;
}

.marka-satir {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Vitrin ile footer arasındaki buton: hem mobil hem masaüstünde görünür,
   içeriği kadar geniş ve ortalanmış (aynı sebeple compound seçici kullanıldı) */
.genel-iletisim-cta.btn {
  display: flex;
  width: fit-content;
  margin: 8px auto 0;
}

.sosyal-baslik {
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--metin-renk, var(--renk-metin));
  margin-bottom: 16px;
}

.sosyal-ikonlar {
  display: flex;
  flex-wrap: wrap; /* ikon sayısı artarsa sığmayan ikinci satıra insin, sıkışıp ovalleşmesin */
  gap: 8px;
}

.sosyal-ikonlar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0; /* dar alanda daralıp ovalleşmesin, her zaman tam daire kalsın */
  border-radius: 50%;
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  /* Hover'da marka renkleri (WhatsApp yeşili, Facebook mavisi vb.) aynı kalır,
     sadece varsayılan (hover olmayan) ikon rengi metin rengine bağlanır */
  color: var(--metin-renk, var(--renk-metin));
  transition: var(--gecis);
}

.sosyal-ikonlar svg {
  width: 17px;
  height: 17px;
}

.sosyal-ikonlar a:hover {
  color: #fff;
  background: var(--renk-vurgu);
  border-color: var(--renk-vurgu);
  transform: translateY(-3px);
}

/* Her platform kendi marka rengiyle vurgulanır */
.sosyal-ikonlar a.whatsapp:hover {
  background: #25d366;
  border-color: #25d366;
}

.sosyal-ikonlar a.facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
}

.sosyal-ikonlar a.instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497, #fdf497 10%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-color: transparent;
}

.sosyal-ikonlar a.youtube:hover {
  background: #ff0000;
  border-color: #ff0000;
}

/* X (eski Twitter): marka rengi siyah-beyaz — beyaz zemin üzerinde siyah ikon */
.sosyal-ikonlar a.x-ikon:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

/* ---------- İÇERİK ALANI ---------- */
/* Bölümler, menü dışında kalan alanda yatayda ortalanır */
.icerik {
  margin-left: var(--menu-genislik);
  padding: 0 var(--sayfa-yan);
}

.icerik > * {
  max-width: 1144px;
  margin-left: auto;
  margin-right: auto;
}

/* Tam sayfa hero ortalama kuralından muaftır: ekranı baştan başa kaplar */
.icerik > .hero-medyali {
  max-width: none;
  margin-left: -48px;
  margin-right: 0;
}

.bolum {
  padding: 64px 0;
}

.bolum-alt {
  border-top: 1px solid var(--renk-cizgi);
}

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: var(--radius);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  transition: var(--gecis);
  border: 2px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--degrade);
  color: #fff;
  border-radius: 999px; /* pil (hap) şeklinde buton */
}

/* Ok metnin sağında başlar; üzerine gelince metnin soluna geçer
   (flex-direction ters çevrilerek — arka planda ok/metin sırası değişir) */
.btn-primary::after {
  content: "→";
  transition: transform 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(217, 4, 41, 0.4);
  flex-direction: row-reverse;
}

/* ---------- Hero ---------- */
/* Kenarlıklı bir bant görünümü: içerik sol menüden ve kenarlardan mesafeli durur */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: 28px;
  border-radius: var(--radius);
  padding: 80px 56px 48px;
  background:
    radial-gradient(ellipse 55% 45% at 80% 10%, rgba(217, 4, 41, 0.14), transparent),
    radial-gradient(ellipse 45% 40% at 10% 90%, rgba(255, 46, 77, 0.07), transparent);
}

/* Admin'den yüklenen resim/video arka planı */
.hero-medya {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Resim/video seçiliyse hero tam sayfa olur: içerik alanının
   dolgu ve genişlik sınırlarından taşarak tüm ekranı kaplar */
.hero-medyali {
  width: calc(100vw - var(--menu-genislik));
  margin-left: -48px;
  margin-top: 0;
  border-radius: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 48px 0 0;
}

/* Yazılar: menü kenarından 150px içeride, dikeyde ortalı */
.hero-medyali .hero-icerik {
  margin: auto 0;
  padding-left: 150px;
  padding-right: 56px;
}

/* Kutular: hero'nun dibinden 100px yukarıda, iki yandan 150px mesafeli */
.hero-medyali .hero-kutular {
  margin: 0 150px 100px;
}

/* Medya üzerine koyu örtü: yazılar her zaman okunsun */
.hero-medyali::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6, 6, 6, 0.88), rgba(6, 6, 6, 0.45));
  z-index: 1;
}

.hero-icerik,
.hero .hero-kutular {
  position: relative;
  z-index: 2;
}

.hero-sub {
  font-size: 18px;
  margin: 22px 0 40px;
  max-width: 620px;
}

/* Hero metin kutuları */
.hero-kutular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.hero-kutu {
  position: relative;
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: var(--gecis);
  overflow: hidden;
}

.hero-kutu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--degrade);
  opacity: 0;
  transition: var(--gecis);
}

.hero-kutu:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 4, 41, 0.5);
}

.hero-kutu:hover::before {
  opacity: 1;
}

.hero-kutu h3 {
  margin-bottom: 8px;
}

.hero-kutu p {
  font-size: 15px;
}

.kutu-ok {
  position: absolute;
  right: 20px;
  bottom: 14px;
  font-size: 22px;
  color: var(--renk-vurgu-acik);
  transition: var(--gecis);
}

.hero-kutu:hover .kutu-ok {
  transform: translateX(5px);
}

/* ---------- Ürün kartları ---------- */
/* 4'lü sıralar, kartlar arası 5px, köşe yuvarlaklığı yok */
.urun-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 12px;
}

/* Kart zemini şeffaf: görsel alanı + altında serbest duran başlık */
.urun-kart {
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  transition: var(--gecis);
}

.urun-kart:hover {
  transform: translateY(-6px);
  border-color: rgba(217, 4, 41, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.urun-onizleme {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Yüklenen ürün görseli: önizleme alanını tamamen kaplar */
.urun-resim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.urun-bas-harf {
  font-family: var(--font-baslik);
  font-size: 80px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.urun-bas-harf.buyuk {
  font-size: 140px;
}

.etiket {
  z-index: 1; /* etiket, ürün görselinin üstünde kalsın */
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(6, 6, 6, 0.78);
  color: #fff;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 100px;
}

/* İndirim rozeti: indirim fiyatı girilen ürünlerde etiket ne olursa olsun buna döner,
   kırmızı zemin + beyaz yazıyla diğer etiketlerden daha dikkat çekicidir */
.etiket-indirim {
  background: var(--renk-vurgu);
  box-shadow: 0 2px 10px rgba(217, 4, 41, 0.5);
}

/* Kart altı: ürün başlığı solda, fiyat sağda; arka plan şeffaf */
.urun-bilgi {
  background: transparent;
  padding: 12px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* İndirimli fiyat gösterimi */
.eski-fiyat {
  text-decoration: line-through;
  color: #7a7a7a;
  font-size: 0.78em;
  font-weight: 500;
  margin-right: 6px;
}

.yeni-fiyat {
  color: var(--renk-vurgu-acik);
}

.urun-bilgi h3 {
  font-size: calc(var(--altbaslik-boyut, 22px) * 0.82);
}

.kategori {
  font-size: 14px;
  color: var(--renk-vurgu-acik);
  font-family: var(--font-baslik);
  font-weight: 600;
  letter-spacing: 1px;
}

.fiyat {
  font-family: var(--font-baslik);
  font-size: 22px;
  font-weight: 700;
  color: var(--altbaslik-renk, var(--renk-baslik));
}

/* ---------- Vitrin kategori bölümleri ---------- */
.vitrin-kategori {
  margin-bottom: 56px;
}

.vitrin-kategori:last-child {
  margin-bottom: 0;
}

/* Kategori bölümleri arasına ayırıcı çizgi — genişliği doğrudan ürün ızgarasının
   genişliğine eşit tutulur (masaüstünde 4 kart, mobilde 2 kart genişliği).
   Sabit nötr gri kullanılıyor ki koyu/açık temanın ikisinde de net görünsün
   (--renk-cizgi'nin bazı bağlamlarda çok soluk kaldığı daha önce fark edilmişti). */
.vitrin-kategori + .vitrin-kategori {
  border-top: 1px solid rgba(128, 128, 128, 0.35);
  padding-top: 56px;
}

.vitrin-baslik {
  margin-bottom: 4px;
}

.vitrin-baslik a {
  transition: var(--gecis);
}

.vitrin-baslik a:hover {
  color: var(--renk-vurgu-acik);
}

/* "Diğer ... Ürünleri" linki: ok normalde sonda, üzerine gelince başa geçer */
.diger-link {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 17px;
  color: var(--baslik-renk, var(--renk-baslik));
  transition: var(--gecis);
}

.diger-link:hover {
  color: var(--renk-vurgu-acik);
}

.diger-link .ok {
  color: var(--renk-vurgu-acik);
  transition: var(--gecis);
}

.diger-link .ok-bas {
  opacity: 0;
  margin-right: -14px;
  transform: translateX(-6px);
}

.diger-link .ok-son {
  opacity: 1;
  margin-left: 8px;
}

.diger-link:hover .ok-bas {
  opacity: 1;
  margin-right: 8px;
  transform: translateX(0);
}

.diger-link:hover .ok-son {
  opacity: 0;
  margin-left: -14px;
}

/* ---------- Ürün detay ---------- */
.breadcrumb {
  margin-bottom: 28px;
  font-size: 14px;
}

.breadcrumb a:hover {
  color: var(--renk-vurgu-acik);
}

.detay-grid {
  display: grid;
  /* minmax(0, 1fr): çok sayıda küçük resim olsa bile sütun genişliği sabit kalır,
     taşan kısım sağa büyümek yerine galeri şeridinin içinde gizli kalır (kaydırmayla erişilir) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* Öne çıkan görsel + küçük resim şeridi + demo/YouTube butonları — hepsi aynı genişlikte, tek sütun */
.urun-galeri {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0; /* içerik (küçük resim şeridi) sütunu genişletmesin */
}

.detay-onizleme {
  overflow: hidden; /* ürün görselinin köşeleri yuvarlak kalsın */
  border-radius: var(--radius);
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Küçük resim şeridi: ok butonları + kaydırılan resim listesi, ana görselle aynı genişlikte */
.galeri-serit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0; /* küçük resimler ok butonlarını dışarı itmesin */
}

.galeri-kucukler {
  display: flex;
  gap: 8px;
  overflow-x: auto; /* kaydırma gerçekten çalışsın (overflow:hidden'da scrollLeft etkisizdir) */
  /* scroll-behavior CSS'te değil, JS'teki scrollBy({behavior:"smooth"}) çağrısında ayarlanıyor */
  flex: 1;
  min-width: 0; /* flex içinde taşmayı önler */
  scrollbar-width: none; /* Firefox: kaydırma çubuğunu gizle, sadece ok butonları görünsün */
}

.galeri-kucukler::-webkit-scrollbar {
  display: none; /* Chrome/Edge/Safari: kaydırma çubuğunu gizle */
}

.galeri-kucuk {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--renk-kart);
  transition: var(--gecis);
}

.galeri-kucuk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galeri-kucuk:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.galeri-kucuk.aktif {
  border-color: var(--renk-vurgu-acik);
}

.galeri-ok {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  color: var(--baslik-renk, var(--renk-baslik));
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--gecis);
}

.galeri-ok:hover {
  background: var(--renk-vurgu);
  border-color: var(--renk-vurgu);
  color: #fff;
}

/* Demo / YouTube butonları */
.urun-medya-butonlari {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-youtube {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius);
  background: #ff0000;
  color: #fff;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 16px;
  transition: var(--gecis);
}

.btn-youtube svg {
  width: 20px;
  height: 20px;
}

.btn-youtube:hover {
  background: #cc0000;
  transform: translateY(-2px);
}

.detay-bilgi h1 {
  margin: 6px 0 16px;
}

.detay-ozet {
  margin-bottom: 24px;
}

.ozellik-listesi {
  list-style: none;
  margin-bottom: 30px;
}

.ozellik-listesi li {
  padding: 10px 0 10px 30px;
  border-bottom: 1px solid var(--renk-cizgi);
  position: relative;
}

.ozellik-listesi li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--renk-vurgu-acik);
  font-weight: 700;
}

.satin-al {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.buyuk-fiyat {
  font-size: 36px;
}

.not {
  margin-top: 16px;
  font-size: 14px;
  color: #6c6c6c;
}

/* ---------- Formlar (iletişim + admin) ---------- */
.iletisim-form {
  margin-top: 32px;
  max-width: 680px;
}

/* Honeypot: botlara "normal bir alan" gibi görünür ama gerçek kullanıcılar
   asla görmez — ekran okuyucular da (aria-hidden) atlar */
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* İnsan doğrulaması (matematik sorusu) girdisi: küçük ve dar, forma yayılmasın */
.captcha-grup .captcha-girdi {
  max-width: 120px;
}

.form-satir {
  display: grid;
  /* minmax(0, 1fr): uzun metinler (ör. e-posta uyarısı) sütunu genişletip taşırmasın */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.form-satir-uclu {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* .form-grup label seçicisi bundan daha spesifik olduğu için (display:block eziyordu),
   burada .form-grup ile birlikte kullanılarak flex kesin olarak uygulanır */
.form-grup .birlesik-etiket {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--renk-metin);
  cursor: pointer;
}

.form-grup .birlesik-etiket input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--renk-vurgu);
  cursor: pointer;
}

.form-grup {
  margin-bottom: 18px;
  min-width: 0; /* içerik sütunu dışarı itmesin */
}

.form-grup label {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--baslik-renk, var(--renk-baslik));
  margin-bottom: 8px;
}

/* E-posta doğruluğu uyarısı: input hizasına yakın dursun, taşmadan sarmalansın */
.eposta-uyari {
  margin-top: 34px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--renk-vurgu-acik);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Mesaj alanı altındaki canlı karakter sayacı */
.karakter-sayaci {
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  color: #6c6c6c;
}

.karakter-sayaci-uyari {
  color: var(--renk-vurgu-acik);
  font-weight: 600;
}

.form-grup input,
.form-grup textarea,
.form-grup select {
  width: 100%;
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 13px 15px;
  color: var(--baslik-renk, var(--renk-baslik));
  font-family: var(--font-metin);
  font-size: 15px;
  transition: var(--gecis);
}

.form-grup select option {
  background: var(--renk-kart);
}

.form-grup input[type="file"] {
  padding: 10px;
  cursor: pointer;
}

.form-grup input[type="file"]::file-selector-button {
  background: var(--degrade);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  margin-right: 12px;
  font-family: var(--font-baslik);
  font-weight: 600;
  cursor: pointer;
}

.form-grup input:focus,
.form-grup textarea:focus,
.form-grup select:focus {
  outline: none;
  border-color: var(--renk-vurgu);
}

/* ---------- Admin sekmeleri (klasör görünümü) ---------- */
.admin-sekmeler {
  display: flex;
  gap: 6px;
  margin: 28px 0 0;
  border-bottom: 2px solid var(--renk-cizgi);
  flex-wrap: wrap;
}

.admin-sekmeler a {
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 17px;
  padding: 12px 22px;
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--renk-metin);
  transition: var(--gecis);
  position: relative;
  top: 2px;
}

.admin-sekmeler a:hover {
  color: var(--renk-baslik);
  background: rgba(255, 255, 255, 0.04);
}

.admin-sekmeler a.aktif {
  color: var(--renk-baslik);
  background: var(--renk-zemin-2);
  border-color: var(--renk-cizgi);
  border-top: 3px solid var(--renk-vurgu);
}

.panel-aciklama {
  font-size: 15px;
  line-height: 1.5; /* body'den miras kalan 1.75 yerine sabit bir değer kullan */
  margin: -8px 0 22px;
  /* Yan yana duran panellerde açıklama 1 veya 2 satır olsa bile altındaki
     form/liste her zaman aynı hizada başlasın diye sabit bir alan ayrılır
     (15px * 1.5 satır yüksekliği * 3 satır ≈ 68px, güvenli pay için 70px) */
  min-height: 70px;
}

/* Bildirimler sayfasındaki "nasıl kurulur" bilgi notu */
.bilgi-notu {
  background: var(--renk-zemin-2);
  border: 1px solid var(--renk-cizgi);
  border-left: 3px solid var(--renk-vurgu);
  border-radius: var(--radius);
  padding: 24px 28px;
}

.bilgi-notu h3 {
  font-size: 17px;
  margin-bottom: 12px;
}

.bilgi-notu h3:not(:first-child) {
  margin-top: 24px;
}

.bilgi-adimlari {
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
}

.bilgi-adimlari li {
  margin-bottom: 10px;
}

.bilgi-adimlari code,
.bilgi-notu code {
  background: rgba(255, 255, 255, 0.08);
  color: var(--renk-vurgu-acik);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  word-break: break-all;
}

/* Renk seçiciler */
.renk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 8px;
}

.form-grup input[type="color"] {
  width: 100%;
  height: 56px;
  padding: 4px;
  cursor: pointer;
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
}

.renk-not {
  display: block;
  font-size: 13px;
  margin-top: 6px;
  color: #6c6c6c;
}

.buton-satiri {
  margin-top: 10px;
}

.buton-satiri-yatay {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Yazı ayarları grupları */
.yazi-grubu {
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 18px 20px 8px;
  margin-bottom: 20px;
}

.yazi-grubu legend {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 18px;
  color: var(--renk-baslik);
  padding: 0 10px;
}

.yazi-grubu .renk-not {
  margin: 0 0 14px;
}

.yazi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.yazi-grid input[type="color"] {
  height: 47px;
}

.admin-panel + .admin-panel {
  margin-top: 32px;
}

.sifirla-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--renk-cizgi);
}

.iletisim-eposta {
  margin-top: -20px;
  margin-bottom: 8px;
}

.iletisim-eposta a {
  color: var(--renk-vurgu-acik);
}

/* ---------- Admin ---------- */
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
  align-items: start;
}

.admin-panel {
  background: var(--renk-zemin-2);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 28px;
}

.admin-panel h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.admin-liste {
  list-style: none;
}

.admin-liste li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--renk-cizgi);
}

.admin-liste li.gizli {
  display: none;
}

.admin-urun-ad {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 18px;
  color: var(--renk-baslik);
}

.admin-urun-ad:hover {
  color: var(--renk-vurgu-acik);
}

/* Admin ürün listesindeki küçük görsel/harf kutusu */
.admin-urun-resim {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--renk-cizgi);
  flex-shrink: 0;
}

.admin-urun-harf {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.9);
}

/* Ürün düzenleme sayfası: mevcut galeri görselleri + kaldırma kutucukları */
.galeri-yonetim {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.galeri-yonetim-ogesi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.galeri-yonetim-ogesi img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--renk-cizgi);
}

.galeri-kaldir-etiket {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--renk-metin);
}

.galeri-kaldir-etiket input {
  accent-color: var(--renk-vurgu);
  cursor: pointer;
}

/* Kategori klasörleri (admin ürün listesi) */
.kategori-klasor {
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}

.kategori-klasor summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none; /* varsayılan üçgen işareti gizle */
  padding: 14px 18px;
  background: var(--renk-kart);
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 17px;
  color: var(--renk-baslik);
  transition: var(--gecis);
  user-select: none;
}

.kategori-klasor summary::-webkit-details-marker {
  display: none;
}

.kategori-klasor summary:hover {
  background: rgba(217, 4, 41, 0.1);
}

.kategori-klasor[open] summary {
  border-bottom: 1px solid var(--renk-cizgi);
}

.klasor-ikon {
  font-size: 15px;
}

.klasor-sayi {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--renk-metin);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 10px;
  border-radius: 100px;
}

.kategori-klasor .admin-liste {
  padding: 4px 18px 10px;
}

.kategori-klasor .admin-liste li:last-child {
  border-bottom: none;
}

/* İndirim rozeti: hangi ürünün indirimde olduğu bir bakışta görünsün */
.indirim-rozet {
  display: inline-block;
  background: var(--degrade);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 100px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Yayın kutusu ve satır aksiyonları */
.yayin-kutu,
.menu-yayin-kutu,
.sizeozel-yayin-kutu {
  width: 20px;
  height: 20px;
  accent-color: var(--renk-vurgu);
  cursor: pointer;
  flex-shrink: 0;
}

.admin-liste li.yayinda-degil .menu-onizle {
  opacity: 0.45;
}

/* ---------- Admin: Mesajlar (gelen kutusu) ---------- */
.mesaj-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mesaj-karti {
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.mesaj-karti.mesaj-yeni {
  border-left: 3px solid var(--renk-vurgu);
  background: rgba(217, 4, 41, 0.06);
}

.mesaj-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.yeni-rozet {
  display: inline-block;
  background: var(--renk-vurgu);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 100px;
  margin-left: 8px;
}

.mesaj-tarih {
  font-size: 13px;
  color: var(--renk-metin);
  margin-left: 10px;
}

.mesaj-eposta {
  font-size: 14px;
  margin-bottom: 4px;
}

.mesaj-eposta a {
  color: var(--renk-vurgu-acik);
}

.mesaj-konu {
  font-size: 14px;
  font-weight: 600;
  color: var(--renk-baslik);
  margin-bottom: 8px;
}

.mesaj-govde {
  font-size: 15px;
  white-space: pre-line;
}

.mesaj-ip {
  margin-top: 10px;
  font-size: 12px;
  color: #6c6c6c;
}

/* Sol menüdeki okunmamış mesaj sayısı rozeti */
.menu-rozet {
  margin-left: auto;
  background: var(--renk-vurgu);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 100px;
}

.admin-aksiyonlar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-duzenle {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--renk-cizgi);
  color: var(--renk-baslik);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 14px;
  padding: 7px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--gecis);
}

.btn-duzenle:hover {
  border-color: var(--renk-vurgu);
  color: var(--renk-vurgu-acik);
}

.btn-sil {
  background: transparent;
  border: 1px solid rgba(217, 4, 41, 0.5);
  color: var(--renk-vurgu-acik);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 14px;
  padding: 7px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--gecis);
}

.btn-sil:hover {
  background: var(--renk-vurgu);
  color: #fff;
}

.uyari {
  padding: 12px 18px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-family: var(--font-baslik);
  font-weight: 600;
}

.uyari.basarili {
  background: rgba(62, 183, 94, 0.12);
  border: 1px solid rgba(62, 183, 94, 0.4);
  color: #3eb75e;
}

.uyari.hatali {
  background: rgba(217, 4, 41, 0.12);
  border: 1px solid rgba(217, 4, 41, 0.4);
  color: var(--renk-vurgu-acik);
}

/* ---------- 404 ---------- */
.hata-sayfasi {
  text-align: center;
  padding-top: 100px;
}

.hata-kod {
  font-size: clamp(90px, 15vw, 160px);
}

.hata-sayfasi .btn {
  margin-top: 24px;
}

.hata-sayfasi .hero-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 48px;
  padding: 72px 0 0;
  border-top: 1px solid var(--renk-cizgi);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
}

.footer-baslik {
  margin: 24px 0 32px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  color: var(--baslik-renk, var(--renk-baslik));
}

.footer-baslik strong {
  font-weight: 800;
}

/* E-posta abonelik satırı: alt çizgili sade giriş */
.footer-abone {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 330px;
  /* Çizgi rengi temadan gelir: koyu temada beyazımsı, açık temada siyahımsı */
  border-bottom: 1px solid var(--abone-cizgi, rgba(255, 255, 255, 0.25));
  padding-bottom: 10px;
}

.footer-abone input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--baslik-renk, var(--renk-baslik));
  font-family: var(--font-metin);
  font-size: 15px;
}

.footer-abone button {
  background: transparent;
  border: none;
  color: var(--baslik-renk, var(--renk-baslik));
  cursor: pointer;
  padding: 0;
}

.footer-abone svg {
  width: 18px;
  height: 18px;
}

.footer-kolon-baslik {
  font-size: 20px;
  margin-bottom: 22px;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  font-size: 15px;
  transition: var(--gecis);
}

.footer-links a:hover {
  color: var(--renk-vurgu-acik);
}

/* İletişim satırları: yuvarlak ikonlu */
.footer-iletisim {
  list-style: none;
}

.footer-iletisim li {
  margin-bottom: 16px;
  font-size: 15px;
}

/* Telefon ve e-posta satırları tıklanabilir link (tel:/mailto:); adres düz metin kalır */
.footer-iletisim-link {
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--gecis);
}

.footer-iletisim-link:hover {
  color: var(--renk-vurgu-acik);
}

.footer-iletisim li:has(> .footer-iletisim-link) {
  display: block;
}

.footer-iletisim li:not(:has(> .footer-iletisim-link)) {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  color: var(--metin-renk, var(--renk-metin));
  flex-shrink: 0;
}

.footer-ikon svg {
  width: 17px;
  height: 17px;
}

.footer-sosyal {
  margin-top: 20px;
}

/* Alt şerit: solda telif, sağda kural linkleri */
.footer-alt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--renk-cizgi);
  padding: 22px 0 30px;
  font-size: 14px;
}

.footer-nodejs-notu {
  color: var(--metin-renk, var(--renk-metin));
}

.footer-nodejs-link {
  text-decoration: underline;
  transition: var(--gecis);
}

.footer-nodejs-link:hover {
  color: var(--renk-vurgu-acik);
}

.footer-alt-links {
  display: flex;
  gap: 24px;
}

.footer-alt-links a {
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--metin-renk, var(--renk-metin));
  transition: var(--gecis);
}

.footer-alt-links a:hover {
  color: var(--renk-vurgu-acik);
}

/* ---------- Metin sayfaları (KVKK, Çerez, Kurallar) ---------- */
.sayfa-cerceve {
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  border-left: 3px solid var(--renk-vurgu);
  border-radius: var(--radius);
  padding: 36px 40px;
  margin-top: 24px;
  max-width: 860px;
  white-space: pre-line; /* metindeki satır atlamaları sayfada da görünsün */
}

/* ---------- Size Özel (soru-cevap) sayfası ---------- */
.soru-cevap-listesi {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 32px;
  max-width: 860px;
}

.soru-cevap-karti h2 {
  font-size: 22px;
  margin-bottom: 12px;
}

.soru-cevap-cerceve {
  margin-top: 0;
  margin-bottom: 16px;
  max-width: none;
}

.soru-cevap-ozellikler {
  list-style: none;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--renk-cizgi);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.soru-cevap-ozellikler li {
  position: relative;
  padding-left: 24px;
}

.soru-cevap-ozellikler li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--renk-vurgu-acik);
  font-weight: 700;
}

.soru-cevap-cta {
  color: var(--metin-renk, var(--renk-metin));
  margin-bottom: 14px;
}

/* ---------- Admin: iç sekmeler ve menü önizleme ---------- */
.ic-sekmeler {
  margin-top: 0;
  margin-bottom: 24px;
}

.menu-onizle {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Sürükle-bırak sıralama */
#menu-sirala li[draggable] {
  cursor: grab;
}

#menu-sirala li.surukleniyor {
  opacity: 0.4;
  border: 1px dashed var(--renk-vurgu);
  border-radius: var(--radius);
}

.surukle-tutamac {
  color: #5c5c5c;
  font-size: 18px;
  letter-spacing: -2px;
  user-select: none;
  flex-shrink: 0;
}

.menu-onizle-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi);
  color: var(--renk-vurgu-acik);
  flex-shrink: 0;
}

.menu-onizle-ikon svg {
  width: 19px;
  height: 19px;
}

.btn-ghost {
  border-color: var(--renk-cizgi);
  color: var(--renk-baslik);
}

.btn-ghost:hover {
  border-color: var(--renk-vurgu);
  color: var(--renk-vurgu-acik);
}

/* ---------- Mobil uyum ---------- */
@media (max-width: 900px) {
  /* Küçük ekranda sol menü üste yatay geçer ve YAPIŞKAN (sticky) kalır —
     sayfa kaydırılınca yukarı kaymaz, her zaman görünür kalır.
     position:sticky aynı zamanda hamburger menüsünün (position:absolute; top:100%)
     doğru konumlanacağı bir konumlandırma bağlamı oluşturur.
     overflow:visible ŞART — masaüstü kuralı overflow-y:auto taşan açılır menüyü
     kırpıp görünmez/hero'nun altındaymış gibi gösteriyordu. */
  .kenar-menu {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 20px 24px;
    border-right: none;
    border-bottom: 1px solid var(--renk-cizgi);
    overflow: visible;
    z-index: 300;
  }

  .logo {
    margin-bottom: 20px;
  }

  /* ---- Admin panel: başlık satırı + hamburger (admin-header.ejs) ---- */
  .admin-baslik-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .admin-baslik-satir .admin-etiket {
    margin: 0; /* satır içine alınca negatif üst boşluğa gerek kalmadı */
  }

  /* ---- Mobil üst şerit: solda telefon+mail+paylaş, sağda sosyal ikonlar — tek satır, sarmaz ---- */
  .mobil-ust-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    /* --renk-cizgi (varsayılan kart/kenarlık çizgisi) koyu temada çok soluk (%8 beyaz)
       kalıp görünmez oluyordu; bu ayırıcı çizgi kasıtlı belirgin olsun diye sabit,
       nötr bir gri kullanılıyor — hem açık hem koyu zeminde net görünür */
    border-bottom: 1px solid rgba(128, 128, 128, 0.35);
  }

  .mobil-ust-sol {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .mobil-ust-sosyal {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* .sosyal-ikonlar'ın varsayılan flex-wrap:wrap'ini ezer, tek satırda kalsın */
    flex-shrink: 0;
  }

  /* Telefon, mail, paylaş ve sosyal ikonlar hepsi aynı boyut/görünümde */
  .mobil-ust-sol > a,
  .mobil-ust-sol > button,
  .mobil-ust-sosyal a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--renk-kart);
    border: 1px solid var(--renk-cizgi);
    color: var(--metin-renk, var(--renk-metin));
    transition: var(--gecis);
    flex-shrink: 0;
  }

  .mobil-ust-sol > a:hover,
  .mobil-ust-sol > button:hover {
    color: var(--renk-vurgu-acik);
    border-color: var(--renk-vurgu-acik);
  }

  .mobil-ust-sol svg,
  .mobil-ust-sosyal svg {
    width: 15px;
    height: 15px;
  }

  /* ---- Marka satırı: logo solda, kurum adı/slogan yanında, hamburger sağda ---- */
  .marka-satir {
    margin-bottom: 0;
  }

  .marka {
    flex-direction: row;
    align-items: center;
    text-align: left;
    flex: 1;
    min-width: 0; /* içindeki metnin taşmasını/ellipsis'ini mümkün kılar */
    margin-bottom: 0;
    gap: 10px;
  }

  .marka-yazi {
    align-items: flex-start;
    text-align: left;
    width: auto;
    flex: 1;
    min-width: 0;
  }

  .kurum-adi {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .marka-slogan {
    text-align: left;
  }

  /* ---- Hamburger butonu ---- */
  .hamburger-buton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius);
    cursor: pointer;
  }

  .hamburger-buton span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--baslik-renk, var(--renk-baslik));
    transition: var(--gecis);
  }

  /* Açıkken üç çizgi çarpıya (X) dönüşür */
  .hamburger-buton.acik span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .hamburger-buton.acik span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-buton.acik span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ---- Menü: hamburgere kapalı; açılınca hero'nun ÜZERİNE (overlay) açılır,
     belgenin akışını itmez, en fazla ekranın yarısı kadar yükseklik kaplar.
     Genişlik tam ekran DEĞİL — en uzun menü öğesi kadar (width: max-content) ---- */
  .kenar-menu nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 24px; /* hamburger butonuyla aynı hizada, sağa yaslı açılır */
    width: max-content;
    max-width: calc(100vw - 48px);
    max-height: 50vh;
    overflow-y: auto;
    margin-top: 0;
    padding: 8px 12px 16px;
    background: var(--renk-zemin-2, var(--renk-zemin));
    border: 1px solid var(--renk-cizgi);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
    z-index: 200;
  }

  .kenar-menu nav.nav-acik {
    display: block;
  }

  .menu-links {
    flex-direction: column;
    gap: 4px;
  }

  .menu-links a {
    padding: 8px 14px;
    font-size: 16px;
    border-left: none;
  }

  .menu-links a.aktif {
    border-left: none;
  }

  /* Alttaki sosyal medya bloğu üst şeride taşındığı için mobilde gizlenir */
  .sosyal-alan {
    display: none;
  }

  /* Sadece mobilde görünen, hero ile vitrin arasındaki iletişim butonu */
  .mobil-iletisim-cta.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 20px 0 0;
  }

  /* Vitrin-footer arası buton mobilde de tam genişlik olsun */
  .genel-iletisim-cta.btn {
    width: 100%;
    margin: 20px 0 0;
  }

  /* Mobilde her kategori vitrininde en fazla 6 ürün kutusu görünsün (masaüstünde 8) */
  .urun-grid > *:nth-child(n + 7) {
    display: none;
  }

  .icerik {
    --sayfa-yan: 24px;
    margin-left: 0;
    padding: 0 var(--sayfa-yan);
  }

  .hero {
    padding: 40px 24px 24px;
  }

  .icerik > .hero-medyali {
    width: 100vw;
    margin-left: -24px;
    min-height: 85svh;
    padding: 32px 0 0;
  }

  /* Dar ekranda 150px'lik boşluklar sığmaz; makul değerlere iner */
  .hero-medyali .hero-icerik {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-medyali .hero-kutular {
    margin: 0 24px 40px;
  }

  .detay-grid,
  .admin-grid,
  .form-satir,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Dar ekranda 4'lü sıra 2'liye iner */
  .urun-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}