/* Generated by server/scripts/build-css.js from wm-shell.css, wm-extra.css, wm-premium.css — edit those, then rebuild. */
/* ---- wm-shell.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — global kabuk bileşenleri
   Mega menü · komut paleti (Ctrl+K) · mini sepet çekmecesi
   Üç bileşen de her sayfada yüklenir; wm-shell.js kurar.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Mega menü ════════════════════════════════════════════════ */
/* Nav'daki "Shop" bağlantısının altından açılır. Solda kategori
   sütunları, sağda gerçekten stokta olan iki ürün. */
/* Toggled with `display`, like the palette and the drawer: an opacity /
   visibility transition leaves the panel in the layout while closed, and the
   discrete `visibility` step made the open state unreliable. */
.wm-mega{
  position: absolute; left: 0; right: 0; top: 100%; z-index: 39; display: none;
  background: var(--wm-k-raise); border-bottom: 1px solid var(--wm-line);
  box-shadow: var(--wm-sh-card);
}
.wm-mega[data-open="1"]{ display: block; animation: wm-mega-in .16s ease; }
@keyframes wm-mega-in{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: none; } }
.wm-mega__in{
  max-width: var(--wm-max); margin: 0 auto; padding: 22px var(--wm-gut) 24px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 320px; gap: 0;
}
.wm-mega__col{ padding-right: 24px; border-right: 1px solid var(--wm-line); }
.wm-mega__col:nth-child(3){ border-right: 0; }
.wm-mega__col + .wm-mega__col{ padding-left: 24px; }
.wm-mega h5{
  margin: 0 0 12px; color: var(--wm-y);
  font-size: var(--wm-t5); font-weight: 900;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-mega a{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 9px; margin-left: -9px; border-radius: var(--wm-r-s);
  color: var(--wm-w); text-decoration: none; font-size: var(--wm-t3); font-weight: 700;
  transition: background var(--wm-fast), color var(--wm-fast);
}
.wm-mega a:hover{ background: var(--wm-y-soft); color: var(--wm-y); }
.wm-mega a span{ color: var(--wm-g-dim); font-size: var(--wm-t5); font-weight: 800; }
.wm-mega a:hover span{ color: var(--wm-y); }
.wm-mega__all{ color: var(--wm-y) !important; font-weight: 900 !important; }

.wm-mega__side{
  padding-left: 24px; border-left: 1px solid var(--wm-line);
  background: var(--wm-k-sink); margin: -22px calc(-1 * var(--wm-gut)) -24px 0;
  padding-block: 22px 24px; padding-right: var(--wm-gut);
}
.wm-mega__pick{
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--wm-line); text-decoration: none; color: var(--wm-w);
}
.wm-mega__pick:first-of-type{ border-top: 0; }
.wm-mega__pick i{
  width: 46px; height: 46px; flex: none; overflow: hidden; font-style: normal;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  display: grid; place-items: center; color: var(--wm-g-dim);
}
.wm-mega__pick i img{ width: 100%; height: 100%; object-fit: cover; }
.wm-mega__pick i .glyph-ph{ width: 20px; height: 20px; }
.wm-mega__pick b{ display: block; font-size: var(--wm-t3); font-weight: 800; }
.wm-mega__pick s{
  display: block; margin-top: 3px; text-decoration: none; color: var(--wm-y);
  font-family: var(--wm-display); font-weight: 400; font-size: var(--wm-t1);
}
.wm-mega__pick:hover b{ color: var(--wm-y); }

/* Below the nav's collapse point the Shop link is inside the hamburger, so
   the panel has nothing to hang from. Repeats the open selector so it still
   outranks it. */
@media (max-width: 1120px){ .wm-mega, .wm-mega[data-open="1"]{ display: none; } }

/* ═══ Komut paleti (Ctrl+K) ════════════════════════════════════ */
/* Katmanlar: canlı destek başlatıcısı (950) ve satış kartı dahil her yüzen
   öğenin üstünde; toast (1300) ve paket teklifi penceresi (1150) üstte kalır. */
.wm-cmd{
  position: fixed; inset: 0; z-index: 1000; display: none;
  padding: 12vh 20px 20px;
}
.wm-cmd[data-open="1"]{ display: block; }
.wm-cmd__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.74); }
.wm-cmd__modal{
  position: relative; max-width: 620px; margin: 0 auto; overflow: hidden;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line-2);
  border-radius: var(--wm-r-l); box-shadow: var(--wm-sh-card);
  animation: wm-cmd-in .18s ease;
}
@keyframes wm-cmd-in{ from{ opacity: 0; transform: translateY(-10px); } to{ opacity: 1; transform: none; } }

.wm-cmd__field{
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  border-bottom: 1px solid var(--wm-line);
}
.wm-cmd__field svg{ width: 17px; height: 17px; color: var(--wm-g-dim); flex: none; }
.wm-cmd__field input{
  flex: 1; height: 58px; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--wm-w);
  font-family: var(--wm-body); font-size: var(--wm-t1); font-weight: 600;
}
/* Genel alan kuralları (wm-premium.css) alanın içine ikinci bir kutu,
   odakta da sarı halka çiziyordu; satırın kendisi zaten alan. */
.wm-cmd__field input, .wm-cmd__field input:focus{ outline: 0; border: 0; background: none; box-shadow: none; }
.wm-cmd__field input::placeholder{ color: var(--wm-g-dim); }
/* Chromium'un type="search" için çizdiği mavi "×" paletin dışında kalıyor;
   sitedeki diğer arama alanlarında da gizli (wm-extra, wm-page, wm-status). */
.wm-cmd__field input::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; display: none; }
/* iOS 16px altındaki alana odaklanınca sayfayı yakınlaştırır. */
@media (max-width: 620px){ .wm-cmd__field input{ font-size: 16px; } }
.wm-cmd__esc{
  flex: none; padding: 3px 7px; border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-xs);
  color: var(--wm-g-dim); font-size: 9px; font-weight: 800; letter-spacing: .08em;
}

.wm-cmd__results{ max-height: 46vh; overflow-y: auto; padding: 8px; }
.wm-cmd__group{
  padding: 10px 10px 6px; color: var(--wm-g-dim);
  font-size: var(--wm-t5); font-weight: 900;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-cmd__row{
  display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  border-radius: var(--wm-r-s); text-decoration: none; color: var(--wm-w);
}
.wm-cmd__row.is-active{ background: var(--wm-y-soft); box-shadow: var(--wm-ring-in); }
.wm-cmd__row i{
  width: 38px; height: 38px; flex: none; overflow: hidden; font-style: normal;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r-xs);
  display: grid; place-items: center; color: var(--wm-g-dim);
}
.wm-cmd__row i img{ width: 100%; height: 100%; object-fit: cover; }
.wm-cmd__row i .glyph-ph{ width: 18px; height: 18px; }
.wm-cmd__row .wm-cmd__b{ min-width: 0; }
.wm-cmd__row b{ display: block; font-size: var(--wm-t3); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-cmd__row s{
  display: block; margin-top: 2px; text-decoration: none; color: var(--wm-g-dim);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-cmd__row .wm-cmd__p{
  margin-left: auto; flex: none;
  font-family: var(--wm-display); font-weight: 400; font-size: var(--wm-t1); color: var(--wm-y);
}
.wm-cmd__row.is-active b{ color: var(--wm-y); }
.wm-cmd__empty{ padding: 32px 12px; text-align: center; color: var(--wm-g); font-size: var(--wm-t3); }

.wm-cmd__foot{
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--wm-line); background: var(--wm-k-sink);
}
.wm-cmd__hint{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--wm-g-dim); font-size: var(--wm-t5); font-weight: 700;
}
.wm-cmd__hint kbd{
  padding: 2px 6px; border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-xs);
  background: var(--wm-k-raise); color: var(--wm-g);
  font-family: var(--wm-body); font-size: 9px; font-weight: 800;
}

/* ═══ Mini sepet çekmecesi ═════════════════════════════════════ */
/* Başlatıcının (950) üstünde: telefonda Checkout düğmelerini örtüyordu. */
.wm-mini{ position: fixed; inset: 0; z-index: 1000; display: none; }
.wm-mini[data-open="1"]{ display: block; }
.wm-mini__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.wm-mini__panel{
  position: absolute; top: 0; right: 0; bottom: 0; width: min(392px, 92vw);
  display: flex; flex-direction: column;
  background: var(--wm-k-raise); border-left: 1px solid var(--wm-line-2);
  animation: wm-mini-in .22s cubic-bezier(.4,0,.2,1);
}
@keyframes wm-mini-in{ from{ transform: translateX(100%); } to{ transform: none; } }

.wm-mini__head{
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--wm-line);
}
.wm-mini__head h3{
  margin: 0; font-family: var(--wm-display); font-weight: 400; font-size: 22px;
  letter-spacing: var(--wm-track-d); text-transform: uppercase; color: var(--wm-w);
}
.wm-mini__count{
  padding: 3px 9px; border-radius: var(--wm-r-pill);
  background: var(--wm-y); color: var(--wm-on-y);
  font-size: var(--wm-t5); font-weight: 900;
}
.wm-mini__close{
  margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  color: var(--wm-g); cursor: pointer; font-size: 15px; line-height: 1;
}
.wm-mini__close:hover{ color: var(--wm-y); border-color: var(--wm-y-line); }

.wm-mini__body{ flex: 1; overflow-y: auto; padding: 14px 16px; }
.wm-mini__line{
  display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--wm-line);
}
.wm-mini__shot{
  width: 58px; height: 58px; flex: none; overflow: hidden;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  display: grid; place-items: center; color: var(--wm-g-dim);
}
.wm-mini__shot img{ width: 100%; height: 100%; object-fit: cover; }
.wm-mini__shot .glyph-ph{ width: 22px; height: 22px; }
.wm-mini__info{ flex: 1; min-width: 0; }
.wm-mini__name{
  display: block; color: var(--wm-w); text-decoration: none;
  font-size: var(--wm-t3); font-weight: 800; line-height: 1.35;
}
.wm-mini__name:hover{ color: var(--wm-y); }
.wm-mini__plan{
  display: block; margin-top: 3px; color: var(--wm-g-dim);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-mini__row{ display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.wm-mini__qty{ display: flex; border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-pill); overflow: hidden; }
.wm-mini__qty button{
  width: 28px; height: 28px; background: var(--wm-k-sink); border: 0; cursor: pointer;
  color: var(--wm-g); font-size: var(--wm-t3);
}
.wm-mini__qty button:hover{ color: var(--wm-y); }
.wm-mini__qty b{
  width: 32px; display: grid; place-items: center; background: var(--wm-k-sink);
  font-size: var(--wm-t5); font-weight: 800;
}
.wm-mini__price{
  margin-left: auto; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-t1); color: var(--wm-y);
}
.wm-mini__rm{
  background: none; border: 0; cursor: pointer; color: var(--wm-g-dim);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-mini__rm:hover{ color: var(--wm-bad); }
.wm-mini__empty{ padding: 60px 16px; text-align: center; color: var(--wm-g); }
.wm-mini__empty svg{ width: 34px; height: 34px; color: var(--wm-g-dim); margin: 0 auto 14px; }

.wm-mini__foot{ padding: 16px; border-top: 1px solid var(--wm-line); background: var(--wm-k-sink); }
.wm-mini__total{
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;
}
.wm-mini__total span{
  color: var(--wm-g); font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-mini__total b{ font-family: var(--wm-display); font-weight: 400; font-size: 28px; color: var(--wm-y); }
.wm-mini__acts{ display: grid; gap: 9px; }
.wm-mini__acts .wm-btn{ width: 100%; height: 46px; }
.wm-mini__clear{
  width: 100%; margin-top: 12px; background: none; border: 0; cursor: pointer;
  color: var(--wm-g-dim); font-family: var(--wm-body);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-mini__clear:hover{ color: var(--wm-bad); }

/* Sayfa arkası kaydırma kilidi — iki katman da aynı sınıfı kullanır. */
body.wm-locked{ overflow: hidden; }

/* ---- wm-extra.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — tasarım sisteminde eksik kalan iki yüzey:
   arama paleti ve toast. Kurallar DESIGN.md'den; değerler
   yalnızca wm-tokens.css'ten okunur, sabit değer yok.
   ═══════════════════════════════════════════════════════════════ */

.cart-badge.is-zero{ opacity: .45; }

/* ── Arama paleti ─────────────────────────────────────────────── */
.wm-pal{ position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: center; }
.wm-pal[hidden]{ display: none; }
.wm-pal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.wm-pal__box{
  position: relative; z-index: 1; width: min(660px, calc(100vw - 32px));
  margin-top: 10vh; height: max-content; max-height: 74vh; display: flex; flex-direction: column;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line-2);
  border-radius: var(--wm-r-l); box-shadow: var(--wm-sh-card); overflow: hidden;
}
.wm-pal__bar{
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--wm-line);
}
.wm-pal__bar svg{ width: 16px; height: 16px; color: var(--wm-g-dim); flex: none; }
.wm-pal__input{
  flex: 1; min-width: 0; background: none; border: 0; color: var(--wm-w);
  font-family: var(--wm-body); font-size: var(--wm-t1); font-weight: 600;
}
.wm-pal__input:focus{ outline: 0; }
.wm-pal__input::placeholder{ color: var(--wm-g-dim); }
.wm-pal__esc{
  flex: none; padding: 4px 8px; background: none; cursor: pointer;
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-xs);
  color: var(--wm-g-dim); font-family: var(--wm-body);
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
}
.wm-pal__esc:hover{ color: var(--wm-w); border-color: var(--wm-line-3); }

.wm-pal__list{ overflow-y: auto; padding: 8px; }
.wm-pal__group{ padding: 8px 8px 4px; }
.wm-pal__group .wm-label{ display: block; margin-bottom: 8px; color: var(--wm-g-dim); }
.wm-pal__chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }

.wm-pal__item{
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: var(--wm-r-s); text-decoration: none;
  transition: background var(--wm-fast);
}
.wm-pal__item:hover, .wm-pal__item.is-sel{ background: var(--wm-k-raise-2); }
.wm-pal__item.is-sel{ box-shadow: var(--wm-ring-in); }
.wm-pal__shot{
  flex: none; width: 46px; height: 34px; border-radius: var(--wm-r-xs);
  overflow: hidden; background: var(--wm-k-sink); display: block;
}
.wm-pal__shot img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-pal__n{
  flex: 1; min-width: 0; color: var(--wm-w);
  font-size: var(--wm-t2); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-pal__n i{
  display: block; font-style: normal; color: var(--wm-g-dim);
  font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase; margin-top: 2px;
}
.wm-pal__p{
  flex: none; color: var(--wm-y);
  font-family: var(--wm-display); font-size: var(--wm-d4); letter-spacing: var(--wm-track-d);
}
.wm-pal__empty{ padding: 34px 16px; text-align: center; color: var(--wm-g); font-size: var(--wm-t2); }

@media (max-width: 620px){
  .wm-pal__box{ margin-top: 0; width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; }
}

/* ── Toast (toast.js) ─────────────────────────────────────────────
   Sticky başlığın hemen altında, sağda; telefonda tam genişlik.
   Alt köşeler canlı destek başlatıcısının, ürün sayfasının sabit
   satın alma çubuğunun ve satış kanıtı kartının — toast oraya inmez.
   --wm-toast-top başlığın alt kenarıdır (toast.js her seferinde ölçer).
   Başarı ve hata yalnız renkle ayrılmaz: hata ünlem simgesi ve görünür
   "Error" etiketi taşır, başarı onay işareti.                        */
.toast-stack{
  position: fixed; z-index: 1300;
  top: calc(var(--wm-toast-top, 0px) + 12px); right: 22px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  width: min(380px, calc(100vw - 44px));
  pointer-events: none;
}
.toast{
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 10px 8px 10px 10px;
  background: var(--wm-k-raise); color: var(--wm-w);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r);
  box-shadow: var(--wm-edge), var(--wm-e3);
  font-size: var(--wm-t3); font-weight: 600; line-height: 1.5;
  pointer-events: auto;
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--wm-med), transform var(--wm-med);
}
.toast.show{ opacity: 1; transform: none; }
.toast-icon{
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  background: var(--wm-y-soft); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-s);
}
.toast-icon svg{ width: 15px; height: 15px; }
.toast.error .toast-icon{ background: var(--wm-bad-soft); color: var(--wm-bad); border-color: var(--wm-bad-line); }
.toast-body{ flex: 1; min-width: 0; padding-block: 5px; overflow-wrap: anywhere; }
.toast-label{
  display: block; margin-bottom: 1px; color: var(--wm-bad);
  font-size: var(--wm-t5); font-weight: 800; line-height: 1.4;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.toast-close{
  flex: none; width: 28px; height: 28px; margin-top: 1px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: var(--wm-r-s); color: var(--wm-g);
  transition: background var(--wm-fast), color var(--wm-fast);
}
.toast-close svg{ width: 14px; height: 14px; }
.toast-close:hover{ background: var(--wm-k-raise-2); color: var(--wm-w); }
/* Mini sepet çekmecesi açıkken toast onun solunda kalır. */
@media (min-width: 900px){
  body:has(.wm-mini[data-open="1"]) .toast-stack{ right: calc(min(392px, 92vw) + 16px); }
}
@media (max-width: 560px){
  .toast-stack{ left: 16px; right: 16px; width: auto; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce){ .toast{ transform: none; } }

/* ── Sepet satırı ─────────────────────────────────────────────
   Eski tema dosyasıyla birlikte kalkan sınıflar; JS bunları
   üretmeye devam ediyor. Değerler yalnızca token'lardan.        */
.cart-table{ display: grid; gap: 10px; }
.cart-row{
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto auto 34px;
  align-items: center; gap: 16px;
  padding: 14px 16px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line);
  border-radius: var(--wm-r);
  transition: border-color var(--wm-fast);
}
.cart-row:hover{ border-color: var(--wm-y-line); }
.cart-item-name a{
  color: var(--wm-w); font-size: var(--wm-t1); font-weight: 800; text-decoration: none;
}
.cart-item-name a:hover{ color: var(--wm-y); }
.cart-item-variant{
  margin-top: 3px; color: var(--wm-g-dim);
  font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.cart-price{
  font-family: var(--wm-display); font-size: var(--wm-d4);
  letter-spacing: var(--wm-track-d); color: var(--wm-y); text-align: right; white-space: nowrap;
}
.cart-price small{ font-family: var(--wm-body); }
.cart-remove{
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--wm-r-pill);
}
.cart-remove svg{ width: 15px; height: 15px; }
.cart-remove:hover{ background: rgba(255,92,92,.10); }

@media (max-width: 720px){
  .cart-row{
    grid-template-columns: 56px minmax(0, 1fr) 34px;
    grid-template-areas: "img info rm" "img qty price";
    row-gap: 12px;
  }
  .cart-thumb{ grid-area: img; width: 56px; height: 56px; }
  .cart-row > div:nth-child(2){ grid-area: info; }
  .cart-row .qty-control{ grid-area: qty; justify-self: start; }
  .cart-price{ grid-area: price; }
  .cart-remove{ grid-area: rm; }
}

/* ── Ödeme yöntemi seçimi ─────────────────────────────────────
   Not: .pay-pill mevcut sistemde küçük ödeme ROZETİ; bu ayrı bir
   bileşen olduğu için kendi adını alır.                            */
.wm-paym{
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; margin-bottom: 8px; padding: 14px 16px; cursor: pointer; text-align: left;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line);
  border-radius: var(--wm-r-s);
  transition: border-color var(--wm-fast), background var(--wm-fast);
}
.wm-paym:hover{ border-color: var(--wm-line-2); }
.wm-paym[aria-pressed="true"]{
  border-color: var(--wm-y); background: var(--wm-y-soft); box-shadow: var(--wm-ring-y);
}
.wm-paym b{ color: var(--wm-w); font-size: var(--wm-t1); font-weight: 800; }
.wm-paym s{
  text-decoration: none; color: var(--wm-g-dim); font-size: var(--wm-t3); font-weight: 600;
}
.wm-paym[aria-pressed="true"] b{ color: var(--wm-y); }

/* ── Nötr not (yeşil .coupon-note yerine) ─────────────────────── */
.wm-note{ color: var(--wm-g-dim); font-size: var(--wm-t3); line-height: 1.6; }

/* ── Numaralı adım listesi ────────────────────────────────────
   Ürün, destek ve onay sayfalarının ortak bileşeni; tanımı
   wm-product.css'ten buraya taşındı (tek tanım).               */
.wm-steplist{ list-style: none; padding: 0; margin: 0; counter-reset: wmstep; }
.wm-steplist li{
  counter-increment: wmstep; position: relative;
  padding: 14px 0 14px 52px; border-bottom: 1px solid var(--wm-line);
}
.wm-steplist li::before{
  content: counter(wmstep, decimal-leading-zero);
  position: absolute; left: 0; top: 12px;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--wm-y-soft); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-pill);
  font-family: var(--wm-display); font-weight: 400; font-size: 13px;
}
.wm-steplist b{
  display: block; color: var(--wm-w); font-size: var(--wm-t1); font-weight: 800; margin-bottom: 3px;
}
.wm-steplist span{ font-size: var(--wm-t3); }
.wm-steplist li:last-child{ border-bottom: 0; }
.wm-steplist li{ transition: opacity var(--wm-med); }
.wm-steplist li.is-pending{ opacity: .38; }

/* ── Anahtar alanı ────────────────────────────────────────────── */
.referral-link-row{ display: flex; gap: 8px; width: 100%; }
.referral-link-row input{
  flex: 1; min-width: 0; min-height: 42px; padding: 0 14px;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line-2);
  border-radius: var(--wm-r-s); color: var(--wm-w);
  font-family: var(--wm-body); font-size: var(--wm-t2); font-weight: 800;
  letter-spacing: .08em;
}

/* ═══ Rötuş ══════════════════════════════════════════════════════
   Sistemde tanımsız kalmış birkaç yüzey yüzünden içerik sayfaları
   gövde fontuna düşüyordu. Aşağısı o boşlukları kapatır — yeni
   renk/ölçü icat etmez, mevcut token'ları kullanır.
   ═══════════════════════════════════════════════════════════════ */

/* Boş durum başlıkları: .wm-empty h3 ile aynı dil */
.empty-state h3, .cart-empty h3{
  margin: 0 0 8px; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d3); letter-spacing: var(--wm-track-d);
  text-transform: uppercase; color: var(--wm-w);
}
.empty-state p, .cart-empty p{ margin: 0 0 18px; font-size: var(--wm-t2); line-height: 1.65; }

/* Kart içi bölüm başlığı, bağımsız bölümden daha sıkı otursun */
.card > .section-head:first-child,
.summary-card > .section-head:first-child{
  margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--wm-line);
}
.summary-card > .section-head h2{ font-size: var(--wm-d4); }

/* Uzun hukuki/destek metni için okuma ritmi */
.card .prose p{ margin: 0 0 13px; color: var(--wm-g); font-size: var(--wm-t2); line-height: 1.75; max-width: 74ch; }
.card .prose p:last-child{ margin-bottom: 0; }
.card .prose b{ color: var(--wm-w); font-weight: 800; }

/* İçerik kartları biraz daha nefes alsın */
.section-tight .card{ padding: 24px 26px; }
@media (max-width: 620px){ .section-tight .card{ padding: 20px 18px; } }

/* Sipariş satırı (hesap sayfası) */
.order-row{ justify-content: space-between; }

/* ═══ Açılır pencere ═════════════════════════════════════════════
   İki pencere aynı kabuğu paylaşır: paket teklifi (cross-sell.js)
   ve "hesabına şifre ekle" (account.js, kapat düğmesi ve etiketi
   paket teklifinden ödünç alır). JS açarken .open ekler, kapatırken
   kaldırıp 250–300ms sonra düğümü siler.                           */
.cross-sell-overlay, .pw-nudge-overlay{
  position: fixed; inset: 0; z-index: 1150;
  display: flex; padding: 20px; overflow-y: auto;
  background: rgba(0,0,0,.72);
  opacity: 0; pointer-events: none; transition: opacity var(--wm-med);
}
.cross-sell-overlay.open, .pw-nudge-overlay.open{ opacity: 1; pointer-events: auto; }
.cross-sell-modal, .pw-nudge-modal{
  position: relative; width: min(440px, 100%); margin: auto; padding: 28px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-l);
  box-shadow: var(--wm-edge), var(--wm-e3);
  transform: translateY(10px); transition: transform var(--wm-med);
}
.cross-sell-modal{ width: min(480px, 100%); }
.open > .cross-sell-modal, .open > .pw-nudge-modal{ transform: none; }

.cross-sell-close{
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  background: var(--wm-k-sink); color: var(--wm-g);
  border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill);
  font-size: 12px; line-height: 1;
  transition: color var(--wm-fast), border-color var(--wm-fast);
}
.cross-sell-close:hover{ color: var(--wm-w); border-color: var(--wm-line-3); }
.cross-sell-close svg{ width: 14px; height: 14px; }
.cross-sell-tag{
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  background: var(--wm-y-soft); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-pill);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}

/* Şifre ekleme penceresi */
.pw-nudge-icon{
  width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--wm-y-soft); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-s);
}
.pw-nudge-icon svg{ width: 22px; height: 22px; }
.pw-nudge-modal h3{
  margin: 14px 0 8px; font-family: var(--wm-display); font-size: var(--wm-d3); font-weight: 800;
  font-variation-settings: "wdth" 108, "wght" 800; letter-spacing: -.02em; line-height: 1.08;
  text-transform: uppercase; color: var(--wm-w);
}
.pw-nudge-modal > p{ margin: 0 0 22px; color: var(--wm-g); font-size: var(--wm-t3); line-height: 1.65; }
.pw-nudge-modal .btn-block + .btn-block{ margin-top: 8px; }

/* Paket teklifi */
.cross-sell-body{ display: flex; align-items: center; gap: 16px; margin: 18px 0 22px; }
.cross-sell-media{
  width: 96px; height: 96px; flex: none; overflow: hidden;
  display: grid; place-items: center; color: var(--wm-g-dim);
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
}
.cross-sell-media img{ width: 100%; height: 100%; object-fit: cover; }
.cross-sell-info{ min-width: 0; }
.cross-sell-pitch{ margin: 0 0 6px; color: var(--wm-g); font-size: var(--wm-t3); line-height: 1.5; }
.cross-sell-pitch b{ color: var(--wm-w); }
.cross-sell-info h4{ margin: 0 0 8px; color: var(--wm-w); font-size: var(--wm-t1); font-weight: 800; }
.cross-sell-price{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cross-sell-price b{
  color: var(--wm-y); font-family: var(--wm-display); font-size: var(--wm-d4); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cross-sell-price-old{ color: var(--wm-g-dim); font-size: var(--wm-t3); text-decoration: line-through; }
.cross-sell-price small{
  color: var(--wm-g); font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.cross-sell-actions{ display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cross-sell-note{ margin: 12px 0 0; color: var(--wm-g); font-size: var(--wm-t3); text-align: center; }
@media (max-width: 460px){
  .cross-sell-modal, .pw-nudge-modal{ padding: 24px 20px; }
  .cross-sell-actions{ grid-template-columns: 1fr; }
}

/* ═══ Üst şeritler ve yüzen öğeler ═══════════════════════════════
   nav.js başlığın hemen üstüne (atlama bağlantısından sonra) iki ince
   şerit enjekte eder: flaş indirim (sarı zemin, siyah metin, sabit
   genişlikli geri sayım) ve duyuru (sessiz koyu bant). Akış içinde
   dururlar: sayfa kayınca giderler, yapışkan .wm-nav top:0'da kendi
   yerini alır — başlığa ofset ya da body sınıfı (has-flash /
   has-announce) gerekmez.
   İç ızgara: [denge] [içerik] [kapat]. Sol denge sütunu kapat
   düğmesiyle aynı genişlikte; içerik başlığın tam ortasında kalır.  */
.wm-topbar{ position: relative; }
.wm-topbar__in{
  max-width: var(--wm-max); margin: 0 auto; padding: 0 var(--wm-gut);
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center; gap: 10px;
}
.wm-topbar__in::before{ content: ""; }
.wm-topbar__icon, .wm-topbar__go{ display: inline-grid; place-items: center; flex: none; }
.wm-topbar__icon svg, .wm-topbar__go svg{ width: 14px; height: 14px; }
.wm-topbar__go{ transition: transform var(--wm-fast); }
a:hover > .wm-topbar__go{ transform: translateX(3px); }
.wm-topbar__close{
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: var(--wm-r-s); color: inherit;
  transition: background var(--wm-fast), color var(--wm-fast);
}
.wm-topbar__close svg{ width: 14px; height: 14px; }

/* ── Flaş indirim ─────────────────────────────────────────────── */
.flash-bar{
  background: var(--wm-k-raise-2); color: var(--wm-w);
  border-top: 2px solid var(--wm-y); border-bottom: 1px solid var(--wm-line);
}
.flash-bolt, .flash-pct, .flash-cd{ color: var(--wm-y); }
.flash-bar-main{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 0; min-height: 40px; color: inherit; text-decoration: none;
  font-size: var(--wm-t3); font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.flash-bolt svg{ width: 15px; height: 15px; fill: currentColor; }
.wm-flash__name{
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--wm-display); font-size: var(--wm-t2); font-weight: 800;
  font-variation-settings: "wdth" 108, "wght" 800; letter-spacing: -.005em;
  text-transform: uppercase;
}
.flash-bar-main:hover .wm-flash__name{
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.flash-pct{
  flex: none; padding: 3px 6px 2px;
  border: 1.5px solid currentColor; border-radius: var(--wm-r-xs);
  font-family: var(--wm-display); font-size: var(--wm-t3); font-weight: 800;
  font-variation-settings: "wdth" 100, "wght" 800; text-transform: uppercase;
  line-height: 1; font-variant-numeric: tabular-nums;
}
/* Kapsam uzun olabilir (ürün adı): önce o kısalır, geri sayım asla. */
.flash-scope{ min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; opacity: .78; }
.flash-timer{ display: inline-flex; align-items: center; gap: 8px; flex: none; }
.flash-timer::before{
  content: ""; width: 1px; height: 14px; margin-right: 4px;
  background: currentColor; opacity: .28;
}
.wm-flash__label{
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m);
  text-transform: uppercase; opacity: .78;
}
/* Rakam genişliği sabit: saniye değişince şerit titremesin. */
.flash-cd{
  display: inline-block; padding: 4px 7px; border-radius: var(--wm-r-xs);
  background: var(--wm-k); color: var(--wm-y);
  font-size: var(--wm-t3); font-weight: 800; line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.flash-close:hover{ background: var(--wm-k); color: var(--wm-y); }
/* Genel sarı odak halkası sarı zeminde görünmez; burada siyah. */
.flash-bar :focus-visible{ outline-color: var(--wm-on-y); }
/* Şerit içi bağlantıların halkası şeridin içinde kalsın, komşu banda taşmasın. */
.flash-bar-main:focus-visible, .announce-text:focus-visible{ outline-offset: -2px; }

/* ── Duyuru ───────────────────────────────────────────────────── */
.announce-bar{
  background: var(--wm-k-band); color: var(--wm-g);
  border-bottom: 1px solid var(--wm-line);
}
.announce-text{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 0; min-height: 36px; padding-block: 6px;
  color: var(--wm-g); text-decoration: none; text-align: center;
  font-size: var(--wm-t3); font-weight: 600; line-height: 1.45;
  transition: color var(--wm-fast);
}
.announce-text .wm-topbar__icon, .announce-text .wm-topbar__go{ color: var(--wm-y); }
.wm-topbar__msg{ min-width: 0; }
.wm-topbar__msg :is(a, b, strong){ color: var(--wm-w); }
a.announce-text:hover{ color: var(--wm-w); }
.announce-close{ color: var(--wm-g); }
.announce-close:hover{ background: var(--wm-k-raise-2); color: var(--wm-w); }

/* Dar ekranda kapsam ve "ends in" görsel olarak düşer, ekran okuyucuda kalır. */
@media (max-width: 760px){
  .flash-scope{
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 620px){
  /* Dar ekranda denge sütunu düşer: içerik marka logosuyla aynı
     sol hizaya oturur, kapat düğmesi sağ kenarda kalır. */
  /* Kapat simgesi (30px kutuda 14px) hamburger düğmesinin sağ kenarıyla hizalı. */
  .wm-topbar__in{ grid-template-columns: minmax(0, 1fr) 30px; gap: 8px; padding-right: calc(var(--wm-gut) - 8px); }
  .wm-topbar__in::before{ display: none; }
  .flash-bar-main, .announce-text{ justify-content: flex-start; text-align: left; }
  .flash-bar-main{ gap: 8px; min-height: 38px; }
  .flash-bar .wm-topbar__go{ display: none; }
}
@media (max-width: 480px){
  .wm-flash__label{
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .flash-timer::before{ display: none; }
  .flash-timer{ gap: 0; }
  /* 360px'te indirim adı sığsın: rozetler ve boşluklar bir kademe sıkılaşır. */
  .flash-bar-main{ gap: 6px; }
  .flash-pct{ padding: 3px 5px 2px; font-size: var(--wm-t4); }
  .flash-cd{ padding: 4px 6px; letter-spacing: 0; }
}

/* ── Discord düğmesi ──────────────────────────────────────────────
   Sağ alt köşe canlı destek başlatıcısının (chat.js, .wm-chat-fab).
   İkisi üst üste yığılınca telefonda içeriği örten iki yüzen düğme
   oluyordu; Discord zaten başlıktaki hapta her genişlikte bir dokunuş
   uzakta (nav.js ona da yapılandırılan daveti yazar). Bu yüzden düğme
   yalnız başlatıcının olmadığı sayfalarda, onun yerinde görünür.     */
.discord-fab{
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: inline-flex; align-items: center; gap: 9px;
  height: 48px; padding: 0 18px 0 15px;
  background: var(--wm-k-raise); color: var(--wm-w); text-decoration: none;
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-pill);
  box-shadow: var(--wm-edge), var(--wm-e2);
  font-size: var(--wm-t4); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  transition: color var(--wm-fast), border-color var(--wm-fast), transform var(--wm-fast);
}
.discord-fab svg{ width: 19px; height: 19px; color: var(--wm-y); }
.discord-fab:hover{ color: var(--wm-y); border-color: var(--wm-y-line-2); transform: translateY(-1px); }
body.wm-chat-present .discord-fab{ display: none; }
@media (max-width: 560px){
  .discord-fab{ right: 16px; bottom: 16px; width: 48px; padding: 0; justify-content: center; }
  .discord-fab span{ display: none; }
}

/* ── Satış kanıtı kartı (social-proof.js) ────────────────────────
   Sol alt köşe; sağ alttaki başlatıcıyla çakışmaz. Görünürlük
   display yerine opaklık + visibility ile: kart kayarak gelir ve
   gizliyken ne odak alır ne tıklamayı yutar.                        */
.sale-toast{
  position: fixed; left: 22px; bottom: 22px; z-index: 55;
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: min(360px, calc(100vw - 44px));
  padding: 11px 10px 11px 11px;
  background: var(--wm-k-raise); color: var(--wm-g);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r);
  box-shadow: var(--wm-edge), var(--wm-e3);
  font-size: var(--wm-t3); font-weight: 600; line-height: 1.45;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--wm-med), transform var(--wm-med), visibility 0s linear 260ms;
}
.sale-toast.show{
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--wm-med), transform var(--wm-med);
}
.sale-toast-icon{
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: var(--wm-y-soft); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-s);
}
.sale-toast-icon svg{ width: 18px; height: 18px; }
.sale-toast-text{ min-width: 0; }
/* Üç satırlık sabit ritim: giriş cümlesi / ürün / zaman. Ürün adı
   uzunluğu ne olursa olsun varyant satır ortasında kopmaz. */
.sale-toast-link, .sale-toast-text > div:first-child > span{ display: block; color: var(--wm-w); font-weight: 800; }
.sale-toast-link{ text-decoration: none; transition: color var(--wm-fast); }
.sale-toast-link:hover{ color: var(--wm-y); }
.sale-toast-text .sale-toast-variant{ color: var(--wm-g); font-weight: 600; }
.sale-toast-time{
  margin-top: 3px; color: var(--wm-g);
  font-size: var(--wm-t5); font-weight: 700; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.sale-toast-close{
  align-self: flex-start; flex: none; width: 26px; height: 26px; margin: -3px 0 0 2px;
  padding: 0; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: var(--wm-r-s); color: var(--wm-g);
  transition: background var(--wm-fast), color var(--wm-fast);
}
.sale-toast-close svg{ width: 14px; height: 14px; }
.sale-toast-close:hover{ background: var(--wm-k-raise-2); color: var(--wm-w); }
@media (max-width: 560px){
  .sale-toast{ left: 16px; bottom: 16px; max-width: calc(100vw - 32px); gap: 10px; padding-right: 12px; }
  .sale-toast-icon{ width: 34px; height: 34px; }
  /* Dar kartta kapat düğmesi köşeye taşar; metin sütunu tüm genişliği
     alır. Görünen 24px, dokunma alanı ::after ile 40px. */
  .sale-toast-close{
    position: absolute; top: -9px; right: -9px; margin: 0; width: 24px; height: 24px;
    background: var(--wm-k-raise-2); border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-pill);
  }
  .sale-toast-close::after{ content: ""; position: absolute; inset: -8px; }
  .sale-toast-close svg{ width: 12px; height: 12px; }
  /* Sağ altta 58px başlatıcı (ya da 48px Discord) + 12px boşluk. */
  body.wm-chat-present .sale-toast,
  body:has(.discord-fab) .sale-toast{ max-width: calc(100vw - 102px); }
}
/* Ürün sayfasının alttaki sabit satın alma çubuğu açıkken üstüne çık. */
@media (max-width: 940px){
  body:has(.wm-mobar:not([hidden])) .sale-toast{ bottom: 84px; }
}

/* ── Nav arama önerileri (nav.js setupAutocomplete) ──────────────
   wm-shell.js arama kutusunu komut paletinin tetiğine çevirdiği
   sayfalarda bu liste açılmaz. wm-shell.js yüklemeyen sayfada (404)
   ya da katalog gelmediğinde gerçek bir açılır liste olur.           */
.nav-search{ position: relative; }
/* Chromium’un yerel temizle düğmesi mavi çiziliyor; paletin dışında kalır. */
.nav-search input::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; }
.search-ac{
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: max(100%, 340px); padding: 6px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line-2); border-radius: var(--wm-r);
  box-shadow: var(--wm-edge), var(--wm-e3);
}
.search-ac-item{
  display: flex; align-items: center; gap: 12px; padding: 7px 8px;
  border-radius: var(--wm-r-s); text-decoration: none;
  transition: background var(--wm-fast);
}
.search-ac-item:hover{ background: var(--wm-k-raise-2); }
.search-ac-thumb{
  flex: none; width: 46px; height: 34px; overflow: hidden; display: grid; place-items: center;
  background: var(--wm-k-sink); border-radius: var(--wm-r-xs); color: var(--wm-g-dim);
}
.search-ac-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.search-ac-thumb svg{ width: 18px; height: 18px; }
.search-ac-name{
  flex: 1; min-width: 0; color: var(--wm-w); font-size: var(--wm-t3); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-ac-price{
  flex: none; color: var(--wm-y); font-family: var(--wm-display); font-size: var(--wm-t2);
  font-weight: 700; font-variation-settings: "wdth" 100, "wght" 700; font-variant-numeric: tabular-nums;
}
.search-ac-all{
  display: block; margin-top: 4px; padding: 10px 8px 5px; border-top: 1px solid var(--wm-line);
  color: var(--wm-y); text-decoration: none;
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.search-ac-all:hover{ color: var(--wm-y-hi); }
.search-ac-empty{ padding: 16px 10px; color: var(--wm-g); font-size: var(--wm-t3); text-align: center; }

/* ═══ Zengin metin (.pd-rich-desc) ═══════════════════════════════
   Yönetici panelinden gelen HTML: ürün uzun açıklaması (product.js,
   .wm-panel içinde) ve rehber gövdesi (guides.js). Tek tanım burada,
   çünkü iki sayfanın ortak yüklediği stil dosyası bu: ürün sayfası
   wm-page.css'i, rehber sayfası wm-product.css'i yüklemez.
   Tablolar data.js/wrapRichTables() ile kaydırma kabına alınır.     */
.pd-rich-desc{
  color: var(--wm-g); font-size: var(--wm-t2); line-height: 1.8;
  overflow-wrap: break-word;
}
.pd-rich-desc > :first-child{ margin-top: 0; }
.pd-rich-desc > :last-child{ margin-bottom: 0; }
.pd-rich-desc p{ margin: 0 0 14px; }
.pd-rich-desc :is(strong, b){ color: var(--wm-w); font-weight: 800; }
.pd-rich-desc small{ color: var(--wm-g); font-size: var(--wm-t3); line-height: 1.65; }

.pd-rich-desc :is(h1, h2, h3){
  margin: 30px 0 10px; color: var(--wm-w);
  font-family: var(--wm-display); font-weight: 750;
  font-variation-settings: "wdth" 106, "wght" 750;
  letter-spacing: -.018em; line-height: 1.12; text-transform: uppercase;
}
.pd-rich-desc :is(h1, h2){ font-size: var(--wm-d3); }
.pd-rich-desc h3{ font-size: var(--wm-d4); }
.pd-rich-desc :is(h4, h5, h6){
  margin: 24px 0 8px; color: var(--wm-w);
  font-family: var(--wm-body); font-size: var(--wm-t4); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
/* Başlık hemen ardından gelen listeyi/paragrafı sahiplensin. */
.pd-rich-desc :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol){ margin-top: 0; }

.pd-rich-desc a{
  color: var(--wm-y); text-decoration: underline;
  text-decoration-color: var(--wm-y-line-2); text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--wm-fast), text-decoration-color var(--wm-fast);
}
.pd-rich-desc a:hover{ color: var(--wm-y-hi); text-decoration-color: currentColor; }

.pd-rich-desc :is(ul, ol){ margin: 0 0 16px; padding-left: 22px; }
.pd-rich-desc :is(ul, ol) :is(ul, ol){ margin: 6px 0 0; }
.pd-rich-desc li{ margin-bottom: 6px; padding-left: 4px; }
.pd-rich-desc li:last-child{ margin-bottom: 0; }
.pd-rich-desc li::marker{ color: var(--wm-y); }
.pd-rich-desc ol > li::marker{ font-weight: 800; font-variant-numeric: tabular-nums; }

.pd-rich-desc img{
  display: block; max-width: 100%; height: auto; margin: 18px 0;
  border: 1px solid var(--wm-line); border-radius: var(--wm-r);
}
.pd-rich-desc :is(iframe, video){
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 18px 0;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
}

.pd-rich-desc blockquote{
  margin: 18px 0; padding: 14px 18px;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-s);
  color: var(--wm-w);
}
.pd-rich-desc blockquote > :last-child{ margin-bottom: 0; }

.pd-rich-desc code{
  padding: .1em .42em; border: 1px solid var(--wm-line); border-radius: var(--wm-r-xs);
  background: var(--wm-k-sink); color: var(--wm-w);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .88em;
  overflow-wrap: anywhere;
}
.pd-rich-desc pre{
  margin: 18px 0; padding: 14px 16px; overflow-x: auto;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  font-size: var(--wm-t3); line-height: 1.6;
}
.pd-rich-desc pre code{ padding: 0; border: 0; background: none; overflow-wrap: normal; }

.pd-rich-desc hr{ height: 1px; margin: 28px 0; border: 0; background: var(--wm-line); }

.pd-rich-desc .wm-rich__scroll{
  margin: 18px 0; overflow-x: auto;
  border: 1px solid var(--wm-line); border-radius: var(--wm-r);
}
.pd-rich-desc table{ width: 100%; margin: 0; border-collapse: collapse; font-size: var(--wm-t3); line-height: 1.6; }
.pd-rich-desc :is(th, td){ padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wm-line); }
.pd-rich-desc th{
  background: var(--wm-k-raise-2); color: var(--wm-w); white-space: nowrap;
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.pd-rich-desc td{ color: var(--wm-g); }
.pd-rich-desc tr:last-child > td{ border-bottom: 0; }

/* ── Ürüne özel ince dokunuşlar ───────────────────────────────────
   Yalnızca ürün uzun açıklaması (db/productCopy.js build()) bu sınıfları
   basar; rehber gövdesi .pd-rich-desc'i paylaşsa da bunları emitmez, o yüzden
   etkilenmez. Sınıf yoksa metin zaten temel stiliyle düzgün görünür.        */

/* Açılış cümlesi: gövdeden bir tık büyük, beyaz — sayfaya ton verir. */
.pd-rich-desc .rich-lead{
  color: var(--wm-w); font-size: var(--wm-t1);
  line-height: 1.72; letter-spacing: -.006em;
}

/* "Features" ve "What you get": disk yerine ince sarı tik çipi. Metin
   içindeki sarı ::marker ile aynı bütçede — kontrol değil, işaret. */
.pd-rich-desc .rich-checks{ list-style: none; margin: 0 0 16px; padding-left: 0; }
.pd-rich-desc .rich-checks li{
  position: relative; margin-bottom: 9px; padding-left: 30px;
}
.pd-rich-desc .rich-checks li:last-child{ margin-bottom: 0; }
.pd-rich-desc .rich-checks li::before{
  content: ""; position: absolute; left: 0; top: .18em;
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--wm-k-raise-2); border: 1px solid var(--wm-line-2);
}
.pd-rich-desc .rich-checks li::after{
  content: ""; position: absolute; left: 6px; top: calc(.18em + 4px);
  width: 5px; height: 9px;
  border: solid var(--wm-y); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Kapanış satıcı notu: üstünde saç teli çizgi, hafif ayrılsın. */
.pd-rich-desc .rich-note{
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--wm-line);
}

/* Betik üretimi küçük simgeler (data.js wmIcon) metnin satırında durur. */
.wm-ico{ width: 1em; height: 1em; flex: none; }

/* ---- wm-premium.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — MALZEME KATMANI

   Sistemin iskeleti doğruydu ama yüzeyler düz dikdörtgendi: derinlik,
   kenar ışığı, doku ve ritim yoktu. Bu dosya o katmanı ekler.

   Kural: yeni renk ailesi YOK, yeni radius YOK, cam/blur YOK.
   Aşağıdaki değerler önce token olarak tanımlanır, sonra kullanılır —
   bileşen bloklarında sabit değer yazılmaz.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── Kenar ışığı: yükseltilmiş yüzeyin üst kenarına 1px ışık.
        Karanlık arayüzde "malzeme" hissinin tek en ucuz kaynağı. ── */
  --wm-edge:      inset 0 1px 0 rgba(255,255,255,.055);
  --wm-edge-soft: inset 0 1px 0 rgba(255,255,255,.032);

  /* ── Yükseklik basamakları (nötr, renksiz) ── */
  --wm-e1: 0 1px 2px rgba(0,0,0,.45);
  --wm-e2: 0 12px 28px -14px rgba(0,0,0,.8);
  --wm-e3: 0 28px 64px -24px rgba(0,0,0,.9);

  /* ── Sarı halka: yalnız seçili/aktif durum ── */
  --wm-ring: 0 0 0 1px rgba(255,199,0,.28);

  /* ── Bölüm ritmi: sistemin 56px'i premium için dar kalıyor ── */
  --wm-sect-y: clamp(64px, 7vw, 104px);

  /* ── Yumuşak giriş eğrisi ── */
  --wm-ease: cubic-bezier(.22,.61,.36,1);
}

/* Display ölçeği sabit 62/42px'ti; geniş ekranda cılız, darda taşkın
   kalıyordu. Akışkan hâle getirildi — token katmanı hâlâ tek kaynak. */
@media (min-width: 861px){
  :root{
    --wm-d1: clamp(44px, 4.8vw, 66px);
    --wm-d2: clamp(34px, 3.3vw, 52px);
    --wm-d3: clamp(22px, 1.9vw, 30px);
  }
}

/* ═══ 01 · SAYFA DOKUSU ══════════════════════════════════════════
   Düz #0a0a0a plastik gibi duruyor. Çok ince bir grain + üstten
   vinyet, siyaha malzeme hissi verir. Görülmez, hissedilir.       */
body::after{
  content: "";
  position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  opacity: .019;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ 02 · YÜZEY YÜKSELTME ═══════════════════════════════════════
   Yükseltilmiş her yüzey üst kenar ışığı + zemin gölgesi alır.
   Ürün kartı (.wm-pc) artık bir yüzey değil: paneli kalktı, fotoğrafın
   kendisi kart oldu. Bir ekranda yirmi yedi kabartılmış kutu
   birbirini düzleştiriyordu; bu yüzden listede yok.                */
.wm-cat,
.wm-reason,
.wm-stat,
.wm-disc,
.wm-buy,
.card, .panel, .summary-card, .stat-box,
.cart-row,
.wm-paym,
.wm-nl__card,
.wm-pal__box,
.wm-mini__panel{
  box-shadow: var(--wm-edge-soft), var(--wm-e1);
}

.wm-cat:hover,
.wm-reason:hover{
  box-shadow: var(--wm-edge), var(--wm-e3);
}
.wm-pal__box{ box-shadow: var(--wm-edge), var(--wm-e3); }
.wm-mini__panel{ box-shadow: var(--wm-edge), var(--wm-e3); }

/* Hareket eğrisini yumuşat: 140ms sert kesiliyordu */
.wm-pc__media, .wm-cat, .wm-reason, .wm-btn, .wm-plan, .wm-paym, .cart-row{
  transition-timing-function: var(--wm-ease);
  transition-duration: 180ms;
}

/* ═══ 03 · ÜRÜN GÖRSELİ ══════════════════════════════════════════
   Tedarikçi görselleri farklı renk sıcaklıklarında; duvar halinde
   dağınık duruyor. Hepsi aynı kademe kısılır, ızgara tek bir sistem
   gibi okunur. Katalog kartında hover artık sadece iki şey yapıyor:
   kenarlık rengi + görselin hafif büyümesi (wm-store.css). Kategori
   kartı doygunluğunu hover'da geri alır.                          */
.wm-pc__media img,
.wm-cat img{
  filter: saturate(.88) contrast(1.03);
  transition: transform 420ms var(--wm-ease), filter 320ms var(--wm-ease);
}
.wm-cat:hover img{ filter: none; }

/* ═══ 04 · HERO ══════════════════════════════════════════════════ */
.wm-hero__in{
  padding-block: clamp(56px, 7vw, 96px) clamp(52px, 6vw, 84px);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.wm-hero__title{ letter-spacing: -.018em; margin-bottom: 18px; }
.wm-hero__lead{ font-size: 16px; line-height: 1.72; margin-bottom: 30px; max-width: 46ch; }
.wm-hero__acts .wm-btn{ padding: 17px 30px; }

/* Zemindeki kelime işareti kartların üstüne biniyordu. Sağ-alt köşeye
   çekilip iki kenardan taşırıldı ve kenarları eritildi: filigran. */
.wm-hero__ghost{
  top: auto; bottom: -14%; right: -5%;
  font-size: clamp(110px, 17vw, 260px);
  color: rgba(255,255,255,.022);
  -webkit-mask-image: linear-gradient(200deg, transparent, #000 55%);
          mask-image: linear-gradient(200deg, transparent, #000 55%);
}

/* ═══ 04b · RAY KENARLARI ════════════════════════════════════════
   Yatay raylar kenarda sert kesiliyordu — kart yarım kalıyor, kaza
   gibi duruyordu. Artık kaydırma konumuna göre eriyor: solda içerik
   varsa sol kenar, sağda varsa sağ kenar. Sığıyorsa maske yok.
   Sınıflar wm-core.js/railFades() tarafından yönetilir.            */
.wm-rail{
  --wm-fade: 76px;
  /* Kart hover'da 3px kalkıyor ve gölge bırakıyor; ray dikeyde
     kırpıyordu. Pay açıp dış boşluğu geri alıyoruz. */
  padding: 8px 0 14px; margin: -8px 0 -14px;
}
.wm-rail.has-right{
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--wm-fade)), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - var(--wm-fade)), transparent);
}
.wm-rail.has-left{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--wm-fade));
          mask-image: linear-gradient(90deg, transparent, #000 var(--wm-fade));
}
.wm-rail.has-left.has-right{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--wm-fade), #000 calc(100% - var(--wm-fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--wm-fade), #000 calc(100% - var(--wm-fade)), transparent);
}

/* ═══ 05 · BÖLÜM RİTMİ ═══════════════════════════════════════════
   56px premium için dar. Bölümler nefes alsın, bantlar yumuşak
   geçsin (sert renk sıçraması yerine ince çizgi).                 */
.wm-sect{ padding-top: var(--wm-sect-y); }
.wm-sect--band{
  padding-block: var(--wm-sect-y); margin-top: var(--wm-sect-y);
  border-top: 1px solid var(--wm-line);
  border-bottom: 1px solid var(--wm-line);
}
.wm-shead{ margin-bottom: 30px; }
.wm-shead h2{ letter-spacing: -.015em; }
.wm-shead p{ font-size: 14.5px; line-height: 1.7; }

/* ═══ 06 · NAV ═══════════════════════════════════════════════════
   Sayfa kaydıkça çubuk katılaşır: içerik altından geçerken sınır
   belirsizdi.                                                      */
.wm-nav{ transition: background 220ms var(--wm-ease), box-shadow 220ms var(--wm-ease); }
.wm-nav.is-stuck{
  background: rgba(10,10,10,.92);
  box-shadow: 0 1px 0 var(--wm-line-2), var(--wm-e2);
}

/* ═══ 07 · DÜĞME ═════════════════════════════════════════════════ */
.wm-btn--primary:active{ transform: translateY(0); }
.wm-btn--ghost{ box-shadow: var(--wm-edge-soft); }

/* ═══ 08 · PLAN / LİSANS HAPLARI ═════════════════════════════════ */
/* Kart içi plan chip'i (.wm-tier) kaldırıldı: plan seçimi ürün
   sayfasındaki .wm-plan listesinde yapılıyor. */
.wm-plan.active{ box-shadow: var(--wm-ring); }

/* ═══ 09 · ODAK ══════════════════════════════════════════════════
   Klavye kullanıcısı için her yerde görünür, tutarlı halka. Halka
   öğenin kendi köşesini izler (outline border-radius'u takip eder);
   odakta yarıçap değiştirilmez — düğmeler odaklanınca biçim
   değiştiriyordu.                                                  */
:focus-visible{
  outline: 2px solid var(--wm-y);
  outline-offset: 2px;
}

/* ═══ 10 · KAYDIRMA ÇUBUĞU ═══════════════════════════════════════ */
* { scrollbar-width: thin; scrollbar-color: var(--wm-line-3) transparent; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--wm-line-2); border-radius: var(--wm-r-pill);
  border: 3px solid var(--wm-k);
}
::-webkit-scrollbar-thumb:hover{ background: var(--wm-line-3); }
::selection{ background: var(--wm-y); color: var(--wm-on-y); }

/* ═══ 11 · GİRİŞ HAREKETİ ════════════════════════════════════════
   16px sıçrama sert duruyordu; daha kısa mesafe, daha uzun süre.  */
.reveal{
  opacity: 0; transform: translateY(14px);
  transition: opacity 620ms var(--wm-ease), transform 620ms var(--wm-ease);
}
.reveal.in-view{ opacity: 1; transform: none; }

/* Izgara içindeki kartlar sırayla gelsin — tek blok yerine akış. */
.wm-cards.in-view > *, .wm-reasons.in-view > *, .wm-steps.in-view > *{
  animation: wmRise 560ms var(--wm-ease) both;
}
.wm-cards.in-view > *:nth-child(2), .wm-reasons.in-view > *:nth-child(2), .wm-steps.in-view > *:nth-child(2){ animation-delay: 60ms; }
.wm-cards.in-view > *:nth-child(3), .wm-reasons.in-view > *:nth-child(3), .wm-steps.in-view > *:nth-child(3){ animation-delay: 120ms; }
.wm-cards.in-view > *:nth-child(4), .wm-reasons.in-view > *:nth-child(4), .wm-steps.in-view > *:nth-child(4){ animation-delay: 180ms; }
.wm-cards.in-view > *:nth-child(5), .wm-reasons.in-view > *:nth-child(5){ animation-delay: 240ms; }
.wm-cards.in-view > *:nth-child(6), .wm-reasons.in-view > *:nth-child(6){ animation-delay: 300ms; }
@keyframes wmRise{ from{ opacity: 0; transform: translateY(12px); } }

/* ═══ 12 · YÜKLENME İSKELETİ ═════════════════════════════════════
   Veri gelene kadar boş siyah bant görünüyordu. Parıltılı yer
   tutucu, algılanan hızı ve kaliteyi yükseltir.                    */
body.wm-loading .wm-rail:empty,
body.wm-loading .wm-cards:empty{
  min-height: 320px; border-radius: var(--wm-r);
  background:
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.035) 40%, transparent 60%)
      0 0 / 220% 100% no-repeat,
    var(--wm-k-raise);
  border: 1px solid var(--wm-line);
  animation: wmShimmer 1.5s linear infinite;
}
@keyframes wmShimmer{ to{ background-position: -220% 0; } }

/* ═══ 13 · İÇERİK SAYFALARI ══════════════════════════════════════ */
.page-head{ padding: 42px 0 46px; }
.page-head h1{ letter-spacing: -.018em; }
.section-tight{ padding: 34px 0 var(--wm-sect-y); }

/* ═══ 14 · TABLO/ÖZET SATIRLARI ══════════════════════════════════ */
.summary-row{ padding: 11px 0; }
.summary-row + .summary-row{ border-top: 1px solid rgba(255,255,255,.045); }
.summary-row.total{ border-top-color: var(--wm-line-2); }

/* ═══ 15 · HAREKET DUYARLILIĞI ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
  .wm-cards.in-view > *, .wm-reasons.in-view > *, .wm-steps.in-view > *{ animation: none; }
  body.wm-loading .wm-rail:empty, body.wm-loading .wm-cards:empty{ animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   §T · TİPOGRAFİ

   Anton tek ağırlıklı (400) bir poster fontuydu: hiyerarşi
   kuramıyor, 19–26px'te (fiyat, panel başlığı) dağılıyordu ve
   sıkışık harfleri siteye ucuz bir görünüm veriyordu.

   Archivo değişken eksenli (wdth 75–125, wght 400–900). Artık
   ölçek büyüdükçe harf GENİŞLİYOR ve ağırlaşıyor — hiyerarşi
   yalnız puntoyla değil, harfin kendi biçimiyle kuruluyor.

   Seçim tasarım sözleşmesindeki font kurallarına uygundur.
   ═══════════════════════════════════════════════════════════════ */

/* ── A · Dev başlıklar: geniş + ağır, sıkı harf aralığı ───────── */
.wm-hero__title,
.page-head h1, .wm-chead h1, .wm-pd__info h1, .auth-head h1,
.wm-shead h2, .section-head h2, .section h2,
.wm-disc h2, .wm-nl__copy h2, .wm-buy__head h2,
.nf-digit{
  font-weight: 800;
  font-variation-settings: "wdth" 115, "wght" 800;
  letter-spacing: -.028em;
  line-height: 1.02;
}
.wm-hero__title{ font-variation-settings: "wdth" 110, "wght" 850; letter-spacing: -.032em; }
.nf-digit{ font-variation-settings: "wdth" 120, "wght" 900; }

/* ── B · Panel ve kart başlıkları: normale yakın genişlik ─────── */
.wm-empty h3, .empty-state h3, .cart-empty h3,
.wm-mini__head h3, .wm-nl__card h3, .wm-fbt__head h3,
.wm-rv__head h3, .rv-form h4,
.wm-panel :is(h1, h2, h3, h4, h5),
.prose :is(h2, h3, h4), .docs-article :is(h2, h3, h4),
.wm-reason b, .wm-step b, .wm-promo__name{
  font-weight: 750;
  font-variation-settings: "wdth" 106, "wght" 750;
  letter-spacing: -.018em;
  line-height: 1.12;
}

/* ── C · Sayılar ve fiyatlar ──────────────────────────────────────
   Rakam genişliği sabit (tabular): plan değişince fiyat zıplamasın. */
.wm-pc__price, .wm-plan__p, .wm-buy__price b, .wm-total b,
.wm-mini__price, .wm-mini__total b, .wm-mobar__info b,
.cart-price, .wm-pal__p,
.summary-row.total span:last-child, .total b,
.wm-promo__price b, .wm-fbt__price b, .wm-rv__price, .also-bought-price,
.balance-amount, .wm-fbar__count b,
.wm-stat b, .stat-box b, .stat-box .num, .stat-box strong, .auth-stat b,
.wm-mega__pick s, .wm-cmd__row .wm-cmd__p{
  font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── D · Rozet / madalyon rakamları: ortalı, dengeli ──────────── */
.wm-step__n, .wm-steplist li::before,
.account-avatar, .rv-avatar, .rv-big{
  font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  letter-spacing: 0;
}

/* ── E · Marka ─────────────────────────────────────────────────── */
.wm-brand{
  font-weight: 800;
  font-variation-settings: "wdth" 112, "wght" 800;
  letter-spacing: -.012em;
}

/* ── F · Zemin filigranları ───────────────────────────────────── */
.wm-hero__ghost, .wm-gal__ghost{
  font-weight: 800;
  font-variation-settings: "wdth" 122, "wght" 800;
  letter-spacing: -.045em;
}

/* ── G · Gövde metni ──────────────────────────────────────────────
   Koyu zeminde ince harfler kalınlaşıp bulanıyor; yumuşatma açılır.
   Mikro etiket 9.5px/800/.13em fazla sıkışıktı — 10px/700/.115em
   aynı teknik tonu verir ama okunur.                               */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:root{
  --wm-t1: 15.5px;
  --wm-t2: 14px;
  --wm-t3: 13px;
  --wm-t5: 10px;
  --wm-track-m: .115em;
}
.wm-label, .wm-shead__eyebrow, .eyebrow, .breadcrumbs,
.wm-nav__links a, .wm-nav__cell{ font-weight: 700; }

/* Uzun metin blokları okuma satır yüksekliğine çıksın */
.prose p, .card .prose p, .wm-reason s, .wm-step s, .wm-disc p{ line-height: 1.72; }

/* Fiyatın yanındaki üstü çizili eski fiyat gövde fontunda kalsın —
   display fontunda rakamlar birbirine karışıyordu. */
.wm-buy__price s, .wm-plan__p s, .wm-promo__price s{
  font-family: var(--wm-body); font-weight: 700; letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════
   §U · KONTROLLER

   Buton etiketleri 10–11px'te 900 ağırlık + .115em aralıkla
   yazılıyordu: küçük, aşırı kalın ve aşırı açık — koyu zeminde
   harfler birbirine yapışıp bulanıyordu. Bir kademe hafifletip
   bir kademe büyüttük; aynı teknik ton, okunur sonuç.

   İkinci geçiş: 11.5px versal + .055em hâlâ yan yana dizilince bir
   sıra bağıran minik pul gibi okunuyordu. İkincil ve sessiz düğmeler
   artık cümle düzeninde ve gövde ritminde (12.5px); versal display
   sesini yalnız ekranın tek birincil eylemi taşır — böylece hangi
   düğmenin ana eylem olduğu dolgudan bağımsız olarak da okunur.
   ═══════════════════════════════════════════════════════════════ */

.wm-btn, .btn{
  font-size: var(--wm-t3);
  font-weight: 700;
  letter-spacing: .005em;
  text-transform: none;
}
.btn{ height: 46px; }
.btn-lg{ font-size: var(--wm-t2); }
.btn-sm{ height: 36px; font-size: 12px; }
.btn-primary, .wm-btn--primary{
  font-family: var(--wm-display); font-size: 14px; font-weight: 800;
  font-variation-settings: "wdth" 106, "wght" 800;
  text-transform: uppercase; letter-spacing: .012em;
}
.btn-primary.btn-lg{ font-size: 15.5px; }
.btn-primary.btn-sm{ font-size: 12.5px; }

/* Birincil butonun sarı gölgesi tasarım sözleşmesinde yalnız burada
   serbest; hover'da biraz daha yükselsin. */
.wm-btn--primary:hover, .btn-primary:hover{ transform: translateY(-1px); }

/* ── Form alanları ────────────────────────────────────────────────
   46px kısa kalıyordu; odak durumu yalnız kenarlık rengiydi ve
   fark edilmiyordu. Artık sarı kenarlık + yumuşak halka.          */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
input[type="url"], textarea, select{
  min-height: 48px;
  background: var(--wm-k-sink);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  transition: border-color var(--wm-fast), box-shadow var(--wm-fast);
}
input:focus, textarea:focus, select:focus{
  border-color: var(--wm-y);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), var(--wm-ring);
}
input::placeholder, textarea::placeholder{ color: var(--wm-g-dim); font-weight: 600; }

/* Etiketler: 800/.115em fazla açıktı, kelimeler dağılıyordu */
.field label, label{ letter-spacing: .09em; }

/* Onay kutusu markanın rengini alsın (tarayıcı mavisi yerine) */
input[type="checkbox"], input[type="radio"]{
  accent-color: var(--wm-y);
  min-height: 0; width: 17px; height: 17px; box-shadow: none;
}

/* Select oku: varsayılan tarayıcı oku koyu temada kayboluyordu */
select{
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--wm-g) 50%),
    linear-gradient(135deg, var(--wm-g) 50%, transparent 50%);
  background-position: calc(100% - 20px) 51%, calc(100% - 14px) 51%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select:focus{ background-image:
    linear-gradient(45deg, transparent 50%, var(--wm-y) 50%),
    linear-gradient(135deg, var(--wm-y) 50%, transparent 50%); }

/* ── Marka rozeti ─────────────────────────────────────────────── */
.wm-brand__badge{ font-weight: 800; letter-spacing: .08em; }