/* ============================================================
   OYUNBORSASI.NET — Tam sayfa koyu neon mor tema
   ============================================================ */
:root {
  --bg: #06060d;
  --bg-2: #0a0a15;
  --kart: #10101d;
  --kart-2: #14142400;
  --cizgi: rgba(139, 92, 246, .16);
  --cizgi-guclu: rgba(139, 92, 246, .38);
  --mor: #8b5cf6;
  --mor-parlak: #a855f7;
  --mor-koyu: #6d28d9;
  --cyan: #22d3ee;
  --yesil: #34d399;
  --kirmizi: #f87171;
  --sari: #fbbf24;
  --metin: #eceaf6;
  --soluk: #9c9ab5;
  --golge-mor: 0 8px 32px rgba(139, 92, 246, .22);
  --radius: 14px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Space Grotesk', 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--metin);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(139, 92, 246, .13), transparent 60%),
    radial-gradient(700px 420px at 5% 20%, rgba(34, 211, 238, .06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
main { position: relative; z-index: 1; flex: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

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

h1, h2, h3, h4 { font-family: var(--font-d); letter-spacing: -.02em; }

/* ---------- TOPBAR ---------- */
.topbar {
  background: linear-gradient(90deg, #0d0a1c, #12092b 55%, #0d0a1c);
  border-bottom: 1px solid var(--cizgi);
  font-size: 12.5px;
  color: var(--soluk);
  position: relative;
  z-index: 30;
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.topbar-rozetler { display: flex; gap: 20px; }
.topbar-rozetler span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-rozetler i { font-style: normal; color: var(--mor-parlak); }
.topbar-linkler { display: flex; gap: 18px; white-space: nowrap; }
.topbar-linkler a { color: var(--soluk); transition: color .2s; }
.topbar-linkler a:hover { color: var(--mor-parlak); }

/* ---------- HEADER ---------- */
.site-header {
  background: rgba(10, 9, 20, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cizgi);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.logo { flex: 0 0 auto; display: flex; align-items: center; }
.logo-img { height: 44px; width: auto; filter: drop-shadow(0 2px 12px rgba(139, 92, 246, .45)); }
.logo-img.kucuk { height: 34px; }

.header-arama {
  flex: 1 1 auto;
  display: flex;
  max-width: 640px;
  position: relative;
}
.header-arama input {
  width: 100%;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  padding: 12px 46px 12px 18px;
  color: var(--metin);
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.header-arama input::placeholder { color: #6b6985; }
.header-arama input:focus { border-color: var(--cizgi-guclu); box-shadow: 0 0 0 4px rgba(139, 92, 246, .12); }
.header-arama button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--mor), var(--mor-koyu));
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  font-size: 15px;
  display: grid;
  place-items: center;
}
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.nav-kullanici { display: flex; align-items: center; gap: 10px; }
.nav-kullanici .selam { font-size: 13.5px; color: var(--soluk); white-space: nowrap; }
.nav-kullanici .selam b { color: var(--metin); }

.hamburger { display: none; }

/* ---------- KATEGORI NAV ---------- */
.kat-nav {
  background: rgba(8, 7, 17, .95);
  border-bottom: 1px solid var(--cizgi);
  position: sticky;
  top: 73px;
  z-index: 35;
}
.kat-nav-icerik {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 4px;
  padding-bottom: 4px;
}
.kat-nav-icerik::-webkit-scrollbar { display: none; }
.kat-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--soluk);
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.kat-nav a i { font-style: normal; font-size: 15px; }
.kat-nav a:hover { background: rgba(139, 92, 246, .12); color: var(--metin); }
.kat-nav a.aktif {
  background: linear-gradient(135deg, rgba(139, 92, 246, .28), rgba(109, 40, 217, .2));
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--cizgi-guclu);
}

/* ---------- BUTONLAR ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--mor-parlak), var(--mor-koyu));
  color: #fff;
  border: none;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  transition: transform .16s, box-shadow .2s, filter .2s;
  box-shadow: 0 4px 18px rgba(139, 92, 246, .3);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: var(--golge-mor); }
.btn:active { transform: translateY(0); }
.btn-cyan { background: linear-gradient(135deg, #06b6d4, #0e7490); box-shadow: 0 4px 18px rgba(34, 211, 238, .25); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--cizgi-guclu);
  color: var(--metin);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(139, 92, 246, .12); box-shadow: none; }
.btn-kucuk { padding: 9px 15px; font-size: 13px; border-radius: 10px; }

/* ---------- HERO ---------- */
.hero { width: 100%; }
.hero-slider {
  position: relative;
  height: 640px;
  overflow: hidden;
  border-bottom: 1px solid var(--cizgi);
}
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide {
  background-size: cover;
  background-position: center 25%;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero-slide.aktif { opacity: 1; }
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 6, 13, .93) 0%, rgba(6, 6, 13, .72) 34%, rgba(6, 6, 13, .18) 62%, rgba(6, 6, 13, .05) 100%),
              linear-gradient(0deg, rgba(6, 6, 13, .95) 0%, transparent 30%);
}
.hero-icerik {
  position: absolute;
  z-index: 2;
  left: max(96px, calc((100vw - 1440px) / 2 + 96px));
  top: 50%;
  transform: translateY(-50%);
  max-width: 620px;
}
.hero-icerik .etiket {
  display: inline-block;
  background: rgba(139, 92, 246, .16);
  border: 1px solid var(--cizgi-guclu);
  color: var(--mor-parlak);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero-icerik h1 {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.08;
  font-weight: 700;
  margin-bottom: 18px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .6);
}
.hero-icerik p { font-size: 16.5px; line-height: 1.65; color: #c9c7dd; margin-bottom: 28px; max-width: 520px; }
.vurgu {
  background: linear-gradient(90deg, var(--mor-parlak), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-butonlar { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--cizgi-guclu);
  background: rgba(10, 9, 20, .65);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .2s;
}
.hero-ok:hover { background: var(--mor-koyu); }
.hero-ok.sol { left: 22px; }
.hero-ok.sag { right: 22px; }
.hero-noktalar {
  position: absolute;
  z-index: 5;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
}
.hero-noktalar button {
  width: 26px;
  height: 5px;
  border-radius: 99px;
  border: none;
  background: rgba(255, 255, 255, .22);
  transition: background .25s, width .25s;
}
.hero-noktalar button.aktif { background: var(--mor-parlak); width: 40px; }

/* ---------- BOLUMLER ---------- */
.bolum { padding: 64px 0 8px; }
.bolum-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.bolum-baslik h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  position: relative;
  padding-left: 18px;
}
.bolum-baslik h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--mor-parlak), var(--cyan));
  box-shadow: 0 0 14px rgba(168, 85, 247, .7);
}
.bolum-baslik a { color: var(--mor-parlak); font-size: 14px; font-weight: 600; }
.bolum-baslik a:hover { text-decoration: underline; }

/* ---------- KATEGORI KARTLARI ---------- */
.kategori-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.kategori-kart {
  display: flex;
  gap: 15px;
  align-items: center;
  background: linear-gradient(160deg, var(--kart), #0c0c18);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 18px;
  transition: transform .18s, border-color .2s, box-shadow .25s;
}
.kategori-kart:hover {
  transform: translateY(-4px);
  border-color: var(--cizgi-guclu);
  box-shadow: var(--golge-mor);
}
.kategori-ikon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: 26px;
  border-radius: 13px;
  background: radial-gradient(circle at 30% 25%, rgba(168, 85, 247, .3), rgba(109, 40, 217, .12));
  border: 1px solid var(--cizgi-guclu);
}
.kategori-kart h3 { font-size: 15px; margin-bottom: 3px; }
.kategori-kart p { font-size: 12.5px; color: var(--soluk); line-height: 1.4; margin-bottom: 6px; }
.kategori-kart .adet {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cyan);
  background: rgba(34, 211, 238, .09);
  padding: 3px 9px;
  border-radius: 99px;
}

/* ---------- URUN KARTLARI ---------- */
.urun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 18px;
  padding-bottom: 30px;
}
.urun-kart {
  background: linear-gradient(170deg, var(--kart), #0b0b16);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s, border-color .2s, box-shadow .25s;
}
.urun-kart:hover {
  transform: translateY(-5px);
  border-color: var(--cizgi-guclu);
  box-shadow: var(--golge-mor);
}
.urun-gorsel {
  position: relative;
  height: 150px;
  display: grid;
  place-items: center;
  font-size: 58px;
  border-bottom: 1px solid var(--cizgi);
}
.urun-gorsel > span[aria-hidden] { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); }
.grad-mor    { background: radial-gradient(circle at 50% 120%, rgba(168, 85, 247, .4), #12101f 70%); }
.grad-cyan   { background: radial-gradient(circle at 50% 120%, rgba(34, 211, 238, .3), #0d1420 70%); }
.grad-yesil  { background: radial-gradient(circle at 50% 120%, rgba(52, 211, 153, .3), #0d1a15 70%); }
.grad-turuncu{ background: radial-gradient(circle at 50% 120%, rgba(251, 146, 60, .3), #1d130d 70%); }
.grad-pembe  { background: radial-gradient(circle at 50% 120%, rgba(236, 72, 153, .32), #1d0f1a 70%); }
.rozet {
  position: absolute;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 99px;
  text-transform: uppercase;
}
.rozet-kategori { top: 10px; left: 10px; background: rgba(6, 6, 13, .72); color: var(--soluk); backdrop-filter: blur(4px); border: 1px solid var(--cizgi); }
.rozet-one { top: 10px; right: 10px; background: linear-gradient(135deg, var(--sari), #d97706); color: #1c1200; }
.urun-bilgi { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.urun-bilgi h3 { font-size: 15px; line-height: 1.35; }
.urun-bilgi .aciklama {
  font-size: 12.5px;
  color: var(--soluk);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.urun-alt {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--cizgi);
}
.fiyat { font-family: var(--font-d); font-size: 19px; font-weight: 700; color: var(--mor-parlak); }
.stok-yok { font-size: 12.5px; color: var(--kirmizi); font-weight: 600; }

/* ---------- GUVEN KARTLARI ---------- */
.guven-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding-bottom: 30px; }
.guven-kart {
  background: linear-gradient(160deg, var(--kart), #0c0c18);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
  transition: transform .18s, border-color .2s;
}
.guven-kart:hover { transform: translateY(-4px); border-color: var(--cizgi-guclu); }
.guven-kart .ikon { font-size: 38px; margin-bottom: 12px; }
.guven-kart h3 { font-size: 17px; margin-bottom: 8px; }
.guven-kart p { font-size: 13.5px; color: var(--soluk); line-height: 1.6; }

/* ---------- MARKA ---------- */
.marka-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.marka-metin .etiket { color: var(--mor-parlak); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.marka-metin h2 { font-size: clamp(22px, 2.6vw, 32px); margin: 12px 0 14px; line-height: 1.2; }
.marka-metin > p { color: var(--soluk); line-height: 1.7; margin-bottom: 20px; }
.marka-avantajlar { list-style: none; display: grid; gap: 12px; }
.marka-avantajlar li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  color: #cfcde2;
}
.marka-avantajlar li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--mor-parlak);
}
.marka-gorsel { border-radius: 18px; overflow: hidden; border: 1px solid var(--cizgi-guclu); box-shadow: var(--golge-mor); }
.marka-gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- SAYFA BASLIK / FILTRE ---------- */
.sayfa-baslik { padding: 40px 0 22px; }
.sayfa-baslik h1 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 8px; }
.sayfa-baslik p { color: var(--soluk); font-size: 14.5px; }
.filtre-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.filtre-bar input, .filtre-bar select, .form-grup input, .form-grup select {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  color: var(--metin);
  border-radius: 11px;
  padding: 12px 16px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.filtre-bar input:focus, .filtre-bar select:focus, .form-grup input:focus, .form-grup select:focus {
  border-color: var(--cizgi-guclu);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .12);
}
.filtre-bar input { flex: 1 1 260px; }
.filtre-bar select { flex: 0 0 auto; }
.bos-sonuc { text-align: center; color: var(--soluk); padding: 60px 0 80px; font-size: 15px; }
.bos-sonuc .buyuk { display: block; font-size: 46px; margin-bottom: 12px; }

/* ---------- AUTH (giris/kayit) ---------- */
.auth-sayfa {
  min-height: calc(100vh - 200px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-gorsel {
  position: relative;
  background-size: cover;
  background-position: center;
  display: none;
}
.auth-gorsel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 6, 13, .25), rgba(6, 6, 13, .88));
}
.auth-gorsel .auth-gorsel-yazi {
  position: absolute;
  z-index: 2;
  bottom: 48px;
  left: 48px;
  right: 48px;
}
.auth-gorsel .auth-gorsel-yazi h2 { font-size: 30px; margin-bottom: 10px; }
.auth-gorsel .auth-gorsel-yazi p { color: #cfcde2; line-height: 1.6; }
.auth-kutu-wrap { display: grid; place-items: center; padding: 60px 28px; }
.auth-kutu { width: 100%; max-width: 440px; }
.auth-kutu h1 { font-size: 27px; margin-bottom: 8px; }
.auth-kutu > p { color: var(--soluk); font-size: 14px; margin-bottom: 28px; }
.form-grup { margin-bottom: 16px; }
.form-grup label { display: block; font-size: 13px; font-weight: 600; color: #c5c3d8; margin-bottom: 7px; }
.form-grup input, .form-grup select { width: 100%; }
.form-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-mesaj { display: none; font-size: 13.5px; padding: 12px 15px; border-radius: 10px; margin-bottom: 16px; }
.form-mesaj.ok { display: block; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .4); color: var(--yesil); }
.form-mesaj.hata { display: block; background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .4); color: var(--kirmizi); }
.auth-link { margin-top: 20px; font-size: 14px; color: var(--soluk); text-align: center; }
.auth-link a { color: var(--mor-parlak); font-weight: 600; }
.auth-link a:hover { text-decoration: underline; }
.duyuru {
  background: rgba(251, 191, 36, .09);
  border: 1px solid rgba(251, 191, 36, .35);
  color: var(--sari);
  border-radius: 11px;
  padding: 12px 15px;
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.5;
}
@media (min-width: 961px) {
  .auth-gorsel { display: block; }
}

/* ---------- URUN DETAY ---------- */
.detay-grid {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 40px;
  padding: 44px 0;
}
.detay-gorsel {
  height: 340px;
  border-radius: 18px;
  border: 1px solid var(--cizgi-guclu);
  display: grid;
  place-items: center;
  font-size: 110px;
  box-shadow: var(--golge-mor);
}
.detay-bilgi .kategori-link { color: var(--cyan); font-size: 13.5px; font-weight: 600; }
.detay-bilgi h1 { font-size: clamp(24px, 2.8vw, 34px); margin: 10px 0 14px; line-height: 1.2; }
.detay-bilgi .aciklama { color: var(--soluk); line-height: 1.7; margin-bottom: 22px; }
.detay-stok { font-size: 13px; font-weight: 600; margin-bottom: 18px; color: var(--yesil); }
.detay-stok.yok { color: var(--kirmizi); }
.detay-fiyat { font-family: var(--font-d); font-size: 38px; font-weight: 700; color: var(--mor-parlak); margin-bottom: 24px; }
.adet-sec { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.adet-sec label { font-size: 14px; color: #c5c3d8; }
.adet-kontrol { display: inline-flex; align-items: center; border: 1px solid var(--cizgi-guclu); border-radius: 11px; overflow: hidden; }
.adet-kontrol button { width: 40px; height: 42px; background: var(--kart); border: none; color: #fff; font-size: 19px; }
.adet-kontrol input {
  width: 58px;
  height: 42px;
  text-align: center;
  background: var(--bg-2);
  border: none;
  border-left: 1px solid var(--cizgi);
  border-right: 1px solid var(--cizgi);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  outline: none;
}
.bilgi-liste { list-style: none; margin-top: 28px; display: grid; gap: 10px; }
.bilgi-liste li { font-size: 13.5px; color: var(--soluk); padding-left: 24px; position: relative; }
.bilgi-liste li::before { content: '✓'; position: absolute; left: 0; color: var(--yesil); font-weight: 700; }
.detay-not {
  margin-top: 20px;
  background: rgba(34, 211, 238, .07);
  border: 1px solid rgba(34, 211, 238, .25);
  color: #9be6f2;
  border-radius: 11px;
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- PANEL / ODEME / HESAP ---------- */
.panel-kutu {
  background: linear-gradient(170deg, var(--kart), #0b0b16);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 28px;
}
.odeme-ozet { max-width: 560px; margin: 44px auto; }
.basari-panel { text-align: center; padding: 44px 28px; }
.basari-panel .buyuk { font-size: 54px; display: block; margin-bottom: 14px; }
.odeme-satir { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 14.5px; border-bottom: 1px dashed var(--cizgi); }
.odeme-satir span:first-child { color: var(--soluk); }
.odeme-satir.toplam { font-size: 17px; font-weight: 700; border-bottom: none; color: var(--metin); }
.odeme-satir.toplam span:last-child { color: var(--mor-parlak); font-family: var(--font-d); }
.toplam-satir { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; margin: 18px 0 22px; font-family: var(--font-d); }
.toplam-satir span:last-child { color: var(--mor-parlak); }
.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablo th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--soluk);
  padding: 12px 14px;
  border-bottom: 1px solid var(--cizgi-guclu);
}
.tablo td { padding: 13px 14px; border-bottom: 1px solid var(--cizgi); }
.tablo tr:hover td { background: rgba(139, 92, 246, .05); }
.durum-rozet { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px; white-space: nowrap; }
.durum-beklemede { background: rgba(251, 191, 36, .12); color: var(--sari); }
.durum-odeme_bekliyor { background: rgba(34, 211, 238, .1); color: var(--cyan); }
.durum-tamamlandi { background: rgba(52, 211, 153, .12); color: var(--yesil); }
.durum-iptal { background: rgba(248, 113, 113, .12); color: var(--kirmizi); }

/* ---------- FOOTER ---------- */
.site-footer {
  margin-top: 70px;
  background: linear-gradient(180deg, #0a0817, #06060d);
  border-top: 1px solid var(--cizgi);
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding: 52px 0 36px;
}
.footer-grid h4 { font-size: 14px; margin-bottom: 16px; color: var(--metin); }
.footer-grid p { font-size: 13.5px; color: var(--soluk); line-height: 1.65; }
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid ul a { font-size: 13.5px; color: var(--soluk); transition: color .18s; }
.footer-grid ul a:hover { color: var(--mor-parlak); }
.footer-alt {
  border-top: 1px solid var(--cizgi);
  padding: 20px 0;
  font-size: 12.5px;
  color: #6b6985;
  text-align: center;
}

/* ---------- CHAT ---------- */
.chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--mor-parlak), var(--mor-koyu));
  font-size: 26px;
  box-shadow: 0 8px 30px rgba(139, 92, 246, .5);
  transition: transform .18s;
}
.chat-fab:hover { transform: scale(1.08); }
.chat-pencere {
  position: fixed;
  right: 24px;
  bottom: 98px;
  z-index: 90;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background: var(--bg-2);
  border: 1px solid var(--cizgi-guclu);
  border-radius: 18px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.chat-pencere.acik { display: flex; }
.chat-baslik {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(109, 40, 217, .14));
  border-bottom: 1px solid var(--cizgi);
}
.chat-baslik .chat-avatar { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--cizgi-guclu); }
.chat-baslik b { display: block; font-size: 14.5px; }
.chat-baslik span:not(.nokta) { font-size: 12px; color: var(--soluk); }
.chat-baslik .nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--yesil); margin-left: 6px; box-shadow: 0 0 8px var(--yesil); }
.chat-mesajlar { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-mesaj {
  max-width: 82%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.chat-mesaj.bot { background: var(--kart); border: 1px solid var(--cizgi); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-mesaj.kullanici { background: linear-gradient(135deg, var(--mor), var(--mor-koyu)); border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-mesaj-satir { display: flex; gap: 8px; align-items: flex-end; }
.chat-mesaj-satir .chat-avatar { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; }
.chat-yaziyor { display: none; align-self: flex-start; gap: 5px; padding: 12px 14px; background: var(--kart); border-radius: 14px; border-bottom-left-radius: 4px; }
.chat-yaziyor.acik { display: inline-flex; }
.chat-yaziyor i { width: 7px; height: 7px; border-radius: 50%; background: var(--mor-parlak); animation: yaziyor 1.1s infinite; }
.chat-yaziyor i:nth-child(2) { animation-delay: .18s; }
.chat-yaziyor i:nth-child(3) { animation-delay: .36s; }
@keyframes yaziyor { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-giris { display: flex; gap: 10px; padding: 13px 15px; border-top: 1px solid var(--cizgi); }
.chat-giris input {
  flex: 1;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 11px;
  padding: 11px 14px;
  color: var(--metin);
  font-size: 13.5px;
  outline: none;
}
.chat-giris input:focus { border-color: var(--cizgi-guclu); }
.chat-giris button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--mor-parlak), var(--mor-koyu));
  color: #fff;
  font-size: 16px;
}

/* ---------- MODAL ---------- */
.modal-arka {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 4, 10, .78);
  backdrop-filter: blur(6px);
  display: none;
  place-items: center;
  padding: 24px;
}
.modal-arka.acik { display: grid; }
.modal {
  width: 100%;
  max-width: 540px;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--cizgi-guclu);
  border-radius: 18px;
  padding: 30px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.modal h3 { font-size: 20px; margin-bottom: 14px; }
.modal p, .modal li { font-size: 14px; color: #c9c7dd; line-height: 1.65; }
.modal ul { padding-left: 20px; display: grid; gap: 10px; margin-top: 10px; }
.modal-kapat {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--cizgi);
  background: var(--kart);
  color: var(--soluk);
  font-size: 15px;
}
.modal-kapat:hover { color: #fff; border-color: var(--cizgi-guclu); }

/* ---------- 404 / HATA ---------- */
.hata-sayfa { text-align: center; padding: 100px 24px 120px; }
.hata-sayfa .kod { font-family: var(--font-d); font-size: 96px; font-weight: 700; background: linear-gradient(90deg, var(--mor-parlak), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hata-sayfa h1 { font-size: 24px; margin: 10px 0 14px; }
.hata-sayfa p { color: var(--soluk); margin-bottom: 28px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .detay-grid { grid-template-columns: 1fr; }
  .detay-gorsel { height: 260px; }
  .marka-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .container { padding: 0 18px; }
  .topbar-rozetler span:nth-child(n+2) { display: none; }
  .header-inner { flex-wrap: wrap; gap: 12px; }
  .header-arama { order: 3; flex-basis: 100%; max-width: none; }
  .kat-nav { top: 118px; }
  .hero-slider { height: 560px; }
  .hero-icerik { left: 24px; right: 56px; max-width: none; }
  .hero-icerik h1 { font-size: 30px; }
  .hero-icerik p { font-size: 14.5px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-iki { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-slider { height: 520px; }
  .hero-ok { display: none; }
  .urun-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .urun-gorsel { height: 110px; font-size: 42px; }
  .kategori-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kategori-kart { flex-direction: column; text-align: center; padding: 14px; gap: 10px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; padding: 40px 0 26px; }
  .nav-kullanici .selam { display: none; }
  .nav-kullanici .uzun { display: none; }
  .chat-pencere { right: 12px; bottom: 88px; }
  .filtre-bar select { flex: 1 1 100%; }
}

/* ============================================================
   ANIMASYON KATMANI — neon & motion
   ============================================================ */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* --- sayfa atmosferi: yavas nefes alan mor hale --- */
body::before { animation: atmosferNefes 11s ease-in-out infinite alternate; }
@keyframes atmosferNefes {
  from { opacity: .75; }
  to   { opacity: 1; }
}

/* --- HERO: ken burns + parcacik + sahne girisi --- */
.hero-slide { background-image: none; }
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center 25%;
  transform: scale(1.02);
}
.hero-slide.aktif::before {
  animation: kenBurns 9s var(--ease-out) both;
}
@keyframes kenBurns {
  from { transform: scale(1.12); }
  to   { transform: scale(1.02); }
}
.hero-slide::after { z-index: 1; }
.hero-partikul {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-slide .hero-icerik { z-index: 3; }
.hero-slide.aktif .hero-icerik > * {
  animation: yukariCik .65s var(--ease-out) both;
}
.hero-slide.aktif .hero-icerik > *:nth-child(2) { animation-delay: .08s; }
.hero-slide.aktif .hero-icerik > *:nth-child(3) { animation-delay: .16s; }
.hero-slide.aktif .hero-icerik > *:nth-child(4) { animation-delay: .24s; }
@keyframes yukariCik {
  from { opacity: 0; transform: translateY(26px); }
}

/* --- vurgu metni: akan neon degradesi --- */
.vurgu {
  background-size: 220% 100%;
  animation: gradAkan 5s var(--ease-in-out) infinite alternate;
}
@keyframes gradAkan {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

/* --- bolum basligi: nefes alan neon cubuk --- */
.bolum-baslik h2::before { animation: cubukNefes 3.2s ease-in-out infinite; }
@keyframes cubukNefes {
  0%, 100% { box-shadow: 0 0 8px rgba(168, 85, 247, .5); }
  50%      { box-shadow: 0 0 20px rgba(168, 85, 247, .95); }
}

/* --- kategori nav: aktif oge atesi --- */
.kat-nav a.aktif { animation: navNefes 2.8s ease-in-out infinite; }
@keyframes navNefes {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--cizgi-guclu), 0 0 0 rgba(168, 85, 247, 0); }
  50%      { box-shadow: inset 0 0 0 1px var(--cizgi-guclu), 0 0 18px rgba(168, 85, 247, .38); }
}

/* --- fiyat: neon parlama --- */
.fiyat { text-shadow: 0 0 18px rgba(168, 85, 247, .45); }

/* --- butonlar: parlama sapmasi + basma geri bildirimi --- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}
.btn:active { transform: scale(.97); transition: transform .12s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { transform: translateX(280%) skewX(-18deg); transition: transform .6s var(--ease-out); }
}

/* --- kartlarda hover: kalkis + neon sinir + ikon salinimi + parlama --- */
@media (hover: hover) and (pointer: fine) {
  .kategori-kart:hover .kategori-ikon { animation: ikonSalla .5s var(--ease-out); }
  .urun-kart:hover .urun-gorsel > span[aria-hidden] { transform: scale(1.12) rotate(-4deg); }
  .guven-kart:hover .ikon { transform: translateY(-4px) scale(1.08); }
}
.kategori-ikon, .urun-gorsel > span[aria-hidden], .guven-kart .ikon {
  transition: transform .35s var(--ease-out);
}
@keyframes ikonSalla {
  0% { transform: rotate(0); }
  35% { transform: rotate(-7deg) scale(1.06); }
  70% { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}
.kategori-kart, .urun-kart, .guven-kart {
  position: relative;
}
.kategori-kart::after, .urun-kart::after, .guven-kart::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 rgba(168, 85, 247, 0);
  pointer-events: none;
  transition: box-shadow .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .kategori-kart:hover::after, .urun-kart:hover::after, .guven-kart:hover::after {
    box-shadow: inset 0 0 0 1px var(--cizgi-guclu), 0 0 26px rgba(139, 92, 246, .28);
  }
}
/* urun gorselinde parlama sapmasi */
.urun-gorsel { position: relative; overflow: hidden; }
.urun-gorsel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .14), transparent);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .urun-kart:hover .urun-gorsel::before {
    transform: translateX(320%) skewX(-18deg);
    transition: transform .7s var(--ease-out);
  }
}

/* --- scroll reveal sistemi --- */
.acilir {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  will-change: opacity, transform;
}
.acilir.gorsun { opacity: 1; transform: none; }

/* --- chat FAB: ates halkasi + pencere pop --- */
.chat-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, .65);
  animation: fabHalka 2.4s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes fabHalka {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(1.75); opacity: 0; }
}
.chat-pencere.acik { animation: pencerePop .22s var(--ease-out) both; transform-origin: bottom right; }
@keyframes pencerePop {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
}
.modal-arka.acik .modal { animation: modalPop .28s var(--ease-out) both; }
@keyframes modalPop {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
}

/* --- azaltilmis hareket tercihi --- */
@media (prefers-reduced-motion: reduce) {
  body::before, .hero-slide.aktif::before, .vurgu, .bolum-baslik h2::before,
  .kat-nav a.aktif, .chat-fab::before { animation: none; }
  .hero-slide.aktif .hero-icerik > * { animation: none; }
  .acilir { transform: none; transition: opacity .25s ease; }
  .hero-partikul { display: none; }
}

/* ============================================================
   MEGA MENU + REKLAM ALANLARI
   ============================================================ */
.kat-nav .kat-item { position: relative; flex: 0 0 auto; }
.kat-nav .kat-link { display: inline-flex; }
.kat-ok { font-size: 10px; margin-left: 2px; opacity: .7; }
.kat-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 250px;
  background: rgba(13, 11, 26, .98);
  border: 1px solid var(--cizgi-guclu);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(139, 92, 246, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
  z-index: 60;
}
.kat-panel a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--soluk);
  white-space: nowrap;
  transition: background .16s, color .16s, padding-left .16s var(--ease-out);
}
.kat-panel a:hover {
  background: rgba(139, 92, 246, .14);
  color: #fff;
  padding-left: 20px;
}
.kat-panel .kat-panel-tumu {
  color: var(--mor-parlak);
  font-weight: 700;
  border-bottom: 1px solid var(--cizgi);
  border-radius: 9px 9px 0 0;
  margin-bottom: 4px;
  padding-bottom: 12px;
}
@media (hover: hover) and (pointer: fine) {
  .kat-nav .kat-item:hover .kat-panel,
  .kat-nav .kat-item:focus-within .kat-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .kat-nav .kat-item:hover .kat-link { background: rgba(139, 92, 246, .12); color: var(--metin); }
}
.kat-nav .kat-item.acik .kat-panel {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--cizgi);
  border-radius: 0;
  margin-top: 2px;
  padding: 6px 0 10px 14px;
  background: transparent;
}

/* --- kategori sayfasi alt kategori chip'leri --- */
.alt-cipler { display: flex; flex-wrap: wrap; gap: 9px; margin: -8px 0 24px; }
.alt-cip {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  color: var(--soluk);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  transition: border-color .18s, color .18s, background .18s;
}
.alt-cip:hover { border-color: var(--cizgi-guclu); color: var(--metin); }
.alt-cip.aktif {
  background: linear-gradient(135deg, rgba(139, 92, 246, .3), rgba(109, 40, 217, .2));
  border-color: var(--cizgi-guclu);
  color: #fff;
}

/* --- reklam alanlari --- */
.reklam {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--cizgi-guclu);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  margin: 18px 0;
}
.reklam::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .reklam:hover::before { transform: translateX(280%) skewX(-18deg); transition: transform .8s var(--ease-out); }
}
.reklam-etiket {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .4);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
}
.reklam-icerik { flex: 1; position: relative; z-index: 1; }
.reklam-icerik b {
  display: block;
  font-family: var(--font-d);
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 4px;
}
.reklam-icerik p { font-size: 13.5px; opacity: .85; line-height: 1.5; }
.reklam .btn { position: relative; z-index: 1; flex: 0 0 auto; }
.reklam-itemsatis { background: linear-gradient(120deg, #2a1503, #4a2405 55%, #2a1503); border-color: rgba(251, 146, 60, .45); }
.reklam-itemsatis .reklam-icerik b { color: #fdba74; }
.reklam-itemsatis .reklam-icerik p { color: #fed7aa; }
.reklam-hesap { background: linear-gradient(120deg, #041a2e, #08293f 55%, #041a2e); border-color: rgba(56, 189, 248, .4); }
.reklam-hesap .reklam-icerik b { color: #7dd3fc; }
.reklam-hesap .reklam-icerik p { color: #bae6fd; }
.reklam-yan {
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 12px;
  padding: 24px 20px;
  margin: 0;
}
.reklam-yan .reklam-icerik b { font-size: 19px; }
.reklam-yan .btn { width: 100%; }

/* --- yan kolonlu sayfa duzeni --- */
.icerik-yan {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 26px;
  align-items: start;
}
.icerik-yan .yan-taraf { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 130px; }
@media (max-width: 1100px) {
  .icerik-yan { grid-template-columns: 1fr; }
  .icerik-yan .yan-taraf { position: static; flex-direction: row; }
  .icerik-yan .reklam-yan { flex: 1; }
}
@media (max-width: 640px) {
  .icerik-yan .yan-taraf { flex-direction: column; }
  .reklam { flex-direction: column; text-align: center; padding: 20px 16px; }
  .reklam .btn { width: 100%; }
}

/* ============================================================
   PROFESYONEL KATMAN — avatar menu, etiketler, istatistik, footer
   ============================================================ */
/* --- avatarli kullanici menusu --- */
.kullanici-menu { position: relative; }
.avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--kart);
  border: 1px solid var(--cizgi-guclu);
  color: var(--metin);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color .2s, box-shadow .25s;
}
.avatar-btn img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--cizgi-guclu);
}
.avatar-ok { font-size: 10px; color: var(--soluk); transition: transform .2s var(--ease-out); }
.kullanici-menu.acik .avatar-ok { transform: rotate(180deg); }
.kullanici-menu.acik .avatar-btn {
  border-color: var(--mor-parlak);
  box-shadow: 0 0 18px rgba(168, 85, 247, .3);
}
.kullanici-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 250px;
  background: rgba(13, 11, 26, .98);
  border: 1px solid var(--cizgi-guclu);
  border-radius: 15px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(139, 92, 246, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.97);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
  z-index: 70;
}
.kullanici-menu.acik .kullanici-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.kullanici-panel-baslik {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px 14px;
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 5px;
}
.kullanici-panel-baslik img { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--cizgi-guclu); }
.kullanici-panel-baslik b { display: block; font-size: 14px; }
.kullanici-panel-baslik span { font-size: 11.5px; color: var(--soluk); }
.kullanici-panel a, .kullanici-panel .cikis-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--soluk);
  transition: background .16s, color .16s, padding-left .16s var(--ease-out);
}
.kullanici-panel a:hover, .kullanici-panel .cikis-btn:hover {
  background: rgba(139, 92, 246, .14);
  color: #fff;
  padding-left: 18px;
}
.kullanici-panel .cikis-btn { color: var(--kirmizi); border-top: 1px solid var(--cizgi); border-radius: 0 0 9px 9px; margin-top: 4px; }
.kullanici-panel .cikis-btn:hover { background: rgba(248, 113, 113, .1); color: var(--kirmizi); }
.ilan-btn { color: var(--sari) !important; border-color: rgba(251, 191, 36, .4) !important; }
.ilan-btn:hover { background: rgba(251, 191, 36, .1) !important; }

/* --- populer arama etiketleri --- */
.header-orta { flex: 1; max-width: 660px; }
.header-orta .header-arama { max-width: none; }
.header-etiketler {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--soluk);
  flex-wrap: wrap;
}
.header-etiketler b { font-weight: 600; color: #c5c3d8; margin-right: 2px; }
.header-etiketler a {
  background: rgba(139, 92, 246, .1);
  border: 1px solid var(--cizgi);
  padding: 3px 11px;
  border-radius: 999px;
  color: var(--soluk);
  transition: color .18s, border-color .18s, background .18s;
}
.header-etiketler a:hover { color: #fff; border-color: var(--cizgi-guclu); background: rgba(139, 92, 246, .2); }

/* --- istatistik barı (sayac animasyonlu) --- */
.ist-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 8px 0 10px;
}
.ist {
  background: linear-gradient(160deg, var(--kart), #0c0c18);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .25s, transform .18s var(--ease-out);
}
.ist:hover { border-color: var(--cizgi-guclu); box-shadow: var(--golge-mor); transform: translateY(-3px); }
.ist .ist-deger {
  font-family: var(--font-d);
  font-size: 34px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--mor-parlak), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ist .ist-ad { font-size: 13px; color: var(--soluk); margin-top: 6px; }
.ist::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mor-parlak), transparent);
  opacity: .7;
}

/* --- footer rozetleri ve sosyal --- */
.footer-rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 0 24px;
}
.odeme-rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #c5c3d8;
}
.footer-sosyal { display: flex; gap: 10px; padding: 0 0 26px; }
.footer-sosyal a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  font-size: 16px;
  transition: transform .18s var(--ease-out), border-color .2s, box-shadow .25s;
}
.footer-sosyal a:hover {
  transform: translateY(-3px);
  border-color: var(--cizgi-guclu);
  box-shadow: 0 6px 18px rgba(139, 92, 246, .3);
}
.footer-guven {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--soluk);
  padding-bottom: 24px;
}
.footer-guven img { width: 30px; height: 30px; border-radius: 8px; }

@media (max-width: 640px) {
  .avatar-btn span, .avatar-ok { display: none; }
  .avatar-btn { padding: 4px; }
  .ilan-btn { display: none; }
  .header-etiketler { display: none; }
}

/* ============================================================
   V6 — urun gorseli, mega panel, duyuru bandi, R10 reklami
   ============================================================ */
.urun-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .urun-kart:hover .urun-img { transform: scale(1.07); }
}

/* --- tum kategoriler mega paneli --- */
.kat-tum-btn {
  background: linear-gradient(135deg, var(--mor-parlak), var(--mor-koyu));
  color: #fff !important;
  border: none;
  font-weight: 700;
  gap: 8px;
}
.mega-panel {
  min-width: 0;
  width: min(940px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 18px;
  padding: 20px;
  align-items: start;
}
.mega-kolon { display: flex; flex-direction: column; gap: 1px; }
.mega-kolon .mega-baslik {
  font-weight: 700;
  color: var(--metin) !important;
  font-size: 13.5px !important;
  border-bottom: 1px solid var(--cizgi);
  border-radius: 0 !important;
  padding: 6px 8px 8px !important;
  margin-bottom: 4px;
  white-space: normal !important;
}
.mega-kolon .mega-baslik:hover { background: rgba(139, 92, 246, .16) !important; color: #fff !important; }
.mega-kolon .mega-alt {
  font-size: 12.5px !important;
  padding: 6px 8px !important;
  white-space: normal !important;
}
@media (hover: hover) and (pointer: fine) {
  .tum-kat:hover .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.tum-kat .mega-panel { left: 0; }
.tum-kat.acik .mega-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  top: auto;
  width: auto;
  max-height: 70vh;
  overflow-y: auto;
}

/* --- duyuru bandi (kayan yazi) --- */
.duyuru-bar {
  background: linear-gradient(90deg, #150b2e, #0d0a1c 50%, #150b2e);
  border-bottom: 1px solid var(--cizgi);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.duyuru-ic {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--soluk);
  animation: duyuruKaydir 28s linear infinite;
  width: max-content;
}
.duyuru-ic span { display: inline-flex; align-items: center; gap: 7px; }
@keyframes duyuruKaydir {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- R10 reklami --- */
.reklam-r10 { background: linear-gradient(120deg, #0a1e3d, #123a6b 55%, #0a1e3d); border-color: rgba(96, 165, 250, .45); }
.reklam-r10 .reklam-icerik { display: flex; align-items: center; gap: 16px; text-align: left; }
.reklam-r10 .reklam-logo { height: 40px; width: auto; flex: 0 0 auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.reklam-r10 .reklam-icerik b { color: #93c5fd; }
.reklam-r10 .reklam-icerik p { color: #bfdbfe; }
.reklam-r10.reklam-yan .reklam-icerik { flex-direction: column; text-align: center; }
.reklam-r10.reklam-yan .reklam-logo { height: 34px; }

@media (max-width: 640px) {
  .reklam-r10 .reklam-icerik { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .duyuru-ic { animation: none; }
}

/* ============================================================
   V7 — firsat, indirim, breadcrumb, sekmeler, iskelet
   ============================================================ */
/* --- fiyat kutusu: eski fiyat ustuste --- */
.fiyat-kutu { display: flex; flex-direction: column; line-height: 1.15; }
.eski-fiyat {
  font-size: 12px;
  color: var(--soluk);
  text-decoration: line-through;
  font-weight: 500;
}
.rozet-indirim {
  top: 10px; right: 10px;
  background: linear-gradient(135deg, var(--kirmizi), #dc2626);
  color: #fff;
  box-shadow: 0 3px 12px rgba(248, 113, 113, .45);
}
.rozet-son {
  bottom: 10px; left: 10px;
  background: linear-gradient(135deg, var(--sari), #d97706);
  color: #1c1200;
  animation: sonNefes 1.8s ease-in-out infinite;
}
@keyframes sonNefes {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

/* --- gunun firsati --- */
.firsat-kart {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0;
  background: linear-gradient(140deg, #17092e, #0d0a1c 60%);
  border: 1px solid var(--cizgi-guclu);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 18px;
  box-shadow: 0 0 44px rgba(139, 92, 246, .16), inset 0 0 60px rgba(139, 92, 246, .05);
  position: relative;
}
.firsat-kart::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .05) 50%, transparent 58%);
  transform: translateX(-160%) skewX(-14deg);
  animation: firsatParla 4.5s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes firsatParla {
  0% { transform: translateX(-160%) skewX(-14deg); }
  55%, 100% { transform: translateX(280%) skewX(-14deg); }
}
.firsat-gorsel { min-height: 280px; }
.firsat-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.firsat-bilgi { padding: 38px 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.firsat-bilgi .etiket {
  background: linear-gradient(135deg, var(--kirmizi), #b91c1c);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(248, 113, 113, .4);
}
.firsat-bilgi h2 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; }
.firsat-bilgi > p { color: var(--soluk); font-size: 14px; line-height: 1.6; }
.firsat-satir { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 6px 0; }
.firsat-fiyat { display: flex; flex-direction: column; }
.firsat-fiyat .fiyat { font-size: 34px; }
.geri-sayim { display: flex; gap: 9px; }
.geri-sayim > div {
  background: rgba(6, 6, 13, .7);
  border: 1px solid var(--cizgi-guclu);
  border-radius: 11px;
  min-width: 62px;
  padding: 9px 8px 7px;
  text-align: center;
}
.geri-sayim b {
  display: block;
  font-family: var(--font-d);
  font-size: 22px;
  font-weight: 700;
  color: var(--mor-parlak);
  font-variant-numeric: tabular-nums;
}
.geri-sayim span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--soluk); }
@media (max-width: 900px) {
  .firsat-kart { grid-template-columns: 1fr; }
  .firsat-gorsel { min-height: 180px; }
  .firsat-bilgi { padding: 26px 22px; }
}

/* --- breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--soluk);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--soluk); transition: color .18s; }
.breadcrumb a:hover { color: var(--mor-parlak); }
.breadcrumb span { color: #55536e; }
.breadcrumb b { color: var(--metin); font-weight: 600; }

/* --- urun detay sekmeleri --- */
.detay-sekmeler {
  margin: 6px 0 26px;
  background: linear-gradient(170deg, var(--kart), #0b0b16);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
}
.sekme-butonlar {
  display: flex;
  gap: 4px;
  padding: 10px 12px 0;
  border-bottom: 1px solid var(--cizgi);
  overflow-x: auto;
  scrollbar-width: none;
}
.sekme-btn {
  background: none;
  border: none;
  color: var(--soluk);
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 16px;
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .18s, border-color .2s;
}
.sekme-btn:hover { color: var(--metin); }
.sekme-btn.aktif { color: var(--mor-parlak); border-bottom-color: var(--mor-parlak); }
.sekme-icerik { display: none; padding: 22px 24px; }
.sekme-icerik.aktif { display: block; animation: yukariCik .4s var(--ease-out) both; }
.sekme-icerik p { color: #c9c7dd; line-height: 1.7; font-size: 14px; margin-bottom: 12px; }

/* --- iskelet yukleme --- */
.iskelet {
  background: linear-gradient(170deg, var(--kart), #0b0b16);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
}
.iskelet .isk-gorsel { height: 150px; }
.iskelet .isk-satir { height: 13px; border-radius: 6px; margin: 14px 16px 0; }
.iskelet .isk-satir.kisa { width: 55%; margin-bottom: 18px; }
.isk-parla {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
}
.isk-parla::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .09), transparent);
  transform: translateX(-100%);
  animation: iskParla 1.4s linear infinite;
}
@keyframes iskParla {
  to { transform: translateX(100%); }
}