:root {
  --bg: #000000;
  --surface-soft: #f3f1ec;
  --surface: #ffffff;
  --ink: #201c19;
  --ink-soft: #6b6259;
  --accent: #a9834f;
  --accent-dark: #7c5f37;
  --sale: #e11c1c;
  --brand-red: #e11c1c;
  --border: #e7e1d8;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body {
  max-width: 100%; overflow-x: hidden;
  overscroll-behavior-x: none; touch-action: pan-y;
}

/* Welcome gate */
.welcome-gate {
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.7)), url('../img/footer-logo.jpg') center center / cover no-repeat;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.welcome-gate.hidden { display: none; }
.welcome-box {
  background: rgba(255,255,255,.97); border-radius: 16px; padding: 40px 34px; max-width: 380px; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.welcome-box h1 { font-size: 30px; margin-bottom: 22px; color: var(--ink); }
.welcome-box form { display: flex; flex-direction: column; gap: 12px; }
.welcome-box input {
  padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); font-family: inherit; font-size: 15px;
}
.welcome-box .btn { border: none; cursor: pointer; margin-top: 6px; font-size: 15px; padding: 13px; }
.welcome-error { color: var(--brand-red); font-size: 13px; margin: -4px 0 0; min-height: 16px; }
.welcome-name-row { position: relative; display: flex; align-items: center; }
.welcome-name-row input { flex: 1; }
#welcome-fullname[readonly] { background: var(--surface-soft); color: var(--ink-soft); }
.welcome-name-change {
  position: absolute; right: 10px; background: none; border: none; color: var(--accent-dark);
  font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px; font-family: inherit;
}
.welcome-note { color: var(--ink-soft); font-size: 12px; text-align: left; margin: -4px 0 0; line-height: 1.4; }
.welcome-note strong { color: var(--ink); }
body {
  margin: 0;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg) url('../img/footer-logo.jpg') center center / cover no-repeat;
  opacity: .13;
}
h1, h2, h3 { font-family: inherit; font-weight: 700; margin: 0; }
a { color: inherit; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.muted { color: var(--ink-soft); font-size: 13px; }

/* Brand banner */
.brand-banner {
  --bb-pad-x: 20px; --bb-pad-y: 34px;
  background: #fff; border-bottom: 1px solid var(--border); padding: var(--bb-pad-y) var(--bb-pad-x);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  column-gap: 20px; row-gap: 4px;
}
.bb-logo { display: block; }
.bb-logo-oxpower { height: 48px; width: auto; }
.bb-logo-auris { height: 54px; width: auto; }
.bb-logo-ttec { height: 50px; width: auto; }
.bb-sep { color: #000; font-size: 30px; font-weight: 700; }
.brand-slogan {
  flex-basis: 100%; text-align: center; margin: 0;
  font-family: 'Dancing Script', cursive; font-weight: 700;
  font-size: 28px; letter-spacing: .01em; color: #000;
}
.slogan-char {
  display: inline-block;
  animation: slogan-letter-pop 3.6s ease-in-out infinite;
}
@keyframes slogan-letter-pop {
  0%, 4%, 100% { transform: scale(1); color: #000; }
  2% { transform: scale(1.5); color: #000; }
}
@keyframes slogan-letter-pop-white {
  0%, 4%, 100% { transform: scale(1); color: #fff; }
  2% { transform: scale(1.5); color: var(--accent); }
}
.brand-slogan-mobile { display: none; }

/* Desktop slogan: a black band across the whole banner width with neon lights sweeping back and forth
   over it — one bar along the top edge and one along the bottom edge, running in opposite directions like
   the mobile neon. The letters light up (white -> neon cyan) where the top bar passes: .slogan-glow::before is
   a cyan copy of the text revealed through a moving mask with the same size/timing as the bar. */
.brand-banner .brand-slogan {
  position: relative; background: #000; color: #fff;
  flex: 0 0 calc(100% + 2 * var(--bb-pad-x));
  margin: 14px calc(-1 * var(--bb-pad-x)) calc(-1 * var(--bb-pad-y));
  padding: 12px 0;
}
.brand-slogan .slogan-char { animation-name: slogan-letter-pop-white; }
.brand-slogan::before,
.brand-slogan::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 5px; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,255,240,.2) 12%, #4dfff2 45%, #00fff2 50%, #baFFF6 52%, #00fff2 55%, #4dfff2 88%, transparent 100%);
  background-size: 45% 100%; background-repeat: no-repeat; background-position: -45% 0;
  filter: drop-shadow(0 0 8px rgba(0,255,240,.85));
  animation: neon-bar-slide 3s ease-in-out infinite alternate;
}
.brand-slogan::before { top: 0; }
.brand-slogan::after { bottom: 0; animation-direction: alternate-reverse; }
.brand-slogan .slogan-glow { position: relative; display: block; white-space: nowrap; }
.brand-slogan .slogan-glow::before {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; right: 0; pointer-events: none;
  color: #baFFF6;
  text-shadow: 0 0 6px rgba(0,255,240,.95), 0 0 16px rgba(0,255,240,.7);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 15%, #000 42%, #000 58%, rgba(0,0,0,.4) 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 15%, #000 42%, #000 58%, rgba(0,0,0,.4) 85%, transparent 100%);
  -webkit-mask-size: 45% 100%; mask-size: 45% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: -45% 0; mask-position: -45% 0;
  animation: neon-mark-slide 3s ease-in-out infinite alternate;
}

/* Hidden signatures at both ends of the slogan band (right: BURAK KESKİN, left: EDM AKSESUAR): only readable
   while the neon passes over them. Same mask size/timing as the top bar and the letter glow, so they light up in step with the beam. */
.brand-slogan .slogan-glow::after,
.brand-slogan .slogan-mark-left {
  content: 'BURAK KESKİN';
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: flex-end;
  /* same look as the mobile neon signature: spaced-out bold capitals, pale cyan with a glow */
  padding-right: calc(28px - .9em);
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .9em;
  color: #c9fff9;
  text-shadow: 0 0 5px rgba(0,255,240,.95), 0 0 14px rgba(0,255,240,.65);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 15%, #000 42%, #000 58%, rgba(0,0,0,.4) 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 15%, #000 42%, #000 58%, rgba(0,0,0,.4) 85%, transparent 100%);
  -webkit-mask-size: 45% 100%; mask-size: 45% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: -45% 0; mask-position: -45% 0;
  animation: neon-mark-slide 3s ease-in-out infinite alternate;
}
/* Left signature (EDM AKSESUAR): lit by BOTH neon bars. It has two mask windows (a union): one follows the top bar,
   the other the bottom bar, which runs the opposite way (its position is the mirror image: -45%..145% <-> 145%..-45%).
   On wide screens it is bigger and sits further in from the edge. */
.brand-slogan .slogan-mark-left {
  justify-content: flex-start; padding-left: 28px; padding-right: 0;
  font-size: 14px; letter-spacing: .45em; /* tighter spacing than the right signature */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 15%, #000 42%, #000 58%, rgba(0,0,0,.4) 85%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 15%, #000 42%, #000 58%, rgba(0,0,0,.4) 85%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 15%, #000 42%, #000 58%, rgba(0,0,0,.4) 85%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 15%, #000 42%, #000 58%, rgba(0,0,0,.4) 85%, transparent 100%);
  -webkit-mask-size: 45% 100%, 45% 100%; mask-size: 45% 100%, 45% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: -45% 0, 145% 0; mask-position: -45% 0, 145% 0;
  animation-name: neon-mark-slide-both;
}
@keyframes neon-mark-slide-both {
  from { -webkit-mask-position: -45% 0, 145% 0; mask-position: -45% 0, 145% 0; }
  to { -webkit-mask-position: 145% 0, -45% 0; mask-position: 145% 0, -45% 0; }
}
@media (min-width: 1100px) {
  /* grows with the screen (about 24px at 1280px wide, 28px max) — the room left of the slogan grows even faster */
  .brand-slogan .slogan-mark-left { font-size: clamp(17px, 1.9vw, 28px); padding-left: clamp(80px, 10vw, 200px); }
}

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.logo { text-decoration: none; color: var(--ink); }
.brand-row { display: flex; align-items: center; gap: 8px; }
.ig-badge-inline { display: none; }
.brand-logo { position: relative; display: flex; flex-direction: column; line-height: 1.1; font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin-left: 24px; }
#brand-logo-text[hidden] { display: none; }
.brand-logo-text { position: relative; z-index: 1; white-space: nowrap; }
.brand-logo-particles { position: absolute; inset: -14px -20px; z-index: 0; pointer-events: none; display: none; }
.particle {
  position: absolute; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor;
}
/* The particles are scattered over the whole header row (left = % of the row width). */
.particle-1 { top: 10px; left: 1.5%; color: #1a3b6d; transform: rotate(-20deg) scale(1.1); }
.particle-2 { bottom: 9px; left: 9%; color: #f4c430; transform: rotate(15deg) scale(.8); }
.particle-3 { top: 6px; left: 17%; color: #e11c1c; transform: rotate(160deg) scale(1); }
.particle-4 { bottom: 6px; left: 27%; color: #7ec8e3; transform: rotate(200deg) scale(.7); }
.particle-5 { top: 12px; left: 35%; color: #1a9e6b; transform: rotate(-40deg) scale(.9); }
.particle-6 { bottom: 8px; left: 46%; color: #f4c430; transform: rotate(80deg) scale(.65); }
.particle-7 { top: 5px; left: 55%; color: #1a3b6d; transform: rotate(-70deg) scale(.6); }
.particle-8 { bottom: 10px; left: 64%; color: #7ec8e3; transform: rotate(120deg) scale(1); }
.particle-9 { top: 9px; left: 73%; color: #f4c430; transform: rotate(40deg) scale(.8); }
.particle-10 { bottom: 6px; left: 82%; color: #e11c1c; transform: rotate(-120deg) scale(.7); }
.particle-11 { top: 12px; left: 91%; color: #1a9e6b; transform: rotate(100deg) scale(.9); }
.particle-12 { bottom: 12px; left: 97%; color: #1a3b6d; transform: rotate(30deg) scale(.75); }
@media (min-width: 641px) {
  /* Desktop header: no brand text — the particles that surrounded it now cover the whole row.
     Row order: category filter (left), search bar (middle), buttons (right). */
  .header-inner { padding-left: 20px; padding-right: 20px; } /* the logo used to provide this side margin */
  .brand-logo-particles { display: block; inset: 0; }
  .brand-row, .brand-logo { position: static; width: 0; margin: 0; overflow: visible; }
  .brand-logo-text { display: none; }
  .header-inner .search-group { display: contents; } /* (higher specificity: the base .search-group rule comes later in the file) */
  .category-filter { order: 1; margin-right: 12px; }
  .search-box { order: 2; }
  .header-actions { order: 3; margin-left: 12px; }
  .search-box, .category-filter, .header-actions { position: relative; z-index: 1; }
  /* category filter: a small grid icon on the left next to the chevron on the right
     (.header-inner prefix: the base .category-filter rule comes later in the file) */
  .header-inner .category-filter {
    flex-basis: 230px; padding-left: 42px;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6259' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9834f' stroke-width='1.6'%3E%3Crect x='1.5' y='1.5' width='5' height='5' rx='1.3'/%3E%3Crect x='9.5' y='1.5' width='5' height='5' rx='1.3'/%3E%3Crect x='1.5' y='9.5' width='5' height='5' rx='1.3'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: right 16px center, left 17px center;
    background-size: 11px 7px, 16px 16px;
  }
}
/* Narrower desktop/tablet widths: the buttons drop to a second row so the search bar keeps a usable width. */
@media (min-width: 641px) and (max-width: 1000px) {
  .header-inner { flex-wrap: wrap; row-gap: 10px; }
  .search-box { flex: 1 1 260px; }
  .header-actions { flex: 1 1 100%; justify-content: center; margin-left: 0; }
}
.brand-sub { font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); }
.search-group { flex: 1; max-width: 640px; margin: 0 20px; display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Search bar + category filter: soft white pills with a gentle shadow, a red focus ring and smooth transitions. */
.search-box {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid #e6e0d6; border-radius: 999px; padding: 10px 18px;
  box-shadow: 0 1px 2px rgba(32,28,25,.05), 0 8px 18px -10px rgba(32,28,25,.18);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-box:hover { border-color: #d4cabb; }
.search-box:focus-within {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 4px rgba(225,28,28,.12), 0 8px 18px -10px rgba(32,28,25,.18);
}
.category-filter {
  flex: 0 1 200px; min-width: 0; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
  background-color: #fff; border: 1.5px solid #e6e0d6; border-radius: 999px; padding: 10px 36px 10px 18px;
  box-shadow: 0 1px 2px rgba(32,28,25,.05), 0 8px 18px -10px rgba(32,28,25,.18);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6259' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 11px 7px;
}
.category-filter:hover { border-color: #d4cabb; }
.category-filter:focus { outline: none; border-color: var(--brand-red); box-shadow: 0 0 0 4px rgba(225,28,28,.12); }
.category-filter.active { border-color: var(--brand-red); background-color: #fff6f6; font-weight: 700; }
.search-box svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; flex-shrink: 0; transition: stroke .2s ease; }
.search-box:focus-within svg { stroke: var(--brand-red); }
.search-box input::placeholder { color: #9a9187; }
.search-box input {
  border: none; background: none; outline: none; font-family: inherit; font-size: 15px; width: 100%; color: var(--ink);
  -webkit-appearance: none; appearance: none; -webkit-text-fill-color: var(--ink); opacity: 1;
}
.search-box input::-webkit-search-decoration,
.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-results-button,
.search-box input::-webkit-search-results-decoration { -webkit-appearance: none; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; background: none; border: none; padding: 8px; border-radius: 50%; }
.icon-btn:hover { background: var(--surface-soft); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.voucher-btn {
  display: flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 16px 8px 12px;
  border: 1px solid var(--brand-red); background: #fff0f0;
}
.voucher-icon { font-size: 16px; line-height: 1; }
.voucher-btn span#voucher-balance-label { font-size: 13px; font-weight: 800; color: var(--brand-red); white-space: nowrap; }
.orders-btn {
  display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 16px 8px 12px;
  border: 1px solid var(--border);
}
.orders-btn svg { width: 18px; height: 18px; }
.orders-btn span { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.logout-btn {
  display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 16px 8px 12px;
  border: 1px solid var(--border);
}
.logout-btn svg { width: 18px; height: 18px; stroke: var(--brand-red); }
.logout-btn span { font-size: 13px; font-weight: 700; color: var(--brand-red); white-space: nowrap; }
.notify-btn { border: 1px solid var(--border); }
.notify-icon { font-size: 17px; line-height: 1; }
.cart-count {
  position: absolute; top: 2px; right: 2px; background: var(--accent); color: #fff;
  font-size: 10px; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Fly-to-cart animation */
.fly-to-cart-clone {
  position: fixed; z-index: 300; border-radius: 8px; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .6s cubic-bezier(.55,0,1,.45), opacity .6s ease;
  will-change: transform, opacity;
}
@keyframes cart-bump-anim {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.cart-bump { animation: cart-bump-anim .26s ease; }

/* Promo strip */
.promo-strip { background: linear-gradient(90deg, var(--brand-red), #b91515); }
.promo-strip-inner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 20px; text-align: center; flex-wrap: wrap;
}
.promo-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.promo-text { color: #fff; font-size: 12.5px; line-height: 1.3; }
.promo-text strong { display: inline-block; margin-right: 6px; font-size: 13.5px; }
.promo-text-mobile { display: none; }

/* Layout: products left, categories right */
.layout { display: flex; gap: 30px; align-items: flex-start; padding: 30px 20px 60px; }
.main-col { flex: 1; min-width: 0; }
.page-title { font-size: 24px; margin-bottom: 20px; color: #fff; }
#product-grid > .muted { color: #cfc7ba; }

.sidebar {
  width: 220px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; position: sticky; top: 90px; order: -1;
}
.sidebar h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.category-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.category-list button {
  width: 100%; text-align: left; background: none; border: none; padding: 8px 10px;
  border-radius: 6px; font-size: 13px; color: var(--ink-soft);
}
.category-list button:hover { background: var(--bg); }
.category-list button.active { background: var(--ink); color: #fff; }

.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; text-decoration: none; font-size: 14px; border: 1px solid transparent; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px; }
.product-card {
  background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s;
  box-shadow: 0 1px 4px rgba(32,28,25,.06);
}
.product-card:hover { box-shadow: 0 8px 20px rgba(32,28,25,.14); transform: translateY(-3px); border-color: var(--brand-red); }
.product-thumb { position: relative; aspect-ratio: 1 / 1; background: #f2efe9; display: flex; align-items: center; justify-content: center; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder { font-size: 34px; font-weight: 700; color: var(--accent); }
.badge {
  position: absolute; top: 10px; left: 10px; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.badge-sale { background: var(--brand-red); }
.badge-out { background: #8a8178; }
.badge-stack { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.badge-stack .badge { position: static; font-size: 10px; padding: 3.5px 9px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.badge-lbl-en_cok_satan { background: linear-gradient(135deg, #f2c94c, #c9880a); color: #201c19; }
.badge-lbl-yeni { background: var(--ink); color: #fff; }
.badge-lbl-en_iyi_fiyat { background: #2f7d4f; color: #fff; }
.badge-lbl-en_dusuk_fiyat { background: #2563b8; color: #fff; }
.badge-lbl-indirim { background: var(--brand-red); color: #fff; }
.badge-lbl-son_adetler { background: #e07a00; color: #fff; }
.quickview-btn {
  position: absolute; bottom: 10px; right: 10px; background: rgba(255,255,255,.92); border: none; border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.product-info { padding: 10px 10px 6px; }
.product-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-dark); }
.product-info h3 {
  font-size: 13px; font-weight: 400; color: var(--ink); margin: 3px 0 6px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
.price-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.price { font-weight: 800; font-size: 16px; color: var(--brand-red); }
.page-title { font-weight: 700; }
.price-old { color: var(--ink-soft); text-decoration: line-through; font-size: 11px; }
.add-row { display: flex; gap: 6px; }
.qty-input-inline {
  width: 46px; flex-shrink: 0; padding: 0 4px; border-radius: 8px; border: 1px solid var(--border);
  font-family: inherit; font-size: 12px; text-align: center; background: #fff; color: var(--ink);
}
.add-cart-btn {
  flex: 1; width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--brand-red); background: var(--brand-red); color: #fff; font-size: 10px; font-weight: 700;
}
.add-cart-btn:hover { background: #b91515; border-color: #b91515; }
.qv-qty-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qv-qty-btn {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; border: none;
  background: var(--ink); color: #fff; font-size: 19px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.qv-qty-btn:hover { background: var(--accent-dark); }
.qv-qty-row .qty-input-inline { width: 52px; height: 38px; font-size: 16px; }
.add-cart-btn:disabled { background: #ddd7cc; border-color: #ddd7cc; color: #8a8178; cursor: not-allowed; }

/* Simple footer */
.site-footer-simple { margin-top: 30px; background: var(--ink); }
.footer-simple-inner {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 18px 20px; font-size: 13px; color: #fff;
}
.footer-contact-col { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-phone-link { color: #fff; text-decoration: none; }
.footer-phone-link:hover { text-decoration: underline; }
.footer-whatsapp {
  display: inline-flex; align-items: center; gap: 6px; background: #25d366; color: #fff;
  padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 13px;
}
.footer-whatsapp svg { width: 16px; height: 16px; }

.footer-instagram { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.ig-qr { width: 64px; height: 64px; border-radius: 8px; background: #fff; padding: 4px; }
.footer-instagram span { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.footer-instagram svg { width: 20px; height: 20px; }

/* Floating WhatsApp button */
.whatsapp-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.whatsapp-fab svg { width: 30px; height: 30px; }
.whatsapp-fab:hover { background: #1ebe57; }
/* Speech bubble above the button: shown for a few seconds shortly after the visitor enters the site (see initWhatsappTip). */
.whatsapp-tip {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: max-content; max-width: min(250px, calc(100vw - 40px));
  background: #25d366; color: #064c43; /* WhatsApp's dark green: ~5:1 contrast on the bright green */
  font-size: 13px; font-weight: 700; line-height: 1.35; text-align: left;
  padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right;
  pointer-events: none; transition: opacity .35s ease, transform .35s ease;
}
.whatsapp-tip::after {
  content: ''; position: absolute; right: 21px; bottom: -6px; width: 12px; height: 12px;
  background: #25d366; transform: rotate(45deg); border-radius: 2px;
}
.whatsapp-fab.tip-open .whatsapp-tip { opacity: 1; transform: none; }

/* A little star panda pops up from behind the bubble (its left hand resting on the bubble's edge like it is holding the sign),
   waves with the other hand, then points down at the text. One 5s timeline, in step with the bubble (see initWhatsappTip). */
/* (.whatsapp-fab prefix: .whatsapp-fab svg { width: 30px } for the button icon would otherwise win) */
.whatsapp-fab .wa-panda {
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.35)); /* white rim: the black paws stay visible on dark backgrounds */
  position: absolute; left: 12px; bottom: calc(100% - 6px); width: 120px; height: 90px;
  overflow: visible; pointer-events: none;
}
.wa-panda .pd-body { transform: translateY(46px); }
.wa-panda .pd-arm { opacity: 0; transform-origin: 86px 74px; transform-box: view-box; }
.wa-panda .pd-hand-point { opacity: 0; }
/* chewing: the bamboo stick pushes in and out of the mouth while the head nods, and little crumbs fly off */
.wa-panda .pd-crumb { opacity: 0; }
.whatsapp-fab.tip-open .wa-panda .pd-bamboo { animation: pd-bite .42s ease-in-out infinite alternate; }
.whatsapp-fab.tip-open .wa-panda .pd-head { animation: pd-nod .42s ease-in-out infinite alternate; }
.whatsapp-fab.tip-open .wa-panda .pd-crumb-1 { animation: pd-crumb .84s ease-out infinite; }
.whatsapp-fab.tip-open .wa-panda .pd-crumb-2 { animation: pd-crumb .84s ease-out .28s infinite; }
.whatsapp-fab.tip-open .wa-panda .pd-crumb-3 { animation: pd-crumb .84s ease-out .56s infinite; }
@keyframes pd-bite { from { transform: translate(0, 0); } to { transform: translate(2.4px, -1.8px); } }
@keyframes pd-nod { from { transform: translateY(0); } to { transform: translateY(1.6px); } }
@keyframes pd-crumb {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(4px, 12px); }
}
.whatsapp-fab.tip-open .wa-panda .pd-body { animation: pd-pop 5s ease-in-out forwards; }
.whatsapp-fab.tip-open .wa-panda .pd-arm { animation: pd-arm 5s ease-in-out forwards; }
.whatsapp-fab.tip-open .wa-panda .pd-hand-open { animation: pd-open 5s steps(1, end) forwards; }
.whatsapp-fab.tip-open .wa-panda .pd-hand-point { animation: pd-point 5s steps(1, end) forwards; }
@keyframes pd-pop {
  0% { transform: translateY(46px); }
  10% { transform: translateY(0); animation-timing-function: linear; }
  90% { transform: translateY(0); }
  100% { transform: translateY(46px); }
}
@keyframes pd-arm {
  0% { opacity: 0; transform: rotate(10deg); }
  8% { opacity: 0; transform: rotate(10deg); }
  10% { opacity: 1; transform: rotate(15deg); }
  16% { transform: rotate(45deg); }
  22% { transform: rotate(10deg); }
  28% { transform: rotate(45deg); }
  34% { transform: rotate(10deg); }
  40% { transform: rotate(45deg); }
  46% { transform: rotate(10deg); }
  52% { transform: rotate(30deg); }
  66% { transform: rotate(205deg); }
  72% { transform: rotate(198deg); }
  78% { transform: rotate(208deg); }
  84% { transform: rotate(198deg); }
  90% { opacity: 1; transform: rotate(205deg); }
  100% { opacity: 0; transform: rotate(205deg); }
}
@keyframes pd-open { 0% { opacity: 1; } 54% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pd-point { 0% { opacity: 0; } 54% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wa-panda { display: none; } }
.whatsapp-fab.tip-open { animation: wa-pulse 1.3s ease-out 3; }
@keyframes wa-pulse {
  0% { box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.55); }
  100% { box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 0 0 16px rgba(37,211,102,0); }
}

/* PWA "Ana Ekrana Ekle" install prompt banner */
.pwa-install-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 500;
  background: #111; color: #fff; border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  max-width: 460px; margin: 0 auto;
  animation: pwa-banner-rise .35s ease-out;
}
.pwa-install-banner[hidden] { display: none; }
.pwa-install-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.pwa-install-text { flex: 1 1 200px; font-size: 14px; line-height: 1.4; }
.pwa-install-actions { display: flex; gap: 8px; margin-left: auto; }
.pwa-install-yes {
  background: var(--brand-red); color: #fff; border: none; border-radius: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.pwa-install-no {
  background: transparent; color: #bbb; border: 1px solid #444; border-radius: 8px;
  padding: 9px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
}
@keyframes pwa-banner-rise {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Instagram QR badge (flows inline with brand logos, centered as one group) */
.ig-fab {
  flex-shrink: 0;
  width: 84px; background: #fff; border-radius: 12px; padding: 6px 6px 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.ig-fab img { width: 100%; height: 72px; object-fit: contain; }
.ig-fab-label { font-size: 9px; font-weight: 700; letter-spacing: .02em; color: var(--ink); text-align: center; white-space: nowrap; }

/* Cart drawer */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s; }
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 92vw; background: #fff;
  z-index: 91; transform: translateX(100%); transition: transform .25s; display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
/* The drawers start at the very top of the screen. On an iPhone home-screen app the status bar (time, battery) sits on top
   of the page and swallows taps there, so the header gets the safe-area inset as extra top padding — otherwise the ✕ is unreachable. */
.cart-drawer { padding-bottom: env(safe-area-inset-bottom, 0px); }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 18px; border-bottom: 1px solid var(--border);
}
/* ✕ with a comfortable 44px touch target (same visual size) */
.cart-drawer-head button {
  background: none; border: none; font-size: 20px; cursor: pointer;
  width: 44px; height: 44px; margin: -8px -10px -8px 0; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.voucher-progress {
  display: flex; flex-direction: column; gap: 6px; margin: 14px 20px 0; padding: 10px 12px;
  background: linear-gradient(135deg, #fff4d9, #ffe6b8); border: 1px solid #f0cf8a; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: #6b4b0a; line-height: 1.35;
}
.voucher-progress-row { display: flex; align-items: center; gap: 8px; }
.voucher-progress-row + .voucher-progress-row { padding-top: 6px; border-top: 1px dashed rgba(107,75,10,.3); }
.voucher-progress-icon { font-size: 18px; flex-shrink: 0; }
#voucher-progress-text { white-space: nowrap; }
.cart-items { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 20px; }
.cart-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cart-table th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); font-weight: 700; padding: 0 0 8px; border-bottom: 1px solid var(--border);
}
.cart-table th:nth-child(2) { text-align: center; width: 108px; }
.cart-table th:nth-child(3) { text-align: right; width: 64px; }
.cart-table th:nth-child(4) { width: 26px; }
.cart-item td { padding: 12px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ct-product { display: flex; gap: 10px; align-items: center; }
.ct-product img, .ct-product .cart-item-placeholder { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; background: #efeae0; flex-shrink: 0; }
.ct-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.ct-qty { text-align: center; }
.qty-row { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.qty-row button { border: 1px solid var(--border); background: #fff; width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; }
.qty-set-input {
  width: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 4px; text-align: center;
  font-family: inherit; font-size: 13px; background: #fff; color: var(--ink);
}
.ct-total { text-align: right; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ct-remove { text-align: right; }
.remove-item { background: none; border: none; color: var(--sale); font-size: 15px; line-height: 1; padding: 4px; }

.order-items-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.order-items-table td { padding: 5px 0; font-size: 12.5px; vertical-align: middle; }
.oi-product { display: flex; align-items: center; gap: 8px; }
.oi-product img, .oi-thumb-placeholder { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: #efeae0; flex-shrink: 0; }
.oi-name { line-height: 1.3; }
.oi-qty { text-align: center; color: var(--ink-soft); white-space: nowrap; width: 46px; }
.oi-total { text-align: right; font-weight: 700; white-space: nowrap; }

/* Siparişlerim */
.orders-summary { font-size: 13px; font-weight: 700; padding: 10px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.orders-balance {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
  background: #faf8f4; display: flex; flex-direction: column; gap: 6px;
}
.ob-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.ob-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.ob-row strong { font-size: 14px; }
.ob-paid { color: #2f7d4f; }
.ob-remaining { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 2px; font-size: 14px; font-weight: 700; }
.ob-remaining strong { font-size: 18px; }
.ob-debt strong { color: var(--brand-red); }
.ob-clear strong { color: #2f7d4f; }
.orders-history { margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; background: #faf8f4; }
.orders-history summary {
  list-style: none; cursor: pointer; padding: 13px 14px; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; gap: 8px; user-select: none;
}
.orders-history summary::-webkit-details-marker { display: none; }
.orders-history summary::after { content: '▸'; margin-left: auto; font-size: 13px; color: var(--ink-soft); transition: transform .15s; }
.orders-history[open] summary::after { transform: rotate(90deg); }
.orders-history[open] summary { border-bottom: 1px solid var(--border); }
.oh-count {
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.orders-history-body { padding: 12px; }
.orders-history-body .order-card { background: #fff; margin-bottom: 10px; }
.orders-history-body .order-card:last-child { margin-bottom: 0; }
.order-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.order-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.order-status { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #ddd7cc; color: var(--ink); }
.order-status-yeni { background: #fde3a7; color: #7a5a00; }
.order-status-onaylandi { background: #d3f0e0; color: #1c6b4a; }
.order-status-odeme_bekleniyor { background: #fbe0b5; color: #8a4b00; }
.order-status-hazirlaniyor { background: #cfe3fb; color: #1d4e89; }
.order-status-kargolandi { background: #dcd2f7; color: #4b2e9e; }
.order-status-tamamlandi { background: #c8ecd6; color: #226b3f; }
.order-status-iptal { background: #f5c6c6; color: #8a1f1f; }
.order-card-foot { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; }

.order-timeline-wrap { margin-bottom: 10px; }
.order-timeline-title { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.order-timeline { margin-top: 4px; }
.tl-track { display: flex; align-items: flex-start; overflow: hidden; padding: 6px 0 2px; width: 100%; }
.tl-step { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; }
.tl-dot {
  width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--surface-soft);
  border: 2px solid #d8d2c6; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.tl-step.active .tl-dot {
  background: var(--tl-color, var(--accent)); border-color: var(--tl-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-color, var(--accent)) 22%, transparent);
  transform: scale(1.05);
}
.tl-step.current .tl-dot { animation: tl-pulse 1.1s ease-in-out infinite; }
.tl-label { font-size: 8.5px; margin-top: 5px; text-align: center; color: var(--ink-soft); line-height: 1.2; word-break: break-word; padding: 0 1px; }
.tl-step.active .tl-label { color: var(--tl-color, var(--accent-dark)); font-weight: 800; }
.tl-line { flex: 0 1 16px; min-width: 4px; height: 3px; border-radius: 2px; background: var(--border); margin-top: 7px; transition: background .3s ease; }
.tl-line.active { background: var(--tl-color, var(--accent)); }
.tl-cancelled { font-size: 13px; color: var(--sale); font-weight: 600; margin: 8px 0; }
.tl-whatsapp {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 14px;
  background: #25d366; border: 1px solid #25d366; border-radius: 10px;
  color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; line-height: 1.3;
  box-shadow: 0 2px 6px rgba(37, 211, 102, .35);
  transition: background .2s ease, transform .2s ease;
}
.tl-whatsapp:hover { background: #1fb956; transform: translateY(-1px); }
.tl-whatsapp svg { width: 28px; height: 28px; flex-shrink: 0; color: #fff; }
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-color, var(--accent)) 25%, transparent), 0 0 0 0 color-mix(in srgb, var(--tl-color, var(--accent)) 50%, transparent); transform: scale(1.05); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-color, var(--accent)) 25%, transparent), 0 0 0 8px color-mix(in srgb, var(--tl-color, var(--accent)) 0%, transparent); transform: scale(1.18); }
}
.order-card-actions { display: flex; gap: 8px; }
.reorder-btn-inline { flex: 1; padding: 8px; font-size: 12px; border-radius: 8px; }
.order-pdf-inline {
  flex: 1; padding: 8px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-soft); color: var(--ink); cursor: pointer; font-family: inherit;
}
.order-pdf-inline:hover { background: #e9e4da; }
.cart-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
.cart-total-row { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 12px; }
.checkout-form { display: flex; flex-direction: column; gap: 10px; }
.checkout-form input, .checkout-form textarea, .checkout-form select {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); font-family: inherit; font-size: 13px; background: #fff;
}
.voucher-use-btn { padding: 11px 12px; border-radius: 8px; border: 1.5px dashed #1f9d5c; background: #f0faf4; color: #1f6b43; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.voucher-use-btn[hidden] { display: none; }
.voucher-use-btn.active { border-style: solid; background: #1f9d5c; color: #fff; }
.voucher-pay-note { margin: 0; padding: 9px 12px; border-radius: 8px; background: #eaf7ef; color: #1f6b43; font-size: 13px; line-height: 1.4; }
.voucher-pay-note[hidden] { display: none; }
.voucher-pay-note.voucher-pay-note-empty { background: #fdecec; color: #a33; }

.checkout-pending-notice {
  margin: 0; padding: 10px 12px; border-radius: 8px; background: #fff4d9; color: #7a5a00;
  font-size: 13px; line-height: 1.45; border: 1px solid #f0cf8a;
}
.checkout-pending-notice[hidden] { display: none; }
.checkout-pending-notice a { color: #7a5a00; font-weight: 700; text-decoration: underline; }
.checkout-form .btn-primary:disabled { background: #c7c0b4; color: #fff; cursor: not-allowed; }

.checkout-msg { font-size: 13px; margin-top: 8px; }
.checkout-msg.ok { color: #2f7d4f; }
.checkout-msg.error { color: var(--sale); }
.pdf-download-btn { margin-top: 10px; width: 100%; padding: 10px; font-size: 13px; }

/* Quick view modal */
.qv-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 95; display: none; align-items: center; justify-content: center; padding: 20px; }
.qv-overlay.open { display: flex; }
.qv-modal { background: #fff; border-radius: var(--radius); max-width: 640px; width: 100%; display: flex; overflow: hidden; max-height: 88vh; }
.qv-image { flex: 1; background: #efeae0; min-height: 220px; }
.qv-image img { width: 100%; height: 100%; object-fit: cover; }
.qv-body { flex: 1; padding: 24px; overflow-y: auto; position: relative; }
.qv-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: rgba(0,0,0,.75); color: #fff; border: none; border-radius: 50%;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.qv-close:hover { background: rgba(0,0,0,.9); }
.qv-body .product-cat { display: block; margin-bottom: 6px; }
.qv-body h3 { font-size: 20px; margin-bottom: 8px; }
.qv-desc { color: var(--ink-soft); font-size: 14px; margin-bottom: 16px; }

@media (max-width: 640px) {
  body { padding-top: 160px; }
  .qty-input-inline { font-size: 16px; }
  .promo-text-desktop { display: none; }
  .promo-text-mobile { display: block; }
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; width: 100%;
    transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden;
  }
  .header-inner { gap: 6px; padding: 10px 0 8px; flex-wrap: wrap; }
  .brand-row {
    order: 1; flex: 1 1 100%; justify-content: center; align-items: center;
    background: #000; margin: -10px 0 0; padding: 28px 10px 16px; gap: 8px; /* extra top room for the neon signature */
  }
  .cart-drawer { width: 300px; max-width: 82vw; }

  .ig-badge-inline { display: block; width: 30px; flex-shrink: 0; }
  .ig-badge-inline img { width: 100%; height: 25px; object-fit: contain; border-radius: 3px; }
  .brand-logo { margin-left: 0; font-size: 17px; color: #fff; flex-shrink: 0; }
  .brand-slogan-mobile:not([hidden]) {
    display: inline-block; font-family: 'Dancing Script', cursive; font-weight: 700;
    font-size: 20px; color: #fff; margin: 0;
  }
  .brand-slogan-mobile:not([hidden]) .slogan-char { animation-name: slogan-letter-pop-white; }
  .brand-sub { display: none; }
  .search-group { order: 3; flex: 1 1 100%; max-width: none; margin: 8px 12px 0; gap: 8px; }
  /* colourful particles scattered around the two rows under the black bar: the buttons row (Çıkış, Puan, ...) and the search row.
     Each strip sits inside its row, behind the row's content (z-index -1 stays above the header's white background). */
  .header-actions, .search-group { position: relative; }
  .row-particles { position: absolute; inset: -8px -12px; z-index: -1; pointer-events: none; }
  .search-box { padding: 8px 12px; flex: 1 1 52%; }
  .search-box input { font-size: 16px; }
  .category-filter { flex: 1 1 42%; font-size: 16px; padding: 9px 30px 9px 12px; background-position: right 11px center; }
  .welcome-box input { font-size: 16px; }
  .checkout-form input, .checkout-form textarea, .checkout-form select { font-size: 16px; }
  .header-actions { order: 2; flex: 1 1 100%; justify-content: space-evenly; margin: 8px 0 0; gap: 4px; }
  /* button order on phones: Çıkış, Puan (hediye çeki), Siparişlerim, bildirim zili, Sepet */
  .header-actions #visitor-logout-btn { order: 1; }
  .header-actions #voucher-open-btn { order: 2; }
  .header-actions #orders-open-btn { order: 3; }
  .header-actions #notify-enable-btn { order: 4; }
  .header-actions #cart-open-btn { order: 5; }
  .orders-btn span, .logout-btn span { display: inline; font-size: 11px; }
  .orders-btn, .logout-btn { padding: 6px 10px 6px 8px; gap: 4px; }
  .orders-btn svg, .logout-btn svg { width: 15px; height: 15px; }
  .voucher-btn { padding: 6px 9px 6px 7px; gap: 4px; }
  .voucher-icon { font-size: 13px; }
  .voucher-btn span#voucher-balance-label { font-size: 11px; }
  .notify-icon { font-size: 15px; }
  /* Buttons row: bold, filled, colourful buttons with a soft shadow so they stand out
     (Çıkış red, Puan gold, Siparişlerim dark, zil white with a gold ring, Sepet navy). */
  /* display: flex on the buttons below would override the [hidden] attribute (e.g. the bell for someone who already allowed notifications) */
  .header-actions [hidden] { display: none !important; }
  .header-actions .icon-btn { box-shadow: 0 2px 6px rgba(0,0,0,.22); transition: transform .12s ease; }
  .header-actions .icon-btn:active { transform: scale(.95); }
  .header-actions .logout-btn { background: linear-gradient(180deg, #f03a3a, #c81414); border: none; padding: 8px 10px 8px 9px; }
  .header-actions .logout-btn span { color: #fff; font-size: 11.5px; font-weight: 800; }
  .header-actions .logout-btn svg { stroke: #fff; width: 16px; height: 16px; }
  .header-actions .voucher-btn { background: linear-gradient(180deg, #ffd45c, #f2a900); border: none; padding: 8px 9px 8px 8px; }
  .header-actions .voucher-btn span#voucher-balance-label { color: #4a2c00; font-size: 11.5px; font-weight: 800; }
  .header-actions .voucher-icon { font-size: 15px; }
  .header-actions .orders-btn { background: #201c19; border: none; padding: 8px 10px 8px 9px; }
  .header-actions .orders-btn span { color: #fff; font-size: 11.5px; font-weight: 800; }
  .header-actions .orders-btn svg { stroke: #fff; width: 16px; height: 16px; }
  .header-actions .notify-btn { background: #fff; border: 1.5px solid var(--accent); width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; }
  .header-actions .cart-btn { background: #1a3b6d; border: none; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; }
  .header-actions .cart-btn svg { stroke: #fff; width: 21px; height: 21px; }

  .cart-table th { font-size: 9px; padding-bottom: 6px; }
  .cart-table th:nth-child(2) { width: 82px; }
  .cart-table th:nth-child(3) { width: 52px; }
  .cart-table th:nth-child(4) { width: 20px; }
  .cart-item td { padding: 9px 0; }
  .ct-product { gap: 7px; }
  .ct-product img, .ct-product .cart-item-placeholder { width: 34px; height: 34px; border-radius: 5px; }
  .ct-name { font-size: 11px; }
  .qty-row { gap: 4px; }
  .qty-row button { width: 19px; height: 19px; font-size: 12px; }
  .qty-set-input { width: 36px; font-size: 16px; padding: 1px; }
  .ct-total { font-size: 11.5px; }
  .remove-item { font-size: 13px; padding: 2px; }

  .oi-product img, .oi-thumb-placeholder { width: 28px; height: 28px; }
  .order-items-table td { font-size: 11.5px; }
  .oi-qty { width: 38px; }
}

@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; position: static; }
  .category-list { flex-direction: row; flex-wrap: wrap; }
  .category-list button { width: auto; border: 1px solid var(--border); }
  .qv-modal { flex-direction: column; }
  .qv-close { width: 38px; height: 38px; font-size: 18px; top: 14px; right: 14px; }

  .ig-fab { width: 48px; padding: 4px; gap: 0; }
  .ig-fab img { height: 40px; }
  .ig-fab-label { display: none; }
  .brand-banner {
    --bb-pad-x: 12px; --bb-pad-y: 16px;
    padding: 16px 12px; column-gap: 8px; row-gap: 8px; flex-wrap: wrap;
    justify-content: center; text-align: center;
  }
  .bb-logo-oxpower { height: 20px; }
  .bb-logo-auris { height: 22px; }
  .bb-logo-ttec { height: 21px; }
  .bb-sep { display: none; }
  .brand-slogan { font-size: 15px; margin-top: 10px; }
}

/* Phone neon: two thin fixed strips (top and bottom edge) with a beam that slides back and forth inside each. There is no
   full-screen layer any more: each strip is its own small fixed element that clips the beam (so nothing can stick out sideways
   and widen the page), and the beam moves with transform (GPU-composited) instead of repainting a glowing gradient every frame,
   which is what made the neon stutter / jump on phones. The strips are taller than the beam so its glow is not cut off. */
.neon-frame { display: none; }
.neon-bar {
  position: fixed; left: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 999999;
  contain: layout paint style;
}
.neon-bar-top { top: 0; height: 26px; }
.neon-bar-bottom { bottom: 0; height: 22px; }
.neon-beam {
  position: absolute; left: 0; width: 45%; display: block;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,255,240,.2) 12%, #4dfff2 45%, #00fff2 50%, #baFFF6 52%, #00fff2 55%, #4dfff2 88%, transparent 100%);
  filter: drop-shadow(0 0 8px rgba(0,255,240,.8));
  transform: translate3d(-55%, 0, 0); will-change: transform;
  animation: neon-beam-slide 3s ease-in-out infinite alternate;
}
.neon-bar-top .neon-beam { top: 0; height: 12px; }
.neon-bar-bottom .neon-beam { bottom: 0; height: 6px; animation-direction: alternate-reverse; }
/* same travel as the mask/background-position 45% -> 145% used by the signature text: 0.55*p / 0.45 in units of the beam's own width */
@keyframes neon-beam-slide {
  from { transform: translate3d(-55%, 0, 0); }
  to { transform: translate3d(177.22%, 0, 0); }
}
/* used by the desktop slogan band bars */
@keyframes neon-bar-slide {
  from { background-position: -45% 0; }
  to { background-position: 145% 0; }
}

/* Hidden signature under the top neon bar: only readable where the beam is passing.
   Same mask size, duration, easing and direction as the top bar (::before) so they stay in sync. */
.neon-mark {
  position: fixed; left: 0; right: 0; top: 13px; z-index: 999999; pointer-events: none;
  text-align: center; white-space: nowrap;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: .9em; text-indent: .9em;
  color: #c9fff9;
  text-shadow: 0 0 5px rgba(0,255,240,.95), 0 0 14px rgba(0,255,240,.65);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 15%, #000 42%, #000 58%, rgba(0,0,0,.35) 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 15%, #000 42%, #000 58%, rgba(0,0,0,.35) 85%, transparent 100%);
  -webkit-mask-size: 45% 100%; mask-size: 45% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: -45% 0; mask-position: -45% 0;
  animation: neon-mark-slide 3s ease-in-out infinite alternate;
}
@keyframes neon-mark-slide {
  from { -webkit-mask-position: -45% 0; mask-position: -45% 0; }
  to { -webkit-mask-position: 145% 0; mask-position: 145% 0; }
}

@media (max-width: 640px) {
  .ig-fab { display: none; }
  .brand-banner { padding: 16px 12px; }
  .bb-sep { display: inline-block; font-size: 22px; color: #000; font-weight: 700; }
  .brand-slogan { display: none; }

  /* Neon light bars sliding back and forth along the top and bottom screen edges */
  .neon-frame { display: block; }
}

/* iOS "Add to Home Screen" standalone app: extend the header into the status-bar
   safe area so the app fills the screen instead of leaving a gap at the top. */
@media (max-width: 640px) and (display-mode: standalone) {
  body { padding-top: calc(160px + env(safe-area-inset-top, 0px)); }
  /* the status bar covers the very top edge, so the signature sits just below it */
  .neon-mark { top: calc(env(safe-area-inset-top, 0px) + 4px); }
  /* Padding goes on .brand-row (black background), not .site-header (white background),
     so the black bar itself extends up under the status bar instead of leaving a white gap. */
  .brand-row { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
}

.page-title-sub { font-size: 0.6em; font-weight: 600; color: #777; }