/* =====================================================================
   PATCHKINS PARTY — Figma "WebSiteReferanca" frame BİREBİR
   Tuval: 1920 x 5376.  Tüm konum/boyut/font canvas.fig'ten çıkarıldı.
   cqw = tuval genişliğinin %1'i (1920 tuvalde 19.2px).
   ===================================================================== */
/* Finger Paint'te Çince karakter yok; CJK yazılar sistem fontuna düşsün */
:root{ --ink:#4a3a28;
  --f:"Finger Paint","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",system-ui,cursive; }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:#1e1e1e;color:#efe6d4;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.stage{position:relative;width:100%;margin:0 auto;
  aspect-ratio:1920/5576;container-type:inline-size;overflow:hidden;background:#1e1e1e}
.el{position:absolute}
img.el{height:auto}

/* ===== HERO ===== */
.el-hero{left:0;top:0;width:100%;z-index:1}

/* ===== NAV (tek parça ölçeklenebilir) =====
   Büyütmek/küçültmek için sadece --nav-w değerini değiştir; sol otomatik ortalanır. */
:root{ --nav-w:60%; }
.el-nav{left:calc((100% - var(--nav-w)) / 2);top:0;width:var(--nav-w);z-index:5}
.nav__banner{width:100%;display:block}
.navbtn{position:absolute;top:9.5%;height:28%;z-index:6;
  display:grid;place-items:center;
  background:url('../images/TitleButton.png') center/100% 100% no-repeat;
  font-family:var(--f);font-size:0.9cqw;color:#f4efe4;
  text-shadow:0 1px 2px rgba(0,0,0,.5);cursor:pointer;transition:transform .15s,filter .15s}
.navbtn:hover{background-image:url('../images/TitleButtonHover.png');transform:translateY(-2px);filter:brightness(1.05)}
.nb-v{left:3.9%;width:12.33%}
.nb-g{left:20.23%;width:12.33%}
.nb-c{left:67.65%;width:12.33%}
.nb-l{left:84.40%;width:12.33%}

/* ===== VIDEO / WAGON =====
   Vagon, ekranı Figma ekran koordinatına (L37.44 T24.48 W25.17) hizalayacak
   şekilde yerleştirildi (VideoPanel görseli kendi en-boyunu korur). */
.el-wagon{left:26.98%;top:20.5553%;width:41.30%;z-index:2}
.wagon__img{width:100%}
.wagon__screen{position:absolute;left:25.40%;top:28.20%;width:60.90%;height:44.00%;
  overflow:hidden;z-index:1;background:#000}
/* pasif slaytlar opacity:0 ile görünmez ama DOM'da üstte duruyor; pointer-events
   kapatılmazsa en sondaki slayt hover'ı ve tıklamayı yiyor (hep son video açılırdı) */
.vslide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;pointer-events:none;transition:opacity .5s;cursor:pointer;display:grid;place-items:center}
.vslide.is-active{opacity:1;pointer-events:auto}
.playbtn{width:10%;aspect-ratio:1;border-radius:50%;border:.22cqw solid #fff;
  background:rgba(200,68,59,.85);cursor:pointer;box-shadow:0 .3cqw .8cqw rgba(0,0,0,.5);
  position:relative;opacity:0;transition:transform .2s,background .2s,opacity .2s}
.playbtn::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:.9cqw solid #fff;border-top:.54cqw solid transparent;border-bottom:.54cqw solid transparent;transform:translateX(22%)}
.vslide:hover .playbtn{transform:scale(1.12);background:#e0574d;opacity:1}
/* oklar VideoPanel'in ahşap kapaklarında asılı — her zaman görünür */
.warrow{position:absolute;width:9.3%;height:33%;top:26%;border:none;cursor:pointer;
  background:center/contain no-repeat;z-index:3;transition:transform .15s;opacity:1}
.warrow--prev{left:14.15%;background-image:url('../images/LeftArrowVideo.png')}
.warrow--next{left:88.22%;background-image:url('../images/RightArrowVideo.png')}
.warrow--prev:hover{background-image:url('../images/LeftArrowVideoHover.png');transform:scale(1.08)}
.warrow--next:hover{background-image:url('../images/RightArrowVideoHover.png');transform:scale(1.08)}

/* ===== STEAM WIDGET (videonun altı) =====
   Steam iframe'i sabit 646x190 üretiyor, ölçeklenmiyor. Bu yüzden kutuyu
   tuvale oranlı tutup iframe'i script.js içinden transform:scale ile
   büyütüp küçültüyoruz. Tuval bu widget için 5376 -> 5576 uzatıldı;
   altındaki her şey 200px aşağı kaydırıldı (oranlar yeniden hesaplandı). */
.el-steam{left:33.177%;top:32.1019%;width:33.646%;aspect-ratio:646/190;z-index:3}
/* iframe akıştan çıkarıldı; yoksa 190px'lik sabit yüksekliği kutunun
   aspect-ratio'sunu ezip küçük ekranlarda boşluk bırakıyor */
.el-steam iframe{position:absolute;top:0;left:0;width:646px;height:190px;
  border:0;display:block;transform-origin:0 0;color-scheme:normal}

/* ===== GAME / PARCHMENT ===== */
.el-parch{left:29.06%;top:36.3866%;width:44.58%;z-index:2}
/* başlık, ahşap plakanın krem iç panelinde ortalı (görselde x112–303 / y28–92) */
.el-gametitle{left:34.893%;top:36.8889%;width:9.948%;height:1.1300%;z-index:3;
  display:grid;place-items:center;text-align:center;line-height:1.05;
  font-family:var(--f);font-weight:400;font-size:0.92cqw;color:#5a4a34}
.el-gamedesc{left:34.17%;top:38.8837%;width:31.72%;z-index:3;
  font-family:var(--f);font-size:0.623cqw;color:#4a3a28;line-height:1.5}

/* ===== MODES ===== */
.modehdr{font-family:var(--f);font-weight:400;color:#3f3226;font-size:1.002cqw;z-index:3}
.modedesc{font-family:var(--f);color:#5a4a38;font-size:0.563cqw;line-height:1.45;z-index:3}
/* mod görselleri: yatay görünür konum; metinler her kartın notuna göre hizalı */
.el-mode1{left:31.20%;top:42.1424%;width:34.90%}
.el-m1t{left:44.8%;top:43.9164%;width:18.5%}
.el-m1d{left:44.8%;top:44.6974%;width:17.5%}
.el-mode2{left:35.52%;top:46.6642%;width:36.98%}
.el-m2t{left:39.16%;top:48.9492%;width:17%}
.el-m2d{left:39.16%;top:49.7591%;width:15.6%}
.el-mode3{left:31.04%;top:51.8995%;width:32.71%}
.el-m3t{left:44.6%;top:53.5192%;width:17.5%}
.el-m3d{left:44.6%;top:54.2230%;width:16.5%}
.el-mode4{left:34.43%;top:56.3248%;width:35.00%}
.el-m4t{left:36.32%;top:57.7710%;width:17%}
.el-m4d{left:36.32%;top:58.4459%;width:16.1%}

/* ===== CREDITS ===== */
.el-ctitle{left:42.66%;top:61.6179%;width:16.89%;z-index:3}
/* "Credits" yazısı tahtanın tam ortasında (tahta, görselin içinde x%10.1–%92.6 / y%10.4–%83.3) */
.el-ctitletxt{left:44.37%;top:61.9554%;width:13.93%;height:2.3718%;z-index:4;
  display:grid;place-items:center;text-align:center;
  font-family:var(--f);font-weight:400;font-size:1.5cqw;color:#4a3a28}
/* Açık renkli ip/dal görselleri kaldırıldı: etiketler artık arka plandaki
   ormanın kendi dallarına asılı (forest.webp içindeki iki yatay dal:
   tuval %64.9235 ve %73.7056). Etiket üstleri ipin ucu dalın içine
   girsin diye 8px aşağı alındı. Görseller HTML'de duruyor, sadece gizli. */
.el-rope1,.el-rope2{display:none}
/* yeni kartlar: 171x373, alttaki kırmızı bantta sadece isim */
.tag{width:8.85%;aspect-ratio:171/373;z-index:3;
  transform-origin:46.8% 0.5%;                     /* ipin en üstü = sallanma noktası */
  animation:tagIdle 6s ease-in-out infinite;will-change:transform}
.tag:hover{z-index:4}
.tag__in{position:absolute;inset:0;transform-origin:46.8% 0.5%;will-change:transform}
.tag:hover .tag__in{animation:tagSwing 1.4s cubic-bezier(.25,.6,.35,1) 1 both}
.tag__card{width:100%;position:absolute;inset:0}
/* kırmızı bant: üstte isim, altında ünvan */
.tag__ad{position:absolute;left:3%;top:84.4%;width:94%;height:14%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fbf3e6;text-shadow:0 1px 2px rgba(0,0,0,.4);
  font-family:var(--f);overflow:hidden}
.tag__name{font-size:0.70cqw;line-height:1.06}
.tag__role{font-size:0.52cqw;line-height:1.04;opacity:.9;margin-top:.12em}

/* idle: sürekli, çok hafif */
@keyframes tagIdle{
  0%,100%{transform:rotate(-0.7deg)}
  50%    {transform:rotate(0.7deg)}
}
/* hover: TEK sefer sallanır ve söner (loop yok), idle'ın üstüne biner */
@keyframes tagSwing{
  0%  {transform:rotate(0deg)}
  16% {transform:rotate(2.6deg)}
  38% {transform:rotate(-1.7deg)}
  58% {transform:rotate(1deg)}
  76% {transform:rotate(-0.5deg)}
  90% {transform:rotate(0.2deg)}
  100%{transform:rotate(0deg)}
}
/* eşit aralık: 194px adım (1920 tuvalde), grup ortası 940px
   üst sıra merkez: 649,843,1037,1231 — alt sıra tam aralara: 746,940,1134 */
.tag-r1-1{left:29.375%;top:64.6190%;animation-delay:-0.0s}
.tag-r1-2{left:39.479%;top:64.6190%;animation-delay:-1.1s}
.tag-r1-3{left:49.583%;top:64.6190%;animation-delay:-2.4s}
.tag-r1-4{left:59.688%;top:64.6190%;animation-delay:-3.3s}
.tag-r2-1{left:34.427%;top:73.4011%;animation-delay:-0.7s}
.tag-r2-2{left:44.531%;top:73.4011%;animation-delay:-1.9s}
.tag-r2-3{left:54.635%;top:73.4011%;animation-delay:-2.9s}

/* ===== NEWSLETTER ===== */
.el-news{left:35.46%;top:83.8219%;width:29.12%;aspect-ratio:559/326;z-index:3}
.news__img{width:100%;position:absolute;inset:0}
/* iç öğeler zarfa göre yüzde (zarf: x681 y4474 w559 h326) */
.news__hdr{position:absolute;left:10.2%;top:20.2%;font-family:var(--f);
  font-size:0.938cqw;color:#3f3226}
.news__desc{position:absolute;left:10.2%;top:30.0%;width:26%;font-family:var(--f);
  font-size:0.521cqw;line-height:1.32;color:#4a3a28}
.news__form{position:absolute;left:8.2%;top:67.4%;width:29.9%;height:12%;display:flex;
  align-items:center;border:1.5px solid #b7a98f;border-radius:.4cqw;background:rgba(255,255,255,.22)}
.news__form input{flex:1;min-width:0;background:transparent;border:none;
  font-family:var(--f);color:var(--ink);font-size:0.5cqw;padding:0 7%}
.news__form input::placeholder{color:#9a8a72}
.news__form input:focus{outline:none}
.news__form button{width:16%;background:transparent;border:none;color:#7a5c3a;
  font-size:1cqw;cursor:pointer;font-family:var(--f)}
/* sosyal ikonlar: tuval koordinatından zarf-içi yüzdeye */
.soc{position:absolute;background:center/contain no-repeat;transition:transform .18s;z-index:2}
.soc:hover{transform:translateY(-8%) scale(1.08)}
.soc--reddit   {left:43.8%;top:22.3%;width:13.5%;height:25.2%;background-image:url('../images/Redit.png')}
.soc--reddit:hover{background-image:url('../images/ReditHover.png')}
.soc--instagram{left:60.5%;top:21.8%;width:13.6%;height:22.9%;background-image:url('../images/instagram.png')}
.soc--instagram:hover{background-image:url('../images/instagramHover.png')}
.soc--youtube  {left:76.6%;top:22.3%;width:16.9%;height:23.3%;background-image:url('../images/Youtube.png')}
.soc--youtube:hover{background-image:url('../images/YoutubeHover.png')}
.soc--tiktok   {left:45.2%;top:53.9%;width:14.2%;height:27.5%;background-image:url('../images/Tiktok.png')}
.soc--tiktok:hover{background-image:url('../images/TiktokHover.png')}
.soc--facebook {left:59.3%;top:53.4%;width:16.0%;height:27.5%;background-image:url('../images/Facebook.png')}
.soc--facebook:hover{background-image:url('../images/FacebookHover.png')}
.soc--x        {left:75.8%;top:54.7%;width:14.2%;height:24.5%;background-image:url('../images/X.png')}
.soc--x:hover{background-image:url('../images/XHover.png')}
.news__msg{position:absolute;left:10.2%;top:89%;color:#c8443b;font-size:0.55cqw}

/* ===== FOOTER ===== */
.el-footer{left:0;top:86.5118%;width:100%;z-index:1}
.el-footerlogo{left:40.57%;top:92.8847%;width:18.85%;z-index:2;
  filter:drop-shadow(0 .3cqw .7cqw rgba(0,0,0,.45))}
.el-fmailhdr{left:0;top:98.4092%;width:100%;text-align:center;z-index:2;
  font-family:var(--f);font-size:0.833cqw;color:#d9cdb8}
.el-fmail{left:0;top:99.1805%;width:100%;text-align:center;z-index:2;
  font-family:var(--f);font-size:0.62cqw;color:#c9bda8}
.el-fmail a{color:inherit;text-decoration:none;transition:color .15s}
.el-fmail a:hover,.el-fmail a:focus-visible{color:#f4efe4;text-decoration:underline}

/* ===== DİL SEÇİCİ (sayfa boyunca sağ üstte sabit) ===== */
.dilsec{position:fixed;top:14px;right:16px;z-index:60;display:flex;gap:6px}
.dilbtn{display:grid;place-items:center;min-width:46px;height:30px;padding:0 10px;
  font-family:var(--f);font-size:13px;line-height:1;color:#f4efe4;text-decoration:none;
  background:url('../images/TitleButton.png') center/100% 100% no-repeat;
  text-shadow:0 1px 2px rgba(0,0,0,.55);opacity:.72;cursor:pointer;
  transition:opacity .15s,transform .15s,filter .15s}
.dilbtn:hover{opacity:1;transform:translateY(-2px);
  background-image:url('../images/TitleButtonHover.png')}
.dilbtn.is-on{opacity:1;filter:brightness(1.12)}
@media (max-width:640px){
  .dilsec{top:8px;right:8px;gap:4px}
  .dilbtn{min-width:38px;height:26px;padding:0 7px;font-size:11px}
}

/* ===== MODAL ===== */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(4px)}
.modal__box{position:relative;width:min(900px,92vw);z-index:2}
.modal__ratio{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.modal__ratio iframe{position:absolute;inset:0;width:100%;height:100%}
.modal__close{position:absolute;top:-46px;right:0;background:none;border:none;color:#fff;font-size:2.2rem;cursor:pointer}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =====================================================================
   KATMANLI SAHNE — parallax arka plan  (newResource/WebsiteBackground)
   Katmanlar .stage tuvaline oranlı yerleşir; sadece gökyüzü ve kuşlar
   scroll ile kayar (js/script.js), diğerleri sabittir.
   Tuval haritası (1920x5576):
     gök/kuş/karakter 0-1080 · duvar 0-2074 · masa 2074-3400
     gece 3400-5576 · orman (ön plan) altta 2447px
   ===================================================================== */
.scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sc{position:absolute;left:0;width:100%;background-repeat:no-repeat;
  background-position:center top;background-size:100% 100%;will-change:transform}
/* mobil katmanlar masaüstünde kapalı */
.sc-msky,.sc-mstar,.sc-mcloud,.sc-mchars,.sc-mwall,.sc-mdecktop,.sc-mdeck{display:none}

.sc-sky   {top:-2.5108%;height:21.8795%;background-image:url('../images/bg/sky.webp');
           animation:skyDrift 42s ease-in-out infinite}
.sc-bird  {top:0;height:19.3687%;background-image:url('../images/bg/bird.webp');
           background-size:100% 100%;animation:birdDrift 26s ease-in-out infinite}
.sc-chars {top:0;height:19.3687%;background-image:url('../images/bg/chars.webp')}
.sc-wall  {top:0;height:37.1951%;background-image:url('../images/bg/wall.webp')}
.sc-desk  {top:37.1951%;height:23.7805%;background-image:url('../images/bg/desk.webp')}
.sc-night {top:60.9756%;height:39.0244%;background-image:url('../images/bg/night.webp')}
.sc-forest{top:56.1155%;height:43.8845%;background-image:url('../images/bg/forest.webp')}

/* kuşlar süzülürken yatayda çok hafif salınır (transform js'te, çakışmasın diye
   burada background-position kullanıldı) */
@keyframes birdDrift{0%,100%{background-position:47.6% top}50%{background-position:52.4% top}}
@keyframes skyDrift {0%,100%{background-position:49.4% top}50%{background-position:50.6% top}}

/* sahne geldiği için düz hero ve footer görselleri artık gereksiz */
.el-hero,.el-footer{display:none}
.stage{background:#20232f}

@media (prefers-reduced-motion:reduce){
  .sc{animation:none!important;transform:none!important}
}

/* =====================================================================
   MOBİL / TABLET — 1024px ALTI
   Mobil için ayrı tasarım seti: images/m/ (arayüz) + images/mbg/ (sahne).
   Tüm ölçüler --s (tasarım birimi) üzerinden; 640px'de sabitlenir ki
   tablette panolar devasa büyümesin.
   Dikey harita (--s biriminde):  gök 0-1.81 · çim 1.43 · duvar 0-3.067
   masa başlangıcı 3.067 · tahta döngüsü 5.093'ten sonra
   ===================================================================== */
.grp{display:contents}

@media (max-width:1024px){
  .stage{--s:min(100vw,640px);
    aspect-ratio:auto;height:auto;display:block;overflow:visible;
    container-type:normal;padding:0 0 2rem;background:#2a1c17}

  /* --- sahne: masaüstü katmanları kapalı, mobil katmanlar açık --- */
  .sc-sky,.sc-bird,.sc-chars,.sc-wall,.sc-desk,.sc-night,.sc-forest{display:none}
  .sc-msky,.sc-mstar,.sc-mcloud,.sc-mchars,.sc-mwall,.sc-mdecktop,.sc-mdeck{display:block}
  .sc-msky    {top:calc(-.154*var(--s));height:calc(1.967*var(--s));background-image:url('../images/mbg/sky.webp')}
  .sc-mstar   {top:0;height:calc(1.403*var(--s));background-image:url('../images/mbg/star.webp')}
  .sc-mcloud  {top:0;height:calc(.564*var(--s));background-image:url('../images/mbg/cloud2.webp')}
  .sc-mchars  {top:0;height:calc(1.613*var(--s));background-image:url('../images/mbg/chars.webp')}
  .sc-mwall   {top:0;height:calc(3.067*var(--s));background-image:url('../images/mbg/wall.webp')}
  .sc-mdecktop{top:calc(3.067*var(--s));height:calc(2.026*var(--s));background-image:url('../images/mbg/deck-top.webp')}
  .sc-mdeck   {top:calc(5.093*var(--s));bottom:0;height:auto;
               background-image:url('../images/mbg/deck.webp');
               background-repeat:repeat-y;background-size:100% auto}

  .el{position:static;left:auto;top:auto;width:auto;height:auto;z-index:auto}
  .grp{display:block;position:relative;z-index:2}
  .scene{z-index:0}

  /* ==== ÜST: logo + ahşap menü çubuğu ====
     Menünün altındaki boşluk bilerek: arka plandaki karakterler orada duruyor,
     vagon da tıpkı masaüstünde olduğu gibi tuğla duvarın önüne oturuyor. */
  .stage::before{content:"";display:block;width:calc(.80*var(--s));
    margin:calc(.045*var(--s)) auto 0;aspect-ratio:354/200;position:relative;z-index:2;
    background:url('../images/m/MenuLogo.png') center/contain no-repeat;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
  /* Tahtanın gövdesi görselin x%4.3-96.3 / y%10.9-85.5 aralığı; butonlar
     (65px) o gövdeye göre ölçüldü. Genişlik yüzdesi padding'li kutuya göre
     hesaplandığı için buton boyutunu YÜKSEKLİKTEN veriyoruz. */
  .el-nav{position:relative;z-index:3;display:flex;justify-content:space-between;
    align-items:center;width:calc(.86*var(--s));aspect-ratio:352/110;
    padding:0 7% 3.3%;
    margin:calc(1.134*var(--s)) auto calc(.211*var(--s));
    background:url('../images/m/MenuPanel.png') center/100% 100% no-repeat}
  .nav__banner{display:none}
  /* Buton kâğıdının alt yarısı boş — etiket oraya yazılıyor (Figma'daki gibi) */
  /* Buton kâğıdının alt yarısı boş — etiket oraya yazılıyor (Figma'daki gibi).
     DİKKAT: padding yüzdesi butonun kendi genişliğine göre DEĞİL, kapsayıcının
     genişliğine göre hesaplanıyor; bu yüzden em kullanıldı (yoksa butonlar
     taşıyor). */
  /* position:static -> relative yapınca masaüstündeki .nb-*{left:%} değerleri
     göreli kaydırma olarak devreye giriyor ve butonlar sağa uçuyor: sıfırla. */
  .navbtn{position:relative;left:auto;top:auto;right:auto;bottom:auto;
    flex:0 0 auto;width:20.3%;height:auto;max-width:none;
    min-width:0;aspect-ratio:1;background:center/contain no-repeat;border-radius:0;
    display:flex;align-items:flex-end;justify-content:center;
    padding:0 .2em 1.75em;font-size:.5rem;line-height:1;color:#5a4a34;
    text-indent:0;text-shadow:none;white-space:nowrap;overflow:visible;
    transition:transform .15s}
  .navbtn:active{transform:scale(.9)}
  /* Çince etiketler 4 karakter; kâğıdı taşmasın diye biraz küçük */
  [data-dil="zh"] .navbtn{font-size:.42rem;letter-spacing:-.01em}
  .nb-g{background-image:url('../images/m/GameButton.png')}
  .nb-v{background-image:url('../images/m/VideoButton.png')}
  .nb-c{background-image:url('../images/m/CreditsButton.png')}
  .nb-l{background-image:url('../images/m/PressKitButton.png')}
  .nb-g:hover,.nb-g:focus-visible{background-image:url('../images/m/GameButtonHover.png')}
  .nb-v:hover,.nb-v:focus-visible{background-image:url('../images/m/VideoButtonHover.png')}
  .nb-c:hover,.nb-c:focus-visible{background-image:url('../images/m/CreditsButtonHover.png')}
  .nb-l:hover,.nb-l:focus-visible{background-image:url('../images/m/PressKitButtonHover.png')}

  /* ==== VİDEO VAGONU (mobil panel) ==== */
  .el-wagon{position:relative;z-index:2;width:calc(.94*var(--s));margin:0 auto;
    aspect-ratio:376/287;background:url('../images/m/VideoPanel.png') center/100% 100% no-repeat}
  .wagon__img{display:none}
  .wagon__screen{left:25.5%;top:28.2%;width:60.7%;height:43.6%}
  .playbtn{width:15%;border-width:2px;opacity:.9}
  .playbtn::before{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
  /* mobil panelin iç geometrisi masaüstüyle aynı: sol kapak %13-25.5,
     sağ kapak %86.2-98.4 — oklar kapakların ortasına oturuyor */
  .warrow{width:9.3%;height:33%;top:29%}
  .warrow--prev{left:14.6%;background-image:url('../images/m/LeftArrowVideo.png')}
  .warrow--next{left:87.6%;background-image:url('../images/m/RightArrowVideo.png')}
  .warrow--prev:hover{background-image:url('../images/m/LeftArrowVideoHover.png')}
  .warrow--next:hover{background-image:url('../images/m/RightArrowVideoHover.png')}

  /* ==== STEAM ==== */
  .el-steam{position:relative;z-index:2;width:calc(.94*var(--s));
    margin:calc(.206*var(--s)) auto 0}

  /* ==== OYUN TANITIMI — parşömen ====
     min-height parşömenin doğal oranı; metin uzarsa kutu büyür, görsel de
     onunla birlikte uzar (kâğıt dokusu bunu kaldırıyor). */
  .grp-game{width:calc(.87*var(--s));min-height:calc(1.04*var(--s));
    margin:calc(.07*var(--s)) auto calc(.09*var(--s));
    padding:19.5% 21% 11% 13.5%;
    background:url('../images/m/PatchkinsPartyText.png') center/100% 100% no-repeat}
  .el-parch{display:none}
  .el-gamedesc{display:block;height:auto;font-size:.83rem;line-height:1.5;
    color:#5f4d37;margin:0}
  /* Başlık, görseldeki metal klipsin iç etiketine oturuyor
     (asset içinde x%28.5-59.5 / y%4.6-11.6). İki satıra bölünsün diye
     yazı kutusu etiketten dar; "PATCHKINS" tek satıra sığan en geniş hali. */
  .el-gametitle{display:grid;place-items:center;height:7.2%;
    position:absolute;left:28.5%;top:4.5%;width:31%;margin:0;padding:0;
    font-size:.55rem;line-height:1.06;letter-spacing:.01em;
    color:#4a3a28;text-align:center;text-shadow:none;
    /* Font hangisi olursa olsun iki satır olsun: boşluk satırı zorla kırar
       (Finger Paint yüklenmezse sistem fontu daha geniş yazıyor). */
    word-spacing:100vw}

  /* ==== MOD KARTLARI — polaroid (art) + not kâğıdı (note, border-image) ====
     Kâğıt metin kadar uzar, yırtık kenarlar ve polaroid bozulmaz. */
  .grp-mode{position:relative;width:calc(.88*var(--s));margin:0 auto calc(.075*var(--s))}
  .grp-mode.m2,.grp-mode.m4{margin-right:calc(.045*var(--s))}
  .grp-mode.m1,.grp-mode.m3{margin-left:calc(.045*var(--s))}
  .el-mode1,.el-mode2,.el-mode3,.el-mode4{display:none}
  .grp-mode::before{content:"";display:block;width:100%;position:relative;z-index:2;
    background:center bottom/100% 100% no-repeat;margin-bottom:-1px;pointer-events:none}
  .grp-mode.m1::before{aspect-ratio:268/92;background-image:url('../images/m/mode1-art.png')}
  .grp-mode.m2::before{aspect-ratio:283/129;background-image:url('../images/m/mode2-art.png')}
  .grp-mode.m3::before{aspect-ratio:288/96;background-image:url('../images/m/mode3-art.png')}
  .grp-mode.m4::before{aspect-ratio:282/91;background-image:url('../images/m/mode4-art.png')}
  .grp-mtxt{display:block;position:relative;z-index:1;padding:.15rem .8rem .65rem;
    border-style:solid;border-color:transparent;border-image-repeat:stretch round}
  .grp-mode.m1 .grp-mtxt{border-width:3px 12px 18px 24px;
    border-image-source:url('../images/m/mode1-note.png');border-image-slice:3 12 18 24 fill}
  .grp-mode.m2 .grp-mtxt{border-width:3px 15px 22px 13px;
    border-image-source:url('../images/m/mode2-note.png');border-image-slice:3 15 22 13 fill}
  .grp-mode.m3 .grp-mtxt{border-width:3px 16px 20px 16px;
    border-image-source:url('../images/m/mode3-note.png');border-image-slice:3 16 20 16 fill}
  .grp-mode.m4 .grp-mtxt{border-width:3px 15px 20px 15px;
    border-image-source:url('../images/m/mode4-note.png');border-image-slice:3 15 20 15 fill}
  .modehdr{font-size:1rem;color:#3f3226;margin:0 0 .3rem;text-align:center}
  .modedesc{font-size:.745rem;line-height:1.44;color:#5a4a38}

  /* ==== EKİP ==== */
  .el-ctitle,.el-rope1,.el-rope2{display:none}
  .grp-credits{width:calc(.55*var(--s));aspect-ratio:116/52;display:grid;place-items:center;
    margin:calc(.05*var(--s)) auto calc(.03*var(--s));
    background:url('../images/m/CreditsPanelTitle.png') center/100% 100% no-repeat}
  .el-ctitletxt{display:block;height:auto;margin:0;text-align:center;
    font-size:1.02rem;color:#4a3a28;text-shadow:none}
  .grp-tags{width:calc(.96*var(--s));margin:0 auto calc(.08*var(--s));
    padding:7.5% 7% 6.5%;display:grid;grid-template-columns:1fr 1fr;
    gap:.55rem .4rem;align-items:end;justify-items:center;
    background:url('../images/m/CreditsPanel.png') center/100% 100% no-repeat}
  /* pul kartları: masaüstü ip animasyonu ve 171/373 oranı burada geçersiz */
  /* pul kartları: masaüstü ip animasyonu ve 171/373 oranı burada geçersiz */
  .tag{position:relative;width:100%;aspect-ratio:auto;animation:none;transform:none;
    display:flex;justify-content:center;padding:0}
  .tag:hover .tag__in{animation:none}
  .tag__card{display:none}
  .tag__in{position:relative;inset:auto;transform:none;animation:none!important;
    background:center/100% 100% no-repeat}
  /* Figma'daki gibi: kırmızı bandın üstünde iki satır — üstte isim, altında
     ünvan. .tag__ad artık kartın tamamı değil, doğrudan bandın kutusu. */
  .tag__ad{position:absolute;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:.06em;padding:0 4%;
    overflow:visible;text-align:center;color:#fdf1df;
    text-shadow:0 1px 2px rgba(0,0,0,.45)}
  .tag__name{display:block;font-size:.58rem;line-height:1.05;white-space:nowrap}
  .tag__role{display:block;font-size:.46rem;line-height:1.06;white-space:nowrap;
    color:#fdf1df;text-shadow:0 1px 2px rgba(0,0,0,.45);opacity:.97;margin:0}
  /* her kartın oranı, genişliği ve kırmızı bandının yeri ayrı ayrı ölçüldü */
  .tag-r1-1 .tag__in{width:100%;aspect-ratio:192/106;background-image:url('../images/m/Onur.png')}
  .tag-r1-1 .tag__ad{left:48%;top:11%;width:50%;height:34%;transform:rotate(-2.1deg)}
  .tag-r1-2 .tag__in{width:82%;aspect-ratio:154/124;background-image:url('../images/m/Sule.png')}
  .tag-r1-2 .tag__ad{left:2%;top:64%;width:62%;height:32%;transform:rotate(5.6deg)}
  .tag-r1-3 .tag__in{width:100%;aspect-ratio:188/124;background-image:url('../images/m/Derya.png')}
  .tag-r1-3 .tag__ad{left:2%;top:45%;width:51%;height:32%;transform:rotate(5.6deg)}
  .tag-r1-4 .tag__in{width:78%;aspect-ratio:134/128;background-image:url('../images/m/Umur.png')}
  .tag-r1-4 .tag__ad{left:13%;top:69%;width:72%;height:28%;transform:rotate(2.2deg)}
  .tag-r2-1 .tag__in{width:62%;aspect-ratio:126/160;background-image:url('../images/m/Ozlem.png')}
  .tag-r2-1 .tag__ad{left:2%;top:2%;width:77%;height:26%;transform:rotate(-5.3deg)}
  .tag-r2-2 .tag__in{width:92%;aspect-ratio:157/132;background-image:url('../images/m/Baris.png')}
  .tag-r2-2 .tag__ad{left:36%;top:2%;width:62%;height:29%;transform:rotate(-3.4deg)}
  .tag-r2-3 .tag__in{width:62%;aspect-ratio:119/155;background-image:url('../images/m/Okan.png')}
  .tag-r2-3 .tag__ad{left:3%;top:71%;width:80%;height:26%;transform:rotate(5.6deg)}

  /* ==== BÜLTEN — zarf ==== */
  /* DİKKAT: zarfın kartı görselin ortasında DEĞİL — iç krem alan asset
     içinde x%16.6-87.7, yani merkezi %52.1. İçerik kutunun ortasına
     hizalanınca 8px sola kayıyordu; sol/sağ padding buna göre asimetrik. */
  .el-news{position:relative;z-index:2;width:calc(.94*var(--s));
    min-height:calc(1.06*var(--s));margin:0 auto calc(.07*var(--s));
    padding:11% 14.3% 9% 18.6%;display:flex;flex-direction:column;
    background:url('../images/m/CommunicationPanel.png') center/100% 100% no-repeat}
  .news__img{display:none}
  .news__hdr{position:static;font-size:1.08rem;color:#4a3a28;margin:0 0 1rem;
    text-align:center}
  .news__desc{position:static;width:auto;font-size:.79rem;line-height:1.55;
    color:#5f4d37;margin:0 0 1.5rem;text-align:center}
  .news__form{position:static;width:100%;height:2.7rem;margin:0 0 1.4rem;border:none;
    border-radius:0;background:url('../images/m/EmailButton.png') center/100% 100% no-repeat}
  .news__form input{font-size:.82rem;color:#4a3a28;padding:0 .8rem}
  .news__form input::placeholder{color:#9a8a72}
  .news__form button{width:2.4rem;font-size:1.15rem;color:#8a6134}
  .news__social{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;
    justify-items:center;margin:0}
  /* İkon PNG'lerinin iç boşlukları farklı (doluluk %84-98), sabit kutuda
     bazıları büyük bazıları küçük duruyordu. Her biri için iki değerli
     background-size ile görünen simge boyutu eşitlendi (en-boy korunuyor). */
  .soc{position:static;width:2.5rem;height:2.5rem;flex:0 0 auto;
    background-position:center;background-repeat:no-repeat}
  .soc--reddit   {background-size:100% 100%}
  .soc--instagram{background-size:90.3% 92.5%}
  .soc--youtube  {background-size:102% 82%}
  .soc--tiktok   {background-size:87.1% 94%}
  .soc--facebook {background-size:93.9% 95%}
  .soc--x        {background-size:93% 90.6%}
  .news__msg{position:static;margin:.6rem 0 0;font-size:.72rem;text-align:center}

  /* ==== FOOTER ==== */
  .el-footerlogo{display:block;width:60%;max-width:240px;margin:1.2rem auto .8rem;
    position:relative;z-index:2}
  .el-fmailhdr{font-size:.95rem;text-align:center;color:#f2e6cd;margin-bottom:.3rem;
    position:relative;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.65)}
  .el-fmail{font-size:.78rem;text-align:center;line-height:1.9;position:relative;z-index:2;
    padding:0 5vw;color:#e0d1b4;text-shadow:0 1px 3px rgba(0,0,0,.65)}
  .el-fmail a{display:inline-block;padding:.15rem .35rem}

  /* --- dil seçici --- */
  .dilsec{top:10px;right:10px;gap:5px}
  .dilbtn{min-width:42px;height:28px;font-size:12px;padding:0 8px}
}

@media (max-width:400px){
  /* başlık artık klipsin içinde — burada da küçük kalmalı */
  .el-gametitle{font-size:.52rem}
  .el-gamedesc{font-size:.78rem;line-height:1.46}
  .modedesc{font-size:.71rem}
  .modehdr{font-size:.94rem}
  .news__desc{font-size:.7rem}
  .tag__name{font-size:.53rem}
  .tag__role{font-size:.43rem}
}