:root { --radius:18px; --shadow:0 10px 25px rgba(0,0,0,.12); --bg:#fafafa; --text:#0f172a; --muted:#64748b; --primary:#111827; }
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text)}

/* Header */
.header{position:sticky; top:0; z-index:200; backdrop-filter:blur(8px); background: rgba(255,255,255,.9); border-bottom:1px solid rgba(0,0,0,.06)}
.container{max-width:1200px; margin:0 auto; padding:12px 16px}
.brand-line{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:42px; height:42px; border-radius:10px; object-fit:cover; border:1px solid #e5e7eb; background:#fff}
.firm{display:flex; line-height:1.1; flex-direction:column}
.firm .name{font-weight:900; font-size:18px; display:flex; align-items:center; gap:6px}
.firm .table{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px}
.actions{display:flex; align-items:center; gap:8px}
.icon-btn{display:inline-flex; align-items:center; gap:6px; border:1px solid #e5e7eb; background:#fff; padding:8px 12px; border-radius:12px; cursor:pointer}

/* Search */
.searchbar{display:flex; align-items:center; gap:8px; margin:8px 0 10px 0}
.searchbar input{flex:1; padding:12px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; outline:none}
.search-spinner{display:none; font-size:12px; color:var(--muted)}
.search-clear{border:none; background:#ef4444; color:#fff; padding:10px 12px; border-radius:12px; font-weight:700; cursor:pointer}

/* Chips (instagram-like) */
.chips-wrap{position:sticky; top:74px; z-index:190; background:transparent}
.filter-rail{display:flex; overflow:auto; gap:8px; padding:6px 2px 8px 2px; scrollbar-width:thin}
.chip{display:inline-flex; align-items:center; gap:8px; border:1px solid #e5e7eb; background:#fff; padding:8px 12px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:all .2s ease; box-shadow:0 4px 12px rgba(0,0,0,.06)}
.chip.active{background:#111827; color:#fff; border-color:#111827}
.chip i{opacity:.9}

/* Active group banner */
.active-group-banner{ max-width:1200px; margin:4px auto 0; padding:6px 12px; color:#111827; background:#e5e7eb; border-radius:999px; font-size:12px; display:none; align-items:center; gap:8px }
.active-group-banner i{ color:#111827 }

/* Landing group tiles */
.group-tiles{display:grid; grid-template-columns: repeat(12, 1fr); gap:12px}
.group-tile{grid-column: span 4; position:relative; border-radius:18px; overflow:hidden; cursor:pointer; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease}
@media (max-width: 640px){ .group-tile{grid-column: span 6} }
.group-tile:hover{transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 30px rgba(0,0,0,.18)}
.group-tile img{width:100%; height:180px; object-fit:cover}
.group-tile .overlay{position:absolute; inset:0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.6))}
.group-tile .label{position:absolute; left:12px; bottom:12px; color:#fff; font-weight:800; display:flex; align-items:center; gap:8px; text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* Product Grid & Cards */
.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:12px}
@media (max-width:640px){ .grid{grid-template-columns: repeat(6,1fr)} }
.card{grid-column: span 3; background:#fff; border-radius:18px; box-shadow: var(--shadow); overflow:hidden; display:flex; flex-direction:column; transition: transform .15s ease, box-shadow .2s ease}
@media (max-width:640px){ .card{grid-column: span 6} }
.card:hover{transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.16)}
.card .thumb{aspect-ratio:4/3; width:100%; object-fit:cover; background:#f1f5f9; cursor: zoom-in}
.card .content{padding:12px; display:flex; flex-direction:column; gap:8px}
.card .title{font-weight:800; font-size:14px; line-height:1.2}
.card .desc{font-size:12px; color:var(--muted); height:30px; overflow:hidden}
.card .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.card .price{font-weight:900; font-size:16px}
.card .btn-add{width:100%; border:none; padding:10px 12px; border-radius:12px; cursor:pointer; background:var(--primary); color:#fff; font-weight:800}

/* Cart FAB + Drawer */
.fab-cart{position: fixed; right:16px; bottom:16px; z-index:220; background:#111827; color:#fff; border-radius:999px; display:flex; align-items:center; gap:10px; padding:12px 16px; box-shadow:0 10px 25px rgba(0,0,0,.25); cursor:pointer}
.fab-cart .badge{min-width:22px; height:22px; background:#ef4444; color:#fff; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800}
.fab-cart .sum{font-weight:900; font-size:14px}

/* Theme FAB */
.fab-theme{ position: fixed; right: 120px; bottom: 18px; z-index: 221; width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e7eb; box-shadow:0 10px 25px rgba(0,0,0,.18); cursor:pointer; }
.fab-theme i{ font-size:20px; color:#111827 }

/* Backdrop & Drawers */
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:299; opacity:0; pointer-events:none; transition:opacity .2s ease}
.backdrop.open{opacity:1; pointer-events:auto}
.drawer{position: fixed; left:0; right:0; bottom:-100%; z-index:300; background:#fff; border-top-left-radius:16px; border-top-right-radius:16px; box-shadow:0 -20px 40px rgba(0,0,0,.25); transform:translateY(100%); transition: transform .25s ease}
.drawer.open{bottom:0; transform:translateY(0)}
.drawer .handle{width:56px; height:5px; border-radius:999px; background:#e5e7eb; margin:10px auto}
.drawer .head{display:flex; align-items:center; justify-content:space-between; padding:0 16px 10px 16px; border-bottom:1px solid #f1f5f9}
.drawer .body{max-height:60vh; overflow:auto; padding:12px 16px}

/* Cart items */
.cart-items .row{display:grid; grid-template-columns:64px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #f3f4f6}
.cart-items img{width:64px; height:48px; object-fit:cover; border-radius:10px}
.qty{display:inline-flex; align-items:center; gap:6px; border:1px solid #e5e7eb; border-radius:10px; padding:4px 8px}
.qty button{border:none; background:#fff; cursor:pointer}

/* Theme options */
.theme-options{ display:grid; grid-template-columns: repeat(12,1fr); gap:10px }
.theme-pill{ grid-column: span 6; border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; background:#fff }
@media (max-width:640px){ .theme-pill{ grid-column: span 12 } }
.theme-pill .lbl{ font-weight:800 }
.theme-swatch{ width:46px; height:24px; border-radius:8px; background:linear-gradient(90deg,#111827,#6366f1) }

/* Group Filter Drawer */
.group-search{width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px}
.group-list{display:grid; grid-template-columns: repeat(12,1fr); gap:8px}
.group-item{grid-column: span 12; display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff}
.group-item img{width:52px; height:40px; object-fit:cover; border-radius:8px}

/* Lightbox */
.modal{position:fixed; inset:0; z-index:350; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; padding:16px}
.modal.open{display:flex}
.modal .box{background:#fff; border-radius:18px; max-width:min(1000px,95vw); width:100%; overflow:hidden; box-shadow: var(--shadow)}
.modal .box img{width:100%; max-height:70vh; object-fit:contain; background:#000}
.modal .box .info{padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.modal .box .title{font-weight:800}
.modal .close{border:none; background:#111827; color:#fff; border-radius:10px; padding:8px 12px}

/* Loader */
.loader{position:fixed; inset:0; z-index:240; display:none; align-items:center; justify-content:center; background:rgba(255,255,255,.6); backdrop-filter: blur(2px)}
.loader.show{display:flex}
.spinner{width:56px; height:56px; border-radius:999px; border:6px solid #e5e7eb; border-top-color:#111827; animation: spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.footer{ text-align:center; color:var(--muted); font-size:12px; padding:18px 0 22px }
.footer-space{ height:10vh }

/* Ensure landing tiles span full grid width */
.grid > .group-tiles, .grid .group-tiles { grid-column: 1 / -1; }

/* Instagram-like scroll behavior */
.filter-rail{ scroll-snap-type: x proximity; }
.chip{ scroll-snap-align: start; }

/* Header spacing refinements */
.brand{ gap:12px }
.firm .name{ font-size:19px }
.firm .table{ margin-top:2px }

/* Theme FAB position fix */
.fab-theme{ right: 96px; bottom: 18px; }
@media (max-width:560px){
  .fab-theme{ right: 90px; bottom: 70px; } /* small screens: a bit above cart */
}

/* Bigger +/- buttons in cart */
.qty button{ font-size:18px; padding:4px 8px }
.qty button i{ font-size:18px }

/* Loader caption */
.loader .caption{ margin-top:10px; font-weight:800; letter-spacing:.3px; color:#111827; }

/* View transition animations by theme */
body[data-theme="1"] .grid.anim{ animation: vfade .28s ease both }
body[data-theme="2"] .grid.anim{ animation: vslide .32s ease both }
body[data-theme="7"] .grid.anim{ transform-origin: 0 50%; animation: vflip .5s ease both }

@keyframes vfade { from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }
@keyframes vslide { from{opacity:0; transform: translateX(16px);} to{opacity:1; transform:none;} }
@keyframes vflip  { from{opacity:.2; transform: perspective(900px) rotateY(-8deg);} to{opacity:1; transform: none;} }

/* === v4.1.1c additions === */
.loader .caption{ margin-top:10px; font-weight:800; letter-spacing:.3px; color:#111827; }
/* === Hikaye barı – Instagram tarzı, isimler tam sığsın === */
/* === Hikaye barı – daha kompakt (küçük resim + küçük yazı) === */
.stories-rail{
  display:flex;
  gap:6px;                           /* çipler biraz daha yakın */
  overflow-x:auto;
  padding:2px 4px 6px 4px;           /* üst/alt boşluk minimum */
  scrollbar-width:thin;
}

.chip.story{
  width:52px;                        /* toplam genişlik küçüldü */
  padding:0;
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column;             /* üstte resim, altta yazı */
  align-items:center;
  justify-content:flex-start;
}

/* Yuvarlak resim – daha küçük */
.chip.story img{
  width:42px;
  height:42px;
  border-radius:999px;
  object-fit:cover;
  background:#fff;
  border:2px solid #e5e7eb;
}

/* Grup ismi – komple sığsın ama daha küçük font */
.chip.story .lbl{
  margin-top:2px;
  max-width:52px;
  font-size:8.5px;                   /* 🔹 yazı daha küçük */
  line-height:1.1;
  text-align:center;

  white-space:normal;
  word-break:break-word;
}
.chip.story.active img{
  border-color: var(--primary);
  box-shadow:0 0 0 2px rgba(0,0,0,.18);
  transform:scale(1.03);
}

.chip.story.active .lbl{
  font-weight:600;
  color:var(--primary);
}
/* İstersen ekstra kırmızı halka da kalsın, sorun değil */
.chip.story.active{
  outline:3px solid #ef4444;
  border-color:#ef4444;
}

/* --- STORIES İÇİN ACTIVE OVERRIDE (dondurma çubuğunu sil) --- */

/* Genel chip.active arka planını story'lere uygulama */
.chip.story{
  background: transparent !important;
  border: none !important;
  height: auto !important;        /* yükseklik sadece resim + yazı kadar olsun */
}

/* Story aktifken de gövde boyanmasın, sadece resim halkası kalsın */
.chip.story.active{
  background: transparent !important;
  border: none !important;
  outline: none !important;
}

/* Active efekti sadece resmin etrafında olsun */
.chip.story.active img{
  border-color: var(--primary) !important;
  box-shadow:0 0 0 2px rgba(0,0,0,.18);
  transform:scale(1.03);
}

.chip.story.active .lbl{
  font-weight:600;
  color:var(--primary);
}

.drawer-theme{ background:#ffffff !important; color:#111827 !important; }
.drawer-theme .head strong, .drawer-theme .body{ color:#111827 !important; }
.theme-pill{ background:#fff; border:1px solid #e5e7eb; }
.fab-theme{ right: 96px; bottom: 18px; z-index: 222; }
@media (max-width:560px){ .fab-theme{ right: 92px; bottom: 76px; } }
.grid > .group-tiles, .grid .group-tiles { grid-column: 1 / -1; }
.qty button{ font-size:18px; padding:4px 8px }
.qty button i{ font-size:18px }
body[data-theme="4"] .card{ grid-column: span 3; box-shadow:none; border:1px solid #e5e7eb; border-radius:14px }
@media (max-width:640px){ body[data-theme="4"] .card{ grid-column: span 6 } }
body[data-theme="4"] .card .thumb{ aspect-ratio: 1 / 1 }

/* === v4.1.1d additions === */
/* Accent color overridable via --primary */
.card .btn-add{ background: var(--primary) !important; }
.fab-cart{ background: var(--primary) !important; }
.chip.active{ background: var(--primary) !important; border-color: var(--primary) !important; color:#fff !important; }
.spinner{ border-top-color: var(--primary) !important; }
.active-group-banner i{ color: var(--primary) !important; }
.theme-swatch{ background: linear-gradient(90deg, var(--primary), #6366f1) } /* just cosmetic */

/* Stories chips active ring uses --primary */
.chip.story.active{ outline:3px solid var(--primary) !important; border-color: var(--primary) !important; }

/* Theme drawer section labels */
.theme-section-title{ font-weight:800; margin:8px 0 6px 0 }
.theme-swatches{ display:flex; flex-wrap:wrap; gap:8px }
.swatch{ width:28px; height:28px; border-radius:50%; border:2px solid #e5e7eb; cursor:pointer }
.swatch.active{ outline:3px solid #111827 }

/* === v4.1.1e additions === */
/* Home FAB (left of Cart) */
.fab-home{
  position: fixed;
  right: 84px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  z-index: 224;
  border: none;
}
.fab-home i{ font-size: 22px; line-height: 1; }

/* Move Theme a bit further left to avoid overlap */
.fab-theme{ right: 152px; bottom: 18px; z-index: 222; }

@media (max-width:560px){
  .fab-home{ right: 138px; bottom: 76px; }
  .fab-theme{ right: 198px; bottom: 76px; }
}

/* === v4.1.1f additions === */
/* Reposition FABs: Cart (baseline), Theme above Cart, Home above Theme */
.fab-cart{ right: 18px; bottom: 18px; }
.fab-theme{ right: 18px; bottom: 84px; z-index: 222; }
.fab-home{ right: 18px; bottom: 150px; z-index: 224; }

@media (max-width:560px){
  .fab-cart{ right: 18px; bottom: 18px; }
  .fab-theme{ right: 18px; bottom: 84px; }
  /* Home to left block on mobile */
  .fab-home{ left: 18px; right: auto; bottom: 18px; }
}

/* Sticky search inside category drawer + keyboard safe area */
:root{ --kb: 0px; }
#group-search{ position: sticky; top: 0; z-index: 6; background: var(--bg); padding-top: 6px; }
.drawer-groups.kb{ padding-bottom: var(--kb); }

/* Chip Style toggle visual active state */
.icon-btn.active{ background: var(--primary); color:#fff; }


/* === v4.1.1h2 additions === */
/* Home drawer inherits .drawer styles; ensure z-index above */
.drawer-home{ z-index: 230; }
.drawer-home .head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #e5e7eb; }
.drawer-home .body{ padding:12px; }
.drawer-home .btn-close{ border:none; background:transparent; font-size:16px; }
.btn-primary{ background: var(--primary); color:#fff; border:none; }


/* === v4.1.1h3 additions === */
/* Place Home above Theme above Cart; make it very visible */
.fab-cart{ right: 18px; bottom: 18px; }
.fab-theme{ right: 18px; bottom: 84px; z-index: 997; }
.fab-home{ position: fixed; right: 18px; bottom: 150px; width: 52px; height: 52px; border-radius: 999px; background: var(--primary); color:#fff; display:grid; place-items:center; box-shadow:0 12px 28px rgba(0,0,0,.2); z-index: 9999; border:none; }
.fab-home i{ font-size:22px; }

@media (max-width:560px){
  .fab-home{ left: 18px; right: auto; bottom: 18px; }
}


/* === v4.1.1h4 additions === */
.fab-home{
  position: fixed !important;
  right: 18px !important;
  bottom: 150px !important;
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  z-index: 10050; /* above drawers/backdrop */
  border: none;
}
.fab-home svg{ pointer-events:none; display:block; }
@media (max-width:560px){
  .fab-home{ left: 18px !important; right: auto !important; bottom: 18px !important; }
}


/* h4_iconclean: hide any possible home bars/sheets */
.drawer-home, .home-bar, .home-banner, [data-homebar] { display:none !important; visibility:hidden !important; }


/* h4_fabhide: hide Home & Theme FABs when any drawer is open */
.hide-fabs .fab-home,
.hide-fabs .fab-theme { display: none !important; }

.drawer.drawer-groups .body{
  max-height:none;
  padding:0;
  overflow:visible;
}

.group-filter{
  max-height:60vh;
  padding:8px 12px 10px;
  display:flex;
  flex-direction:column;
}

/* Üst: sabit arama barı */
.group-filter-top{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--bg);
  padding-bottom:8px;
}

.group-search-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}

.group-search-wrap i{
  font-size:15px;
  color:#9ca3af;
}

.group-search{
  flex:1;
  border:none;
  background:transparent;
  padding:6px 0;
  outline:none;
  font-size:14px;
}

.group-search-clear{
  border:none;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:16px;
  cursor:pointer;
  color:#9ca3af;
}

/* Orta: kaydırılabilir liste */
.group-filter-list{
  flex:1 1 auto;
  overflow-y:auto;
  padding:6px 0 8px;
	padding-top:4px; 
}

.group-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.group-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
}

.group-item img{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  background:#f3f4f6;
}

.group-item input[type="checkbox"]{
  width:18px;
  height:18px;
}

.group-name{
  font-size:13px;
  font-weight:500;
}

/* Alt: sabit buton barı */
.group-filter-bottom{
  position:sticky;
  bottom:0;
  z-index:5;
  padding-top:8px;
  padding-bottom:4px;
  background:linear-gradient(to top,#ffffff,rgba(255,255,255,0.96));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.group-filter-actions-left,
.group-filter-actions-right{
  display:flex;
  gap:6px;
}

.group-filter-bottom .icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}

.group-filter-bottom .icon-btn i{
  font-size:14px;
}

/* Sağdaki son buton: Uygula (primary) */
.group-filter-actions-right .icon-btn:last-child{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* Klavye açıldığında biraz daha esnek olsun */
.drawer-groups.search-focus .group-filter{
  max-height:calc(100vh - 40px);
}

/* Küçük ekranlarda taşma olmasın, butonlar eşit paylaşılsın */
@media (max-width: 480px){
  .group-filter-bottom{
    display:flex;
    flex-wrap:wrap;
    row-gap:6px;
  }

  .group-filter-actions-left,
  .group-filter-actions-right{
    width:100%;
    display:flex;
    gap:4px;
  }

  .group-filter-bottom .icon-btn{
    flex:1 1 0;
    padding:6px 4px;
    font-size:11px;
  }
}

/* === Kategori filtresi arama alanı – drawer içinde sabit kalsın === */
.drawer.drawer-groups .group-search{
  position:static;
  background:transparent;
  margin-bottom:0;
}