/* ============================================================
   EJDER SOFRASI — Raw Input Studio
   Scoped section stylesheet. Everything is namespaced under
   .es- or body.es-page so it can sit next to the main site CSS
   without collisions. Tokens are prefixed --es-.
   ============================================================ */

@font-face {
  font-family: "Cinzel Decorative";
  src: url("assets/fonts/CinzelDecorative-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("assets/fonts/CinzelDecorative-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/PlusJakartaSans-var.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* cross-page morph to and from the studio homepage */
@view-transition { navigation: auto; }
::view-transition-old(brand-stamp),
::view-transition-new(brand-stamp) { animation-duration: .55s; }

:root {
  --es-vellum:      #16140F;
  --es-vellum-2:    #211E17;
  --es-vellum-3:    #2C2820;
  --es-cocoa:       #EDE4D3;
  --es-cocoa-soft:  #A79C8A;
  --es-ember:       #C93A2E;   /* fills: label #FFF6EC on this = 4.76 (AA) */
  --es-ember-text:  #E8695A;   /* red TEXT on dark: 5.2+ (AA) — do not use for fills */
  --es-ember-deep:  #96271D;
  --es-tangerine:   #E0761D;
  --es-brass:       #C79A5C;
  --es-brass-lt:    #E4C48C;
  --es-sienna:      #A9713D;
  --es-dusk:        #9B7FD4;

  --es-shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --es-shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.35);
  --es-shadow-lg: 0 30px 70px rgba(0,0,0,.5);

  --es-display: "Cinzel Decorative", "Iowan Old Style", Georgia, serif;
  --es-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --es-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --es-r: 12px;
  --es-r-lg: 16px;
  --es-ease: cubic-bezier(.22,.8,.32,1);
  --es-shell: 1120px;
}

body.es-page {
  margin: 0;
  background:
    radial-gradient(1000px 640px at 82% -6%, rgba(201,58,46,.09), transparent 62%),
    var(--es-vellum);
  color: var(--es-cocoa);
  font-family: var(--es-body);
  font-size: 17px; font-weight: 400; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.es-page * { box-sizing: border-box; }
body.es-page img { display: block; max-width: 100%; }
body.es-page a { color: inherit; text-decoration: none; }
body.es-page button { font: inherit; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

.es-page :focus-visible { outline: 2.5px solid var(--es-dusk); outline-offset: 3px; border-radius: 4px; }
.es-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.es-shell { width: min(100% - 40px, var(--es-shell)); margin-inline: auto; }

.es-eyebrow {
  margin: 0 0 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--es-cocoa-soft);
}

/* ============================================================
   HEADER
   ============================================================ */
.es-header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid rgba(237,228,211,.13);
  /* iOS: the status bar sits over the page, so the bar's own surface
     has to reach up into the safe area — otherwise content scrolls
     through a bare strip above the header. */
  padding-top: env(safe-area-inset-top, 0px);
}
.es-header-in {
  display: flex; align-items: center; gap: 14px; height: 68px;
  width: min(100% - 40px, var(--es-shell)); margin-inline: auto;
}
.es-brand { display: flex; align-items: center; flex: none; }
.es-brand img {
  height: 26px; width: auto; view-transition-name: brand-stamp;
  /* solid black-on-transparent logo, no light variant exists —
     invert renders it cream/white without needing a new asset */
  filter: invert(1) brightness(1.08) sepia(.12) saturate(1.1);
}
.es-crumb {
  display: flex; align-items: center;
  font-family: var(--es-body); font-weight: 800;
  font-size: 14px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--es-ember-text);
  padding-left: 16px; margin-right: auto;
  border-left: 1px solid rgba(237,228,211,.13);
  white-space: nowrap;
  view-transition-name: brand-crumb;
}
.es-tool {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  background: rgba(237,228,211,.07);
  border: 1px solid rgba(237,228,211,.14);
  border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--es-cocoa);
  transition: transform .16s var(--es-ease), background .16s var(--es-ease), border-color .16s var(--es-ease);
}
.es-tool:hover, .es-tool:focus-visible {
  transform: translateY(-1px);
  border-color: var(--es-ember);
  background: rgba(214,72,58,.12);
}
.es-tool:active { transform: translateY(1px); }
.es-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.es-count {
  min-width: 21px; height: 21px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--es-tangerine); color: #2A1C14;
  border-radius: 999px; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
@keyframes es-catch {
  0% { transform: scale(1); } 42% { transform: scale(1.2) rotate(-4deg); } 100% { transform: scale(1); }
}
.es-tool.is-catching { animation: es-catch .55s var(--es-ease); }
.es-tool.is-catching::after {
  content: ""; position: absolute; inset: -10px; border-radius: 999px;
  background: radial-gradient(circle, rgba(201,58,46,.55), transparent 70%);
  animation: es-catch-glow .6s var(--es-ease) forwards; pointer-events: none;
}
@keyframes es-catch-glow {
  0% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); }
}

/* the model the box pulls in */
.es-flyer { position: fixed; z-index: 200; pointer-events: none; border-radius: 10px; object-fit: cover; box-shadow: 0 12px 40px rgba(0,0,0,.42); }

/* ============================================================
   HERO + STAGE
   ============================================================ */
.es-hero { padding: 56px 0 0; }
.es-hero-head { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 26px; }
.es-seal {
  flex: none; width: auto; height: 96px; border-radius: 0; box-shadow: none;
  view-transition-name: ejder-seal;
}
.es-hero-title {
  margin: 0; font-family: var(--es-display); font-weight: 700;
  font-size: clamp(30px, 3.7vw, 44px); line-height: 1.1;
  letter-spacing: -.004em; text-transform: uppercase;
}
.es-hero-title span { display: block; color: var(--es-ember-text); }
.es-hero-lead { margin: 14px 0 0; max-width: 52ch; color: var(--es-cocoa-soft); font-size: 17px; }

.es-frame { position: relative; border-radius: var(--es-r); overflow: hidden; box-shadow: var(--es-shadow-md); background: var(--es-vellum-2); }

/* ============================================================
   FAVOURITE HEART — used on every card across the site
   ============================================================ */
.es-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(237,228,211,.13); border-radius: 50%;
  background: rgba(33,30,23,.92); cursor: pointer;
  transition: background .18s var(--es-ease), transform .18s var(--es-ease);
}
.es-fav:hover { transform: scale(1.08); }
.es-fav svg { width: 16px; height: 16px; fill: none; stroke: var(--es-cocoa-soft); stroke-width: 1.9; }
.es-fav.is-on { background: var(--es-ember); border-color: var(--es-ember); }
.es-fav.is-on svg { fill: #FFF6E6; stroke: #FFF6E6; }

.es-price { font-family: var(--es-mono); font-size: 14px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--es-ember-text); }
.es-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-left: auto; padding: 11px 20px; border: none; border-radius: 999px;
  background: var(--es-ember); color: #FFF6EC;
  font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: transform .16s var(--es-ease), box-shadow .16s var(--es-ease), background .16s var(--es-ease);
}
.es-add .es-ico { width: 18px; height: 18px; flex: none; object-fit: contain; }
.es-add:hover { transform: translate(-2px, -2px); }
.es-add:active { transform: translate(1px, 1px); }

/* ============================================================
   DETAIL PAGE
   ============================================================ */
.es-detail { padding: 40px 0 0; }
.es-crumbs { margin: 0 0 22px; font-size: 13px; color: var(--es-cocoa-soft); }
.es-crumbs a:hover { color: var(--es-ember-text); }
.es-detail-grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); gap: 44px; align-items: start; }
.es-detail-art { display: grid; grid-template-columns: 1fr 128px; gap: 14px; align-items: start; }
.es-detail-photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.es-detail-card { width: 100%; height: auto; aspect-ratio: 1400/2520; object-fit: contain; display: block; }

.es-detail-class { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--es-ember-text); }
.es-detail-name { margin: 0 0 10px; font-family: var(--es-display); font-weight: 700; font-size: clamp(26px, 3.8vw, 38px); line-height: 1.08; text-transform: uppercase; }
.es-detail-line { margin: 0 0 22px; font-size: 17.5px; color: var(--es-cocoa-soft); white-space: pre-wrap; }
.es-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.es-badge { padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(201,58,46,.1); border: 1px solid rgba(201,58,46,.35); color: var(--es-ember-deep); }

.es-spec { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 1px; background: rgba(237,228,211,.13); border: 1px solid rgba(237,228,211,.13); border-radius: 14px; overflow: hidden; }
.es-spec li { display: flex; gap: 14px; padding: 11px 16px; background: rgba(33,30,23,.86); font-size: 14px; }
.es-spec span { color: var(--es-cocoa-soft); }
.es-spec strong { margin-left: auto; font-weight: 700; letter-spacing: .05em; }

.es-buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px; margin-bottom: 30px; background: rgba(33,30,23,.86); border: 1px solid rgba(237,228,211,.13); border-radius: var(--es-r); }
.es-buy .es-price { font-size: 20px; }
.es-buy .es-add { padding: 13px 26px; font-size: 15px; }
.es-buy .es-fav { position: static; width: 44px; height: 44px; }

.es-lore h2 { margin: 0 0 12px; font-family: var(--es-body); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: -.01em; }
.es-lore p { margin: 0 0 14px; }
.es-credit { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(237,228,211,.13); font-size: 12.5px; color: var(--es-cocoa-soft); }

.es-also { padding: 56px 0 80px; }
.es-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 24px; }
.es-section-title { margin: 0; font-family: var(--es-display); font-weight: 700; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.06; text-transform: uppercase; }
.es-section-note { margin: 0; font-size: 13.5px; color: var(--es-cocoa-soft); }
.es-also-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.es-also-item { display: flex; align-items: center; gap: 14px; padding: 12px; background: rgba(33,30,23,.8); border: 1px solid rgba(237,228,211,.13); border-radius: var(--es-r); transition: transform .22s var(--es-ease), box-shadow .22s var(--es-ease); }
.es-also-item:hover, .es-also-item:focus-within, .es-also-item:active { transform: translateY(-3px); box-shadow: var(--es-shadow-sm); }
.es-also-item img { width: 46px; height: 82px; flex: none; border-radius: 7px; object-fit: cover; }
.es-also-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.es-also-class { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--es-cocoa-soft); margin-top: 3px; }

/* ============================================================
   DRAWERS (cart + favourites)
   ============================================================ */
.es-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(38,25,58,.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--es-ease), visibility 0s .3s;
}
.es-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--es-ease), visibility 0s 0s; }

.es-drawer {
  position: fixed; z-index: 100; top: 0; right: 0; bottom: 0;
  width: min(430px, 100%); display: flex; flex-direction: column;
  box-shadow: -30px 0 60px rgba(38,25,58,.24);
  transform: translateX(100%);
  transition: transform .36s var(--es-ease);
}
.es-drawer.is-open { transform: translateX(0); }
.es-drawer-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid rgba(237,228,211,.13); }
.es-drawer-head h2 { margin: 0; font-family: var(--es-body); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.es-drawer-close { color: var(--es-cocoa); margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 1px solid rgba(237,228,211,.13); border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1; transition: background .18s var(--es-ease); }
.es-drawer-close:hover { background: var(--es-vellum-2); }
.es-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.es-drawer-empty { margin: 0; padding: 32px 0; text-align: center; color: var(--es-cocoa-soft); font-size: 15px; }
.es-line { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid rgba(237,228,211,.13); }
.es-line img { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; background: var(--es-vellum-2); }
.es-line-text { flex: 1; min-width: 0; }
.es-line-name { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.es-line-meta { display: block; font-size: 12.5px; color: var(--es-cocoa-soft); margin-top: 2px; }
.es-line-go { color: var(--es-cocoa-soft); font-size: 12.5px; font-weight: 600; text-decoration: underline; }
.es-line-go:hover { color: var(--es-ember-text); }

.es-drawer-foot { padding: 18px 22px 22px; border-top: 1px solid rgba(237,228,211,.13); }
.es-drawer-foot--news { display: flex; justify-content: center; }
.es-drawer-foot--news .es-add { margin-left: 0; }
.es-total { display: flex; align-items: baseline; margin-bottom: 14px; font-size: 15px; }
.es-total strong { margin-left: auto; font-size: 19px; font-weight: 800; letter-spacing: .05em; }
.es-expand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px; border: none; border-radius: 999px;
  background: var(--es-vellum-3); color: var(--es-cocoa);
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .2s var(--es-ease), gap .3s var(--es-ease);
}
.es-expand:hover { background: var(--es-ember); gap: 16px; }
.es-checkout-note { margin: 10px 0 0; font-size: 12.5px; color: var(--es-cocoa-soft); text-align: center; }

/* ---------- toast ---------- */
.es-toast {
  position: fixed; z-index: 120; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  padding: 12px 22px; border-radius: 999px; background: #F0E7D6; color: #16140F;
  font-size: 14px; font-weight: 600; box-shadow: var(--es-shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity .26s var(--es-ease), transform .26s var(--es-ease);
}
.es-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- footer ---------- */
.es-footer { border-top: 1px solid var(--es-glass-edge); background: var(--es-glass); padding: 34px 0; }
.es-footer-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.es-footer-in img {
  height: 30px; width: auto; opacity: .9;
  /* black-on-transparent stamp, invisible on the dark footer without this */
  filter: invert(1) brightness(1.08) sepia(.12) saturate(1.1);
}
.es-footer-note { margin: 0; font-size: 13px; color: var(--es-cocoa-soft); }
.es-footer-links { margin-left: auto; display: flex; gap: 20px; font-size: 13.5px; font-weight: 600; }
.es-footer-links a:hover { color: var(--es-ember-text); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .es-detail-grid { grid-template-columns: 1fr; gap: 30px; }
  .es-also-list { grid-template-columns: 1fr; }
  .es-hero-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  /* the wordmark is wide now — a square box would squash it */
  .es-seal { width: auto; height: 70px; }
  .es-crumb, .es-crumb-txt { display: none; }
}
@media (max-width: 620px) {
  body.es-page { font-size: 16px; }
  .es-shell { width: calc(100% - 30px); }
  body.es-page .es-header-in { gap: 8px; row-gap: 8px; }
  .es-tool { padding: 0 12px; }
  .es-tool span.es-label { display: none; }
  .es-hero { padding-top: 30px; }
  .es-hero-title { line-height: 1.16; }
  .es-add { margin-left: 0; width: 100%; }
  .es-drawer-foot--news .es-add { width: auto; }
  .es-detail-art { grid-template-columns: 1fr; }
  .es-detail-card { width: 128px; }
  .es-footer-links { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  body.es-page *, body.es-page *::before, body.es-page *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}

/* ============================================================
   QUIZ — "hangi karaktersin?"
   Neo-brutalist on purpose: flat hard shadows (no blur), solid
   borders, snappy translate-based feedback instead of soft fades.
   Calm at rest, a little punchy on interaction — nothing here
   depends on hover, scroll timing, or touch gesture detection,
   so it can't repeat the mobile bugs from the old hero/cards.
   ============================================================ */
.es-hero-row {
  display: grid; grid-template-columns: minmax(0,240px) minmax(0,1fr);
  gap: 48px; align-items: center; margin-top: 34px;
}
/* Explicit columns. Without these the quiz became the FIRST grid item
   once the deck was hidden and got squeezed into the narrow 240px
   column — that was the "proportions explode on start" bug. */
.es-deck { grid-column: 1; grid-row: 1; }
.es-quiz { grid-column: 2; grid-row: 1; }
/* deck gone: the quiz takes the whole row instead of leaving a hole */
.es-hero-row.is-solo { grid-template-columns: minmax(0,1fr); }
.es-hero-row.is-solo .es-quiz { grid-column: 1; }

/* ============================================================
   THE DECK — a real stack, one card behind another
   Cards sit squarely on top of each other with a small offset so
   the stack reads as physical depth. Hover fans them out; starting
   the quiz sweeps the whole stack into the quiz panel.
   ============================================================ */
.es-deck {
  position: relative; width: 220px; height: 396px; margin: 0 auto;
  perspective: 1200px;
}
.es-deck-card {
  position: absolute; top: 0; left: 0;
  width: 220px; height: 396px; border-radius: 14px; overflow: hidden;
  background: var(--es-vellum-2);
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
  transform: translate3d(calc(var(--i) * -5px), calc(var(--i) * -6px), 0) rotate(calc(var(--i) * -1.4deg));
  transform-origin: center center;
  transition: transform .5s var(--es-ease), box-shadow .4s var(--es-ease);
  z-index: calc(10 - var(--i));
  will-change: transform;
}
.es-deck-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* hover the stack: it fans into a readable spread */
@media (hover: hover) {
  .es-deck:hover .es-deck-card {
    transform: translate3d(calc(var(--i) * -26px), calc(var(--i) * -14px), 0) rotate(calc(var(--i) * -6deg));
  }
  /* and the one you point at rises clear of the rest */
  .es-deck-card:hover, .es-deck-card:focus-visible {
    transform: translate3d(calc(var(--i) * -26px), -34px, 0) rotate(0deg) scale(1.06) !important;
    box-shadow: 0 26px 54px rgba(0,0,0,.6);
    z-index: 20;
  }
}

/* ---------- touch: there is no hover, so the deck is tapped through ----------
   JS rewrites --i on each tap, cycling the top card to the back. The
   card's own transform rule already reads --i, so the reshuffle is a
   plain transition with no extra animation state to get stuck in. */
.es-deck-card { -webkit-tap-highlight-color: transparent; }
.es-deck.is-touch .es-deck-card:active { transform: translate3d(calc(var(--i) * -5px), calc(var(--i) * -6px), 0) scale(.97); }
.es-deck-hint {
  position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--es-cocoa-soft); white-space: nowrap; pointer-events: none;
  opacity: .75;
}
@media (hover: hover) { .es-deck-hint { display: none; } }

/* ---------- draw: the stack is swept into the quiz panel ----------
   Each card arcs up and to the right, spinning as it shrinks toward
   the panel, then disappears. Staggered so they're pulled in one by
   one rather than as a single blob. */
@keyframes es-deck-draw {
  0% {
    transform: translate3d(calc(var(--i) * -5px), calc(var(--i) * -6px), 0) rotate(calc(var(--i) * -1.4deg)) scale(1);
    opacity: 1;
  }
  35% {
    transform: translate3d(30px, -120px, 0) rotate(-160deg) scale(.86);
    opacity: 1;
  }
  70% {
    transform: translate3d(260px, -40px, 0) rotate(-330deg) scale(.42);
    opacity: .85;
  }
  100% {
    transform: translate3d(400px, 60px, 0) rotate(-520deg) scale(.04);
    opacity: 0;
  }
}
.es-deck.is-drawing { pointer-events: none; }
.es-deck.is-drawing .es-deck-card {
  animation: es-deck-draw .9s cubic-bezier(.62,.02,.5,1) both;
  animation-delay: calc(var(--i) * .11s);
}

/* the panel swells as it swallows the deck, then settles */
@keyframes es-quiz-swallow {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  70%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.es-quiz.is-swallowing { animation: es-quiz-swallow 1.25s var(--es-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .es-deck.is-drawing .es-deck-card { animation: none; opacity: 0; transition: opacity .3s; }
  .es-quiz.is-swallowing { animation: none; }
  .es-deck:hover .es-deck-card, .es-deck-card:hover { transform: none !important; }
}

/* on narrow screens the quiz sits BELOW the deck, so the cards have to
   be pulled downward — the desktop arc flies off to the right, which on
   a phone just looks like they blink out */
@keyframes es-deck-draw-down {
  0% {
    transform: translate3d(calc(var(--i) * -5px), calc(var(--i) * -6px), 0) rotate(calc(var(--i) * -1.4deg)) scale(1);
    opacity: 1;
  }
  40% { transform: translate3d(-40px, 40px, 0) rotate(180deg) scale(.8); opacity: 1; }
  72% { transform: translate3d(40px, 190px, 0) rotate(360deg) scale(.4); opacity: .85; }
  100% { transform: translate3d(0, 300px, 0) rotate(520deg) scale(.04); opacity: 0; }
}

@media (max-width: 900px) {
  .es-deck.is-drawing .es-deck-card { animation-name: es-deck-draw-down; }
  .es-hero-row { grid-template-columns: 1fr; gap: 28px; }
  /* single column: clear the explicit desktop column assignments,
     otherwise the quiz is pushed into a phantom second column */
  .es-deck  { grid-column: 1; grid-row: auto; width: 168px; height: 302px; }
  .es-deck-card { width: 168px; height: 302px; }
  .es-quiz  { grid-column: 1; grid-row: auto; }
}

.es-quiz {
  position: relative;
  padding: 34px 32px 36px;
  background: var(--es-vellum-2);
  border: 1px solid rgba(237,228,211,.12);
  border-radius: var(--es-r-lg);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.es-quiz-panel[hidden] { display: none; }

/* ---------- panel handover ----------
   The deck flies in, then the questions used to appear with a hard
   cut. The outgoing panel now recedes while the deck is still in the
   air, and the incoming one springs out with a short overshoot so the
   panel feels like it stretches open rather than snapping. */
@keyframes es-panel-out {
  0%   { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(.93) translateY(-6px); }
}
@keyframes es-panel-in {
  0%   { opacity: 0; transform: scale(.90) translateY(14px); }
  55%  { opacity: 1; transform: scale(1.025) translateY(-3px); }
  78%  { transform: scale(.994) translateY(1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.es-quiz-panel.is-leaving {
  animation: es-panel-out .34s var(--es-ease) both;
  pointer-events: none;
}
.es-quiz-panel.is-entering {
  animation: es-panel-in .62s cubic-bezier(.34,1.4,.5,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .es-quiz-panel.is-leaving, .es-quiz-panel.is-entering { animation: none; }
}

.es-quiz-eyebrow {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--es-ember-text);
}
.es-quiz-title {
  margin: 0 0 12px; font-family: var(--es-display); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 32px); line-height: 1.14; text-transform: uppercase;
}
.es-quiz-lead { margin: 0 0 22px; max-width: 52ch; color: var(--es-cocoa-soft); font-size: 15.5px; line-height: 1.6; }

.es-quiz-start-btn, .es-quiz-retry-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border: none; border-radius: 999px;
  background: var(--es-ember); color: #FFF6EC;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  transition: transform .14s var(--es-ease), background .14s var(--es-ease);
}
.es-quiz-start-btn:hover, .es-quiz-retry-btn:hover { transform: translateY(-2px); background: #E0574A; }
.es-quiz-start-btn:active, .es-quiz-retry-btn:active { transform: translateY(1px); }
/* secondary action stays quiet so it can't compete with the primary one */
.es-quiz-retry-btn {
  background: transparent; color: var(--es-cocoa-soft);
  border: 1px solid rgba(237,228,211,.2); box-shadow: none;
}
.es-quiz-retry-btn:hover { background: rgba(237,228,211,.06); color: var(--es-cocoa); }

/* ---------- progress ---------- */
.es-quiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.es-quiz-progress-label { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--es-cocoa-soft); }
.es-quiz-progress-track { flex: 1; height: 6px; border: none; border-radius: 999px; background: rgba(237,228,211,.12); overflow: hidden; }
.es-quiz-progress-fill { height: 100%; width: 0%; background: var(--es-ember); transition: width .35s var(--es-ease); }

.es-quiz-question {
  margin: 0 0 22px; font-family: var(--es-body); font-weight: 800;
  font-size: clamp(19px, 2.4vw, 24px); line-height: 1.35; text-transform: none;
}

/* ---------- options ---------- */
.es-quiz-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; transition: opacity .22s var(--es-ease); }
.es-quiz-options.is-leaving { opacity: 0; }
.es-quiz-opt {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  padding: 16px 18px; border: 1px solid rgba(237,228,211,.14); border-radius: var(--es-r);
  background: var(--es-vellum-3); color: var(--es-cocoa); text-align: left; cursor: pointer;
  font: inherit; font-size: 14.5px; line-height: 1.55;
  transition: transform .14s var(--es-ease), border-color .14s var(--es-ease), background .14s var(--es-ease);
}
.es-quiz-opt:hover { transform: translateX(3px); border-color: var(--es-ember); background: rgba(214,72,58,.08); }
.es-quiz-opt:active { transform: translateX(1px); }
.es-quiz-opt:disabled { cursor: default; }
.es-quiz-opt:disabled:hover { transform: none; border-color: rgba(237,228,211,.14); background: var(--es-vellum-3); }
.es-quiz-opt.is-picked {
  background: var(--es-ember); color: #FFF6EC; border-color: var(--es-ember);
}
.es-quiz-opt-letter {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid currentColor; border-radius: 6px; opacity: .7;
  font-size: 12.5px; font-weight: 800;
}

/* ---------- result ---------- */
/* Desktop result: card on the left, everything else beside it, so the
   panel reads as one compact block instead of a long vertical column. */
.es-quiz-result { text-align: center; }
@media (min-width: 780px) {
  .es-quiz-result-top {
    display: grid; grid-template-columns: 190px minmax(0,1fr);
    gap: 30px; align-items: center; text-align: left;
    max-width: 660px; margin: 0 auto;
  }
  .es-quiz-result-top .es-quiz-result-art { margin: 0; width: 100%; }
  .es-quiz-result-top .es-quiz-result-line { margin-left: 0; margin-right: 0; max-width: none; }
  .es-quiz-result-top .es-quiz-result-actions { justify-content: flex-start; }
}
.es-quiz-result:focus { outline: none; box-shadow: 0 0 0 3px rgba(214,72,58,.4); border-radius: var(--es-r); }
.es-quiz-result-art {
  /* matches the real card ratio so nothing is cropped — the old
     700/1035 box was cutting the name bar off the bottom */
  width: 168px; height: auto; aspect-ratio: 1400/2520; object-fit: contain;
  margin: 6px auto 20px; border: 0; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55); display: block;
}
.es-quiz-result-name { margin: 0 0 2px; font-family: var(--es-display); font-weight: 700; font-size: 24px; text-transform: uppercase; }
.es-quiz-result-class { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--es-cocoa-soft); }
.es-quiz-result-line { margin: 0 auto 18px; max-width: 44ch; font-size: 15px; line-height: 1.55; color: var(--es-cocoa); }
.es-quiz-result-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.es-quiz-result-actions .es-add { margin: 0; }

.es-quiz-share { margin-top: 40px; padding-top: 36px; border-top: 1px solid rgba(237,228,211,.1); }
.es-quiz-share-label { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--es-cocoa-soft); }
.es-quiz-share-btns { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.es-quiz-share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid rgba(237,228,211,.18); border-radius: 999px;
  background: var(--es-vellum-3); color: var(--es-cocoa); cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700;
  transition: transform .14s var(--es-ease), border-color .14s var(--es-ease), background .14s var(--es-ease);
}
.es-quiz-share-btn:hover { transform: translateY(-2px); border-color: var(--es-ember); background: rgba(214,72,58,.12); }
.es-quiz-share-btn:active { transform: translateY(1px); }
.es-quiz-share-btn:disabled { opacity: .5; cursor: default; transform: none; }
.es-quiz-share-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.es-quiz-share-btn[data-quiz-share="instagram"] svg circle:first-of-type { fill: none; }

.es-quiz-notify { max-width: 420px; margin: 34px auto 0; text-align: left; }
.es-quiz-notify .es-notify-row { display: flex; gap: 8px; }
.es-quiz-notify .es-input { border-radius: 10px; }
.es-quiz-notify .es-add { margin: 0; white-space: nowrap; }
.es-quiz-notify .es-consent { margin: 10px 0 0; }

@media (max-width: 620px) {
  .es-quiz { padding: 22px 18px 26px; }
  .es-quiz-opt { padding: 13px 14px; font-size: 14px; gap: 11px; }
  .es-quiz-title { font-size: clamp(21px, 6.4vw, 26px); }
  .es-quiz-question { font-size: clamp(17px, 4.9vw, 20px); }
  .es-quiz-lead { font-size: 14.5px; }
  .es-deck { width: 150px; height: 270px; }
  .es-deck-card { width: 150px; height: 270px; }
  /* result was running very tall on phones: the buttons were each
     taking a full-width row because of the global mobile .es-add rule,
     and the share row wrapped onto three lines. */
  .es-quiz-result-art { width: 124px; margin-bottom: 14px; }
  .es-quiz-result-name { font-size: 20px; }
  .es-quiz-result-line { font-size: 14px; margin-bottom: 16px; }
  .es-quiz-result-actions { gap: 10px; flex-wrap: nowrap; }
  .es-quiz-result-actions .es-add,
  .es-quiz-result-actions .es-quiz-retry-btn { width: auto; flex: 1 1 0; min-width: 0; padding: 11px 12px; }
  .es-quiz-share { margin-top: 28px; padding-top: 24px; }
  .es-quiz-share-btns { gap: 8px; flex-wrap: nowrap; margin-bottom: 18px; }
  .es-quiz-share-btn { flex: 1 1 0; min-width: 0; padding: 10px 8px; font-size: 12.5px; gap: 6px; }
  .es-quiz-notify { margin-top: 24px; }
  .es-quiz-notify .es-add { width: auto; }
}

/* ============================================================
   TIPS — the loading-screen rail
   ============================================================ */
.es-tips {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0 40px; padding: 18px 20px;
  border: 1px solid rgba(237,228,211,.12); border-radius: var(--es-r);
  background: var(--es-vellum-2);
}
.es-tips-die { width: 26px; height: 26px; flex: none; opacity: .9; border-radius: 50%; animation: es-roll 14s linear infinite; }
@keyframes es-roll { 0%,72% { transform: rotate(0); } 82% { transform: rotate(196deg); } 100% { transform: rotate(180deg); } }
.es-tips-body { position: relative; flex: 1; min-width: 0; min-height: 54px; }
.es-tips-label { position: absolute; top: 0; left: 0; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--es-brass); }
.es-tip {
  /* fills the area under the label and centres its own text, so a
     one-line tip and a two-line tip both sit dead-centre against the die */
  position: absolute; left: 0; right: 0; top: 18px; bottom: 0; margin: 0;
  display: flex; align-items: center;
  font-size: 13.5px; line-height: 1.5; color: var(--es-cocoa-soft);
  opacity: 0; transform: translateY(7px);
  transition: opacity .8s var(--es-ease), transform .8s var(--es-ease);
  pointer-events: none;
}
.es-tip.is-on { opacity: 1; transform: translateY(0); }
.es-tips:hover .es-tip.is-on { color: var(--es-cocoa); }

/* ============================================================
   LIGHTBOX — look closer at the model
   ============================================================ */
.es-zoomable { position: relative; cursor: zoom-in; }

.es-lens {
  position: fixed; inset: 0; z-index: 140;
  display: grid; place-items: center; padding: 4vmin;
  background: rgba(26,16,12,.86);
  -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
  opacity: 0; visibility: hidden; cursor: zoom-out;
  transition: opacity .32s var(--es-ease), visibility 0s .32s;
}
.es-lens.is-open { opacity: 1; visibility: visible; transition: opacity .32s var(--es-ease), visibility 0s 0s; }
.es-lens img {
  max-width: min(92vw, 900px); max-height: 88vh; width: auto; height: auto;
  border-radius: var(--es-r-lg); background: var(--es-vellum-2);
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  transform: scale(.9); opacity: 0;
  transition: transform .42s var(--es-ease), opacity .32s var(--es-ease);
}
.es-lens.is-open img { transform: scale(1); opacity: 1; }
.es-lens-cap {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0;
  margin: 0; padding: 8px 18px; border-radius: 999px;
  background: rgba(243,231,208,.9); color: var(--es-cocoa);
  font-size: 12.5px; font-weight: 600;
}

/* the dragon burns the hoard down (Hazine drawer "hepsini yak") */
.es-burn-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(201,58,46,.08); border: 2px solid transparent;
  color: var(--es-ember-text); font-size: 13.5px; font-weight: 700;
  transition: background .16s var(--es-ease), color .16s var(--es-ease), transform .16s var(--es-ease), box-shadow .16s var(--es-ease), border-color .16s var(--es-ease);
}
.es-burn-btn:hover { background: var(--es-ember); color: #FFF6EC; transform: translateY(-1px); border-color: var(--es-ember); }
.es-burn-btn:active { transform: translateY(1px); }
.es-burn-btn svg { width: 17px; height: 17px; fill: currentColor; }

@keyframes es-burn {
  0%   { opacity: 1; transform: translateY(0) scale(1); filter: none; }
  18%  { filter: sepia(1) saturate(7) hue-rotate(-14deg) brightness(1.25); }
  55%  { opacity: .72; transform: translateY(-8px) scale(.985) rotate(-.5deg);
         filter: sepia(1) saturate(9) brightness(1.5) blur(1px); }
  100% { opacity: 0; transform: translateY(-40px) scale(.94) rotate(-1.5deg);
         filter: blur(9px) brightness(2.2); }
}

.es-stock {
  margin: -12px 0 26px; padding: 14px 16px;
  border-left: 3px solid var(--es-brass); border-radius: 0 10px 10px 0;
  background: rgba(168,128,47,.09);
  font-size: 13.5px; line-height: 1.55; color: var(--es-cocoa-soft);
}

/* ============================================================
   ICONS — hand-drawn props instead of line glyphs
   ============================================================ */
.es-ico { width: 22px; height: 22px; flex: none; object-fit: contain; }
.es-tool .es-ico { width: 24px; height: 24px; margin: -2px 0; }
.es-spec li .es-ico { width: 20px; height: 20px; }
.es-burn-ico { width: 22px; height: 22px; object-fit: contain; }
.es-burn-btn:hover .es-burn-ico { filter: drop-shadow(0 0 8px rgba(255,180,90,.9)); }
.es-tips-die { width: 34px; height: 34px; border-radius: 0; }

.es-crumb img { height: 30px; width: auto; }


/* zoom affordance uses the spyglass */
.es-zoomable::before {
  content: ""; position: absolute; right: 14px; bottom: 14px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.86) url("assets/icons/spyglass.webp") center/24px 24px no-repeat;
  opacity: 0; transform: translateY(6px) scale(.9);
  transition: opacity .28s var(--es-ease), transform .28s var(--es-ease);
  pointer-events: none;
}
.es-zoomable:hover::before, .es-zoomable:focus-visible::before { opacity: 1; transform: translateY(0) scale(1); }

/* ============================================================
   CINEMATIC — the dragon becomes the mark
   ============================================================ */
.es-cine {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 45%, #FFFDF8 0%, #F3E7D0 55%, #E6D3AE 100%);
  opacity: 0; visibility: hidden;
  transition: opacity .42s var(--es-ease), visibility 0s .42s;
}
.es-cine.is-on { opacity: 1; visibility: visible; transition: opacity .42s var(--es-ease), visibility 0s 0s; }
.es-cine video {
  width: min(74vmin, 560px); height: auto; display: block;
  mix-blend-mode: multiply;
  transform: scale(.96); opacity: 0;
  transition: transform .7s var(--es-ease), opacity .5s var(--es-ease);
}
.es-cine.is-on video { transform: scale(1); opacity: 1; }
.es-cine-skip {
  position: absolute; right: 24px; bottom: 24px;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(237,228,211,.1); border: 1px solid rgba(237,228,211,.28);
  color: #EDE4D3; font-size: 13px; font-weight: 600;
  transition: background .2s var(--es-ease), color .2s var(--es-ease);
}
.es-cine-skip:hover { background: var(--es-ember); color: #FFF6EC; }
.es-cine.is-flash { background: #FFFDF8; }
.es-cine.is-flash video { opacity: 0; transform: scale(1.08); transition: opacity .35s var(--es-ease), transform .5s var(--es-ease); }

/* arriving from the cinematic */
@keyframes es-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.es-arriving main { animation: es-arrive .8s var(--es-ease) both; }
body.es-arriving .es-header { animation: es-arrive .6s var(--es-ease) both; }
.es-empty-ico { width: 64px; height: 64px; margin: 0 auto 12px; opacity: .8; object-fit: contain; }

/* ============================================================
   GLASS — translucent, layered surfaces with a specular edge.
   One shared recipe so every panel catches light the same way.
   ============================================================ */
:root {
  --es-glass:      rgba(33,30,23,.62);
  --es-glass-deep: rgba(33,30,23,.84);
  --es-glass-edge: rgba(199,154,92,.28);
  --es-blur: blur(22px) saturate(140%);
  --es-lift: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.3);
  --es-lift-hi: 0 2px 5px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.4);
}

.es-header {
  /* denser than the generic glass token: this bar sits over moving
     content and has to stay readable even where backdrop-filter is
     unsupported or throttled. */
  background: rgba(18,16,12,.82);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(199,154,92,.20);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .es-header { background: #12100C; }
}
/* a short scrim under the bar so content dissolves into it instead of
   sliding out from a hard edge */
.es-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,16,12,.55), transparent);
}

.es-tool {
  background: var(--es-glass);
  border-color: var(--es-glass-edge);
  -webkit-backdrop-filter: var(--es-blur); backdrop-filter: var(--es-blur);
  box-shadow: var(--es-lift);
}
.es-tips, .es-spec, .es-buy, .es-also-item, .es-stock, .es-news-in {
  -webkit-backdrop-filter: var(--es-blur); backdrop-filter: var(--es-blur);
}
.es-tips { background: var(--es-vellum-2); border-color: rgba(237,228,211,.12); box-shadow: none; border-radius: var(--es-r); }
.es-spec { background: var(--es-glass-edge); border-color: var(--es-glass-edge); }
.es-spec li { background: var(--es-glass-deep); }
.es-buy { background: var(--es-glass-deep); border-color: var(--es-glass-edge); box-shadow: var(--es-lift); border-radius: var(--es-r-lg); }
.es-also-item { background: var(--es-glass); border-color: var(--es-glass-edge); box-shadow: var(--es-lift); }
.es-also-item:hover, .es-also-item:focus-within, .es-also-item:active { box-shadow: var(--es-lift-hi); }
.es-fav {
  background: rgba(33,30,23,.66); border-color: var(--es-glass-edge);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.es-drawer {
  background: var(--es-glass-deep);
  -webkit-backdrop-filter: var(--es-blur); backdrop-filter: var(--es-blur);
  border-left: 1px solid var(--es-glass-edge);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.5), -30px 0 70px rgba(38,25,58,.28);
}
.es-add {
  background: var(--es-ember);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.es-add:hover { background: #E0574A; box-shadow: 0 4px 16px rgba(0,0,0,.45); }
.es-add:active { box-shadow: 0 1px 6px rgba(0,0,0,.4); }
.es-expand { background: linear-gradient(180deg, #3B2718, #2A1C14); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px rgba(0,0,0,.24); }

/* ---------- forms ---------- */
.es-input {
  flex: 1; min-width: 0; padding: 13px 16px; font: inherit; font-size: 15px; color: var(--es-cocoa);
  background: var(--es-vellum-2); border: 1px solid var(--es-glass-edge); border-radius: 999px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: border-color .2s var(--es-ease), background .2s var(--es-ease);
}
.es-input::placeholder { color: var(--es-cocoa-soft); opacity: .75; }
.es-input:focus { outline: none; border-color: var(--es-ember); background: var(--es-vellum-3); }
.es-notify-row { display: flex; gap: 10px; flex-wrap: wrap; }
.es-notify-row .es-add { margin-left: 0; white-space: nowrap; }
.es-notify {
  margin: 0 0 22px; padding: 18px 20px; border-radius: var(--es-r-lg);
  background: rgba(201,58,46,.06); border: 1px solid rgba(201,58,46,.25);
  -webkit-backdrop-filter: var(--es-blur); backdrop-filter: var(--es-blur);
  box-shadow: var(--es-lift);
}
.es-notify-label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--es-ember-text); }
.es-notify-note { margin: 10px 0 0; font-size: 12.5px; color: var(--es-cocoa-soft); }

.es-news { padding: 0 0 84px; }
.es-news-in {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 28px 32px; border-radius: var(--es-r-lg);
  background: var(--es-glass); border: 1px solid var(--es-glass-edge);
  box-shadow: var(--es-lift);
}
.es-news-ico { width: 72px; height: 72px; flex: none; object-fit: contain; }
.es-news-text { flex: 1; min-width: 260px; }
.es-news-text h2 { margin: 0 0 6px; font-family: var(--es-body); font-size: clamp(17px,2.4vw,20px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.es-news-text p { margin: 0; font-size: 14.5px; color: var(--es-cocoa-soft); max-width: 46ch; }
.es-news-form { flex: none; width: min(100%, 360px); }

@media (max-width: 620px) {
  .es-news-in { padding: 22px; gap: 18px; }
  .es-news-form { width: 100%; }
}

/* ---------- favourites: drop a single line, or burn the hoard ---------- */
.es-line-drop {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 1px solid rgba(201,58,46,.35); border-radius: 9px; cursor: pointer;
  background: rgba(201,58,46,.06); color: var(--es-ember-text); padding: 0;
  transition: background .18s var(--es-ease), color .18s var(--es-ease);
}
.es-line-drop:hover { background: var(--es-ember); color: #FFF6E6; }
.es-line-drop svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.es-line.is-burning { animation: es-burn .9s var(--es-ease) forwards; pointer-events: none; }

/* ---------- consent ---------- */
.es-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--es-cocoa-soft);
  cursor: pointer;
}
.es-consent input {
  flex: none; width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--es-ember); cursor: pointer;
}
.es-consent-warn { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--es-ember-text); }
.es-legal { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--es-cocoa-soft); opacity: .9; }

/* ---------- the series this all comes from ---------- */

.es-series-in {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 26px 28px; border-radius: var(--es-r-lg);
  background: var(--es-glass); border: 1px solid var(--es-glass-edge);
  -webkit-backdrop-filter: var(--es-blur); backdrop-filter: var(--es-blur);
  box-shadow: var(--es-lift);
}
.es-series-ico { width: 72px; height: 72px; flex: none; object-fit: contain; }
.es-series-text { flex: 1; min-width: 260px; }
.es-series-text h2 { margin: 0 0 6px; font-family: var(--es-body); font-size: clamp(17px,2.4vw,20px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.es-series-text p { margin: 0; font-size: 14.5px; color: var(--es-cocoa-soft); max-width: 52ch; }
.es-series-links { display: flex; align-items: center; gap: 18px; flex: none; flex-wrap: wrap; }
.es-series-links .es-add { margin-left: 0; padding: 12px 22px; font-size: 14px; }
.es-series-alt { font-size: 14px; font-weight: 700; color: var(--es-cocoa-soft); }
.es-series-alt:hover { color: var(--es-ember-text); }

/* ============================================================
   SCENE REEL — one framed showcase, not a row of blog thumbnails.
   Slides crossfade in place inside a single fixed frame so the
   section keeps its rhythm instead of growing into a wall of images.
   ============================================================ */
.es-source-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,340px);
  gap: 24px; align-items: stretch;
}

.es-reel {
  position: relative; border-radius: var(--es-r-lg);
  overflow: hidden; background: #0E0C09;
  border: 1px solid rgba(199,154,92,.22);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.es-reel-track { position: relative; aspect-ratio: 4/3; height: 100%; }
.es-reel-item {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1s var(--es-ease), transform 6s linear;
}
.es-reel-item.is-on { opacity: 1; transform: scale(1); }
.es-reel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a soft vignette so the frame edge reads as intentional, not a crop */
.es-reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.es-reel-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
  display: flex; justify-content: center; gap: 6px;
}
.es-reel-dots button {
  width: 22px; height: 3px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(237,228,211,.3); padding: 0;
  transition: background .3s var(--es-ease), width .3s var(--es-ease);
}
.es-reel-dots button.is-on { background: var(--es-ember); width: 34px; }
@media (prefers-reduced-motion: reduce) {
  .es-reel-item { transition: opacity .3s; transform: none; }
  .es-reel-item.is-on { transform: none; }
}

/* ============================================================
   KAMP ATEŞİ — moderated community notes
   ============================================================ */
.es-campfire { padding: 0 0 72px; }
.es-campfire-head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.es-campfire-ico { width: 64px; height: 64px; flex: none; object-fit: contain; }
.es-campfire-title { margin: 0 0 8px; font-family: var(--es-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); text-transform: uppercase; }
.es-campfire-lead { margin: 0; max-width: 60ch; color: var(--es-cocoa-soft); font-size: 15px; line-height: 1.6; }

.es-campfire-feed { display: grid; gap: 12px; margin-bottom: 26px; max-height: 420px; overflow-y: auto; }
.es-campfire-empty { padding: 20px; text-align: center; color: var(--es-cocoa-soft); font-size: 14px; border: 1px dashed var(--es-glass-edge); border-radius: 14px; }
.es-campfire-note-card { padding: 14px 16px; border-radius: 14px; background: var(--es-glass); border: 1px solid var(--es-glass-edge); }
.es-campfire-note-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.es-campfire-nick { font-weight: 800; font-size: 13.5px; color: var(--es-ember-text); }
.es-campfire-time { font-size: 11px; color: var(--es-cocoa-soft); opacity: .8; }
.es-campfire-note-card p { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

.es-campfire-form {
  max-width: 560px; padding: 22px 24px; border-radius: var(--es-r-lg);
  background: var(--es-vellum-2); border: 1px solid rgba(237,228,211,.12); box-shadow: 0 14px 40px rgba(0,0,0,.4);
}
.es-campfire-row { margin-bottom: 10px; }
.es-campfire-row .es-input { width: 100%; }
.es-campfire-textarea {
  display: block; width: 100%; min-height: 84px; resize: vertical;
  border-radius: 14px; margin-bottom: 12px; font-family: inherit;
}
.es-campfire-msg { margin: 10px 0 0; font-size: 13px; font-weight: 700; }
.es-campfire-msg.is-err { color: var(--es-ember-text); }
.es-campfire-msg.is-ok { color: #5CB876; }
.es-campfire-form .es-add { margin: 14px 0 0; }
.es-campfire-note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--es-cocoa-soft); }

@media (max-width: 620px) {
  .es-campfire-head { flex-direction: column; gap: 12px; }
  .es-campfire-form { padding: 18px; }
}
@media (max-width: 620px) { .es-series-in { padding: 22px; gap: 18px; } }

/* ============================================================
   NAV / CATALOGUE / VIEWER / SPECS  — restructured site
   ============================================================ */
.es-nav { display: flex; gap: 4px; margin-left: auto; }
.es-nav a {
  padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--es-cocoa-soft);
  transition: color .18s var(--es-ease), background .18s var(--es-ease);
}
.es-nav a:hover { color: var(--es-cocoa); background: rgba(33,30,23,.6); }
.es-crumb { margin-right: 0; }
.es-crumb-txt { padding-left: 16px; margin-right: auto; border-left: 1px solid rgba(237,228,211,.13);
  font-family: var(--es-body); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--es-ember-text); }

/* ---------- catalogue ---------- */
.es-catalog { padding: 72px 0 10px; }
.es-catalog-title { margin: 0 0 10px; font-family: var(--es-display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; text-transform: uppercase; }
.es-catalog-lead { margin: 0 0 26px; max-width: 62ch; color: var(--es-cocoa-soft); }

.es-searchbar {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 8px 18px 8px 14px; border-radius: 999px; margin-bottom: 18px;
  background: var(--es-glass-deep); border: 1px solid var(--es-glass-edge);
  -webkit-backdrop-filter: var(--es-blur); backdrop-filter: var(--es-blur);
  box-shadow: var(--es-lift);
  transition: box-shadow .3s var(--es-ease), border-color .3s var(--es-ease);
}
.es-searchbar:focus-within { box-shadow: var(--es-lift-hi); border-color: var(--es-ember); }
.es-search-ico { width: 28px; height: 28px; flex: none; object-fit: contain; opacity: .85; }
.es-search {
  flex: 1; min-width: 0; padding: 12px 0; border: 0; background: none;
  font: inherit; font-size: 16px; color: var(--es-cocoa);
}
.es-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(214,72,58,.3); border-radius: 999px; }
.es-search::placeholder { color: var(--es-cocoa-soft); opacity: .7; }
.es-search-count { flex: none; font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--es-cocoa-soft); }
.es-search-count b { font-weight: 800; color: var(--es-cocoa); }

.es-filters { display: grid; gap: 10px; margin-bottom: 26px; }
.es-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.es-filter-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--es-cocoa-soft); min-width: 86px; }
.es-chip {
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 600;
  color: var(--es-cocoa-soft);
  background: var(--es-glass); border: 2px solid transparent;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .16s var(--es-ease), color .16s var(--es-ease), border-color .16s var(--es-ease), box-shadow .16s var(--es-ease);
}
.es-chip:hover { transform: translateY(-1px); color: var(--es-cocoa); border-color: var(--es-ember); background: rgba(214,72,58,.1); }
.es-chip:active { transform: translateY(1px); }
.es-chip.is-on { background: var(--es-ember); color: #FFF6EC; border-color: var(--es-ember); box-shadow: none; }

.es-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0 0 8px; padding: 0; }
.es-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--es-vellum-2); border: 1px solid rgba(237,228,211,.12); border-radius: var(--es-r-lg);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .22s var(--es-ease), box-shadow .22s var(--es-ease), border-color .22s var(--es-ease);
}
.es-card:hover, .es-card:focus-within, .es-card:active {
  transform: translateY(-4px);
  border-color: rgba(214,72,58,.5);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.es-card-art { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--es-vellum-2); }

/* second photo slides UP over the first from fully outside the frame.
   It is opaque and covers completely, so at no point are two images
   blended on top of each other — that overlay ghosting was the bug. */
.es-card-b {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  background: var(--es-vellum-2);
  transform: translateY(100%);
  transition: transform .42s var(--es-ease);
}
@media (hover: hover) {
  .es-card:hover .es-card-b,
  .es-card:focus-within .es-card-b { transform: translateY(0); }
}
/* keyboard focus should still work on touch/hybrid devices */
.es-card:focus-within .es-card-b { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .es-card-b { transition: none; } }
.es-card-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  /* uploaded product photos sometimes carry a thin white studio border.
     A hair of scale crops that edge off so no photo can show a white
     frame against the dark card, whatever gets uploaded later. */
  transform: scale(1.04);
}
.es-card-flag {
  position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 12px; border-radius: 999px;
  background: rgba(10,8,6,.82); color: #F0E7D6; border: 1px solid rgba(237,228,211,.22);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.es-card.is-tukendi .es-card-art img { filter: grayscale(.85) brightness(.95); }
.es-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.es-card-name { margin: 0 0 3px; font-family: var(--es-body); font-weight: 800; font-size: 15px;
  line-height: 1.25; text-transform: uppercase; letter-spacing: -.005em; }
.es-card-sub { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--es-cocoa-soft); }
.es-card-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.es-buy-btn { display: inline-flex; align-items: center; gap: 8px; }
.es-buy-ico { width: 18px; height: 18px; object-fit: contain; }
a.es-add { text-decoration: none; }
.es-empty { margin: 30px 0 0; padding: 34px; text-align: center; color: var(--es-cocoa-soft);
  border: 1px dashed var(--es-glass-edge); border-radius: var(--es-r-lg); }

/* ---------- print spec accordion ---------- */
.es-spec-toggle {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  padding: 11px 18px; border-radius: 999px; cursor: pointer;
  background: var(--es-glass); border: 1px solid var(--es-glass-edge); color: var(--es-cocoa);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 13.5px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .2s var(--es-ease), border-color .2s var(--es-ease);
}
.es-spec-toggle:hover { transform: translateY(-1px); border-color: var(--es-brass); }
.es-spec-caret { transition: transform .3s var(--es-ease); font-size: 11px; }
.es-spec-toggle[aria-expanded="true"] .es-spec-caret { transform: rotate(180deg); }
.es-spec-panel { margin: 0 0 24px; animation: es-arrive .45s var(--es-ease) both; }
.es-spec li { align-items: center; gap: 12px; }
.es-spec-note { margin: 10px 2px 0; font-size: 12.5px; color: var(--es-cocoa-soft); }

/* ---------- favourites: send list ---------- */
.es-fav-send { margin-bottom: 16px; }
.es-line-blank { width: 44px; height: 44px; flex: none; border-radius: 8px; background: var(--es-vellum-2); }

@media (max-width: 1080px) { .es-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .es-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 620px)  {
  .es-nav { display: none; }
  .es-filter-label { min-width: 100%; }
  .es-catalog { padding-top: 30px; }
  .es-searchbar { padding: 10px 18px 10px 14px; }
  .es-filters { gap: 14px; margin-bottom: 30px; }
  .es-filter-row { gap: 10px; }
  .es-chip { padding: 9px 16px; }
}
@media (max-width: 480px) {
  /* one card at a time reads calmer than two squeezed ones */
  .es-cards { grid-template-columns: 1fr; gap: 18px; }
  .es-card-body { padding: 16px 18px 18px; }
  .es-card-name { font-size: 16px; }
  .es-card-sub { font-size: 12.5px; }
}

/* ============================================================
   FIXES + POLISH
   ============================================================ */
/* anchors styled as buttons were losing their colour to the base a{} rule.
   Explicit cream, NOT var(--es-vellum) — that token means "page background"
   and inverted to near-black when the theme went dark, making every button
   label invisible. Button text colour must never depend on it. */
body.es-page a.es-add,
body.es-page a.es-cta,
body.es-page a.es-buy-btn { color: #FFF6EC; }
body.es-page a.es-add:hover { color: #FFF; }

/* header: breathing room and one obvious call to action */
.es-header-in { gap: 12px; flex-wrap: wrap; row-gap: 10px; }
.es-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-left: auto;
  height: 40px; padding: 0 22px; border-radius: 999px;
  background: var(--es-ember); color: #FFF6EC;
  border: none;
  font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  transition: transform .16s var(--es-ease), background .16s var(--es-ease);
}
.es-cta:hover, .es-cta:focus-visible { transform: translateY(-2px); background: #E0574A; }
.es-cta:active { transform: translateY(1px); }
.es-cta .es-ico { width: 20px; height: 20px; }
.es-tool--mail .es-label { font-weight: 600; }

/* ---------- newsletter modal ---------- */
.es-modal {
  position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 5vmin;
  background: rgba(38,25,58,.4);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
  opacity: 0; transition: opacity .3s var(--es-ease);
}
.es-modal[hidden] { display: none; }
.es-modal.is-on { opacity: 1; }
.es-modal-card {
  position: relative; width: min(100%, 470px); padding: 34px 34px 30px; border-radius: var(--es-r-lg);
  background: var(--es-vellum-2); border: 1px solid rgba(237,228,211,.14);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  transform: translateY(14px) scale(.97); opacity: 0;
  transition: transform .42s var(--es-ease), opacity .32s var(--es-ease);
}
.es-modal.is-on .es-modal-card { transform: none; opacity: 1; }
.es-modal-close { position: absolute; top: 16px; right: 16px; margin: 0; }
.es-modal-ico { width: 62px; height: 62px; object-fit: contain; margin-bottom: 14px; }
.es-modal-card h2 { margin: 0 0 8px; font-family: var(--es-body); font-size: 21px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.es-modal-card p { margin: 0 0 18px; font-size: 14.5px; color: var(--es-cocoa-soft); }

/* ---------- catalogue arrival ---------- */
.es-catalog-title { view-transition-name: catalog-title; }
@keyframes es-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.es-cards > li { animation: es-rise .5s var(--es-ease) both; }
.es-cards > li:nth-child(1){animation-delay:.02s}.es-cards > li:nth-child(2){animation-delay:.06s}
.es-cards > li:nth-child(3){animation-delay:.1s}.es-cards > li:nth-child(4){animation-delay:.14s}
.es-cards > li:nth-child(5){animation-delay:.18s}.es-cards > li:nth-child(6){animation-delay:.22s}
.es-cards > li:nth-child(n+7){animation-delay:.26s}

@media (prefers-reduced-motion: reduce) { .es-cards > li { animation: none; } }
@media (max-width: 760px) {
  .es-cta span { display: none; }
  .es-cta { padding: 0 14px; margin-left: auto; }
  .es-crumb img { height: 24px; }
}

/* readable disabled buttons: grey out, don't go dark-on-dark */
.es-add:disabled, .es-add[disabled], .es-buy-btn:disabled {
  background: rgba(237,228,211,.10) !important;
  color: rgba(237,228,211,.55) !important;
  border: 1px solid rgba(237,228,211,.16);
  box-shadow: none !important;
  cursor: not-allowed;
}
body.ris-page .es-add:disabled, body.ris-page .es-add[disabled] {
  background: rgba(43,33,24,.09) !important; color: rgba(43,33,24,.55) !important;
  border-color: rgba(43,33,24,.14);
}

/* ---------- footer: survives every width, no bold pile-up ---------- */
.es-footer-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 22px; }
.es-footer-links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 600; }
.es-footer-links a { font-size: 13.5px; white-space: nowrap; }
.es-legal-line {
  grid-column: 1 / -1; margin: 4px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(237,228,211,.13);
  font-size: 11.5px; line-height: 1.7; font-weight: 400; color: var(--es-cocoa-soft);
}
.es-legal-line a { text-decoration: underline; text-underline-offset: 2px; }
.es-legal-line span { white-space: nowrap; }
@media (max-width: 760px) {
  .es-footer-in { grid-template-columns: 1fr; justify-items: start; gap: 12px; }
  .es-footer-links { gap: 8px 14px; }
  .es-footer-links a { font-size: 13px; }
}

/* ---------- universal fluid scaling ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.es-page { overflow-x: hidden; }
.es-shell { padding-inline: max(0px, env(safe-area-inset-left)); }
img, svg, video { max-width: 100%; }
@supports (height: 100dvh) { .es-lens, .es-modal, .es-cine { min-height: 100dvh; } }

/* ---------- paper grain: a whisper of texture over everything ---------- */
body.es-page::after {
  content: ""; position: fixed; inset: 0; z-index: 400; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.35'/></svg>");
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { body.es-page::after { opacity: .03; } }

/* ---------- magnetic-feeling primary actions (restraint: only the big ones) ---------- */
.es-cta, .es-add, .es-buy-btn { will-change: transform; }

/* ---------- scroll-paced reveals where the browser supports it ----------
   Desktop/tablet only — on phones this is one more animation stacked on
   top of everything else happening during a scroll, for a purely
   decorative effect. Mobile keeps the plain one-time fade-in above. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    /* ".es-cards > .es-card" (not just ".es-card") so this beats the
       plain ".es-cards > li" load-in animation above on specificity —
       without that, product cards silently never got this scroll-
       linked reveal at all, even in browsers that support it */
    .es-cards > .es-card, .es-also-item, .es-series-in {
      animation: es-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    .es-cards > li { animation-delay: 0s; }
  }
}

/* ---------- new arrivals ---------- */
.es-card-new {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 7px; border-radius: 999px;
  background: linear-gradient(180deg, var(--es-ember), var(--es-ember-deep)); color: #FFF6E6;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(0,0,0,.28);
  animation: es-newpulse 3.6s var(--es-ease) infinite;
}
.es-card-new img { width: 15px; height: 15px; object-fit: contain; }
@keyframes es-newpulse {
  0%, 84%, 100% { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(0,0,0,.28); }
  90% { transform: translateY(-2px) rotate(-2deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px rgba(0,0,0,.36); }
}
.es-card .es-fav { top: 10px; right: 10px; }
.es-card-new ~ .es-fav, .es-card:has(.es-card-new) .es-fav { top: 48px; }
@media (prefers-reduced-motion: reduce) { .es-card-new { animation: none; } }

.es-ipcat { padding: 40px 0 10px; }
.es-ipcat .es-searchbar { margin-bottom: 14px; }
/* the "new" ribbon and the heart must not stack */
.es-card-new { right: 52px; }

/* ---------- each IP carries its own accent (feeds the hover shadow above) ---------- */
.es-card.ip-ejder-sofrasi { --accent: var(--es-ember); }
.es-card.ip-raw-input { --accent: var(--es-tangerine); }

/* ---------- empty state suggestions ---------- */
.es-empty-picks { display: block; margin-top: 12px; font-size: 14px; }
.es-empty-picks a { color: var(--es-ember-text); font-weight: 700; }

/* ---------- keyboard hint ---------- */
.es-keys { margin: 18px 0 0; font-size: 12px; color: var(--es-cocoa-soft); }
.es-keys kbd { display: inline-block; padding: 2px 7px; margin: 0 2px; border-radius: 6px;
  background: var(--es-vellum-3); border: 1px solid var(--es-glass-edge);
  font-family: var(--es-mono); font-size: 11px; }

/* ---------- announcements ---------- */
.es-news-item { padding: 16px 0; border-bottom: 1px solid rgba(237,228,211,.13); }
.es-news-item time { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--es-brass); margin-bottom: 5px; }
.es-news-item h3 { margin: 0 0 6px; font-family: var(--es-body); font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.es-news-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--es-cocoa-soft); }

/* ---------- sale ---------- */
.es-card-sale {
  position: absolute; top: 12px; right: 52px; z-index: 3;
  padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(180deg, #1F6B3A, #14522B); color: #F1FBF2;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(20,82,43,.32);
}
.es-price s { opacity: .5; font-weight: 600; margin-right: 5px; }

/* ---------- shortcut plate ---------- */
.es-keyplate {
  position: fixed; left: 18px; top: 84px; z-index: 70;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; border-radius: var(--es-r); max-width: 220px;
  background: rgba(33,30,23,.68);
  border: 1px solid var(--es-glass-edge);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  opacity: .55; transition: opacity .3s var(--es-ease), transform .3s var(--es-ease);
}
.es-keyplate:hover { opacity: 1; transform: translateY(-1px); }
.es-keyplate-head { display: flex; align-items: center; gap: 8px; }
.es-keyplate-head b { flex: 1; font-size: 10px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--es-cocoa-soft); }
.es-keyplate button { width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--es-glass-edge); border-radius: 6px; background: var(--es-vellum-3);
  color: var(--es-cocoa-soft); font-size: 12px; line-height: 1; }
.es-keyplate button:hover { background: var(--es-ember); color: #FFF6EC; }
.es-keyplate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.es-keyplate li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--es-cocoa-soft); }
.es-keyplate kbd { min-width: 20px; text-align: center; padding: 2px 5px; border-radius: 5px;
  background: var(--es-vellum-3); border: 1px solid var(--es-glass-edge);
  font-family: var(--es-mono); font-size: 10.5px; color: var(--es-cocoa); }
.es-keyplate.is-min ul { display: none; }
.es-keyplate.is-min { max-width: none; }
@media (max-width: 900px) { .es-keyplate { display: none; } }

/* the source block needs air above it */
.es-series { padding: 72px 0 72px; }
.es-ipcat { padding: 40px 0 40px; }

/* ---------- gallery ---------- */
.es-gal { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.es-gal-t { padding: 0; border: 2px solid transparent; border-radius: 12px; cursor: pointer;
  background: var(--es-vellum-2); overflow: hidden; line-height: 0;
  transition: border-color .2s var(--es-ease), transform .2s var(--es-ease); }
.es-gal-t img { width: 68px; height: 68px; object-fit: cover; }
.es-gal-t:hover { transform: translateY(-2px); }
.es-gal-t.is-on { border-color: var(--es-ember); }

/* ---------- share ---------- */
.es-share { padding: 11px 18px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 700;
  color: var(--es-cocoa); background: var(--es-glass); border: 1px solid var(--es-glass-edge);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7); transition: transform .2s var(--es-ease), border-color .2s var(--es-ease); }
.es-share:hover { transform: translateY(-1px); border-color: var(--es-brass); }


/* ---------- sticky buy bar on phones ---------- */
@media (max-width: 620px) {
  .es-detail .es-buy { position: sticky; bottom: 12px; z-index: 20;
    background: rgba(33,30,23,.9);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 -2px 30px rgba(0,0,0,.16); }
  .es-share { display: none; }
}

/* ---------- skeletons while the catalogue loads ---------- */
.es-cards.is-loading { display: grid; }
.es-skel { border-radius: 18px; overflow: hidden; background: var(--es-glass);
  border: 1px solid var(--es-glass-edge); }
.es-skel span { display: block; background: linear-gradient(100deg,
  rgba(237,228,211,.13) 20%, rgba(237,228,211,.13) 40%, rgba(237,228,211,.13) 60%);
  background-size: 240% 100%; animation: es-shim 1.5s linear infinite; }
.es-skel .a { aspect-ratio: 1; }
.es-skel .b { height: 14px; margin: 14px 16px 8px; border-radius: 6px; }
.es-skel .c { height: 11px; margin: 0 16px 18px; width: 55%; border-radius: 6px; }
@keyframes es-shim { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .es-skel span { animation: none; } }

/* ============================================================
   NEFES — ürün sayfasında her şey birbirine değiyordu
   ============================================================ */
.es-detail { padding: 40px 0 20px; }
.es-detail-grid { gap: 56px; align-items: start; }
.es-detail .es-detail-class { margin-bottom: 14px; }
.es-detail .es-detail-name { margin-bottom: 18px; line-height: 1.14; }
.es-detail .es-detail-line { margin-bottom: 34px; font-size: 16.5px; line-height: 1.7; }
.es-detail .es-buy { padding: 22px 24px; margin-bottom: 32px; gap: 18px; border-radius: var(--es-r-lg); }

.es-detail .es-spec-toggle { margin-bottom: 22px; }
.es-detail .es-spec-panel { margin-bottom: 30px; }
.es-detail .es-stock { margin: 0 0 34px; padding: 16px 20px; }
.es-gal { gap: 12px; margin-top: 18px; }
.es-also { padding: 20px 0 84px; }
.es-also .es-section-head { margin-bottom: 26px; }
.es-crumbs { margin-bottom: 28px; }

/* the live-store note reads as good news, not a warning */
.es-stock--live { background: rgba(31,107,58,.08); border-left-color: #1F6B3A; }
.es-stock--live a { color: #14522B; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .es-detail-grid { gap: 34px; }
  .es-detail .es-buy { padding: 18px; gap: 14px; }
}

/* how many products sit behind each filter */
.es-chip i { font-style: normal; font-size: 11px; font-weight: 800; opacity: .55; margin-left: 3px; }
.es-chip.is-on i { opacity: .75; }
.es-filter-row[hidden] { display: none; }

/* ---------- take your hoard with you ---------- */
.es-fav-send { margin-bottom: 16px; }
.es-fav-send-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--es-cocoa-soft); }
.es-fav-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.es-fav-acts .es-add { margin-left: 0; flex: 1; min-width: 150px; text-align: center; }
.es-fav-acts .es-share { flex: 1; min-width: 130px; }

/* ============================================================
   MOBILE RAILS — when boxes don't comfortably fit side by side,
   they become a bled, snap-scrolling swipe row instead of a
   cramped grid. This is the same pattern big product sites use
   for "related items" rows.
   ============================================================ */
@media (max-width: 760px) {
  .es-also-list {
    display: flex; flex-wrap: nowrap; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    margin: 0 -20px; padding: 4px 20px 12px;
  }
  .es-also-list::-webkit-scrollbar { display: none; }
  .es-also-list .es-also-item {
    flex: 0 0 auto; width: 78vw; max-width: 340px; scroll-snap-align: start;
  }

  /* a soft fade at the trailing edge hints there is more to see */
  .es-rail-wrap { position: relative; }
  .es-rail-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 14px; width: 28px;
    background: linear-gradient(90deg, transparent, var(--es-vellum) 88%);
    pointer-events: none;
  }
}

/* ============================================================
   ENTRANCE REVEALS
   Applied by JS only (class added at runtime), so if scripting is
   off nothing is ever left invisible.
   ============================================================ */
.will-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--es-ease), transform .7s var(--es-ease);
}
.will-reveal.is-revealed { opacity: 1; transform: none; }
.will-reveal[data-reveal="2"] { transition-delay: .08s; }
.will-reveal[data-reveal="3"] { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .es-source-row { grid-template-columns: 1fr; gap: 18px; }
  .es-reel { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* ============================================================
   VERY NARROW PHONES (≤380px)
   The single-row constraints set at 620px get tight here, so the
   rows are allowed to breathe again rather than squeezing labels.
   ============================================================ */
@media (max-width: 380px) {
  .es-quiz { padding: 20px 15px 24px; }
  .es-quiz-share-btn { padding: 10px 6px; font-size: 12px; gap: 5px; }
  .es-quiz-share-btn svg { width: 15px; height: 15px; }
  .es-quiz-result-actions { flex-wrap: wrap; }
  .es-quiz-result-actions .es-add,
  .es-quiz-result-actions .es-quiz-retry-btn { flex: 1 1 100%; }
  .es-quiz-notify .es-notify-row { flex-wrap: wrap; }
  .es-quiz-notify .es-notify-row .es-input { flex: 1 1 100%; }
  .es-quiz-notify .es-notify-row .es-add { flex: 1 1 100%; }
  .es-deck { width: 136px; height: 245px; }
  .es-deck-card { width: 136px; height: 245px; }
  .es-quiz-result-art { width: 112px; }
  .es-campfire-form { padding: 16px 14px; }
  .es-tool { padding: 0 10px; }
}

/* nothing may push the page sideways */
html, body { overflow-x: hidden; }