/* Generated by server/scripts/build-css.js from wm-taste.css, wm-site4.css — edit those, then rebuild. */
/* ---- wm-taste.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — TAT KATMANI  (her sayfada EN SON yüklenir)

   İki iş:

   1 · HARF DÜZENİ. Sistem her metni versal (uppercase + geniş aralık)
       yazıyordu: başlık, buton, nav, kart adı, etiket… hepsi aynı sesle
       bağırınca hiyerarşi kayboluyor ve ucuz duruyordu. Premium koyu
       arayüzlerin kuralı: versal yalnız KÜÇÜK etiketlerde (eyebrow,
       meta satırı, rozet, tablo başı) — sistemin "ikinci sesi".
       Başlıklar, butonlar ve nav cümle düzenine iner; karışık harf için
       aralık/ağırlık/satır yüksekliği yeniden ayarlanır (versal için
       ayarlanmış negatif aralık ve .96 satır yüksekliği karışık harfte
       inen harfleri kırpıyordu).

       Seçici stratejisi: `:root body :is(h1..h4)` (0,1,2) bileşen
       kurallarını (0,1,1) yener; bilinen büyük başlıklar ayrıca adıyla
       yazılır (metrikleri için), etiket gibi kullanılan birkaç h4 sonra
       versal olarak geri alınır.

   2 · HAREKET. soft-skill ön ayarları CSS'e çevrildi (CSP script-src
       'self': GSAP CDN yok, satır içi script yok). Yalnız transform ve
       opacity animasyonlanır. Ön ayarlar:
         · yumuşak çıkış eğrisi   cubic-bezier(.32,.72,0,1)
         · kaydırma girişi        18px yukarı + hafif blur → 0, 720ms
         · kademeli ızgara        çocuklar 70ms arayla
         · kart kaldırma          -4px, kenar ışığı, derin gölge
         · buton fiziği           hover -1px, basınca scale(.98)
         · hero girişi            eyebrow→başlık→metin→CTA 70ms kademeli;
                                  i18n perdesi kalkınca başlar
       Marquee/sürüklenen kolonlar sabit hızlı sonsuz döngüdür; onlarda
       linear DOĞRU eğridir ve dokunulmaz.

   Hareket hassasiyeti: wm-tokens.css tüm süreleri .01ms'ye indiriyor;
   burada ayrıca statik son durum yazılır (garanti).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --wm-ease-out:    cubic-bezier(.32,.72,0,1);
  --wm-ease-spring: cubic-bezier(.34,1.28,.64,1);
  --wm-dur-1: 160ms;
  --wm-dur-2: 320ms;
  --wm-dur-3: 720ms;
  --wm-lift:  -4px;
}

/* ═══ 1 · HARF DÜZENİ ═════════════════════════════════════════════ */

/* 1a · Her başlık cümle düzeninde; yetim kelime kalmasın. */
:root body :is(h1, h2, h3, h4){
  text-transform: none;
  text-wrap: balance;
}

/* 1b · Dev display başlıklar (wm-premium §T-A kümesi + sayfa başlıkları).
   800/wdth 115 kalır — karışık harfte geniş ve ağır grotesk güçlü okunur.
   Aralık versal için -.028'di; karışık harfte biraz açılır, satır
   yüksekliği inen harflere yer verir. */
.wm-hero__title,
.page-head h1, .wm-chead h1, .wm-pd__info h1, .auth-head h1,
#productRoot > .section > .container > h1,
.wm-shead h2, .section-head h2, .section h2,
.wm-disc h2, .wm-nl__copy h2, .wm-buy__head h2, .docs-layout .final-cta h2,
.jobs-hero h1, .job-apply-head h2, .wm-rep__title{
  text-transform: none;
  letter-spacing: -.024em;
  line-height: 1.06;
}
.wm-hero__title,
.wm-hero--stacks .wm-hero__title{ letter-spacing: -.03em; line-height: 1.04; }

/* 1c · Panel/kart başlıkları ve display <b> başlıkları (400/versaldı;
   karışık harfte 400 cılız kalır → 700, 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,
.pp-warn-modal h3, .giveaway-card h4,
.wm-reason b, .wm-step b, .wm-promo__name, .wm-guide__for-body b,
.wm-stat b, .sb-health b, .summary-store, .auth-stat span{
  text-transform: none;
  font-weight: 700;
  font-variation-settings: "wdth" 104, "wght" 700;
  letter-spacing: -.016em;
  line-height: 1.14;
}
.wm-stat b{ font-variation-settings: "wdth" 108, "wght" 750; letter-spacing: -.02em; }

/* Uzun metin başlıkları */
.prose :is(h2, h3, h4), .docs-article :is(h2, h3, h4){
  text-transform: none; letter-spacing: -.012em;
}

/* 1d · Etiket gibi kullanılan başlıklar: versal KALIR (mikro etiket sesi). */
.wm-foot__col h4, .wm-rail-side h4, .wm-rail-side__grp h4,
.jobs-how-title, .wm-rdm__how-title, .wm-rep__how-title,
.nf-links-label, .docs-toc .toc-group{
  text-transform: uppercase;
  text-wrap: auto;
}

/* 1e · Birincil buton: kalın display, cümle düzeni. Versal display
   sesi yerine ağırlıkla öne çıkar — hangi düğmenin ana eylem olduğu
   yine tek bakışta okunur. */
.wm-btn--primary, .btn-primary, .btn-primary-lg, .wm-hero__cta{
  text-transform: none;
  letter-spacing: -.008em;
  font-variation-settings: "wdth" 104, "wght" 800;
}
.pp-warn-back, .pp-warn-confirm{
  text-transform: none; font-size: 13px; letter-spacing: .005em;
}

/* 1f · Nav: 11px/.04em versal haplar bir sıra bağıran pul gibiydi.
   13px cümle düzeni; aktif hap ağırlıkla ayrılır (zemin + halka zaten var). */
.wm-nav__links a, .wm-nav__cell,
#accountSlot a, #accountSlot button{
  text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 600;
}
.wm-nav__links a.wm-on{ font-weight: 700; }
.wm-nav__cell--disc{ font-weight: 700; }

/* Bölüm başı "hepsini gör" bağlantısı: 900/.06em versal → gövde ritmi */
.wm-shead__link{
  text-transform: none; letter-spacing: 0;
  font-size: var(--wm-t3); font-weight: 700;
}

/* 1h · Katalog kontrolleri: kategori hapları ve filtre çubuğu birer
   KONTROL, etiket değil — 11px/.115em versal hap sırası bağırıyordu.
   Seçili durum ağırlıkla ayrılır (dolgu/renk zaten var). Promo
   şeridinin "satın al" ucu da bir eylemdir, etiket değil. */
.wm-chead__cats a, .wm-fbar__cell{
  text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 600;
}
.wm-chead__cats a[aria-current="true"],
.wm-fbar__cell[aria-pressed="true"]{ font-weight: 700; }
/* Sıralama değeri yerel <select>: hapın içinde tek ses. */
.wm-fbar select{
  text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 700;
}
.wm-promo__cta{
  text-transform: none; letter-spacing: 0;
  font-size: var(--wm-t3); font-weight: 700;
}

/* Kart fiyat satırı: rakam zaten rakam; versal yalnız "…'den itibaren"
   ekini bağırtıyordu (her kartta bir kez). Cümle düzeni, sıkı aralık. */
.wm-pc__price{ text-transform: none; letter-spacing: -.005em; }

/* 1g · Paragraflar yetim kelime bırakmasın. */
.wm-hero__lead, .wm-shead p, .prose p, .wm-reason s, .wm-step s,
.wm-disc p, .faq-answer-inner{
  text-wrap: pretty;
}

/* ═══ 2 · HAREKET ═════════════════════════════════════════════════ */

/* 2a · Kaydırma girişi (yumuşak): daha kısa mesafe, daha uzun süre,
   metin bloklarında bir nefes blur. Görsel ızgaraları/raylar blur
   almaz (GPU maliyeti; onlar zaten çocuk kademesiyle canlanır). */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition:
    opacity   var(--wm-dur-3) var(--wm-ease-out),
    transform var(--wm-dur-3) var(--wm-ease-out),
    filter    var(--wm-dur-3) var(--wm-ease-out);
}
:is(.wm-rail, .wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-disc, .wm-nl).reveal{
  filter: none;
}
.reveal.in-view{ opacity: 1; transform: none; filter: none; }

/* 2b · Kademeli çocuklar: ızgara ve raylar tek blok yerine akış. */
:is(.wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-rail, .wm-cats).in-view > *{
  animation: wmTasteRise var(--wm-dur-3) var(--wm-ease-out) both;
}
:is(.wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-rail, .wm-cats).in-view > :nth-child(1){ animation-delay: 0ms; }
:is(.wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-rail, .wm-cats).in-view > :nth-child(2){ animation-delay: 70ms; }
:is(.wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-rail, .wm-cats).in-view > :nth-child(3){ animation-delay: 140ms; }
:is(.wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-rail, .wm-cats).in-view > :nth-child(4){ animation-delay: 210ms; }
:is(.wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-rail, .wm-cats).in-view > :nth-child(5){ animation-delay: 280ms; }
:is(.wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-rail, .wm-cats).in-view > :nth-child(6){ animation-delay: 350ms; }
:is(.wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-rail, .wm-cats).in-view > :nth-child(7){ animation-delay: 420ms; }
:is(.wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-rail, .wm-cats).in-view > :nth-child(8){ animation-delay: 490ms; }
@keyframes wmTasteRise{ from{ opacity: 0; transform: translateY(14px); } }

/* 2c · Kart kaldırma: -4px, kenar ışığı + derin gölge; basınca geri. */
.wm-cat, .wm-reason, .wm-nl__card, .wm-gcard, .card{
  transition:
    transform    var(--wm-dur-2) var(--wm-ease-out),
    border-color var(--wm-dur-2) var(--wm-ease-out),
    box-shadow   var(--wm-dur-2) var(--wm-ease-out);
}
.wm-cat:hover, .wm-reason:hover, .wm-nl__card:hover, .wm-gcard:hover{
  transform: translateY(var(--wm-lift));
  box-shadow: var(--wm-edge), var(--wm-e3);
}
.wm-cat:active, .wm-reason:active, .wm-gcard:active{
  transform: translateY(-1px) scale(.995);
  transition-duration: var(--wm-dur-1);
}
.wm-cat img{
  transition: transform var(--wm-dur-3) var(--wm-ease-out), filter var(--wm-dur-2) var(--wm-ease-out);
}
.wm-cat:hover img{ transform: scale(1.045); }

/* 2d · Buton fiziği: hover hafif kalkış, basınca scale(.98), yay eğrisi. */
.wm-btn, .btn{
  transition:
    transform    var(--wm-dur-1) var(--wm-ease-spring),
    background   var(--wm-dur-1) var(--wm-ease-out),
    box-shadow   var(--wm-dur-2) var(--wm-ease-out),
    color        var(--wm-dur-1) var(--wm-ease-out),
    border-color var(--wm-dur-1) var(--wm-ease-out);
}
.wm-btn:hover, .btn:hover{ transform: translateY(-1px); }
.wm-btn:active, .btn:active{ transform: translateY(0) scale(.98); }
.wm-btn--primary:active, .btn-primary:active{ box-shadow: var(--wm-sh-y); }
.wm-btn:disabled, .btn:disabled{ transform: none; }

/* İç ikon/ok itişi (soft-skill "nested icon nudge") */
.wm-btn svg, .wm-hero__quiet span, .wm-cat__go{
  transition: transform var(--wm-dur-2) var(--wm-ease-out),
              background var(--wm-dur-1) var(--wm-ease-out),
              color var(--wm-dur-1) var(--wm-ease-out);
}
.wm-btn:hover svg{ transform: translateX(2px); }
.wm-hero__quiet:hover span{ transform: translate(2px, -2px); }
.wm-cat:hover .wm-cat__go{ transform: translate(1px, -1px); }

/* 2e · Hero girişi. i18n perdesi (html.wm-i18n-pending) kalktığı anda
   kural eşleşir ve animasyon o anda başlar: perde açılışı "yükleniyor"
   değil "geliyor" gibi hissedilir. İngilizce ziyaretçide perde yoktur,
   sayfa açılır açılmaz oynar. */
html:not(.wm-i18n-pending) .wm-hero__support > *{
  animation: wmTasteUp var(--wm-dur-3) var(--wm-ease-out) both;
}
html:not(.wm-i18n-pending) .wm-hero__eyebrow{ animation-delay: 0ms; }
html:not(.wm-i18n-pending) .wm-hero__title{   animation-delay: 70ms; }
html:not(.wm-i18n-pending) .wm-hero__lead{    animation-delay: 140ms; }
html:not(.wm-i18n-pending) .wm-hero__acts{    animation-delay: 210ms; }
html:not(.wm-i18n-pending) .wm-hero__cols{
  animation: wmTasteSlide 900ms var(--wm-ease-out) 120ms both;
}
@keyframes wmTasteUp{    from{ opacity: 0; transform: translateY(16px); } }
@keyframes wmTasteSlide{ from{ opacity: 0; transform: translateX(22px); } }

/* 2f · Sessiz bağlantılar aynı eğriyle */
.wm-shead__link, .wm-foot__col a, .wm-foot__bar a, .wm-hero__quiet{
  transition: color var(--wm-dur-1) var(--wm-ease-out);
}

/* ═══ 4 · KOMPOZİSYON — anasayfa (taste-skill DESIGN_VARIANCE ≈ 7) ════
   Üç eşit kart, dört eşit kutu, ortalanmış metin: şablon kokan
   simetri. Bölümler asimetriye ve editoryal ritme geçer; yüzeyler
   soft-skill'in çift-çerçevesini (dış halka + iç üst ışık) alır.
   Sarı bütçesi korunur: dolu sarı yalnız hero CTA'sı ve Discord
   simgesi — altı dolu sarı ikon kutusu ile dört sarı adım diski
   halka/noktaya iner. Metin düğümleri değişmez (i18n).           */

:root{
  --wm-sect-y: clamp(88px, 9vw, 140px);
  --wm-r-xl: 16px;
  --wm-bezel-line: rgba(255,255,255,.075);
  --wm-bezel-top:  inset 0 1px 0 rgba(255,255,255,.075);
  --wm-bezel-bg:   linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%), var(--wm-k-raise);
}
@media (min-width: 861px){
  :root{ --wm-d2: clamp(38px, 4vw, 60px); }
}

/* 4a · Çift-çerçeveli yüzey (double-bezel) */
.wm-reason, .wm-nl__card, .wm-disc, .wm-cat, .wm-gcard{
  border: 1px solid var(--wm-bezel-line);
  box-shadow: var(--wm-bezel-top), 0 0 0 1px rgba(0,0,0,.55), var(--wm-e2);
}
.wm-reason, .wm-nl__card{ background: var(--wm-bezel-bg); border-radius: 14px; }
.wm-cat{ border-radius: 14px; }
.wm-reason:hover, .wm-nl__card:hover, .wm-gcard:hover{
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--wm-bezel-top), 0 0 0 1px rgba(0,0,0,.55), var(--wm-e3);
}

/* 4b · Spotlight kenarlık: sarı ışık imleci izler (wm-taste.js --mx/--my) */
.wm-spot{ position: relative; }
.wm-spot::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 3; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,199,0,.65), rgba(255,199,0,.10) 42%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--wm-dur-2) var(--wm-ease-out);
}
.wm-spot:hover::after{ opacity: 1; }

/* 4c · Bölüm başları: daha büyük başlık, daha çok hava */
.wm-shead{ margin-bottom: 36px; }
.wm-shead h2{ font-size: var(--wm-d2); }
.wm-shead p{ font-size: 15.5px; max-width: 56ch; }

/* 4d · Hero başlığı bir kademe daha dramatik */
.wm-hero--stacks .wm-hero__title{ font-size: clamp(40px, 5vw, 64px); letter-spacing: -.035em; }

/* 4e · Kanıt şeridi: dört kutu → çizgilerle ayrılmış editoryal sayılar */
.wm-stats{ gap: 0; }
.wm-stat{
  text-align: left; background: none; border: 0; border-radius: 0;
  padding: 10px 28px 10px 28px;
  border-left: 1px solid var(--wm-line-2);
}
.wm-stat:first-child{ border-left: 0; padding-left: 0; }
.wm-stat b{
  font-size: clamp(40px, 4.4vw, 58px); line-height: .98;
  font-weight: 800; font-variation-settings: "wdth" 112, "wght" 800;
  letter-spacing: -.03em; color: var(--wm-y);
}
.wm-stat s{ margin-top: 12px; color: var(--wm-g); }

/* 4f · "Neden burada": altı eşit kart → 7/5 zikzak bento, sola yaslı */
.wm-reasons{ grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.wm-reason{
  text-align: left; padding: 30px 30px 32px; min-height: 236px;
  display: flex; flex-direction: column; gap: 14px;
  transition-property: transform, border-color, box-shadow;
}
.wm-reason:nth-child(1), .wm-reason:nth-child(4), .wm-reason:nth-child(5){ grid-column: span 7; }
.wm-reason:nth-child(2), .wm-reason:nth-child(3), .wm-reason:nth-child(6){ grid-column: span 5; }
.wm-reason__ic{
  margin: 0 0 6px; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--wm-line-2); color: var(--wm-y);
  transition: background var(--wm-dur-2) var(--wm-ease-out), border-color var(--wm-dur-2) var(--wm-ease-out);
}
.wm-reason:hover .wm-reason__ic{ background: var(--wm-y-soft); border-color: var(--wm-y-line); }
.wm-reason b{ margin: 0; font-size: 21px; max-width: 24ch; }
.wm-reason:nth-child(1) b, .wm-reason:nth-child(4) b, .wm-reason:nth-child(5) b{ font-size: var(--wm-d3); }
.wm-reason s{ font-size: 14.5px; line-height: 1.65; max-width: 44ch; margin-top: auto; }
.wm-reason:nth-child(1) s, .wm-reason:nth-child(4) s, .wm-reason:nth-child(5) s{ font-size: 15.5px; max-width: 54ch; }

/* 4g · Dört adım: sarı diskler → hayalet rakam + nokta + bağlayıcı çizgi */
.wm-steps{ gap: 28px; padding-top: 22px; }
.wm-steps::before{
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
  background: linear-gradient(90deg, var(--wm-y-line-2), var(--wm-line-2) 30%, var(--wm-line-2) 70%, transparent);
}
.wm-step{ position: relative; text-align: left; padding: 0 12px 0 0; }
.wm-step::before{
  content: ""; position: absolute; left: 0; top: -22px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--wm-y); box-shadow: 0 0 0 4px var(--wm-k), 0 0 0 5px var(--wm-y-line);
}
.wm-step__n{
  width: auto; height: auto; margin: 0 0 12px; display: block; place-items: unset;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  font-size: clamp(38px, 4vw, 54px); line-height: 1;
  font-weight: 800; font-variation-settings: "wdth" 118, "wght" 800; letter-spacing: -.045em;
  color: rgba(255,255,255,.11);
  transition: color var(--wm-dur-2) var(--wm-ease-out);
}
.wm-step:hover .wm-step__n{ color: rgba(255,199,0,.28); }
.wm-step b{ font-size: 20px; margin-bottom: 8px; }
.wm-step s{ font-size: 14.5px; line-height: 1.65; max-width: 30ch; }

/* 4h · Discord: geniş, ışıklı çerçeve paneli */
.wm-disc{
  padding: 40px 42px; border-radius: var(--wm-r-xl); gap: 30px;
  background:
    radial-gradient(560px 280px at 0% 50%, rgba(255,199,0,.11), transparent 60%),
    linear-gradient(135deg, var(--wm-k-raise), var(--wm-k-sink));
}
.wm-disc__ic{ width: 72px; height: 72px; border-radius: 18px; }
.wm-disc__ic svg{ width: 34px; height: 34px; }
.wm-disc h2{ font-size: var(--wm-d2); margin-bottom: 10px; }
.wm-disc p{ font-size: 15px; }

/* 4i · Bülten: büyük başlık, tek satır form */
.wm-nl__copy h2{ font-size: var(--wm-d2); line-height: 1.02; }
.wm-nl__copy p{ font-size: 15.5px; }
.wm-nl__card{ padding: 36px 32px; }
.wm-nl__card h3{ font-size: 24px; }
.wm-nl__form{ flex-direction: row; gap: 8px; }
.wm-nl__form input{ flex: 1; min-width: 0; height: 50px; border-radius: 10px; }
.wm-nl__form .wm-btn{ height: 50px; padding: 0 20px; border-radius: 10px; flex: none; }

/* 4j · Kategori kartı: display adı, çift çerçeve zaten 4a'da */
.wm-cat__name{
  font-family: var(--wm-display); font-weight: 700;
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: 17px; letter-spacing: -.012em;
}

/* 4k · Manyetik CTA (wm-taste.js --tx/--ty) — yay eğrisiyle geri döner */
.wm-hero__cta{
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform var(--wm-dur-2) var(--wm-ease-spring),
              background var(--wm-dur-1) var(--wm-ease-out),
              box-shadow var(--wm-dur-2) var(--wm-ease-out);
}
.wm-hero__cta:hover{ transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 1px), 0); }
.wm-hero__cta:active{ transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(.98); }

/* 4l · Duyarlı: bento tek sütun, kanıt şeridi 2×2, zaman çizgisi dikey */
@media (max-width: 900px){
  .wm-reasons{ grid-template-columns: 1fr; }
  .wm-reason, .wm-reason:nth-child(n){ grid-column: auto; min-height: 0; }
  .wm-reason:nth-child(n) b{ font-size: 21px; }
  .wm-reason:nth-child(n) s{ font-size: 14.5px; max-width: none; }

  .wm-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .wm-stat{ padding: 0 0 0 20px; }
  .wm-stat:nth-child(odd){ border-left: 0; padding-left: 0; }

  .wm-steps{ grid-template-columns: 1fr; gap: 26px; padding-top: 0; }
  .wm-steps::before{ left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--wm-y-line-2), var(--wm-line-2) 30%, transparent); }
  .wm-step{ padding: 0 0 0 28px; }
  .wm-step::before{ top: 6px; }
  .wm-step__n{ font-size: 34px; margin-bottom: 8px; }

  .wm-disc{ padding: 30px 26px; }
}
@media (max-width: 560px){
  .wm-nl__form{ flex-direction: column; }
  .wm-nl__form .wm-btn{ width: 100%; }
  .wm-stat b{ font-size: 36px; }
}

/* ═══ 3 · HAREKET HASSASİYETİ ════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; filter: none; }
  :is(.wm-cards, .wm-reasons, .wm-steps, .wm-stats, .wm-rail, .wm-cats).in-view > *,
  html:not(.wm-i18n-pending) .wm-hero__support > *,
  html:not(.wm-i18n-pending) .wm-hero__cols{ animation: none; }
  .wm-btn:hover, .btn:hover, .wm-btn:active, .btn:active,
  .wm-cat:hover, .wm-reason:hover, .wm-nl__card:hover, .wm-gcard:hover,
  .wm-cat:hover img, .wm-btn:hover svg, .wm-hero__quiet:hover span{ transform: none; }
}

/* ---- wm-site4.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — SİTE IV · iç sayfaların tasarım dili  (anasayfa hariç her sayfada, EN SON)

   Anasayfa IV'ün dili (siyah + tek sarı, çift çerçeveli yüzeyler, hap
   düğmeler ve düğme içinde düğme, kapak kartları, yay eğrisi, bulanık
   giriş) bütün iç sayfalara buradan dağılır. İki katman:

     A · s4- ilkelleri  yeni işaretlemenin kullandığı bileşenler
                         (hero, kabuk/çekirdek, düğmeler, sekme rayı, alanlar,
                         okuma düzeni, boş durum, küçük deste)
     B · ortak yükseltme mevcut paylaşılan bileşenlerin (page-head,
                         breadcrumbs, card, form, tablo…) aynı dile çekilmesi

   Şekil kuralı (taste-skill shape lock): etkileşimli = hap, kabuk = 24px,
   çekirdek = 18px, küçük görsel = 12px. Sarı bütçesi: sayfa başına bir dolu
   sarı birincil eylem. Hareket CSS'te; JS (wm-site4.js) yalnız değişken ve
   sınıf yazar. Reduced-motion'da her şey durur.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --s4-shell: rgba(255,255,255,.035);
  --s4-shell-line: rgba(255,255,255,.08);
  --s4-core-top: inset 0 1px 0 rgba(255,255,255,.08);
  --s4-r-shell: 24px;
  --s4-r-core: 18px;
  --s4-r-thumb: 12px;
  --s4-sect-y: clamp(64px, 7vw, 112px);
  --s4-max: 1265px;
}

/* ═══ A1 · Kabuk / çekirdek (double bezel) ═══════════════════════ */
.s4-shell{
  padding: 6px; border-radius: var(--s4-r-shell);
  background: var(--s4-shell); border: 1px solid var(--s4-shell-line);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), var(--wm-e2);
}
.s4-core{ border-radius: var(--s4-r-core); background: var(--wm-k-raise); box-shadow: var(--s4-core-top); }
.s4-core--pad{ padding: clamp(22px, 2.6vw, 34px); }

/* ═══ A2 · Düğmeler ═════════════════════════════════════════════ */
.s4-cta{
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 54px; padding: 7px 7px 7px 26px; border-radius: var(--wm-r-pill);
  background: var(--wm-y); color: var(--wm-on-y); border: 1px solid var(--wm-y-hi); box-shadow: var(--wm-sh-y);
  font-family: var(--wm-display); font-size: 15px; font-weight: 800; font-variation-settings: "wdth" 106, "wght" 800;
  text-decoration: none; text-transform: none; letter-spacing: .005em; white-space: nowrap; cursor: pointer;
  transition: background var(--wm-dur-2) var(--wm-ease-out), box-shadow var(--wm-dur-2) var(--wm-ease-out), transform var(--wm-dur-2) var(--wm-ease-spring);
}
.s4-cta:hover{ background: var(--wm-y-hi); box-shadow: var(--wm-sh-y-hi); transform: translateY(-1px); }
.s4-cta:active{ transform: scale(.98); }
.s4-cta:disabled, .s4-cta[aria-disabled="true"]{ background: var(--wm-k-raise-2); color: var(--wm-g-dim); border-color: var(--wm-line); box-shadow: none; cursor: not-allowed; transform: none; }
.s4-ic{
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(10,10,10,.16); color: inherit;
  transition: transform var(--wm-dur-2) var(--wm-ease-out), background var(--wm-dur-2) var(--wm-ease-out);
}
.s4-ic svg{ width: 18px; height: 18px; }
.s4-cta:hover .s4-ic{ transform: translateX(3px); background: rgba(10,10,10,.26); }
.s4-ghost{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 22px; border-radius: var(--wm-r-pill); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  color: var(--wm-w); font-family: var(--wm-body); font-size: 14.5px; font-weight: 700;
  transition: border-color var(--wm-dur-2) var(--wm-ease-out), background var(--wm-dur-2) var(--wm-ease-out), transform var(--wm-dur-2) var(--wm-ease-spring), color var(--wm-dur-2) var(--wm-ease-out);
}
.s4-ghost svg{ width: 18px; height: 18px; color: var(--wm-y); flex: none; }
.s4-ghost:hover{ border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.08); transform: translateY(-1px); }
.s4-ghost:active{ transform: scale(.98); }
.s4-ghost.s4-ghost--ic{ padding: 6px 6px 6px 20px; justify-content: space-between; }
.s4-ghost .s4-ic{ width: 38px; height: 38px; background: rgba(255,255,255,.08); color: var(--wm-w); }
.s4-ghost:hover .s4-ic{ background: var(--wm-y); color: var(--wm-on-y); transform: translateX(3px); }
.s4-link{
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--wm-y);
  font-size: var(--wm-t3); font-weight: 700; transition: color var(--wm-dur-1) var(--wm-ease-out);
}
.s4-link span{ transition: transform var(--wm-dur-2) var(--wm-ease-out); }
.s4-link:hover{ color: var(--wm-y-hi); }
.s4-link:hover span{ transform: translateX(3px); }

/* ═══ A3 · İç sayfa hero'su ═════════════════════════════════════
   Anasayfa hero'sunun küçük kardeşi: aynı ışık ve yarım ton doku,
   ekran köşesine değil içeriğe bağlı. Sunucunun değiştirdiği düz
   <h1> ve .breadcrumbs'ı da (shop/category) sınıf gerektirmeden giydirir. */
.s4-hero{ position: relative; overflow: hidden; isolation: isolate; background: var(--wm-k); padding: clamp(34px, 4.4vw, 60px) 0 clamp(40px, 5vw, 68px); }
.s4-hero__bg{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(720px 420px at calc(50% - 540px) 0%, rgba(255,199,0,.15), transparent 62%),
    radial-gradient(620px 380px at calc(50% + 560px) 30%, rgba(255,199,0,.09), transparent 62%);
}
.s4-hero__bg::after{
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(520px 340px at calc(50% + 520px) 42%, #000, transparent 72%), radial-gradient(420px 260px at calc(50% - 620px) 12%, #000, transparent 72%);
          mask-image: radial-gradient(520px 340px at calc(50% + 520px) 42%, #000, transparent 72%), radial-gradient(420px 260px at calc(50% - 620px) 12%, #000, transparent 72%);
}
.s4-hero::after{  /* alt kenarda ince ışık çizgisi: hero ile içerik ayrışır */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,199,0,.22), rgba(255,255,255,.08) 60%, transparent);
}
.s4-hero__in{
  position: relative; z-index: 2; max-width: var(--s4-max); margin: 0 auto; padding-inline: var(--wm-gut);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
}
.s4-hero--split .s4-hero__in{ grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.s4-hero--center .s4-hero__in{ text-align: center; justify-items: center; }
.s4-hero--center .s4-hero__copy{ max-width: 760px; }
.s4-hero__copy{ min-width: 0; max-width: 680px; }
.s4-hero .breadcrumbs, .s4-crumbs{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px;
  font-size: 12px; font-weight: 700; color: var(--wm-g-dim); letter-spacing: .02em;
}
.s4-hero--center .breadcrumbs, .s4-hero--center .s4-crumbs{ justify-content: center; }
.s4-hero .breadcrumbs a, .s4-crumbs a{ color: var(--wm-g); text-decoration: none; transition: color var(--wm-dur-1) var(--wm-ease-out); }
.s4-hero .breadcrumbs a:hover, .s4-crumbs a:hover{ color: var(--wm-y); }
.s4-hero .breadcrumbs span:last-child, .s4-crumbs [aria-current]{ color: var(--wm-w); }
.s4-hero h1, .s4-hero .s4-hero__title{
  margin: 0; color: var(--wm-w); font-family: var(--wm-display); font-size: clamp(38px, 4.4vw, 62px); line-height: 1.02;
  font-weight: 850; font-variation-settings: "wdth" 112, "wght" 850; letter-spacing: -.034em;
  text-transform: none; text-wrap: balance;
}
.s4-hero h1 em{ font-style: normal; color: var(--wm-y); }
.s4-hero__lead{ margin: 18px 0 0; max-width: 56ch; color: var(--wm-g); font-size: 16.5px; line-height: 1.65; text-wrap: pretty; }
.s4-hero--center .s4-hero__lead{ margin-inline: auto; }
.s4-hero__acts{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.s4-hero--center .s4-hero__acts{ justify-content: center; }
.s4-hero__visual{ position: relative; min-width: 0; justify-self: center; width: 100%; }
/* Giriş koreografisi (i18n perdesi kalkınca) */
html:not(.wm-i18n-pending) .s4-hero__copy > *{ animation: s4-up 760ms var(--wm-ease-out) both; }
html:not(.wm-i18n-pending) .s4-hero__copy > :nth-child(2){ animation-delay: 70ms; }
html:not(.wm-i18n-pending) .s4-hero__copy > :nth-child(3){ animation-delay: 140ms; }
html:not(.wm-i18n-pending) .s4-hero__copy > :nth-child(4){ animation-delay: 210ms; }
html:not(.wm-i18n-pending) .s4-hero__visual{ animation: s4-in 900ms var(--wm-ease-out) 160ms both; }
@keyframes s4-up{ from{ opacity: 0; transform: translateY(16px); filter: blur(7px); } }
@keyframes s4-in{ from{ opacity: 0; transform: translateY(20px) scale(.98); filter: blur(9px); } }

/* ═══ A4 · Küçük kapak destesi (hero görseli) ═════════════════════
   Üç kapak, yelpaze; imleçle derinlik (--px/--py, wm-site4.js). JS gerçek
   çok satanlarla doldurur; statik kapaklar ilk boyama için. */
.s4-deck{ position: relative; width: min(100%, 420px); aspect-ratio: 1.18; margin-inline: auto; perspective: 1300px; }
.s4-deck__card{
  position: absolute; top: 8%; width: 58%; aspect-ratio: 1; display: block; padding: 5px; border-radius: 20px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 26px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6);
  transform: translate3d(calc(var(--px, 0) * 12px * var(--d)), calc(var(--lift, 0px) + var(--py, 0) * 9px * var(--d)), 0) rotate(var(--rz)) scale(var(--s, 1));
  transition: transform 700ms var(--wm-ease-out), filter 500ms var(--wm-ease-out);
  filter: brightness(var(--b, 1));
}
.s4-deck__card img{ width: 100%; height: 100%; object-fit: cover; border-radius: 15px; display: block; }
.s4-deck__card:nth-child(1){ left: 0;   --rz: -9deg; --d: .5; --b: .72; --s: .9; top: 14%; }
.s4-deck__card:nth-child(2){ right: 0;  --rz: 9deg;  --d: .5; --b: .72; --s: .9; top: 14%; }
.s4-deck__card:nth-child(3){ left: 21%; --rz: -1deg; --d: 1;  z-index: 2; top: 2%; }
.s4-deck__card:hover{ --lift: -8px; --b: 1.04; z-index: 3; }
.s4-deck__tag{
  position: absolute; left: 5px; right: 5px; bottom: 5px; padding: 22px 12px 10px; border-radius: 0 0 15px 15px; pointer-events: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  background: linear-gradient(rgba(10,10,10,0), rgba(10,10,10,.92) 45%); color: var(--wm-w);
  opacity: 0; transform: translateY(10px); transition: opacity var(--wm-dur-2) var(--wm-ease-out), transform var(--wm-dur-2) var(--wm-ease-out);
}
.s4-deck__tag:empty{ display: none; }
.s4-deck__tag b{ min-width: 0; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s4-deck__tag s{ text-decoration: none; flex: none; color: var(--wm-y); font-size: 11.5px; font-weight: 800; }
.s4-deck__card:hover .s4-deck__tag, .s4-deck__card:focus-visible .s4-deck__tag{ opacity: 1; transform: none; }

/* ═══ A5 · Bölümler ve başlıklar ════════════════════════════════ */
.s4-sect{ padding-top: var(--s4-sect-y); }
.s4-sect:last-child{ padding-bottom: var(--s4-sect-y); }
.s4-inner{ max-width: var(--s4-max); margin: 0 auto; padding-inline: var(--wm-gut); }
.s4-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.s4-head h2{
  margin: 0; color: var(--wm-w); font-family: var(--wm-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.04;
  font-weight: 800; font-variation-settings: "wdth" 112, "wght" 800; letter-spacing: -.028em; text-transform: none; text-wrap: balance;
}
.s4-head p{ margin: 10px 0 0; color: var(--wm-g); font-size: 15px; line-height: 1.6; max-width: 58ch; }

/* ═══ A6 · Sekme rayı (oyun seçici; anasayfa ile aynı dil) ═══════ */
.s4-tabs{ display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 6px; }
.s4-tabs::-webkit-scrollbar{ display: none; }
.s4-tab{
  position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 88px;
  padding: 11px 8px 12px; border-radius: 16px; cursor: pointer; scroll-snap-align: start; text-decoration: none;
  background: transparent; border: 1px solid transparent; color: var(--wm-g);
  font-family: var(--wm-body); font-size: 12.5px; font-weight: 700; line-height: 1.2;
  transition: color var(--wm-dur-2) var(--wm-ease-out), background var(--wm-dur-2) var(--wm-ease-out), border-color var(--wm-dur-2) var(--wm-ease-out);
}
.s4-tab img, .s4-tab__all{
  width: 52px; height: 52px; border-radius: 14px; object-fit: cover; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.10); background: var(--wm-k-raise); color: var(--wm-y);
  transition: transform 520ms var(--wm-ease-spring), box-shadow var(--wm-dur-2) var(--wm-ease-out), border-color var(--wm-dur-2) var(--wm-ease-out);
}
.s4-tab__all svg{ width: 22px; height: 22px; }
.s4-tab span{ max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s4-tab em{ font-style: normal; color: var(--wm-g-dim); font-size: 11px; font-weight: 700; margin-top: -4px; }
.s4-tab:hover{ color: var(--wm-w); background: rgba(255,255,255,.03); }
.s4-tab:hover img, .s4-tab:hover .s4-tab__all{ transform: translateY(-2px); border-color: rgba(255,255,255,.2); }
.s4-tab.is-active{ color: var(--wm-w); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.s4-tab.is-active img, .s4-tab.is-active .s4-tab__all{
  transform: translateY(-3px) scale(1.06); border-color: transparent;
  box-shadow: 0 0 0 2px var(--wm-k), 0 0 0 4px var(--wm-y), 0 14px 30px rgba(255,199,0,.25);
}
.s4-tab:focus-visible{ outline: 2px solid var(--wm-y); outline-offset: 2px; }

/* ═══ A7 · Alanlar ve arama ══════════════════════════════════════ */
.s4-search{
  position: relative; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 8px 0 18px;
  border-radius: var(--wm-r-pill); background: var(--wm-k-sink); border: 1px solid var(--wm-line-2);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  transition: border-color var(--wm-dur-2) var(--wm-ease-out), box-shadow var(--wm-dur-2) var(--wm-ease-out);
}
.s4-search:focus-within{ border-color: var(--wm-y); box-shadow: inset 0 1px 2px rgba(0,0,0,.35), var(--wm-ring); }
.s4-search > svg{ width: 18px; height: 18px; color: var(--wm-g); flex: none; }
.s4-search input{
  flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--wm-w);
  font-family: var(--wm-body); font-size: 15px; font-weight: 600;
}
.s4-search input::placeholder{ color: var(--wm-g-dim); }
.s4-search kbd{
  flex: none; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--wm-line-2); color: var(--wm-g-dim);
  font: 700 10.5px/1 var(--wm-body); letter-spacing: .06em;
}
.s4-field{ display: flex; flex-direction: column; gap: 8px; }
.s4-field > label, .s4-label{ font-size: var(--wm-t3); font-weight: 700; color: var(--wm-g); }
.s4-input, .s4-field input:not([type="checkbox"]):not([type="radio"]), .s4-field select, .s4-field textarea{
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px; background: var(--wm-k-sink); color: var(--wm-w);
  border: 1px solid var(--wm-line-2); box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  font-family: var(--wm-body); font-size: 14.5px;
  transition: border-color var(--wm-dur-2) var(--wm-ease-out), box-shadow var(--wm-dur-2) var(--wm-ease-out);
}
.s4-field textarea{ min-height: 140px; padding: 14px 16px; resize: vertical; line-height: 1.55; }
.s4-input:focus, .s4-field input:focus, .s4-field select:focus, .s4-field textarea:focus{ outline: 0; border-color: var(--wm-y); box-shadow: inset 0 1px 2px rgba(0,0,0,.35), var(--wm-ring); }

/* ═══ A8 · Okuma düzeni (yasal metinler, dokümanlar) ═════════════ */
.s4-read{ display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.s4-toc{ position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 18px; background: var(--wm-k-raise); border: 1px solid var(--wm-line); }
.s4-toc b{ margin: 2px 8px 10px; font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase; color: var(--wm-g-dim); }
.s4-toc a{
  display: block; padding: 8px 10px; border-radius: 10px; color: var(--wm-g); text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1.35;
  transition: color var(--wm-dur-1) var(--wm-ease-out), background var(--wm-dur-1) var(--wm-ease-out);
}
.s4-toc a:hover{ color: var(--wm-w); background: rgba(255,255,255,.04); }
.s4-toc a.is-active{ color: var(--wm-y); background: var(--wm-y-soft); }
.s4-prose{ max-width: 72ch; color: rgba(247,247,249,.82); font-size: 15.5px; line-height: 1.78; }
.s4-prose h2{
  margin: 2.2em 0 .6em; color: var(--wm-w); font-family: var(--wm-display); font-size: 26px; line-height: 1.15;
  font-weight: 800; font-variation-settings: "wdth" 108, "wght" 800; letter-spacing: -.02em; text-transform: none; scroll-margin-top: 96px;
}
.s4-prose h2:first-child{ margin-top: 0; }
.s4-prose h3{ margin: 1.8em 0 .5em; color: var(--wm-w); font-size: 18px; font-weight: 800; text-transform: none; scroll-margin-top: 96px; }
.s4-prose p{ margin: 0 0 1.05em; }
.s4-prose ul, .s4-prose ol{ margin: 0 0 1.1em; padding-left: 1.3em; }
.s4-prose li{ margin: .35em 0; }
.s4-prose li::marker{ color: var(--wm-y); }
.s4-prose a{ color: var(--wm-y); text-decoration: underline; text-decoration-color: var(--wm-y-line); text-underline-offset: 3px; }
.s4-prose a:hover{ text-decoration-color: var(--wm-y); }
.s4-prose strong{ color: var(--wm-w); }

/* ═══ A9 · Sayaç karoları, boş durum, rozet ═════════════════════ */
.s4-kpis{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.s4-kpi{ padding: 5px; border-radius: 20px; background: var(--s4-shell); border: 1px solid var(--s4-shell-line); }
.s4-kpi > div{ padding: 16px 18px; border-radius: 15px; background: var(--wm-k-raise); box-shadow: var(--s4-core-top); display: flex; flex-direction: column; gap: 8px; }
.s4-kpi b{ color: var(--wm-w); font-family: var(--wm-display); font-size: 30px; line-height: 1; font-weight: 800; font-variation-settings: "wdth" 110, "wght" 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.s4-kpi span{ color: var(--wm-g); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.s4-kpi--ok b{ color: var(--wm-ok); }
.s4-kpi--warn b{ color: var(--wm-warn); }
.s4-empty{
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: clamp(40px, 6vw, 72px) 24px; border-radius: var(--s4-r-shell); border: 1px dashed var(--wm-line-2); color: var(--wm-g);
}
.s4-empty b{ color: var(--wm-w); font-family: var(--wm-display); font-size: 22px; font-weight: 800; font-variation-settings: "wdth" 108, "wght" 800; }
.s4-chip{
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--wm-r-pill);
  background: rgba(255,255,255,.04); border: 1px solid var(--wm-line-2); color: var(--wm-g); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.s4-chip svg{ width: 14px; height: 14px; color: var(--wm-y); }

/* ═══ B · ORTAK YÜKSELTME: paylaşılan bileşenler aynı dile ═══════
   Sınıf adları JS tarafından üretildiği/okunduğu için DEĞİŞMEZ; yalnız
   görünüm. Elle yeniden tasarlanmayan sayfalar da buradan yükselir.   */

/* B1 · Sayfa başı → iç sayfa hero'su */
.page-head{
  position: relative; overflow: hidden; isolation: isolate; margin-bottom: 0;
  padding: clamp(34px, 4.4vw, 60px) 0 clamp(36px, 4.6vw, 62px);
  border-bottom: 0;
  background:
    radial-gradient(720px 420px at calc(50% - 540px) 0%, rgba(255,199,0,.14), transparent 62%),
    radial-gradient(620px 380px at calc(50% + 560px) 30%, rgba(255,199,0,.08), transparent 62%),
    var(--wm-k);
}
.page-head::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.075) 1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(520px 320px at calc(50% + 520px) 40%, #000, transparent 72%);
          mask-image: radial-gradient(520px 320px at calc(50% + 520px) 40%, #000, transparent 72%);
}
.page-head::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,199,0,.22), rgba(255,255,255,.08) 60%, transparent);
}
.page-head h1{
  margin: 16px 0 0; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.03; font-weight: 850;
  font-variation-settings: "wdth" 112, "wght" 850; letter-spacing: -.032em; text-transform: none; text-wrap: balance;
}
.page-head p{ margin-top: 16px; font-size: 16.5px; max-width: 60ch; text-wrap: pretty; }
/* Rehber sayfasında başlığı önce sunucu, sonra guides.js çizer: giriş iki kez
   oynamasın diye orada kapalı. */
html:not(.wm-i18n-pending) body:not([data-page="guides"]) .page-head .container > *{ animation: s4-up 720ms var(--wm-ease-out) both; }
html:not(.wm-i18n-pending) body:not([data-page="guides"]) .page-head .container > :nth-child(2){ animation-delay: 70ms; }
html:not(.wm-i18n-pending) body:not([data-page="guides"]) .page-head .container > :nth-child(3){ animation-delay: 140ms; }

/* B2 · Kırıntı: mikro VERSAL yerine sakin cümle düzeni */
.breadcrumbs{ font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--wm-g-dim); }
.breadcrumbs span:last-child{ color: var(--wm-w); }

/* B3 · Bölüm başlıkları */
.section-head h2, .section h2{
  font-size: clamp(26px, 2.8vw, 40px); line-height: 1.05; font-weight: 800;
  font-variation-settings: "wdth" 112, "wght" 800; letter-spacing: -.026em; text-transform: none; text-wrap: balance;
}
.section{ padding: clamp(48px, 5.6vw, 84px) 0; }
.section-tight{ padding: clamp(30px, 3.6vw, 48px) 0 clamp(56px, 6vw, 96px); }

/* B4 · Düğmeler: hap; birincil yay eğrili */
.btn{ border-radius: var(--wm-r-pill); padding: 0 22px; transition: background var(--wm-dur-2) var(--wm-ease-out), color var(--wm-dur-2) var(--wm-ease-out), border-color var(--wm-dur-2) var(--wm-ease-out), box-shadow var(--wm-dur-2) var(--wm-ease-out), transform var(--wm-dur-2) var(--wm-ease-spring); }
.btn:not(.btn-primary){ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.btn:not(.btn-primary):hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.26); color: var(--wm-w); transform: translateY(-1px); }
.btn-outline{ color: var(--wm-y); border-color: var(--wm-y-line) !important; }
.btn-outline:hover{ color: var(--wm-y) !important; background: var(--wm-y-soft) !important; border-color: var(--wm-y-line-2) !important; }
.btn-outline-danger{ color: var(--wm-bad); border-color: var(--wm-bad-line) !important; }
.btn-outline-danger:hover{ color: var(--wm-bad) !important; background: var(--wm-bad-soft) !important; }
.btn-primary{ text-transform: none; letter-spacing: .005em; }
.btn:active{ transform: scale(.98); }
.btn-lg{ height: 54px; padding: 0 30px; }
.btn:disabled, .btn[disabled]{ transform: none !important; }
/* Meşgul/devre dışı ikincil düğmeler de öyle görünsün: yukarıdaki
   .btn:not(.btn-primary) zemini :disabled görünümünü eziyordu. */
.btn:not(.btn-primary):disabled, .btn:not(.btn-primary)[disabled]{ opacity: .5; cursor: not-allowed; background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
.icon-btn{ border-radius: 50%; }

/* B5 · Formlar: okunur etiket, 50px alan, iç gölge, sarı odak halkası.
   Arama kutuları bilerek dışarıda: hepsi kendi hap bileşeninin içinde
   (nav, mağaza, durum, rehber) ve boylarını o bileşen belirler. */
.field{ gap: 8px; margin-bottom: 16px; }
.field label, .field > label{ font-size: 12.5px; font-weight: 700; letter-spacing: .01em; text-transform: none; color: var(--wm-g); }
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="url"], textarea, select{
  min-height: 50px; border-radius: 12px; box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  transition: border-color var(--wm-dur-2) var(--wm-ease-out), box-shadow var(--wm-dur-2) var(--wm-ease-out);
}
input:not([type="search"]):not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus{ border-color: var(--wm-y); box-shadow: inset 0 1px 2px rgba(0,0,0,.35), var(--wm-ring); }

/* B6 · Kart ve paneller: çift çerçeve hissi (dış halka + üst ışık) */
.card, .panel, .stat-box, .summary-card, .trust-card, .contact-info-card,
.balance-card, .doc-card, .guide-card, .job-role-card, .giveaway-card,
.sidebar-block, .help-card, .account-section{
  border-radius: var(--s4-r-core); border-color: rgba(255,255,255,.075);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 42%), var(--wm-k-raise);
  box-shadow: var(--s4-core-top), 0 0 0 1px rgba(0,0,0,.5), var(--wm-e2);
}
.card:hover, .doc-card:hover, .guide-card:hover, .job-role-card:hover{ border-color: rgba(255,255,255,.14); }
.stat-box b, .stat-box .num, .stat-box strong{ font-weight: 800; font-variation-settings: "wdth" 110, "wght" 800; letter-spacing: -.03em; }
.trust-icon, .doc-icon, .job-role-icon, .auth-why-icon, .trust-card svg{
  border-radius: 12px; background: rgba(255,255,255,.04); border-color: var(--wm-line-2);
}

/* B7 · Okuma metni */
.prose, .docs-article{ color: rgba(247,247,249,.8); font-size: 15.5px; line-height: 1.78; }
.prose :is(h2, h3, h4), .docs-article :is(h2, h3, h4){ font-weight: 800; font-variation-settings: "wdth" 108, "wght" 800; letter-spacing: -.018em; text-transform: none; }
.prose h2, .docs-article h2{ font-size: 26px; }
.prose h2{ margin-top: 2em; }
.prose li::marker, .docs-article li::marker{ color: var(--wm-y); }
.prose a, .docs-article a{ text-decoration: underline; text-decoration-color: var(--wm-y-line); text-underline-offset: 3px; }
.wm-legal-note{ border-radius: 14px; }

/* B8 · Kapanış bandı (final-cta) */
.final-cta{ position: relative; overflow: hidden; isolation: isolate; }
.final-cta::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(640px 280px at 50% 100%, rgba(255,199,0,.12), transparent 64%);
}

/* ═══ A10 · Duyarlı ═════════════════════════════════════════════ */
@media (max-width: 980px){
  .s4-hero--split .s4-hero__in{ grid-template-columns: 1fr; }
  .s4-hero__visual{ max-width: 460px; }
  .s4-read{ grid-template-columns: 1fr; }
  .s4-toc{ position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px; }
  .s4-toc::-webkit-scrollbar{ display: none; }
  .s4-toc b{ display: none; }
  .s4-toc a{ flex: none; white-space: nowrap; }
}
@media (max-width: 640px){
  .s4-hero h1, .s4-hero .s4-hero__title{ font-size: clamp(32px, 9vw, 42px); }
  .s4-hero__lead{ font-size: 15.5px; }
  .s4-hero__acts{ flex-direction: column; align-items: stretch; }
  .s4-hero__acts > *{ justify-content: center; }
  .s4-cta{ justify-content: space-between; }
  .s4-tab{ min-width: 80px; }
  .s4-tab img, .s4-tab__all{ width: 46px; height: 46px; }
}

/* ═══ A11 · Hareket hassasiyeti ═════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html:not(.wm-i18n-pending) .s4-hero__copy > *, html:not(.wm-i18n-pending) .s4-hero__visual,
  html:not(.wm-i18n-pending) .page-head .container > *{ animation: none !important; }
  .btn{ transition: none; }
  .btn:hover, .btn:active{ transform: none; }
  .s4-deck__card, .s4-cta, .s4-ghost, .s4-ic, .s4-tab, .s4-tab img, .s4-tab__all{ transition: none; }
  .s4-deck__card{ transform: rotate(var(--rz)) scale(var(--s, 1)); }
  .s4-cta:hover, .s4-ghost:hover, .s4-deck__card:hover{ transform: none; }
}