:root{
  /* Brand */
  --brand:#ff3b30;

  /* Dark (default) */
  --bg:#070b14;
  --bg2:#0b1220;
  --card:#0f172a;
  --card2:#0b1326;
  --text:#e5e7eb;
  --muted:rgba(229,231,235,.68);
  --line:rgba(148,163,184,.14);

  /* Effects */
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --shadow-soft: 0 10px 24px rgba(0,0,0,.22);
  --radius: 20px;
  --radius-sm: 14px;

  /* Layout */
  --max: 980px;
  --pad: 16px;

  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg:#f6f7fb;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#ffffff;
  --text:#0b1220;
  --muted:rgba(15,23,42,.68);
  --line:rgba(15,23,42,.12);

  --shadow: 0 18px 50px rgba(16,24,40,.14);
  --shadow-soft: 0 10px 24px rgba(16,24,40,.10);

  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color:var(--text);
}

/* Premium ambient background (cheap to render) */
body::before{
  content:"";
  position:fixed;
  inset:-120px;
  z-index:-1;
  background:
    radial-gradient(680px 340px at 12% 12%, rgba(255,59,48,.18), transparent 62%),
    radial-gradient(680px 340px at 88% 18%, rgba(56,189,248,.12), transparent 62%),
    radial-gradient(760px 380px at 50% 92%, rgba(34,197,94,.10), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  pointer-events:none;
  transform: translateZ(0);
}

.container{max-width:var(--max); margin:0 auto; padding:18px var(--pad) 28px}

/* Header */
.header{
  position: sticky; top:0;
  z-index: 30;
  padding: 12px 0 10px;
  backdrop-filter: blur(10px);
}

.headerInner{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}

:root[data-theme="light"] .headerInner{
  background: rgba(255,255,255,.78);
}

.logo{display:flex; align-items:center; gap:10px; min-width:0}
.logoMark{
  width:36px; height:36px; border-radius: 14px;
  background: rgba(255,59,48,.16);
  border:1px solid rgba(255,59,48,.35);
  display:grid; place-items:center;
  font-weight:900;
  letter-spacing:.2px;
}
.titleWrap{min-width:0}
.title{
  font-weight:900;
  font-size:15px; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sub{
  font-size:12px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}

.pill{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  border-radius:999px;
  padding:9px 11px;
  font-size:13px;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
}
:root[data-theme="light"] .pill{background: rgba(255,255,255,.9)}
.pill:hover{filter:brightness(1.06)}
.pill:active{transform: translateY(1px)}
select.pill{padding:9px 12px}

/* Search */
.search{width: 100%; margin: 14px 0 12px; display:flex}
.search input{
  width:100%;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
  box-shadow: 0 0 0 0 rgba(255,59,48,0);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
:root[data-theme="light"] .search input{background: rgba(255,255,255,.92)}
.search input::placeholder{color: rgba(229,231,235,.55)}
:root[data-theme="light"] .search input::placeholder{color: rgba(15,23,42,.45)}
.search input:focus{
  border-color: rgba(255,59,48,.45);
  box-shadow: 0 0 0 4px rgba(255,59,48,.12);
}

/* Legacy categories pill buttons (container is still used in HTML) */
.categories{
  display:flex;
  gap:8px;
  overflow:auto;
  padding: 10px 2px 12px;
  scrollbar-width: none;
}
.categories::-webkit-scrollbar{display:none}
.catBtn{
  flex:0 0 auto;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--muted);
  border-radius:999px;
  padding:10px 12px;
  font-size:13px;
  cursor:pointer;
}
:root[data-theme="light"] .catBtn{background: rgba(255,255,255,.9)}
.catBtn.active{
  color:var(--text);
  border-color: rgba(255,59,48,.40);
  background: rgba(255,59,48,.12);
}

/* ===== Categories (new-site runtime DOM: .catGrid > .catCard) ===== */
.catGrid{
  display:flex;
  gap: 12px;
  width: 100%;
  padding: 6px 2px 14px;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.catGrid::-webkit-scrollbar{display:none}

/* Premium category cards: image-first with overlay title */
.catCard{
  flex: 0 0 auto;
  width: 168px;
  scroll-snap-align: start;

  position:relative;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  padding: 0;
  cursor:pointer;
  text-align:left;
  color: var(--text);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
:root[data-theme="light"] .catCard{background: rgba(255,255,255,.9)}
.catCard:hover{filter: brightness(1.04)}
.catCard:active{transform: scale(.99)}

.catCard.active{
  border-color: rgba(255,59,48,.55);
  box-shadow: 0 0 0 1px rgba(255,59,48,.18), 0 18px 60px rgba(255,59,48,.14), var(--shadow-soft);
  transform: scale(1.02);
}

/* Big thumb with fixed aspect-ratio -> no CLS */
.catThumb{
  width: 100%;
  aspect-ratio: 16 / 10;
  background: rgba(148,163,184,.10);
  border-bottom: 1px solid rgba(148,163,184,.12);
  overflow:hidden;
  position: relative;
}

.catThumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: translateZ(0);
}

/* Single fallback layer */
.catThumbFallback{
  position:absolute;
  inset:0;
  background:
    radial-gradient(240px 120px at 20% 20%, rgba(255,59,48,.18), transparent 58%),
    radial-gradient(220px 120px at 80% 25%, rgba(56,189,248,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

/* Overlay gradient for readable title */
.catThumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.08) 60%, rgba(0,0,0,0));
  pointer-events:none;
}
:root[data-theme="light"] .catThumb::after{
  background: linear-gradient(to top, rgba(15,23,42,.62), rgba(15,23,42,.10) 60%, rgba(15,23,42,0));
}

.catName{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;

  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  text-shadow: 0 8px 22px rgb(110, 110, 110);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Products grid */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top: 10px;
}
@media (min-width: 720px){
  .grid{grid-template-columns: 1fr 1fr}
}

/* Product card: image on top (premium) */
.item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;

  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
:root[data-theme="light"] .item{background: rgba(255,255,255,.92)}
@media (hover:hover){
  .item:hover{transform: translateY(-1px); filter: brightness(1.02)}
}

.thumb{
  width:100%;
  aspect-ratio: 16 / 10;
  height:auto;

  background: rgba(148,163,184,.10);
  border-bottom:1px solid rgba(148,163,184,.12);
  overflow:hidden;
  position:relative;
}
.thumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transform: translateZ(0);
}

.skeleton{
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: shimmer 1.1s infinite;
}
@keyframes shimmer{
  0%{transform: translateX(-100%)}
  100%{transform: translateX(100%)}
}

/* Content block (the 2nd div in .item) */
.item > div:not(.thumb){
  padding: 12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width:0;
}

.name{
  font-weight:900;
  font-size:15px;
  margin:0;
  letter-spacing:.1px;
}
.desc{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 2.8em; /* keeps cards aligned even if desc empty */
}

.meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top: 2px;
}

.price{
  font-weight:900;
  color: var(--text);
  background: rgba(255,59,48,.14);
  border:1px solid rgba(255,59,48,.26);
  padding:8px 10px;
  border-radius: 999px;
  font-size:13px;
  white-space:nowrap;
}
:root[data-theme="light"] .price{
  background: rgba(255,59,48,.10);
}

.tag{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

/* Empty state */
.empty{
  border:1px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--muted);
  background: rgba(255,255,255,.03);
}

.footer{
  margin-top:18px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

/* Focus ring */
:focus-visible{
  outline: 3px solid rgba(255,59,48,.35);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important;}
}
/* =========================================================
   MOR-LOUNGE (ESKI-SITE) BIRE BIR BOYUT + HISSIYAT OVERRIDE
   (CSS only, JS/endpoint dokunulmaz)
   ========================================================= */

:root{
  /* Eski site ölçekleri */
  --radius: 14px;
  --radius-sm: 12px;

  /* Eski site gap/padding */
  --pad: 20px;
}

/* Body font + daha “temiz” görünüm (eski gibi) */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Header: eski site gibi daha sade cam */
.header{
  padding: 10px 0;
  backdrop-filter: blur(8px);
}

.headerInner{
  border-radius: 0;
  border: none;
  background: rgba(255,255,255,0.6);
  box-shadow: none;
  padding: 10px 0;
}

:root[data-theme="light"] .headerInner{
  background: rgba(255,255,255,0.6);
}

:root:not([data-theme="light"]) .headerInner{
  background: rgba(0,0,0,0.6);
}

/* Container padding -> eski site 20px */
.container{
  padding-left: 20px;
  padding-right: 20px;
}

/* ===== KATEGORILER: bire bir 140x90 ===== */
.catGrid{
  gap: 12px;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
}

.catCard{
  width: 140px;
  height: 90px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  transform: none;
}

.catCard:hover{ filter: none; }
@media (hover:hover){
  .catCard:hover{ transform: scale(1.02); }
}

.catCard.active{
  transform: scale(1.05);
  box-shadow: 0 0 12px var(--brand);
}

/* Görsel alanı kartı komple doldursun */
.catThumb{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: none;
  background: #000;
}

.catThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Eski site overlay gradient */
.catThumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.1));
  pointer-events:none;
}

:root[data-theme="light"] .catThumb::after{
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.1));
}

/* Eski site dark’ta farklı overlay hissi */
:root:not([data-theme="light"]) .catThumb::after{
  background: linear-gradient(to top, rgba(255,255,255,0.1), rgba(0,0,0,0.3));
}

/* Kategori adı bire bir */
.catName{
  left: 12px;
  bottom: 10px;
  font-weight: 600;
  font-size: 13px;
  text-shadow: none;
}

/* ===== URUN GRID: eski site gibi auto-fit + min 230, gap 18 ===== */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 0;
}

/* ===== URUN KARTI: arka planla uyumlu (dark) ===== */
.item{
  border: none;
  border-radius: var(--radius);
  background: rgba(255,255,255,1);
  box-shadow: 0 3px 12px rgba(0,0,0,0.10);
  overflow: hidden;
  transform: none;
}

/* Dark tema: site arka planına uyumlu kart rengi */
:root:not([data-theme="light"]) .item{
  background: var(--card2);              /* #0b1326 */
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
@media (hover:hover){
  .item:hover{ transform: scale(1.02); }
}

/* Ürün görsel yüksekliği: 160px (eski site) */
.thumb{
  height: 160px;
  aspect-ratio: auto;
  border: none;
  background: #000;
}

.thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* İçerik padding: 10 14 (eski site) */
.item > div:not(.thumb){
  padding: 10px 14px;
  gap: 6px;
}

/* Başlık: 18px */
.name{
  font-size: 18px;
  font-weight: 600;
}

/* Açıklama: 14px */
.desc{
  font-size: 14px;
  line-height: 1.4;
  min-height: 0;
}

/* Fiyat: accent kırmızı, bold (eski site) */
.price{
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  color: var(--brand);
  font-weight: 700;
  font-size: 15px;
}

/* Tag daha sade */
.tag{
  font-size: 12px;
  opacity: .8;
}

/* Eski site hissi: body arka planı daha düz */
body::before{
  display:none !important;
}
/* ===== Sticky sadece KATEGORİ şeridi olsun ===== */

/* Sticky sadece kategori kalsın */
.header{
  position: static !important;
  top: auto !important;
  backdrop-filter: none !important;
}

#cats{
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;

  background: var(--bg) !important;
  padding-top: 10px;
  padding-bottom: 10px;

  overflow: visible !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Yatay kaydırma sadece catGrid’de olsun */
#cats .catGrid{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* Üstte dururken hafif gradient (okunaklılık) */
#cats::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}

:root[data-theme="light"] #cats::before{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
}
/* ===== Sadece kategori şeridi sticky ===== */

/* Header artık sticky değil */
.header{
  position: static !important;
  top: auto !important;
}

/* Ana kategori wrapper normal kalsın */
#cats{
  position: relative !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Asıl sticky olacak olan yatay kategori şeridi */
.catGrid{
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;

  background: var(--bg);
  padding: 10px 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border-bottom: 1px solid var(--line);
}
/* Header artık sticky değil */
.header{
  position: static !important;
}

/* Doğru sticky davranışı */
#cats{
  position: sticky;
  top: 0;
  z-index: 80;

  background: var(--bg);
  padding-top: 10px;
  padding-bottom: 10px;

  border-bottom: 1px solid var(--line);
}

/* Parent overflow sticky bozmasın */
.container{
  overflow: visible !important;
}
/* Header artık sticky olmasın (zaten akıp gitsin istiyoruz) */
.header{
  position: static !important;
}

/* Kategori eski sitedeki gibi: üstüne gelince yapışsın */
#cats{
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: var(--bg) !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
/* Kategori sticky ama arka planı blok olmasın */
#cats{
  position: sticky;
  top: 0;
  z-index: 999;

  background: transparent !important;
  padding: 10px 0 !important;

  border-bottom: none !important;
  box-shadow: none !important;
}

/* Kategori şeridi kendi doğal görünümünü korusun */
#cats .catGrid{
  background: transparent !important;
}
/* =========================
   CATEGORY STRIP FIXES
   ========================= */

/* Sticky olduğunda arka plan katmanı olmasın (ton farkı kalksın) */
#cats{
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Kategori alanı container padding'inden bağımsız tam ekran aksın */
#cats{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Cat şeridinin kendi paddinglerini sıfırla -> kenarlarda boşluk kalmasın */
#cats .catGrid{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  gap: 12px;
  background: transparent !important;
}

/* Glow kesilmesin diye scroller içinde “safe gutter” ver
   (boşluk gibi görünmez; sadece glow'un taşmasına izin verir) */
#cats .catGrid{
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Eğer üstte hala farklı ton görüyorsan sebep: #cats::before overlay kalmış olabilir.
   Tamamen kapatıyoruz. */
#cats::before{
  content: none !important;
  display: none !important;
}

/* iOS: overscroll'da arka plan parlamasın */
html, body{
  background: var(--bg) !important;
}
/* ===== PRO GLASS STICKY CATEGORY BAR ===== */

/* Kategori barının kendisi (full-bleed kalsın) */
#cats{
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;

  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  /* Glass */
  background: rgba(10, 14, 24, 0.55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);

  /* clean edges */
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;

  padding: 10px 0 !important;
}

/* Light tema için cam */
:root[data-theme="light"] #cats{
  background: rgba(255,255,255,0.70) !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 12px 28px rgba(16,24,40,.12) !important;
}

/* Kategori şeridinin içerideki safe gutter’ı */
#cats .catGrid{
  padding-left: 14px !important;
  padding-right: 14px !important;
  background: transparent !important;
}

/* Sağ/sol tarafın “sert kesilmesini” yumuşat (daha pro görünür) */
#cats{
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0px,
    black 18px,
    black calc(100% - 18px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0px,
    black 18px,
    black calc(100% - 18px),
    transparent 100%
  );
}

/* Önceden eklediğimiz overlay varsa kapat */
#cats::before{
  content: none !important;
  display: none !important;
}
/* İlk kategori solda kırpılmasın */
#cats .catGrid{
  /* başlangıçta net boşluk */
  padding-left: 22px !important;
  padding-right: 22px !important;

  /* iOS scroll snap / scrollIntoView etkileri için */
  scroll-padding-left: 22px;
  scroll-padding-right: 22px;
}

/* Eğer mask/fade kullanıyorsak, kesmeyi önlemek için yumuşat */
#cats{
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
/* Sticky kategori altındaki çift çizgiyi kaldır */
#cats{
  border-bottom: none !important;
  box-shadow: none !important;
}
/* Header arka planı: siteyle aynı, panel görünmesin */
.header{ backdrop-filter:none !important; }
.headerInner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Dil seçici UI’dan gizli kalsın (DOM’da var) */
#lang{ display: none !important; }

/* Controls boşluk */
.controls{ gap: 10px !important; }
/* Light modda kategori yazıları beyaz */
:root[data-theme="light"] .catName{
  color: #ffffff !important;
}
/* === FIX: bazı telefonlarda arkada kırmızı görünmesini engelle === */
html, body{
  background: var(--bg) !important;
}
html{ background-color: var(--bg) !important; }
body{
  background-color: var(--bg) !important;
  min-height: 100vh;
  min-height: 100dvh;
}