@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
  main > :first-child { margin-top: 0 !important; }
}

/* Altın metalik yüzey — DESIGN.md: düz dolgu yerine hafif gradyan */
.gold-fill {
  background-image: linear-gradient(100deg, #c5a059 0%, #d4af37 45%, #b8934c 100%);
}
.gold-text {
  background-image: linear-gradient(100deg, #c5a059, #d4af37 60%, #b8934c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Aktif navigasyon: 2px altın alt çizgi */
.nav-link { position: relative; padding-bottom: 4px; }
.nav-link.is-active::after,
.nav-link:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background-image: linear-gradient(90deg, #c5a059, #d4af37);
}
.nav-link:hover::after { opacity: .4; }
.nav-link.is-active::after { opacity: 1; }

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* Ürün kartı: varsayılan çerçevesiz, hover'da 1px siyah */
.product-card {
  border: 1px solid #ececec;
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.product-card:hover {
  border-color: #dcdcdc;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

/* Geri sayım — sıcak kırmızı */
.sayac-kirmizi { color: #e0483f; }
.sayac-kutu { background: #1b1b1b; }

/* Yuvarlak köşeler — kart, buton ve form alanları */
:where(button, input, select, textarea, article, .product-card,
       [data-slider], [data-slayt], [data-mega-panel], [data-modal] > div) {
  border-radius: 16px;
}
/* yuvarlak-kose: kutu bileşenleri */
main section > div,
main .grid > a,
main .grid > div,
main .grid > article,
header .bg-surface-container,
footer .grid > div > a {
  border-radius: 16px;
}
.rounded-full, :where(.rounded-full) { border-radius: 9999px !important; }
[data-slayt] { border-radius: 24px; }

/* Marka yazısı — ARSLOGO.png'den örneklenen altın tonları */
.marka-yazi {
  font-family: "Montserrat", "Hanken Grotesk", sans-serif;
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1;
  background-image: linear-gradient(175deg,
    #b08850 0%, #a88048 22%, #a07838 45%, #987038 68%, #906830 85%, #a8804a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  text-transform: uppercase;
}
/* Koyu zeminde biraz daha parlak */
.marka-yazi--koyu {
  background-image: linear-gradient(180deg, #f3dfa3 0%, #e0bd5d 45%, #c5a059 100%);
}

/* pembe-vurgu: menü ve filtre bağlantılarında pembe hover (referans site gibi) */
[data-mega-body] a,
aside [data-marka],
aside [data-kategori] {
  padding: 7px 14px;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
[data-mega-body] a:hover,
aside [data-marka]:hover,
aside [data-kategori]:hover {
  background: #fdeaee;
  color: #e2445c !important;
}
aside .filtre-aktif {
  background: #fdeaee;
  color: #e2445c !important;
  font-weight: 600;
}
aside .filtre-aktif::before {
  content: "push_pin";
  font-family: "Material Symbols Outlined";
  font-size: 16px;
  margin-right: 8px;
  vertical-align: -3px;
}
/* mega menüdeki marka sekmelerinde de aynı his */
.nav-link:hover { color: #e2445c !important; }
.nav-link.is-active { color: #e2445c !important; }
.nav-link:hover::after,
.nav-link.is-active::after { background-image: linear-gradient(90deg, #e2445c, #f2778a); }

/* mega menü: sütunlara yayılan model listesi */
.mega-grup { break-inside: avoid; }
[data-mega-body] a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 10px; border-radius: 10px;
}
[data-mega-body] a:hover { background: #fdeaee; color: #e2445c !important; }
[data-mega-body] a:hover span { color: #e2445c !important; }

/* mega-kirilma: çok sütunlu çekmece gövdesinde satırlar bölünmesin */
[data-cekmece-govde] a { break-inside: avoid; }

/* Sağ altta sabit WhatsApp düğmesi */
.ars-wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row-reverse;
}
.ars-wa-btn {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}
.ars-wa-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.ars-wa-nokta {
  position: absolute; top: 2px; right: 2px;
  width: 13px; height: 13px; border-radius: 999px;
  background: #e0483f; border: 2px solid #fff;
}
.ars-wa-ipucu {
  background: #1c1b1b; color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  white-space: nowrap;
  opacity: 0; transform: translateX(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.ars-wa:hover .ars-wa-ipucu { opacity: 1; transform: translateX(0); }
@media (max-width: 640px) {
  .ars-wa { right: 16px; bottom: 16px; }
  .ars-wa-btn { width: 52px; height: 52px; }
  .ars-wa-ipucu { display: none; }
}


/* Mobilde başlık menüsü yatay kaydırılabilir bir şerittir; çubuk görünmesin */
header nav::-webkit-scrollbar,
header .overflow-x-auto::-webkit-scrollbar { display: none; }
header nav,
header .overflow-x-auto { scrollbar-width: none; -ms-overflow-style: none; }


/* ── Mobil menü çekmecesi ──────────────────────────────────────────────── */
.ars-mm { position: fixed; inset: 0; z-index: 60; }
.ars-mm.hidden { display: none; }
.ars-mm-perde {
  position: absolute; inset: 0;
  background: rgba(28, 27, 27, .45);
  animation: ars-mm-perde-gir .18s ease;
}
@keyframes ars-mm-perde-gir { from { opacity: 0; } to { opacity: 1; } }

.ars-mm-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: #fff;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, .18);
  animation: ars-mm-gir .22s ease;
}
@keyframes ars-mm-gir { from { transform: translateX(100%); } to { transform: translateX(0); } }

.ars-mm-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #e7e0e0; flex-shrink: 0;
}
.ars-mm-kapat {
  width: 40px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #4c4546;
}
.ars-mm-kapat:active { background: #f2f0f0; }

.ars-mm-ara { position: relative; padding: 14px 18px 10px; flex-shrink: 0; }
.ars-mm-ara input {
  width: 100%; height: 44px; border-radius: 999px;
  background: #f3f0ef; padding: 0 46px 0 18px;
  font-size: 14px; outline: none;
}
.ars-mm-ara input:focus { box-shadow: 0 0 0 1px #6d4c1f; }
.ars-mm-ara button {
  position: absolute; right: 24px; top: 50%; transform: translateY(-25%);
  width: 34px; height: 34px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #c9a227, #8a6a2f); color: #fff;
}

.ars-mm-govde { flex: 1; overflow-y: auto; padding: 4px 8px 16px; -webkit-overflow-scrolling: touch; }

.ars-mm-bas-satir {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 12px; border-radius: 12px;
  font-size: 15px; font-weight: 600; color: #1c1b1b; text-align: left;
}
.ars-mm-bas-satir:active { background: #f5f3f2; }
.ars-mm-bas-satir [data-ok] { color: #9aa0ad; }

.ars-mm-ic { display: flex; flex-direction: column; padding: 2px 0 10px 12px; }
.ars-mm-ic.hidden { display: none; }
.ars-mm-ic a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-left: 2px solid #ece7e7;
  font-size: 14px; color: #4c4546;
}
.ars-mm-ic a:active { background: #f5f3f2; }
.ars-mm-ic a span { font-size: 11px; color: #a0a6b2; }
.ars-mm-bos { padding: 12px; font-size: 13px; color: #8b8585; }

.ars-mm-tek {
  display: block; padding: 13px 12px; border-radius: 12px;
  font-size: 15px; font-weight: 600; color: #1c1b1b;
}
.ars-mm-tek:active { background: #f5f3f2; }
.ars-mm-ayrac { height: 1px; background: #ece7e7; margin: 8px 12px; }

.ars-mm-alt {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #e7e0e0; flex-shrink: 0;
}
.ars-mm-alt a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border-radius: 999px; background: #f3f0ef;
  font-size: 13px; font-weight: 700; text-transform: uppercase; color: #1c1b1b;
}

/* Menü düğmesi sonradan eklenen başlıklarda (ürün, sepet, forum…) dar ekranda
   satır taşıyordu; sepet tutarını gizleyip aralığı daraltarak yer açılıyor. */
@media (max-width: 767px) {
  .ars-mm-var { gap: 10px !important; }
  .ars-mm-var [data-cart-total] { display: none; }
}

/* Çekmece açıkken sabit WhatsApp düğmesi üste binmesin */
.ars-mm-acik .ars-wa { display: none; }